/* =============================================================================
   Hero de portada — vídeo de fondo (macro de célula FV) + capa técnica
   ========================================================================== */
/* Las cotas tardan más que una animación web al uso: con 6 trazos escalonados
   a 0,34 s y 1,7 s cada uno, el dibujo completo ronda los 3,4 s, que es el
   tiempo que se tarda en leer el titular. Es el efecto buscado, no un descuido. */
.gi-hero{--wired-draw:1.7s}

/* Portada dentro de WordPress (front-page.php): Astra la mete en
   .ast-container, en caja y flex. Se saca a todo el viewport igual que .gi-cat
   en categoria.css; aquí porque hero.css se carga en todo el sitio y
   categoria.css no. */
body{overflow-x:clip}
.gi-portada{width:100vw;min-width:100vw;margin-left:calc(50% - 50vw)}

.gi-hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(30rem,78vh,46rem);
  display:grid;align-items:center;
  /* El fotograma va SIEMPRE de fondo: en móvil es la imagen definitiva, y en
     escritorio tapa el hueco mientras el vídeo carga. El atributo `poster` del
     <video> no sirve aquí, porque en móvil el vídeo está display:none. */
  background:#0B1013 center/cover no-repeat;
  background-image:image-set(
    url('../video/hero-poster.webp?v=1789811260') type('image/webp'),
    url('../video/hero-poster.jpg?v=1789811260')  type('image/jpeg'));
  padding:calc(env(safe-area-inset-top,0px) + 3rem) max(1.25rem, var(--gi-gutter)) 3rem;
}
.gi-hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-3;
  /* Oculto hasta que reproduce de verdad: debajo está el fotograma de fondo,
     que ahora ES el primer fotograma del vídeo, así que el relevo no se nota. */
  opacity:0;transition:opacity .45s ease;
}
.gi-hero__video--visible{opacity:1}
/* Velo general ~40 %: baja el brillo del panel sin apagarlo */
.gi-hero__velo{position:absolute;inset:0;z-index:-2;background:rgba(9,14,17,.40)}
/* Degradado SOLO bajo el bloque de texto (izquierda), para que el titular
   tenga contraste sin oscurecer la imagen entera */
.gi-hero__velo::after{
  content:"";position:absolute;inset:0;
  /* Dos capas: el degradado del bloque de texto y un refuerzo radial en la
     esquina del logo. Con el logo VERDE de marca (#27A854) sobre este vídeo,
     el lettering «energy» mide 5,66:1 — y 5,05:1 si se quita el radial, así
     que la mayor parte del trabajo la hace el degradado del bloque. El radial
     se mantiene por el margen: es lo que aguanta si algún día cambia el
     vídeo de portada. Medido sobre 21 instantes, peor píxel bajo trazo. */
  background:
    radial-gradient(60rem 34rem at 6% 8%, rgba(5,8,10,.78) 0%, rgba(5,8,10,0) 62%),
    linear-gradient(100deg,
      rgba(7,11,13,.88) 0%, rgba(7,11,13,.74) 26%,
      rgba(7,11,13,.28) 52%, rgba(7,11,13,0) 72%);
}
.gi-hero__cotas,.gi-hero__grano{position:absolute;inset:0;z-index:-1;width:100%;height:100%}
.gi-hero__cotas{opacity:1}

/* --- Ciclo de cotas -------------------------------------------------------
   Doce cotas, 3-4 en pantalla a la vez. El JS decide cuál entra y cuándo sale;
   aquí solo vive el aspecto y los tiempos. Sin JS no se ve ninguna, que es
   preferible a verlas las doce encimadas. */
.gi-hc-traza{fill:none;stroke:var(--gi-cota);stroke-width:1;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
/* SIN halo. Sobre el vídeo, el contorno oscuro se leía como un borde negro
   pegado a las letras. La legibilidad la da la separación texto/línea, que ya
   existe por construcción: el texto nunca cae encima de su propia cota. */
.gi-hc-texto{fill:var(--gi-cota);font-family:var(--gi-cuerpo);font-size:15px;
  letter-spacing:.08em}
/* Las fórmulas, un punto mayores y en la tipografía de titular: se leen como
   anotación de cálculo, no como una medida más. */
.gi-hc-texto--formula{font-family:var(--gi-titular);font-size:16px;letter-spacing:.02em}

.gi-hero__cota{opacity:0}
.gi-hero__cota .gi-hc-traza{
  stroke-dasharray:var(--gi-largo,200);stroke-dashoffset:var(--gi-largo,200);
}
.gi-hero__cota.gi-esta-visible{opacity:.88}   /* efectivo ~.63 sobre el trazo */
.gi-hero__cota.gi-esta-visible .gi-hc-traza{
  animation:gi-dibujar 1.5s cubic-bezier(.4,0,.25,1) forwards;
  animation-delay:var(--gi-retardo,0s);
}
.gi-hero__cota.gi-esta-visible .gi-hc-texto{
  opacity:0;animation:gi-fundido .5s ease forwards;animation-delay:1.35s;
}
.gi-hero__cota.gi-se-va{opacity:0;transition:opacity 1.6s ease}

@media (prefers-reduced-motion:reduce){
  /* Cuatro cotas fijas y punto: ni ciclo, ni trazado, ni desvanecido. */
  .gi-hero__cota{opacity:0}
  .gi-hero__cota.gi-fija{opacity:.88}
  .gi-hero__cota .gi-hc-traza{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .gi-hero__cota .gi-hc-texto{opacity:1;animation:none}
}
.gi-hero__grano{opacity:.16;mix-blend-mode:overlay;pointer-events:none}

.gi-hero__contenido{position:relative;max-width:1180px;margin-inline:auto;width:100%}

/* Logo sobre el degradado del bloque de texto, que es lo que le da contraste:
   el lettering es verde de marca y no se recolorea — es el activo intocable. */
.gi-hero__caja{max-width:34rem}
.gi-hero__antetitulo{
  font-family:var(--gi-titular);font-size:var(--gi-t-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gi-verde);
  margin:0 0 1rem;
}
.gi-hero h1{color:#fff;text-wrap:balance;margin:0 0 1.25rem}
.gi-hero__entradilla{
  color:rgba(255,255,255,.84);font-size:var(--gi-t-l);max-width:30rem;margin:0 0 2rem;
}
.gi-hero__acciones{display:flex;flex-wrap:wrap;gap:.9rem}

/* Móvil: nada de vídeo. El JS no llega a cargarlo y se ve el fotograma. */
@media (max-width:48rem){
  .gi-hero__video{display:none}
  /* En móvil el bloque de texto ocupa TODO el ancho, así que no hay sitio
     donde poner una cota sin pisarlo. Se ocultan enteras: la regla es que
     nunca caigan sobre el texto, y aquí no hay excepción posible. */
  .gi-hero__cotas{display:none}
  .gi-hero__velo::after{
    background:linear-gradient(180deg, rgba(7,11,13,.55) 0%, rgba(7,11,13,.86) 70%);
  }
}
@media (prefers-reduced-motion:reduce){
  .gi-hero__video{display:none}
}