/* ==========================================================================
   PLANTILLA EFA - ARCHIVO HISTÓRICO
   CSS Consolidado y Optimizado (Alto Valor)
   ========================================================================== */

/* 1. VARIABLES GLOBALES (Solamente definidas una vez)
   ========================================================================== */
:root {
    --azul-institucional: #1c2b39; /* Azul oscuro */
    --dorado-ocre: #c59d5f;        /* Dorado ocre */
    --papel-antiguo: #f5f2e9;      /* Crema */
    --gris-claro: #eceff1;         /* Gris muy claro */
    --blanco: #ffffff;             /* Blanco puro */
    --texto-oscuro: #333333;       /* Gris oscuro para texto */
}

/* 2. ESTILOS BASE Y TIPOGRAFÍA
   ========================================================================== */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--texto-oscuro);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'Georgia', serif;
    color: var(--azul-institucional);
}

/* 3. AYUDANTES DE DISEÑO (Layout Helpers)
   ========================================================================== */
.efa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Sección de fondo: Papel Antiguo */
.efa-bg-paper {
    background-color: var(--papel-antiguo);
    padding: 1px 0; /* Espaciado generoso */
}

/* Sección de fondo: Gris Claro */
.efa-bg-light {
    background-color: var(--gris-claro);
    padding: 60px 0;
}

/* 4. ENCABEZADO (HEADER) - Estilo de Dos Filas
   ========================================================================== */
.efa-header {
    background-color: transparent; /* Transparente sobre el 'hero' */
    position: absolute;
    width: 100%;
    z-index: 10;
}

/* 4.1 Fila Superior: Logo y Buscador */
.efa-top-bar {
    background-color: #1b2a3b;
    padding: 18px 40px 14px;
    border-bottom: 2px solid #0d1b2a;
}

.efa-top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo: Más grande como solicitaste */
.efa-logo img {
    max-height: 80px;
    width: auto;
    transition: max-height 0.3s ease;
}

/* Buscador */
.efa-search {
    color: var(--dorado-ocre);
    cursor: pointer;
    font-size: 1.2rem;
}

/* 4.2 Fila de Menú: Soporte para Submenús */
.efa-main-menu {
    text-align: center;
    position: relative;
}

/* Solo la lista principal debe ser flexible */
.efa-main-menu > ul {
    list-style: none;
    display: inline-flex; 
    gap: 30px; 
    margin: 0;
    padding: 0;
    color: white;
}

/* Ítems de la lista principal */
.efa-main-menu > ul > li {
    position: relative; /* Base para posicionar el submenú */
}

/* Enlaces principales */
.efa-main-menu a {
    color: #c8d4df !important;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
    display: block;
    padding: 10px 0;
    transition: color 0.3s ease;
}

/* --- CONFIGURACIÓN DEL SUBMENÚ (DESPLEGABLE) --- */

/* Seleccionamos el UL que está dentro de un LI */
.efa-main-menu ul li ul {
    display: none;             /* Oculto por defecto */
    position: absolute;        /* Flota sobre el contenido */
    top: 100%;                 /* Aparece justo debajo del padre */
    left: 0;
    background-color: var(--azul-institucional);
    list-style: none;
    margin: 0;
    padding: 10px 0;
    min-width: 220px;          /* Ancho para que quepa el texto */
    flex-direction: column;    /* Los sub-ítems van uno abajo del otro */
    text-align: left;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 999;
}

/* Mostrar submenú al pasar el mouse sobre el LI padre */
.efa-main-menu ul li:hover > ul {
    display: flex; 
}

/* Estilo de los enlaces dentro del submenú */
.efa-main-menu ul li ul li {
    width: 100%;
}

.efa-main-menu ul li ul li a {
    padding: 10px 20px;
    font-size: 0.85rem;
    text-transform: none;      /* Se ve más limpio en minúsculas/normal */
    letter-spacing: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.efa-main-menu ul li ul li a:hover {
    background-color: var(--dorado-ocre);
    color: var(--azul-institucional) !important;
}

/* Desactivar el efecto de la rayita blanca en los sub-ítems */
.efa-main-menu ul li ul li a::after {
    display: none;
}

.efa-menu-bar {
    background-color: #162030;
    padding: 0 40px;
    border-bottom: 1px solid #0a1520;
    position: relative;
    z-index: 11;
}

/* Enlaces de menú principal */
.efa-main-menu > ul > li > a {
    color: #c8d4df !important;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
    padding: 13px 22px;
    text-shadow: none;
}

/* Color al pasar el mouse por el menú principal */
.efa-main-menu > ul > li > a:hover,
.efa-main-menu > ul > li.active > a {
    color: #f5e642 !important;
    background-color: rgba(245, 230, 66, 0.06);
}


/* Quitar el subrayado en el botón 'Contacto' */
.efa-contact-btn::after {
    display: none;
}

/* ==========================================================================
   PLANTILLA EFA - ARCHIVO HISTÓRICO
   CSS Consolidado y Optimizado (Alto Valor)
   ========================================================================== */

/* ... (Mantenemos las variables, estilos base, ayudantes, encabezado, footer, submenú) ... */
/* Asegúrate de mantener todo el código previo hasta el inicio de la SECCIÓN HERO */

/* 5. SECCIÓN HERO (Banner Principal) - CORREGIDA Y OPTIMIZADA (image_26.png)
   ========================================================================== */
.efa-hero {
    background-image:
        url('https://historiaaviacionenchile.cl/images/portadaNuevaEFA.jpg');

    background-size:     contain;
    background-position: center 143px;
    background-repeat:   no-repeat;
    background-color:    transparent;

    color: var(--blanco);

    padding-top: 45%;  /* 750/1550 = 48.39% — altura proporcional a la imagen */
    height: 0;
    min-height: 0;
    max-height: none;
    position: relative;

    display:         flex;
    justify-content: flex-end;
    align-items:     flex-end;

    padding-left:   clamp(20px, 4vw, 60px);
    padding-right:  clamp(20px, 4vw, 60px);
    padding-bottom: clamp(20px, 3vw, 50px);
}

/* MÓDULO DE JOOMLA: Targeteamos el contenedor que envuelve el contenido del módulo */
/* ELIMINAR ESTILOS DE CAJA Y ALINEAR TEXTO A LA DERECHA */
.efa-hero > div {
    max-width: 650px; /* Ancho máximo para legibilidad, como en la referencia */
    width: 100%; /* Asegura que el div use todo el ancho permitido */
    text-align: right; /* Alinea el texto y botones DENTRO de este div a la derecha */
    
    /* Eliminar estilos de caja de la versión anterior (image_25.png) */
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}

/* Título Hero: Texto blanco con sombra para legibilidad */
.efa-hero h1 {
    color: var(--blanco);
    font-size: 3.5rem;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra suave para mejor legibilidad */
    margin-bottom: 20px;
    margin-top: 0;
}

/* Párrafo Hero: Texto blanco puro con sombra */
.efa-hero p {
    color: var(--blanco); /* Blanco puro */
    font-size: 1.1rem;
    margin-bottom: 40px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Sombra suave */
}

/* Botones del hero: Ya tienen estilos por defecto que los alinean bien a la derecha con text-align: right */

/* Eliminamos completamente la clase .efa-hero-overlay */

/* 6. TARJETAS (PILARES DOCUMENTALES)
   ========================================================================== */
/* ... (Mantenemos los estilos de las tarjetas tal cual están) ... */

/* 6. TARJETAS (PILARES DOCUMENTALES)
   ========================================================================== */
.efa-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 15px;
}

.efa-card {
    background: var(--blanco);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    text-align: center;
    padding-bottom: 20px;
}

.efa-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* 7. PIE DE PÁGINA (FOOTER)
   ========================================================================== */
.efa-footer-top {
    background-color: var(--blanco);
    padding: 50px 0;
    border-top: 1px solid #ddd;
}

.efa-footer-bottom {
    background-color: var(--azul-institucional);
    color: var(--blanco);
    padding: 40px 0;
    font-size: 0.8rem;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
}

/*.efa-main-menu ul li ul {
    background-color: var(--azul-institucional); 
    border-top: 3px solid var(--dorado-ocre); 
}*/

/*.efa-main-menu ul li ul li a {
    color: #ffffff !important;
    text-transform: none;
    padding: 12px 20px;
} */

.efa-brand-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    color: #f5e642;
    letter-spacing: 0.02em;
    line-height: 1.15;
}

.efa-brand-subtitle {
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.03em;
    margin-top: 4px;
}

.efa-logo a {
    text-decoration: none;
}

/* MENÚ JOOMLA - Clases reales */
.efa-main-menu .nav-item > a,
.efa-main-menu .nav-item > span {
    color: #c8d4df !important;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
    display: block;
    padding: 13px 22px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.efa-main-menu .nav-item > a:hover,
.efa-main-menu .nav-item > span:hover {
    color: #f5e642 !important;
    background-color: rgba(245, 230, 66, 0.06);
}

/* Submenú */
.efa-main-menu .mod-menu__sub {
    background-color: #1b2a3b;
    border-top: 3px solid var(--dorado-ocre);
}

.efa-main-menu .mod-menu__sub .nav-item > a {
    color: #ffffff !important;
    padding: 12px 20px;
    font-size: 0.85rem;
}

.efa-main-menu .mod-menu__sub .nav-item > a:hover {
    background-color: var(--dorado-ocre);
    color: var(--azul-institucional) !important;
}

/* MENÚ TERCER NIVEL - Submenú lateral */
.efa-main-menu ul li ul li {
    position: relative;
}

.efa-main-menu ul li ul li ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #1b2a3b;
    border-top: 3px solid var(--dorado-ocre);
    list-style: none;
    margin: 0;
    padding: 10px 0;
    min-width: 200px;
    flex-direction: column;
    text-align: left;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    z-index: 999;
}

.efa-main-menu ul li ul li:hover > ul {
    display: flex;
}

.efa-main-menu ul li ul li ul li a {
    color: #ffffff !important;
    padding: 10px 20px;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.efa-main-menu ul li ul li ul li a:hover {
    background-color: var(--dorado-ocre);
    color: var(--azul-institucional) !important;
}


/* 1. Importar tipografías de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

/* 2. Contenedor Principal */
.hero-aviacion-header {
  /* Si la imagen ya está puesta desde el constructor de tu plantilla, 
     puedes ignorar el background-image aquí. Si no, descoméntalo: */
  /* background-image: url('../ruta/a/tu/Header1.png'); */
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Mantiene el texto alineado a la derecha */
  padding: 5% 8%;
  min-height: 500px; /* Ajusta según el tamaño deseado */
}

/* 3. Caja de texto con fondo semitransparente (Overlay) */
.hero-contenido {
  max-width: 650px;
  background-color: rgba(0, 0, 0, 0.6); /* Fondo negro al 60% de opacidad */
  padding: 40px;
  border-radius: 8px; /* Bordes ligeramente redondeados */
  text-align: left;
  border-left: 4px solid #D4AF37; /* Un toque sutil del dorado original */
}

/* 4. Estilos del Título */
.hero-contenido h1 {
  font-family: 'Playfair Display', serif;
  color: #FFFFFF;
  font-size: 2.5rem;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 20px;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Sombra extra para asegurar lectura */
}

/* 5. Estilos del Subtítulo */
.hero-contenido p {
  font-family: 'Montserrat', sans-serif;
  color: #F8F9FA;
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* 6. Estilos del Botón */
.btn-galeria {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  padding: 12px 28px;
  border: 2px solid #FFFFFF;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* Efecto al pasar el mouse por el botón */
.btn-galeria:hover {
  background-color: #FFFFFF;
  color: #222222;
  text-decoration: none;
}