/* ===========================================================
   REVO — Landing de verano (experiencias sueltas)
   Versión alternativa de la home: reutiliza hero, header,
   footer, botones, eyebrow, reveal y el degradado vivo de
   revo-amanecer.css. Aquí solo viven las secciones nuevas.
   =========================================================== */

/* ---------- hero: subtítulo un punto más estrecho ---------- */
.hero-sub{ max-width:34ch; }

/* ---------- "Por qué REVO" — declaración (white moment) ---------- */
.why-head{ max-width:1000px; }
.why-head .eyebrow{ margin-bottom:26px; }
.why-head h2{ font-family:var(--display); font-weight:400; font-size:clamp(40px,6.4vw,96px); line-height:1.0; letter-spacing:-.022em; margin:0; color:var(--ink-dark); text-wrap:balance; }
.why-head h2 .ser{ font-family:var(--serif); font-style:italic; font-weight:500; }
.why-head .lead{ margin:30px 0 0; font-size:clamp(18px,1.5vw,23px); line-height:1.52; color:rgba(17,19,24,.66); max-width:60ch; text-wrap:pretty; }

/* ---------- Los combos (sobre el degradado azul) ---------- */
.combos-head{ max-width:900px; margin:0 0 clamp(40px,5vw,60px); }
.combos-head .eyebrow{ color:var(--ink-dark); margin-bottom:26px; }
.combos-head .eyebrow::before{ background:var(--teal); box-shadow:0 0 10px rgba(104,129,252,.6); }
.combos-head h2{ font-family:var(--display); font-weight:400; font-size:clamp(40px,5.6vw,86px); line-height:1.0; letter-spacing:-.02em; margin:0; color:var(--ink-dark); }
.combos-head h2 .ser{ font-family:var(--serif); font-style:italic; font-weight:500; }

.combos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.combo{ position:relative; display:flex; flex-direction:column; border-radius:20px; overflow:hidden; isolation:isolate;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:
    0 34px 70px -40px rgba(20,30,80,.32),
    0 8px 22px -12px rgba(20,30,80,.16),
    inset 1px 1px 0 rgba(255,255,255,.8);
  transition:transform .5s var(--ease), box-shadow .5s; }
.combo::after{ content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(17,19,24,.09); pointer-events:none; z-index:4; }
.combo > *{ position:relative; z-index:2; }
.combo:hover{ transform:translateY(-8px);
  box-shadow:0 50px 92px -42px rgba(20,30,80,.4), 0 12px 26px -12px rgba(20,30,80,.2), inset 1px 1px 0 rgba(255,255,255,.9); }
.combo-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:rgba(17,19,24,.04); z-index:1; }
.combo-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); }
.combo:hover .combo-media img{ transform:scale(1.045); }
.combo-body{ display:flex; flex-direction:column; flex:1; padding:24px 26px 26px; }
.combo-name{ font-family:var(--display); font-weight:500; font-size:23px; letter-spacing:-.01em; margin:0; color:var(--ink-dark); }
.combo-tagline{ margin:9px 0 0; font-size:15px; line-height:1.4; color:var(--ink-dark); font-weight:500; }
.combo-desc{ margin:12px 0 0; font-size:13.5px; line-height:1.6; color:rgba(17,19,24,.62); }
.combo-therapies{ margin:16px 0 14px; padding-top:14px; border-top:1px solid rgba(17,19,24,.12);
  font-size:10.5px; letter-spacing:.05em; line-height:1.55; color:rgba(17,19,24,.5); text-transform:uppercase; }
.combo-meta{ display:flex; align-items:baseline; gap:12px; margin-top:auto; padding-top:8px; }
.combo-dur{ font-size:12.5px; color:rgba(17,19,24,.55); }
.combo-price{ font-family:var(--display); font-weight:500; font-size:23px; letter-spacing:-.01em; color:var(--ink-dark); margin-left:auto; }
.combo-cta{ display:flex; gap:10px; margin-top:18px; }
.combo-cta .btn{ flex:1; padding:13px 14px; letter-spacing:.12em; }
@media (max-width:980px){ .combos-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .combos-grid{ grid-template-columns:1fr; } }

/* ---------- Regala REVO (split texto + imagen, white moment) ---------- */
.gift{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(40px,5vw,84px); align-items:center; }
.gift-text .eyebrow{ margin-bottom:26px; }
.gift-text h2{ font-family:var(--display); font-weight:400; font-size:clamp(36px,4.8vw,72px); line-height:1.02; letter-spacing:-.02em; margin:0; color:var(--ink-dark); text-wrap:balance; }
.gift-text h2 .ser{ font-family:var(--serif); font-style:italic; font-weight:500; }
.gift-text p{ margin:24px 0 0; font-size:clamp(16px,1.3vw,19px); line-height:1.6; color:rgba(17,19,24,.66); max-width:44ch; }
.gift-text .btn{ margin-top:34px; }
.gift-media{ border-radius:22px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 50px 110px -56px rgba(20,30,80,.45); }
.gift-media img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px){ .gift{ grid-template-columns:1fr; gap:34px; } .gift-media{ aspect-ratio:16/10; } }

/* ---------- Cierre / CTA (dark, centrado) ---------- */
.cierre{ text-align:center; padding:clamp(120px,18vh,220px) 0; }
.cierre .eyebrow{ justify-content:center; margin-bottom:28px; }
.cierre h2{ font-family:var(--display); font-weight:400; font-size:clamp(46px,8vw,128px); line-height:.96; letter-spacing:-.02em; margin:0 auto; color:#fff; max-width:16ch; text-wrap:balance; }
.cierre h2 .ser{ font-family:var(--serif); font-style:italic; font-weight:500; }
.cierre .cta-btns{ display:flex; gap:14px; justify-content:center; margin-top:46px; flex-wrap:wrap; }

/* ---------- header de landing (logo · desplegable terapias · reservar) ---------- */
.header-nav{ display:flex; align-items:center; margin-left:auto; }
.header-cta{ margin-left:0; }
/* (el desplegable del header lo define ahora revo-amanecer.css, sistema unificado) */

@media (max-width:720px){ .header-nav{ display:none; } }

/* ---------- footer sobre blanco (la sección previa es oscura, así que
   el degradado azul quedaba detrás; lo fijamos en blanco) ---------- */
.site-footer{ background:#fff; }

/* ---------- intro (post-hero): titular centrado · foto en medio con revelado ---------- */
.intro-band{ text-align:center; }
.intro-band .eyebrow{ justify-content:center; margin-bottom:28px; }
.intro-band .intro-lead{ font-family:var(--display); font-weight:400; font-size:clamp(22px,2.6vw,40px); line-height:1.2; letter-spacing:-.02em; margin:0 auto; max-width:42ch; color:var(--ink-dark); text-wrap:balance; }
.intro-band .intro-lead .ser{ font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:-.04em; font-size:1.03em; }
.intro-band .intro-sub{ margin:16px auto 0; max-width:52ch; font-size:clamp(15px,1.25vw,18px); line-height:1.55; color:rgba(17,19,24,.56); }
.intro-band .media{ position:relative; margin:clamp(40px,5vw,64px) auto 0; max-width:1040px; aspect-ratio:16/8; border-radius:22px; overflow:hidden; clip-path:inset(0 0 0 0 round 22px);
  box-shadow:0 60px 120px -56px rgba(20,30,80,.5); }
.intro-band .media-par{ position:absolute; inset:0; will-change:transform; transform:scale(1); }
.intro-band .media img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; }
.intro-band .body{ margin:clamp(34px,4vw,52px) auto 0; max-width:58ch; font-size:clamp(16px,1.3vw,20px); line-height:1.58; color:rgba(17,19,24,.62); }
.intro-band .body strong{ color:var(--ink-dark); font-weight:500; }
/* tres golpes sobreimpresos dentro de la imagen */
.intro-band .media-caption{ position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:0;
  padding:clamp(28px,4vw,56px); text-align:left;
  background:linear-gradient(0deg, rgba(6,9,28,.62) 0%, rgba(6,9,28,.12) 38%, rgba(6,9,28,0) 64%); }
.intro-band .media-caption .intro-beat{ font-family:var(--display); font-weight:400; font-size:clamp(28px,4.2vw,62px); line-height:1.02; letter-spacing:-.03em; margin:0; color:#fff; text-shadow:0 2px 30px rgba(6,9,28,.4); }
.intro-band .media-caption .intro-beat .ser{ font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:-.04em; font-size:1.04em; }
/* revelado lujoso: apertura cinematográfica desde el centro + asentamiento lento + barrido de luz */
.intro-band .media::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.42) 50%, transparent 60%); transform:translateX(-130%); }
.intro-band .media.reveal{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion:no-preference){
  .intro-band .media{ transition:clip-path 1.3s cubic-bezier(.16,1,.3,1); }
  .intro-band .media-par{ transition:transform 2.1s cubic-bezier(.16,1,.3,1); }
  .intro-band .media.reveal:not(.in){ clip-path:inset(47% 0 47% 0 round 22px); }
  .intro-band .media.reveal:not(.in) .media-par{ transform:scale(1.09); }
  .intro-band .media.in::before{ animation:introSheen 1.5s cubic-bezier(.16,1,.3,1) .45s both; }
  .intro-band .media-caption{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease) .55s, transform .9s var(--ease) .55s; }
  .intro-band .media.in .media-caption{ opacity:1; transform:none; }
}
@keyframes introSheen{ from{ transform:translateX(-130%); } to{ transform:translateX(130%); } }
@media(max-width:680px){ .intro-band .media{ aspect-ratio:4/3; } }

/* ---------- terapias: gutters responsive + fix del scroll-snap ----------
   El bloque de terapias trae gutters fijos de 64px. En móvil/estrecho
   (sección NO fijada) `.cards` es un scroll horizontal con scroll-snap,
   que al iniciar consume el padding-left (scrollLeft=64) y deja la
   primera tarjeta pegada al borde. Igualamos los gutters al sistema
   responsive y declaramos scroll-padding para que el snap respete el
   margen inicial. */
.therapies-pin .therapies-head{ padding-inline:clamp(24px,5vw,64px); }
/* el titular de terapias ahora ocupa 2 líneas; con line-height ~1.0 quedaba
   apretado, así que le damos algo de aire */
.therapies-pin .therapies-head h2{ line-height:1.08; }
/* en modo pinned el bloque se centra y el título queda pegado arriba;
   lo alineamos arriba con un margen superior y apretamos el título/subtítulo
   a las tarjetas */
.therapies-pin.pinned .t-screen{ justify-content:flex-start; padding-top:clamp(56px,9vh,92px); gap:22px; }
.therapies-pin .cards{ padding-inline:clamp(24px,5vw,64px); scroll-padding-left:clamp(24px,5vw,64px); }

@media (max-width:600px){
  /* titulares grandes → más pequeños en móvil */
  /* titulares de sección: mismo tamaño que la home (clamp(28px,8.2vw,40px)) */
  .why-head h2{ font-size:clamp(28px,8.2vw,40px); }
  .combos-head h2{ font-size:clamp(28px,8.2vw,40px); }
  .gift-text h2{ font-size:clamp(28px,8.2vw,40px); }
  .cierre h2{ font-size:clamp(36px,10vw,50px); }
  .intro-band .media-caption .intro-beat{ font-size:clamp(26px,7vw,38px); }
}