:root {
    --bg: #080808;
    --blue: #0047ab;
    --text: #ffffff;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'Courier New', monospace; margin: 0; }

/* HEADER */
header { position: fixed; top: 0; right: 0; padding: 40px 60px; z-index: 100; opacity: 0; transition: 0.8s; }
header.visible { opacity: 1; }
nav ul { list-style: none; display: flex; gap: 40px; }
nav a { text-decoration: none; color: white; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; }
nav a:hover { color: var(--blue); }

/* HERO */
.hero { height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 0; z-index: 50; background: var(--bg); transition: 0.8s; }
.logo-img { width: 70vw; max-width: 1024px; aspect-ratio: 1024 / 417; cursor: pointer; }

.hero-previews { display: flex; gap: 15px; margin-top: 40px; }
.preview-box { width: 120px; height: 75px; border: 1px solid #222; overflow: hidden; cursor: pointer; position: relative; }
.preview-box img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; transition: 0.3s; }
.preview-box span { position: absolute; bottom: 5px; left: 5px; font-size: 8px; color: var(--blue); }
.preview-box:hover img { opacity: 1; }

.scrolled .hero { height: 80px; flex-direction: row; justify-content: flex-start; padding: 10px 40px; background: rgba(8, 8, 8, 0.98); }
.scrolled .logo-img { height: 50px; width: auto; }
.scrolled .hero-previews { display: none; }

/* GRID Y SECCIONES */
.section-container { min-height: 100vh; padding: 120px 60px; margin-top: 100vh; background: var(--bg); position: relative; z-index: 10; border-top: 1px solid #111; }
.section-container ~ .section-container { margin-top: 0; }
.section-title { color: var(--blue); font-size: 12px; margin-bottom: 50px; letter-spacing: 4px; }

.works-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 30px; }
.work-item { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }

.img-container { width: 100%; height: 100%; overflow: hidden; border: 1px solid #1a1a1a; }
.img-container img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: 0.5s; filter: grayscale(1); }
.work-item:hover img { opacity: 1; filter: grayscale(0); transform: scale(1.03); }

/* METADATOS */
.work-metadata { border-top: 1px solid #222; padding-top: 8px; }
.meta-row { display: flex; justify-content: space-between; }
.meta-label { font-size: 9px; color: #444; }
.meta-value { font-size: 10px; color: #fff; }
.work-item:hover .meta-label { color: var(--blue); }

/* TAMAÑOS */
.w-4 { grid-column: span 4; min-height: 350px; }
.w-6 { grid-column: span 6; min-height: 450px; }
.w-8 { grid-column: span 8; min-height: 550px; }
.w-12 { grid-column: span 12; min-height: 400px; }

/* LIGHTBOX (CORRECCIÓN VISUAL) */
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); display: none; justify-content: center; align-items: center; z-index: 1000; }
.lightbox img { 
    max-width: 95%; 
    max-height: 90vh; 
    border: 1px solid var(--blue); 
    object-fit: contain; /* ESTO MUESTRA LA IMAGEN COMPLETA */
    box-shadow: 0 0 30px rgba(0, 71, 171, 0.3);
}
.close-btn { position: absolute; top: 30px; right: 50px; font-size: 40px; color: #fff; cursor: pointer; }

/* PERFIL Y CONTACTO */
.profile-layout, .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.contact-form { display: flex; flex-direction: column; gap: 15px; }
.contact-form input, .contact-form textarea { background: transparent; border: 1px solid #333; padding: 12px; color: #fff; font-family: inherit; }
.contact-form button { background: var(--blue); color: #fff; border: none; padding: 15px; cursor: pointer; }
.socials a { color: #fff; text-decoration: none; display: block; margin-bottom: 10px; }