/* Landing de Julien (El Método Funcional): agenda + gracias.
   Marca tomada de elmetodofuncional.com: menta #00FFB2, cian #00E0FF, negro en titulares,
   carbón #343434, tinte de sección #E8FFFE, fondo blanco. Tema claro, como el sitio.
   Liquid glass: aproximación web (backdrop-filter + aro especular + mapa de desplazamiento SVG
   generado por elemento en Chromium). No es el material oficial de Apple, que solo existe en sus plataformas. */

@font-face { font-family: 'Wix Madefor Display'; src: url(fonts/WixMadeforDisplay.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Wix Madefor Text'; src: url(fonts/WixMadeforText.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }

@property --ang { syntax: '<angle>'; inherits: true; initial-value: 320deg; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
/* Luz del puntero: tienen que heredar para llegar al ::before / ::after del vidrio */
@property --mx { syntax: '<length-percentage>'; inherits: true; initial-value: 22%; }
@property --my { syntax: '<length-percentage>'; inherits: true; initial-value: -8%; }

:root {
  color-scheme: light;
  --white: #fff;
  --ink: #050505;          /* titulares: el negro del sitio */
  --text: #1c1c1c;         /* cuerpo */
  --muted: #555;           /* secundario, 7.4:1 sobre blanco */
  --mint: #00ffb2;         /* menta de marca: rellenos con texto negro, nunca texto sobre blanco */
  --cyan: #00e0ff;         /* cian de la ola */
  --mint-ink: #006b50;     /* menta profundo para texto chico sobre claro (6.5:1) */
  --wash: #e8fffe;         /* tinte de sección del sitio */
  --charcoal: #343434;
  --graphite: #575757;
  --line: rgb(0 0 0 / .08);
  --shade: 168 100% 14%;   /* tono de las sombras: verde profundo, nunca gris puro */

  --font-display: 'Wix Madefor Display', 'Helvetica Neue', Arial, sans-serif;
  --font-text: 'Wix Madefor Text', 'Helvetica Neue', Arial, sans-serif;

  /* Radios: controles 12 · marcos 28 con núcleo concéntrico · pastillas redondas */
  --r-ctl: 12px;
  --r-frame: 28px;
  --bezel: 9px;
  --r-core: calc(var(--r-frame) - var(--bezel));

  --gutter: clamp(16px, 4.5vw, 44px);
  --max: 1240px;
  --island-top: 14px;
  --island-h: 60px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--island-h) + var(--island-top) + var(--expira-h, 0px) + 20px); overflow-x: clip; }
body {
  margin: 0;
  background: var(--white); color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-text); letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
/* La página vive en .mf: así funciona igual como documento propio o dentro de un bloque de GoHighLevel */
/* GoHighLevel: la sección, la fila y la columna que envuelven el bloque no suman espacio arriba (la página trae el
   suyo). Solo toca a los contenedores del bloque; en la página propia no hay ninguno (el bloque cuelga del body). */
body *:has(.mf) { padding-top: 0 !important; margin-top: 0 !important; }
.mf { min-height: 100dvh; display: flex; flex-direction: column; background: var(--white); color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-text); letter-spacing: -.003em; text-align: left; }
.mf > main { flex: 1; }
/* Blindaje contra el CSS global del sitio anfitrión (clases comunes tipo Bootstrap) */
.mf .container { padding-left: 0; padding-right: 0; max-width: none; }
.mf a.btn, .mf .btn { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; line-height: 1.2; height: auto; min-width: 0; text-transform: none; vertical-align: middle; }
.mf .lead { font-weight: 400; margin-bottom: 0; }
.mf .h1, .mf .h2, .mf h1, .mf h2, .mf h3 { margin: 0; text-transform: none; }
.mf p, .mf figure, .mf ul, .mf ol { margin-bottom: 0; }
.mf img, .mf video, .mf iframe { max-width: 100%; }
.mf button { text-transform: none; }
.mf .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
img, video, svg, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
p { text-wrap: pretty; margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--font-display); color: var(--ink); }
::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px rgb(0 255 178 / .55); border-radius: 10px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 60; padding: 10px 16px; border-radius: var(--r-ctl); background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ================= Liquid glass ================= */
.glass {
  --gb: 16px;
  position: relative; isolation: isolate;
  background:
    linear-gradient(165deg, rgb(255 255 255 / .66), rgb(255 255 255 / .26) 52%, rgb(232 255 254 / .42));
  -webkit-backdrop-filter: blur(var(--gb)) saturate(185%);
  backdrop-filter: blur(var(--gb)) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .95),
    inset 0 -1px 1px rgb(255 255 255 / .5),
    inset 0 0 0 1px rgb(255 255 255 / .28),
    0 1px 2px hsl(var(--shade) / .06),
    0 20px 48px -20px hsl(var(--shade) / .30);
  transition: --ang .7s var(--ease-out);
}
/* Aro especular: el borde se ilumina del lado de la luz (sigue al puntero en desktop) */
.glass::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1.3px;
  background: conic-gradient(from var(--ang),
    rgb(255 255 255 / 1), rgb(255 255 255 / .2) 22%, rgb(0 224 255 / .45) 42%,
    rgb(255 255 255 / .12) 58%, rgb(0 255 178 / .55) 78%, rgb(255 255 255 / 1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Brillo especular que sigue al puntero */
.glass::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 22%) var(--my, -8%), rgb(255 255 255 / .75), rgb(255 255 255 / 0) 60%);
  mix-blend-mode: soft-light; opacity: .85;
}
.glass > * { position: relative; z-index: 2; }
@media (prefers-reduced-transparency: reduce) {
  .glass { background: #fff; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  .glass { background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
  .glass::before, .glass::after { display: none; }
}

/* Marcos que alojan contenido de otro sitio (Calendly, reproductores de video): sin backdrop-filter,
   sin refracción y sin la capa de brillo (mix-blend-mode) por encima. En Chrome esa combinación sobre un
   iframe de otro origen lo deja borroso y lavado. El vidrio queda solo en el bisel. */
.book-frame.glass, .video-frame.glass, .reel-frame.glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: linear-gradient(165deg, rgb(255 255 255 / .94), rgb(232 255 249 / .82) 50%, rgb(234 252 255 / .9)); }
.book-frame::after, .video-frame::after, .reel-frame::after { z-index: 1; }
/* Calendario: el aro menta → cian que se ve abajo, fijo en los cuatro bordes (no sigue al puntero) */
.book-frame.glass::before { padding: 1.5px; background: linear-gradient(90deg, rgb(0 255 178 / .6), rgb(0 224 255 / .55)); }
@media (prefers-reduced-motion: no-preference) { .js .book-frame.rv, .js .video-frame.rv { filter: none; } }

/* Marco de doble bisel: el vidrio es la bandeja, el contenido es la placa */
.frame { border-radius: var(--r-frame); padding: var(--bezel); }
.frame-core {
  position: relative; z-index: 2; overflow: hidden; border-radius: var(--r-core); background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .05), 0 1px 3px rgb(0 0 0 / .05), inset 0 1px 0 rgb(255 255 255 / .9);
}

/* ================= Escena: la ola de la marca ================= */
.ribbon { position: absolute; z-index: 0; pointer-events: none; overflow: visible; width: 100%; height: var(--rh, clamp(300px, 39vw, 560px)); left: 0; }
.ribbon .r-main { fill: none; stroke-linecap: round; stroke-width: 66; }
.ribbon .r-glow { fill: none; stroke-linecap: round; stroke-width: 120; opacity: .22; }
.rail > .ribbon .r-main { stroke-width: 52; }
.ribbon path { stroke-dasharray: 1 1.02; stroke-dashoffset: 0; }
.glow-spot { position: absolute; z-index: 0; pointer-events: none; opacity: .55;
  background: radial-gradient(closest-side, rgb(0 255 178 / .5), rgb(0 224 255 / .2) 50%, rgb(0 224 255 / 0) 100%); }
@media (prefers-reduced-motion: no-preference) {
  .js .ribbon path { animation: draw 2.1s var(--ease-quint) .15s both; }
  .js .ribbon .r-glow { animation-duration: 2.6s; }
  @supports (animation-timeline: view()) {
    .ribbon { animation: drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes drift { to { transform: translate3d(0, -60px, 0); } }
  }
}
@keyframes draw { 0% { stroke-dashoffset: 1; opacity: 0; } 6% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: var(--o, 1); } }

/* ================= Isla superior: marca + pasos ================= */
.island-wrap { position: fixed; z-index: 30; top: var(--island-top); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; padding-inline: 10px; }
.island {
  pointer-events: auto; height: var(--island-h); border-radius: 999px;
  display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); padding: 0 8px 0 20px;
  view-transition-name: island;
}
.brand { display: flex; flex-direction: column; justify-content: center; line-height: .98; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 14.5px; letter-spacing: -.01em; }
.brand sup { font-size: .55em; font-weight: 600; margin-left: 1px; vertical-align: .5em; line-height: 0; }
.brand img { height: 32px; width: auto; }
.steps { --p: 0; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; position: relative; transition: --p .9s var(--ease-quint); }
.step { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.step .dot {
  position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 800 12px/1 var(--font-display); color: var(--muted); background: rgb(255 255 255 / .7);
  box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .12);
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out), box-shadow .4s var(--ease-out), transform .5s var(--ease-out);
}
.step .dot .icon { position: absolute; width: 13px; height: 13px; opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease-out), transform .45s var(--ease-out); }
.step.is-active { color: var(--ink); }
.step.is-active .dot { background: var(--mint); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / .08), 0 4px 14px -4px rgb(0 200 140 / .8); }
.step.is-done { color: var(--ink); }
.step.is-done .dot { background: var(--ink); color: transparent; box-shadow: none; }
.step.is-done .dot .icon { opacity: 1; transform: none; color: var(--mint); }
.steps .track { width: clamp(28px, 5vw, 64px); height: 3px; margin: 0 10px; border-radius: 3px; background: rgb(0 0 0 / .1); position: relative; overflow: hidden; }
.steps .track::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--cyan)); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.island-act { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .55s var(--ease-drawer); }
.island-act > div { min-width: 0; overflow: hidden; }
.island.has-act .island-act { grid-template-columns: 1fr; }
.island-act .btn-mini { opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease-out), transform .45s var(--ease-out); }
.island.has-act .island-act .btn-mini { opacity: 1; transform: none; transition-delay: .12s; }

/* ================= Botones (patrón del sitio: bloque de texto + bloque de flecha) ================= */
.btn { display: inline-flex; gap: 4px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 16.5px; letter-spacing: -.01em; }
.btn > span {
  position: relative; display: grid; place-items: center; min-height: 56px; border-radius: var(--r-ctl); background: var(--mint);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -2px 0 rgb(0 120 90 / .18), 0 10px 26px -12px rgb(0 190 135 / .9);
  transition: transform .16s var(--ease-out), box-shadow .3s var(--ease-out), filter .2s;
  overflow: hidden;
}
.btn > span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .55) 48%, transparent 62%); transform: translateX(-120%); }
.btn .btn-t { padding: 0 26px; }
.btn .btn-i { width: 56px; }
.btn .btn-i .icon { width: 22px; height: 22px; transition: transform .35s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover > span { filter: saturate(1.1) brightness(1.03); box-shadow: inset 0 1px 0 rgb(255 255 255 / .75), inset 0 -2px 0 rgb(0 120 90 / .18), 0 14px 32px -12px rgb(0 190 135 / 1); }
  .btn:hover > span::after { transform: translateX(120%); transition: transform .8s var(--ease-out); }
  .btn:hover .btn-i .icon { transform: translateY(-3px); }
}
.btn:active > span { transform: scale(.97); }
.btn-mini {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 8px 20px -10px rgb(0 0 0 / .6);
  transition: transform .16s var(--ease-out);
}
.btn-mini .icon { width: 15px; height: 15px; color: var(--mint); }
.btn-mini:active { transform: scale(.96); }

/* Botón circular de vidrio (play, flechas, cerrar) */
.orb { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); --gb: 10px; transition: transform .16s var(--ease-out); }
.orb .icon { width: 24px; height: 24px; }
.orb:active { transform: scale(.96); }
/* Play: anillo de vidrio con núcleo menta (el menta + negro de los botones del sitio) */
.orb.play { background: linear-gradient(165deg, rgb(255 255 255 / .34), rgb(255 255 255 / .08)); }
.orb.play > .core { position: absolute; z-index: 2; inset: 15%; border-radius: 50%; display: grid; place-items: center; background: var(--mint);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -2px 0 rgb(0 120 90 / .2), 0 6px 18px -6px rgb(0 190 135 / .9); transition: transform .5s var(--ease-out); }
.orb.play > .core .icon { width: 42%; height: 42%; margin-left: 8%; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .orb.play:hover > .core { transform: scale(1.06); } }
.orb[disabled], .orb[aria-disabled="true"] { cursor: default; opacity: .55; }

/* ================= Tipografía ================= */
.h1 { font-weight: 800; letter-spacing: -.022em; line-height: .98; }
.h1 .w { display: inline-block; vertical-align: top; overflow: clip; padding-bottom: .09em; margin-bottom: -.09em; overflow-clip-margin: .12em; }
.h1 .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .h1 .w > span { transform: translate3d(0, 105%, 0); transition: transform 1s var(--ease-quint); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
  .js .ready .h1 .w > span { transform: none; }
}
.mark { position: relative; font-style: normal; white-space: nowrap; z-index: 0; }
/* Marcador menta detrás de las palabras clave (el menta con texto negro, como los botones del sitio) */
.mark::after { content: ""; position: absolute; z-index: -1; left: -.06em; right: -.08em; bottom: .02em; height: .36em; border-radius: .14em;
  background: linear-gradient(90deg, var(--mint), #00f5c8); transform: rotate(-1.2deg); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) {
  .js .mark::after { transform: rotate(-1.2deg) scaleX(0); transition: transform .9s var(--ease-quint) .7s; }
  .js .ready .mark::after { transform: rotate(-1.2deg) scaleX(1); }
  .vt .mark::after { transition-delay: .35s; }
}
.lead { font-size: clamp(1.0625rem, .98rem + .4vw, 1.25rem); line-height: 1.55; color: var(--text); max-width: 46ch; }
.h2 { font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem); line-height: 1.02; letter-spacing: -.025em; font-weight: 400; }
.h2 strong { display: block; font-weight: 800; }
.sub { margin-top: 14px; color: var(--muted); font-size: 1.0625rem; max-width: 52ch; }

/* Entradas: el contenido es visible por defecto; con JS se revela al entrar en pantalla */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); filter: blur(8px);
    transition: opacity .9s var(--ease-out), transform 1s var(--ease-quint), filter .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
  .js .rv.in { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv { transition: opacity .3s ease; }
}

/* ================= Paso 1: agenda ================= */
.hero-book { position: relative; padding: calc(var(--island-top) + var(--island-h) + clamp(14px, 2vw, 26px)) 0 clamp(28px, 4vw, 44px); }
.hero-book .ribbon { top: clamp(330px, 26vw, 380px); view-transition-name: ribbon; }
@media (max-width: 1099px) { .hero-book .ribbon { top: clamp(300px, 62vw, 420px); } }
.hero-book .glow-spot { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; right: 4vw; top: 14%; opacity: .32; }
/* Agenda compacta: en escritorio todo entra en la primera pantalla. En móvil el calendario va antes que la prueba y el equipo. */
.book-grid { position: relative; z-index: 1; display: grid; gap: clamp(20px, 3vw, 30px); grid-template-areas: "copy" "cal" "extra"; }
.book-copy { grid-area: copy; container-type: inline-size; }
.book-grid > .book-frame { grid-area: cal; }
.book-extra { grid-area: extra; }
/* Título en una sola línea: "Agenda la revisión de tu caso" mide 13,6 veces el cuerpo, así que el tamaño sale del ancho de la columna */
.book-copy .h1 { font-size: clamp(1.1rem, calc(100cqi / 14), 2.9rem); white-space: nowrap; }
.book-copy .h1 .l1, .book-copy .h1 .l2 { display: inline; }
/* Escasez: una pastilla chica con punto vivo, pegada al texto */
/* Escasez en rojo (pedido del equipo): texto rojo oscuro sobre rojo muy claro, 6:1 de contraste */
.cupos { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 15px 8px 12px; border-radius: 999px;
  background: #fdecea; box-shadow: inset 0 0 0 1px rgb(200 30 30 / .28); color: #b3261e; font-weight: 700; font-size: .95rem; line-height: 1.3; }
.cupos-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #d93025; }
@media (prefers-reduced-motion: no-preference) {
  .cupos-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #d93025; animation: cupos-ping 2.4s var(--ease-out) infinite; }
}
/* Estrellas doradas junto al número de la prueba */
.proof-line strong .stars { display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: .1em; }
.proof-line strong .stars svg { display: block; width: .6em; height: .6em; fill: #f5b301; filter: drop-shadow(0 1px 0 rgb(180 120 0 / .35)); }
@media (max-width: 599px) { .proof-line strong .stars { display: flex; margin: 5px 0 0; } .proof-line strong .stars svg { width: 12px; height: 12px; } }
@keyframes cupos-ping { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
/* Glow que gira alrededor del borde rojo: un cometa de luz en un gradiente cónico que rota. ::before es el
   borde nítido (enmascarado a 1,5px) y ::after la misma luz desenfocada detrás de la pastilla. */
@property --cupos-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cupos { position: relative; }
.cupos::before, .cupos::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--cupos-ang), rgb(255 59 48 / 0) 0deg, rgb(255 59 48 / 0) 180deg, rgb(255 59 48 / .7) 295deg, rgb(255 205 198 / .9) 336deg, rgb(255 59 48 / 0) 360deg); }
.cupos::before { padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.cupos::after { z-index: -1; inset: -1px; filter: blur(8px); opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .cupos::before, .cupos::after { animation: cupos-spin 3.2s linear infinite; }
}
@keyframes cupos-spin { to { --cupos-ang: 360deg; } }
/* Prueba en una línea: tres datos entre dos bordes */
.proof-line { list-style: none; margin: 0; padding: 12px clamp(14px, 2vw, 18px); display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  width: fit-content; max-width: 100%; border-radius: 18px; background: rgb(255 255 255 / .78);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07), 0 14px 32px -22px hsl(var(--shade) / .45); }
.proof-line li { padding: 0 clamp(12px, 2vw, 22px); border-left: 1px solid var(--line); min-width: 0; }
.proof-line li:first-child { padding-left: 0; border-left: 0; }
.proof-line li:last-child { padding-right: 0; }
.proof-line strong { display: block; white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.proof-line li > span { display: block; margin-top: 4px; font-size: .875rem; line-height: 1.3; color: var(--muted); }
.book-copy .lead { margin-top: clamp(12px, 1.4vw, 18px); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); }
/* Equipo chico: fila de caras debajo de la prueba */
.team-mini { margin-top: clamp(16px, 2vw, 22px); }
.team-mini-t { font-size: .9rem; font-weight: 700; color: var(--ink); }
.team-mini .team-list { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 10px; }
.team-mini .person { width: clamp(56px, 15vw, 76px); }
.team-mini .face { width: 100%; box-shadow: 0 10px 22px -14px hsl(var(--shade) / .55); }
.team-mini .pname { margin-top: 6px; font-size: .8125rem; letter-spacing: 0; }
/* Subtítulo chico debajo de la pastilla de cupos */
.book-sub { margin-top: 10px; max-width: 46ch; font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); line-height: 1.5; color: var(--text); }
/* Escritorio: una sola columna centrada, con el calendario al medio y la prueba y el equipo debajo */
@media (min-width: 1100px) {
  .book-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "cal" "extra"; justify-items: center; row-gap: clamp(18px, 2vw, 24px); }
  .book-copy { width: min(100%, 760px); text-align: center; }
  .book-sub { margin-inline: auto; max-width: 78ch; }
  .book-grid > .book-frame { width: min(100%, 720px); }
  .book-extra { width: min(100%, 760px); display: grid; justify-items: center; text-align: center; padding-top: 4px; }
  .book-extra .team-mini .team-list { justify-content: center; }
}
.book-frame { --r-frame: 26px; --bezel: 9px; view-transition-name: stage; }

.cal { position: relative; min-height: 660px; }
@media (min-width: 1100px) { .cal { min-height: 560px; } }
@media (max-width: 640px) { .cal { min-height: 580px; } }
.cal-host { position: relative; z-index: 1; min-width: 290px; min-height: inherit; opacity: 0; transition: opacity .6s var(--ease-out); }
.cal-host iframe { display: block; width: 100%; min-height: inherit; border: 0; }
/* Con el alto informado por Calendly, el alto lo manda el calendario (y el recorte de escritorio, ver app.js) */
.cal.is-sized { min-height: 0; }
.cal.is-sized .cal-host { min-height: 0 !important; height: var(--cal-h) !important; overflow: hidden; }
.cal.is-sized .cal-host iframe { min-height: 0 !important; height: var(--cal-ih) !important; margin-top: var(--cal-mt) !important; zoom: var(--cal-z, 1); }
.cal[data-state="ready"] .cal-host, .cal[data-state="booked"] .cal-host { opacity: 1; }
/* Esqueleto con la forma del calendario, mientras carga Calendly */
.cal-skel { position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: clamp(22px, 4vw, 44px); display: grid; align-content: start; gap: 22px; transition: opacity .5s var(--ease-out), visibility 0s linear .5s; }
.cal[data-state="ready"] .cal-skel, .cal[data-state="booked"] .cal-skel, .cal[data-state="empty"] .cal-skel, .cal[data-state="error"] .cal-skel { opacity: 0; visibility: hidden; }
.sk { border-radius: 10px; background: linear-gradient(100deg, #eef3f2 30%, #f8fbfb 50%, #eef3f2 70%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: no-preference) { .sk { animation: shimmer 1.6s linear infinite; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-title { height: 26px; width: 46%; }
.sk-month { display: flex; justify-content: space-between; align-items: center; }
.sk-month .sk { height: 18px; width: 30%; }
.sk-month .sk + .sk { width: 64px; }
.sk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(8px, 1.6vw, 16px); }
.sk-days .sk { aspect-ratio: 1; border-radius: 50%; max-width: 52px; justify-self: center; width: 100%; }
.sk-days .sk:nth-child(3n) { background: linear-gradient(100deg, #d6fff1 30%, #effffa 50%, #d6fff1 70%) 0 0 / 300% 100%; }
/* Estados: sin configurar, error, reservado */
.cal-state { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 32px; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), visibility 0s linear .5s; }
.cal-state h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); letter-spacing: -.02em; line-height: 1.1; font-weight: 800; }
.cal-state p { color: var(--muted); max-width: 40ch; }
.cal[data-state="empty"] .cal-empty, .cal[data-state="error"] .cal-error, .cal[data-state="booked"] .cal-done { opacity: 1; visibility: visible; transition-delay: 0s; }
.cal-slow { position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: 14.5px; color: var(--muted); opacity: 0; transition: opacity .5s; white-space: nowrap; }
.cal-slow a { color: var(--mint-ink); font-weight: 700; }
.cal.is-slow[data-state="loading"] .cal-slow { opacity: 1; }
.cal-done { background: rgb(255 255 255 / .72); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.done-check { width: 84px; height: 84px; }
.done-check circle { fill: var(--mint); stroke: none; transform-origin: 50% 50%; }
.done-check path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
.cal[data-state="booked"] .done-check circle { animation: pop .7s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .cal[data-state="booked"] .done-check circle { animation: fade .3s ease both; } }
@keyframes fade { from { opacity: 0; } }
.cal[data-state="booked"] .done-check path { transition: stroke-dashoffset .6s var(--ease-quint) .25s; stroke-dashoffset: 0; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }
.done-bar { width: 160px; height: 4px; border-radius: 4px; background: rgb(0 0 0 / .08); overflow: hidden; }
.done-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--cyan)); transform-origin: 0 50%; transform: scaleX(0); }
.cal[data-state="booked"] .done-bar i { transition: transform 1.2s var(--ease-io) .3s; transform: scaleX(1); }

/* ================= Paso 2: gracias ================= */
.hero-ty { position: relative; padding: calc(var(--island-top) + var(--island-h) + clamp(28px, 4.5vw, 56px)) 0 clamp(64px, 9vw, 120px); text-align: center; }
.hero-ty .ribbon { top: clamp(300px, 34vw, 460px); view-transition-name: ribbon; }
.hero-ty .glow-spot { width: 64vw; height: 40vw; max-width: 900px; max-height: 560px; left: 50%; top: 20%; transform: translateX(-50%); opacity: .28; }
@media (max-width: 767px) { .glow-spot { display: none; } }
.ty { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ty .h1 { font-size: clamp(2.5rem, 1.3rem + 4.3vw, 4.5rem); max-width: 17ch; }
@media (min-width: 1100px) { .ty .h1 { max-width: 24ch; } }
.ty .h1 .l2 { display: block; }
.ty .lead { margin-top: clamp(16px, 2vw, 24px); max-width: 44ch; }
.when { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; font-weight: 700; color: var(--ink); --gb: 12px; }
.when .icon { color: var(--mint-ink); width: 18px; height: 18px; }
.video-frame { --r-frame: 32px; --bezel: 13px; width: min(100%, 960px); margin-top: clamp(26px, 3.4vw, 40px); view-transition-name: stage; }
.video-core { aspect-ratio: var(--ratio, 16 / 9); background: var(--charcoal); }
.video-frame.is-vertical { width: min(100%, 420px); }
.video-core iframe, .video-core video { width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.poster { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background:
  radial-gradient(120% 90% at 18% 110%, rgb(0 255 178 / .55), transparent 55%),
  radial-gradient(90% 80% at 100% 0%, rgb(0 224 255 / .45), transparent 60%), var(--charcoal); }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.poster .orb { width: clamp(84px, 9vw, 112px); height: clamp(84px, 9vw, 112px); }
@media (hover: hover) and (pointer: fine) { .poster:hover img { transform: scale(1.03); } }

/* ================= Prueba social ================= */
.proof { position: relative; padding: clamp(76px, 10vw, 140px) 0 clamp(76px, 9vw, 124px); overflow: clip;
  background: linear-gradient(180deg, #fff 0, var(--wash) 160px, var(--wash) calc(100% - 160px), #fff 100%); }
.proof[hidden] { display: none; }
.rail > .ribbon { top: 4%; --rh: clamp(300px, 36vw, 520px); }
.proof-head { position: relative; z-index: 1; }
.proof-block { position: relative; z-index: 1; margin-top: clamp(36px, 5vw, 56px); }
.proof-block[hidden] { display: none; }

/* Confirmación: los dos pasos */
.next-steps { list-style: none; margin: clamp(28px, 3.6vw, 44px) 0 0; padding: 0; display: grid; gap: 14px; width: min(100%, 760px); text-align: left; counter-reset: none; }
.nstep { --gb: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); align-items: start; padding: clamp(20px, 3vw, 30px); border-radius: 24px; }
.nstep-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1; box-shadow: 0 8px 20px -10px hsl(var(--shade) / .5); }
.nstep h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 1.08rem + .7vw, 1.5rem); letter-spacing: -.015em; line-height: 1.15; color: var(--ink); padding-top: 8px; }
.nstep p { margin-top: 8px; color: var(--text); line-height: 1.55; max-width: 56ch; }
.nstep-cta { margin-top: 18px; }

/* /clase: rótulos de paso sobre el video y el calendario */
.mf .step-label { display: inline-flex; align-items: center; gap: 12px; text-align: left; margin-top: clamp(36px, 4.4vw, 56px); font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 1.08rem + .7vw, 1.5rem); letter-spacing: -.015em; line-height: 1.15; color: var(--ink); }
.step-label .nstep-n { width: 38px; height: 38px; font-size: 1rem; }
.hero-clase .video-frame { margin-top: 18px; }
.clase-cal { width: min(100%, 960px); margin-top: 18px; text-align: left; view-transition-name: none; }
/* Título de /clase en dos líneas justas ("privada y agenda tu llamada" mide 13,3 veces el cuerpo), la pastilla de cupos
   debajo como en la agenda y la línea de prueba debajo de la clase */
.mf[data-page="clase"] .ty { container-type: inline-size; }
.mf[data-page="clase"] .ty .h1 { font-size: clamp(1.1rem, calc(100cqi / 14), 3.25rem); max-width: none; }
.mf[data-page="clase"] .ty .h1 .l1, .mf[data-page="clase"] .ty .h1 .l2 { display: block; white-space: nowrap; }
.mf[data-page="clase"] .proof-line { margin-top: clamp(16px, 2vw, 22px); }
/* Clase de preguntas (/qa): "de preguntas y agenda tu llamada" mide 15,8 veces el cuerpo */
.mf[data-clase="qa"] .ty .h1 { font-size: clamp(1rem, calc(100cqi / 16.6), 3.25rem); }
/* Cuenta regresiva: barra roja fija debajo de la isla (mismo rojo que la pastilla de cupos, 6:1 de contraste).
   --expira-h la pone el JS con el alto real, para correr el contenido y el destino de los links internos. */
.island-wrap.has-expira { flex-direction: column; align-items: center; gap: 8px; }
.expira { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; max-width: 100%;
  padding: 6px 7px 6px 16px; border-radius: 999px; background: #fdecea; color: #b3261e;
  box-shadow: inset 0 0 0 1px rgb(200 30 30 / .28), 0 12px 28px -16px rgb(179 38 30 / .55); }
.expira-t { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: .875rem; line-height: 1.2; }
.expira-n { display: flex; gap: 4px; }
.expira-n span { display: inline-flex; align-items: baseline; gap: 1px; padding: 4px 8px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgb(200 30 30 / .18); }
.expira-n b { font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.expira-n i { font-style: normal; font-size: .75rem; font-weight: 700; }
.expira.is-over { padding: 9px 18px; }
@media (max-width: 480px) {
  .expira { border-radius: 18px; padding: 7px 10px 8px; gap: 5px 10px; }
  .expira-t { font-size: .8125rem; }
}
/* /clase sin la isla (Método Funcional · Clase · Agenda): arriba queda solo la barra roja de la cuenta regresiva */
.mf[data-page="clase"] .island { display: none; }
.mf[data-page="clase"] .hero-ty { padding: calc(var(--island-top) + var(--expira-h, 0px) + clamp(20px, 3.5vw, 44px)) 0 clamp(40px, 5vw, 64px); }
/* Subtítulo en dos líneas en escritorio */
@media (min-width: 900px) { .mf[data-page="clase"] .ty .lead { max-width: 64ch; } }
/* Calendario ceñido al embed: con este ancho Calendly muestra su vista compacta, que llena el marco sin márgenes vacíos */
.mf[data-page="clase"] .clase-cal { width: min(100%, 520px); }
/* Equipo centrado, como en la confirmación */
.mf[data-page="clase"] .team-in { text-align: center; }
.mf[data-page="clase"] .sub { margin-inline: auto; }
.mf[data-page="clase"] .team-list { display: flex; flex-wrap: wrap; justify-content: center; }
/* Equipo más chico en /clase: título, fotos y nombres a escala de la confirmación */
.mf[data-page="clase"] .team { padding-bottom: clamp(36px, 4.5vw, 56px); }
.mf[data-page="clase"] .team .h2 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); }
.mf[data-page="clase"] .team .sub { margin-top: 8px; font-size: .9375rem; }
.mf[data-page="clase"] .team-list { margin-top: clamp(16px, 2.2vw, 24px); gap: 14px 10px; }
.mf[data-page="clase"] .team-list .person { width: clamp(80px, 21vw, 104px); }
.mf[data-page="clase"] .face { max-width: 104px; }
.mf[data-page="clase"] .pname { margin-top: 8px; font-size: .875rem; }
@media (max-width: 599px) {
  /* En celular todos entran en una fila: cada foto se achica lo justo para el ancho */
  .mf[data-page="clase"] .team-list { flex-wrap: nowrap; gap: 8px; }
  .mf[data-page="clase"] .team-list .person { flex: 1 1 0; min-width: 0; width: auto; max-width: 104px; }
  .mf[data-page="clase"] .pname { font-size: .8125rem; }
  /* Con seis caras los nombres van en la letra de texto, como en la agenda, para que entren debajo de cada foto */
  .mf[data-page="clase"] .pname { font-family: var(--font-text); font-weight: 600; font-size: .75rem; letter-spacing: 0; }
}
@media (max-width: 359px) {
  .mf[data-page="clase"] .team-list { gap: 5px; }
  .mf[data-page="clase"] .pname { font-size: .6875rem; }
}
.poster.is-soon .orb { display: none; }
.poster-note { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 999px; background: rgb(0 0 0 / .42); color: rgb(255 255 255 / .92); font-size: .95rem; font-weight: 600; line-height: 1.3; text-align: center; }

/* Equipo: quién va a atender la llamada */
.team { position: relative; z-index: 1; padding: 0 0 clamp(72px, 9vw, 120px); }
.team-list { list-style: none; margin: clamp(30px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 34vw, 170px), 1fr)); gap: clamp(22px, 3vw, 36px) clamp(12px, 2vw, 24px); }
.person { display: grid; justify-items: center; text-align: center; }
/* La foto es la pieza completa (Julien + closer, con su propio aro): se recorta en círculo y nada más */
.face { position: relative; display: grid; place-items: center; width: 100%; max-width: 170px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: #eaf5f2;
  box-shadow: 0 30px 60px -36px hsl(var(--shade) / .55); }
.face.no-foto { background: linear-gradient(145deg, var(--mint), var(--cyan)); }
.face .ini { visibility: hidden; }
.face.no-foto .ini { visibility: visible; }
.face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .person:hover .face img { transform: scale(1.03); } }
.face .ini { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); letter-spacing: -.02em; color: var(--ink); }
.pname { margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--ink); }
.prol { margin-top: 2px; color: var(--muted); font-size: .95rem; }

/* Reels de testimonio */
.rail { position: relative; }
.rail > .reels, .rail > .rail-nav { position: relative; z-index: 1; }
.reels {
  --card: clamp(210px, 64vw, 272px);
  list-style: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: var(--card); gap: clamp(14px, 2vw, 22px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 14px max(var(--gutter), calc((100% - var(--max)) / 2)) 26px; scroll-padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2));
}
.reels::-webkit-scrollbar { display: none; }
.rail.overflows .reels { -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); }
.rail.fits .reels { justify-content: center; }
.rail.dragging .reels { scroll-snap-type: none; cursor: grabbing; }
.rail.dragging .reels * { pointer-events: none; }
.reel { scroll-snap-align: start; }
.reel figure { margin: 0; }
.reel-frame { --r-frame: 26px; --bezel: 7px; transition: transform .5s var(--ease-out); }
.reel-core { aspect-ratio: 9 / 16; background: var(--charcoal); }
.reel-core > img, .reel-core > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.reel-core > video.playing { object-fit: contain; background: #000; }
.reel-core > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
/* Videos horizontales (entrevistas, llamadas grabadas): tarjetas 16:9 más anchas */
.rail.is-wide .reels { --card: clamp(280px, 84vw, 480px); }
.rail.is-wide .reel-core { aspect-ratio: 16 / 9; }
.reel-core .orb { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.reel-core .orb { width: 66px; height: 66px; }
.reel figcaption { padding: 14px 6px 0; display: grid; gap: 4px; }
.reel figcaption strong { font-family: var(--font-display); font-weight: 800; font-size: 1.0625rem; color: var(--ink); letter-spacing: -.01em; }
.reel figcaption span { color: var(--muted); font-size: .98rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .reel:hover .reel-frame { transform: translateY(-6px); }
  .reel:hover .reel-core > img { transform: scale(1.04); }
}
.rail-nav { display: none; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.rail.overflows .rail-nav { display: flex; }
.rail-nav .orb { width: 52px; height: 52px; }
.rail-nav .orb .icon { width: 20px; height: 20px; }
@media (max-width: 767px) { .rail.overflows .rail-nav { display: none; } }

/* Capturas en marquee (paso 1) */
.marquee { position: relative; display: grid; gap: clamp(12px, 1.6vw, 18px); }
.mq-row { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding-block: 8px; }
.mq-track { display: flex; width: max-content; }
.mq-track ul { list-style: none; margin: 0; padding: 0 clamp(12px, 1.6vw, 18px) 0 0; display: flex; gap: clamp(12px, 1.6vw, 18px); }
@media (prefers-reduced-motion: no-preference) {
  .mq-track { animation: mq var(--dur, 80s) linear infinite; }
  .mq-row.rev .mq-track { animation-direction: reverse; }
  .marquee:not(.inview) .mq-track, .marquee.paused .mq-track, .mq-row:hover .mq-track, .mq-row:focus-within .mq-track { animation-play-state: paused; }
}
@keyframes mq { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .mq-row { overflow-x: auto; -webkit-mask: none; mask: none; }
  .mq-track ul[aria-hidden="true"], .mq-toggle { display: none; }
}
.mq-toggle { justify-self: end; margin-right: var(--gutter); height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); --gb: 10px; }
.mq-toggle .icon { width: 14px; height: 14px; }
.mq-toggle { transition: transform .16s var(--ease-out); }
.mq-toggle:active { transform: scale(.97); }
.shot {
  --r-frame: 18px; --bezel: 6px; display: block; width: 100%; text-align: left; cursor: zoom-in;
  transition: transform .45s var(--ease-out);
}
.shot.glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(165deg, rgb(255 255 255 / .96), rgb(255 255 255 / .72)); }
.shot .frame-core { display: block; background: #f4f6f6; }
.shot img { width: 100%; height: auto; }
.mq-track .shot { width: auto; }
.mq-track .shot img { height: clamp(220px, 26vw, 300px); width: auto; max-width: none; }
@media (hover: hover) and (pointer: fine) { .shot:hover { transform: translateY(-4px) rotate(-.4deg); } }
.shot:active { transform: scale(.98); }

/* Capturas en grilla tipo masonry (paso 2) */
.shots-grid { list-style: none; margin: 0; padding: 0; columns: 4 250px; column-gap: clamp(14px, 1.8vw, 20px); }
.shots-grid li { break-inside: avoid; margin-bottom: clamp(14px, 1.8vw, 20px); }

.back { position: relative; z-index: 1; margin-top: clamp(44px, 6vw, 72px); display: flex; justify-content: center; }

/* ================= Lightbox ================= */
.lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; color: #fff; }
.lb::backdrop { background: transparent; }
.lb-scrim { position: absolute; inset: 0; background: rgb(22 26 25 / .78); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
.lb-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(64px, 8vh, 96px) clamp(12px, 7vw, 110px); touch-action: none; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 16px; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6); user-select: none; -webkit-user-drag: none; will-change: transform; }
.lb .orb { position: absolute; color: var(--ink); width: 52px; height: 52px; }
.lb .orb .icon { width: 20px; height: 20px; }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; translate: 0 -50%; }
.lb-next { right: 18px; top: 50%; translate: 0 -50%; }
.lb-count { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; font-weight: 700; font-size: 14px; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .85); }
@media (max-width: 640px) { .lb-prev, .lb-next { display: none; } }

/* ================= Pie ================= */
.foot { padding: 34px 0 40px; font-size: 14.5px; color: var(--muted); }
.foot .container { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 26px; }
.foot p:first-child { max-width: 62ch; }

/* ================= Cambio de página (paso 1 -> paso 2) ================= */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: var(--ease-drawer); }
::view-transition-old(root) { animation: vt-out .35s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-quint) .1s both; }
@keyframes vt-out { to { opacity: 0; filter: blur(10px); transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; filter: blur(12px); transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .island-act, .island-act .btn-mini, .steps, .step .dot, .step .dot .icon { transition: none !important; } }

/* ================= Ajustes móviles ================= */
@media (max-width: 560px) {
  :root { --island-h: 54px; --island-top: 10px; }
  .island { padding: 0 6px 0 14px; gap: 10px; }
  .brand { font-size: 12.5px; }
  .step .lbl { display: none; }
  .step.is-active .lbl { display: inline; }
  .steps .track { width: 22px; margin: 0 8px; }
  .btn .btn-t { padding: 0 20px; }
  .btn-mini { height: 40px; padding: 0 13px; font-size: 13px; }
  .btn-mini .full { display: none; }
}
@media (max-width: 380px) { .brand { display: none; } }

/* ================= Confirmación compacta (mismo criterio que la agenda: todo un poco más chico) ================= */
.mf[data-page="gracias"] .hero-ty { padding: calc(var(--island-top) + var(--island-h) + clamp(14px, 2vw, 26px)) 0 clamp(36px, 5vw, 60px); }
/* Título en dos líneas justas: "Tu llamada está reservada." mide 12,6 veces el cuerpo */
.mf[data-page="gracias"] .ty { container-type: inline-size; }
.mf[data-page="gracias"] .ty .h1 { font-size: clamp(1.5rem, calc(100cqi / 13.2), 3.25rem); max-width: none; }
.mf[data-page="gracias"] .ty .h1 .l1, .mf[data-page="gracias"] .ty .h1 .l2 { display: block; white-space: nowrap; }
.mf[data-page="gracias"] .ty .lead { margin-top: clamp(10px, 1.4vw, 16px); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); }
.mf[data-page="gracias"] .next-steps { margin-top: clamp(20px, 2.6vw, 30px); gap: 10px; width: min(100%, 660px); }
.mf[data-page="gracias"] .nstep { padding: clamp(16px, 2.2vw, 22px); border-radius: 20px; gap: clamp(12px, 1.6vw, 18px); }
.mf[data-page="gracias"] .nstep-n { width: 36px; height: 36px; font-size: 1rem; }
.mf[data-page="gracias"] .nstep h2 { font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); padding-top: 5px; }
.mf[data-page="gracias"] .nstep p { margin-top: 6px; font-size: .9375rem; }
.mf[data-page="gracias"] .nstep-cta { margin-top: 14px; }
.mf[data-page="gracias"] .h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); }
.mf[data-page="gracias"] .sub { margin-top: 10px; font-size: 1rem; }
.mf[data-page="gracias"] .team { padding-bottom: clamp(36px, 4.5vw, 56px); }
.mf[data-page="gracias"] .team-list { margin-top: clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 26vw, 124px), 1fr)); gap: 16px 12px; }
.mf[data-page="gracias"] .face { max-width: 124px; }
.mf[data-page="gracias"] .pname { margin-top: 10px; font-size: .95rem; }
.mf[data-page="gracias"] .proof { padding: clamp(36px, 4.5vw, 64px) 0 clamp(44px, 5.5vw, 76px); }
/* Los testimonios van justo debajo de los pasos: el fondo arranca transparente para que la ola de arriba se
   funda en él en vez de cortarse en seco */
.mf[data-page="gracias"] .proof { background: linear-gradient(180deg, rgb(255 255 255 / 0) 0, var(--wash) 220px, var(--wash) calc(100% - 160px), #fff 100%); }
.mf[data-page="gracias"] .proof-block { margin-top: clamp(20px, 2.8vw, 32px); }
.mf[data-page="gracias"] .reels { --card: clamp(170px, 48vw, 212px); }
.mf[data-page="gracias"] .rail.is-wide .reels { --card: clamp(240px, 72vw, 380px); }
.mf[data-page="gracias"] .reel figcaption { padding-top: 10px; }
.mf[data-page="gracias"] .reel figcaption strong { font-size: 1rem; }
.mf[data-page="gracias"] .shots-grid { columns: 5 190px; }
/* Confirmación: todo centrado como el título y los pasos */
.mf[data-page="gracias"] .team-in, .mf[data-page="gracias"] .proof-head { text-align: center; }
.mf[data-page="gracias"] .sub { margin-inline: auto; }
.mf[data-page="gracias"] .team-list { display: flex; flex-wrap: wrap; justify-content: center; }
.mf[data-page="gracias"] .team-list .person { width: clamp(96px, 26vw, 124px); }
.mf[data-page="gracias"] .rail-nav { justify-content: center; }
/* "Testimonios de Pacientes" en una sola línea; en celular el tamaño baja con el ancho para que entre */
.mf[data-page="gracias"] #t-proof { white-space: nowrap; font-size: min(clamp(1.6rem, 1.1rem + 2vw, 2.5rem), 7vw); }
.mf[data-page="gracias"] #t-proof strong { display: inline; }

/* ================= Onboarding (/onboarding): bienvenida + video + bono + cierre ================= */
/* Sin isla, como /clase: el título arranca arriba */
.mf[data-page="onboarding"] .hero-ty { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); }
/* Título en dos líneas justas ("Funcional Personalizado" mide 11,5 veces el cuerpo): el tamaño sale del ancho */
.mf[data-page="onboarding"] .ty { container-type: inline-size; }
.mf[data-page="onboarding"] .ty .h1 { font-size: clamp(1.1rem, calc(100cqi / 12.2), 3.5rem); max-width: none; }
.mf[data-page="onboarding"] .ty .h1 .l1, .mf[data-page="onboarding"] .ty .h1 .l2 { display: block; white-space: nowrap; }
.mf[data-page="onboarding"] .ty .lead { margin-top: clamp(12px, 1.6vw, 18px); max-width: 52ch; }
/* Bono: tarjeta de vidrio con el regalo en el disco menta y todo centrado (disco, título, texto y botón) */
.bono { width: min(100%, 760px); margin-top: clamp(20px, 2.6vw, 30px); grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 12px; text-align: center; }
.bono .nstep-n .icon { width: 22px; height: 22px; }
.mf .bono h2 { padding-top: 0; }
.mf .bono p { margin-inline: auto; }
.bono-soon { font-size: .9375rem; font-weight: 700; color: var(--mint-ink); }
.mf .bono .bono-soon { margin-top: 14px; }
/* PC: la tarjeta con el ancho del video y el texto en dos líneas parejas */
@media (min-width: 900px) {
  .bono { width: min(100%, 960px); }
  .mf .bono .nstep-body > p:not(.bono-soon) { max-width: 88ch; text-wrap: balance; }
}
/* Celular: el botón a todo el ancho de la tarjeta */
@media (max-width: 480px) {
  .bono .btn { display: flex; }
  .bono .btn .btn-t { flex: 1; padding: 0 16px; }
}
/* Cierre: "Nos vemos el 5", con el contraste de peso de los títulos de sección */
.cierre { position: relative; z-index: 1; padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 6vw, 80px); }
.cierre-in { text-align: center; }
.cierre .h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); }
.mf .cierre .sub { margin: 10px auto 0; }

/* Agenda: nombres del equipo sin negrita */
.team-mini .pname { font-weight: 500; }
/* Celular: todo el equipo siempre en una fila; cada uno se achica lo justo para entrar */
@media (max-width: 599px) {
  /* Tope en el ancho de la pantalla: en 320 px el mínimo del calendario ensancha la columna y la última foto quedaba cortada */
  .team-mini .team-list { flex-wrap: nowrap; gap: 8px; max-width: calc(100vw - 2 * var(--gutter)); }
  .team-mini .person { flex: 1 1 0; min-width: 0; max-width: 76px; width: auto; }
  .team-mini .pname { font-size: .75rem; }
}
@media (max-width: 359px) {
  .team-mini .team-list { gap: 5px; }
  .team-mini .pname { font-size: .6875rem; }
}

/* Botón flotante de WhatsApp (código del equipo) + etiqueta "Dudas o Preguntas" a su izquierda */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  height: 60px;
  z-index: 1000;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: floatPulse 2.5s infinite;
}
.whatsapp-float img {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-float:hover img {
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.whatsapp-float-t {
  padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--ink);
  font-family: var(--font-text); font-weight: 700; font-size: .9375rem; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
@keyframes floatPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-float { animation: none; } }
@media (max-width: 480px) {
  .whatsapp-float { bottom: 14px; right: 14px; height: 46px; gap: 8px; }
  .whatsapp-float img { width: 46px; height: 46px; }
  .whatsapp-float-t { font-size: .8125rem; padding: 7px 11px; }
}
/* WhatsApp arriba a la derecha, a la altura de la isla. En pantallas medianas solo el ícono (la etiqueta
   chocaría con la isla cuando se expande); en celular queda abajo porque la isla ocupa casi todo el ancho. */
@media (min-width: 760px) {
  .whatsapp-float { top: var(--island-top); bottom: auto; right: 20px; }
}
@media (min-width: 760px) and (max-width: 1149px) {
  .whatsapp-float-t { display: none; }
}

/* ================= Downsell: Programa de Espalda de por vida (/espalda y /espalda-pago) ================= */
/* Landing de venta con escala propia, calibrada contra la competencia (títulos grandes, cuerpo de 17px, fotos
   amplias, contenedor de 1160px): más chica que el resto del sitio, sin llegar a quedar apretada. Un solo botón
   ("Quiero acceder") que lleva a la página de pago, y una sola pieza con color fuerte por pantalla. La ola de la
   marca queda solo en el hero. Lo oscuro va como tarjeta carbón (el precio), no como sección a todo el ancho. */
.mf:is([data-page^="espalda"], [data-page="movilidad"]) { --max: 1160px; font-size: clamp(1rem, .96rem + .18vw, 1.0625rem); line-height: 1.55; }
.mf:is([data-page^="espalda"], [data-page="movilidad"]) .h1 { font-size: clamp(2.375rem, 1.5rem + 3.9vw, 4.25rem); line-height: 1.02; }
.mf:is([data-page^="espalda"], [data-page="movilidad"]) .h2 { font-size: clamp(1.75rem, 1.3rem + 2.1vw, 3rem); line-height: 1.06; }
.mf:is([data-page^="espalda"], [data-page="movilidad"]) .lead { font-size: clamp(1.0625rem, .98rem + .45vw, 1.25rem); line-height: 1.55; max-width: 44ch; }
.mf:is([data-page^="espalda"], [data-page="movilidad"]) .sub { margin-top: 12px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.esp-nw { white-space: nowrap; }
.esp-sec { position: relative; padding: clamp(48px, 6.5vw, 92px) 0; }
.esp-tint { background: var(--wash); }
.esp-split { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
@media (min-width: 820px) { .esp-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.esp-copy .lead { margin-top: 16px; }
.esp-key { margin-top: 14px; max-width: 26ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1875rem, 1.1rem + .5vw, 1.4375rem); line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.esp-tag { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--wash); box-shadow: inset 0 0 0 1px rgb(0 107 80 / .16);
  color: var(--mint-ink); font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.esp-tag + .h2 { margin-top: 14px; }
.esp-solo { text-align: center; }
.esp-solo .h2 { max-width: 24ch; margin-inline: auto; }
.mf .esp-solo .lead { margin: 16px auto 0; max-width: 52ch; }

/* El botón: el mismo en toda la página y de una sola pieza (la flecha va adentro), en mayúsculas. Se mueve apenas
   de izquierda a derecha, lento; al pasar el puntero se queda quieto para que sea fácil de tocar. Lleva siempre un
   brillo verde que gira por el borde (el recurso de la pastilla roja de cupos, en menta): ::after es la cara del
   botón con el borde de luz y ::before el mismo anillo desenfocado por detrás. El brillo no se apaga nunca; con
   movimiento reducido queda fijo. */
.esp-act { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; }
.esp-act.c { justify-items: center; text-align: center; }
.esp-act .cupos { margin-top: 0; }
.esp-act-n { font-size: clamp(.875rem, .8rem + .3vw, 1rem); font-weight: 600; color: var(--muted); }
.esp-act-n b { font-weight: 800; color: var(--ink); }
@property --esp-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.esp-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: clamp(60px, 3.4rem + 1vw, 68px); padding: 0 clamp(22px, 3.4vw, 44px);
  border-radius: var(--r-ctl); color: var(--ink); font-weight: 800; font-size: clamp(1rem, .94rem + .3vw, 1.1875rem); letter-spacing: .045em; text-transform: uppercase; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: filter .2s; }
.esp-btn::before, .esp-btn::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; }
.esp-btn::before { z-index: -2; inset: -5px; filter: blur(14px);
  background: conic-gradient(from var(--esp-ang), rgb(0 255 178 / .7) 0deg, rgb(0 255 178 / .7) 190deg, rgb(0 224 255 / 1) 285deg, rgb(214 255 243 / 1) 335deg, rgb(0 255 178 / .7) 360deg); }
.esp-btn::after { z-index: -1; inset: 0; border: 2px solid transparent;
  background: linear-gradient(var(--mint), var(--mint)) padding-box, conic-gradient(from var(--esp-ang), rgb(0 200 145 / .75) 0deg, rgb(0 200 145 / .75) 190deg, rgb(0 224 255 / 1) 285deg, #fff 335deg, rgb(0 200 145 / .75) 360deg) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), inset 0 -2px 0 rgb(0 120 90 / .18); }
.esp-btn .icon { width: 20px; height: 20px; }
.esp-btn:active { filter: brightness(.95); }
@media (hover: hover) and (pointer: fine) { .esp-btn:hover { filter: saturate(1.1) brightness(1.03); animation-play-state: paused; } }
@media (prefers-reduced-motion: no-preference) {
  .esp-btn { animation: esp-sway 3.4s ease-in-out infinite; }
  .esp-btn::before, .esp-btn::after { animation: esp-glow 3.2s linear infinite; }
}
@media (max-width: 360px) { .esp-btn { font-size: .9375rem; letter-spacing: .03em; gap: 8px; } }
@keyframes esp-glow { to { --esp-ang: 360deg; } }
@keyframes esp-sway { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }

/* Hero: título, botón y precio a la izquierda; el dolor de espalda atrás y Julien sonriendo adelante */
.esp-hero { position: relative; overflow: clip; padding: clamp(28px, 4.6vw, 68px) 0 clamp(20px, 3vw, 40px); }
.esp-hero .ribbon { top: 62%; --rh: clamp(210px, 26vw, 360px); view-transition-name: ribbon; }
/* En PC la ola pasa solo por detrás de la foto: sobre el texto y el botón le quitaba lectura al precio */
@media (min-width: 820px) { .esp-hero .ribbon { top: 30%; --rh: clamp(200px, 22vw, 330px); -webkit-mask: linear-gradient(90deg, transparent 40%, #000 66%); mask: linear-gradient(90deg, transparent 40%, #000 66%); } }
.esp-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: center; }
@media (min-width: 820px) { .esp-hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.esp-hero .lead { margin-top: 16px; max-width: 32ch; }

/* Disco menta → cian detrás de las fotos recortadas */
.esp-disc { position: relative; width: min(100%, 460px); margin-inline: auto; aspect-ratio: 1; }
.esp-disc::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(135deg, rgb(0 255 178 / .36), rgb(0 224 255 / .3)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); }
.esp-disc img { position: absolute; max-width: none; height: auto; }
/* La cabeza sale por arriba del disco y el disco recorta por abajo */
.esp-disc-cut { aspect-ratio: 1 / 1.12; overflow: hidden; border-radius: 0 0 999px 999px; }
.esp-disc-cut img { bottom: 0; left: 50%; translate: -50% 0; height: 100%; width: auto; }
.esp-hero-duo { width: min(92%, 520px); aspect-ratio: 1 / 1.02; }
.esp-hero-duo .esp-pain { left: 27%; height: 84%; }
.esp-hero-duo .esp-jul { left: 66%; height: 100%; }
.esp-duo img:first-of-type { left: 2%; bottom: 5%; width: 54%; }
.esp-duo img:last-of-type { right: 5%; bottom: 5%; width: 40%; }
.esp-julien .esp-disc { width: min(80%, 400px); }

/* Prueba en una línea, debajo del hero */
.esp-proof-sec { padding: clamp(10px, 2vw, 20px) 0 0; }
.esp-proof { list-style: none; margin: 0 auto; padding: clamp(16px, 2.2vw, 26px) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.esp-proof li { padding: 0 clamp(10px, 2.4vw, 28px); border-left: 1px solid var(--line); min-width: 0; }
.esp-proof li:first-child { padding-left: 0; border-left: 0; }
.esp-proof strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.0625rem, .7rem + 1.7vw, 2.25rem); letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.esp-proof span { display: block; margin-top: 5px; font-size: clamp(.8438rem, .79rem + .25vw, 1rem); line-height: 1.3; color: var(--muted); }

/* Las 3 etapas: una secuencia unida por una línea, no tres tarjetas */
.esp-steps { list-style: none; margin: clamp(28px, 3.6vw, 44px) 0 0; padding: 0; display: grid; gap: 24px; }
.esp-steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; }
.esp-step-n { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mint); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.1875rem; line-height: 1; box-shadow: 0 6px 14px -8px rgb(0 190 135 / .9); }
.esp-steps li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 50px; bottom: -18px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--mint), var(--cyan)); opacity: .55; }
.esp-steps h3 { padding-top: 9px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1875rem, 1.1rem + .45vw, 1.5rem); letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.esp-steps p { margin-top: 4px; font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.5; color: var(--muted); }
@media (min-width: 820px) {
  .esp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .esp-steps li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .esp-step-n { grid-row: auto; }
  .esp-steps h3 { padding-top: 8px; }
  .esp-steps li:not(:last-child)::before { left: 56px; right: -28px; top: 21px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--mint), var(--cyan)); }
}

/* Todo esto es lo que te llevas: la oferta del PDF del downsell (los cinco ítems de "Qué incluye") en un escenario
   oscuro con mockups, al estilo de la presentación del webinar */
.esp-stage { overflow: hidden; max-width: 1040px; margin-inline: auto; border-radius: clamp(18px, 2.6vw, 28px); padding: clamp(26px, 4vw, 48px) clamp(12px, 3vw, 40px) 0; text-align: center; color: #fff;
  background: radial-gradient(70% 55% at 50% 70%, rgb(0 255 178 / .14), transparent 72%), linear-gradient(160deg, #12322d, #151c1b 72%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 30px 60px -32px hsl(var(--shade) / .6); }
.esp-stage .h2 { color: #fff; }
.esp-stage .h2 strong { color: var(--mint); }
.esp-mocks { position: relative; container-type: inline-size; width: 100%; margin: clamp(16px, 2.4vw, 26px) auto 0; aspect-ratio: 1 / 1.1; }
.esp-ped { position: absolute; left: 14%; right: 14%; top: 50%; bottom: -4%; border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  background: linear-gradient(180deg, rgb(0 255 178 / .2), rgb(0 255 178 / 0) 78%); }
.mk { position: absolute; }
.mk-scr, .mk-face { display: grid; align-content: center; justify-items: center; gap: .5em; width: 100%; height: 100%; overflow: hidden; font-size: var(--fs); }
.mk-scr { background: radial-gradient(120% 90% at 50% 0%, #1b4a41, #0f2622 70%); }
.mk p { font-family: var(--font-display); font-weight: 800; font-size: 1em; line-height: 1.04; letter-spacing: -.01em; text-transform: uppercase; color: #fff; padding-inline: .5em; }
.mk p b { display: block; font-weight: 800; color: var(--mint); }
.mk-logo { width: 5.2em; height: auto; opacity: .92; }
.mk-tablet, .mk-laptop, .mk-phone { padding: var(--bz); background: #0a0d0c; box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 2.4cqi 4cqi -1.6cqi rgb(0 0 0 / .7); }
.mk-tablet { --fs: 2.9cqi; --bz: 1.3cqi; left: 1%; top: 35%; width: 29%; aspect-ratio: 3 / 4.1; border-radius: 3cqi; }
.mk-tablet .mk-scr { border-radius: 1.8cqi; }
.mk-laptop { --fs: 4.5cqi; --bz: 1.4cqi; left: 12%; top: 0; width: 76%; aspect-ratio: 16 / 10; border-radius: 2.4cqi 2.4cqi 0 0; }
.mk-laptop .mk-scr { border-radius: 1.2cqi; }
.mk-base { position: absolute; left: -6%; right: -6%; top: 100%; height: 1.9cqi; border-radius: 0 0 2.4cqi 2.4cqi; background: linear-gradient(180deg, #eef1f0, #aeb5b3); box-shadow: 0 2cqi 3cqi -1.4cqi rgb(0 0 0 / .7); }
.mk-phone { --fs: 1.95cqi; --bz: 1.1cqi; right: 2%; top: 39%; width: 21%; aspect-ratio: 9 / 18.5; border-radius: 3.6cqi; }
.mk-phone .mk-scr { border-radius: 2.6cqi; }
/* Cajas: cara de frente + lomo y tapa en perspectiva */
.mk-box { --bw: 31cqi; --fs: 2.9cqi; bottom: 3%; width: var(--bw); aspect-ratio: 1 / 1.1; }
.mk-box-1 { left: 16%; }
.mk-box-2 { left: 51%; }
.mk-face { position: relative; align-content: start; padding: 7% 6% 6%; background: linear-gradient(170deg, #17463d, #0f2b27); box-shadow: inset 0 0 0 1px rgb(0 255 178 / .4), 0 2.4cqi 4cqi -1.6cqi rgb(0 0 0 / .75); }
.mk-box::before, .mk-box::after { content: ""; position: absolute; }
.mk-box::after { left: 100%; top: 0; width: calc(var(--bw) * .09); height: 100%; background: linear-gradient(180deg, #0d2824, #071513); transform-origin: 0 0; transform: skewY(-38deg); }
.mk-box::before { left: 0; bottom: 100%; width: 100%; height: calc(var(--bw) * .0703); background: #1c5449; transform-origin: 0 100%; transform: skewX(-52deg); }
.mk-pic { width: 100%; flex: 1; min-height: 0; height: 100%; object-fit: cover; object-position: 50% 22%; border-radius: .5em; margin-top: .25em; }
.mk-face { grid-template-rows: auto auto minmax(0, 1fr); }
@media (min-width: 700px) {
  .esp-mocks { aspect-ratio: 16 / 9.2; }
  .esp-ped { left: 30%; right: 30%; top: 46%; }
  .mk-tablet { --fs: 1.95cqi; --bz: .9cqi; left: 3%; top: 12%; width: 21%; border-radius: 2cqi; }
  .mk-tablet .mk-scr { border-radius: 1.2cqi; }
  .mk-laptop { --fs: 3.1cqi; --bz: 1cqi; left: 27%; top: 3%; width: 46%; border-radius: 1.6cqi 1.6cqi 0 0; }
  .mk-laptop .mk-scr { border-radius: .8cqi; }
  .mk-base { height: 1.3cqi; border-radius: 0 0 1.6cqi 1.6cqi; }
  .mk-phone { --fs: 1.22cqi; --bz: .75cqi; right: 5%; top: 15%; width: 14%; border-radius: 2.4cqi; }
  .mk-phone .mk-scr { border-radius: 1.8cqi; }
  .mk-box { --bw: 20cqi; --fs: 1.85cqi; bottom: 3%; }
  .mk-box-1 { left: 16%; }
  .mk-box-2 { left: 57%; }
}
/* Debajo del escenario: lo que incluye, con tildes */
.esp-llevas-sec { padding-top: clamp(8px, 2vw, 20px); }
.esp-checks { list-style: none; margin: 28px auto 0; padding: 0; max-width: 1040px; display: grid; gap: 14px 40px; }
@media (min-width: 640px) { .esp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.esp-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; font-size: clamp(1rem, .96rem + .25vw, 1.125rem); line-height: 1.45; color: var(--muted); }
.esp-checks .icon { width: 24px; height: 24px; padding: 5.5px; margin-top: 1px; border-radius: 50%; background: var(--mint); color: var(--ink); }
.esp-checks b { font-weight: 700; color: var(--ink); }

/* Testimonios: una fila de videos y una fila de capturas */
.mf:is([data-page="espalda"], [data-page="movilidad"]) .proof { padding: clamp(48px, 6.5vw, 92px) 0; }
.mf:is([data-page="espalda"], [data-page="movilidad"]) .proof-block { margin-top: clamp(20px, 3vw, 36px); }
.mf:is([data-page="espalda"], [data-page="movilidad"]) .rail > .ribbon { display: none; }
.mf:is([data-page="espalda"], [data-page="movilidad"]) .reels { --card: clamp(190px, 56vw, 250px); gap: 16px; padding-block: 8px 14px; }
.mf:is([data-page="espalda"], [data-page="movilidad"]) .reel-frame { --r-frame: 22px; --bezel: 6px; }
.mf:is([data-page="espalda"], [data-page="movilidad"]) .reel-core .orb { width: 58px; height: 58px; }
.mf:is([data-page="espalda"], [data-page="movilidad"]) .reel figcaption { padding-top: 10px; }
.mf:is([data-page="espalda"], [data-page="movilidad"]) .reel figcaption strong { font-size: 1.0625rem; }
.mf:is([data-page="espalda"], [data-page="movilidad"]) .rail-nav { justify-content: center; margin-top: 10px; }
.mf:is([data-page="espalda"], [data-page="movilidad"]) .rail-nav .orb { width: 52px; height: 52px; }
.mf[data-page="espalda"] .shots-grid { columns: auto; display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.mf[data-page="espalda"] .shots-grid li { flex: none; margin: 0; scroll-snap-align: start; }
.mf[data-page="espalda"] .shots-grid .shot { --r-frame: 16px; --bezel: 5px; width: auto; }
.mf[data-page="espalda"] .shots-grid .shot img { height: clamp(220px, 24vw, 300px); width: auto; max-width: none; }
/* Títulos al medio (las 3 etapas, testimonios y preguntas) */
.esp-mid > .h2, .esp-mid > .sub { text-align: center; margin-inline: auto; }
/* En PC la fila de videos entra justa en el contenedor (3 o 4 tarjetas), con el mismo aire a los dos lados y las flechas al medio */
@media (min-width: 768px) {
  .mf:is([data-page="espalda"], [data-page="movilidad"]) .reels { --n: 3; width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-inline: 6px; scroll-padding-inline: 6px; grid-auto-columns: calc((100% - (var(--n) - 1) * 16px) / var(--n)); }
  .mf:is([data-page="espalda"], [data-page="movilidad"]) .rail.overflows .reels { -webkit-mask: none; mask: none; }
}
@media (min-width: 1000px) { .mf:is([data-page="espalda"], [data-page="movilidad"]) .reels { --n: 4; } }

/* Quién te guía: datos en dos columnas separados por una línea, sin tarjetas */
.esp-stats { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.esp-stats li { padding-top: 16px; border-top: 1px solid var(--line); }
.esp-stats strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
.esp-stats span { display: block; margin-top: 4px; font-size: 1rem; line-height: 1.4; color: var(--muted); }
.esp-julien .esp-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Una guía para toda la vida: dos datos separados por una línea. No son pastillas: con relleno menta se leían
   como el botón de compra y distraían. */
.esp-pair { margin: clamp(24px, 3vw, 36px) auto 0; max-width: 520px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esp-pair > div { padding: 2px clamp(10px, 3vw, 32px); }
.esp-pair > div + div { border-left: 1px solid rgb(0 107 80 / .22); }
.esp-pair dt { font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--mint-ink); }
.esp-pair dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.375rem, 1.2rem + .9vw, 2rem); letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }

/* Precio: tarjeta carbón con lo que incluye a la izquierda y la compra a la derecha */
.esp-offer { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3.6vw, 52px); align-items: center; overflow: hidden; border-radius: 28px; padding: clamp(24px, 4.4vw, 56px); color: #fff;
  background: radial-gradient(70% 90% at 100% 0%, rgb(0 255 178 / .14), transparent 60%), linear-gradient(160deg, var(--charcoal), #1e1e1e);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 26px 52px -30px hsl(var(--shade) / .6); }
@media (min-width: 820px) { .esp-offer { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.esp-offer .h2 { color: #fff; }
.esp-offer .h2 strong { display: inline; color: var(--mint); }
.esp-offer .esp-checks { margin: 22px 0 0; max-width: none; grid-template-columns: minmax(0, 1fr); gap: 13px; }
.esp-offer .esp-checks li { color: rgb(255 255 255 / .8); }
.esp-offer .esp-checks b { color: #fff; }
.esp-offer-buy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: clamp(22px, 3vw, 36px); border-radius: 22px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.esp-offer .esp-tag { background: rgb(0 255 178 / .12); box-shadow: inset 0 0 0 1px rgb(0 255 178 / .28); color: var(--mint); }
.esp-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 14px; margin-top: 16px; font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.esp-price s { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem); color: rgb(255 255 255 / .6); text-decoration-thickness: .09em; text-decoration-color: #ff6b5e; }
.esp-price b { font-weight: 800; font-size: clamp(3rem, 2.3rem + 3.4vw, 4.5rem); color: var(--mint); }
/* En la tarjeta de precio el valor anterior va arriba y el número abajo: así no se parte a ningún ancho */
.esp-offer .esp-price { flex-direction: column; align-items: center; gap: 6px; }
.esp-offer .esp-price b { font-size: clamp(3.25rem, 2.5rem + 3.6vw, 5rem); }
.esp-nota { margin-top: 10px; font-size: 1.0625rem; color: rgb(255 255 255 / .84); }
.esp-offer-buy .cupos { margin-top: 12px; }
.esp-offer-buy .esp-btn { margin-top: 22px; }
@media (max-width: 480px) { .esp-offer-buy { padding-inline: 14px; } .esp-offer-buy .esp-btn { width: 100%; padding-inline: 10px; } }

/* Preguntas frecuentes: acordeón */
.esp-faq { margin: clamp(20px, 3vw, 36px) auto 0; max-width: 860px; border-top: 1px solid var(--line); }
.esp-faq details { border-bottom: 1px solid var(--line); }
.esp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 16px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.esp-faq summary::-webkit-details-marker { display: none; }
.esp-faq summary .icon { width: 18px; height: 18px; color: var(--mint-ink); transform: rotate(90deg); transition: transform .25s var(--ease-out); }
.esp-faq details[open] summary .icon { transform: rotate(-90deg); }
.esp-faq details p { padding: 0 2px 22px; max-width: 64ch; color: var(--muted); }
.esp-final { margin: clamp(28px, 3.6vw, 44px) auto 0; max-width: 860px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding: clamp(20px, 2.8vw, 30px) clamp(20px, 3vw, 34px); border-radius: 22px; background: var(--wash); box-shadow: inset 0 0 0 1px rgb(0 107 80 / .12); }
.esp-final p { color: var(--text); }
.esp-final b { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.esp-faq-sec { padding-bottom: clamp(56px, 7.5vw, 110px); }

/* ---------- Página de pago (/espalda-pago): resumen + checkout de Whop embebido ---------- */
.esp-pago { padding: clamp(16px, 2.4vw, 28px) 0 clamp(40px, 6vw, 72px); }
.esp-pago-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 2.6vw, 30px); }
.esp-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: .9375rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.esp-back .icon { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) { .esp-back:hover { color: var(--ink); } }
.esp-pago-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "pay" "more"; gap: clamp(18px, 2.6vw, 28px) clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .esp-pago-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-areas: "head pay" "more pay"; grid-template-rows: auto 1fr; } }
.esp-pago-head { grid-area: head; }
.esp-pago-pay { grid-area: pay; }
.esp-pago-more { grid-area: more; }
.mf[data-page="espalda-pago"] .h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.esp-pago-head .esp-price { justify-content: flex-start; }
.esp-pago-head .esp-price s { color: var(--muted); }
.esp-pago-head .esp-price b { font-size: clamp(2.2rem, 1.8rem + 2vw, 3rem); color: var(--ink); }
.esp-pago-head .esp-nota { color: var(--muted); }
.esp-pago-more .esp-checks { margin: 0; max-width: none; grid-template-columns: minmax(0, 1fr); }
.esp-pago-more .esp-stats { margin-top: 20px; }
.esp-pago-frame { position: relative; min-height: 480px; padding: clamp(6px, 1vw, 10px); border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 24px 48px -30px hsl(var(--shade) / .5); }
.esp-pago-frame iframe { display: block; border-radius: 12px; }
.esp-pago-skel { position: absolute; inset: clamp(18px, 2.4vw, 26px); display: grid; align-content: start; gap: 14px; pointer-events: none; }
.esp-pago-skel i { display: block; height: 46px; border-radius: 10px; background: linear-gradient(90deg, #eef4f3, #f7fbfa, #eef4f3); background-size: 200% 100%; }
.esp-pago-skel i:first-child { height: 22px; width: 46%; }
@media (prefers-reduced-motion: no-preference) { .esp-pago-skel i { animation: shimmer 1.6s linear infinite; } }
.esp-pago-frame[data-state="ready"] .esp-pago-skel { display: none; }
.esp-pago-alt { margin-top: 10px; font-size: .875rem; text-align: center; color: var(--muted); }
.esp-pago-alt a { color: var(--ink); font-weight: 700; }
/* En esta página el WhatsApp va siempre abajo a la derecha, con su etiqueta: arriba taparía "Volver al programa" */
.mf[data-page="espalda-pago"] .whatsapp-float { top: auto; bottom: 20px; }
.mf[data-page="espalda-pago"] .whatsapp-float-t { display: block; }
.mf[data-page="espalda-pago"] .foot { padding-bottom: 96px; }

/* ================= Clase de movilidad en vivo (/movilidad): registro a la clase gratuita ================= */
/* Usa la escala y las piezas del downsell (esp-*); acá va solo lo propio: la franja de público, la fecha, el
   formulario, la lista de síntomas y la cadena "te duele acá / compensa allá" que se elige tocando una zona. */
.mov-strip { margin: 0; padding: 11px var(--gutter); background: var(--ink); color: #fff; text-align: center; font-size: clamp(.875rem, .82rem + .25vw, 1rem); font-weight: 600; line-height: 1.4; text-wrap: balance; }
.mov-hero { position: relative; overflow: clip; padding: clamp(28px, 4.4vw, 64px) 0 clamp(20px, 3vw, 40px); }
.mov-hero .ribbon { top: 62%; --rh: clamp(210px, 26vw, 360px); }
/* Alto en la proporción del viewBox (560/1440): más bajo, el recorte del slice cortaba el brillo en línea recta detrás de la cabeza */
@media (min-width: 880px) { .mov-hero .ribbon { top: 6%; --rh: 38.9vw; -webkit-mask: linear-gradient(90deg, transparent 42%, #000 68%); mask: linear-gradient(90deg, transparent 42%, #000 68%); } }
.mov-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
@media (min-width: 880px) { .mov-hero-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.mov-hero .lead { margin-top: 14px; max-width: 40ch; }
.mov-hero-pic { width: min(100%, 560px); }
@media (max-width: 879px) { .mov-hero-pic { order: -1; width: min(64%, 280px); } .mov-strip { padding-block: 9px; font-size: .8125rem; } }

/* La fecha va arriba del título y a tamaño de lectura: es lo primero que alguien busca en un evento */
.mov-when { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.mov-when li { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
.mov-when .icon { width: 1.15em; height: 1.15em; color: var(--mint-ink); }

/* Formulario: tres campos y el botón de la marca a todo el ancho */
.mov-form { margin-top: clamp(22px, 2.6vw, 30px); max-width: 480px; display: grid; gap: 14px; }
.mov-fields { display: grid; gap: 10px; }
@media (min-width: 560px) { .mov-form { max-width: 540px; } .mov-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mov-field { display: grid; gap: 6px; font-size: .9375rem; font-weight: 700; color: var(--ink); }
.mov-field small { font-weight: 500; color: var(--muted); font-size: inherit; }
.mov-field input { width: 100%; min-height: 54px; padding: 0 16px; border: 1.5px solid rgb(0 0 0 / .16); border-radius: var(--r-ctl); background: #fff; color: var(--ink);
  font: 500 1.0625rem/1.2 var(--font-text); transition: border-color .2s, box-shadow .2s; }
.mov-field input::placeholder { color: #6b6b6b; }
.mov-field input:focus { outline: none; border-color: var(--mint-ink); box-shadow: 0 0 0 4px rgb(0 255 178 / .4); }
.mov-field input[aria-invalid="true"] { border-color: #c62828; }
/* El brillo del botón se desborda unos 20px: más aire arriba y los campos por encima, así no tapa el WhatsApp */
.mov-form .mov-submit { width: 100%; margin-top: 16px; }
.mov-field input { position: relative; z-index: 1; }
.mov-form .mov-submit[disabled] { cursor: progress; opacity: .7; animation: none; }
.mov-err { color: #b3261e; font-weight: 600; font-size: .9375rem; }
.mov-legal { font-size: .875rem; color: var(--muted); }
.mov-done { padding: 18px 20px; border-radius: 16px; background: var(--wash); box-shadow: inset 0 0 0 1px rgb(0 107 80 / .16); outline: none; }
.mov-done-t { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); }
.mov-done-t .icon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--mint); color: var(--ink); }
.mov-done p + p { margin-top: 6px; color: var(--text); }
.mov-form.is-done > :not(.mov-done) { display: none; }

/* Si te pasa esto: título a la izquierda y las escenas a la derecha, en la voz de la audiencia */
.mov-pasa { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 64px); align-items: start; }
@media (min-width: 880px) { .mov-pasa { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.mov-pains { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2vw, 26px); }
.mov-pains li { position: relative; padding-left: 34px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem); letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.mov-pains li::before { content: ""; position: absolute; left: 0; top: .55em; width: 18px; height: 4px; border-radius: 2px; background: var(--mint); box-shadow: 0 0 0 1px rgb(0 107 80 / .2); }

/* La cadena: tocar una zona muestra qué la está compensando (las frases son de Julien) */
.mov-chain { padding: clamp(22px, 3vw, 34px); border-radius: var(--r-frame); background: #fff; }
.mov-chain-q { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); color: var(--ink); }
.mov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mov-chips button { min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--wash); box-shadow: inset 0 0 0 1px rgb(0 107 80 / .2); color: var(--ink); font-weight: 700; font-size: 1rem;
  transition: background-color .2s, box-shadow .2s, transform .15s var(--ease-out); }
.mov-chips button[aria-checked="true"] { background: var(--mint); box-shadow: inset 0 0 0 1px rgb(0 107 80 / .35); }
.mov-chips button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .mov-chips button:not([aria-checked="true"]):hover { box-shadow: inset 0 0 0 1.5px var(--mint-ink); } }
.mov-link { position: relative; margin-top: 24px; display: grid; gap: 18px; padding-left: 30px; }
.mov-node { position: relative; }
.mov-node::before { content: ""; position: absolute; left: -30px; top: .3em; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #c9d3d1; }
.mov-node:first-child::after { content: ""; position: absolute; left: -21.5px; top: calc(.3em + 19px); height: calc(1.2em - 1px); width: 3px; border-radius: 2px; background: rgb(0 107 80 / .35); }
.mov-node.is-cause::before { background: var(--mint); box-shadow: inset 0 0 0 3px var(--mint-ink); }
.mov-node { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.12rem + .6vw, 1.625rem); letter-spacing: -.015em; line-height: 1.2; color: var(--ink); }
.mov-node strong { font-weight: 800; }
.mov-why { margin-left: -30px; color: var(--text); }
.mov-chain-note { margin-top: 20px; font-size: .9375rem; font-weight: 600; color: var(--mint-ink); }
@media (prefers-reduced-motion: no-preference) {
  .mov-link.is-swap strong, .mov-link.is-swap .mov-why { animation: mov-in .45s var(--ease-quint); }
}
@keyframes mov-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

/* Qué vas a hacer: las 3 partes de la clase (son una secuencia) y, debajo, los dos extras */
.mov-extras { margin: clamp(30px, 4vw, 48px) auto 0; max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 820px) { .mov-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mov-extra { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: clamp(18px, 2.4vw, 24px); border-radius: 20px; background: var(--wash); }
.mov-extra .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--mint); color: var(--ink); }
.mov-extra b { color: var(--ink); }
.mov-steps + .mov-extras + .esp-act { margin-top: clamp(28px, 3.6vw, 40px); }
.mf .mov-submit { text-transform: uppercase; }
.esp-tint .esp-final { background: #fff; }

/* Testimonios en captura: cerrados detrás de "Ver más testimonios"; al abrir salen todas en grilla */
.mov-shots-closed { display: none; }
.mov-more-wrap { display: flex; justify-content: center; margin-top: clamp(20px, 2.6vw, 30px); }
.mov-more { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--mint-ink);
  color: var(--ink); font-weight: 700; font-size: 1rem; transition: background-color .2s, transform .15s var(--ease-out); }
.mov-more .icon { width: 14px; height: 14px; color: var(--mint-ink); transform: rotate(90deg); }
.mov-more:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .mov-more:hover { background: var(--wash); } }
/* Las 3 partes de la clase, centradas: el número sobre el medio de su título y la línea de centro a centro */
@media (min-width: 820px) {
  .mov-steps li { justify-items: center; text-align: center; }
  .mov-steps li:not(:last-child)::before { left: calc(50% + 32px); right: calc(-50% - 8px); }
  .mov-steps p { max-width: 34ch; }
}
/* Fotos en alta (oct-2026): el hero es ancho (brazos), así que va por ancho y deja que el disco recorte abajo */
.mov-hero-pic img { width: 110%; height: auto; translate: -41% 0; }
.esp-julien .mov-guia-pic { width: min(92%, 470px); }
@media (min-width: 880px) { .mov-hero-pic { margin-right: 0; } }

/* ================= Política de privacidad (/privacidad) ================= */
.legal { padding: clamp(28px, 5vw, 64px) 0 clamp(48px, 7vw, 96px); }
.legal-in { max-width: 760px; }
.legal-back { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; font-size: .9375rem; color: var(--mint-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal .h2 { margin-top: 10px; }
.legal-date { margin-top: 10px; color: var(--muted); font-size: .9375rem; }
.legal h2:not(.h2) { margin-top: clamp(30px, 4vw, 42px); font-size: clamp(1.1875rem, 1.1rem + .45vw, 1.4375rem); font-weight: 800; letter-spacing: -.012em; line-height: 1.25; }
.legal p, .legal ul { margin-top: 12px; max-width: 68ch; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal b { color: var(--ink); }
.legal a:not(.legal-back) { color: var(--mint-ink); text-underline-offset: 3px; }
/* Debajo del botón de inscripción: el aviso con el link a la política */
.mov-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mov-legal a:hover { color: var(--ink); } }

/* Escala de textos de /movilidad calibrada contra vuelveatus30.com (23-oct): título del hero 38-40/28 px,
   títulos de sección 38/28, cuerpo 20/16, botón 24/18, síntomas 18/16. /espalda conserva la suya. */
.mf[data-page="movilidad"] .h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.05; }
.mf[data-page="movilidad"] .h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); line-height: 1.08; }
.mf[data-page="movilidad"] .lead { font-size: clamp(1rem, .9rem + .45vw, 1.25rem); }
.mf[data-page="movilidad"] .sub { font-size: clamp(1rem, .9rem + .45vw, 1.25rem); }
.mf[data-page="movilidad"] .esp-btn { font-size: clamp(1.125rem, .95rem + .6vw, 1.5rem); min-height: clamp(60px, 3.6rem + 1vw, 72px); }
.mf[data-page="movilidad"] .mov-pains li { font-size: clamp(1rem, .95rem + .25vw, 1.125rem); }
.mf[data-page="movilidad"] .mov-pains li::before { top: .6em; }
.mf[data-page="movilidad"] .esp-steps h3 { font-size: clamp(1.25rem, 1rem + .7vw, 1.625rem); }
.mf[data-page="movilidad"] .mov-when li { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }

.foot-fb { flex-basis: 100%; order: 3; max-width: 90ch; font-size: .8125rem; }

/* Hero de /movilidad armado como el de vuelveatus30.com (23-oct): sección oscura a sangre con la foto de Julien en el gimnasio
   ocupando el lado derecho, fundida en el fondo con una máscara del lado del texto (no hay borde de imagen), y la columna de
   texto en blanco a la izquierda. En celular la foto va arriba y se funde hacia abajo en el fondo, con el texto debajo.
   El fondo es el negro verdoso de las sombras de la marca; las palabras clave van en menta, que sobre oscuro sí se lee. */
.mf[data-page="movilidad"] .mov-hero { --hero-bg: #0d1412; position: relative; isolation: isolate; overflow: clip; padding: 0; background: var(--hero-bg); color: #fff; }
.mov-hero .mov-hero-bg { position: relative; z-index: 0; height: clamp(300px, 92vw, 470px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 98%); mask-image: linear-gradient(180deg, #000 52%, transparent 98%); }
.mov-hero .mov-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 22%; }
.mov-hero .mov-hero-in { display: block; position: relative; z-index: 1; margin-top: clamp(-96px, -16vw, -56px); padding-bottom: clamp(36px, 6vw, 56px); }
.mov-hero .mov-hero-copy { max-width: 600px; }
.mov-hero .h1 { color: #fff; }
.mov-hero .mark { color: var(--mint); }
.mov-hero .mark::after { display: none; }
.mov-hero .mov-when li { color: #fff; }
.mov-hero .mov-when .icon { color: var(--mint); }
.mov-hero .lead { color: rgb(255 255 255 / .86); }
.mov-hero .mov-field { color: #fff; }
.mov-hero .mov-field input { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .26); color: #fff; }
.mov-hero .mov-field input::placeholder { color: rgb(255 255 255 / .62); }
.mov-hero .mov-field input:focus { border-color: var(--mint); box-shadow: 0 0 0 4px rgb(0 255 178 / .28); }
.mov-hero .mov-field input[aria-invalid="true"] { border-color: #ff8f84; }
.mov-hero .mov-err { color: #ff9e94; }
.mov-hero .mov-legal { color: rgb(255 255 255 / .68); }
.mov-hero .mov-legal a:hover { color: #fff; }
.mov-hero :focus-visible { outline-color: #fff; }
@media (min-width: 880px) {
  .mf[data-page="movilidad"] .mov-hero { min-height: clamp(620px, 88svh, 880px); display: flex; align-items: center; }
  .mov-hero .mov-hero-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 72%; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .55) 22%, #000 42%), linear-gradient(0deg, transparent 0%, #000 18%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .55) 22%, #000 42%), linear-gradient(0deg, transparent 0%, #000 18%); mask-composite: intersect; }
  .mov-hero .mov-hero-bg img { object-position: 6% 28%; }
  .mov-hero .mov-hero-in { margin-top: 0; width: min(100% - 2 * var(--gutter), var(--max)); padding-block: clamp(48px, 6vw, 88px); }
  .mov-hero .mov-hero-copy { max-width: 560px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .mov-hero .mov-hero-bg img { scale: 1.04; transition: scale 1.6s var(--ease-quint); }
  .js .ready .mov-hero .mov-hero-bg img { scale: 1; }
}

/* Copy del hero (23-oct): horarios por país junto a la fecha y una bajada en dos frases, como la referencia
   (la primera más grande, con "El Método Funcional" en menta; la segunda a tamaño de lectura) */
.mov-horas { font-weight: 600; color: rgb(255 255 255 / .82); white-space: normal; }
.mov-hero .mov-when li { align-items: flex-start; }
.mov-hero .mov-when .icon { margin-top: .12em; }
.mov-sub { margin-top: 18px; max-width: 34ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 1rem + .55vw, 1.5rem); line-height: 1.3; letter-spacing: -.01em; color: #fff; }
.mov-sub b { color: var(--mint); }
.mov-hero .mov-sub + .lead { margin-top: 10px; }
.mov-horas { display: inline-flex; flex-wrap: wrap; gap: 2px 12px; margin-left: 6px; }
.mov-horas > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.flag { width: 1.15em; height: .77em; border-radius: 2px; box-shadow: 0 0 0 1px rgb(255 255 255 / .25); flex: none; }

/* Plano medio de Julien (23-oct): un recorte por pantalla en <picture>, anclado arriba para no cortar la cabeza */
.mov-hero .mov-hero-bg picture { display: contents; }
.mov-hero .mov-hero-bg img { object-position: 50% 0; }
@media (min-width: 880px) { .mov-hero .mov-hero-bg img { object-position: 50% 0; } }
/* Título del hero más grande que la escala de la referencia, por pedido */
.mf[data-page="movilidad"] .mov-hero .h1 { font-size: clamp(2.375rem, 1.5rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -.028em; }
/* Título en una sola línea desde tablet: sale de la columna de texto y pasa por encima de la zona fundida de la foto */
@media (min-width: 880px) {
  .mf[data-page="movilidad"] .mov-hero .h1 { white-space: nowrap; max-width: none; font-size: clamp(2.75rem, 1.2rem + 3.6vw, 4rem); }
  .mov-hero .mov-hero-copy { max-width: 560px; }
}
/* Pie del hero: la foto se funde en el fondo oscuro, que sigue en la franja de números de abajo (sin corte) */
.mov-hero::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: clamp(110px, 16vw, 220px); pointer-events: none;
  background: linear-gradient(180deg, rgb(13 20 18 / 0) 0%, rgb(13 20 18 / .45) 40%, rgb(13 20 18 / .88) 78%, #0d1412 100%); }
.mov-hero .mov-hero-in { padding-bottom: clamp(40px, 7vw, 64px); }
@media (min-width: 880px) { .mov-hero .mov-hero-in { padding-block: clamp(48px, 6vw, 88px); } }
.mf[data-page="movilidad"] .esp-proof-sec { padding-top: 0; }

/* Franja de números de /movilidad en el mismo fondo oscuro del hero: es la continuación del degradado */
.mf[data-page="movilidad"] .esp-proof-sec { background: #0d1412; padding-bottom: clamp(36px, 5vw, 64px); }
.mf[data-page="movilidad"] .esp-proof { border-color: rgb(255 255 255 / .12); }
.mf[data-page="movilidad"] .esp-proof li { border-color: rgb(255 255 255 / .12); }
.mf[data-page="movilidad"] .esp-proof strong { color: #fff; }
.mf[data-page="movilidad"] .esp-proof span { color: rgb(255 255 255 / .72); }

/* ================= /movilidad en oscuro, armada como vuelveatus30.com (23-oct) =================
   Un solo fondo negro verdoso. Cada sección se funde en la siguiente con degradados verticales y luces difusas en
   menta y cian (las de la referencia son azul y rojo), nunca con un corte de color. Estructura de la referencia:
   los síntomas en una ventana con chips, las partes de la clase en zigzag con su etiqueta, la ola de la marca
   difuminada detrás como las estelas de luz, preguntas en acordeones con borde y un cierre centrado con chips.
   Botones como los de la referencia: el principal es una pastilla con degradado menta → cian, borde oscuro
   translúcido de 3 px y un halo grande y difuso; los secundarios, pastillas oscuras con borde de degradado y el
   mismo halo. Títulos centrados con la palabra clave en menta, al mismo peso. */
.mf[data-page="movilidad"] { --dk: #0d1412; --dk-2: #10201c; --dk-line: rgb(255 255 255 / .1); --dk-text: rgb(255 255 255 / .8); --dk-muted: rgb(255 255 255 / .62);
  --glow: 0 0 148px rgb(0 255 178 / .42), 0 0 43px rgb(0 255 178 / .16);
  background: var(--dk); color: var(--dk-text); }
.mf[data-page="movilidad"] > main { background: var(--dk); }
.mf[data-page="movilidad"] .mov-hero { --hero-bg: var(--dk); }
.mf[data-page="movilidad"] .mov-hero::after { background: linear-gradient(180deg, rgb(13 20 18 / 0) 0%, rgb(13 20 18 / .5) 45%, var(--dk) 100%); }
.mf[data-page="movilidad"] .mov-strip { background: #050807; border-bottom: 1px solid var(--dk-line); color: rgb(255 255 255 / .86); }
.mf[data-page="movilidad"] .esp-proof-sec { background: var(--dk); }

/* Tipografía en oscuro: títulos centrados, la palabra clave en menta al mismo peso */
.mf[data-page="movilidad"] h2, .mf[data-page="movilidad"] h3, .mf[data-page="movilidad"] .h2 { color: #fff; }
.mf[data-page="movilidad"] .h2 { font-weight: 800; letter-spacing: -.022em; }
.mf[data-page="movilidad"] .k { font-style: normal; color: var(--mint); }
.mf[data-page="movilidad"] .lead, .mf[data-page="movilidad"] .sub { color: var(--dk-text); }
.mf[data-page="movilidad"] b { color: #fff; }
.mf[data-page="movilidad"] .esp-mid > .h2, .mf[data-page="movilidad"] .esp-mid > .sub { text-align: center; margin-inline: auto; }
.mf[data-page="movilidad"] .esp-mid > .h2 { max-width: 20ch; }

/* Secciones fundidas entre sí: cada una arranca y termina en el fondo y se aclara o se tiñe en el medio */
.mf[data-page="movilidad"] .esp-sec { position: relative; isolation: isolate; overflow-x: clip; background: transparent; }
/* Las secciones con botón de halo terminan con aire suficiente para que el halo (148 px) no se corte en línea recta */
.mf[data-page="movilidad"] .mov-sec-clase, .mf[data-page="movilidad"] .esp-faq-sec { padding-bottom: clamp(120px, 12vw, 170px); }
.mf[data-page="movilidad"] .esp-sec::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.mov-sec-pasa::before { background: radial-gradient(60% 55% at 50% 50%, rgb(0 255 178 / .09), transparent 70%), linear-gradient(180deg, var(--dk), #0f1c19 50%, var(--dk)); }
.mf[data-page="movilidad"] section[aria-labelledby="t-causa"]::before { background: radial-gradient(45% 60% at 85% 50%, rgb(0 224 255 / .09), transparent 70%), linear-gradient(180deg, var(--dk), var(--dk-2) 35%, var(--dk-2) 65%, var(--dk)); }
.mov-sec-clase::before { background: linear-gradient(180deg, var(--dk), #0b1110 50%, var(--dk)); }
.mf[data-page="movilidad"] section[aria-labelledby="t-julien"]::before { background: radial-gradient(40% 60% at 22% 55%, rgb(0 255 178 / .12), transparent 70%), linear-gradient(180deg, var(--dk), var(--dk-2) 40%, var(--dk-2) 60%, var(--dk)); }
.mf[data-page="movilidad"] .esp-faq-sec::before { background: radial-gradient(55% 40% at 50% 100%, rgb(0 224 255 / .1), transparent 70%), linear-gradient(180deg, var(--dk), #0b1110); }
.mov-streak { position: absolute; z-index: -1; inset: 8% -10% 8% -10%; width: 120%; height: 84%; opacity: .32; filter: blur(46px); pointer-events: none; }

/* Botones secundarios: pastilla oscura con borde en degradado y el mismo halo, texto liviano y espaciado */
.mov-ghost { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 72px; padding: 0 clamp(36px, 4.4vw, 64px); border-radius: 999px;
  border: 2px solid transparent; background: linear-gradient(#0f1c19, #0f1c19) padding-box, linear-gradient(90deg, #00ffb2, #00e0ff) border-box; box-shadow: var(--glow);
  color: #fff; font-weight: 500; font-size: clamp(1.0625rem, 1rem + .35vw, 1.375rem); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; transition: transform .16s var(--ease-out), box-shadow .3s; }
.mov-ghost .icon { width: 22px; height: 22px; color: var(--mint); }
.mov-ghost:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .mov-ghost:hover { box-shadow: 0 0 148px rgb(0 255 178 / .6), 0 0 43px rgb(0 255 178 / .3); } }
.mf[data-page="movilidad"] .esp-act.c { margin-top: clamp(40px, 5vw, 64px); }

/* La causa: texto y la tarjeta interactiva en vidrio oscuro */
.mf[data-page="movilidad"] .mov-chain { background: rgb(13 22 20 / .8); box-shadow: inset 0 0 0 1px var(--dk-line), 0 40px 80px -40px rgb(0 0 0 / .8); }
.mf[data-page="movilidad"] .mov-chain-q, .mf[data-page="movilidad"] .mov-node { color: #fff; }
.mf[data-page="movilidad"] .mov-why { color: var(--dk-text); }
.mf[data-page="movilidad"] .mov-chain-note { color: var(--mint); }
.mf[data-page="movilidad"] .mov-chips button { background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); color: #fff; }
.mf[data-page="movilidad"] .mov-chips button[aria-checked="true"] { background: var(--mint); color: var(--ink); box-shadow: none; }
.mf[data-page="movilidad"] .mov-node::before { background: var(--dk); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .35); }
.mf[data-page="movilidad"] .mov-node.is-cause::before { background: var(--mint); box-shadow: inset 0 0 0 3px var(--mint); }
.mf[data-page="movilidad"] .mov-node:first-child::after { background: rgb(255 255 255 / .25); }

/* Las 3 partes: zigzag con la etiqueta de la referencia (CLASE 01 | fecha), sobre la ola difuminada */
.mov-parts { list-style: none; margin: clamp(32px, 4vw, 56px) auto 0; padding: 0; max-width: 1000px; display: grid; gap: clamp(28px, 4vw, 52px); text-align: left; }
.mov-parts li { max-width: 470px; }
@media (min-width: 820px) { .mov-parts li:nth-child(odd) { justify-self: end; } }
.mov-pill { display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mov-pill b { padding: 9px 16px; background: #1b2b27; color: #fff; }
.mov-pill span { padding: 9px 16px; background: var(--mint); color: var(--ink); letter-spacing: .04em; }
.mov-parts h3 { margin-top: 16px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem); line-height: 1.12; letter-spacing: -.018em; color: #fff; }
.mov-parts p { margin-top: 10px; color: var(--dk-text); }
.mf[data-page="movilidad"] .mov-extras { max-width: 1000px; margin: clamp(40px, 5vw, 64px) auto 0; }
.mf[data-page="movilidad"] .mov-extra { align-items: center; padding: clamp(18px, 2.4vw, 24px); border-radius: 18px; background: rgb(13 22 20 / .72); box-shadow: inset 0 0 0 1px var(--dk-line); color: var(--dk-text); }

/* Quién te guía */
.mf[data-page="movilidad"] .esp-stats li { border-color: var(--dk-line); }
.mf[data-page="movilidad"] .esp-stats strong { color: #fff; }
.mf[data-page="movilidad"] .esp-stats span { color: var(--dk-muted); }
.mf[data-page="movilidad"] .esp-disc::before { background: radial-gradient(circle at 50% 38%, rgb(0 255 178 / .32), rgb(0 224 255 / .1) 72%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }

/* Preguntas: acordeones con borde, como la referencia */
.mf[data-page="movilidad"] .esp-faq { border-top: 0; display: grid; gap: 12px; max-width: 860px; }
.mf[data-page="movilidad"] .esp-faq details { border: 0; border-radius: 14px; background: rgb(13 22 20 / .72); box-shadow: inset 0 0 0 1px var(--dk-line); padding-inline: clamp(16px, 2vw, 22px); }
.mf[data-page="movilidad"] .esp-faq details[open] { box-shadow: inset 0 0 0 1px rgb(0 255 178 / .4); }
.mf[data-page="movilidad"] .esp-faq summary { color: #fff; font-family: var(--font-text); font-weight: 600; }
.mf[data-page="movilidad"] .esp-faq summary .icon { color: var(--mint); }
.mf[data-page="movilidad"] .esp-faq details p { color: var(--dk-text); }

/* Cierre centrado: título, chips, frase y botón */
.mov-final { margin: clamp(64px, 8vw, 104px) auto 0; max-width: 760px; text-align: center; display: grid; justify-items: center; gap: 20px; }
.mov-final-t { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.75rem); line-height: 1.04; letter-spacing: -.026em; color: #fff; }
.mov-final-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mov-final-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px var(--dk-line); color: #fff; font-weight: 600; font-size: .9375rem; }
.mov-final-chips .icon { color: var(--mint); }
.mov-final-p { max-width: 46ch; color: var(--dk-text); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }
.mov-ghost.is-main { margin-top: 12px; }
@media (max-width: 480px) { .mov-ghost { width: 100%; padding-inline: 20px; letter-spacing: .03em; } }

/* Pie */
.mf[data-page="movilidad"] .foot { background: #050807; color: var(--dk-muted); border-top: 1px solid var(--dk-line); }
.mov-final .mov-cta { margin-top: 12px; }

/* "Si te pasa esto" como checklist que se marca (elegida entre tres versiones el 23-oct): el título a un lado,
   los síntomas como casillas al otro y un contador que confirma "esta clase es para ti" */
.sv-a { display: grid; }
.sv-a { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
@media (min-width: 880px) { .sv-a { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 6vw, 88px); } .sv-a-head { position: sticky; top: 32px; } }
.sv-a .h2 { text-align: left; }
.sv-a-head .lead { margin-top: 14px; }
.sv-a-list { display: grid; gap: 10px; }
.sv-a-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px; border-radius: 14px; cursor: pointer;
  background: rgb(13 22 20 / .72); box-shadow: inset 0 0 0 1px var(--dk-line); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, .95rem + .35vw, 1.25rem); line-height: 1.3;
  transition: background-color .2s, box-shadow .2s, transform .15s var(--ease-out); }
.sv-a-item input { position: absolute; opacity: 0; pointer-events: none; }
.sv-a-box { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .3); transition: background-color .2s, box-shadow .2s; }
.sv-a-box .icon { width: 16px; height: 16px; color: var(--ink); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s var(--ease-out); }
.sv-a-item:has(input:checked) { background: rgb(0 255 178 / .08); box-shadow: inset 0 0 0 1px rgb(0 255 178 / .45); }
.sv-a-item:has(input:checked) .sv-a-box { background: var(--mint); box-shadow: none; }
.sv-a-item:has(input:checked) .sv-a-box .icon { opacity: 1; transform: none; }
.sv-a-item:has(input:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.sv-a-item:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .sv-a-item:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28); } }
.sv-a-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 14px; }
.sv-a-count { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.0625rem, 1rem + .4vw, 1.375rem); color: #fff; }
.sv-a-count b { color: var(--mint); }
/* Checklist centrado: título y bajada arriba, las casillas debajo en una columna al medio */
.sv-a { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; gap: clamp(22px, 3vw, 34px); }
.sv-a-head { position: static; text-align: center; }
.sv-a .h2 { text-align: center; margin-inline: auto; }
.sv-a-list { width: min(100%, 720px); }
.sv-a-foot { flex-direction: column; justify-content: center; text-align: center; }

/* "Qué vas a hacer en la clase" como la versión original (1-2-3 en línea, centrado, extras con ícono), en oscuro */
.mf[data-page="movilidad"] .mov-steps p { color: var(--dk-text); }
.mf[data-page="movilidad"] .mov-extra { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.mf[data-page="movilidad"] .mov-extra .icon { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--mint); color: var(--ink); }
/* Línea divisoria entre secciones, como la de la referencia: 1 px a todo el ancho, con color en los extremos que se
   desvanece hacia el medio (transparente del 30 al 70%). En verde de la marca en vez del azul de vuelveatus30. */
.mf[data-page="movilidad"] { --div-line: linear-gradient(90deg, rgb(0 200 150 / .6) 0%, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 70%, rgb(0 200 150 / .6) 100%); }
.mf[data-page="movilidad"] .esp-sec::after, .mf[data-page="movilidad"] .esp-proof-sec::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 1px; background: var(--div-line); pointer-events: none; }
.mf[data-page="movilidad"] .esp-proof-sec { position: relative; }
.mf[data-page="movilidad"] .foot { position: relative; border-top: 0; }
.mf[data-page="movilidad"] .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--div-line); }

/* Doble botón del cierre, como el de la referencia: "Quiero seguir igual" apagado a la izquierda y la inscripción a la derecha */
.mov-duo { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 18px; margin-top: 12px; }
.mov-final .mov-duo .mov-cta { margin-top: 0; }
.mov-stay { min-height: 60px; padding: 0 clamp(24px, 3vw, 40px); border-radius: var(--r-ctl); background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--dk-line);
  color: rgb(255 255 255 / .38); font-weight: 600; font-size: clamp(.875rem, .84rem + .2vw, 1rem); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: color .2s, transform .16s var(--ease-out); }
.mov-stay:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .mov-stay:hover { color: rgb(255 255 255 / .55); } }
@media (max-width: 560px) { .mov-duo { flex-direction: column-reverse; } .mov-duo > * { width: 100%; } }
.mf .mov-stay { text-transform: uppercase; min-height: clamp(60px, 3.4rem + 1vw, 68px); }

/* Quién te guía (23-oct): la foto del podcast entera, en vertical y fundida abajo, y la bio en párrafos cortos */
.mov-bio { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 880px) { .mov-bio { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .mov-bio-pic { position: sticky; top: 32px; } }
.mov-bio-pic { overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 5; box-shadow: inset 0 0 0 1px var(--dk-line);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.mov-bio-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 879px) { .mov-bio-pic { aspect-ratio: 1; max-height: 440px; } .mov-bio-pic img { object-position: 50% 25%; } }
.mov-bio-copy > p { margin-top: 14px; max-width: 58ch; color: var(--dk-text); font-size: clamp(1rem, .96rem + .2vw, 1.0938rem); line-height: 1.6; }
.mov-bio-copy > .mov-bio-lead { margin-top: 20px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); color: #fff; }
.mov-bio-copy > .mov-bio-end { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); color: var(--mint); }
/* Menos aire entre la franja de números y la línea divisoria de abajo */
.mf[data-page="movilidad"] .esp-proof-sec { padding-bottom: clamp(14px, 2vw, 24px); }

/* ================= /movilidad-gracias: paso 2, igual a la de gracias de vuelveatus30.com (24-oct) =================
   Una tarjeta tipo ventana (los tres puntos arriba a la izquierda) sobre el fondo oscuro con estelas difusas de la
   marca: barra "Falta un solo paso 95%", el aviso, el pedido de confirmar en el grupo de WhatsApp, el botón dentro de
   un aro blanco, el regalo y la marca abajo. Medidas de la referencia: tarjeta 977 px, radio 40, relleno 64,
   título 36 px, aviso y regalo 20 px; la barra y el botón con el halo de la referencia, en menta en vez de cian y rojo. */
.tyo { position: relative; isolation: isolate; overflow: clip; display: grid; place-items: center; min-height: 100svh; padding: clamp(40px, 9vw, 128px) var(--gutter) clamp(64px, 10vw, 140px); background: var(--dk); }
.tyo-streak { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; opacity: .38; filter: blur(42px); pointer-events: none; }
.tyo::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none; background: radial-gradient(60% 80% at 50% 100%, rgb(0 224 255 / .08), transparent 70%); }
.tyo-card { position: relative; display: flex; flex-direction: column; align-items: center; width: min(100%, 977px); padding: clamp(56px, 6vw, 64px) clamp(18px, 5vw, 64px) clamp(36px, 4.4vw, 56px); border-radius: clamp(24px, 3vw, 40px); text-align: center;
  border: .8px solid rgb(255 255 255 / .06);
  background: radial-gradient(44.67% 59.18% at 50.97% 2.19%, rgb(28 74 61) 0%, rgb(13 40 33 / 0) 100%), radial-gradient(100% 406.99% at .51% 100%, #0c1614 0%, #11281f 100%);
  box-shadow: inset 0 -239px 192px #0a110f, inset 0 -33px 62px rgb(0 0 0 / .23); }
.tyo-dots { position: absolute; top: clamp(20px, 2.2vw, 26px); left: clamp(20px, 2.2vw, 24px); display: flex; gap: 6px; }
.tyo-dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.tyo-dots i:nth-child(2) { background: #febc2e; }
.tyo-dots i:nth-child(3) { background: #28c840; }

.tyo-prog { width: min(100%, 426px); height: 32px; padding: 0; border-radius: 150px; overflow: hidden; border: .8px solid var(--mint);
  background: #0c1614; box-shadow: 0 0 47px rgb(0 255 178 / .6), 0 0 12px rgb(187 255 236 / .5); }
.tyo-prog-bar { display: flex; align-items: center; justify-content: space-between; width: 95%; height: 100%; border-radius: 0 150px 150px 0; background: var(--mint); color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); white-space: nowrap; transform-origin: left; }
.tyo-prog-bar span:first-child { padding-left: 15px; }
.tyo-prog-bar span:last-child { padding-right: 15px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .js .tyo-prog-bar { transform: scaleX(0); transition: transform 1.1s var(--ease-out) .25s; }
  .js .ready .tyo-prog-bar { transform: none; }
}

.tyo-warn { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: clamp(40px, 5vw, 58px); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 400; letter-spacing: .04em; line-height: 1.6; color: rgb(205 236 226); }
.tyo-warn .icon { width: 1.15em; height: 1.15em; color: #f5b83d; }
.mf[data-page="movilidad"] .tyo-t { margin-top: clamp(36px, 5vw, 70px); max-width: 26ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.12; letter-spacing: -.015em; color: #eef8f4; text-wrap: balance; }
.tyo-ring { display: inline-flex; margin-top: clamp(36px, 5vw, 64px); padding: 6px; border-radius: 19px; border: 1.6px solid #fff; }
.mf[data-page="movilidad"] .tyo-btn { min-height: 64px; font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem); padding-inline: clamp(28px, 4vw, 64px); }
.tyo-btn[aria-disabled="true"] { cursor: default; }
.tyo-gift { max-width: 62ch; margin-top: clamp(40px, 5.4vw, 72px); font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 400; line-height: 1.6; letter-spacing: .02em; color: rgb(205 236 226); text-wrap: pretty; }
.tyo-gift .icon { width: 1.1em; height: 1.1em; margin-right: 8px; vertical-align: -.16em; color: var(--mint); }
.tyo-gift b { font-weight: 700; color: #fff; }
.tyo-brand { margin-top: clamp(28px, 3.4vw, 40px); font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); letter-spacing: .3em; text-transform: uppercase; color: #fff; }
@media (max-width: 599px) {
  .tyo-ring { display: flex; width: 100%; }
  .mf[data-page="movilidad"] .tyo-btn { width: 100%; padding-inline: 16px; }
  .tyo-brand { letter-spacing: .18em; }
}
.tyo-foot .container { justify-content: center; text-align: center; }
.tyo-foot .foot-fb { margin-inline: auto; }
.tyo-foot a { color: inherit; text-underline-offset: 3px; }
/* El vaivén del botón lo hace el aro entero, así el botón no se descentra dentro del aro */
.tyo-ring .esp-btn { animation: none; }
@media (prefers-reduced-motion: no-preference) { .tyo-ring { animation: esp-sway 3.4s ease-in-out infinite; } }
/* Íconos en línea con el texto, como los emojis de la referencia */
.tyo-warn { display: block; }
.tyo-warn .icon, .tyo-gift .icon { display: inline-block; vertical-align: -.17em; margin-right: 8px; }
.tyo-foot .container { flex-direction: column; align-items: center; gap: 14px; }
.tyo-foot .foot-fb { order: 0; }

/* ================= Feedback del 24-oct ================= */
/* La clase se llama "Vive sin dolor": el título va en mayúsculas, como una marca (igual que "VUELVE A TUS 30") */
.mf[data-page="movilidad"] .mov-caps { text-transform: uppercase; letter-spacing: -.01em; }
.mf[data-page="movilidad"] .mov-hero .h1.mov-caps { font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1; }


/* Cinta de números que se desliza sola (como la franja de prensa de vuelveatus30.com) */
.mf[data-page="movilidad"] .mov-cinta-sec { padding-block: clamp(18px, 2.6vw, 30px); }
.mov-cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mov-cinta-track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; }
.mov-cinta-track li { display: flex; align-items: baseline; gap: 12px; padding-inline: clamp(24px, 3vw, 44px); white-space: nowrap; }
.mov-cinta-track li::before { content: ""; align-self: center; width: 7px; height: 7px; margin-right: clamp(24px, 3vw, 44px); border-radius: 50%; background: var(--mint); }
.mov-cinta-track strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); letter-spacing: -.02em; color: #fff; }
.mov-cinta-track span { font-size: clamp(.9375rem, .9rem + .3vw, 1.125rem); color: rgb(255 255 255 / .74); }
@media (prefers-reduced-motion: no-preference) {
  .mov-cinta-track { animation: mov-cinta 32s linear infinite; }
  .mov-cinta:hover .mov-cinta-track { animation-play-state: paused; }
}
@keyframes mov-cinta { to { transform: translateX(-50%); } }
/* Sin movimiento: los cuatro datos quietos, en filas */
@media (prefers-reduced-motion: reduce) {
  .mov-cinta { -webkit-mask-image: none; mask-image: none; }
  .mov-cinta-track { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .mov-cinta-track li[aria-hidden] { display: none; }
}
/* Gracias: la barra "Falta un solo paso" titila (sin moverse) para llamar la atención; sin los tres puntos de ventana */
.tyo-card { padding-top: clamp(40px, 5vw, 56px); }
@media (prefers-reduced-motion: no-preference) {
  .tyo-prog { animation: tyo-titila 1.6s ease-in-out 1.4s infinite; }
}
@keyframes tyo-titila { 0%, 100% { opacity: 1; box-shadow: 0 0 47px rgb(0 255 178 / .6), 0 0 12px rgb(187 255 236 / .5); } 50% { opacity: .55; box-shadow: 0 0 14px rgb(0 255 178 / .25), 0 0 4px rgb(187 255 236 / .2); } }
.tyo-gift i { font-style: normal; font-weight: 700; color: var(--mint); }
/* Cuatro partes de la clase (se sumó la beca): 4 columnas en escritorio, 2 × 2 en tablet, con la línea solo dentro de cada fila */
@media (min-width: 820px) {
  .mf[data-page="movilidad"] .mov-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(32px, 4vw, 48px); }
  .mf[data-page="movilidad"] .mov-steps li:nth-child(2n)::before { display: none; }
}
@media (min-width: 1100px) {
  .mf[data-page="movilidad"] .mov-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; }
  .mf[data-page="movilidad"] .mov-steps li:nth-child(2n):not(:last-child)::before { display: block; }
  .mf[data-page="movilidad"] .mov-steps p { max-width: 30ch; }
}
/* Fecha y horarios dentro de un recuadro igual al de los campos (borde, fondo y radio), con el mismo texto y orden de antes */
.mov-hero .mov-when-box { width: fit-content; max-width: 100%; padding: 14px 18px; border: 1.5px solid rgb(255 255 255 / .26); border-radius: var(--r-ctl); background: rgb(255 255 255 / .07); }
@media (min-width: 880px) { .mov-hero .mov-when-box { width: max-content; max-width: none; } }
.mov-hero .mov-when-box { flex-direction: column; align-items: flex-start; gap: 8px; }
/* La bajada "El Método Funcional para…" en dos líneas en escritorio (sale de la columna como el título) */
@media (min-width: 880px) { .mov-hero .mov-sub { max-width: none; width: max-content; max-width: 41ch; } }
/* Botón debajo de "Quién te guía", con aire abajo para que el halo no se corte */
.mov-bio-act { margin-top: clamp(36px, 5vw, 56px); }
.mf[data-page="movilidad"] section[aria-labelledby="t-julien"] { padding-bottom: clamp(120px, 12vw, 170px); }
/* Horarios por país dentro de la pregunta "¿Cuándo es y cuánto dura?" */
.mov-faq-horas { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600; color: #fff; }
.mov-faq-horas > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.esp-faq details p:has(+ p) { padding-bottom: 12px; }
/* Celular: el botón "Confirmar inscripción" tiene que verse apenas entran (feedback 24-oct).
   Foto más baja, título en una línea, campos sin etiqueta visible (la etiqueta queda para lectores de pantalla,
   el texto guía es el placeholder, como en vuelveatus30.com) y la bajada pasa debajo del botón. */
@media (max-width: 879px) {
  .mov-hero .mov-hero-bg { height: clamp(210px, 56vw, 300px); }
  .mov-hero .mov-hero-in { margin-top: clamp(-64px, -12vw, -40px); }
  .mf[data-page="movilidad"] .mov-hero .h1.mov-caps { font-size: clamp(2.125rem, 10.4vw, 3rem); white-space: nowrap; }
  .mov-hero .mov-hero-copy { display: flex; flex-direction: column; }
  .mov-hero .mov-when-box { margin-top: 12px; padding: 10px 14px; }
  .mov-hero .mov-form { order: 1; margin-top: 16px; }
  .mov-hero .mov-sub { order: 2; margin-top: 22px; }
  .mov-hero .mov-sub + .lead { order: 3; }
  .mov-hero .mov-field > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mov-hero .mov-fields { gap: 10px; }
  .mf[data-page="movilidad"] .mov-strip { padding-block: 7px; font-size: .75rem; }
}

/* ================= /preparacion: la página del grupo de WhatsApp antes de la clase (24-oct) =================
   Mismo mundo oscuro de /movilidad. Arriba la cuenta regresiva fija; después el video de Julien, la guía en
   carrusel, las 3 etapas, los testimonios y el cierre. Copia del Notion "Página de preparación". */
.prep-timer { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; padding: 10px var(--gutter);
  background: #050807; border-bottom: 1px solid var(--dk-line); color: rgb(255 255 255 / .86); font-family: var(--font-display); font-weight: 700; font-size: .9375rem; }
.prep-timer-n { display: inline-flex; gap: 6px; }
.prep-timer-n > span { display: inline-flex; align-items: baseline; gap: 2px; min-width: 46px; justify-content: center; padding: 4px 8px; border-radius: 8px; background: rgb(0 255 178 / .1); box-shadow: inset 0 0 0 1px rgb(0 255 178 / .35); }
.prep-timer-n b { font-size: 1.125rem; color: var(--mint); font-variant-numeric: tabular-nums; }
.prep-timer-n i { font-style: normal; font-size: .75rem; color: rgb(255 255 255 / .7); }

.prep-hero { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(36px, 6vw, 72px) 0 clamp(64px, 8vw, 104px); text-align: center;
  background: radial-gradient(55% 40% at 50% 0%, rgb(0 255 178 / .1), transparent 70%), var(--dk); }
.prep-hero-in { display: flex; flex-direction: column; align-items: center; }
.mf[data-page="movilidad"] .prep-t { max-width: 20ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.06; letter-spacing: -.022em; color: #fff; text-wrap: balance; }
.prep-t .k { display: block; margin-top: 4px; }
.prep-when { display: grid; justify-items: center; gap: 8px; margin-top: 20px; padding: 12px 18px; border: 1.5px solid rgb(255 255 255 / .26); border-radius: var(--r-ctl); background: rgb(255 255 255 / .07); }
.prep-when > p:first-child { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; color: #fff; }
.prep-when .icon { width: 1.1em; height: 1.1em; color: var(--mint); }
.prep-when .mov-faq-horas { justify-content: center; }
.prep-hero .lead { margin-top: 22px; color: #fff; font-weight: 600; }
.prep-hero .video-frame { margin-inline: auto; margin-top: 16px; background: linear-gradient(165deg, rgb(255 255 255 / .1), rgb(255 255 255 / .03)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 40px 90px rgb(0 0 0 / .5); }
.prep-hero .video-frame::before { opacity: .45; }
.prep-hero .video-frame::after { display: none; }
.prep-hero .poster img { filter: brightness(.62); }
.prep-live { margin-top: clamp(28px, 3.6vw, 40px); padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 32px); border-radius: 20px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--dk-line); text-align: left; }
.prep-live-t { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); color: #fff; }
.prep-checks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.prep-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.45; color: #fff; }
.prep-checks .icon { width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--mint); color: var(--ink); }

/* Guía en carrusel: en escritorio entran las tres; en celular se desliza una por vez */
.prep-guia::before { background: radial-gradient(50% 50% at 50% 50%, rgb(0 255 178 / .07), transparent 70%), linear-gradient(180deg, var(--dk), var(--dk-2) 50%, var(--dk)); }
.prep-car { margin-top: clamp(28px, 3.6vw, 44px); }
.prep-cards { list-style: none; margin: 0; padding: 4px 2px 8px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.prep-cards::-webkit-scrollbar { display: none; }
.prep-card { position: relative; scroll-snap-align: start; display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.6vw, 30px); border-radius: 22px; text-align: left;
  background: rgb(13 22 20 / .8); box-shadow: inset 0 0 0 1px var(--dk-line); }
.prep-card-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mint); color: var(--ink); font-family: var(--font-display); font-weight: 800; }
.prep-card h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); letter-spacing: -.015em; color: #fff; }
.prep-card p { font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.55; color: var(--dk-text); }
.prep-card .prep-checks { margin-top: 2px; }
.prep-card .prep-checks li { font-size: 1rem; color: var(--dk-text); }
.prep-horas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prep-horas li { display: flex; align-items: center; gap: 10px; font-size: 1rem; color: var(--dk-text); }
.prep-horas b { color: #fff; }
.prep-car-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; }
.prep-car.is-static .prep-car-nav { display: none; }
.prep-car-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px var(--dk-line); color: #fff; transition: transform .15s var(--ease-out); }
.prep-car-btn .icon { width: 18px; height: 18px; }
.prep-car-btn:active { transform: scale(.94); }
.prep-dots { display: flex; gap: 8px; }
.prep-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / .25); transition: background-color .2s, transform .2s var(--ease-out); }
.prep-dots i.is-on { background: var(--mint); transform: scale(1.25); }
@media (max-width: 819px) { .prep-cards { grid-auto-columns: 86%; } }

/* Las 3 etapas: el mismo 1-2-3 de "Qué vas a hacer en la clase", solo con los títulos */
.prep-etapas::before { background: linear-gradient(180deg, var(--dk), #0b1110 50%, var(--dk)); }
@media (min-width: 820px) { .mf[data-page="movilidad"] .prep-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mf[data-page="movilidad"] .prep-steps li:nth-child(2n)::before { display: block; } .mf[data-page="movilidad"] .prep-steps li:last-child::before { display: none; } }
.prep-etapas-p { max-width: 52ch; margin: clamp(28px, 3.6vw, 40px) auto 0; text-align: center; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--dk-text); }
.prep-etapas-p b { color: var(--mint); }

/* Testimonios en oscuro */
.mf[data-page="movilidad"] .prep-proof { position: relative; background: var(--dk); padding-block: clamp(64px, 8vw, 110px); }
.mf[data-page="movilidad"] .prep-proof::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--div-line); }
.prep-proof .proof-head { text-align: center; }
.prep-proof .proof-head .h2 { margin-inline: auto; max-width: 22ch; }
.prep-proof figcaption strong { color: #fff; }
.prep-proof figcaption span { color: var(--dk-muted); }
.prep-proof .mov-more { background: rgb(255 255 255 / .06); color: #fff; box-shadow: inset 0 0 0 1.5px var(--mint); }
.prep-proof .mov-more .icon { color: var(--mint); }
@media (hover: hover) and (pointer: fine) { .prep-proof .mov-more:hover { background: rgb(0 255 178 / .1); } }

.prep-cierre { padding-bottom: clamp(80px, 9vw, 120px); }
.prep-cierre::before { background: radial-gradient(55% 40% at 50% 100%, rgb(0 224 255 / .1), transparent 70%), linear-gradient(180deg, var(--dk), #0b1110); }
.prep-cierre .sub { max-width: 52ch; margin-inline: auto; text-align: center; }
.prep-cierre .sub + .sub { margin-top: 12px; color: #fff; font-weight: 700; }
/* Preparación: subtítulo de testimonios centrado, marcos de los videos en oscuro y la cuenta regresiva en una línea en celular */
.prep-proof .proof-head .sub { margin-inline: auto; text-align: center; }
.prep-proof .reel-frame { background: linear-gradient(165deg, rgb(255 255 255 / .1), rgb(255 255 255 / .03)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 24px 60px rgb(0 0 0 / .45); }
.prep-proof .reel-frame::after { display: none; }
.prep-proof .rail-nav .orb { background: rgb(255 255 255 / .06); color: #fff; box-shadow: inset 0 0 0 1px var(--dk-line); }
@media (max-width: 479px) { .prep-timer > .prep-timer-t:last-child { display: none; } .prep-timer-n > span { min-width: 40px; padding: 3px 6px; } }
/* Preparación: el pedido de entrar al grupo, con texto y botón */
.prep-wa { display: grid; justify-items: center; gap: 18px; margin-top: clamp(24px, 3vw, 32px); }
.prep-wa p { max-width: 46ch; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.55; color: var(--dk-text); }
.prep-wa p a { color: var(--mint); font-weight: 700; text-underline-offset: 3px; }
.mf[data-page="movilidad"] .prep-wa-btn { font-size: clamp(1rem, .95rem + .4vw, 1.25rem); min-height: 60px; }
.prep-hero { padding-bottom: clamp(96px, 10vw, 140px); }
@media (max-width: 599px) { .mf[data-page="movilidad"] .prep-wa-btn { width: 100%; padding-inline: 16px; } }
/* Preparación sin video (Notion del 24-oct): el texto del grupo arriba, "¿Para qué te va a servir?" y 4 pasos */
.prep-hero .prep-wa { margin-top: clamp(22px, 3vw, 30px); }
.prep-sirve::before { background: radial-gradient(45% 60% at 50% 50%, rgb(0 255 178 / .08), transparent 70%), linear-gradient(180deg, var(--dk), var(--dk-2) 50%, var(--dk)); }
.prep-sirve-copy { display: grid; gap: 16px; max-width: 60ch; margin: clamp(24px, 3vw, 36px) auto 0; text-align: center; }
.prep-sirve-copy p { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--dk-text); }
.prep-sirve-copy b { color: #fff; }
.prep-sirve-end { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem) !important; letter-spacing: -.015em; color: var(--mint) !important; }
.prep-card p a { color: var(--mint); font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 820px) and (max-width: 1099px) { .prep-cards { grid-auto-columns: calc((100% - 16px) / 2); } }
.prep-card h3 { line-height: 1.2; text-wrap: pretty; }
.prep-hero { padding-bottom: clamp(72px, 8vw, 110px); }