/* =========================================
   1. RESET Y VARIABLES GLOBALES
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: #ffffff;
    color: #000000;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; 
}
a { color: #000000; text-decoration: none; transition: opacity 0.3s ease; }
a:hover { opacity: 0.5; }

/* =========================================
   2. TIPOGRAFÍA, LOGO Y MENÚ BASE
   ========================================= */
.site-title {
    white-space: nowrap; font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem; font-weight: bold; text-align: left; margin-bottom: 2rem;
}
.site-logo { max-width: 150px; height: auto; display: block; margin-bottom: 10px; }
.nav-menu li a { font-family: 'Courier New', Courier, monospace; font-size: 1rem; font-weight: normal; letter-spacing: 0.5px; }
.nav-menu li a.active { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; opacity: 1; }
.nav-menu { list-style: none; padding: 0; }
.nav-menu li { margin-bottom: 0.5rem; }
.social-menu ul { list-style: none; display: flex; gap: 15px; padding: 0; }
.social-menu i { font-size: 1.3rem; color: #000; }
.copyright, .divider { display: none; }

/* =========================================
   3. TEXTOS DE PROYECTOS (BASE)
   ========================================= */
.project-info { display: block; width: 100%; text-align: center; margin-top: 15px; color: #000; }
.project-info h3 { font-size: 0.9rem; font-weight: bold; margin-bottom: 5px; font-family: 'Courier New', Courier, monospace; }
.project-info p { font-size: 0.8rem; color: #666; font-family: 'Courier New', Courier, monospace; margin-top: 0; }
.grid-item:hover, .carousel-item:hover { opacity: 0.7; }

/* =========================================================
   🖥️ 4. DISEÑO ESCRITORIO (WEB) - MÁS DE 768px (INTACTO)
   ========================================================= */
@media screen and (min-width: 769px) {
    body { overflow-y: hidden; } /* Quita scroll vertical en PC */
    .menu-toggle { display: none; }
    .close-menu-btn { display: none; } /* Escondido en escritorio */

    /* Barra Lateral Izquierda */
    .site-header {
        width: 250px; height: 100vh; position: fixed; top: 0; left: 0;
        display: flex; flex-direction: column; background-color: #ffffff;
        z-index: 100; padding: 50px 20px 40px 50px;
    }
    .site-navigation { display: flex; flex-direction: column; width: 100%; margin-top: 10px; }

    /* Contenedor Derecho */
    .site-main {
        position: absolute; left: 250px; top: 0;
        height: 100vh; width: calc(100vw - 250px);
        padding-top: 50px;
        overflow-x: auto; overflow-y: hidden;
        display: flex; 
    }

    /* Carruseles Web (Horizontales) */
    .portfolio-grid, .project-carousel, .index-grid {
        display: flex; flex-direction: row; flex-wrap: nowrap;
        height: calc(100vh - 50px); width: max-content;
        gap: 30px; padding-right: 40px;
        align-items: flex-start;
    }
    .index-grid { gap: 0; }

    /* Fotos y Videos en Web */
    .grid-item, .carousel-item { display: flex; flex-direction: column; align-items: center; height: calc(100vh - 50px); text-decoration: none;}
    .grid-item img, .grid-item video, .carousel-item img, .carousel-item video {
        height: calc(100vh - 150px); width: auto; object-fit: cover; display: block;
    }
    .index-grid .grid-item img, .index-grid .grid-item video { height: calc(100vh - 50px); }

    /* Página Contacto Web */
    .info-page .text-content { margin-top: 80px; margin-left: 50px; max-width: 600px; }
}

/* =========================================================
   📱 5. DISEÑO MÓVIL (ESTILO PETRA COLLINS FINALES) - HASTA 768px
   ========================================================= */
@media screen and (max-width: 768px) {
    body { overflow-y: auto !important; overflow-x: hidden !important; }

    /* 🔴 BARRA SUPERIOR FIJA */
    .site-header { 
        width: 100% !important; 
        position: fixed !important; 
        top: 0;
        left: 0;
        padding: 15px 20px !important; 
        display: flex !important; 
        flex-direction: row !important; 
        /* justify-content: space-between !important; */ /* No funcionará si nav está dentro */
        align-items: center !important; 
        background-color: #ffffff; 
        z-index: 2000 !important; 
        height: 60px !important;
    }

    /* 🔴 FORZAMOS LA POSICIÓN DEL TÍTULO Y LA HAMBURGUESA */
    .site-title { 
        position: absolute !important;
        top: 15px !important;
        left: 20px !important;
        text-align: left !important; 
        margin-bottom: 0 !important; 
        font-size: 1.2rem !important; 
    }

    /* 🔴 FORZAMOS LA HAMBURGUESA BIEN PEGADA A LA DERECHA */
    .menu-toggle {
        display: block !important; 
        position: absolute !important;
        top: 15px !important;
        right: 20px !important; /* 🔴 PEGADO A LA DERECHA EXTREMA */
        width: auto !important; 
        padding: 0 !important; 
        margin: 0 !important;
        border: none !important; 
        font-size: 1.5rem !important; 
        cursor: pointer !important;
        background: transparent !important;
        color: #000000 !important;
    }

    /* 🔴 EL PANEL LATERAL ESCONDIDO */
    .site-navigation { 
        position: fixed !important;
        top: 0 !important;
        left: -120% !important; /* Escondido bien a la izquierda */
        width: 80% !important; 
        height: 100vh !important;
        background-color: #ffffff !important; 
        display: flex !important;
        flex-direction: column !important; 
        align-items: flex-start !important; 
        padding: 80px 30px 30px 30px !important; 
        transition: left 0.4s ease-in-out !important; 
        z-index: 1500 !important; 
        box-shadow: 5px 0 15px rgba(0,0,0,0.1) !important; 
    }

    /* Cuando tocas las ≡ líneas, el menú entra a la pantalla */
    .site-navigation.active { 
        left: 0 !important; 
    }

    /* 🔴 NUEVO: ESTILOS PARA EL BOTÓN DE CIERRE (X) */
    .close-menu-btn {
        display: block !important;
        position: absolute !important;
        top: 20px !important; /* Mismo top que hamburguesa */
        right: 20px !important; /* Misma posición derecha extrema */
        font-size: 1.8rem !important; /* Un poco más grande para X */
        color: #000000 !important;
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
        z-index: 1600 !important; /* Por encima del menú lateral */
        transition: opacity 0.3s ease;
    }
    .close-menu-btn:hover { opacity: 0.5; }

    /* Textos del Menú Lateral */
    .nav-menu { text-align: left !important; width: 100%; }
    .nav-menu li { text-align: left !important; margin-bottom: 20px !important; }
    
    .nav-menu li a { 
        color: #000000 !important; 
        font-size: 1.2rem !important;
    }

    .social-menu ul { justify-content: flex-start !important; margin-top: 20px;}
    .social-menu i { color: #000000 !important; font-size: 1.5rem !important; }

    /* Ajuste de espacio para que la barra blanca no tape las fotos */
    .site-main { width: 100%; padding: 80px 0 0 0 !important; position: relative; }

    /* Carruseles Móvil (Verticales) */
    .portfolio-grid, .project-carousel, .index-grid {
        display: flex !important; flex-direction: column !important;
        width: 100% !important; height: auto !important;
        padding: 0 !important; margin: 0 !important;
        gap: 60px !important; align-items: center !important;
    }

    .grid-item, .carousel-item {
        width: 100vw !important; height: auto !important;
        margin: 0 !important; padding: 0 !important;
        display: flex !important; flex-direction: column !important; text-decoration: none;
    }

    /* Imágenes y Videos Borde a Borde Móvil */
    .grid-item img, .carousel-item img, .index-grid .grid-item img,
    .grid-item video, .carousel-item video, .index-grid .grid-item video {
        width: 100vw !important; max-width: 100% !important;
        height: auto !important; object-fit: cover !important;
        display: block !important; margin: 0 !important;
    }

    /* Textos alineados a la izquierda en Móvil */
    .project-info { width: 90% !important; margin: 15px auto 0 auto !important; text-align: left !important; }

    /* Página Contacto Móvil */
    .info-page .text-content { margin-top: 30px; margin-left: 20px; margin-right: 20px; text-align: left; }
}

/* --- CABEZAL BLANCO SÓLIDO Y FIJO --- */
.site-header {
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #FFFFFF !important; /* Barra blanca sólida para fundir el PNG */
    box-sizing: border-box !important;
    z-index: 9999 !important; /* Asegura que la barra esté siempre por encima de las fotos */
}

/* Empuja las fotos hacia abajo para que la barra blanca no tape la primera imagen al entrar */
.site-main {
    padding-top: 120px !important; 
}