/* Backlight — CSS del hero Emons. Extraído 1:1 de v3/styles.css (bloques del hero).
   Lo encola el widget "Hero Backlight". El motor (main.js + emons-engine.js) es el mismo certificado. */

/* ---------- Hero: base APILADA (sin JS y reduced-motion: todo visible) ---------- */
.hero { position: relative; background: var(--bl-noche); }
/* El motor da foco programático al hero (tabindex=-1) para capturar el teclado de los capítulos;
   ese foco NO debe pintar el anillo del navegador. En la v3 no se nota porque el hero llega al borde
   del viewport; en WordPress el margen del canvas lo dejaba a la vista como un marco redondeado.
   Los controles reales del hero (puntos, «saltar intro») conservan su propio :focus-visible amarillo. */
.hero:focus { outline: none; }
/* …pero el hero es también el destino del skip link, y un salto por teclado SIN indicador visible
   cambiaría un fallo de accesibilidad por otro.
   🔴 `:focus-visible` NO sirve aquí y está verificado en navegador: Chrome lo activa también en el
   foco programático que el motor da al hero al cargar, así que el anillo salía SIEMPRE — justo el
   marco que `outline:none` existe para quitar.
   `:target` es determinista: solo aplica cuando el hash es `#inicio`, que es exactamente lo que
   hace el skip link. 0-3-0, gana a `.hero:focus` (0-2-0). */
.hero:target:focus { outline: 3px solid var(--bl-solar); outline-offset: -3px; }
.hero video { display: block; width: 100%; max-height: 70svh; object-fit: cover; }

.capitulo { padding: var(--bl-e-12) var(--bl-e-6); max-width: 72rem; margin: 0 auto; }

.capitulo__eyebrow {
  margin: 0 0 var(--bl-e-4); font-size: var(--bl-t-sm);
  letter-spacing: var(--bl-tracking-label); text-transform: uppercase;
  color: var(--bl-piedra);
}

/* Display en Barques: SOLO MAYÚSCULAS sin Ñ */
.capitulo__display {
  margin: 0 0 var(--bl-e-6);
  font-family: var(--bl-font-display);
  font-weight: var(--bl-peso-extrabold);
  font-size: clamp(2rem, 5.6vw, var(--bl-t-3xl));
  line-height: var(--bl-lh-tight);
  letter-spacing: var(--bl-tracking-display);
  color: var(--bl-humo);
  text-wrap: balance;
}
.capitulo__display--medio { font-size: clamp(1.7rem, 4.4vw, var(--bl-t-2xl)); }
.capitulo__display .linea { display: block; margin-bottom: 0.28em; }

.capitulo__apoyo {
  margin: var(--bl-e-6) 0 0; max-width: 44ch;
  font-size: clamp(1rem, 1.5vw, var(--bl-t-md)); color: var(--bl-humo);
}
.capitulo__salida {
  margin: var(--bl-e-6) 0 0;
  color: var(--bl-solar); font-weight: var(--bl-peso-bold);
  font-size: var(--bl-t-md);
}
.capitulo__indicador {
  margin: var(--bl-e-6) 0 0; font-size: var(--bl-t-xs);
  letter-spacing: var(--bl-tracking-label); text-transform: uppercase;
  color: var(--bl-humo);
}

/* Controles del hero: solo existen en modo cine */
.progreso, .hero__hint, .hero__carga, .hero__saltar, .hero__logo { display: none; }

/* ---------- Hero: modo CINE (lo activa main.js con html.hero-cine) ---------- */
html.hero-cine .hero { height: 100svh; overflow: hidden; }
html.hero-cine .hero video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
  object-fit: cover; opacity: 1;
}

html.hero-cine .capitulo {
  position: absolute; left: 0; right: 0; bottom: 10svh; z-index: 2;
  margin: 0 auto; padding: 0 var(--bl-e-8); max-width: 76rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity 320ms var(--bl-ease-ignition), transform 320ms var(--bl-ease-ignition);
  pointer-events: none;
}
html.hero-cine .capitulo.is-active { opacity: 1; transform: none; }

/* Progreso: 3 puntos cuadrados */
html.hero-cine .progreso {
  display: flex; flex-direction: column; gap: var(--bl-e-4);
  position: absolute; right: var(--bl-e-6); top: 50%;
  transform: translateY(-50%); z-index: 2;
}
html.hero-cine .punto {
  width: var(--bl-target-min); height: var(--bl-target-min);
  display: flex; align-items: center; justify-content: center;
  appearance: none; padding: 0; margin: calc(var(--bl-e-2) * -1) 0;
  background: transparent; border: 0; cursor: pointer;
}
html.hero-cine .punto::before {
  content: ""; width: 10px; height: 10px; border-radius: 0;
  background: transparent; border: 2px solid var(--bl-piedra);
  transition: background var(--bl-dur-lock) var(--bl-ease-lock),
              border-color var(--bl-dur-lock) var(--bl-ease-lock);
}
html.hero-cine .punto:hover::before { border-color: var(--bl-humo); }
html.hero-cine .punto:focus-visible { outline: 2px solid var(--bl-solar); outline-offset: 3px; }
html.hero-cine .punto.activo::before { background: var(--bl-solar); border-color: var(--bl-solar); }

/* Logo de marca durante el modo cine */
html.hero-cine .hero__logo {
  display: block; position: absolute;
  top: var(--bl-e-6); left: var(--bl-e-8); z-index: 3;
  height: 30px; width: auto;
}

html.hero-cine .hero__hint {
  display: block; position: absolute; left: 50%; bottom: var(--bl-e-4);
  transform: translateX(-50%); z-index: 2; margin: 0;
  font-size: var(--bl-t-xs); letter-spacing: var(--bl-tracking-label);
  text-transform: uppercase; color: var(--bl-humo); white-space: nowrap;
}
html.hero-cine .hero__carga {
  display: block; position: absolute; left: var(--bl-e-6); bottom: var(--bl-e-4);
  z-index: 2; margin: 0; font-size: var(--bl-t-xs);
  letter-spacing: var(--bl-tracking-label); text-transform: uppercase;
  color: var(--bl-solar);
}
html.hero-cine .hero__carga[hidden] { display: none; }
html.hero-cine .hero__saltar {
  display: inline-flex; align-items: center; position: absolute;
  top: var(--bl-e-4); right: var(--bl-e-6); z-index: 3;
  min-height: var(--bl-target-min); padding: 0 var(--bl-e-4);
  background: transparent; border: 1px solid var(--bl-carbon); border-radius: 0;
  color: var(--bl-humo); font-family: var(--bl-font-texto);
  font-size: var(--bl-t-sm); font-weight: var(--bl-peso-medium); cursor: pointer;
  transition: border-color var(--bl-dur-lock) var(--bl-ease-lock),
              color var(--bl-dur-lock) var(--bl-ease-lock);
}
html.hero-cine .hero__saltar:hover { border-color: var(--bl-solar); color: var(--bl-solar); }

/* Convivencia con el header: durante el secuestro del recorrido (html.hero-lock) la barra fija se
   retira. La regla vive junto a `.nav` en bl-base.css (mismo mecanismo que v3/styles.css:65); aquí
   solo se documenta el acoplamiento. El header es ahora un documento del Theme Builder. */

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  html.hero-cine .capitulo { bottom: 13svh; padding: 0 var(--bl-e-4); }
  html.hero-cine .progreso { right: var(--bl-e-3); }
  html.hero-cine .hero__saltar { right: var(--bl-e-4); }
}

/* Full-bleed dentro del contenedor atómico de Elementor: el widget clásico no recibe ancho
   del flexbox por sí solo (todo su contenido es position:absolute → content-size 0). */
.elementor-widget-backlight_hero,
.elementor-widget-backlight_hero > .elementor-widget-container { width: 100%; }
.hero { width: 100%; }

/* Canvas full-bleed: el contenedor atómico del hero trae 10px de padding por defecto (.e-con);
   se retira para que el hero pegue a los bordes. */
.elementor .e-con.elementor-element-hero-wrap { padding: 0; }