/* ==================== INICIO ====================
   El hero ocupa como máximo una pantalla (alto de la ventana menos el menú), así no hay que
   hacer scroll. La imagen se muestra completa (sin recortes) anclada a la izquierda; si la
   pantalla es más ancha que la imagen, el resto se rellena con el mismo azul de su borde derecho.
   El texto va encima, en la mitad derecha. En pantallas pequeñas el texto pasa debajo de la imagen. */
.ae-page .hero {
  --alto-menu: 77px;             /* alto del menú: .nav-inner (76px) + borde inferior (1px), ver navbar.css */
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1673 / 941;      /* proporción de la imagen */
  max-height: calc(100vh - var(--alto-menu));
  max-height: calc(100svh - var(--alto-menu));
  min-height: 520px;             /* espacio mínimo para el texto y los botones */
  background: linear-gradient(180deg, #000e4a 0%, #00155a 50%, #000d47 100%);
}
.ae-page .hero-img {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  /* funde el borde derecho de la imagen con el fondo */
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
}

.ae-page .hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 3% 5% 3% 52%;
  background: linear-gradient(90deg, transparent 45%, rgba(4, 13, 40, 0.35) 100%);
}
.ae-page .hero-content { max-width: 520px; }
.ae-page .hero-eyebrow {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 4px;
}
.ae-page .hero-title {
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  color: var(--text-white);
  margin-bottom: 10px;
}
.ae-page .hero-desc {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: rgba(255, 255, 255, 0.93);
  max-width: 440px;
  margin: 0 0 18px;
}
.ae-page .hero-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 460px;
}
.ae-page .hero-buttons-grid .btn { padding: 13px 14px; font-size: 1.05rem; }

@media (max-width: 900px) {
  .ae-page .hero { aspect-ratio: auto; max-height: none; min-height: 0; background: var(--bg-dark-2); }
  .ae-page .hero-img { position: static; width: 100%; height: auto; -webkit-mask-image: none; mask-image: none; }
  .ae-page .hero-overlay {
    position: static;
    padding: 28px 6% 40px;
    background: var(--bg-dark-2);
  }
  .ae-page .hero-content { max-width: 560px; margin: 0 auto; text-align: center; }
  .ae-page .hero-desc { margin-left: auto; margin-right: auto; }
  .ae-page .hero-buttons-grid { margin: 0 auto; }
}
@media (max-width: 480px) {
  .ae-page .hero-buttons-grid { grid-template-columns: 1fr; }
}