/* =========================================================================
   Mi hijo quiere ser YouTuber — hoja de estilo
   Paleta Gabriela Pérez · Tipografía: Poppins (200 → 700)
   Estructura en bandas: clara / arena / oscura / vino
   ========================================================================= */

:root{
  /* Paleta de marca */
  --wine:    #6E3C46;   /* Burgundy Mauve */
  --mauve:   #8A4F5D;   /* Mauve Vino     */
  --nude:    #C9AFA5;   /* Nude Rosado    */
  --taupe:   #BFAFA4;   /* Taupe Claro    */
  --beige:   #E3D2C3;   /* Beige Cálido   */
  --ink:     #111111;   /* Negro          */

  /* Superficies derivadas */
  --shell:   #FAF6F2;
  --sand:    #F1E7DC;
  --paper:   #FFFFFF;
  --line:    #E4D8CC;
  --muted:   #6A5F58;

  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(20px, 5vw, 60px);
  --band:   clamp(58px, 7vw, 96px);
  --radius: 20px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--shell);
  color:var(--ink);
  font:400 17px/1.7 var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.1; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
blockquote{ margin:0; }

.wrap{ width:min(1180px, 100%); margin-inline:auto; padding-inline:var(--gutter); }

.sr{
  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:absolute; left:16px; top:-60px; z-index:99;
  padding:10px 16px; border-radius:10px;
  background:var(--ink); color:var(--shell); font-size:14px; font-weight:500;
  transition:top .18s ease;
}
.skip:focus{ top:16px; }

:focus-visible{ outline:3px solid var(--mauve); outline-offset:3px; border-radius:4px; }

/* ── Bandas ────────────────────────────────────────────────────────────── */

.band{ padding-block:var(--band); background:var(--shell); }
.band--sand{ background:var(--sand); }
.band--ink{ background:var(--ink); color:var(--shell); }
.band--wine{ background:var(--wine); color:var(--shell); }

.head{ max-width:64ch; margin-bottom:clamp(36px,4.5vw,60px); }
.head--center{ margin-inline:auto; text-align:center; }

.h2{
  font-weight:200;
  font-size:clamp(29px,4vw,52px);
  letter-spacing:-.04em;
  line-height:1.1;
}
.h2 em{ font-style:normal; font-weight:600; color:var(--wine); }
.band--ink .h2 em,.band--wine .h2 em{ color:var(--beige); }

.copy{
  max-width:58ch; margin:20px 0 0;
  color:var(--muted); font-weight:300; font-size:17px;
}
.copy--center{ margin-inline:auto; }
.copy--light{ color:rgba(250,246,242,.68); }

.eyebrow{
  margin:0 0 20px;
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--mauve);
}
.eyebrow--light{ color:var(--nude); }
.eyebrow--soft{ color:var(--taupe); }

/* ── Botones y detalles compartidos ────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 32px;
  border:1px solid transparent; border-radius:999px;
  font:500 15px/1 var(--font); letter-spacing:-.01em;
  cursor:pointer; transition:transform .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--wine); color:var(--shell); }
.btn--solid:hover{ background:var(--mauve); }
.btn--light{ background:var(--shell); color:var(--wine); }
.btn--light:hover{ background:var(--beige); }
.btn--ghost{
  min-height:44px; padding:0 20px;
  border-color:var(--line); color:var(--wine); font-size:13.5px;
}
.btn--ghost:hover{ background:var(--paper); }
.btn--sm{ min-height:44px; padding:0 22px; font-size:14px; }

.quiet{
  font-size:14.5px; font-weight:500; color:var(--nude);
  border-bottom:1px solid rgba(201,175,165,.5); padding-bottom:2px;
}
.quiet:hover{ color:var(--beige); border-color:var(--beige); }

.stamp{ margin:26px 0 0; font-size:12.5px; font-weight:300; color:var(--muted); }
.stamp--light{ color:rgba(250,246,242,.74); }

/* Logotipo. El archivo -claro es la misma marca en color crema,
   para que se lea sobre los fondos oscuros. */
.mark{ display:inline-flex; align-items:center; }
.mark img{ display:block; width:auto; height:44px; }
.mark--foot img{ height:58px; }

/* ── Movimiento ────────────────────────────────────────────────────────── */

@keyframes rise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
.js .rise{ animation:rise .8s cubic-bezier(.2,.7,.3,1) var(--d,0s) both; }

.js .reveal{ opacity:0; transform:translateY(18px); }
.js .reveal.in{
  opacity:1; transform:none;
  transition:opacity .65s cubic-bezier(.2,.7,.3,1) var(--d,0s),
             transform .65s cubic-bezier(.2,.7,.3,1) var(--d,0s);
}

/* ── Barra superior ────────────────────────────────────────────────────── */

.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(17,17,17,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(250,246,242,.12);
  color:var(--shell);
}
.topbar__in{
  display:flex; align-items:center; gap:32px; height:70px;
  transition:height .3s ease;
}
/* Al bajar, la barra se compacta y se vuelve mas solida */
.topbar.is-scrolled{ background:rgba(17,17,17,.92); }
.topbar.is-scrolled .topbar__in{ height:58px; }
.topbar .mark img{ transition:height .3s ease; }
.topbar.is-scrolled .mark img{ height:36px; }
.topbar__nav{ display:flex; gap:28px; margin-left:auto; }
.topbar__nav a{ font-size:13.5px; font-weight:300; color:rgba(250,246,242,.72); }
.topbar__nav a:hover{ color:var(--shell); }
.topbar__cta{ border-color:rgba(250,246,242,.28); color:var(--shell); }
.topbar__cta:hover{ background:rgba(250,246,242,.1); }

/* ══ 1 · HERO ═════════════════════════════════════════════════════════════ */

/* Sin position:relative a proposito. Si el hero fuera un elemento posicionado,
   su fondo oscuro se pintaria por encima de la banda siguiente en la zona donde
   se solapan, y el video dejaria de quedar partido por el borde. */
/* El fondo del hero es un video. El video va en una capa por detras
   (z-index -1) y lo que aqui se declara como fondo son solo los velos:
   asi el degradado oscuro cae sobre el video y el texto queda encima
   de todo. Sin color de fondo solido, que taparia el video. */
.hero{
  position:relative;
  padding-block:clamp(64px,9vw,110px) 0;
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(110,60,70,.5), transparent 62%),
    radial-gradient(70% 60% at 8% 92%, rgba(138,79,93,.38), transparent 60%),
    linear-gradient(180deg, rgba(17,17,17,.82) 0%, rgba(17,17,17,.76) 42%, rgba(17,17,17,.93) 100%);
  color:var(--shell);
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  background:var(--ink);
  pointer-events:none;
}
.hero__in{
  min-height:56vh;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:30px; }
.chips span{
  padding:7px 14px; border-radius:999px;
  border:1px solid rgba(250,246,242,.2);
  font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nude);
}

.voices{ display:flex; flex-direction:column; align-items:center; }
.voices__kid,.voices__mom{
  font-size:clamp(32px,6.2vw,80px);
  letter-spacing:-.045em; line-height:1.03;
}
.voices__kid{ font-weight:200; color:rgba(250,246,242,.9); }
.voices__mom{ font-weight:600; color:var(--shell); margin-top:.06em; }
.voices__mom em{ font-style:normal; color:var(--nude); }

.hero__lede{
  max-width:58ch; margin-top:28px;
  font-weight:300; font-size:17.5px; color:rgba(250,246,242,.84);
}
.hero__act{
  display:flex; align-items:center; justify-content:center; gap:26px;
  flex-wrap:wrap; margin-top:36px;
}

/* Reproductor: queda partido por la mitad justo sobre el borde
   entre el hero y la banda siguiente.

   El margen negativo va en porcentaje, que se calcula sobre el ancho
   de .player-slot — es decir, el ancho del propio video. Un 28.125%
   del ancho es exactamente media altura en formato 16:9, así que la
   mitad inferior siempre sobresale, sea cual sea el tamaño de pantalla.
   Los 16.5px extra descuentan el pie de foto. */
.player-slot{
  width:min(880px, calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}
.player{
  position:relative; z-index:2;
  width:100%;
  margin:clamp(48px,6vw,72px) 0 calc(-28.125% - 16.5px);
}
.player__frame{
  position:relative; aspect-ratio:16/9;
  display:grid; place-items:center;
  border-radius:var(--radius); overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 0%, var(--beige), transparent 60%),
    linear-gradient(150deg, var(--nude), var(--taupe));
}
.player__frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
}
.player__poster{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
/* Bucle silencioso de fondo. No recibe clics: el boton de play queda encima. */
.player__loop{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; border:0;
  pointer-events:none;
}
.player__frame::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(17,17,17,.05), rgba(17,17,17,.35));
  pointer-events:none;
}
/* Con el reproductor real en marcha sobra el velo */
.player__frame.is-live::after{ display:none; }
/* Marca de YouTube. Es el unico rojo de toda la pagina y aparece solo
   donde de verdad significa algo: el reproductor y los ajustes del canal. */
.yt{ display:block; height:auto; }
.yt__badge{ fill:#FF0000; }
.yt__arrow{ fill:#fff; }
.yt--sm{ width:20px; flex:0 0 auto; }

.player__play{
  position:relative; z-index:2;
  width:92px; padding:0; border:0; background:none;
  cursor:pointer;
  filter:drop-shadow(0 12px 26px rgba(17,17,17,.4));
  transition:transform .22s ease;
}
.player__play .yt{ width:92px; }
.player__play:hover{ transform:scale(1.08); }

/* Anillo que late detras del boton, para invitar al clic */
.player__play::after{
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:22px;
  border:2px solid rgba(255,255,255,.85);
  animation:latido 2.6s ease-out infinite;
}
@keyframes latido{
  0%   { transform:scale(1);    opacity:.75; }
  70%  { transform:scale(1.45); opacity:0; }
  100% { transform:scale(1.45); opacity:0; }
}
.player__len{
  position:absolute; z-index:2; right:14px; bottom:14px;
  padding:5px 10px; border-radius:8px;
  background:rgba(17,17,17,.55); color:#fff;
  font-size:11.5px; letter-spacing:.04em;
}
.player__cap{
  margin-top:14px; text-align:center;
  font-size:13px; font-weight:300; color:var(--muted);
}

/* ══ 2 · MIEDOS ═══════════════════════════════════════════════════════════ */

/* Deja sitio para la mitad del video que invade esta banda.
   El z-index asegura que el fondo arena tape al del hero en la zona
   donde se solapan; el video va en z-index 2, o sea por encima de ambos. */
.fears{
  position:relative; z-index:1;
  padding-top:calc(.29 * min(880px, 100vw - var(--gutter) * 2) + 160px);
}
.fears__grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(34px,5vw,76px); align-items:start;
}
.fears__list{
  padding:clamp(26px,3vw,36px);
  border-radius:var(--radius); background:var(--paper);
  box-shadow:0 24px 60px -40px rgba(110,60,70,.45);
}
.fears__list li{
  padding:15px 0; border-bottom:1px solid var(--line);
  font-weight:300; font-size:15.5px; font-style:italic; color:var(--wine);
}
.fears__list li:last-of-type{ border-bottom:0; }
.fears__answer{
  margin-top:22px; padding-top:22px; border-top:2px solid var(--wine);
  font-size:16px; font-weight:500;
}

/* ══ 3 · QUÉ VAS A SABER HACER ════════════════════════════════════════════ */

.skills__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.skill{
  display:flex; align-items:flex-start; gap:14px;
  padding:24px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper);
}
.skill p{ font-weight:300; font-size:15.5px; line-height:1.6; }
.skill__tick{
  position:relative; flex:0 0 auto;
  width:22px; height:22px; margin-top:3px;
  border-radius:50%; background:var(--beige);
}
.skill__tick::before{
  content:''; position:absolute; left:7px; top:5px;
  width:6px; height:11px;
  border:solid var(--wine); border-width:0 1.6px 1.6px 0;
  transform:rotate(43deg);
}

/* ══ 4 · HERRAMIENTAS ═════════════════════════════════════════════════════ */

.tools__grid{
  display:grid; grid-template-columns:1fr 300px;
  gap:clamp(24px,4vw,56px); align-items:start;
}
.tools__main h3{
  font-weight:500; font-size:clamp(21px,2.4vw,28px);
  letter-spacing:-.03em; color:var(--wine);
}
.tools__main p{
  max-width:62ch; margin-top:16px;
  font-weight:300; font-size:16.5px; color:var(--muted);
}
.tools__side{
  padding:26px; border-radius:var(--radius);
  background:var(--ink); color:var(--shell);
}
.tools__label{
  margin-bottom:18px;
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--nude);
}
.tools__side li{
  padding:14px 0; border-bottom:1px solid rgba(250,246,242,.14);
}
.tools__side li:last-of-type{ border-bottom:0; }
.tools__side b{ display:block; font-size:15px; font-weight:500; }
.tools__side span{
  display:block; margin-top:2px;
  font-size:13px; font-weight:300; color:rgba(250,246,242,.6);
}
.tools__note{
  margin-top:18px; font-size:12.5px; font-weight:300; color:var(--nude);
}

/* ══ 5 · MÓDULOS ══════════════════════════════════════════════════════════ */

.modules__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.mod{
  padding:30px 26px 32px;
  border-radius:var(--radius);
  background:var(--sand);
  transition:transform .25s ease, background-color .25s ease;
}
.mod:hover{ transform:translateY(-4px); background:var(--beige); }
.mod__n{
  display:grid; place-items:center;
  width:40px; height:40px; margin-bottom:22px;
  border-radius:50%; background:var(--wine); color:var(--shell);
  font-size:14px; font-weight:400;
}
.mod h3{ font-weight:500; font-size:20px; letter-spacing:-.025em; }
.mod p{
  margin-top:10px; font-weight:300; font-size:15px; line-height:1.6; color:var(--muted);
}

.bonus{
  margin-top:clamp(40px,5vw,64px); padding-top:clamp(34px,4vw,50px);
  border-top:1px solid var(--line);
}
.bonus__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.bonus__card{
  padding:26px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--paper);
}
.bonus__card h3{ font-size:18px; font-weight:500; letter-spacing:-.02em; color:var(--wine); }
.bonus__card p{ margin-top:10px; font-weight:300; font-size:14.5px; color:var(--muted); }

/* Botón intermedio, al cerrar el contenido del curso */
.midcta{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-top:clamp(38px,5vw,60px); padding-top:clamp(34px,4vw,50px);
  border-top:1px solid var(--line);
}
.midcta__line{
  max-width:34ch; margin-bottom:26px;
  font-weight:300; font-size:clamp(19px,2.2vw,25px);
  letter-spacing:-.025em; line-height:1.35;
}

/* ══ 6 · PARA QUIÉN ═══════════════════════════════════════════════════════ */

.fit__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); }
.fit__col{
  padding:clamp(26px,3vw,36px);
  border-radius:var(--radius); background:var(--paper);
}
.fit__col li{
  position:relative; padding:14px 0 14px 32px;
  border-bottom:1px solid var(--line);
  font-weight:300; font-size:15.5px;
}
.fit__col li:last-child{ border-bottom:0; }
.fit__yes li::before,
.fit__no li::before{
  position:absolute; left:0; top:14px;
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  font-size:12px; line-height:1;
}
.fit__yes li::before{ content:'+'; background:var(--beige); color:var(--wine); }
.fit__no li::before{ content:'–'; background:#EFEAE5; color:var(--taupe); }
.fit__no li{ color:var(--muted); }

/* ══ 7 · PANEL DE SEGURIDAD ═══════════════════════════════════════════════ */

.control{ position:relative; isolation:isolate; overflow:hidden; }
.control__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  pointer-events:none;
}
.control::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(17,17,17,.88) 0%, rgba(17,17,17,.7) 52%, rgba(17,17,17,.5) 100%),
    linear-gradient(180deg, rgba(17,17,17,.32), rgba(17,17,17,.42));
  pointer-events:none;
}
.control__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,72px); align-items:center;
}
.control__points{ margin-top:28px; }
.control__points li{
  position:relative; padding:11px 0 11px 26px;
  font-weight:300; font-size:15px; color:rgba(250,246,242,.78);
}
.control__points li::before{
  content:''; position:absolute; left:0; top:19px;
  width:9px; height:9px; border-radius:50%; background:var(--nude);
}

.panel{
  padding:clamp(20px,2.4vw,28px);
  border-radius:var(--radius);
  background:var(--shell); color:var(--ink);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.panel__top{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.panel__title{
  display:flex; align-items:center; gap:9px;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
}
.panel__score{ font-size:13px; font-weight:300; color:var(--muted); }
.panel__score b{
  display:inline-block;
  font-weight:600; color:var(--wine);
}
/* El contador da un salto cada vez que cambia */
.panel__score b.cambia{ animation:salto .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes salto{
  0%  { transform:scale(1); }
  40% { transform:scale(1.45); }
  100%{ transform:scale(1); }
}

.sw{
  position:relative;
  display:flex; align-items:center; gap:18px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
/* Destello breve al dejar un ajuste en seguro */
.sw::before{
  content:''; position:absolute; inset:0 -14px;
  border-radius:10px; background:var(--beige);
  opacity:0; pointer-events:none;
}
.sw.destella::before{ animation:destello .7s ease-out; }
@keyframes destello{
  0%  { opacity:.85; }
  100%{ opacity:0; }
}
.sw__text,.sw__btn{ position:relative; }
.sw:last-child{ border-bottom:0; }
.sw__text{ flex:1; min-width:0; }
.sw__name{ font-size:15px; font-weight:500; letter-spacing:-.01em; }
.sw__state{
  margin-top:3px;
  font-size:12.5px; font-weight:300; line-height:1.45; color:var(--muted);
  transition:color .2s ease;
}
.sw.is-safe .sw__state{ color:var(--wine); }

.sw__btn{
  position:relative; flex:0 0 auto;
  width:52px; height:30px; padding:0;
  border:0; border-radius:999px;
  background:var(--taupe); cursor:pointer;
  transition:background-color .24s ease;
}
.sw__btn[aria-checked="true"]{ background:var(--wine); }
.sw__knob{
  position:absolute; left:4px; top:4px;
  width:22px; height:22px; border-radius:50%; background:var(--shell);
  transition:transform .24s cubic-bezier(.3,1.4,.5,1);
}
.sw__btn[aria-checked="true"] .sw__knob{ transform:translateX(22px); }

.panel__done{
  margin-top:20px; padding:15px 17px;
  border-radius:13px; background:var(--beige);
  font-size:13.5px; line-height:1.55; color:var(--wine);
}

/* ══ 8 · CÓMO FUNCIONA ════════════════════════════════════════════════════ */

.how__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.how__item{ padding-top:22px; border-top:2px solid var(--wine); }
.how__item h3{ font-size:16px; font-weight:500; letter-spacing:-.02em; }
.how__item p{
  margin-top:9px; font-weight:300; font-size:14px; line-height:1.6; color:var(--muted);
}

/* ══ 9 · FRASE ════════════════════════════════════════════════════════════ */

.quote__in{ max-width:940px; text-align:center; }
.quote__mark{
  font-size:72px; line-height:.6; color:var(--taupe); font-weight:300;
}
.quote blockquote{
  margin-top:24px;
  font-weight:200; font-size:clamp(23px,3.3vw,42px);
  letter-spacing:-.04em; line-height:1.22;
  text-wrap:balance;
}
.quote blockquote em{ font-style:normal; font-weight:600; color:var(--wine); }
.quote__by{
  margin-top:26px;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mauve);
}

/* ══ 10 · PREGUNTAS ═══════════════════════════════════════════════════════ */

.faq__list{ max-width:880px; margin-inline:auto; }
.faq__list details{ border-top:1px solid var(--line); }
.faq__list details:last-child{ border-bottom:1px solid var(--line); }
.faq__list summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 0; cursor:pointer; list-style:none;
  font-size:16.5px; font-weight:400; letter-spacing:-.015em;
}
.faq__list summary::-webkit-details-marker{ display:none; }
.faq__list summary span{
  position:relative; flex:0 0 auto; width:18px; height:18px;
  transition:transform .25s ease;
}
.faq__list summary span::before,
.faq__list summary span::after{
  content:''; position:absolute; left:0; top:8px;
  width:18px; height:1.5px; background:var(--wine);
}
.faq__list summary span::after{ transform:rotate(90deg); }
.faq__list details[open] summary span{ transform:rotate(135deg); }
.faq__list details p{
  max-width:64ch; padding:0 40px 26px 0;
  font-weight:300; font-size:15.5px; color:var(--muted);
}

/* ══ 11 · CIERRE ══════════════════════════════════════════════════════════ */

.close__in{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.close__title{
  max-width:20ch;
  font-weight:200; font-size:clamp(30px,4.6vw,60px); letter-spacing:-.045em;
  line-height:1.1;
}
.close__title em{ font-style:normal; font-weight:600; color:var(--beige); }
.close__lede{
  max-width:46ch; margin-top:22px;
  font-weight:300; font-size:17px; color:rgba(250,246,242,.72);
}
.close .btn{ margin-top:36px; }

/* ── Pie ───────────────────────────────────────────────────────────────── */

.foot{ padding-block:50px 38px; background:var(--ink); color:rgba(250,246,242,.6); }
.foot__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; font-size:12.5px; font-weight:300;
}

/* ── Barra fija móvil ──────────────────────────────────────────────────── */

.dock{ display:none; }

/* ── Adaptación ────────────────────────────────────────────────────────── */

@media (max-width:1020px){
  .skills__grid,.modules__grid{ grid-template-columns:repeat(2,1fr); }
  .how__grid{ grid-template-columns:repeat(3,1fr); }
  .tools__grid{ grid-template-columns:1fr; }
  .topbar__nav{ gap:20px; }
}

@media (max-width:860px){
  .fears__grid,.control__grid,.fit__grid{ grid-template-columns:1fr; }
  .bonus__grid{ grid-template-columns:1fr; }
  .topbar__nav{ display:none; }
}

@media (max-width:640px){
  body{ font-size:16px; padding-bottom:78px; }
  .topbar__cta{ margin-left:auto; }

  /* Las tres etiquetas caben en una sola linea, mas arriba
     y mas despegadas del titular. */
  .hero{ padding-top:42px; }
  .chips{ flex-wrap:nowrap; gap:6px; margin-bottom:52px; }
  .chips span{
    padding:6px 10px;
    font-size:9px; letter-spacing:.1em; white-space:nowrap;
  }
  /* Los titulares traen saltos de linea pensados para pantallas anchas.
     En movil se anulan y se deja que el texto reparta solo. A 26px el
     titular de esta seccion cabe en 3 lineas en vez de 4 y aprovecha
     mucho mejor el ancho. */
  .h2{ font-size:26px; }
  .fears h2,.control h2{ text-wrap:balance; }
  .fears h2 br,.control h2 br{ display:none; }
  .fears h2{ text-align:center; }

  /* Cierre: en 2 lineas. A 24px el texto reparte solo y llena el 92%
     del ancho; con el salto original salian 4 lineas muy cortas. */
  .close__title{ max-width:none; font-size:24px; text-wrap:balance; }
  .close__title br{ display:none; }

  /* La linea de garantias se parte siempre en el mismo sitio:
     "Con celular y luz natural" baja entera a la segunda linea,
     y el separador de en medio sobra. */
  .stamp__fin{ display:block; }
  .stamp__sep{ display:none; }

  .player__play,.player__play .yt{ width:66px; }
  .player__play::after{ border-radius:16px; }

  /* Pie centrado, como el resto de la pagina en movil */
  .foot__in{
    flex-direction:column; align-items:center;
    text-align:center; gap:18px;
  }

  .hero__in{ min-height:auto; }
  .hero__act{ flex-direction:column; align-items:stretch; gap:18px; width:100%; }
  .hero__act .btn{ width:100%; }
  .quiet{ text-align:center; align-self:center; }
  .skills__grid,.modules__grid,.how__grid{ grid-template-columns:1fr; }
  .how__item{ padding-top:18px; }
  .mod{ padding:24px 22px 26px; }
  .faq__list details p{ padding-right:0; }
  .quote__mark{ font-size:56px; }

  .dock{
    position:fixed; z-index:50; left:10px; right:10px; bottom:10px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:9px 9px 9px 20px;
    border-radius:999px;
    background:var(--ink); color:var(--shell);
    box-shadow:0 16px 40px rgba(17,17,17,.35);
  }
  .dock span{ font-size:12.5px; font-weight:300; }
  .dock .btn--solid{ background:var(--nude); color:var(--ink); }
}

/* Celulares muy estrechos: las etiquetas siguen en una linea sin
   invadir el margen lateral. */
@media (max-width:360px){
  .chips{ gap:5px; }
  .chips span{ padding:5px 8px; font-size:8.5px; letter-spacing:.08em; }
  .close__title{ font-size:20px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .js .reveal,.js .rise{ opacity:1; transform:none; animation:none; }
}