/* 1. RESET Y FUENTE */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500&display=swap');

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    text-decoration: none !important; 
    list-style: none;
}

body, html {
    background-color: #EAEAEA;
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}

/* 2. HEADER */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 60px 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10000;
    background: none;
    pointer-events: none;
}

.top-nav, .header-logo { 
    pointer-events: auto; 
}

.top-nav { 
    display: flex; 
    gap: 80px; 
}

/* Contenedor para que el hover sea estable */
.nav-item { 
    position: relative; 
    padding-bottom: 20px; 
    margin-bottom: -20px; 
}

/* Links principales e Info */
.nav-item > a {
    font-size: 42px;
    color: #000;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.05em;
    transition: font-weight 0.1s ease;
}

.nav-item > a:hover {
    font-weight: 500 !important;
}

/* 3. DESPLEGABLE (RESTRUCTURADO) */
.project-sidebar-dropdown {
    position: absolute;
    top: 100%; /* Se posiciona justo debajo del nav-item */
    left: -30px; 
    width: auto;
    min-width: 350px; /* Asegura un ancho mínimo base */
    
    /* Fondo ampliado con los 30px extra a la derecha solicitados */
    padding: 20px 60px 30px 30px; 
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
    
    /* Estética: Blanco 30% y Blur */
    background-color: rgba(255, 255, 255, 0.3); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    border-radius: 4px;
}

/* Mostrar al hacer hover en el contenedor del link */
.nav-item:hover .project-sidebar-dropdown {
    opacity: 1;
    visibility: visible;
}

/* Lista de proyectos dentro del desplegable */
.project-menu-list a {
    font-size: 42px;
    color: #000;
    font-weight: 300;
    display: block;
    line-height: 1.2;
    margin-bottom: 12px;
    white-space: nowrap;
    transition: font-weight 0.1s ease;
}

.project-menu-list a:hover {
    font-weight: 500 !important;
}

/* 4. CONTENEDOR DE IMÁGENES (HOME) */
.main-container { 
    width: 100%; 
}

.project-images img { 
    width: 100vw; 
    height: auto; 
    display: block; 
}

/* 5. PÁGINA INFO (ANCHO TOTAL Y POSICIÓN ALTA) */
.page-template-default .main-container {
    padding-top: 180px; 
    padding-left: 80px;
    padding-right: 80px;
}

.entry-content p {
    font-size: 24px;
    font-weight: 300;
    line-height: 2.2;
    color: #000;
    width: 100%;       
    max-width: none;   
    margin-bottom: 20px;
}

/* 6. LOGO Y FOOTER (PROTEGIDOS) */
.header-logo {
    width: 80px;
}

.header-logo img { 
    width: 80px !important; 
    height: auto !important; 
    display: block; 
}

.site-footer {
    position: fixed;
    bottom: 60px;
    right: 80px;
    z-index: 9000;
    text-align: right;
    pointer-events: none;
}

.site-footer p { 
    font-size: 18px; 
    font-weight: 300; 
    color: #000; 
    pointer-events: auto;
}

/* 7. RESPONSIVE MÓVIL */
@media (max-width: 768px) {
    .site-header { padding: 25px; }
    .nav-item > a, .project-menu-list a { font-size: 30px; }
    
    .page-template-default .main-container { 
        padding-top: 120px; 
        padding-left: 25px; 
        padding-right: 25px; 
    }
    
    .header-logo, .header-logo img { width: 50px !important; }
    
    .project-sidebar-dropdown { 
        position: fixed; 
        top: 60px; 
        left: 0; 
        width: 100%; 
        padding: 25px;
        background-color: rgba(255, 255, 255, 0.98); 
        backdrop-filter: none;
    }

    .site-footer { 
        position: relative; 
        bottom: 0; 
        right: 0; 
        padding: 40px 25px; 
        text-align: left; 
    }
}