/* ============================================================
   Hero: láminas, video, barra de industrias y sellos
   ============================================================ */

/* Tope de 880px: sin él, min-height:100vh crece con el monitor y
   align-items:flex-end deja el texto flotando muy abajo, con un vacío
   enorme arriba en pantallas altas (2560×1440 llegaba a 857px de aire).
   El tope viene de lo que el contenido necesita (texto + paddings, ~750px)
   más margen; por debajo de 880px de alto de ventana, el hero sigue
   ocupando el viewport completo como antes. */
/* La barra superior ya no se superpone (va arriba, sticky): el hero resta
   su alto para que barra + hero sigan ocupando lo mismo que antes. */
.hero{ position:relative; min-height:min(calc(100vh - var(--header-h)), calc(880px - var(--header-h))); display:flex; align-items:center; overflow:hidden; background:var(--navy-deep); }
.hero-media{ position:absolute; inset:0; z-index:0; background:var(--navy-deep); }
.hero-media img, .hero-media video{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; will-change:transform; }

/* Portada rotativa: las láminas se cruzan en opacidad, nunca se desplazan.
   Un carrusel que empuja la imagen compite con el texto que hay encima. */
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.hero-slide.is-active{ opacity:1; }
/* Puntos + botón de pausa. La fila sigue midiendo los 3 px de los puntos: el
   botón se dibuja más alto pero con margen negativo, y su zona táctil la da
   el ::before (ver 15-utilidades.css). */
.hero-controles{ display:flex; align-items:center; gap:var(--sp-5); margin-top:var(--sp-8); }
.hero-dots{ display:flex; gap:var(--sp-2); }
.hero-pausa{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin:-7px 0; padding:0; border:0; background:none;
  color:rgba(255,255,255,.75); cursor:pointer; transition:color .25s ease;
}
.hero-pausa:hover{ color:var(--white); }
.hero-pausa svg{ width:12px; height:12px; }
.hero-pausa .ico-pausa{ fill:none; stroke:currentColor; stroke-width:2; }
.hero-pausa .ico-play{ fill:currentColor; display:none; }
.hero-pausa.is-paused .ico-pausa{ display:none; }
.hero-pausa.is-paused .ico-play{ display:inline; }
.hero-dot{
  width:34px; height:3px; padding:0; border:none; cursor:pointer;
  background:rgba(255,255,255,.34); transition:background .25s ease, width .25s ease;
}
.hero-dot:hover{ background:rgba(255,255,255,.6); }
.hero-dot.is-active{ background:var(--yellow); width:52px; }
/* El texto se desvanece mientras se sustituye, para que el cambio no salte. */
.hero-eyebrow-row, .hero-title, .hero-sub{ transition:opacity .22s ease; }
.is-swapping{ opacity:0 !important; }
/* El video cede el paso al poster sólo con reduced-motion. En móvil se
   reproduce: los videos de media/web/ ya vienen comprimidos para eso. */
.hero-media .hero-poster{ display:none; }
@media (prefers-reduced-motion: reduce){
  .hero-media video{ display:none; }
  .hero-media .hero-poster{ display:block; }
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,23,43,.56) 0%, rgba(0,23,43,.42) 38%, rgba(0,23,43,.94) 100%),
             linear-gradient(90deg, rgba(0,43,79,.62) 0%, rgba(0,43,79,0) 46%);
}
/* El padding horizontal viene de .container: se repite aquí porque el atajo
   `padding` lo anularía y el titular quedaría pegado al borde bajo 1408 px.

   CONTROL DE ALTURA DEL CONTENIDO DEL SLIDER — dos propiedades, nada más:
   1. align-items en .hero (arriba) decide el anclaje dentro de la caja:
      flex-end = abajo (el de ahora), center = medio, flex-start = arriba.
   2. El padding-bottom de acá abajo es la distancia final desde ese anclaje
      hasta el borde inferior del hero. Antes había un segundo valor que sólo
      se activaba con la clase "has-picker" —para dejarle sitio a una barra
      de industrias que ya no existe en el HTML— y competía con éste; se
      quitó para que quede un solo número que editar. */
.hero-content{ position:relative; z-index:1; width:100%; padding:var(--sp-8) var(--gutter) var(--sp-24); }
.hero-eyebrow-row{ margin-bottom:var(--sp-6); font-size:var(--fs-xs); }
@media (min-width:721px){ .hero-eyebrow-row{ font-size:var(--fs-xs); } }
.hero-title{ color:var(--white); max-width:23ch; }
.hero-sub{ margin-top:var(--sp-6); color:var(--white); }
.hero-bottom-row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--sp-10);
  margin-top:var(--sp-12); padding-top:var(--sp-8); border-top:1px solid var(--line-on-dark);
}
.hero-ctas{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }
.hero-credential{ max-width:430px; }
@media (min-width:721px){ .hero-credential{ padding-right:var(--sp-16); } } /* deja libre la columna del indicador de scroll */
@media (max-width:720px){ .hero-credential{ max-width:none; padding-right:var(--sp-16); } } /* deja libre la esquina del botón de WhatsApp */
.hero-credential p{ font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.6; color:var(--on-dark-300); margin-top:var(--sp-3); }
.hero-credential strong{ color:var(--white); font-weight:600; }
/* Placa clara: los sellos son marcas a color y sobre la fotografía oscura
   perderían el reconocimiento que justamente los hace valer. */
.hero-certs{
  display:inline-flex; align-items:center; gap:clamp(var(--sp-4),1.8vw,var(--sp-6)); flex-wrap:wrap;
  background:rgba(255,255,255,.96); border-radius:var(--radius-sm); padding:var(--sp-4) var(--sp-5);
  box-shadow:var(--shadow-float);
}
.hero-certs img{ width:auto; display:block; }
/* En móvil la placa cabe en una fila si se aprieta el aire, no los sellos. */
@media (max-width:560px){ .hero-certs{ gap:var(--sp-3); padding:var(--sp-2) var(--sp-3); } }

@media (max-width:720px){
  .hero{ min-height:calc(92vh - var(--header-h)); }
  .hero-bottom-row{ flex-direction:column; align-items:flex-start; }
}
/* En móvil, 100vh cuenta la barra de direcciones del navegador: el hero queda
   más alto que la pantalla y la barra de industrias se va bajo el pliegue.
   svh mide el alto realmente visible, que es donde debe terminar el hero. */
@supports (height:100svh){
  .hero{ min-height:min(calc(100svh - var(--header-h)), calc(880px - var(--header-h))); }
  @media (max-width:720px){ .hero{ min-height:calc(92svh - var(--header-h)); } }
}

/* ============================================================
   Banda de video de planta — "así se fabrica"

   Ocupa el ancho completo. El video corre en bucle, sin sonido y sin
   desenfoque, bajo un velo neutro: no es el protagonista, es el
   ambiente sobre el que se lee el titular. El botón va al centro exacto,
   y abre el visor de video que ya existe (data-video).
   ============================================================ */
.banda-video{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(460px, 64vh, 720px);
  display:flex; align-items:center; justify-content:center;
  background:var(--navy-deep);
}
.banda-video-fondo{
  position:absolute; inset:0; z-index:-2;
}
.banda-video-fondo video,
.banda-video-fondo img{
  width:100%; height:100%; object-fit:cover;
}
.banda-video::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(0,20,38,.52) 0%, rgba(0,20,38,.72) 60%, rgba(0,20,38,.86) 100%);
}
.banda-video-contenido{
  position:relative; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(var(--sp-16),7vw,var(--sp-24)) var(--gutter);
  max-width:900px;
}
.banda-video-contenido .eyebrow{ justify-content:center; }
.banda-video h2{
  margin-top:var(--sp-4); color:var(--white);
  font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  font-size:var(--fs-d2); line-height:1.06; text-wrap:balance;
}
.banda-video p{
  margin-top:var(--sp-5); max-width:56ch;
  font-size:var(--fs-lede); line-height:1.55; color:rgba(255,255,255,.78);
}

@media (max-width:720px){
  .banda-video{ min-height:clamp(420px, 76vh, 620px); }
}

/* Hero bajo de las páginas internas (pageHeroSmall en fragments.js). */
.hero.is-small{ min-height:calc(62vh - var(--header-h)); }