/* =========================================================
   HOTMART CLUB PRESENCIAL
   Negro, naranja de marca y hueso. Un solo acento en toda la
   pagina: el naranja es a la vez color de marca y color de accion.
   ========================================================= */

:root {
  /* Fondos. Nunca negro puro: #000 mata la profundidad. */
  --negro:      #08080A;
  --negro-2:    #0E0E12;
  --negro-3:    #15151A;
  --linea:      #232329;

  /* Texto */
  --hueso:      #ECE6DC;
  --hueso-2:    #C9C3B8;
  --ceniza:     #8A857D;

  /* Acento unico */
  --naranja:    #FF7A18;
  --naranja-2:  #FF9440;
  --tinta-btn:  #170B02;

  /* Ritmo */
  --max:     1120px;
  --medida:  38rem;
  --marco:   clamp(1.2rem, 5vw, 3rem);
  --salto:   clamp(4.5rem, 11vw, 9rem);

  /* Radios. Tres escalones y ninguno mas:
     pastilla en botones, 16px en paneles, 10px en piezas chicas. */
  --r-panel: 16px;
  --r-chico: 10px;

  --mono: 500 .7rem/1 'IBM Plex Mono', ui-monospace, monospace;
  --track: .26em;
  --curva: cubic-bezier(.16, 1, .3, 1);

  color-scheme: dark;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font-family: Archivo, system-ui, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Los atributos width y height del <img> entran como estilo de
   presentacion y le ganan al aspect-ratio del CSS. Sin height:auto la
   foto sale estirada en una tira vertical. Ya paso una vez en produccion. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* El JS esconde con el atributo hidden todo lo que va debajo del video. El
   display:none que el navegador le da a [hidden] viene de su hoja de estilos,
   y esa pierde contra cualquier regla nuestra: .bio declara display:grid mas
   abajo, asi que la seccion de la biografia se seguia viendo aunque el JS le
   pusiera hidden. Estuvo asi en vivo hasta el 11 de septiembre de 2026.
   Con esta linea el hidden manda siempre, sin importar que clase lleve la
   seccion. Comprobado por DOM: antes del revelado ninguna seccion
   data-tras-video mide mas de 0. */
[hidden] { display: none !important; }

::selection { background: var(--naranja); color: var(--tinta-btn); }

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

/* ---------- Piezas compartidas ---------- */

.env {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--marco);
}

.sec { padding-block: var(--salto); }

.sec__enc { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.sec__enc h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  max-width: 20ch;
}

.sec__bajada {
  margin-top: 1.15rem;
  max-width: var(--medida);
  color: var(--hueso-2);
}

/* Etiqueta en mono. Se usa tres veces en toda la pagina y nada mas:
   una por seccion es el tic visual de las paginas generadas. */
.rotulo {
  font: var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--naranja);
  margin-bottom: 1.1rem;
}

/* La fecha de arranque va pegada al rotulo y no como elemento aparte: el
   hero ya tiene sus cuatro piezas de texto y una quinta lo satura. */
.hero .rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem .8rem;
}

.rotulo__fecha {
  color: var(--hueso);
  border: 1px solid color-mix(in srgb, var(--naranja) 45%, transparent);
  border-radius: 999px;
  padding: .38rem .8rem;
  line-height: 1;
}

.rotulo__fecha strong { color: var(--naranja); font-weight: 500; }

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.01em;
  line-height: 1;
  padding: .85rem 1.5rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--curva), transform .2s var(--curva), border-color .2s var(--curva);
}

.btn i { font-size: 1.05em; transition: transform .2s var(--curva); }

/* El boton es la pieza que tiene que ganar la pagina, asi que se le da
   volumen de verdad: un degradado corto del mismo naranja de marca, una luz
   arriba y una sombra abajo que simulan una pieza fisica, y una sombra
   tintada del propio naranja en lugar de negra, que es lo que lo despega del
   fondo sin convertirlo en un neon. */
.btn--primario {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--naranja-2) 0%, var(--naranja) 64%);
  color: var(--tinta-btn);
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .40),
    inset 0 -1px 0 rgb(0 0 0 / .20),
    0 10px 26px -10px color-mix(in srgb, var(--naranja) 80%, transparent),
    0 2px 6px rgb(0 0 0 / .40);
}

.btn--primario:hover {
  background: linear-gradient(180deg, #FFAB63 0%, var(--naranja-2) 64%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .50),
    inset 0 -1px 0 rgb(0 0 0 / .20),
    0 16px 34px -12px color-mix(in srgb, var(--naranja) 92%, transparent),
    0 3px 8px rgb(0 0 0 / .40);
}

.btn--primario:hover i { transform: translateX(3px); }

/* Al apretarlo se hunde. Sin esto el boton se siente una imagen y no un
   control que responde. */
.btn--primario:active {
  transform: translateY(0) scale(.985);
  box-shadow:
    inset 0 2px 5px rgb(0 0 0 / .28),
    0 4px 12px -6px color-mix(in srgb, var(--naranja) 70%, transparent);
}

/* Un brillo cruza el boton cada tantos segundos. Es lo que lo hace saltar a
   la vista en una pagina oscura, sobre todo cuando acaba de aparecer y la
   persona todavia esta mirando el video. */
.btn--primario::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    rgb(255 255 255 / .45) 50%,
    transparent 62%);
  transform: translateX(-130%);
  animation: destello 4.5s ease-in-out 1.5s infinite;
}

@keyframes destello {
  0%   { transform: translateX(-130%); }
  38%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}

.btn--fantasma {
  background: transparent;
  border-color: var(--linea);
  color: var(--hueso);
}

.btn--fantasma:hover { border-color: var(--naranja); color: var(--naranja); }

.btn--xl {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  padding: 1.15rem 2.1rem;
  width: 100%;
  max-width: 26rem;
}

/* ---------- Barra superior ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--negro) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}

/* La barra lleva solo el logo. Sin dato de cupos y sin boton: el unico
   trabajo del hero es el video, y un boton aca competia con el que
   aparece a los 4:30. */
.barra__rej {
  max-width: var(--max);
  margin-inline: auto;
  padding: .8rem var(--marco);
  display: flex;
  align-items: center;
  min-height: 64px;
}

.barra__logo { width: 132px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.75rem, 6vw, 5rem) var(--salto);
  text-align: center;
  overflow: hidden;
}

/* Dos manchas naranjas muy tenues detras del video. Le dan profundidad al
   negro y empujan la vista hacia el reproductor, que es el unico trabajo
   que tiene el hero. */
.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 90%;
  z-index: -1;
  pointer-events: none;
  filter: blur(90px);
  opacity: .5;
}

.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, var(--naranja) 0%, transparent 68%);
  animation: deriva 24s ease-in-out infinite;
}

.aurora i:nth-child(1) { width: 46vw; height: 46vw; top: 8%;  left: 12%; opacity: .34; }
.aurora i:nth-child(2) { width: 34vw; height: 34vw; top: 26%; right: 10%; opacity: .22; animation-delay: -11s; animation-duration: 30s; }

@keyframes deriva {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3%, 5%, 0) scale(1.1); }
}

.hero__centro {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__titulo {
  font-size: clamp(2.35rem, 1.15rem + 4.6vw, 4.15rem);
  font-weight: 800;
  letter-spacing: -.042em;
  max-width: 16ch;
}

/* El enfasis va en italica de la misma familia, no en otra tipografia.
   La italica de "dolares" no tiene descendentes, pero el interlineado
   igual se abre un punto para que nunca se corte la cola de una g o una j. */
.hero__titulo em {
  font-style: italic;
  color: var(--naranja);
  line-height: 1.1;
}

.hero__sub {
  margin-top: 1.35rem;
  max-width: 44ch;
  color: var(--hueso-2);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem);
}

/* La frase del programa va debajo del video, no en el hero: arriba ya estan
   la promesa, la prueba y la objecion, y una cuarta linea las apaga. */
.hero__pie {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  max-width: 58ch;
  color: var(--ceniza);
  font-size: .95rem;
  line-height: 1.6;
}

/* ---------- El reproductor ---------- */

.vsl {
  width: 100%;
  max-width: 46rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.vsl__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--negro-2);
  border: 1px solid var(--linea);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .9);
}

.vsl__marco > * { width: 100%; }

/* No hay tapa propia sobre el video. VTurb monta su propia portada con su
   boton de play, y cualquier capa nuestra encima la tapaba: el player no
   crea un <video> hasta que alguien le da play, asi que no habia forma
   fiable de saber cuando quitarla. */

/* ---------- Hueco del boton ---------- */

.hueco {
  width: 100%;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}

.hueco__aviso {
  font: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ceniza);
  border: 1px dashed var(--linea);
  border-radius: 999px;
  padding: .9rem 1.4rem;
  line-height: 1.4;
  text-align: center;
}

.hueco__caja {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}

.hueco__caja[hidden] { display: none; }

.hueco__caja.entra {
  animation: aparece .55s var(--curva) both;
}

@keyframes aparece {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hueco__nota {
  font-size: .875rem;
  color: var(--ceniza);
  max-width: 34ch;
  text-align: center;
  line-height: 1.5;
}

.hueco__nota strong { color: var(--naranja); }

/* ---------- Antes y despues ---------- */

.quiebre__par {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.quiebre__lado {
  border: 1px solid var(--linea);
  border-radius: var(--r-panel);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--negro-2);
}

.quiebre__lado--despues {
  border-color: color-mix(in srgb, var(--naranja) 32%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--naranja) 9%, transparent), transparent 62%),
    var(--negro-2);
}

.quiebre__et {
  font: var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ceniza);
  margin-bottom: 1rem;
}

.quiebre__lado--despues .quiebre__et { color: var(--naranja); }

.quiebre__lado h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); }
.quiebre__lado p { margin-top: .9rem; color: var(--hueso-2); font-size: .97rem; }

/* ---------- Para quien es ---------- */

.perfiles__par {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.perfiles__tit {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linea);
}

.perfiles__tit--si i { color: var(--naranja); }
.perfiles__tit--no i { color: var(--ceniza); }

.perfiles__lista { margin-top: 1.35rem; display: grid; gap: 1rem; }

.perfiles__lista li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--hueso-2);
  font-size: .97rem;
}

.perfiles__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 1px;
  background: var(--naranja);
}

.perfiles__tit--no + .perfiles__lista li::before { background: var(--ceniza); }

/* ---------- El temario ---------- */

.clases {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linea);
}

.clase {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--linea);
}

.clase__num {
  font: var(--mono);
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--naranja);
  padding-top: .35rem;
}

.clase__cuerpo h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }

.clase__cuerpo p {
  margin-top: .75rem;
  color: var(--hueso-2);
  max-width: var(--medida);
  font-size: .97rem;
}

/* Los cuatro datos logisticos, en columnas y sin puntos separadores. */
.temario__logis {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1.75rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.logis__et {
  font: var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ceniza);
  margin-bottom: .6rem;
}

.logis__v { font-size: .97rem; color: var(--hueso); line-height: 1.5; }

/* ---------- Cifras ---------- */

.cifras-sec { padding-block: 0; }

/* Son cuatro cifras, asi que las columnas van declaradas a mano: con
   auto-fit el navegador elige tres y la cuarta queda huerfana en una
   segunda fila. 1, despues 2x2, despues las cuatro en linea. */
.cifras {
  display: grid;
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-block: 1px solid var(--linea);
}

@media (min-width: 620px) {
  .cifras { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .cifras { grid-template-columns: repeat(4, 1fr); }
}

.cifra__n {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  letter-spacing: -.045em;
  color: var(--naranja);
}

.cifra__t {
  margin-top: .5rem;
  color: var(--ceniza);
  font-size: .9rem;
  line-height: 1.5;
  max-width: 22ch;
}

/* ---------- Quien te ensena ---------- */

.bio {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
}

@media (max-width: 860px) {
  .bio { grid-template-columns: 1fr; }
}

/* La foto es un apoyo, no la protagonista de la seccion: quien manda es el
   texto. Sin este tope se comia media pantalla, y en una columna sola
   llegaba a 564px de ancho. */
.bio__foto {
  margin: 0 auto;
  max-width: 280px;
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--negro-2);
}

/* Cuando las dos columnas se apilan, la foto se queda sola en una franja
   del ancho completo. Centrada no deja ese hueco a un costado. */
@media (max-width: 860px) {
  .bio__foto { max-width: 240px; }
}

.bio__foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.bio__cuerpo h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem); }

.bio__cuerpo p {
  margin-top: 1.2rem;
  color: var(--hueso-2);
  max-width: var(--medida);
}

.bio__respaldo {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem !important;
  font-size: .93rem;
  color: var(--hueso) !important;
}

.bio__respaldo i { color: var(--naranja); font-size: 1.15rem; flex: 0 0 auto; }

.bio__firma {
  font: var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--hueso);
  margin-top: 1.6rem !important;
}

/* Mismo panel que el resto de la pagina: borde de 1px entero y radio
   parejo. Nada de barra de color en un solo lado. */
.bio__nota {
  margin-top: 1.9rem !important;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--linea);
  background: var(--negro-2);
  border-radius: var(--r-chico);
  font-size: .93rem;
  color: var(--hueso-2) !important;
}

.bio__nota i { color: var(--naranja); margin-right: .35rem; }

/* ---------- Bonos ---------- */

.bento {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, 1fr);
}

/* El mockup no necesita todo el ancho de la pagina: a tamano completo
   competia con las tres tarjetas que explican los bonos, que son las que
   tienen que leerse. */
.bento__foto {
  margin: 0 auto;
  grid-column: 1 / -1;
  max-width: 680px;
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--linea);
}

.bento__celda {
  border: 1px solid var(--linea);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--negro-2);
}

.bento__celda--acento {
  border-color: color-mix(in srgb, var(--naranja) 32%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--naranja) 10%, transparent), transparent 62%),
    var(--negro-2);
}

.bento__icono { font-size: 1.5rem; color: var(--naranja); }

.bento__celda h3 { margin-top: 1.1rem; font-size: 1.15rem; }
.bento__celda p { margin-top: .7rem; color: var(--hueso-2); font-size: .93rem; }

@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
}

/* ---------- La comunidad ---------- */

/* Las publicaciones son capturas reales de Skool, y vienen con fondo claro.
   Se apilan a lo ancho de la columna de lectura, cada una dentro de un marco
   oscuro que las despega del fondo de la pagina. */
.voces__rej {
  display: grid;
  gap: 1.25rem;
  max-width: 52rem;
}

.voz {
  margin: 0;
  padding: .5rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-panel);
  background: var(--negro-2);
}

.voz img {
  width: 100%;
  border-radius: var(--r-chico);
}

/* En un celular la captura entera entraria al 20% de su tamano y el texto
   del post quedaria en unos 6px, ilegible. Debajo de 620px se le da un ancho
   minimo legible y se desliza dentro del marco. */
@media (max-width: 620px) {
  .voz {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* 33rem son 528px: el texto del post queda cerca de 10px, que se lee, y
     solo hay que deslizar unos 190px. A tamano natural habria que deslizar
     casi 700 y se veria un tercio de la captura por vez. */
  .voz img {
    width: 33rem;
    max-width: none;
  }
}

/* ---------- La oferta ---------- */

.oferta__panel {
  border: 1px solid color-mix(in srgb, var(--naranja) 26%, var(--linea));
  border-radius: var(--r-panel);
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--naranja) 9%, transparent), transparent 60%),
    var(--negro-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.oferta__panel h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); }

/* Siete lineas con una raya debajo de cada una es la lista mas aburrida
   que existe. Van en dos columnas y sin rayas. */
.incluye {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  width: 100%;
  display: grid;
  gap: .85rem clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  text-align: left;
}

.incluye li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .95rem;
  color: var(--hueso-2);
  line-height: 1.45;
}

.incluye i { color: var(--naranja); flex: 0 0 auto; margin-top: .2em; }

.precio {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}

.precio__ahora { display: flex; flex-direction: column; align-items: center; gap: .55rem; }

.precio__et {
  font: var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--naranja);
  border: 1px solid color-mix(in srgb, var(--naranja) 40%, transparent);
  border-radius: 999px;
  padding: .4rem .85rem;
}

.precio__n {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(2.6rem, 1.7rem + 3.6vw, 4rem);
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--hueso);
}

.precio__antes { font-size: .9rem; color: var(--ceniza); }
.precio__antes s { color: var(--ceniza); }

/* El pago en dos cuotas va pegado al precio y no en la letra chica: es la
   objecion que mas frena a alguien que quiere entrar y no tiene el monto
   entero hoy. */
.precio__cuotas {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: 1.1rem;
  max-width: 34ch;
  text-align: left;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--hueso-2);
  border-top: 1px solid var(--linea);
  padding-top: 1.1rem;
}

.precio__cuotas i { color: var(--naranja); font-size: 1.1rem; flex: 0 0 auto; margin-top: .1em; }

.oferta__panel .hueco { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

/* ---------- Preguntas ---------- */

.faq__lista { max-width: var(--medida); border-top: 1px solid var(--linea); }

.qa { border-bottom: 1px solid var(--linea); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.015em;
  list-style: none;
  transition: color .2s var(--curva);
}

.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--naranja); }

.qa summary i {
  flex: 0 0 auto;
  color: var(--naranja);
  transition: transform .3s var(--curva);
}

.qa[open] summary i { transform: rotate(45deg); }

/* La altura se anima con grid-template-rows, que si es animable,
   en lugar de height:auto, que no lo es. */
.qa__caja {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--curva);
}

.qa[open] .qa__caja { grid-template-rows: 1fr; }

.qa__texto { overflow: hidden; }

.qa__texto p {
  padding-bottom: 1.4rem;
  color: var(--hueso-2);
  font-size: .96rem;
}

/* ---------- Cierre ---------- */

.cierre {
  padding-block: var(--salto);
  border-top: 1px solid var(--linea);
  background:
    radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--naranja) 11%, transparent), transparent 70%),
    var(--negro);
}

.cierre__centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cierre h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.7vw, 3.2rem);
  max-width: 18ch;
}

.cierre__centro > p {
  margin-top: 1.25rem;
  max-width: 46ch;
  color: var(--hueso-2);
}

.cierre__logis {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}

.cierre__logis span {
  font: var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ceniza);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .5rem .9rem;
}

/* ---------- Barra fija ---------- */

.fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: color-mix(in srgb, var(--negro) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform .35s var(--curva), opacity .35s var(--curva);
}

.fija[hidden] { display: none; }

.fija.fuera {
  transform: translateY(105%);
  opacity: 0;
  pointer-events: none;
}

.fija__rej {
  max-width: var(--max);
  margin-inline: auto;
  padding: .8rem var(--marco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.fija__precio { font-size: .95rem; color: var(--ceniza); }
.fija__precio s { margin-right: .35rem; }
.fija__precio strong {
  color: var(--hueso);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -.03em;
}

@media (max-width: 560px) {
  .fija__precio { display: none; }
  .fija .btn { width: 100%; }
}

/* ---------- Pie ---------- */

.pie {
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(6rem, 10vw, 7rem);
  border-top: 1px solid var(--linea);
  background: var(--negro-2);
}

.pie__rej {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  align-items: start;
}

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

.pie__logo { width: 128px; opacity: .8; }

.pie__legal { display: grid; gap: .9rem; }

.pie__legal p {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ceniza);
  max-width: 62ch;
}

.pie__copy { color: var(--hueso-2) !important; }

/* =========================================================
   LO QUE SE ABRE AL LLEGAR AL MINUTO 4:30
   Las secciones de abajo llegan con hidden puesto por el JS. Cuando el
   video llega al minuto, se les quita y entran con esta animacion. Solo
   se anima la primera: si se movieran las diez a la vez, la pagina daria
   un salto largo justo cuando la persona esta mirando el video.
   ========================================================= */

[data-tras-video].se-abre {
  animation: se-abre .55s var(--curva) both;
}

[data-tras-video].se-abre ~ [data-tras-video].se-abre {
  animation: none;
}

@keyframes se-abre {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   APARICION AL HACER SCROLL
   El estado inicial lo pone el JS con la clase .js, asi que si el
   script no corre el contenido se ve igual en lugar de quedar invisible.
   ========================================================= */

.js [data-sube] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--curva), transform .7s var(--curva);
  transition-delay: var(--retardo, 0ms);
}

.js [data-sube].dentro {
  opacity: 1;
  transform: none;
}

/* =========================================================
   MOVIMIENTO REDUCIDO
   Se apaga todo: la deriva de la aurora, las apariciones y la
   transicion del acordeon. Nada queda invisible.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .aurora i { animation: none; }

  .js [data-sube],
  .js [data-sube].dentro {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hueco__caja.entra { animation: none; }

  [data-tras-video].se-abre { animation: none; }

  /* El destello del boton es decorativo y se repite sin parar: fuera. */
  .btn--primario::after { animation: none; display: none; }
  .btn--primario:hover { transform: none; }

  .qa__caja { transition: none; }

  .btn, .btn i, .fija, .qa summary, .qa summary i {
    transition: none;
  }
}