/* Página del curso Render IA — LESSIRE 2026.
   Clara, sobria y precisa: solo negro, blanco y grises neutros. Archivo (ancho expandido en títulos).
   Marca LESSIRE 2026 (02-marketing/identidad grafica/LESSIRE_2026): sin esquinas cortadas, logo solo con sus archivos.
   Teléfono Android primero; escritorio desde 860 px. Colores, letras y medidas: variables de abajo. */

:root {
  /* Color: negro, blanco y grises sin tinte (R = G = B). */
  --negro: #000000;
  --blanco: #ffffff;
  --fondo: #ffffff;          /* blanco de la marca */
  --papel: #ffffff;
  --gris-claro: #f4f4f4;
  --gris-linea: #d2d2d2;
  --gris-medio: #666666;     /* 5,7:1 sobre blanco */
  --gris-texto: #3d3d3d;

  /* Letra */
  --letra: "Archivo", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --ancho-titulo: 125%;      /* Archivo Expanded en títulos */
  --peso-titulo: 300;
  --t-micro: 0.6875rem;
  --t-chico: 0.8125rem;
  --t-base: 1rem;
  --t-medio: clamp(1.4rem, 5.6vw, 2rem);
  --t-titulo: clamp(1.75rem, 7vw, 3.25rem);

  /* Medidas */
  --margen: 20px;
  --nav: 64px;
  --barra: 76px;
  --barra-total: calc(var(--barra) + env(safe-area-inset-bottom, 0px));
  --ancho-lectura: 40rem;

  /* Movimiento */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-doble: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (min-width: 860px) {
  :root {
    --margen: 48px;
    --nav: 76px;
    --barra: 72px;
    --t-medio: clamp(1.6rem, 2.4vw, 2.2rem);
    --t-titulo: clamp(2.25rem, 4vw, 4rem);
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav);
  background: var(--fondo);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--letra);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--negro);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--negro); outline-offset: 3px; }

.salto {
  position: fixed; left: var(--margen); top: 8px; z-index: 200;
  padding: 10px 14px; background: var(--negro); color: var(--blanco);
  font-size: var(--t-chico); text-decoration: none;
  transform: translateY(-200%);
}
.salto:focus { transform: none; }

.titulo {
  font-weight: var(--peso-titulo);
  font-stretch: var(--ancho-titulo);
  font-size: var(--t-titulo);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.titulo-medio { font-size: var(--t-medio); line-height: 1.15; }
.etiqueta {
  font-size: var(--t-micro);
  font-stretch: var(--ancho-titulo);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-medio);
}
.nota { font-size: var(--t-chico); color: var(--gris-texto); max-width: var(--ancho-lectura); }

/* ---------- Botón ---------- */

.boton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 28px;
  border: 1px solid var(--negro); border-radius: 0;
  background: var(--negro); color: var(--blanco);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease), background-color 200ms ease-out, color 200ms ease-out;
}
.boton svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
  transition: transform 260ms var(--ease);
}
.boton:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: var(--blanco); color: var(--negro); }
  .boton:hover svg { transform: translateX(4px); }
}
.boton-ancho { width: 100%; }
button.boton:disabled { opacity: 0.6; cursor: progress; }

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

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  height: var(--nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margen);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease-out, border-color 300ms ease-out;
}
.nav { background: var(--fondo); border-bottom-color: var(--gris-linea); }
/* Sobre la portada: transparente y clara. Sobre las secciones oscuras: negra y clara (js/sitio.js pone la clase). */
html.nav-portada .nav { background: transparent; border-bottom-color: transparent; }
html.nav-oscura .nav { background: #000; border-bottom-color: rgba(255, 255, 255, 0.18); }
/* Logo: el archivo blanco de la marca sobre fondos oscuros (nunca un filtro). */
.nav-marca .logo-blanco { display: none; }
html.nav-portada .nav-marca .logo-negro, html.nav-oscura .nav-marca .logo-negro { display: none; }
html.nav-portada .nav-marca .logo-blanco, html.nav-oscura .nav-marca .logo-blanco { display: block; }
html.nav-portada .nav-saltar, html.nav-oscura .nav-saltar { color: var(--blanco); }
.nav-marca { display: block; line-height: 0; }
.nav-marca img { width: 132px; height: auto; }   /* mínimo permitido: 120 px */
.nav-saltar {
  font-size: var(--t-chico); font-weight: 500;
  text-decoration: none; color: var(--gris-texto);
  padding: 12px 0;
  border-bottom: 1px solid transparent;
  transition: opacity 250ms ease-out, border-color 200ms ease-out;
}
.nav-saltar.oculto { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .nav-saltar:hover { border-bottom-color: var(--negro); }
}

/* Iniciar sesión e Inscríbete, arriba a la derecha. Toman el color de la barra (negro o blanco). */
.nav-acciones { display: flex; align-items: center; gap: 18px; color: var(--negro); }
html.nav-portada .nav-acciones, html.nav-oscura .nav-acciones { color: var(--blanco); }
.nav-entrar {
  font-size: var(--t-chico); font-weight: 500; text-decoration: none; color: inherit;
  padding: 12px 0; border-bottom: 1px solid transparent; transition: border-color 200ms ease-out;
}
.nav-inscribir {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  border: 1px solid currentColor; color: inherit; text-decoration: none;
  font-size: var(--t-chico); font-weight: 500;
  transition: background-color 200ms ease-out, color 200ms ease-out, transform 160ms var(--ease);
}
.nav-inscribir:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .nav-entrar:hover { border-bottom-color: currentColor; }
  .nav-inscribir:hover { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
  html.nav-portada .nav-inscribir:hover, html.nav-oscura .nav-inscribir:hover { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }
}
@media (min-width: 860px) { .nav-acciones { gap: 28px; } .nav-inscribir { min-height: 42px; padding: 0 22px; } }

/* ---------- Curso: precio, pagos, preguntas ---------- */

.curso {
  position: relative; z-index: 1;
  background: var(--papel);
  padding: 72px var(--margen) 24px;
}
.curso-grilla { max-width: 78rem; margin: 0 auto; display: grid; gap: 72px; }
.curso-bloque { display: grid; gap: 20px; align-content: start; }
.curso-bloque .etiqueta { margin-bottom: -4px; }

.datos { border-top: 1px solid var(--negro); margin-top: 12px; }
.dato {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 16px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--gris-linea);
}
.dato dt { font-size: 0.875rem; color: var(--gris-medio); }
.dato dd { font-size: 1.0625rem; }
.dato-precio dd { font-size: 2rem; font-stretch: var(--ancho-titulo); font-weight: 300; line-height: 1; }

.pagos { display: flex; flex-wrap: wrap; gap: 10px; }
.pagos li { padding: 10px 18px; border: 1px solid var(--negro); font-size: 0.9375rem; }

.faq { border-top: 1px solid var(--negro); }
.faq details { border-bottom: 1px solid var(--gris-linea); }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 18px 40px 18px 0;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 1px; background: var(--negro);
  transition: transform 260ms var(--ease);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 0 20px; max-width: var(--ancho-lectura); color: var(--gris-texto); }

@media (min-width: 860px) {
  .curso { padding: 120px var(--margen) 48px; }
  .curso-grilla { grid-template-columns: repeat(12, 1fr); column-gap: 32px; row-gap: 96px; }
  .curso-faq { grid-column: 1 / 13; grid-template-columns: repeat(12, 1fr); column-gap: 32px; }
  .curso-faq .titulo { grid-column: 1 / 5; }
  .curso-faq .faq { grid-column: 5 / 13; }
  .curso-faq .faq-duda { grid-column: 5 / 13; }
}

/* ---------- Quién enseña: foto y tres datos (negro, antes del cierre) ---------- */

.wil {
  position: relative; z-index: 1;
  display: grid; gap: 32px;
  padding: 88px var(--margen) 0;
  background: #000; color: var(--blanco);
}
.wil-foto { margin: 0; overflow: hidden; aspect-ratio: 1; max-width: 34rem; }
.wil-foto img { width: 100%; height: 100%; object-fit: cover; }
.wil-texto { display: grid; gap: 20px; align-content: start; max-width: 36rem; }
.wil-nombre { font-size: var(--t-titulo); font-weight: var(--peso-titulo); font-stretch: var(--ancho-titulo); line-height: 1.05; }
.wil-frase { font-size: clamp(1.2rem, 4.8vw, 1.6rem); line-height: 1.35; text-wrap: pretty; }
.wil-datos { border-top: 1px solid rgba(255, 255, 255, 0.7); }
.wil-datos li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.78); }
@media (min-width: 860px) {
  .wil { grid-template-columns: repeat(12, 1fr); column-gap: 32px; padding-top: 160px; max-width: calc(78rem + var(--margen) * 2); margin: 0 auto; }
  .wil-foto { grid-column: 1 / 6; }
  .wil-texto { grid-column: 7 / 13; align-self: end; }
}
/* En pantallas anchas el negro llega de borde a borde aunque la sección tenga ancho máximo. */
.wil { box-shadow: 0 0 0 100vmax #000; clip-path: inset(0 -100vmax); }

/* ---------- Cierre: precio y botón grande para reservar ---------- */

.reserva {
  position: relative; z-index: 1;
  background: #000; color: var(--blanco);
  padding: 0 var(--margen);
}
.reserva-caja {
  max-width: 78rem; margin: 0 auto; padding: 96px 0 72px;
  display: grid; gap: 40px;
}
.reserva-titulo { font-size: var(--t-titulo); font-weight: var(--peso-titulo); font-stretch: var(--ancho-titulo); line-height: 1.05; text-wrap: balance; }
.reserva-precio { display: grid; gap: 12px; }
.reserva-monto {
  font-size: clamp(5.5rem, 30vw, 15rem); font-weight: 300; font-stretch: var(--ancho-titulo);
  line-height: 0.82; letter-spacing: -0.04em;
}
.reserva-nota { font-size: 1.0625rem; color: rgba(255, 255, 255, 0.78); }
/* El botón grande del final: blanco sobre negro, a todo lo ancho. */
.boton-final {
  width: 100%; min-height: 96px; padding: 0 28px; justify-content: space-between;
  background: var(--blanco); color: var(--negro); border-color: var(--blanco);
  font-size: clamp(1.5rem, 6.4vw, 3rem); font-weight: 300; font-stretch: var(--ancho-titulo); letter-spacing: 0;
}
.boton-final svg { width: clamp(28px, 6vw, 48px); height: auto; stroke-width: 1.2; }
@media (hover: hover) and (pointer: fine) {
  .boton-final:hover { background: #000; color: var(--blanco); }
  .boton-final:hover svg { transform: translateX(10px); }
}
.reserva-pie { display: grid; gap: 8px; }
.reserva-texto { margin: 0; color: rgba(255, 255, 255, 0.85); max-width: 32rem; }
.reserva-horario { margin: 0; font-size: var(--t-chico); color: rgba(255, 255, 255, 0.62); }
@media (min-width: 860px) {
  .reserva-caja { padding: 160px 0 96px; gap: 48px; }
  .reserva-precio { grid-template-columns: auto 1fr; align-items: end; column-gap: 40px; }
  .reserva-nota { max-width: 16rem; padding-bottom: 12px; }
  .boton-final { min-height: 150px; padding: 0 48px; }
  .reserva-pie { grid-template-columns: 1fr auto; align-items: baseline; }
}
.reserva form { display: grid; gap: 26px; }
.campo { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 4px; }
.campo label, .campo legend {
  padding: 0;
  font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-medio);
}
.campo input[type="text"], .campo input[type="tel"] {
  width: 100%; min-height: 48px; padding: 8px 0;
  border: 0; border-bottom: 1px solid var(--negro); border-radius: 0; background: transparent;
  font-size: 1.0625rem;  /* 17 px: el teléfono no hace zoom al enfocar */
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.campo input[type="text"]:focus, .campo input[type="tel"]:focus {
  outline: none; box-shadow: 0 1px 0 0 var(--negro);
}
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; inset: 0; }
.opcion span {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--negro);
  font-size: var(--t-chico); letter-spacing: 0.1em; text-transform: uppercase;
  transition: background-color 200ms ease-out, color 200ms ease-out, transform 160ms var(--ease);
}
.opcion:active span { transform: scale(0.97); }
.opcion input:checked + span { background: var(--negro); color: var(--blanco); }
.opcion input:focus-visible + span { outline: 2px solid var(--negro); outline-offset: 3px; }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[data-aviso] { min-height: 1.4em; font-size: var(--t-chico); color: var(--negro); font-weight: 500; }
[data-aviso]:empty { min-height: 0; }
.consentimiento { font-size: var(--t-micro); color: var(--gris-medio); letter-spacing: 0.02em; }

.pie {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 78rem; margin: 72px auto 0;
  padding: 24px 0 calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--gris-linea);
  font-size: var(--t-chico); color: var(--gris-medio);
}
.pie img { width: 132px; height: auto; }

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

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--barra-total);
  padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--fondo); border-top: 1px solid var(--gris-linea);
  transform: translateY(100%); visibility: hidden;
  transition: transform 450ms var(--ease), visibility 0s linear 450ms;
}
.barra.visible { transform: none; visibility: visible; transition: transform 450ms var(--ease), visibility 0s; }
.barra-texto { display: none; font-size: var(--t-chico); color: var(--gris-texto); }
.boton-barra { flex: 1; min-height: 100%; }
@media (min-width: 860px) {
  .barra-texto { display: block; }
  .boton-barra { flex: none; min-width: 300px; }
}

/* ---------- Cuenta regresiva ---------- */

.regresiva[hidden] { display: none; }
.regresiva { display: flex; gap: 22px; margin: 0; }
.reg-uni { display: grid; gap: 4px; }
.reg-num {
  display: block; overflow: hidden;
  font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 300; font-stretch: var(--ancho-titulo);
  line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.reg-et { font-size: var(--t-micro); color: var(--gris-texto); }

.faq-duda { margin: 20px 0 0; font-size: var(--t-chico); }
.faq-duda a { text-underline-offset: 4px; }



/* ---------- Carga: objeto abstracto, logo y porcentaje ---------- */

#carga { display: none; }
.js #carga {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: #000;
  transition: background-color 700ms var(--ease-doble), visibility 0s linear 900ms;
}
.carga-objeto { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms ease-out; }
.carga-objeto.visible { opacity: 1; }
.carga-logo { position: absolute; z-index: 1; left: var(--margen); bottom: calc(var(--margen) + 4px); width: 148px; height: auto; }
.carga-pct {
  position: absolute; z-index: 1; right: var(--margen); bottom: var(--margen);
  font-size: 1rem; font-weight: 300; font-stretch: var(--ancho-titulo); color: var(--blanco);
  font-variant-numeric: tabular-nums;
}
html.cargando { overflow: hidden; }
html.cargando .nav { opacity: 0; }
/* Al terminar: el objeto ya formó el símbolo y la carga entera se funde sobre la portada (js/sitio.js). */
html.abriendo #carga { opacity: 0; transition: opacity 900ms var(--ease-doble); }
.nav { transition: background-color 300ms ease-out, border-color 300ms ease-out, opacity 600ms ease-out; }

/* ---------- Portada: capas con profundidad ---------- */

.portada { position: relative; height: 210vh; height: 210svh; }
.portada-escena {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: #000;
}
.portada-cielo {
  position: absolute; inset: -10% 0 0;
  background: linear-gradient(180deg, #000 0%, #262626 26%, #6b6b6b 52%, #ababab 72%, #bbb 100%);
  transform: translate3d(0, calc(var(--e, 0) * -4%), 0);
}
.portada-capa {
  position: absolute; left: 50%; bottom: 0;
  width: max(100%, calc(56svh * 2000 / 848)); aspect-ratio: 2000 / 848;
  transform: translate3d(-50%, 0, 0) scale(calc(1 + var(--e, 0) * 0.2));   /* crece desde la base: nunca deja hueco abajo */
  transform-origin: 50% 100%;
  will-change: transform;
}
.portada-capa img { width: 100%; height: 100%; display: block; }
/* De día a noche: apenas empiezas a bajar, las dos capas y el cielo se funden despacio en la versión de noche. */
.portada-capa .de-noche { position: absolute; inset: 0; opacity: 0; transition: opacity 2200ms cubic-bezier(0.45, 0, 0.55, 1); }
.portada.noche .de-noche { opacity: 1; }
.portada-cielo::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity 2200ms cubic-bezier(0.45, 0, 0.55, 1); }
.portada.noche .portada-cielo::after { opacity: 0.6; }

/* Cabeza de la portada: el título y la promesa en blanco, sobre el cielo (la zona tranquila del render). */
.portada-cabeza {
  position: absolute; left: var(--margen); right: var(--margen); top: calc(var(--nav) + 18px);
  color: var(--blanco);
  transform: translate3d(0, calc(var(--e, 0) * -30px), 0);
  opacity: calc(1 - var(--e, 0) * 2.2);
}
.portada-titulo {
  font-size: clamp(2.6rem, 12.5vw, 4.6rem); font-weight: 300; font-stretch: var(--ancho-titulo);
  line-height: 0.95; letter-spacing: 0.01em; white-space: nowrap;
}
.portada-promesa {
  margin: 16px 0 0; max-width: 18.5rem; text-wrap: balance;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.35; letter-spacing: 0;
  color: var(--blanco);
}
/* Mientras está la carga, el título, la promesa y la fecha esperan; al fundirse entran uno tras otro. */
html.cargando .portada-titulo, html.abriendo:not(.abierta) .portada-titulo,
html.cargando .portada-promesa, html.abriendo:not(.abierta) .portada-promesa,
html.cargando .portada-tarjeta, html.abriendo:not(.abierta) .portada-tarjeta { opacity: 0; }
@keyframes entra { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
html.abierta .portada-titulo { animation: entra 800ms var(--ease) 60ms backwards; }
html.abierta .portada-promesa { animation: entra 900ms var(--ease) 260ms backwards; }
html.abierta .portada-tarjeta { animation: entra 900ms var(--ease) 420ms backwards; }
.portada-tarjeta {
  position: absolute; left: var(--margen); right: var(--margen); bottom: 18px; background: var(--blanco);
  display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 14px; row-gap: 8px; padding: 14px 14px 14px 16px;
  transform: translate3d(0, calc(var(--e, 0) * 60px), 0);
  opacity: calc(1 - var(--e, 0) * 2);
}
.portada-fecha { font-size: var(--t-chico); font-weight: 500; }
.portada-fecha { grid-column: 1 / -1; }
.portada-tarjeta .regresiva { gap: 14px; }
.portada-tarjeta .reg-num { font-size: 1.35rem; }
.portada-tarjeta .boton { min-height: 46px; padding: 0 14px; gap: 8px; font-size: 0.8125rem; white-space: nowrap; }


@media (min-width: 860px) {
  .portada-capa { width: max(100%, calc(62svh * 2000 / 848)); }
  .portada-cabeza { top: calc(var(--nav) + 32px); }
  .portada-titulo { font-size: clamp(3.6rem, 6.4vw, 5.4rem); }
  .portada-promesa { max-width: 22rem; font-size: 1.25rem; margin-top: 22px; }
  .portada-tarjeta { left: var(--margen); right: auto; bottom: 28px; width: 400px; padding: 18px 18px 18px 20px; }
}

/* ---------- Qué es el curso: panel oscuro que sube sobre la portada ---------- */

.manifiesto {
  position: relative; z-index: 2;
  margin-top: -70svh;
  padding: 96px var(--margen) 88px;
  background: #000; color: var(--blanco);
  /* esquina superior izquierda escalonada, como la de Likova */
  clip-path: polygon(0 64px, 46% 64px, 46% 0, 100% 0, 100% 100%, 0 100%);
}
.etiqueta-clara { color: rgba(255, 255, 255, 0.55); }
.manifiesto-texto {
  margin-top: 26px; max-width: 64rem;
  font-size: clamp(1.45rem, 6.2vw, 3.1rem); font-weight: 400; font-stretch: 108%;
  line-height: 1.12; text-transform: uppercase; letter-spacing: -0.005em;
}
.sangria { display: inline-block; width: 22%; }
.manifiesto-objeto { position: relative; height: 62svh; margin: 8px calc(var(--margen) * -1) 0; }
.manifiesto-objeto canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.manifiesto-pie { display: grid; gap: 28px; max-width: 78rem; margin: 0 auto; }
.manifiesto .texto-claro { color: rgba(255, 255, 255, 0.78); }
@media (min-width: 860px) {
  .manifiesto { padding: 150px var(--margen) 120px; clip-path: polygon(0 90px, 38% 90px, 38% 0, 100% 0, 100% 100%, 0 100%); }
  .manifiesto-texto { margin-left: 18vw; }
  .manifiesto-objeto { height: 70svh; }
  .manifiesto-pie { grid-template-columns: repeat(12, 1fr); column-gap: 32px; }
  .manifiesto-pie .texto { grid-column: 1 / 6; }
}

/* ---------- Apariciones al bajar (texto que sube, imágenes que se descubren) ---------- */

.anima .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 900ms var(--ease), transform 1100ms var(--ease); }
.anima .rv.visto { opacity: 1; transform: none; }
.anima .revela { clip-path: inset(100% 0 0 0); transition: clip-path 1300ms var(--ease-doble); }
.anima .revela.visto { clip-path: inset(0 0 0 0); }
.revela img, .revela video { transform: scale(calc(1.14 - var(--p, 0) * 0.14)); transform-origin: 50% 50%; }

/* Texto corrido (panel oscuro) */
.texto { color: var(--gris-texto); max-width: var(--ancho-lectura); text-wrap: pretty; }

/* ---------- Qué necesitas saber antes: dos palabras grandes ---------- */
/* SketchUp entra desde la izquierda, en líneas (el modelo); Photoshop desde la derecha, macizo (la imagen terminada).
   --a (0 a 1) lo pone js/sitio.js; sin JavaScript se ve todo quieto y completo. */
.antes { position: relative; background: var(--blanco); }
.anima .antes { height: 240svh; }
.antes-escena {
  display: flex; flex-direction: column; justify-content: center; gap: 7svh;
  min-height: 100svh; overflow: hidden;
  padding: calc(var(--nav) + 24px) var(--margen) calc(var(--barra-total) + 24px);
}
.anima .antes-escena { position: sticky; top: 0; height: 100svh; }
.antes-titulo { font-size: var(--t-medio); font-weight: var(--peso-titulo); font-stretch: var(--ancho-titulo); line-height: 1.1; }
.antes-lista { display: grid; gap: 5svh; }
.antes-fila { display: grid; gap: 10px; }
.antes-fila-1 { --k: clamp(0, calc(var(--a, 1) * 2.4), 1); justify-items: start; }
.antes-fila-2 { --k: clamp(0, calc(var(--a, 1) * 2.4 - 0.95), 1); justify-items: end; text-align: right; }
.antes-palabra {
  font-size: min(13.2vw, 22svh); font-weight: 300; font-stretch: var(--ancho-titulo);
  line-height: 0.95; letter-spacing: -0.02em; white-space: nowrap;
  opacity: var(--k);
}
.antes-lineas { color: transparent; -webkit-text-stroke: 1.2px var(--negro); }
.antes-fila-1 .antes-palabra { transform: translate3d(calc((1 - var(--k)) * (1 - var(--k)) * -50vw), 0, 0); }
.antes-fila-2 .antes-palabra { transform: translate3d(calc((1 - var(--k)) * (1 - var(--k)) * 50vw), 0, 0); }
.antes-desc {
  margin: 0; font-size: 1.0625rem; color: var(--gris-texto);
  opacity: clamp(0, calc(var(--k) * 2.5 - 1.5), 1);
}
/* Logo de cada programa, negro sólido, encima de su palabra (la palabra en líneas lo dejaría invisible: fill propio). */
.antes-logo { display: block; width: clamp(34px, 0.42em, 72px); height: auto; margin-bottom: 0.18em; fill: var(--negro); }
.antes-fila-2 .antes-logo { margin-left: auto; }
/* Cuentas que necesitas para el curso: entran al final de la escena. */
.antes-cuentas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding-top: 3svh; border-top: 1px solid var(--gris-linea);
  opacity: clamp(0, calc(var(--a, 1) * 2.4 - 1.7), 1);
}
.antes-cuentas-texto { margin: 0; font-size: 1.0625rem; color: var(--gris-texto); }
.antes-cuentas-lista { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.antes-cuentas-lista li { display: inline-flex; align-items: center; gap: 10px; font-size: 1.375rem; font-weight: 400; font-stretch: var(--ancho-titulo); }
.antes-logo-chico { width: 28px; height: 28px; fill: var(--negro); flex: none; }
@media (min-width: 860px) {
  .antes-desc { font-size: 1.25rem; }
  .antes-cuentas-texto { font-size: 1.25rem; }
  .antes-cuentas-lista li { font-size: 1.75rem; }
  .antes-logo-chico { width: 34px; height: 34px; }
}

/* ---------- Temario: 4 semanas, 8 clases ---------- */
/* Cada semana es una escena a pantalla completa. Primero se ve el render solo; cuando la escena llena la pantalla,
   al rato y sin tocar nada, el render se oscurece un poco y aparecen solas las letras blancas
   (js/sitio.js pone la clase .con-texto). Sin JavaScript se ve todo de una vez. */

.temario { background: #000; color: var(--blanco); padding: 0; }
.temario-cabeza { display: grid; gap: 12px; padding: 88px var(--margen) 56px; max-width: 78rem; margin: 0 auto; }
.semana { position: relative; }
.anima .semana { height: 200svh; }
.semana-escena {
  position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000;
}
.anima .semana-escena { position: sticky; top: 0; }
.semana-imagen { position: absolute; inset: 0; margin: 0; background: #000; overflow: hidden; }
.semana-imagen img, .semana-imagen video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transform: scale(1.06); transform-origin: 50% 50%;
  transition: transform 2600ms var(--ease);
}
.con-texto .semana-imagen img, .con-texto .semana-imagen video { transform: scale(1); }
.semana-imagen figcaption {
  position: absolute; left: var(--margen); bottom: calc(var(--barra-total) + 14px); z-index: 2;
  font-size: 0.875rem; color: rgba(255, 255, 255, 0.9);
  transition: opacity 500ms ease-out;
}
.semana-imagen.pendiente {
  background-color: #000;
  background-image: linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 48px 48px;
}
.semana-imagen.pendiente::after {
  content: attr(data-etiqueta) " · pendiente de Wil";
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  padding: 8px 12px; background: var(--blanco); color: var(--negro); white-space: nowrap;
  font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase;
}
/* Capa oscura tenue: entra cuando ya viste el render completo */
.semana-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.4) 100%);
  opacity: 1;
}
.anima .semana-velo { opacity: 0; transition: opacity 1400ms ease-out 150ms; }
.anima .con-texto .semana-velo { opacity: 1; }
.anima .con-texto .semana-imagen figcaption { opacity: 0; }
.semana-texto {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: calc(var(--nav) + 16px) var(--margen) calc(var(--barra-total) + 20px);
  overflow-y: auto; overscroll-behavior: contain;
}
/* Las letras entran una tras otra: título, frase y clases. */
.anima .semana-texto > * {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity 900ms var(--ease), transform 1100ms var(--ease);
}
.anima .con-texto .semana-texto > * { opacity: 1; transform: none; }
.anima .con-texto .semana-texto > :nth-child(1) { transition-delay: 450ms; }
.anima .con-texto .semana-texto > :nth-child(2) { transition-delay: 650ms; }
.anima .con-texto .semana-texto > :nth-child(3) { transition-delay: 850ms; }
.semana-titulo { text-wrap: balance; font-size: clamp(2.1rem, 9vw, 3.4rem); font-weight: var(--peso-titulo); font-stretch: var(--ancho-titulo); line-height: 1.02; }
.semana-frase { max-width: 30rem; font-size: 1.0625rem; line-height: 1.4; color: rgba(255, 255, 255, 0.88); text-wrap: balance; }

.clases { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.7); max-width: 38rem; }
.clases details { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.clases summary {
  position: relative; list-style: none; cursor: pointer;
  display: flex; gap: 14px; align-items: baseline; padding: 13px 36px 13px 0;
  -webkit-tap-highlight-color: transparent;
}
.clases summary::-webkit-details-marker { display: none; }
.clases summary::before, .clases summary::after {
  content: ""; position: absolute; right: 4px; top: 22px; width: 14px; height: 1px; background: var(--blanco);
}
.clases summary::after { transform: rotate(90deg); }
.clases details[open] summary::after { transform: none; }
.clase-num { flex: none; font-size: 0.875rem; color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; }
.clase-titulo { font-size: 1rem; font-weight: 500; line-height: 1.3; }
.clases details p { padding: 0 0 14px; font-size: 0.9375rem; line-height: 1.45; color: rgba(255, 255, 255, 0.8); }
.clases details p strong { font-weight: 500; color: var(--blanco); }
.clases details p span { color: rgba(255, 255, 255, 0.62); margin: 0 2px 0 2px; }

@media (min-width: 860px) {
  .temario-cabeza { padding: 140px var(--margen) 80px; }
  .semana-texto { max-width: 44rem; padding-bottom: calc(var(--barra-total) + 48px); }
  .semana-velo { background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.12) 100%); }
}

.dato-nota { display: block; margin-top: 8px; font-size: 0.875rem; font-stretch: 100%; font-weight: 400; color: var(--gris-medio); }

/* ---------- La maqueta: oscura, como en Likova ---------- */

/* La maqueta queda fija atrás y gira sola; encima suben el precio y los medios de pago, en blanco. */
.maqueta { position: relative; background: #000; color: var(--blanco); }
.maqueta-fija { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.maqueta-escena { position: absolute; inset: 0; }
.maqueta-escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.maqueta-fija-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 600ms ease-out; }
.maqueta-escena.en-3d .maqueta-fija-img { opacity: 0; }
/* Capa oscura tenue: entra cuando sube el precio, para que las letras se lean sin tapar la maqueta. */
.maqueta-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0; transition: opacity 1000ms ease-out;
}
.maqueta.con-precio .maqueta-velo { opacity: 1; }
.maqueta-contenido {
  position: relative; z-index: 2;
  margin-top: -100vh; margin-top: -100svh;
  padding: 100svh var(--margen) calc(var(--barra-total) + 28px);
}
.precio { display: grid; gap: 64px; max-width: 34rem; padding-bottom: 45svh; }
.precio-bloque { display: grid; gap: 20px; align-content: start; }
.maqueta .datos { border-top-color: var(--blanco); }
.maqueta .dato { border-bottom-color: rgba(255, 255, 255, 0.22); }
.maqueta .dato dt, .maqueta .dato-nota { color: rgba(255, 255, 255, 0.66); }
.maqueta .dato-precio dd { font-size: 3rem; }
.maqueta .pagos li { border-color: rgba(255, 255, 255, 0.8); }
.maqueta .nota { color: rgba(255, 255, 255, 0.78); }
.maqueta-pie { font-size: var(--t-chico); color: rgba(255, 255, 255, 0.62); }
@media (min-width: 860px) {
  .maqueta-velo { background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0) 72%); }
  .maqueta .dato-precio dd { font-size: 3.6rem; }
}
/* Mientras la maqueta oscura ocupa la pantalla, la barra de abajo pasa a negro. */
.nav img, .nav-saltar { transition: filter 300ms ease-out, color 300ms ease-out; }
html.en-maqueta .barra { background: #000; border-top-color: rgba(255, 255, 255, 0.18); }
html.en-maqueta .barra-texto { color: rgba(255, 255, 255, 0.7); }
html.en-maqueta .boton-barra { background: var(--blanco); color: var(--negro); border-color: var(--blanco); }

@media (prefers-reduced-motion: reduce) {
  .boton, .boton svg, .barra, .barra.visible, .nav img, .nav-saltar { transition: none; }
}