/* Reset */
*, *::before, *::after { box-sizing: border-box; }

/* --- Estructura Base Header --- */
.site-header {
    background: var(--bg-white);
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    padding: 0 20px; /* Un poco menos en móvil para que quepa todo */
    width: 100%;
    transition: all 0.3s ease;
}

.header-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Logo --- */
.site-branding {
    display: flex;
    align-items: center;
    margin-right: auto; /* Empuja lo demás a la derecha en móvil */
    padding-left: 10px;
}

.site-branding img, .custom-logo {
    max-height: 40px; /* Ajuste móvil */
    width: auto;
    display: block;
}

/* --- ESTILOS DEL BOTÓN (GLOBALES) --- */
/* Ahora están fuera del media query para que funcionen en móvil */
.btn-cta {
    background: var(--primary-gradient);
    color: white !important;
    padding: 10px 25px; /* Un poco más compacto para móvil */
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
}
.btn-cta:hover { 
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.4);
}

/* --- Visibilidad --- */
.desktop-nav { display: none; }
.mobile-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 15px; /* Espacio entre hamburguesa y logo */
    display: flex;
    color: var(--text-dark);
}
.mobile-toggle svg { width: 28px; height: 28px; }

/* --- DESKTOP STYLES (Min-width 992px) --- */
@media (min-width: 992px) {
    .site-header { padding: 0 40px; }
    
    .mobile-toggle { display: none; }
    
    .header-wrapper {
        justify-content: flex-start;
    }

    .site-branding {
        margin-right: 60px;
        padding-left: 0;
    }
    
    .site-branding img, .custom-logo { max-height: 45px; }

    .desktop-nav {
        display: block;
        flex-grow: 1;
    }

    /* Menú Principal */
    .desktop-menu-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 40px;
    }

    .desktop-menu-list a {
        text-decoration: none;
        color: var(--text-dark);
        font-weight: 200;
        font-size: 0.95rem;
        transition: color 0.2s;
        letter-spacing: 0.5px;
    }

    .desktop-menu-list a:hover { color: #8A2BE2; }
    
    /* Botón Header Desktop (Ajustes de tamaño original) */
    .header-right { margin-left: auto; }
    
    .btn-cta {
        padding: 12px 35px; /* Vuelve a tamaño grande en PC */
        font-size: 1rem;
    }
}

/* --- MOBILE MENU OVERLAY --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: white;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2000;
    display: flex; flex-direction: column;
}
.mobile-menu-overlay.is-active { transform: translateX(0); }

.mobile-menu-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px; border-bottom: 1px solid #f0f0f0;
}
.mobile-close { background: none; border: none; cursor: pointer; }
.mobile-close svg { width: 28px; height: 28px; }

.mobile-menu-content { padding: 40px 30px; overflow-y: auto; }
.mobile-menu-list { list-style: none; padding: 0; margin: 0; }
.mobile-menu-list li { margin-bottom: 30px; }
.mobile-menu-list a { 
    text-decoration: none; color: var(--text-dark); 
    font-size: 1.5rem; font-weight: 700; 
}

.btn-mobile-full {
    display: block; width: 100%; text-align: center;
    background: var(--primary-gradient); color: white;
    padding: 15px; border-radius: 50px; text-decoration: none;
    font-weight: bold; margin-top: 30px; font-size: 1.1rem;
}