@font-face {
    font-family: 'CEER-Fuente';
    src: url('../fonts/fuente_ceer/ITC_Avant_Garde_Gothic_Std/ITCAvantGardeStd-BkCn.otf') format('opentype');
    font-weight: 400;
    /* 400 = Normal (Book) */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CEER-Fuente';
    src: url('../fonts/fuente_ceer/ITC_Avant_Garde_Gothic_Std/ITCAvantGardeStd-BoldCn.otf') format('opentype');
    font-weight: 700;
    /* 700 = Bold */
    font-style: normal;
    font-display: swap;
}

/* 3. Estilo Italic (Cursiva/Oblicua) */
@font-face {
    font-family: 'CEER-Fuente';
    src: url('../fonts/fuente_ceer/ITC_Avant_Garde_Gothic_Std/ITCAvantGardeStd-BkCnObl.otf') format('opentype');
    font-weight: 400;
    /* Peso 'normal' */
    font-style: italic;
    /* <-- ¡AQUÍ CAMBIA! Es la versión oblicua */
    font-display: swap;
}

/* 4. Estilo Bold Italic (Negrita Cursiva/Oblicua) */
@font-face {
    font-family: 'CEER-Fuente';
    src: url('../fonts/fuente_ceer/ITC_Avant_Garde_Gothic_Std/ITCAvantGardeStd-BoldCnObl.otf') format('opentype');
    font-weight: 700;
    /* Peso 'bold' */
    font-style: italic;
    /* <-- ¡AQUÍ CAMBIA! Es la versión oblicua */
    font-display: swap;
}

@font-face {
    font-family: 'CEER-Fuente';
    src: url('../fonts/fuente_ceer/ITC_Avant_Garde_Gothic_Std/ITCAvantGardeStd-DemiCn.otf') format('opentype');
    font-weight: 600;
    /* <-- Peso Semi-Bold */
    font-style: normal;
    font-display: swap;
}

/* 6. Estilo Demi Oblique (Semi-Bold Cursiva) Opcional */
@font-face {
    font-family: 'CEER-Fuente';
    src: url('../fonts/fuente_ceer/ITC_Avant_Garde_Gothic_Std/ITCAvantGardeStd-DemiCnObl.otf') format('opentype');
    font-weight: 600;
    /* <-- Peso Semi-Bold */
    font-style: italic;
    font-display: swap;
}

/* ...el resto de tu CSS... */
/* Estilos básicos para el cuerpo y el contenido principal */
body {
    padding: 0px;
    margin: 0px;
    /* Esto no cambia: */
    font-family: 'CEER-Fuente', 'Roboto', sans-serif;
}


/* Personalización de colores de Material Design */
:root {
    /* Color principal de tu marca (el gris/verde oscuro) */
    --mdc-theme-primary: #7A8564;
    /* Color secundario/acento de tu marca (el amarillo/verde claro) */
    --mdc-theme-secondary: #DDE666;

    /* Color del texto sobre el color primario (idealmente blanco o negro para contraste) */
    --mdc-theme-on-primary: #ffffff;
    /* Texto blanco para que contraste con el primario oscuro */
    /* Color del texto sobre el color secundario (idealmente blanco o negro para contraste) */
    --mdc-theme-on-secondary: #7A8564;
    /* Texto negro para que contraste con el secundario claro */

    /* Otros colores (opcional, para controlar más aspectos): */
    /* --mdc-theme-surface: #ffffff;  Color de las superficies (tarjetas, fondos) */
    /* --mdc-theme-on-surface: #000000; Color del texto sobre las superficies */
    /* --mdc-theme-error: #b00020;  Color para mensajes de error */
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

/* 1. El contenedor principal (ahora sin fondo propio) */
.custom-top-bar {
    z-index: 100;

    /* Quitamos el fondo de aquí */
    background: none !important;

    box-shadow: none !important;
    color: var(--mdc-theme-primary);
    transition: color 0.3s ease-in-out;
}

/* 2. Estilos base para AMBOS pseudo-elementos */
.custom-top-bar::before,
.custom-top-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Se colocan detrás del contenido (texto, logo) */
}

/* 3. La capa INFERIOR (::before) con el gradiente de color */
/* Esta capa siempre está ahí, debajo de la blanca */
.custom-top-bar::before {
    background: linear-gradient(to bottom, var(--mdc-theme-primary) 60%, #7a8564d2 80%, #7a856480 90%, #7a856400 100%);
}

/* 4. La capa SUPERIOR (::after) con el gradiente blanco */
/* Esta es la capa que vamos a desvanecer */
.custom-top-bar::after {
    background: linear-gradient(to bottom, white 60%, rgba(255, 255, 255, .8) 80%, rgba(255, 255, 255, .5) 90%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
    /* Visible por defecto */
    transition: opacity 0.3s ease-in-out;
}

/* 5. La magia: Al hacer hover, la capa SUPERIOR (blanca) desaparece */
.custom-top-bar:hover::after {
    opacity: 0;
}

/* No olvides las reglas para el color del texto y los links */
.custom-top-bar:hover {
    color: var(--mdc-theme-on-primary) !important;
}

.mdc-top-app-bar--fixed {
    top: 0 !important;
}

/* --- NUEVA REGLA: Ajusta la altura de la barra --- */
/* Esto es necesario porque tu logo es grande (100px) */
.mdc-top-app-bar--fixed .mdc-top-app-bar__row {
    height: 76px;
    /* Un poco más que la altura del logo para dar espacio */
}

/* --- Estilos para la Sección Izquierda (Logo y Marca) --- */
.brand-logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Quita el subrayado del enlace */
    color: inherit;
    /* Hereda el color de la barra (#DDE666) */
}

.custom-top-bar .logo {
    height: 100px;
    /* Ajusta la altura del logo según necesites */
    width: auto;
    margin-right: 12px;
    /* Espacio entre el logo y el texto */
}


/* --- Estilos para la Sección Derecha (Links de Navegación) --- */
.nav-link {
    /* Hacemos el fondo transparente y el texto del color del logo */
    background-color: transparent !important;
    color: var(--mdc-theme-primary) !important;

    text-transform: none;
    /* Evita que los botones se pongan en mayúsculas */
    font-weight: bold;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* Efecto hover para los links (se mantiene igual y funciona perfecto) */
.nav-link:hover {
    background-color: #dde666a9 !important;
    /* Un leve brillo del color claro al pasar el ratón */
}

.custom-top-bar:hover .nav-link {
    color: var(--mdc-theme-on-primary) !important;
    /* --mdc-theme-on-primary ya es #ffffff (blanco) */
}

/* --- ESTILOS PARA LAS VENTANAS EMERGENTES (POPUPS) --- */

/* 1. Contenedor del link y su popup */
/* Es CRUCIAL que tenga position: relative para que el popup se posicione correctamente */
.nav-item {
    position: relative;
    display: inline-block;
    /* Para que se coloquen uno al lado del otro */
}

/* 2. La ventana emergente (popup) */
.nav-popup {
    /* Oculto por defecto */
    opacity: 0;
    visibility: hidden;

    /* Posicionamiento */
    position: absolute;
    top: 100%;
    /* Justo debajo del nav-item */
    right: 0%;
    /* transform: translateX(0%);  Truco para centrarlo horizontalmente */
    z-index: 10;
    /* Para que aparezca por encima de otro contenido */

    /* Estilos visuales */
    background-color: rgba(255, 255, 255, 0.70);
    color: #333;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 16px;
    width: 0px;
    /* Ancho de la ventana */
    text-align: left;

    /* Transición suave */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, width 0.3s ease-in-out;
}

/* Estilos para el contenido dentro del popup */
.nav-popup h4 {
    margin-top: 0;
    color: var(--mdc-theme-primary);
    /* Usa tu color primario */
}

.nav-popup p {
    font-size: 14px;
    margin-bottom: 0;
}


/* 3. La magia: Mostrar el popup con :hover ✨ */
/* Cuando pases el mouse sobre el contenedor .nav-item... */
.nav-item:hover .nav-popup {
    /* ...haz visible el popup que está dentro */
    opacity: 1;
    width: 300px;
    visibility: visible;
}

.redes {
    margin-top: 10px;
    color: var(--mdc-theme-primary);
    font-size: 20px;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ... (El resto de tus estilos de main.css) ... */


/* --- ESTILOS DEL PIE DE PÁGINA (FOOTER) --- */

.site-footer {
    /* El color de fondo de tu marca */
    background-color: var(--mdc-theme-primary);
    padding: 24px 5%;
    /* 24px de espacio arriba/abajo, 5% a los lados */
    margin-top: auto;
    /* Empuja el footer al fondo si el contenido es corto */
    color: var(--mdc-theme-on-primary);
    /* Color blanco para los iconos */
}

.footer-content {
    width: 100%;
    margin: 0 auto;
    /* Centra el contenido */

    /* Magia de Flexbox */
    display: flex;
    justify-content: space-between;
    /* Empuja el logo a la izq. y las redes a la der. */
    align-items: center;
    /* Centra todo verticalmente */
}

.footer-logo img {
    height: 60px;
    /* Ajusta la altura de tu logo en el footer */
    width: auto;
    display: block;
    /* Previene espacios extra debajo de la imagen */
}

.footer-social {
    display: flex;
    /* Pone los iconos uno al lado del otro */
    align-items: center;
}

.footer-social a {
    /* El círculo blanco */
    background-color: #ffffff;

    /* El color del icono (bi) de adentro, usa tu color primario */
    color: var(--mdc-theme-primary);

    width: 44px;
    /* Tamaño del círculo */
    height: 44px;
    border-radius: 50%;
    /* Lo hace redondo */

    /* Centra el icono dentro del círculo */
    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: 16px;
    /* Espacio entre cada icono */
    text-decoration: none;
    font-size: 24px;
    /* Tamaño del icono bootstrap */

    /* Transición suave para el hover */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Efecto hover (usa tus colores secundarios) */
.footer-social a:hover {
    background-color: var(--mdc-theme-secondary);
    color: var(--mdc-theme-on-secondary);
}

.sub-footer {
    /* Un color de fondo oscuro pero no negro puro */
    background-color: #333;

    /* Un color de texto claro pero no blanco puro, para que sea sutil */
    color: rgba(255, 255, 255, 0.7);

    /* Hacemos esta barra más delgada que el footer principal */
    padding: 6px 5%;
    text-align: center;
}

.sub-footer-content {
    width: 100%;
    margin: 0 auto;

    /* Flexbox para alinear el copyright y tu nombre */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-footer p {
    margin: 0;
    /* Quitamos márgenes por defecto */
    font-size: 14px;
    /* Texto pequeño y discreto */
}

/* Estilo para tu enlace de crédito */
.sub-footer a {
    /* ¡Usamos tu color secundario para que resalte! */
    color: var(--mdc-theme-secondary);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease;
}

.sub-footer a:hover {
    text-decoration: underline;
    color: #ffffff;
    /* Un blanco brillante al pasar el mouse */
}

/* --- ESTILOS DE NAVEGACIÓN MÓVIL (RESPONSIVE) --- */

/* 1. Botón de hamburguesa (oculto por defecto) */
.mobile-menu-toggle {
    display: none;
    /* Oculto en escritorio */
    background: none;
    border: none;
    color: var(--mdc-theme-primary);
    /* Color del icono */
    cursor: pointer;
    padding: 8px;
    margin-left: 8px;
}

.mobile-menu-toggle .material-symbols-outlined {
    font-size: 32px;
}

.custom-top-bar:hover .mobile-menu-toggle {
    color: var(--mdc-theme-on-primary);
    /* Se pone blanco al hacer hover en la barra */
}


/* 2. Panel deslizable (oculto por defecto) */
.mobile-drawer {
    position: fixed;
    top: 76px;
    /* Altura de tu header */
    right: -100%;
    /* Oculto fuera de la pantalla a la izquierda */
    width: 58%;
    max-width: 300px;
    height: calc(60vh);
    /* 100% de la altura menos el header */
    border-radius: 8px 0px 0px 8px;
    border: 1px solid #ddd;
    background-color: #ffffffe5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    /* Apila los enlaces verticalmente */
}

/* 3. Estilo para el panel cuando está abierto */
.mobile-drawer.is-open {
    right: 0;
    /* Lo trae a la pantalla */
}

/* 4. Estilos de los enlaces dentro del panel */
.mobile-drawer-link {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--mdc-theme-primary);
    text-decoration: none;
    padding: 16px;
    border-bottom: 1px solid #ddd;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.mobile-drawer-link:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.redes-mobile {
    margin-top: auto;
    /* Empuja las redes al fondo del drawer */
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    background-color: var(--mdc-theme-primary);
    border-bottom-left-radius: 8px;
}

.redes-mobile a {
    /* El círculo blanco */
    background-color: #ffffff;

    /* El color del icono (bi) de adentro, usa tu color primario */
    color: var(--mdc-theme-primary);

    width: 44px;
    /* Tamaño del círculo */
    height: 44px;
    border-radius: 50%;
    /* Lo hace redondo */

    /* Centra el icono dentro del círculo */
    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: 16px;
    /* Espacio entre cada icono */
    text-decoration: none;
    font-size: 24px;
    /* Tamaño del icono bootstrap */

    /* Transición suave para el hover */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ... (Todo tu CSS existente, incluyendo las media queries del responsive) ... */


/* --- BOTÓN FLOTANTE DE WHATSAPP (FAB) --- */

.whatsapp-fab {
    position: fixed;
    /* Fija el botón en la pantalla */
    bottom: 25px;
    /* 25px desde abajo */
    right: 25px;
    /* 25px desde la derecha */
    z-index: 1000;
    /* Se asegura de que esté por encima de todo */

    /* Estilo del círculo */
    background-color: var(--mdc-theme-primary);
    /* Color oficial de WhatsApp */
    color: var(--mdc-theme-on-primary);
    /* Icono en blanco */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Círculo perfecto */

    /* Centra el icono dentro del círculo */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Sombra para el efecto "flotante" */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    /* Estilo del icono */
    font-size: 30px;
    /* Tamaño del icono de WhatsApp */
    text-decoration: none;

    /* Transición suave para el hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto al pasar el mouse */
.whatsapp-fab:hover {
    transform: scale(1.1);
    /* Se agranda un 10% */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    /* Sombra más pronunciada */
}

/* --- LA MEDIA QUERY (El punto de quiebre) --- */
/* Estilos que se aplican SÓLO si la pantalla mide 900px o menos */

@media (max-width: 900px) {

    /* 1. Oculta la navegación de escritorio */
    nav.main-nav {
        display: none;
    }

    /* 2. Muestra el botón de hamburguesa */
    .mobile-menu-toggle {
        display: block;
    }

    /* --- Footer Principal --- */
    .footer-content {
        flex-direction: column;
        /* Apila el logo y las redes */
        gap: 24px;
        /* Añade espacio entre ellos */
    }

    .footer-logo img {
        height: 50px;
        /* Logo un poco más pequeño */
    }

    .footer-social a {
        margin-left: 8px;
        /* Reduce espacio entre iconos */
        margin-right: 8px;
    }

    /* --- Sub-Footer (Copyright) --- */
    .sub-footer-content {
        flex-direction: column;
        /* Apila los textos */
        gap: 8px;
        /* Añade espacio */
    }

    .sub-footer p {
        font-size: 12px;
    }
}