/* --- Definición de la forma de la curva --- */
/* Esto no es visible, solo define la máscara */
#clip-shape-svg {
    width: 0;
    height: 0;
    position: absolute;
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    background-color: #0A2A5B; /* Coincide con el color del footer */
    /* Estructura Flex para empujar el footer hacia abajo */
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

/* Hace que el contenido principal ocupe todo el espacio disponible, empujando el footer hacia abajo */
main {
    flex-grow: 1 !important;
    position: relative;
    z-index: 1;
}


/* --- 1. Contenedor Principal del Header --- */
.css-header {
    position: sticky; /* MODIFICADO: Para que el header se quede fijo */
    top: 0; /* Lo pegamos a la parte superior de la pantalla */
    z-index: 1000; /* Nos aseguramos de que esté por encima de todo el contenido */
    height: auto; /* Altura flexible para móvil */
    min-height: 80px;
    background-color: #084b8a; /* Fondo azul principal */
    color: white;
    overflow: hidden; /* Evita que los pseudo-elementos se salgan */
}

/* --- 2. Capa Blanca Curva (Pseudo-elemento) --- */
.css-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 15px; 
    
    /* Ancho dinámico: 100% menos el ancho del menú */
    width: calc(100% - 550px); 
    
    background-color: white;
    z-index: 1; /* Por debajo del contenido, por encima del azul */
    
    /* La máscara SVG que define la curva */
    clip-path: url(#wave-clip);
}

/* --- 3. Barra de Degradado Inferior (Pseudo-elemento) --- */
.css-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px;
    /* Degradado de la imagen original */
    background-image: linear-gradient(to right, 
        #003f7b, 
        #0080c5, 
        #7fbf40, 
        #0080c5, 
        #003f7b
    );
    z-index: 2; /* Encima del azul y la forma blanca */
}

/* --- 4. Contenido (Logo + Texto) --- */
.header-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 15px; /* Alineado por encima de la barra de degradado */
    height: 90px;
    
    /* Ancho dinámico para coincidir con la capa blanca */
    width: calc(100% - 550px);
    /* Usamos Flexbox para centrar todo */
    display: flex;
    align-items: center;
    padding-left: 50px; /* Un poco de espacio desde el borde */
    box-sizing: border-box; /* Para que el padding no afecte el ancho */
    
    z-index: 3; /* ¡Encima de todo! */
}

.header-content img {
    height: 50px; /* Ajuste de altura del logo */
    margin-right: 20px;
}

.header-logo-group {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-content p {
    font-size: 0.9rem; /* 16px aprox */
    color: #6a6a6a; /* Color gris del texto */
    margin-top: 10px;
}

/* --- 5. Menú de Navegación --- */
.header-menu {
    position: absolute;
    top: 0;
    bottom: 15px; /* Alineado por encima de la barra */
    height: 90px;
    
    /* Ocupa el espacio restante a la derecha */
    width: 550px; /* Ancho fijo para el menú */
    right: 0;
    left: auto; /* Anulamos el 'left' anterior */
    
    z-index: 3; /* Encima del fondo azul */
    
    /* Distribuimos el menú en el espacio disponible */
    display: flex;
    justify-content: space-evenly; /* DISTRIBUIMOS UNIFORMEMENTE */
    align-items: center;
    padding: 0 20px; /* Espacio en los bordes del menú */
    box-sizing: border-box;
}

.header-menu ul {
    display: flex;
    justify-content: space-evenly; /* Aseguramos distribución */
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-menu li a {
    text-decoration: none;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 0.85rem;
    position: relative; /* Para el subrayado */
    padding-bottom: 5px;
    /* Añadimos una transición de color de texto */
    transition: color 0.3s ease-in-out;
}

.header-menu li a:hover {
    color: #8cc63f; /* Verde del logo */
}

.header-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #8cc63f; /* Verde del logo */
    border-radius: 2px;
    transform: scaleX(0); /* Inicia oculta */
    transform-origin: left; /* Crece desde la izquierda */
    transition: transform 0.3s ease-in-out; /* Velocidad de la animación */
}

.header-menu li a:hover::after {
    transform: scaleX(1); /* Muestra la línea al pasar el mouse */
}

/* --- 6. Estilos para el Menú Móvil --- */
.mobile-menu-button {
    display: none; /* Oculto por defecto */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
}

.mobile-menu-button .icon-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: transform 0.3s ease;
}

/* --- 7. Media Queries para Responsividad --- */

/* Ajuste para que el texto se divida en 2 líneas en pantallas medianas */
@media (max-width: 1334px) {
    .header-content p {
        max-width: 250px; /* Forzamos el quiebre de línea */
    }
}

/* Estilos para Escritorio (a partir de 1100px) */
@media (min-width: 1100px) {
    .css-header {
        height: 100px; /* Volvemos a la altura fija */
    }
}

/* Estilos para Tablet y Móvil (hasta 1099px) */
@media (max-width: 1099px) {
    .css-header {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 140px;
    }

    /* Ocultamos la curva y la parte blanca compleja */
    .css-header::before {
        display: none;
        width: 100%; /* Anulamos el calc() */
    }

    /* El contenido del logo ahora es un bloque simple */
    .header-content {
        position: static;
        width: 100%;
        height: 80px;
        background-color: white;
        justify-content: space-between; /* Espacio entre grupo-logo y botón-menú */
        width: 100%; /* Anulamos el calc() */
        padding: 0 20px;
        /* Ya no apilamos, volvemos a la fila por defecto */
    }

    .header-content img {
        height: 40px; /* Logo un poco más pequeño */
        margin-right: 15px; /* Espacio entre logo y texto */
    }

    .header-content p {
        display: block; /* AHORA SE MUESTRA */
        font-size: 0.8rem; /* Con una fuente más pequeña */
        text-align: left;
        line-height: 1.2; /* Ajuste para texto en dos líneas */
        max-width: 200px; /* Forzamos el quiebre de línea */
    }

    /* Mostramos el botón de hamburguesa */
    .mobile-menu-button {
        display: block;
    }

    /* El menú se oculta y se prepara para ser un bloque */
    /* Hacemos la regla más específica para asegurar que se aplique */
    .css-header .header-menu {
        display: none; /* Oculto por defecto */
        position: static;
        width: 100%;
        padding: 0; /* Reseteamos padding */
        box-sizing: content-box;
        height: auto;
        /* Aseguramos que el fondo azul se extienda */
        background-color: #084b8a;
    }

    /* Se muestra al hacer clic */
    /* Hacemos la regla más específica para asegurar que se aplique */
    .css-header .header-menu.menu-open {
        display: block; /* Se muestra al hacer clic */
    }

    /* Aseguramos que la lista dentro del menú también se muestre y se apile */
    .css-header .header-menu.menu-open ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
    }
    .header-menu ul {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .header-menu li a {
        display: block;
        padding: 15px 20px;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .header-menu li a::after {
        display: none; /* Ocultamos la línea animada en móvil */
    }
}

/*
 * SOLUCIÓN GLOBAL PARA VIÑETAS:
 * Tailwind CSS elimina los estilos de lista por defecto. Esta regla los restaura
 * para cualquier lista (ul) que se encuentre dentro de nuestros contenedores de contenido.
*/
main ul {
    list-style: disc !important;
    padding-left: 2rem !important;
}