/* ═══════════════════════════════════════════════════════════════
   MIRAME — PRO REFINEMENTS (aditivo, NO toca el style original)
   Validado contra feedback_redesign_pro_refinements.md
   - Mesh gradient hero animado
   - Scroll progress bar
   - Reveal IntersectionObserver
   - Hover lifts cubic-bezier
   - Glassmorphism nav
   - Custom scrollbar marca
   - Selection color marca
   - Marquee infinite
   - Counter animado stats
   - Parallax mouse desktop
   - Section eyebrow line grow
   - Image clip-path mask reveal
   - Button shimmer sweep
   - Logo nav float anim
   - Mobile-safe (mesh estático, parallax off ≤768px)
   - Reduced-motion respect
   ═══════════════════════════════════════════════════════════════ */

/* === SCROLL PROGRESS === */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: var(--sp, 0%);
  background: linear-gradient(90deg, var(--rose) 0%, var(--gold) 100%);
  box-shadow: 0 0 10px rgba(184, 104, 122, .55);
  z-index: 1100;
  transition: width .15s ease-out;
  pointer-events: none;
}

/* === SELECTION & SCROLLBAR === */
::selection { background: var(--rose); color: #fff; }
::-moz-selection { background: var(--rose); color: #fff; }

@media (min-width: 769px) {
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--cream); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--rose) 0%, var(--rose-dark) 100%);
    border-radius: 10px;
    border: 2px solid var(--cream);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--gold) 0%, var(--rose-dark) 100%);
  }
}

/* === GLASSMORPHISM NAV ENHANCE === */
nav#navbar {
  background: rgba(253, 246, 248, .78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(201, 132, 122, .15) !important;
}
nav#navbar.scrolled {
  background: rgba(253, 246, 248, .92) !important;
  box-shadow: 0 2px 24px rgba(42, 31, 30, .08), 0 1px 0 rgba(201, 149, 106, .15);
}
nav#navbar .nav-logo-img {
  animation: nav-float 6s ease-in-out infinite;
}
@keyframes nav-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* === MESH GRADIENT HERO ANIMADO === */
.hero {
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(201, 149, 106, .22) 0%, transparent 38%),
    radial-gradient(circle at 82% 18%, rgba(184, 104, 122, .25) 0%, transparent 42%),
    radial-gradient(circle at 50% 92%, rgba(247, 224, 230, .55) 0%, transparent 45%);
  filter: blur(40px);
  animation: mesh-shift 26s ease-in-out infinite alternate;
  opacity: .8;
}
@keyframes mesh-shift {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(-3%, 2%) scale(1.06) rotate(2deg); }
  100% { transform: translate(2%, -1%) scale(1.04) rotate(-1deg); }
}

/* Hero stagger (reveal-stagger applied on H1 words via JS) */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}
.split-word.is-revealed { opacity: 1; transform: translateY(0); }

/* === SECTION EYEBROW — line grow on reveal === */
.section-label {
  position: relative;
  display: inline-block;
  padding-left: 0;
  transition: padding-left .9s cubic-bezier(.16, 1, .3, 1);
}
.section-label::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: width 1s cubic-bezier(.16, 1, .3, 1) .15s;
}
.is-revealed .section-label::before,
.section-label.is-revealed::before { width: 28px; }
.is-revealed .section-label,
.section-label.is-revealed { padding-left: 38px; }

/* === REVEAL ON SCROLL (sections + cards) === */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform 1s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* Stagger children with delay per index (set as inline style data-reveal-i) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .7s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1);
}
.reveal-stagger.is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* === HOVER LIFTS — tratamento cards + porque-item + sobre-feature === */
.trat-card,
.porque-item,
.sobre-feature,
.result-item {
  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    box-shadow .55s cubic-bezier(.16, 1, .3, 1),
    border-color .4s ease;
}
.trat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 48px -16px rgba(184, 104, 122, .35), 0 1px 0 rgba(201, 149, 106, .25);
}
.porque-item:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 149, 106, .35) !important;
  box-shadow: 0 14px 36px -12px rgba(201, 149, 106, .35);
}
.sobre-feature:hover {
  transform: translateY(-4px);
}
.result-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(42, 31, 30, .55);
}

/* === BUTTON SHIMMER SWEEP === */
.btn-primary, .btn-wa, .btn-tel, .nav-cta {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .btn-wa::after, .btn-tel::after, .nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, .35) 50%,
    transparent 65%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform .85s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-wa:hover::after,
.btn-tel:hover::after,
.nav-cta:hover::after {
  transform: translateX(100%);
}

/* === IMAGE CLIP-PATH MASK REVEAL (sobre photos) === */
.sobre img,
.hero-image img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1) .1s, transform 7s ease-out;
}
.sobre img.cp-hidden,
.hero-image img.cp-hidden {
  clip-path: inset(15% 0 15% 0);
}

/* Subtle ken-burns on reveal */
.hero-image img.is-revealed { transform: scale(1.04); }

/* === PORQUE-NUM COUNTER POLISH === */
.porque-num {
  background: linear-gradient(180deg, var(--rose) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 30px rgba(201, 149, 106, .15);
}

/* === MARQUEE infinito (insertable entre secciones) === */
.mr-marquee {
  background: var(--dark);
  color: var(--gold);
  padding: 1rem 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(201, 149, 106, .12);
  border-bottom: 1px solid rgba(201, 149, 106, .12);
}
.mr-marquee-track {
  display: flex;
  gap: 3rem;
  animation: mr-scroll 38s linear infinite;
  white-space: nowrap;
  width: max-content;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: .04em;
}
.mr-marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.mr-marquee-track span::after {
  content: "•";
  color: rgba(201, 149, 106, .55);
  margin-left: 1rem;
}
@keyframes mr-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .mr-marquee-track { animation-duration: 56s; font-size: 1rem; }
}

/* === PARALLAX (set via JS, only desktop) === */
@media (max-width: 1024px) {
  .hero::before { animation: none; opacity: .55; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  .hero::before { animation: none; }
  .scroll-progress { display: none; }
}

/* === LEGAL PAGES — apply scroll progress + selection too (style-pro loaded by all pages) === */
.legal { isolation: isolate; }
.legal-back {
  position: relative;
  transition: gap .25s ease;
}
.legal-back::before {
  content: "";
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .35s ease;
}
.legal-back:hover::before { width: 100%; }