/* =========================================================
   La Iluminaria — estilos
   ETAPA ACTUAL: solo base. Los bloques se visten uno a uno.
   ========================================================= */

/* ---------- Reset mínimo -------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* El WordPress usaba `overflow-x: hidden`. Aquí `clip` hace lo mismo —cortar
   el desbordamiento horizontal— pero sin convertir el elemento en contenedor
   de scroll, que es lo que puede romper `position: sticky` en los
   descendientes. Y el header es sticky. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--crema);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: var(--linea-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure, blockquote, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

a { color: inherit; }

button, input {
  font: inherit;
  color: inherit;
}

/* ---------- Foco visible en todo -------------------------- */
:focus-visible {
  outline: 2px solid var(--fuego);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Utilidades ------------------------------------ */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Honeypot: fuera de pantalla, NUNCA display:none
   (los bots detectan display:none y no lo rellenan). */
.honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.saltar {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: var(--e-1) var(--e-2);
  background: var(--negro);
  color: var(--crema);
}
.saltar:focus {
  left: var(--e-2);
  top: var(--e-2);
}

/* =========================================================
   HEADER STICKY
   Tres zonas: ESCUCHAR · logotipo · SUSCRIBIRME.
   El grid de 3 columnas iguales mantiene el logo ópticamente
   centrado aunque los botones laterales midan distinto.
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--negro);
}

.header__interior {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--alto-header);
  padding-inline: clamp(var(--e-2), 4vw, var(--e-4));
  margin-inline: auto;
  max-width: var(--ancho-contenido);
}

.header__logo {
  justify-self: center;
  display: block;
  line-height: 0;
}
.header__logo img {
  width: clamp(120px, 16vw, 168px);
}

/* ---------- Botón ESCUCHAR ---------- */
.boton-audio {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--e-1) 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--crema);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.boton-audio__icono {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: var(--fuego);
}

/* Un icono u otro según el estado real del audio */
.boton-audio__icono--pausa { display: none; }
.boton-audio[aria-pressed="true"] .boton-audio__icono--play { display: none; }
.boton-audio[aria-pressed="true"] .boton-audio__icono--pausa { display: block; }

/* ---------- Botón SUSCRIBIRME ---------- */
.boton-suscribirme {
  justify-self: end;
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--crema-borde);
  border-radius: 4px;
  background: var(--negro);
  color: var(--crema-borde);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.boton-suscribirme:hover,
.boton-suscribirme:focus-visible {
  background: var(--crema-borde);
  color: var(--negro);
}

@media (prefers-reduced-motion: reduce) {
  .boton-suscribirme { transition: none; }
}

@media (max-width: 480px) {
  .boton-audio__texto { font-size: 11px; }
  .boton-suscribirme { padding: 5px 8px; font-size: 11px; }
}

/* =========================================================
   HERO DE VÍDEO
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--e-4) var(--e-3) var(--e-6);
  text-align: center;
  overflow: hidden;
}

/* --- Capa de medios: poster de fondo + vídeo encima --- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Color de respaldo bajo el poster: el negro de la hoguera, no el del
     canvas, para no introducir un gris más claro si el poster tarda. */
  background-color: var(--negro-hoguera);
  /* El mismo fichero que el atributo `poster` del vídeo, a propósito: con
     `image-set` el CSS pedía el .webp y el vídeo el .jpg, y se descargaban
     los dos (51 KB para enseñar una sola imagen). El .jpg es el que
     entienden todos los navegadores en el atributo `poster`. */
  background-image: url('../assets/video/hero-poster.jpg');
  background-size: cover;
  background-position: center;
}

.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Aparece cuando el navegador ya tiene fotogramas, para que no
     haya un parpadeo entre el poster y el primer frame. */
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.hero__media video[data-listo] { opacity: 1; }

/* Sin velo, como en producción. Un velo con el color del canvas (#161616)
   ACLARA los negros del vídeo en vez de oscurecerlos: medido, subía la
   banda superior de 7,7 a 15,6 mientras la capa Chispa que viene debajo
   está en 11,8. Eso era la costura grisácea al pasar del hero al relato.
   El vídeo tal cual (7,7) ya es más oscuro que la Chispa, así que empalman
   solos. Si alguna vez hiciera falta oscurecer para legibilidad, el velo
   tiene que ser negro puro —rgba(0,0,0,…)—, nunca del color del canvas. */

@media (prefers-reduced-motion: reduce) {
  .hero__media video { transition: none; }
}

/* --- Poster vertical en móvil --- */
@media (max-width: 767px) {
  .hero__media {
    background-image: url('../assets/video/hero-poster-movil.jpg');
  }
}

/* --- Contenido --- */
.hero__contenido {
  position: relative;
  z-index: var(--z-contenido);
  width: 100%;
  /* 38rem y no 34: el subtítulo necesita 560px para caber en una sola
     línea, que es como se ve en producción. El formulario mantiene su
     propio máximo de 500px. */
  max-width: 38rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
}

.hero__marca {
  margin: 0;
  line-height: 0;
}
.hero__marca img {
  width: clamp(210px, 26vw, 320px);
}

/* --- Subtítulo con la pincelada --- */
.hero__subtitulo {
  position: relative;
  z-index: 0;
  margin-block: var(--e-1) var(--e-2);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.3;
  color: #f7f4f0;
}

.hero__subtitulo::before {
  content: '';
  position: absolute;
  inset: -4px -28px;
  z-index: -1;
  background: var(--fuego);
  opacity: 0.75;
  transform: rotate(-0.5deg);
  clip-path: inset(0 100% 0 0);
  animation: pincelada var(--t-pincelada) 0.5s ease-in-out forwards;
}

@keyframes pincelada {
  to { clip-path: inset(0 0% 0 0); }
}

/* Con movimiento reducido la pincelada no se dibuja: aparece ya pintada */
@media (prefers-reduced-motion: reduce) {
  .hero__subtitulo::before {
    animation: none;
    clip-path: inset(0 0% 0 0);
  }
}

@media (max-width: 767px) {
  .hero__subtitulo {
    font-size: 13px;
    white-space: normal;
  }
  .hero__subtitulo::before { inset: -4px -16px; }
}

/* --- Promesas bajo el formulario --- */
.hero__promesas {
  margin-top: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--crema);
  text-align: center;   /* el formulario alinea a la izquierda; estas van centradas */
}

/* --- Flecha --- */
.hero__flecha {
  position: relative;
  z-index: var(--z-contenido);
  margin-top: var(--e-4);
  display: block;
  width: 28px;
  height: 28px;
  color: var(--crema);
}
.hero__flecha span {
  display: block;
  width: 14px;
  height: 14px;
  margin-inline: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: flecha 2s ease-in-out infinite;
}

@keyframes flecha {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__flecha span { animation: none; opacity: 0.8; }
}

/* --- Degradado de cierre ---
   Funde a --negro-hoguera (#0b0b0b) y no al --negro del canvas: lo que
   aparece justo debajo del hero no es el canvas, son las capas fijas del
   storytelling, y el negro real de la primera (Chispa) está medido en
   #0c0c0c en escritorio y #0b0b0b en móvil. El WordPress ya fundía a
   #0b0b0b: no era un descuido, era el color que empalma. */
.hero__cierre {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--negro-hoguera));
}

/* =========================================================
   FORMULARIO (medidas tomadas de producción)
   ========================================================= */
.formulario {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.formulario__campo { display: flex; }

/* En escritorio el botón va DENTRO del campo de email, encajado a 3px
   del borde. Por eso la fila es el contexto de posicionamiento y el
   input reserva sitio con un padding derecho generoso. */
.formulario__fila {
  position: relative;
  display: flex;
}

.formulario__texto {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 44px;
  padding-inline: 16px;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  font-size: 14px;
}
.formulario__texto::placeholder { color: #757575; }

.formulario__fila .formulario__texto { padding-right: 130px; }

.formulario__enviar {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  padding-inline: 40px;
  border: 0;
  border-radius: 4px;
  /* Fuego más profundo que el acento de marca: el `--fuego` con texto
     blanco a este tamaño da un contraste de 3,17 y AA exige 4,5. */
  background: var(--fuego-boton);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}
.formulario__enviar:hover,
.formulario__enviar:focus-visible { background: var(--fuego-boton-hover); }

.formulario__consentimiento {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--crema);
}
.formulario__consentimiento input { accent-color: var(--fuego); flex-shrink: 0; }
.formulario__consentimiento a { color: var(--crema); text-decoration: underline; }

.formulario__estado {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  padding: 12px 16px;
  border-radius: 4px;
  border-left: 3px solid var(--fuego);
  background: rgba(255, 85, 67, 0.15);
  color: var(--crema);
}
.formulario__estado[data-error] {
  border-left-color: var(--fuego-alt);
  background: rgba(238, 64, 66, 0.1);
}
.formulario__estado:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .formulario__enviar { transition: none; }
}

/* --- Móvil: todo apilado y a lo ancho, como en producción ---
   16px en los inputs es deliberado: por debajo de eso, iOS hace zoom
   automático al enfocar el campo. */
@media (max-width: 767px) {
  .formulario { max-width: 100%; }
  .formulario__fila { flex-direction: column; gap: 8px; }
  .formulario__texto,
  .formulario__fila .formulario__texto {
    /* flex:none es imprescindible aquí: al pasar la fila a columna, el
       flex:1 heredado repartiría ALTURA con flex-basis:0 y aplastaría el
       campo de email por debajo de sus 35px. */
    flex: none;
    width: 100%;
    height: 35px;
    min-height: 35px;
    padding-inline: 16px;
    font-size: 16px;
  }
  .formulario__enviar {
    position: static;
    width: 100%;
    height: 35px;
    padding-inline: 20px;
    font-size: 13px;
  }
  .formulario__estado { padding: 10px 16px; }
}

/* =========================================================
   PÁGINA 404
   ========================================================= */
.pagina-error {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-3);
  text-align: center;
}

.pagina-error__marca {
  width: min(280px, 70vw);
  height: auto;
  margin-bottom: var(--e-3);
}

.pagina-error__titulo {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--crema);
}

.pagina-error__texto {
  max-width: 30rem;
  font-size: var(--t-sm);
  font-weight: 300;
  color: var(--crema);
}

.pagina-error__enlace {
  margin-top: var(--e-2);
  padding: 10px 22px;
  border: 1px solid var(--crema-borde);
  border-radius: 4px;
  color: var(--crema-borde);
  font-size: var(--t-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.pagina-error__enlace:hover,
.pagina-error__enlace:focus-visible {
  background: var(--crema-borde);
  color: var(--negro);
}

@media (prefers-reduced-motion: reduce) {
  .pagina-error__enlace { transition: none; }
}

/* =========================================================
   SCROLL STORYTELLING — las 4 capas de fondo
   Capas fijas a pantalla completa detrás de todo el documento.
   Solo cambia la opacidad: la activa a 1, las demás a 0, con un
   crossfade de 2s. Los cortes los decide el JS por porcentaje de
   scroll del documento.
   ========================================================= */
.fondos {
  position: fixed;
  inset: 0;
  z-index: var(--z-fondos);
  pointer-events: none;
  background-color: var(--negro);
}

.fondos__capa {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  transition: opacity var(--t-crossfade) ease;
}

/* La capa 1 se ve desde el principio, así que su imagen la trae el CSS.
   Las otras tres solo reciben imagen cuando el JS les pone la clase
   `--lista`, justo antes de que les toque el turno. Un elemento con
   `background-image` se descarga aunque esté a opacidad 0, así que sin
   esto los cuatro fondos entraban en la carga inicial: 184 KB en móvil
   para pintar un hero que no los usa.
   Sin JS se queda la capa 1 fija, que es lo que se vería sin crossfade. */
.fondos__capa[data-capa="1"] {
  opacity: 1;
  background-image: url('../assets/img/Chispa2-Desktop.jpg');
}
.fondos__capa--lista[data-capa="2"] { background-image: url('../assets/img/Persona-cruzando-Desktop.jpg'); }
.fondos__capa--lista[data-capa="3"] { background-image: url('../assets/img/Close-eyes-Desktop.jpg'); }
.fondos__capa--lista[data-capa="4"] { background-image: url('../assets/img/Desktop-2.jpg'); }

@media (max-width: 767px) {
  .fondos__capa[data-capa="1"] { background-image: url('../assets/img/Chispa2-Mobile.jpg'); }
  .fondos__capa--lista[data-capa="2"] { background-image: url('../assets/img/Persona-cruzando-Mobile.jpg'); }
  .fondos__capa--lista[data-capa="3"] { background-image: url('../assets/img/Close-eyes4-Mobile.jpg'); }
  .fondos__capa--lista[data-capa="4"] { background-image: url('../assets/img/adam-wilson-wCKzi8nDkw8-unsplash-mobile-2nd.jpg'); }
}

/* =========================================================
   SCROLL STORYTELLING — el copy
   ========================================================= */
.relato {
  position: relative;
  z-index: var(--z-contenido);
  /* El ancho útil es 1140px, con 10px de aire a los lados como en
     producción: de ahí el max-width sumando el padding. */
  max-width: calc(var(--ancho-relato) + 20px);
  margin-inline: auto;
  padding-inline: 10px;
  text-align: center;

  /* Flex y no flujo normal a propósito: en flujo los 150px de abajo
     colapsarían con los 300px de arriba del bloque siguiente y la
     separación real caería a 300px. En producción el contenedor es
     flex, no colapsa, y quedan 450px. Ese es el ritmo de scroll que
     ya estaba ajustado contra el copy. */
  display: flex;
  flex-direction: column;
}

.relato__bloque {
  margin-block: var(--relato-antes) var(--relato-despues);
  font-size: var(--relato-t);
  font-weight: 800;
  line-height: var(--relato-linea);
  color: var(--crema);
}

/* El último bloque cierra con menos aire: enlaza con el bloque de
   suscripción, que va justo debajo. */
.relato__bloque--ultimo { margin-bottom: 50px; }

/* Los párrafos dentro de un bloque llevan la misma separación que en
   producción (0.9em del tamaño base del tema). Las líneas de un mismo
   párrafo van con <br> y solo las separa la interlínea. */
.relato__bloque p { margin-bottom: 14.4px; }

.relato__cita { margin: 40px 0; }

@media (max-width: 767px) {
  .relato { padding-inline: 25px; }
}

/* ---------- Reveals del copy ------------------------------
   No existen en producción: el copy aparece ya visible. Es una
   mejora, así que se aplica solo si el JS ha podido arrancar
   (la clase la pone él) y nunca con movimiento reducido.
   --------------------------------------------------------- */
.js-reveals .relato__bloque {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}

.js-reveals .relato__bloque[data-visible] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fondos__capa { transition: none; }
  .js-reveals .relato__bloque {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   BLOQUE DE SUSCRIPCIÓN (#suscribirse)
   Lleva su propia imagen de fondo —la silueta ante el fuego—, que
   tapa la capa 4 del storytelling. Es así en producción.
   ========================================================= */
.suscripcion {
  position: relative;
  z-index: var(--z-contenido);
  min-height: var(--susc-alto);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  text-align: center;

  /* Producción usa `background-size: auto`, que en pantallas más anchas
     que la imagen (2560px) la repetiría, y en otras alturas recorta de
     forma imprevisible. `cover` da prácticamente el mismo encuadre en
     tamaños normales y se comporta igual en cualquier pantalla. */
  background-color: var(--negro);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* La imagen llega cuando el JS pone la clase, al acercarse la sección: si
   va en la regla base, el navegador se la descarga en la carga inicial
   aunque el bloque esté a 27.000px de distancia. */
.suscripcion--lista { background-image: url('../assets/img/Cierre-Desktop.jpg'); }

@media (max-width: 767px) {
  .suscripcion--lista { background-image: url('../assets/img/Cierre-Mobile.jpg'); }
}

.suscripcion__marca {
  width: var(--susc-marca);
  max-width: 100%;
  height: auto;
  margin-bottom: var(--susc-hueco-marca);
}

.suscripcion__texto {
  margin-bottom: 20px;
  font-size: var(--susc-t);
  font-weight: 600;
  line-height: 1.5;
  color: var(--crema);
}

/* El texto va en cursiva: es así en producción, dentro de <em>. */
.suscripcion__texto em { font-style: italic; }

/* Los párrafos guardan la misma separación que en el relato. */
.suscripcion__texto p + p { margin-top: 14.4px; }

.suscripcion .formulario { margin-inline: auto; }