/* ============================================================
   Reto 21 días — landing de venta
   Sobre tokens.css (design system TUP).

   Lenguaje visual heredado de la página de gracias (aprobada):
   fondo casi negro, tipografía Poppins grande y rotunda, y el
   ámbar de marca usado en BLOQUES (panel de oferta, tarjeta del
   día 21), no solo en detalles. Dos momentos ámbar en toda la
   página: más sería saturar, menos sería la landing gris de antes.

   Reglas del cliente que este CSS respeta:
   · nada sobrecargado: negro + blanco + ámbar, sin más colores
   · icono ARRIBA en tarjetas, nunca al lado
   · tipografía generosa, nada de textos minúsculos
   ============================================================ */

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

/* clip, no hidden: hidden crea contenedor de scroll y anula el sticky del
   escenario del vídeo en Safari. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body > * { position: relative; z-index: 1; }

/* Rayos de luz (LightRays de React Bits, código exacto del cliente, mismo
   bundle que el "en construcción"). Cubren la zona del hero y se funden en
   negro antes del contenido. Sin JS o sin WebGL: fondo negro limpio. */
.rayos {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(120vh, 1200px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;               /* luz cálida y sutil, no foco de discoteca */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.rayos canvas { display: block; width: 100%; height: 100%; }

img, video { max-width: 100%; display: block; }

/* Tinta sobre los paneles ámbar. */
:root {
  --ink: #211200;
  --ink-soft: rgba(33, 18, 0, 0.72);
  --panel-ambar: linear-gradient(165deg, #ffbd59 0%, #ffa417 55%, #f08a00 100%);
}

/* --------------------------------------------------- loader de reloj ---- */
/* Puro CSS: la aguja da una vuelta (1s) mientras el anillo se dibuja, el
   rótulo entra cerrando el tracking, y el overlay se descarta solo con
   `forwards`. Sin JS funciona igual; pointer-events:none SIEMPRE. */

.cargador {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--c-bg);
  pointer-events: none;
  animation: cargador-fuera 0.4s ease 1.3s forwards;
}
@keyframes cargador-fuera { to { opacity: 0; visibility: hidden; } }

.cargador__caja { display: grid; justify-items: center; gap: var(--sp-5); }
.cargador__reloj { width: clamp(96px, 12vw, 128px); height: auto; }

.cargador__anillo {
  stroke-dasharray: 326.7;                       /* 2π · r52 */
  stroke-dashoffset: 326.7;
  animation: cargador-anillo 1s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}
@keyframes cargador-anillo { to { stroke-dashoffset: 0; } }

.cargador__aguja {
  transform-origin: 60px 60px;
  animation: cargador-aguja 1s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards;
}
@keyframes cargador-aguja { to { transform: rotate(360deg); } }

.cargador__t {
  font-size: 0.88rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--c-accent);
  animation: cargador-letras 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
}
@keyframes cargador-letras {
  from { opacity: 0; letter-spacing: 0.5em; }
  to   { opacity: 1; letter-spacing: 0.24em; }
}

@media (prefers-reduced-motion: reduce) { .cargador { display: none; } }

/* ------------------------------------------------------ estructura ----- */

.wrap { width: 100%; max-width: var(--w-container); margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--w-narrow); }

.section { padding-block: clamp(4rem, 7.5vw, 7rem); }

/* ------------------------------------------------------ tipografía ----- */

h1, h2, h3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
p { margin: 0; }

.eyebrow {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.acento { color: var(--c-accent); }
.apagado { color: var(--c-text-muted); }

.sub {
  margin-top: var(--sp-5);
  max-width: 52ch;
  font-size: clamp(1.08rem, 1.4vw, 1.22rem);
  line-height: 1.65;
  color: var(--c-text-soft);
}

/* --------------------------------------------------------- botones ----- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 0 var(--sp-7);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--ff-body);
  font-size: 1.1rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-orange);
  transition: filter var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cta:active { transform: scale(0.985); }
.cta:focus-visible { outline: 3px solid var(--c-text); outline-offset: 3px; }

/* Sobre panel ámbar el botón es negro: es el único contraste que funciona. */
.cta--negro {
  background: #0d0d0d;
  color: #fff;
  box-shadow: 0 12px 32px rgba(33, 18, 0, 0.35);
}
.cta--negro:hover { filter: none; background: #1c1c1c; }

.cta--mini {
  min-height: 46px;
  padding: 0 var(--sp-5);
  font-size: 0.95rem;
  border-radius: var(--r-full);
  box-shadow: none;
}

.cta-nota { margin-top: var(--sp-4); font-size: 0.95rem; color: var(--c-text-muted); }

@media (max-width: 700px) {
  .cta { width: 100%; }
  .cta--mini { width: auto; }
}

/* --------------------------------------------------------- cabecera ---- */

.barra { padding-block: var(--sp-5); }
.barra__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.barra img { width: clamp(136px, 13vw, 172px); height: auto; }
.barra__lado { display: flex; align-items: center; gap: var(--sp-5); }
.barra__fecha { font-size: 0.95rem; color: var(--c-text-muted); }

@media (max-width: 700px) {
  .barra__lado { display: none; }   /* en móvil ya está la barra fija de compra */
}

/* ---------------------------------------------------------- portada ---- */
/* Centrada y compacta a propósito: el vídeo inclinado tiene que asomar ya
   en el primer pantallazo. */

.portada {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 0;
  text-align: center;
}
/* Ancho para que en escritorio cada frase quepa en una línea: dos en total. */
.portada h1 { max-width: 44ch; margin-inline: auto; font-size: clamp(1.7rem, 3.2vw, 2.9rem); }
.portada .segunda { display: block; color: var(--c-accent); }
.portada .sub { margin-inline: auto; max-width: 58ch; }
.portada .acciones {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.98rem;
  color: var(--c-text-soft);
}
.meta li { display: flex; align-items: center; gap: var(--sp-3); }
.meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
}

/* ------------------------------------------------ escenario del vídeo -- */
/* ESTADO BASE = ESTADO FINAL: sin JS, sin soporte o con reduced-motion la
   página es un hero normal con el vídeo grande y quieto. El efecto solo
   existe si el JS añade .fx al <html>. Se anima SOLO transform. */

.escenario { padding-top: 0; padding-bottom: var(--sp-8); }
.escenario__pista { position: relative; }
.escenario__pane { display: grid; place-items: center; }

.marco {
  position: relative;
  margin: 0 auto;
  width: min(100% - 24px, var(--w-container));
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;           /* WebKit: sin esto el radio no recorta bajo transform */
  background: var(--c-bg-card);
  /* Empieza inclinado (--rx) y cerca (--k); el driver lo endereza y lo acerca
     con el scroll. Estado base sin JS: recto y a tamaño completo. */
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) scale(var(--k, 1));
  transform-origin: 50% 50%;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
}
/* Mientras no ha llegado a la posición final, el vídeo invita al clic. */
.fx .escenario.lejos .marco { cursor: pointer; }
.marco video,
.marco iframe,
.marco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Mientras el marco no ha llegado a su posición, los clics no entran al
   player de Vimeo ni al play grande: los captura el marco y enderezan el
   vídeo. */
.fx .escenario.lejos .marco iframe,
.fx .escenario.lejos .marco .play-grande { pointer-events: none; }

/* Play grande de marca, por encima del de Vimeo (escenario.js lo conecta a la
   API del player y lo retira al arrancar). */
.play-grande {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: clamp(84px, 9vw, 116px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: var(--shadow-orange), 0 12px 44px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform var(--t-fast), opacity 0.25s ease;
}
.play-grande:hover { transform: scale(1.06); }
.play-grande:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.play-grande svg { width: 36%; height: 36%; fill: var(--ink); margin-left: 7%; }
.play-grande.oculto { opacity: 0; pointer-events: none; }

.marco__play {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  cursor: pointer;
}
/* Solo si el autoplay fue bloqueado (iOS en bajo consumo). */
html.sin-autoplay .marco__play { display: flex; }

.fx .escenario__pista { height: 180svh; }
.fx .escenario__pane { position: sticky; top: 0; height: 100svh; }
/* Con el efecto activo el escenario se solapa con el hero para que el vídeo
   inclinado ya asome en el primer pantallazo, como en el mockup. La caja
   invisible que se solapa NO puede robar los clics de los botones del hero:
   solo el marco del vídeo es clicable. */
.fx .escenario { margin-top: -22svh; pointer-events: none; }
.fx .escenario .marco { pointer-events: auto; }

@media (max-width: 700px) {
  /* Sin efecto de scroll en móvil: aire arriba y el gutter general de la
     web a los lados, como cualquier otra sección. */
  .escenario { padding-top: var(--sp-7); }
  .marco { width: calc(100% - var(--gutter) * 2); }
}

/* ------------------------------------------------------- el problema --- */

.grande {
  font-family: var(--ff-display);
  font-weight: var(--fw-semi);
  font-size: clamp(1.5rem, 3.1vw, 2.35rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 30ch;
  text-wrap: balance;
}

.problema__cols {
  margin-top: var(--sp-7);
  display: grid;
  gap: var(--sp-6) var(--sp-8);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--c-text-soft);
}
@media (min-width: 860px) { .problema__cols { grid-template-columns: 1fr 1fr; } }
.problema__cols b { color: var(--c-text); font-weight: var(--fw-semi); }

/* ------------------------------------------------------- manifiesto ---- */
/* Imagen a la izquierda, declaración grande a la derecha. */

.reto__grid { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 900px) { .reto__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-8); } }
/* En móvil el texto va primero; la imagen, debajo. */
@media (max-width: 899px) { .reto__media { order: 2; } }

/* La caja del producto flota sobre un disco gris de estudio que la separa
   del negro, con un aliento ámbar en la base del disco. */
.producto { position: relative; }
.producto::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(108%, 550px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Disco SÓLIDO, con borde definido: el ámbar vive dentro del círculo. */
  background:
    radial-gradient(58% 42% at 50% 82%, rgba(255, 164, 23, 0.1), transparent 72%),
    #202020;
}
.producto img {
  position: relative;
  width: min(100%, 460px);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 34px 48px rgba(0, 0, 0, 0.55));
}
@media (prefers-reduced-motion: no-preference) {
  .producto img { animation: producto-flota 6s ease-in-out infinite alternate; }
}
@keyframes producto-flota {
  from { transform: translateY(-6px); }
  to   { transform: translateY(8px); }
}

.manifiesto__t {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  max-width: 24ch;
}

/* ------------------------------------------------------ test / pasos --- */

/* Ligeros a propósito: numeral pequeño en línea y un filete fino arriba.
   Los numerales grandes de la sección son SOLO los de las cards de semanas. */
.pasos {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
@media (min-width: 760px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.paso { border-top: 1px solid var(--c-border); padding-top: var(--sp-4); }
.paso .n {
  font-size: 0.92rem;
  font-weight: var(--fw-bold);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
  margin-right: var(--sp-3);
}
.paso .t { font-size: 1.1rem; font-weight: var(--fw-semi); }
.paso .d { margin-top: var(--sp-2); font-size: 1rem; line-height: 1.6; color: var(--c-text-muted); }

/* ----------------------------------------- borde de luz de las tarjetas -- */
/* Port del BorderGlow de React Bits en ámbar. escenario.js crea dentro de
   cada [.glow] dos capas (.luz anillo del borde, .halo resplandor exterior)
   y mueve --prox (0-100) y --ang con el cursor o con el barrido de entrada. */

.glow { position: relative; }
.glow .luz,
.glow .halo {
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  opacity: calc(var(--prox, 0) / 100);
}
/* Anillo: gradiente cónico con el arco de luz centrado en --ang, recortado
   al grosor del borde con la máscara content-box/exclude. */
.glow .luz {
  inset: -1px;
  padding: 1px;
  background: conic-gradient(from calc(var(--ang, 45deg) - 90deg),
    transparent 0turn,
    rgba(255, 196, 100, 0.55) 0.15turn,
    #ffdca6 0.25turn,
    rgba(255, 196, 100, 0.55) 0.35turn,
    transparent 0.5turn,
    transparent 1turn);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* Halo exterior: sombras ámbar en anillo, enmascaradas al mismo arco. */
.glow .halo {
  inset: -36px;
  mix-blend-mode: plus-lighter;
  -webkit-mask-image: conic-gradient(from calc(var(--ang, 45deg) - 90deg),
    transparent 0.04turn, #000 0.15turn, #000 0.35turn, transparent 0.46turn, transparent 1turn);
  mask-image: conic-gradient(from calc(var(--ang, 45deg) - 90deg),
    transparent 0.04turn, #000 0.15turn, #000 0.35turn, transparent 0.46turn, transparent 1turn);
}
.glow .halo::before {
  content: "";
  position: absolute;
  inset: 36px;
  border-radius: var(--r-lg);
  box-shadow:
    0 0 1px 0 rgba(255, 220, 166, 0.6),
    0 0 6px 0 rgba(255, 196, 100, 0.4),
    0 0 16px 0 rgba(255, 176, 60, 0.28),
    0 0 30px 2px rgba(255, 164, 23, 0.18),
    0 0 55px 2px rgba(255, 164, 23, 0.1);
}

/* -------------------------------------------------------- 3 semanas ---- */

/* Frase puente entre el test y el plan: texto intermedio, no otro titular. */
.luego {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  max-width: 48ch;
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  line-height: 1.45;
  font-weight: var(--fw-medium);
  color: var(--c-text-soft);
  text-wrap: balance;
}
.luego b { color: var(--c-text); font-weight: var(--fw-semi); }

/* Las semanas van en cards, mismas que las de perfil. */
.semanas { margin-top: var(--sp-7); display: grid; gap: var(--sp-5); }
@media (min-width: 860px) { .semanas { grid-template-columns: repeat(3, 1fr); } }

.semana {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--t-base);
}
.semana:hover { transform: translateY(-4px); }

.semana .n {
  display: block;
  font-family: var(--ff-display);
  font-size: 2.6rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--c-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.semana .k {
  margin-top: var(--sp-3);
  font-size: 0.82rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.semana h3 { margin-top: var(--sp-2); font-size: 1.3rem; }
.semana p { margin-top: var(--sp-3); font-size: 1rem; line-height: 1.6; color: var(--c-text-soft); }

/* El día 21: primer bloque ámbar de la página, el pago del programa. */
.dia21 {
  position: relative;
  margin-top: var(--sp-8);
  background: var(--panel-ambar);
  color: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  overflow: hidden;
}
.dia21 .k {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
}
.dia21 > p {
  position: relative;
  margin-top: var(--sp-4);
  max-width: 46ch;
  font-family: var(--ff-display);
  font-weight: var(--fw-semi);
  font-size: clamp(1.2rem, 2.3vw, 1.7rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
}
/* El 21 gigante, en tinta translúcida detrás del texto. */
.dia21__n {
  position: absolute;
  right: clamp(0.5rem, 3vw, 2.5rem);
  bottom: -0.24em;
  font-family: var(--ff-display);
  font-size: clamp(9rem, 18vw, 16rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(33, 18, 0, 0.14);
  pointer-events: none;
  user-select: none;
}

/* ---------------------------------------------------------- Álvaro ----- */

.autor { display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 860px) { .autor { grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-8); } }

.retrato { display: block; }
.retrato img { width: 100%; height: auto; border-radius: var(--r-lg); }

.parrafo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--c-text-soft);
}
.parrafo b, .parrafo strong { color: var(--c-text); font-weight: var(--fw-semi); }

/* -------------------------------------------------------- qué incluye -- */

.incluye {
  margin: var(--sp-7) 0 0;
  padding: 0;
  border-top: 1px solid var(--c-border);
}
.incluye li {
  list-style: none;
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}
.incluye .check {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-accent-soft);
}
.incluye .check svg { width: 15px; height: 15px; stroke: var(--c-accent); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.incluye .t { font-size: 1.12rem; font-weight: var(--fw-semi); }
.incluye .d { margin-top: 3px; font-size: 1rem; color: var(--c-text-muted); }

/* ---------------------------------------------------------- oferta ----- */
/* Segundo bloque ámbar: el momento de la decisión. Vive en la misma sección
   que "qué incluye": lista a la izquierda, card sticky a la derecha, para que
   el precio y el CTA acompañen mientras se lee lo que entra. */

.oferta__grid { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 980px) {
  .oferta__grid { grid-template-columns: 1.2fr 0.8fr; gap: var(--sp-8); }
  .oferta__grid .oferta { position: sticky; top: var(--sp-6); }
}

.oferta {
  max-width: 880px;
  margin-inline: auto;
  background: var(--panel-ambar);
  color: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  box-shadow: 0 24px 80px rgba(255, 164, 23, 0.16);
}
.oferta__k {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
}
.oferta .precio {
  margin-top: var(--sp-5);
  font-family: var(--ff-display);
  font-size: clamp(3.4rem, 8vw, 5.2rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.04em;
}
.oferta .unico { margin-top: var(--sp-3); font-size: 1.02rem; color: var(--ink-soft); }
.oferta .fecha { margin-top: var(--sp-5); font-size: 1.12rem; font-weight: var(--fw-semi); }
.oferta .acciones { margin-top: var(--sp-6); }
.oferta .micro {
  margin: var(--sp-5) auto 0;
  max-width: 48ch;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------- FAQ ----- */

.faq { margin-top: var(--sp-7); border-top: 1px solid var(--c-border); }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding-block: var(--sp-5);
  font-size: 1.1rem;
  font-weight: var(--fw-semi);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--c-accent); font-weight: var(--fw-medium); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p {
  padding-bottom: var(--sp-5);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--c-text-soft);
  max-width: 62ch;
}

/* ----------------------------------------------------------- cierre ---- */

.cierre {
  text-align: center;
  /* Calor ámbar subiendo desde abajo: la página termina con luz, eco del
     hero. Dos capas: halo amplio + núcleo más cálido pegado al borde. */
  background:
    radial-gradient(78% 80% at 50% 112%, rgba(255, 164, 23, 0.24), transparent 68%),
    radial-gradient(44% 42% at 50% 114%, rgba(255, 126, 0, 0.22), transparent 74%);
}
.cierre h2 { max-width: 22ch; margin-inline: auto; font-size: clamp(1.8rem, 4.4vw, 3.2rem); }
.cierre .sub { margin-inline: auto; }
.cierre .acciones { margin-top: var(--sp-6); }

/* -------------------------------------------------------------- pie ---- */

/* El resplandor del cierre continúa al otro lado del filete, que se tiñe
   apenas de ámbar: un solo foco de luz partido por una línea. */
.pie {
  border-top: 1px solid rgba(255, 164, 23, 0.16);
  padding-block: var(--sp-7);
  background: radial-gradient(56% 150% at 50% -20%, rgba(255, 164, 23, 0.11), transparent 70%);
}
.pie__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.pie p { font-size: var(--fs-small); color: var(--c-text-muted); }
.pie a { color: var(--c-text-soft); text-underline-offset: 3px; }
.pie a:hover { color: var(--c-accent); }
.pie img { width: 164px; height: auto; }

/* En móvil: columna centrada, el logo arriba y los legales debajo,
   con el padding justo para respirar sin parecer una sección más. */
@media (max-width: 700px) {
  .pie { padding-block: var(--sp-6); }
  .pie__in { flex-direction: column-reverse; align-items: center; gap: var(--sp-5); }
  .pie img { width: 180px; }
  .pie .legales { text-align: center; line-height: 2; max-width: 32ch; }
}

/* ------------------------------------------- barra fija de compra ------ */
/* Hijo directo de <body>: un transform en un ancestro atraparía el fixed. */

.barra-compra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(32, 32, 32, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-border-strong);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.45);
  /* Oculta DE VERDAD: con solo opacity:0 la barra seguiría recibiendo los
     taps de la franja inferior del móvil (y su enlace llevaría a Whop sin
     que exista ningún botón visible). */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.barra-compra.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.barra-compra .info { font-size: 0.82rem; line-height: 1.35; color: var(--c-text-soft); }
.barra-compra .info b { display: block; color: var(--c-text); font-size: 1rem; font-weight: var(--fw-bold); }
.barra-compra .cta { min-height: 50px; padding-inline: var(--sp-5); font-size: 1rem; width: auto; box-shadow: none; }

/* Sin padding-bottom en el body: la barra se oculta sola en el cierre, donde
   ya hay CTA a la vista, así que nunca tapa nada que no se pueda scrollear. */
@media (max-width: 900px) {
  .barra-compra { display: flex; }
}

/* -------------------------------------------- huecos para imágenes ----- */
/* Proporción ya reservada: al meter la imagen real no se mueve nada.
   Sólidos, sin borde de puntos: un hueco no puede parecer un error. */

.hueco {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sp-3);
  background:
    radial-gradient(80% 80% at 50% 110%, rgba(255, 164, 23, 0.12), transparent 65%),
    var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  color: var(--c-text-muted);
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--sp-6);
}
.hueco svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.5; opacity: 0.7; }
.hueco--retrato { aspect-ratio: 4 / 5; }
.hueco--ancho { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------- animación ----- */

/* El estado oculto solo existe si escenario.js ya corre (.anima en <html>):
   si el JS no llega, la página entera se ve sin animación. La oferta y los
   CTA no pueden depender de que un fichero JS cargue. */
@media (prefers-reduced-motion: no-preference) {
  .anima .sube { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .anima .sube.dentro { opacity: 1; transform: none; }
}