.home-page,
.programa-page,
.directorio-page,
.noticias-page,
.convocatorias-page {
  position: relative;
}

.hero {
  --hero-bg:     var(--nexo-green);
  --hero-x-arm:  var(--nexo-cyan);
  --hero-x-core: var(--nexo-red);

  position:   relative;
  width:      100%;
  min-height: min(40rem, 92svh);
  margin:     0;
  overflow:   hidden;
  isolation:  isolate;
  background: var(--hero-bg);
  color:      var(--nexo-dark);
}

.hero--green  { --hero-bg: var(--nexo-green);  }
.hero--yellow { --hero-bg: var(--nexo-yellow); }
.hero--purple { --hero-bg: var(--nexo-purple); }
.hero--cyan   { --hero-bg: var(--nexo-cyan);   }
.hero--red    { --hero-bg: var(--nexo-red);    }

/* Estático (sin animación / reduced-motion): cada pantalla queda en su fase base.
   Verde y morado usan el default cian/rojo; amarillo, rojo y cyan ajustan contraste. */
.hero--yellow { --hero-x-arm: var(--nexo-red);    --hero-x-core: var(--nexo-purple); }
.hero--red    { --hero-x-arm: var(--nexo-purple); --hero-x-core: var(--nexo-yellow); }
.hero--cyan   { --hero-x-arm: var(--nexo-yellow); --hero-x-core: var(--nexo-purple); }

.hero__bg-x {
  position:         absolute;
  inset-block:      0;
  inset-inline-end: -0.1%;
  width:            56.8%;
  pointer-events:   none;
}

.hero__x {
  width:      100%;
  height:     100%;
  object-fit: fill;
  filter:     var(--x-relief);
}

.hero__x-arm  { fill: var(--hero-x-arm); }
.hero__x-core { fill: var(--hero-x-core); }

.hero__content {
  position:           relative;
  z-index:            1;
  min-height:         inherit;
  max-width:          var(--container-max);
  margin-inline:      auto;
  padding:            clamp(4.5rem, 11vh, 7.2rem) var(--container-pad) clamp(2rem, 5vh, 3rem);
  display:            grid;
  grid-template-rows: auto 1fr;
  align-items:        start;
}

.hero__logo {
  display:   block;
  width:     clamp(9rem, 11vw + 1rem, 13rem);
  max-width: none;
  color:     var(--nexo-dark);
}
.hero__logo svg  { width: 100%; height: auto; filter: var(--x-relief); }
.hero__logo path { fill: currentColor; }

.hero__title {
  align-self:       end;
  max-width:        14ch;
  margin-block-end: clamp(0.1rem, 1.8vh, 1rem);
  font-family:      var(--font-heading);
  font-size:        var(--fs-6xl);
  font-weight:      var(--fw-bold);
  line-height:      var(--lh-none);
  letter-spacing:   -0.01em;
  color:            var(--nexo-dark);
}

.hero__title--lead {
  align-self:     end;
  max-width:      20rem;
  font-size:      clamp(1.375rem, 1.1rem + 1vw, 1.5rem);
  font-weight:    var(--fw-regular);
  line-height:    var(--lh-snug);
  letter-spacing: 0;
}

@media (max-width: 1024px) {
  .hero { min-height: min(34rem, 85svh); }

  .hero__bg-x {
    inset-block-start:  -8vw;
    inset-block-end:    auto;
    inset-inline-start: auto;
    inset-inline-end:   -8vw;
    width:              min(72vw, 34rem);
    height:             min(72vw, 34rem);
  }
  .hero__x { overflow: visible; }

  .hero__content { padding-block-start: 6rem; }
}

@media (max-width: 640px) {
  .hero { min-height: min(36rem, 92svh); }

  .hero__logo { width: clamp(5rem, 27vw, 9rem); }

  .hero__bg-x {
    inset-block-start: -10vw;
    inset-inline-end:  -10vw;
    width:             98vw;
    height:            98vw;
  }

  .hero__content     { padding-block-start: 5.5rem; }
}

@media (max-width: 768px) {
  .hero__title--lead { max-width: 20rem; margin-top: 2rem; }
}


/* ===========================================================================
   Bucle de color infinito  ·  .hero--animated
   ---------------------------------------------------------------------------
   Cinco animaciones independientes (fondo + X de marca + X del logo) que
   comparten EXACTAMENTE el mismo reloj: misma duración (--hero-loop), mismo
   timing y los mismos breakpoints (10 pasos: hold+fade cada 10 %). Así los
   cinco elementos saltan de fase a la vez —nunca en cascada— aunque cada uno
   recorra su propia secuencia de colores.

   10 pasos por ciclo (marca + intermedio). Cada color se sostiene (segmento plano,
   p. ej. 0→6 %) y luego funde al siguiente (6→10 %). El último tramo (96→100 %)
   funde de vuelta a la Fase 1 para un bucle sin costura.

   Sólo se animan los rellenos (fill) y el background-color: ni posiciones,
   ni tamaños, ni los paths se tocan.
   =========================================================================== */
/* Único mando para la duración del bucle de color (banner + logo de la sección
   "El programa"): súbelo/bájalo aquí. 10 pasos · ≈ 2.4 s por paso. */
:root { --hero-loop: 24s; }

.hero--animated {
  --hero-delay: 0s;    /* punto de entrada al bucle; cada .hero--{color} lo ajusta
                          para arrancar en su color base (lo heredan los 4 hijos) */
  animation: hero-bg-loop var(--hero-loop) ease-in-out var(--hero-delay) infinite;
}

.hero--animated .hero__x-arm  { animation: hero-xarm-loop      var(--hero-loop) ease-in-out var(--hero-delay) infinite; }
.hero--animated .hero__x-core { animation: hero-xcore-loop     var(--hero-loop) ease-in-out var(--hero-delay) infinite; }
.hero--animated .x-arm        { animation: hero-logo-arm-loop  var(--hero-loop) ease-in-out var(--hero-delay) infinite; }
.hero--animated .x-core       { animation: hero-logo-core-loop var(--hero-loop) ease-in-out var(--hero-delay) infinite; }

/* Arranque por color base: cada hero ENTRA en la fase cuyo fondo coincide con el
   `color` que se le pasa por parámetro, así no hay salto al cargar. El delay
   (negativo) es el mismo para las 5 animaciones —los hijos heredan --hero-delay—
   de modo que la sincronía y la coreografía de la tabla se conservan intactas;
   sólo cambia DÓNDE empieza el bucle. */
.hero--animated.hero--green  { --hero-delay: 0s;                             } /* Fase 1 · fondo verde   */
.hero--animated.hero--purple { --hero-delay: calc(var(--hero-loop) * -0.20); } /* Fase 2 · fondo morado  */
.hero--animated.hero--yellow { --hero-delay: calc(var(--hero-loop) * -0.40); } /* Fase 3 · fondo amarillo */
.hero--animated.hero--red    { --hero-delay: calc(var(--hero-loop) * -0.60); } /* Fase 4 · fondo rojo    */
.hero--animated.hero--cyan   { --hero-delay: calc(var(--hero-loop) * -0.80); } /* Fase 5 · fondo cyan    */

/* Fondo: verde → teal → morado → tan → amarillo → naranja → rojo → slate → cyan → turquesa
   (los pares marca↔intermedio; el intermedio es el color propio entre cada dos de marca) */
@keyframes hero-bg-loop {
  0%,  6%  { background-color: var(--nexo-green);     }
  10%, 16% { background-color: var(--nexo-teal);      }
  20%, 26% { background-color: var(--nexo-purple);    }
  30%, 36% { background-color: var(--nexo-tan);       }
  40%, 46% { background-color: var(--nexo-yellow);    }
  50%, 56% { background-color: var(--nexo-orange);    }
  60%, 66% { background-color: var(--nexo-red);       }
  70%, 76% { background-color: var(--nexo-slate);     }
  80%, 86% { background-color: var(--nexo-cyan);      }
  90%, 96% { background-color: var(--nexo-turquoise); }
  100%     { background-color: var(--nexo-green);     }
}

/* Aspas de la X de fondo */
@keyframes hero-xarm-loop {
  0%,  6%  { fill: var(--nexo-cyan);   }
  10%, 16% { fill: var(--nexo-cyan);   }
  20%, 26% { fill: var(--nexo-cyan);   }
  30%, 36% { fill: var(--nexo-red);    }
  40%, 46% { fill: var(--nexo-red);    }
  50%, 56% { fill: var(--nexo-yellow); }
  60%, 66% { fill: var(--nexo-purple); }
  70%, 76% { fill: var(--nexo-purple); }
  80%, 86% { fill: var(--nexo-yellow); }
  90%, 96% { fill: var(--nexo-cyan);   }
  100%     { fill: var(--nexo-cyan);   }
}

/* Rombo central de la X de fondo */
@keyframes hero-xcore-loop {
  0%,  6%  { fill: var(--nexo-red);    }
  10%, 16% { fill: var(--nexo-red);    }
  20%, 26% { fill: var(--nexo-red);    }
  30%, 36% { fill: var(--nexo-green);  }
  40%, 46% { fill: var(--nexo-purple); }
  50%, 56% { fill: var(--nexo-purple); }
  60%, 66% { fill: var(--nexo-yellow); }
  70%, 76% { fill: var(--nexo-yellow); }
  80%, 86% { fill: var(--nexo-purple); }
  90%, 96% { fill: var(--nexo-red);    }
  100%     { fill: var(--nexo-red);    }
}

/* Aspas de la X del logo */
@keyframes hero-logo-arm-loop {
  0%,  6%  { fill: var(--nexo-dark);   }
  10%, 16% { fill: var(--nexo-yellow); }
  20%, 26% { fill: var(--nexo-yellow); }
  30%, 36% { fill: var(--nexo-purple); }
  40%, 46% { fill: var(--nexo-red);    }
  50%, 56% { fill: var(--nexo-cyan);   }
  60%, 66% { fill: var(--nexo-dark);   }
  70%, 76% { fill: var(--nexo-yellow); }
  80%, 86% { fill: var(--nexo-cyan);   }
  90%, 96% { fill: var(--nexo-purple); }
  100%     { fill: var(--nexo-dark);   }
}

/* Rombo central de la X del logo */
@keyframes hero-logo-core-loop {
  0%,  6%  { fill: var(--nexo-cream);  }
  10%, 16% { fill: var(--nexo-purple); }
  20%, 26% { fill: var(--nexo-purple); }
  30%, 36% { fill: var(--nexo-yellow); }
  40%, 46% { fill: var(--nexo-green);  }
  50%, 56% { fill: var(--nexo-purple); }
  60%, 66% { fill: var(--nexo-cream);  }
  70%, 76% { fill: var(--nexo-purple); }
  80%, 86% { fill: var(--nexo-red);    }
  90%, 96% { fill: var(--nexo-yellow); }
  100%     { fill: var(--nexo-cream);  }
}

/* ---------------------------------------------------------------------------
   Logo de la sección "El programa" (home): es la MISMA X de marca del logo del
   banner, sólo que suelta (sin letras) y más grande. La animamos con los MISMOS
   keyframes, el MISMO reloj (--hero-loop) y el MISMO timing, y arrancando en la
   misma fase que el hero del home (verde · Fase 1 · delay 0) para que el
   logo de arriba y el de la sección cambien al unísono.
   --------------------------------------------------------------------------- */
.programa__x .x-arm  { animation: hero-logo-arm-loop  var(--hero-loop) ease-in-out 0s infinite; }
.programa__x .x-core { animation: hero-logo-core-loop var(--hero-loop) ease-in-out 0s infinite; }

/* Nota: en móvil la X de "El programa" ya NO viaja con el scroll (ver main.js),
   así que NO se promociona a capa y el bucle de color puede seguir activo sin
   provocar el "fantasma" sobre las cards. `fill` es una propiedad de pintado
   (no se compone en GPU), por eso animarla aquí no crea una capa de scroll. */

/* Accesibilidad: sin movimiento → se desactiva el bucle y cada hero queda fijo
   en su aspecto estático de identidad (el `color` base que recibe por parámetro,
   con sus X según las variables --hero-x-* del modificador); el logo del programa
   queda en sus colores fijos del SVG. */
@media (prefers-reduced-motion: reduce) {
  .hero--animated,
  .hero--animated .hero__x-arm,
  .hero--animated .hero__x-core,
  .hero--animated .x-arm,
  .hero--animated .x-core,
  .programa__x .x-arm,
  .programa__x .x-core {
    animation: none;
  }
}