/* ============================================================================
   hero-section.css — HERO DE SECCIÓN full-bleed (imagen de fondo + scrim).
   ----------------------------------------------------------------------------
   Fuente ÚNICA de verdad del hero de las páginas de contenido (/productos,
   /servicios, /nosotros, /educacion, /noticias, /productos/etla).

   Encargo CEO: misma gramática visual que el hero del inicio
   (landing-video-hero.css): la IMAGEN de la sección ocupa TODO el ancho de la
   vista (full-bleed, background-size:cover), un DEGRADADO oscuro (scrim)
   sobreimpreso garantiza que el titular se lea, y el texto va sobre la zona
   limpia. Se ELIMINA el look anterior de "panel/parche recortado" (caja
   contenida con velo glass, borde y esquinas).

   Reglas de gobierno respetadas:
   - El texto va SIEMPRE claro (#FFFFFF) sobre el velo oscuro, exactamente como
     el hero de la home. Así el contraste WCAG AA/AAA se mantiene idéntico en
     modo DÍA y NOCHE sin depender de --q-ink (que invierte por tema).
   - Acento de marca legible sobre oscuro: --q-lavender (#86C1A9), igual que el
     hero de la home (nunca el #3E8551 base, que baja el contraste).
   - Responsive: en móvil el scrim se refuerza hacia abajo y el texto respira,
     sin scroll horizontal.
   Markup en app/templates/_hero_section.html (macro hero_section()).
   Se conservan las clases hero-fig* por compatibilidad con las plantillas.
   ============================================================================ */

/* ── Contenedor FULL-BLEED ─────────────────────────────────────────────────
   Rompe el ancho de .wrap para ocupar todo el viewport, como el hero de la
   home. `margin-inline: calc(50% - 50vw)` centra el desbordamiento sea cual
   sea el ancho del contenedor padre. */
.hero-fig {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-height: min(56vh, 520px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: 50% 35%;
  background-repeat: no-repeat;
  background-color: #0B102A;          /* respaldo mientras carga la imagen */
  padding-block: var(--q-space-12, 56px);
  /* Neutraliza el look de caja anterior (borde/sombra/radio). */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-block: 0;
  /* ── FADE hacia el fondo de la página (arriba y abajo) ───────────────────
     Encargo CEO: la imagen NO debe cortarse de golpe arriba/abajo. En vez de
     un borde duro, los extremos superior e inferior se DESVANECEN a transparente
     y dejan ver el fondo de la página, fundiéndose con él. Se desvanece a
     TRANSPARENTE (no a un color fijo), así funciona idéntico en tema día y
     noche sin depender del color de fondo. El titular va centrado, dentro de la
     banda opaca (12%–86%), así el texto y el scrim de contraste siguen intactos. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
}

/* ── SCRIM (reusa .hero-fig__veil): degradado de contraste ────────────────
   Mismo criterio que el hero de la home: oscurece la zona del texto
   (izquierda/inferior) para garantizar AA del titular sobre cualquier foto. */
.hero-fig__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 6, 10, 0.70) 0%, rgba(5, 6, 10, 0.40) 48%, rgba(5, 6, 10, 0.10) 100%),
    linear-gradient(180deg, rgba(5, 6, 10, 0.12) 0%, transparent 42%, rgba(5, 6, 10, 0.46) 100%);
}

/* ── Contenido: re-centrado a la columna de lectura vía .wrap interno ──────
   Por encima del scrim; texto CLARO porque va sobre el velo oscuro. */
.hero-fig > .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-fig__panel {
  width: auto;                         /* anula el min(48%,540px) anterior */
  max-width: 60ch;
  margin: 0;                           /* anula el margin-left:auto anterior */
  padding: 0;                          /* el aire lo da .wrap + padding-block */
  text-align: left;
}

.hero-fig__eyebrow {
  display: inline-block;
  margin: 0 0 var(--q-space-3, 12px);
  font-family: var(--q-font-display, Sora), sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--q-lavender, #86C1A9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.hero-fig__h1 {
  margin: 0 0 var(--q-space-4, 16px);
  font-family: var(--q-font-display, Sora), sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.08;
  color: #FFFFFF;                       /* AAA sobre el scrim */
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
}

.hero-fig__lead {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--q-font-sans, Inter), sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.58;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.32);
}

/* Contenido extra dentro del hero (subnav de anclas, CTAs, chips). */
.hero-fig__extra,
.hero-fig__panel > nav,
.hero-fig__panel > .etla-actions {
  margin-top: var(--q-space-5, 24px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-3, 12px);
  align-items: center;
}

/* Enlaces de texto dentro del hero (subnav de anclas): claros sobre el velo,
   con pill sutil para separarlos del fondo. */
.hero-fig__panel nav a:not(.q-btn),
.hero-fig__extra a:not(.q-btn) {
  color: #FFFFFF;
  font-family: var(--q-font-sans, Inter), sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--q-radius-pill, 999px);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 160ms ease, border-color 160ms ease;
}
.hero-fig__panel nav a:not(.q-btn):hover,
.hero-fig__extra a:not(.q-btn):hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Botón secundario (.q-btn sin --primary): outline claro legible sobre oscuro.
   El .q-btn--primary conserva su gradiente propio. */
.hero-fig__panel .q-btn:not(.q-btn--primary) {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.hero-fig__panel .q-btn:not(.q-btn--primary):hover {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

/* Accesibilidad: foco visible para enlaces dentro del hero. */
.hero-fig a:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
  border-radius: var(--q-radius-md, 10px);
}

/* ── MODO NOCHE: mismo scrim oscuro, texto ya claro → no se invierte nada.
   Neutralizamos overrides de tema. ──────────────────────────────────────── */
html[data-theme="dark"] .hero-fig__h1 { color: #FFFFFF; }
html[data-theme="dark"] .hero-fig__lead { color: rgba(255, 255, 255, 0.92); }
html[data-theme="dark"] .hero-fig__eyebrow { color: var(--q-lavender, #86C1A9); }

/* Preferencia de contraste alto: scrim más opaco en la zona del texto. */
@media (prefers-contrast: more) {
  .hero-fig__veil {
    background:
      linear-gradient(90deg, rgba(5, 6, 10, 0.86) 0%, rgba(5, 6, 10, 0.6) 50%, rgba(5, 6, 10, 0.22) 100%),
      linear-gradient(180deg, rgba(5, 6, 10, 0.2) 0%, transparent 40%, rgba(5, 6, 10, 0.6) 100%);
  }
}

/* ── RESPONSIVE: móvil ancla el texto abajo y refuerza el scrim vertical. ── */
@media (max-width: 720px) {
  .hero-fig {
    align-items: flex-end;
    min-height: min(64vh, 460px);
    background-position: 50% 28%;
    padding-block: var(--q-space-10, 44px);
    /* En móvil el texto se ancla ABAJO: el fade inferior se relaja (empieza más
       tarde y sin llegar del todo a transparente) para no restar legibilidad al
       titular, manteniendo el fundido superior con el fondo de la página. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 96%, rgba(0,0,0,0.35) 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 96%, rgba(0,0,0,0.35) 100%);
  }
  .hero-fig__veil {
    background:
      linear-gradient(180deg, rgba(5, 6, 10, 0.30) 0%, rgba(5, 6, 10, 0.22) 38%, rgba(5, 6, 10, 0.72) 100%);
  }
  .hero-fig__panel { max-width: none; }
  .hero-fig__lead { max-width: none; }
}