/* ═══════════════════════════════════════════════════════════
   THRIVE — sistema visual
   Un solo tema, cálido. El teal es acento, nunca fondo de página.
   Los valores salen de 01-entregables/thrive-system.html
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Casi blanco con un grado de calidez. Un fondo más claro deja que
     las sombras se lean y que las fotos floten — con el beige anterior
     todo quedaba plano y la calidez competía con las fotos. */
  --linen:#FAF8F4;
  --sand:#F0EBE3;
  --white:#FFFFFF;
  --ink:#1E1D1A;
  --ink-2:#56524A;
  --ink-3:#8A857B;
  --teal:#24899D;
  --teal-deep:#17606F;
  --teal-pale:#DCEAEC;
  --clay:#C08A63;
  --wa:#25806A;
  --line:rgba(30,29,26,0.12);
  --line-soft:rgba(30,29,26,0.07);

  /* Opción C — la geométrica manda en los titulares, el serif itálico
     se queda solo en los acentos y las citas, atado al logo de Denisse. */
  --display:'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif:'Bodoni Moda', ui-serif, Georgia, serif;   /* solo itálica, solo acentos */
  --sans:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:'DM Mono', ui-monospace, SFMono-Regular, monospace;

  --ease:cubic-bezier(.22,1,.36,1);

  /* Flotación. Sombras largas y muy suaves, teñidas de tinta y no de
     negro puro, para que no ensucien el fondo cálido. */
  --flota-1:0 2px 4px -2px rgba(30,29,26,.05), 0 8px 18px -8px rgba(30,29,26,.08);
  --flota-2:0 4px 10px -4px rgba(30,29,26,.06), 0 22px 44px -18px rgba(30,29,26,.16);
  --flota-3:0 8px 20px -8px rgba(30,29,26,.08), 0 44px 80px -32px rgba(30,29,26,.24);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; background:var(--linen);}
body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background-color 900ms var(--ease);
}
h1,h2,h3,p{margin:0;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; border:none; background:none;}
:focus-visible{outline:2px solid var(--teal); outline-offset:4px; border-radius:2px;}

/* ── contenedores ── */
.wrap{max-width:760px; margin:0 auto; padding:0 clamp(22px,6vw,40px);}
.wide{max-width:1080px; margin:0 auto; padding:0 clamp(22px,6vw,40px);}
section{padding:clamp(72px,13vw,140px) 0; position:relative;}

/* ── tipografía ── */
.kick{
  font-family:var(--mono); font-size:0.68rem; font-weight:500;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--teal-deep);
}
.display{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.15rem,7.6vw,4.1rem); line-height:1.05; letter-spacing:-0.03em;
}
/* El único serif del titular: el remate de la frase. */
.display em{font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:-0.01em;}
.h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.6rem,4.6vw,2.5rem); line-height:1.15; letter-spacing:-0.02em;
}
.body{font-size:1.05rem; color:var(--ink-2);}
.body strong{color:var(--ink); font-weight:700;}

/* ═══ movimiento ═══
   Cuatro gestos y nada más. Todos respetan prefers-reduced-motion. */
.mask{display:block; overflow:hidden; padding-bottom:0.14em; margin-bottom:-0.14em;}
.mask > span{display:block; transform:translateY(106%); transition:transform 1000ms var(--ease);}
.mask.in > span{transform:translateY(0);}
.mask.d1 > span{transition-delay:90ms}
.mask.d2 > span{transition-delay:180ms}

.up{opacity:0; transform:translateY(20px); transition:opacity 760ms var(--ease), transform 760ms var(--ease);}
.up.in{opacity:1; transform:none;}

.stag > *{opacity:0; transform:translateY(24px); transition:opacity 660ms var(--ease), transform 660ms var(--ease);}
.stag.in > *{opacity:1; transform:none;}
.stag.in > *:nth-child(1){transition-delay:40ms}
.stag.in > *:nth-child(2){transition-delay:120ms}
.stag.in > *:nth-child(3){transition-delay:200ms}
.stag.in > *:nth-child(4){transition-delay:280ms}

@media (prefers-reduced-motion: reduce){
  body{transition:none;}
  .mask > span{transform:none !important; transition:none !important;}
  .up, .stag > *{opacity:1 !important; transform:none !important; transition:none !important;}
  .plx{transform:none !important;}
}

/* ── fotos ── */
.shot{
  position:relative; overflow:hidden; border-radius:14px; background:var(--sand);
  box-shadow:var(--flota-3);
  transition:transform 600ms var(--ease), box-shadow 600ms var(--ease);
}
.shot .plx{position:absolute; inset:-9% 0; width:100%; height:118%; object-fit:cover; will-change:transform;}
.shot.hero{aspect-ratio:16/10;}
.shot.metodo{aspect-ratio:4/3;}
.photo-note{
  font-family:var(--mono); font-size:0.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-top:9px;
}

.band{position:relative; overflow:hidden; height:clamp(260px,44vw,460px); background:var(--sand);}
.band .plx{position:absolute; inset:-9% 0; width:100%; height:118%; object-fit:cover; will-change:transform;}
.band .veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(30,29,26,.18), rgba(30,29,26,.52));}
.band .line{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0 24px; text-align:center;}
.band .line p{
  font-family:var(--display); font-weight:600; color:var(--linen);
  font-size:clamp(1.4rem,4.4vw,2.4rem); line-height:1.15; letter-spacing:-0.02em; max-width:19ch;
}

/* ── marca ── */
.seal{width:64px; height:64px;}
.seal-sm{width:52px; height:52px;}

/* ── llamada a la acción ── */
.cta{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--teal); color:#fff;
  border-radius:999px; padding:16px 30px;
  font-weight:700; font-size:1rem;
  transition:background 240ms var(--ease), transform 240ms var(--ease);
  cursor:pointer;
}
.cta:hover{background:var(--teal-deep); transform:translateY(-2px);}
.cta:disabled{background:var(--line); color:var(--ink-3); cursor:not-allowed; transform:none;}
.cta svg{width:19px; height:19px; flex:none;}
.cta-fine{display:block; margin-top:14px; font-family:var(--mono); font-size:0.66rem; letter-spacing:.09em; color:var(--ink-3);}
.cta-wrap{margin-top:clamp(34px,6vw,48px);}

/* ═══ landing ═══ */
.hero{padding-top:clamp(52px,11vw,80px); padding-bottom:clamp(56px,10vw,96px);}
.hero .brandline{margin-top:20px; display:flex; flex-direction:column; gap:3px;}
.hero .word{font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,9vw,3.4rem); letter-spacing:0.14em; line-height:1;}
.hero .tagline{font-family:var(--mono); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3);}
.hero h1{margin-top:clamp(34px,7vw,52px);}
.hero .second{
  margin-top:22px; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(1.15rem,4vw,1.6rem); line-height:1.3; color:var(--teal-deep); max-width:26ch;
}
.hero .shot{margin-top:clamp(38px,7vw,56px);}

.profiles{margin-top:clamp(34px,6vw,50px); display:flex; flex-direction:column;}
.profile{display:grid; grid-template-columns:auto 1fr; gap:20px; padding:26px 0; border-top:1px solid var(--line-soft);}
.profile:last-child{border-bottom:1px solid var(--line-soft);}
.profile .n{font-family:var(--mono); font-size:0.72rem; color:var(--teal); padding-top:5px; font-variant-numeric:tabular-nums;}
.profile p{font-size:1.02rem; color:var(--ink-2);}
.profile p b{color:var(--ink); font-weight:700;}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px;}
.chip{font-family:var(--mono); font-size:0.7rem; letter-spacing:.06em; border:1px solid var(--line); border-radius:999px; padding:7px 15px; color:var(--ink-2);}

.facts{margin-top:clamp(30px,5vw,42px); display:flex; flex-direction:column; gap:20px;}
.fact{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;}
.fact .dot{width:6px; height:6px; border-radius:50%; background:var(--teal); margin-top:11px;}
.fact p{font-size:1.02rem; color:var(--ink-2);}
.fact p b{color:var(--ink); font-weight:700;}

/* Cita del método. La comilla grande en arcilla hace el trabajo que
   antes hacía una barra de color al costado — más editorial, y es el
   gesto del referente de yoga que eligió Ivan. */
.nuance{
  margin-top:clamp(34px,6vw,48px); padding:clamp(24px,4vw,34px) clamp(26px,4vw,38px) clamp(26px,4vw,36px);
  border-radius:14px;
  background:var(--white); box-shadow:var(--flota-1);
}
.nuance::before{
  content:'\201C';
  display:block;
  /* Geométrica y no serif: la comilla de Bodoni itálica se lee como dos
     puntitos a este tamaño. La de Outfit es una forma sólida y gráfica,
     que es justo el gesto del referente. */
  font-family:var(--display); font-weight:700;
  font-size:clamp(3.6rem,7vw,5rem); line-height:.58;
  color:var(--clay);
  margin-bottom:.16em;
}
.nuance p{font-family:var(--serif); font-style:italic; font-size:clamp(1.1rem,3.4vw,1.4rem); line-height:1.4; font-weight:500;}
.nuance p span{color:var(--ink-3);}

/* ── el interruptor de plazo ── */
.switch{
  margin-top:clamp(28px,5vw,38px);
  display:inline-flex; gap:4px; padding:4px;
  background:var(--white); border:1px solid var(--line-soft);
  border-radius:999px; box-shadow:var(--flota-1);
}
.sw-opt{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); padding:12px 18px; border-radius:999px; cursor:pointer;
  transition:color 260ms var(--ease), background 260ms var(--ease);
}
.sw-opt:hover{color:var(--ink);}
.sw-opt[aria-pressed="true"]{background:var(--ink); color:var(--linen);}
.sw-tag{
  font-size:0.66rem; letter-spacing:.06em; padding:3px 7px; border-radius:999px;
  background:var(--teal-pale); color:var(--teal-deep);
  transition:background 260ms var(--ease), color 260ms var(--ease);
}
.sw-opt[aria-pressed="true"] .sw-tag{background:var(--teal); color:var(--white);}

/* ── las tarjetas ── */
.plans{
  display:grid; grid-template-columns:1fr; gap:16px;
  /* Aire suficiente para que el rótulo del hover, que sale por encima
     del borde de la tarjeta, no se monte sobre el interruptor. */
  margin-top:clamp(56px,7vw,68px);
  align-items:start;
}
.plan{
  position:relative;
  background:var(--white); border:1px solid var(--line-soft); border-radius:18px;
  padding:clamp(26px,5vw,34px); display:flex; flex-direction:column; gap:9px;
  box-shadow:var(--flota-2);
  transition:transform 420ms var(--ease), box-shadow 420ms var(--ease), border-color 420ms var(--ease);
}

/* El rótulo asoma desde abajo del borde superior al acercarse. */
.plan-tag{
  position:absolute; left:0; right:0; top:0;
  padding:9px 20px 13px; border-radius:18px 18px 0 0;
  background:var(--teal-pale); color:var(--teal-deep);
  font-family:var(--mono); font-size:0.64rem; letter-spacing:.12em; text-transform:uppercase;
  text-align:center;
  transform:translateY(-100%); opacity:0;
  transition:transform 460ms var(--ease), opacity 300ms var(--ease);
  pointer-events:none;
}
@media (hover:hover){
  .plan:hover{transform:translateY(-8px); box-shadow:var(--flota-3); border-color:var(--teal-pale);}
  .plan:hover .plan-tag{transform:translateY(-100%) translateY(-2px); opacity:1;}
  .plan:focus-within{transform:translateY(-8px); box-shadow:var(--flota-3);}
  .plan:focus-within .plan-tag{transform:translateY(-100%) translateY(-2px); opacity:1;}
}

.plan .pn{font-family:var(--mono); font-size:0.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-deep);}
.plan .days{font-family:var(--mono); font-size:0.86rem; color:var(--ink-2);}

/* El precio cambia de plazo: los dos montos se apilan y solo uno se ve. */
.plan .price{display:grid; margin-top:8px;}
.plan .monto{
  grid-area:1/1; display:flex; align-items:baseline; gap:8px;
  transition:opacity 300ms var(--ease), transform 340ms var(--ease);
}
.plan .monto b{
  font-family:var(--display); font-weight:600; font-size:2.5rem; line-height:1;
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
}
.plan .monto small{font-family:var(--sans); font-size:0.85rem; font-weight:600; color:var(--ink-2);}
.plan .monto.oculto{opacity:0; transform:translateY(6px); pointer-events:none;}

.plan .ahorro{
  font-family:var(--mono); font-size:0.74rem; color:var(--teal-deep);
  margin-top:2px;
}
.plan .ahorro b{font-weight:500;}

.plan .for{font-size:0.96rem; color:var(--ink-2); margin-top:6px;}

/* ── qué incluye ── */
.incluye{
  list-style:none; margin:16px 0 0; padding:18px 0 0;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:11px;
}
.incluye li{display:flex; align-items:flex-start; gap:11px; font-size:0.94rem; color:var(--ink-2); text-wrap:pretty;}
.incluye li:first-child{color:var(--ink); font-weight:600;}
.incluye .tic{width:17px; height:17px; flex:none; margin-top:3px; color:var(--teal);}

/* ── el botón de cada tarjeta ── */
.plan-cta{
  margin-top:22px; align-self:stretch; text-align:center;
  padding:14px 20px; border-radius:999px;
  border:1px solid var(--line);
  font-weight:600; font-size:0.95rem; color:var(--ink);
  transition:background 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
@media (hover:hover){
  .plan:hover .plan-cta{background:var(--teal); border-color:var(--teal); color:var(--white);}
  .plan-cta:hover{background:var(--teal-deep); border-color:var(--teal-deep);}
}

@media (min-width:720px){ .plans{grid-template-columns:1fr 1fr;} }

.terms{margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:9px;}
.terms p{font-family:var(--mono); font-size:0.76rem; color:var(--ink-2);}
.terms p span{color:var(--ink-3);}

/* ── sección oscura ── */
.dark{background:var(--ink); color:var(--linen);}
.dark .kick{color:var(--clay);}
.dark .h2{color:var(--linen);}
.dark .body{color:rgba(243,239,233,.74);}
.dark .cta{background:var(--teal);}
.dark .cta:hover{background:#2E9FB4;}
.dark .cta-fine{color:rgba(243,239,233,.5);}
.dark .closing{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.5rem,5vw,2.3rem); line-height:1.18; letter-spacing:-0.025em;
  margin-top:26px; max-width:20ch;
}

footer{background:var(--ink); color:rgba(243,239,233,.55); padding:0 0 clamp(56px,10vw,80px);}
footer .inner{border-top:1px solid rgba(243,239,233,.14); padding-top:30px; display:flex; flex-direction:column; gap:7px;}
footer .mvt{font-family:var(--mono); font-size:0.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--clay);}
footer p{font-size:0.85rem;}

/* ═══ screening ═══ */
.form-shell{
  min-height:100svh; display:flex; flex-direction:column;
  max-width:560px; margin:0 auto; padding:0 clamp(22px,6vw,40px);
}
.form-top{padding:26px 0 0; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.form-top .back{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:.06em; color:var(--ink-3);
  padding:8px 0; cursor:pointer;
}
.form-top .back[hidden]{visibility:hidden; display:block;}
.form-top .count{font-family:var(--mono); font-size:0.72rem; letter-spacing:.08em; color:var(--teal-deep); font-variant-numeric:tabular-nums;}
.bar{height:3px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin-top:14px;}
/* Escala en vez de animar el ancho: animar width recalcula layout en
   cada cuadro. scaleX se compone en GPU y no toca el layout. */
.bar i{
  display:block; height:100%; width:100%;
  background:var(--teal); border-radius:99px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 520ms var(--ease);
}

.step{flex:1; display:flex; flex-direction:column; padding:clamp(34px,8vw,56px) 0 30px;}
.step[hidden]{display:none;}
.q-title{font-family:var(--display); font-weight:600; font-size:clamp(1.45rem,5.4vw,2rem); line-height:1.2; letter-spacing:-0.02em;}
.q-help{margin-top:12px; font-size:0.94rem; color:var(--ink-2);}

/* Nota que abre la sección de salud. Va antes del título porque tiene que
   leerse ANTES de que ella decida cuánto contar, no después. */
.q-nota{
  margin-bottom:22px; padding:15px 17px;
  background:var(--teal-pale); border-radius:12px;
  font-size:0.92rem; line-height:1.55; color:var(--teal-deep);
}

/* Campo de una línea: nombre, quién refirió. */
input.field.corta{min-height:0; padding:15px 18px;}

/* Se despliega cuando marca un "Sí" en las de salud. */
.detalle{margin-top:14px;}
.detalle textarea.field{min-height:104px;}
@media (prefers-reduced-motion:no-preference){
  .detalle:not([hidden]){animation:abre 420ms var(--ease);}
}
@keyframes abre{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:translateY(0);}
}
.q-body{margin-top:clamp(26px,5vw,34px); display:flex; flex-direction:column; gap:10px;}

.opt{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:1.5px solid var(--line); border-radius:10px; padding:15px 16px;
  font-size:0.98rem; color:var(--ink-2); cursor:pointer;
  transition:border-color 200ms var(--ease), background 200ms var(--ease);
}
.opt:hover{border-color:var(--ink-3);}
.opt .mark{width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line); flex:none; transition:all 180ms var(--ease);}
.opt.multi .mark{border-radius:4px;}
.opt[aria-pressed="true"], .opt[aria-checked="true"]{border-color:var(--teal); background:var(--teal-pale); color:var(--ink);}
.opt[aria-pressed="true"] .mark, .opt[aria-checked="true"] .mark{border-color:var(--teal); background:var(--teal); box-shadow:inset 0 0 0 3px var(--teal-pale);}

.field{
  width:100%; border:1.5px solid var(--line); border-radius:10px;
  padding:15px 16px; font-size:1rem; font-family:var(--sans); color:var(--ink);
  background:var(--white); resize:vertical; line-height:1.55;
}
.field::placeholder{color:var(--ink-3);}
.field:focus{border-color:var(--teal); outline:none;}
textarea.field{min-height:130px;}

.consent{
  display:flex; gap:12px; align-items:flex-start; margin-top:18px;
  font-size:0.88rem; color:var(--ink-2); cursor:pointer; line-height:1.5;
}
.consent .mark{width:18px; height:18px; border-radius:4px; border:1.5px solid var(--line); flex:none; margin-top:2px; transition:all 180ms var(--ease);}
.consent[aria-checked="true"] .mark{border-color:var(--teal); background:var(--teal); box-shadow:inset 0 0 0 3px var(--teal-pale);}

.step-foot{margin-top:auto; padding-top:30px;}
.err{color:var(--clay); font-size:0.86rem; margin-top:12px; min-height:1.2em;}

/* ═══ confirmación ═══ */
.confirm{max-width:560px; margin:0 auto; padding:clamp(44px,9vw,80px) clamp(22px,6vw,40px) clamp(56px,10vw,90px);}
.check{
  width:58px; height:58px; border-radius:50%; border:1.5px solid var(--teal); color:var(--teal);
  display:flex; align-items:center; justify-content:center;
}
.check svg{width:26px; height:26px;}
.when{
  margin-top:clamp(30px,6vw,44px); border:1.5px solid var(--teal); border-radius:10px;
  background:var(--teal-pale); padding:clamp(22px,5vw,28px);
  display:flex; flex-direction:column; gap:6px;
}
.when .k{font-family:var(--mono); font-size:0.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep);}
.when .d{font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,5vw,1.9rem); line-height:1.15; letter-spacing:-0.02em;}
.when .t{font-family:var(--mono); font-size:0.95rem; color:var(--ink-2);}
.detail{margin-top:clamp(30px,6vw,44px); display:flex; flex-direction:column; gap:26px;}
.detail h3{font-family:var(--mono); font-size:0.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;}
.detail p{font-size:1.05rem; color:var(--ink-2);}
.detail p b{color:var(--ink); font-weight:700;}
/* La dirección exacta va debajo del lugar: subordinada por tamaño y por
   color, no solo por color — si no, las dos líneas pesan igual. */
.detail p.sub{font-size:0.85rem; color:var(--ink-3); margin-top:5px;}
.btn-row{display:flex; flex-direction:column; gap:11px; margin-top:clamp(30px,6vw,40px);}
.btn-row .cta{justify-content:center;}
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1.5px solid var(--line); border-radius:999px; padding:15px 28px;
  font-weight:700; font-size:0.96rem; color:var(--ink-2);
  transition:border-color 220ms var(--ease), color 220ms var(--ease);
}
.btn-ghost:hover{border-color:var(--ink-3); color:var(--ink);}
.btn-ghost svg{width:18px; height:18px;}
.cta.wa{background:var(--wa);}
.cta.wa:hover{background:#1E6B58;}

/* ── estados de borde ── */
.notice{max-width:520px; margin:0 auto; padding:clamp(70px,16vw,140px) clamp(22px,6vw,40px); text-align:center;}
.notice .seal{margin:0 auto 28px;}
.notice h1{font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,6vw,2.2rem); line-height:1.18; letter-spacing:-0.02em;}
.notice p{margin-top:16px; color:var(--ink-2);}

/* ═══════════════════════════════════════════════════════════
   ESCRITORIO
   Hasta acá todo es una columna, que en móvil está bien pero
   en pantalla ancha se lee como un teléfono estirado. Desde
   900 px el contenido se reparte de verdad y el tipo crece.
   ═══════════════════════════════════════════════════════════ */
@media (min-width:900px){

  section{padding:clamp(110px,9vw,168px) 0;}
  .wrap{max-width:820px;}
  .wide{max-width:1240px;}

  /* la lectura corrida nunca pasa de 68 caracteres */
  .body, .profile p, .fact p, .plan .for{font-size:1.12rem;}
  .body{max-width:62ch;}

  /* ── el hero de apertura ── */
  .abre-linea{max-width:19ch;}
  .abre-foto .shot{max-width:min(880px,100%);}

  /* ── los cuatro perfiles en rejilla ── */
  .profiles{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:clamp(36px,4vw,72px); row-gap:0;
  }
  .profile{padding:30px 0;}
  .profile:nth-child(2){border-top:1px solid var(--line-soft);}
  .profile:nth-child(3), .profile:nth-child(4){border-bottom:1px solid var(--line-soft);}
  .profile:last-child{border-bottom:1px solid var(--line-soft);}

  /* ── método: foto al lado del contenido ── */
  .metodo-grid{
    display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
    column-gap:clamp(44px,5vw,88px); align-items:start;
    margin-top:clamp(44px,4vw,64px);
  }
  .metodo-media{position:sticky; top:clamp(40px,6vw,80px);}
  .shot.metodo{aspect-ratio:3/4;}
  .metodo-copy .facts{margin-top:0;}
  .nuance{margin-top:clamp(38px,4vw,56px);}

  /* ── planes con más aire ── */
  .plans{gap:clamp(20px,2vw,28px);}
  .plan{padding:clamp(34px,3vw,44px);}
  .plan .price{font-size:3.1rem;}

  /* ── banda más generosa ── */
  .band{height:clamp(380px,34vw,540px);}
  .band .line p{font-size:clamp(2.2rem,3.4vw,3.4rem); max-width:22ch;}

  /* ── cierre oscuro centrado y ancho ── */
  .dark .closing{font-size:clamp(2.2rem,3vw,3rem); max-width:22ch;}

  /* ── el screening respira ── */
  .form-shell{max-width:640px;}
  .q-title{font-size:clamp(1.9rem,2.4vw,2.4rem);}
  .opt{font-size:1.04rem; padding:17px 20px;}

  /* ── confirmación ── */
  .confirm{max-width:640px;}
  .btn-row{flex-direction:row;}
  .btn-row .cta, .btn-row .btn-ghost{flex:1;}
}

/* Pantallas muy anchas: que el hero no se estire sin control */
@media (min-width:1500px){
  .wide{max-width:1340px;}
  .display{font-size:4.6rem;}
}


/* ═══════════════════════════════════════════════════════════
   HERO DE APERTURA — sello grande, centrado y animado
   ═══════════════════════════════════════════════════════════ */

  /* ═══════════════════════════════════════════════════════════
     Demo del hero — apertura centrada y animada.
     No toca la landing. Cuando se apruebe, esto pasa al template.
     ═══════════════════════════════════════════════════════════ */

  .abre{
    min-height:100svh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; position:relative;
    padding:clamp(60px,10vh,110px) clamp(22px,6vw,40px) clamp(80px,12vh,120px);
  }

  /* ── el sello, grande y centrado ── */
  .abre-sello{
    width:clamp(96px,13vw,168px); height:auto;
    animation:selloEntra 1200ms var(--ease) both;
  }
  @keyframes selloEntra{
    from{opacity:0; transform:scale(.78) rotate(-10deg);}
    to  {opacity:1; transform:none;}
  }

  /* ── THRIVE letra por letra, con el tracking asentándose ── */
  .abre-word{
    display:block; margin-top:clamp(26px,4vh,46px);
    font-family:var(--display); font-weight:600;
    font-size:clamp(2.6rem,11vw,6.4rem); line-height:1;
    letter-spacing:.34em; text-indent:.34em;      /* el indent compensa el tracking del final */
    animation:asienta 1600ms var(--ease) .35s both;
  }
  @keyframes asienta{
    from{letter-spacing:.34em; text-indent:.34em;}
    to  {letter-spacing:.14em; text-indent:.14em;}
  }
  .abre-word i{
    display:inline-block; font-style:normal;
    opacity:0; transform:translateY(.42em);
    animation:letra 780ms var(--ease) forwards;
    animation-delay:calc(.38s + var(--i) * 65ms);
  }
  @keyframes letra{ to{opacity:1; transform:none;} }

  .abre-tag{
    margin-top:clamp(12px,1.6vh,20px);
    font-family:var(--mono); font-size:clamp(.62rem,1.5vw,.78rem);
    letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3);
    opacity:0; animation:sube 900ms var(--ease) 1.05s forwards;
  }
  @keyframes sube{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }

  .abre-linea{
    margin-top:clamp(34px,6vh,64px);
    font-family:var(--display); font-weight:600;
    font-size:clamp(1.55rem,4.4vw,3.1rem); line-height:1.1; letter-spacing:-.025em;
    max-width:17ch;
  }
  .abre-linea em{font-family:var(--serif); font-style:italic; font-weight:500;}
  .abre-linea .mask > span{transform:translateY(108%); animation:revela 1000ms var(--ease) forwards;}
  .abre-linea .m1 > span{animation-delay:1.30s}
  .abre-linea .m2 > span{animation-delay:1.44s}
  .abre-linea .m3 > span{animation-delay:1.58s}
  @keyframes revela{ to{transform:translateY(0);} }

  .abre-sub{
    margin-top:clamp(18px,2.6vh,28px);
    font-family:var(--serif); font-style:italic; font-weight:500;
    font-size:clamp(1.02rem,2.2vw,1.4rem); line-height:1.35; color:var(--teal-deep);
    max-width:28ch;
    opacity:0; animation:sube 900ms var(--ease) 2.05s forwards;
  }

  /* ── señal de scroll ── */
  .abre-cue{
    /* Se centra con márgenes, no con translateX: la animación de entrada
       anima `transform` y borraría el centrado a mitad de camino. */
    position:absolute; left:0; right:0; margin-inline:auto; width:fit-content;
    bottom:clamp(26px,4vh,44px);
    display:flex; flex-direction:column; align-items:center; gap:9px;
    font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-3);
    opacity:0; animation:sube 900ms var(--ease) 2.5s forwards;
  }
  .abre-cue .riel{width:1px; height:38px; background:var(--line); position:relative; overflow:hidden;}
  .abre-cue .riel::after{
    content:''; position:absolute; inset:0; background:var(--teal);
    transform:translateY(-100%); animation:baja 1900ms var(--ease) 3s infinite;
  }
  @keyframes baja{ 0%{transform:translateY(-100%)} 55%{transform:translateY(100%)} 100%{transform:translateY(100%)} }

  /* ── la foto entra después ── */
  .abre-foto{padding-bottom:clamp(56px,9vw,100px);}
  .abre-foto .shot{
    animation:fotoEntra 1400ms var(--ease) 2.2s both;
  }
  @keyframes fotoEntra{
    from{opacity:0; transform:scale(1.05) translateY(28px);}
    to  {opacity:1; transform:none;}
  }

  /* Portátiles de pantalla baja: menos aire arriba y abajo para que
     la señal de scroll no se coma el subtítulo. */
  @media (max-height:780px){
    .abre{padding-top:clamp(40px,6vh,70px); padding-bottom:clamp(64px,9vh,90px);}
    .abre-sello{width:clamp(84px,9vw,120px);}
    .abre-word{margin-top:clamp(18px,2.6vh,30px); font-size:clamp(2.4rem,8.4vw,4.6rem);}
    .abre-linea{margin-top:clamp(24px,3.4vh,40px); font-size:clamp(1.45rem,3.4vw,2.4rem);}
    .abre-sub{margin-top:clamp(14px,1.8vh,20px);}
  }

  @media (prefers-reduced-motion: reduce){
    .abre-sello, .abre-word, .abre-word i, .abre-tag, .abre-sub,
    .abre-cue, .abre-foto .shot{animation:none !important; opacity:1 !important; transform:none !important;}
    .abre-word{letter-spacing:.14em; text-indent:.14em;}
    .abre-linea .mask > span{transform:none !important; animation:none !important;}
    .abre-cue .riel::after{animation:none !important;}
  }