/*
Theme Name: GeneratePress Child
Template: generatepress
*/


/* ==========================================================================
   Header Styles - Foco Studio (Final con Hamburguesa en medio)
   ========================================================================== */

/* Contenedor Principal Sticky */
.sticky-header {
    background-color: #EEEEEE;
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
}

.header-container {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 84px;
}

/* --- Logo --- */
.site-branding {
    flex-shrink: 0;
}

.site-branding .custom-logo,
.site-branding img {
    width: 79.83px;
    height: auto;
    display: block;
}

/* --- Menú de Navegación (Desktop) --- */
.main-navigation {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 35px;
    align-items: center;
    flex-grow: 1;
    justify-content: center;
}

.main-navigation a {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #666666;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
}

.main-navigation a:hover {
    color: #212121;
}

/* --- Botón CTA --- */
.header-cta {
    flex-shrink: 0;
}

/* --- Botón CTA --- */
.btn-contacto {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500; /* Medium */
    color: #212121;
    background-color: #EEEEEE; /* Mismo color del header para que el efecto se vea bien */
    padding: 10px 28px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: none; /* Sin borde, tal como indicaste */
    
    /* Efecto Neumorfismo: Las 2 sombras internas exactas de tu diseño */
    box-shadow: 
        inset -2px -2px 2px rgba(255, 255, 255, 0.30), /* Sombra blanca al 30% */
        inset 2px 2px 2px rgba(0, 0, 0, 0.10);       /* Sombra negra al 10% */
}

.btn-contacto:hover {
    background-color: #212121;
    color: #FFFFFF;
    box-shadow: none; /* Quitamos las sombras internas porque el fondo ahora es oscuro */
}

/* --- Responsive (Mobile / Tablet) --- */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger {
    display: block;
    width: 25px;
    height: 2px;
    background-color: #212121;
    position: relative;
}

.hamburger::before, .hamburger::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 2px;
    background-color: #212121;
    left: 0;
    transition: 0.3s;
}
.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

@media (max-width: 991px) {
    .header-container {
        height: 70px;
        justify-content: space-between; /* Mantiene los elementos distribuidos */
    }

    .menu-toggle {
        display: block;
        margin-left: 20px; /* Da un respiro respecto al logo */
        margin-right: auto; /* EMPUJA el botón de contacto hacia la derecha */
    }

    /* Reducimos un poco el padding del botón en móvil para que no colapse */
    .btn-contacto {
        padding: 8px 20px;
        font-size: 14px;
    }

    /* Convertimos el nav en el menú desplegable */
    .main-navigation {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: #EEEEEE;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        padding: 20px 0;
        flex-direction: column;
    }

    .main-navigation.is-active {
        display: flex;
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
    }
}


/* ==========================================================================
   Estilos de Submenús (Dropdowns) - Foco Studio
   ========================================================================== */

/* 1. Posicionamiento para items con submenú */
.main-navigation ul li {
    position: relative;
}

/* 2. Formato del contenedor desplegable (.sub-menu) */
.main-navigation ul ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: #EEEEEE;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 0;
    margin: 10px 0 0 0;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    
    /* Control de Visibilidad y Transición Suave */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

/* Puente invisible para evitar que el menú se cierre al mover el ratón */
.main-navigation ul ul.sub-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

/* Mostrar submenú al hacer hover sobre el item padre */
.main-navigation ul li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 3. Items individuales dentro del submenú */
.main-navigation ul ul.sub-menu li {
    width: 100%;
}

.main-navigation ul ul.sub-menu a {
    display: block;
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    color: #666666;
    text-align: left;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* Hover en las opciones del submenú */
.main-navigation ul ul.sub-menu a:hover {
    color: #212121;
    background-color: rgba(0, 0, 0, 0.03);
    padding-left: 24px; /* Pequeño desplazamiento dinámico */
}

/* 4. Submenús Anidados (2º Nivel en adelante) */
.main-navigation ul ul.sub-menu ul.sub-menu {
    top: 0;
    left: 100%;
    margin-top: -12px;
}


/* ==========================================================================
   Estilos EXCLUSIVOS para Menú Móvil y Submenús (Ocultos por defecto)
   ========================================================================== */
@media (max-width: 991px) {

    /* Contenedor principal del menú móvil */
    .main-navigation {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: #EEEEEE;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        padding: 20px 25px;
        flex-direction: column;
    }

    .main-navigation.is-active {
        display: flex;
    }

    /* Lista principal */
    .main-navigation ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    /* Items principales */
    .main-navigation ul li {
        width: 100%;
        text-align: left;
        position: relative;
    }

    .main-navigation ul li > a {
        font-size: 16px;
        font-weight: 500;
        color: #212121;
        display: block;
        padding: 8px 0;
    }

    /* SUBMENÚS: Ocultos por defecto */
    .main-navigation ul ul.sub-menu {
        display: none; /* Se oculta completamente */
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
        margin: 4px 0 10px 10px;
        padding: 4px 0 4px 15px;
        background-color: transparent;
        border-radius: 0;
        border-left: 2px solid #CCCCCC;
    }

    /* MOSTRAR SUBMENÚ: Al hacer hover/tap o si WordPress/GeneratePress añade clase de despliegue */
    .main-navigation ul li:hover > ul.sub-menu,
    .main-navigation ul li:focus-within > ul.sub-menu,
    .main-navigation ul li.sfHover > ul.sub-menu {
        display: flex; /* Se despliega únicamente al interactuar */
    }

    /* Enlaces dentro del submenú */
    .main-navigation ul ul.sub-menu li {
        width: 100%;
    }

    .main-navigation ul ul.sub-menu a {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        text-align: left;
        display: block;
        padding: 5px 0;
    }

    .main-navigation ul ul.sub-menu a:hover,
    .main-navigation ul ul.sub-menu a:focus {
        color: #212121;
    }

    /* SUBMENÚS de 2º Nivel (Anidados) */
    .main-navigation ul ul.sub-menu ul.sub-menu {
        margin: 4px 0 6px 8px;
        padding-left: 12px;
        border-left: 2px solid #DDDDDD;
    }
}