/* ==========================================
   PROYECTOS.CSS — Portafolio CJ_CRISTIA — Cristia Gimenez
   ========================================== */


        :root {
            --primary-cyan: #00f0ff;
            --surface-dark: #0A0B10;
        }
        body {
            background-color: var(--surface-dark);
            color: #e3e1e9;
            font-family: 'Space Grotesk', sans-serif;
            margin: 0;
            cursor: crosshair;
        }
        
        .nebula-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            background: 
                radial-gradient(circle at 20% 30%, rgba(0, 240, 255, 0.05) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(0, 105, 112, 0.1) 0%, transparent 40%),
                var(--surface-dark);
            overflow: hidden;
        }
        .nebula-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: 
                linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
            background-size: 50px 50px;
            mask-image: radial-gradient(ellipse at center, black, transparent 80%);
            opacity: 0.2;
        }

        .binary-stream {
            position: absolute;
            font-family: monospace;
            font-size: 10px;
            color: var(--primary-cyan);
            opacity: 0.1;
            white-space: nowrap;
            pointer-events: none;
            animation: flow 20s linear infinite;
        }
        @keyframes flow {
            from { transform: translateY(-100%); }
            to { transform: translateY(100vh); }
        }

        /* Power/Locked Mode */
        #locked-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 100;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .power-off #locked-overlay { display: flex; }
        
        .matrix-text {
            font-family: monospace;
            color: var(--primary-cyan);
            font-size: 12px;
            opacity: 0.3;
            overflow: hidden;
            width: 100%;
            text-align: center;
        }

        /* Reset Sequence */
        #reset-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: #0A0B10;
            z-index: 110;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        #reset-overlay.active { display: flex; }

        /* Term/Console */
        #terminal-overlay {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 320px;
            height: 200px;
            background: rgba(10, 11, 16, 0.9);
            border: 1px solid var(--primary-cyan);
            z-index: 60;
            font-family: monospace;
            font-size: 10px;
            padding: 10px;
            color: var(--primary-cyan);
            box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
        }
        #terminal-overlay.active { display: block; }

        /* Language Dropdown — ELIMINADO
           Las reglas que había aquí (#lang-dropdown { display:none } y
           #lang-dropdown.active { display:block }) eran del antiguo sistema
           de idioma y rompían el nuevo dropdown porque el display:none ganaba
           a la visibility/opacity. Ahora todo se controla desde
           css/lang-button.css usando #lang-wrapper.is-open. */

        .blueprint-overlay {
            background-image: linear-gradient(rgba(0, 240, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
            background-size: 10px 10px;
        }

        .custom-scrollbar::-webkit-scrollbar { width: 2px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0, 240, 255, 0.05); }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.3); }

        @media (max-width: 768px) {
            main {
                padding-left: 60px !important;
            }
        }
    
        /* Hide scrollbar for Chrome, Safari and Opera */
        body::-webkit-scrollbar {
            display: none;
        }
        @keyframes proyectos-glow {
            0%, 100% { color: rgba(0, 240, 255, 0.5); text-shadow: none; }
            50% { color: #00F0FF; text-shadow: 0 0 8px rgba(0, 240, 255, 0.8); }
        }

        /* Hide scrollbar for IE, Edge and Firefox */
        body {
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            scroll-behavior: smooth;
        }

        /* Apply same to main container if needed */
        main::-webkit-scrollbar {
            display: none;
        }
        main {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* --- Sidebar móvil: se abre con click/touch --- */
        @media (hover: none) {
            #sidebar { width: 50px; }
            #sidebar.open { width: 240px; }
            #sidebar.open .opacity-0 { opacity: 1; }
            #sidebar-overlay {
                display: none;
                position: fixed;
                inset: 0;
                z-index: 49;
                background: rgba(0,0,0,0.5);
            }
            #sidebar-overlay.active { display: block; }
        }

        /* --- Sidebar: click para abrir/cerrar --- */
        #sidebar {
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        #sidebar.locked {
            width: 240px !important;
        }
        #sidebar.locked .opacity-0 {
            opacity: 1 !important;
        }
        #sidebar-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 49;
            background: rgba(0,0,0,0.3);
            cursor: pointer;
        }
        #sidebar-overlay.active {
            display: block;
        }
    
/* ==========================================
   REJILLA DE PROYECTOS — altura natural + scroll (fix ultrawide).
   Sin esto, la rejilla (flex-grow dentro de un main de altura fija) reparte
   las filas con align-content:stretch y, en pantallas anchas pero bajas,
   APLASTA las tarjetas por debajo de su contenido (se ven "chafadas, sin
   nada"). Con align-content:start mantienen su altura real y la sección
   scrollea (overflow-y:auto ya está en la clase del <section>).
   ========================================== */
#main-content > section { align-content: start; }

/* ==========================================
   RESPONSIVE — Proyectos
   Tablet: 768px-1366px | Móvil: <768px
   ========================================== */

/* Tablet/Laptop (hasta 1366px) */
@media (max-width: 1366px) {
    .ml-\[70px\] { margin-left: 70px !important; }
    
    /* 2 columnas en tablet */
    .lg\:grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
    
    /* Padding reducido */
    .p-12 { padding: 1.5rem !important; }
    .gap-8 { gap: 1rem !important; }
    
    /* Título más pequeño */
    .text-6xl, .text-7xl, .text-8xl { font-size: 3rem !important; }
}

/* Móvil (hasta 768px) */
@media (max-width: 768px) {
    /* Ocultar menú superior */
    nav .hidden.md\:flex { display: none !important; }
    
    /* Main sin offset sidebar */
    .ml-\[70px\] { margin-left: 0 !important; }
    
    /* 1 columna en móvil */
    .md\:grid-cols-2, .lg\:grid-cols-3, .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Scroll natural */
    body { overflow-y: auto !important; overflow-x: hidden !important; }
    
    /* Padding reducido */
    .p-6, .p-12, .md\:p-12 { padding: 1rem !important; }
    .gap-8 { gap: 0.75rem !important; }
    
    /* Título ajustado */
    .text-6xl, .text-7xl { font-size: 2.5rem !important; }
    .text-4xl { font-size: 1.75rem !important; }
    
    /* Header de proyectos */
    .mb-16 { margin-bottom: 1.5rem !important; }
    
    /* iFrame altura reducida en móvil */
    .h-48 { height: 10rem !important; }
}

/* Móvil pequeño (hasta 480px) */
@media (max-width: 480px) {
    .text-6xl { font-size: 2rem !important; }
    .p-6 { padding: 0.75rem !important; }
}

/* ==========================================
   MÓVIL — Sidebar como overlay (no empuja contenido)
   ========================================== */
@media (max-width: 768px) {
    /* Sidebar flota encima, no empuja nada */
    #sidebar {
        z-index: 60;
        width: 70px !important;
    }
    #sidebar.open {
        width: 240px !important;
    }

    /* Index: main ocupa todo el ancho */
    #main-content {
        left: 0 !important;
        right: 0 !important;
        top: 3.5rem !important;
        bottom: 0 !important;
    }

    /* Sobre mi, Proyectos, Contacto: sin margen izquierdo */
    #main-scroll-container,
    .ml-\[70px\] {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Nav superior ocupa todo */
    nav {
        left: 0 !important;
        width: 100% !important;
    }

    /* Ocultar menú de texto en nav, solo iconos sidebar */
    nav .hidden.md\:flex {
        display: none !important;
    }
}

/* Proyectos main - desktop con sidebar, móvil sin offset */
#main-content {
    left: 70px;
}
@media (max-width: 768px) {
    #main-content {
        left: 0 !important;
    }
    /* Header padding en móvil */
    #main-content header {
        padding: 1rem !important;
    }
    #main-content header h1 {
        font-size: 2rem !important;
    }
    /* Section de tarjetas con scroll */
    #main-content section {
        grid-template-columns: 1fr !important;
        padding: 1rem !important;
        gap: 1rem !important;
    }
}

/* Móvil: main con scroll natural en vez de fixed */
@media (max-width: 768px) {
    #main-content {
        position: relative !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: calc(100vh - 3.5rem) !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        margin-top: 3.5rem !important;
    }

    /* Tarjetas completas visibles */
    #main-content section {
        grid-template-columns: 1fr !important;
        padding: 1rem !important;
        gap: 1rem !important;
        overflow: visible !important;
        flex-grow: unset !important;
    }

    /* Cada tarjeta con altura automática */
    #main-content section > div {
        height: auto !important;
        min-height: 200px !important;
    }

    /* Header padding móvil */
    #main-content header {
        padding: 1rem 1rem 0.75rem !important;
    }
    #main-content header h1 {
        font-size: 1.8rem !important;
    }
    #main-content header p {
        margin-top: 0.5rem !important;
        font-size: 0.8rem !important;
    }
}
/* ==========================================
   MODAL DE PROYECTO — overlay grande navegable
   Clic en una tarjeta con web en vivo → abre el proyecto
   dentro del portafolio. Clic fuera o ESC = cierra.
   ========================================== */

#proyecto-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 4, 8, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 4vh 4vw;
    cursor: pointer; /* clic en el fondo = cerrar */
}
#proyecto-modal.active {
    display: flex;
    flex-direction: column;
    animation: proyecto-modal-in 0.25s ease-out;
}
@keyframes proyecto-modal-in {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

/* Marco del modal (el iframe sí es interactivo, por eso cursor normal) */
.proyecto-modal-marco {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 240, 255, 0.4);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.15), inset 0 0 60px rgba(0, 240, 255, 0.04);
    background: #0A0B10;
    cursor: default;
    overflow: hidden;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* Barra superior del modal con título + cerrar */
.proyecto-modal-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    border-bottom: 1px dashed rgba(0, 240, 255, 0.2);
    background: rgba(0, 240, 255, 0.04);
    flex-shrink: 0;
}
.proyecto-modal-titulo {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(0, 240, 255, 0.9);
}
.proyecto-modal-cerrar {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: #ff5a5a;
    border: 1px solid rgba(255, 90, 90, 0.4);
    background: rgba(255, 90, 90, 0.08);
    padding: 0.25rem 0.7rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s;
}
.proyecto-modal-cerrar:hover {
    background: rgba(255, 90, 90, 0.2);
    color: #fff;
}

/* El iframe grande, navegable */
.proyecto-modal-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #fff;
}

/* La miniatura de la tarjeta: dejar claro que es clicable */
.proyecto-clic {
    cursor: pointer;
}

/* ==========================================
   CLASES PARA REEMPLAZAR style="" INLINE (limpieza)
   ========================================== */

/* Logo SVG nav/sidebar con glow */
.logo-glow { filter: drop-shadow(0 0 6px #00F0FF); }
.logo-glow-sm { filter: drop-shadow(0 0 4px #00F0FF); }

/* Nav centrado con ligero offset (antes inline) */
.nav-centro { left: calc(50% + 25px); }

/* Main fijo bajo el header (antes inline) */
.main-fijo { top: 3.5rem; right: 0; bottom: 0; }

/* Imagen de captura dentro de tarjeta (Hola Mundo) */
.tarjeta-captura {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    opacity: 0.85;
    transition: opacity .5s;
}
.group:hover .tarjeta-captura { opacity: 1; }

/* Frase en cursiva de la tarjeta */
.tarjeta-frase { font-style: italic; }

/* Contenedor de vista móvil de tarjeta */
.tarjeta-movil-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}
.tarjeta-movil-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* iframe en escritorio / captura en móvil (antes en el <style> inline) */
.solo-movil { display: none; }
.solo-desktop { display: block; }
@media (max-width: 768px) {
    .solo-desktop { display: none !important; }
    .solo-movil { display: block !important; }

    /* En móvil el modal ocupa toda la pantalla sin márgenes */
    #proyecto-modal { padding: 0; }
    .proyecto-modal-marco { border: none; }
}

/* ==========================================
   DESKTOP BAJO — portátiles (ancho desktop, poca altura)
   Solo >768px ancho Y <700px alto. En portátil el iframe en
   vivo de las cards se ve mal por la poca altura. Aplicamos el
   MISMO truco que en móvil: ocultar el iframe y mostrar la
   captura .webp (que se adapta limpia). El JS impide abrir el
   modal/iframe en este rango (ver proyectos.js).
   Además compactamos el header para que quepan más cards.
   NO afecta a escritorio normal (>700px) ni a móvil (<769px).
   ========================================== */
@media (min-width: 769px) and (max-height: 700px) {
    /* Captura en vez de iframe en vivo, igual que en móvil */
    .solo-desktop { display: none !important; }
    .solo-movil { display: block !important; }

    /* Soltamos el layout fijo: el main pasa a flujo normal y la
       página scrollea como cualquier web. Así las cards recuperan
       su altura natural (h-48 = 192px) y la captura se ve entera,
       sin pelear contra la compresión del overflow:hidden.
       Solo en este rango; escritorio normal sigue con landing fijo. */
    #main-content {
        position: relative !important;
        height: auto !important;
        min-height: calc(100vh - 3.5rem) !important;
        overflow: visible !important;
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        right: auto !important;
        margin-top: 3.5rem !important;
        margin-left: 70px !important;
        width: calc(100% - 70px) !important;
        box-sizing: border-box !important;
    }
    /* Sin scroll horizontal */
    body {
        overflow-x: hidden !important;
    }
    #main-content section {
        overflow: visible !important;
        flex-grow: 0 !important;
        padding-top: 1.5rem !important;
    }
    /* Header más compacto para no robar tanto al entrar */
    #main-content header {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    /* La página scrollea, no el body fijo */
    body {
        overflow-y: auto !important;
    }

    /* Header más compacto: recupera alto para las cards */
    #main-content header {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
    #main-content section {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* ==========================================
   TARJETA NIDU — producto estrella dentro de la rejilla
   Acentos dorados (champán). Clicable a la página /nidu.
   Iconos SVG inline (no dependen de la fuente de iconos).
   ========================================== */
.nidu-card {
    text-decoration: none;
    border-color: rgba(212, 180, 131, 0.35) !important;
}
.nidu-card:hover {
    border-color: #D4B483 !important;
    box-shadow: 0 0 30px rgba(212, 180, 131, 0.18);
}
.nidu-card .nc-label { color: rgba(212, 180, 131, 0.75); }
.nidu-card .nc-badge {
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: #1a1407; background: #D4B483; padding: 4px 8px;
}
.nidu-card .nc-divider { border-color: rgba(212, 180, 131, 0.2) !important; }
.nidu-card .nc-open {
    color: #D4B483;
    background: rgba(0, 0, 0, 0.7);
}
.nidu-card .nc-open svg { transition: transform .3s; }
.nidu-card:hover .nc-open svg { transform: translateX(4px); }
.nidu-card .nc-chip {
    font-size: 9px; text-transform: uppercase;
    color: rgba(212, 180, 131, 0.85);
    border: 1px solid rgba(212, 180, 131, 0.3);
    padding: 4px 8px;
}