/* =========================================
   1. VARIABLES DE MARCA 
   ========================================= */
:root {
    --bg-deep: #1A1513;         
    --bg-surface: #261F1D;      
    --brand-sepia: #5D4033;     
    --sepia-medium: #7B6F61;    
    --sepia-muted: #A29184;     
    --crudo: #DAD3C8;           
    --champagne: #F8F2E8;       
    
    --font-title: 'Palatino', 'Palatino Linotype', 'Book Antiqua', serif;
    --font-body: 'Agrandir', 'Montserrat', sans-serif;
}

/* =========================================
   2. RESET Y ESTILOS BASE
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    background-color: var(--bg-deep); color: var(--champagne);
    font-family: var(--font-body); letter-spacing: -0.02em; 
    max-width: 100vw; overflow-x: clip;
    overscroll-behavior-y: none; 
}

/* =========================================
   3. NAVEGACIÓN PREMIUM (TRANSPARENTE)
   ========================================= */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between;
    align-items: center; padding: 40px 6%; z-index: 2000; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent; 
}

.navbar.scrolled { padding: 20px 6%; background: transparent; }

.logo-link { z-index: 2001; display: flex; align-items: center; }

/* SOLUCIÓN SAFARI MÓVIL: display: block y max-width: none previenen el colapso */
.logo-img { 
    height: 42px; width: auto; flex-shrink: 0; display: block; max-width: none;
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease; 
}
.navbar.scrolled .logo-img { height: 35px; }
.logo-link:hover .logo-img { transform: scale(1.05); }

.nav-links { 
    position: fixed; top: 0; right: -100vw; width: 100vw; height: 100dvh; 
    background-color: rgba(26, 21, 19, 0.98); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; 
    list-style: none; transition: right 0.7s cubic-bezier(0.77, 0, 0.175, 1); 
    z-index: 1999;
}
.nav-links.active { right: 0; }

.nav-item { 
    color: var(--crudo); text-decoration: none; 
    font-family: var(--font-title); font-size: clamp(2.5rem, 5vw, 4rem); 
    letter-spacing: 5px; text-transform: uppercase; 
    transition: color 0.4s ease, transform 0.4s ease; display: inline-block;
}
.nav-item:hover { color: var(--champagne); transform: scale(1.05); }

.menu-toggle { display: flex; flex-direction: column; cursor: pointer; z-index: 2001; gap: 8px; }
.bar { 
    width: 38px; height: 1.5px; background-color: var(--champagne); 
    transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1); transform-origin: left; 
}

.menu-toggle.active .bar:nth-child(1) { transform: rotate(45deg); width: 42px; }
.menu-toggle.active .bar:nth-child(2) { opacity: 0; transform: translateX(20px); }
.menu-toggle.active .bar:nth-child(3) { transform: rotate(-45deg); width: 42px; }

/* =========================================
   4. HERO CINEMÁTICO (100dvh para evitar saltos en móvil)
   ========================================= */
.hero-wrapper { height: 100dvh; width: 100vw; position: relative; z-index: 1; }
.hero { position: sticky; top: 0; height: 100dvh; width: 100vw; display: flex; justify-content: center; align-items: center; text-align: center; padding: 0 24px; overflow: hidden; }
.video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(26, 20, 18, 0.3) 0%, var(--bg-deep) 100%); z-index: 1; }
.hero-fade-bottom { position: absolute; bottom: -2px; left: 0; width: 100%; height: 35vh; background: linear-gradient(to top, var(--bg-deep) 0%, transparent 100%); z-index: 3; pointer-events: none; }
.hero-content { position: relative; z-index: 2; max-width: 950px; will-change: transform, opacity; }
.hero-pretitle { font-size: 0.75rem; letter-spacing: 4px; color: var(--sepia-muted); text-transform: uppercase; margin-bottom: 20px; display: block; }
.hero-title { font-family: var(--font-title); font-size: clamp(1.2rem, 2.75vw, 2.1rem); letter-spacing: clamp(2px, 0.8vw, 6px); text-transform: uppercase; margin-bottom: 24px; font-weight: 400; color: var(--champagne); opacity: 0.9; text-shadow: 0 12px 24px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(10, 10, 10, 0.8); }
.hero-subtitle { font-size: clamp(0.85rem, 1.8vw, 1rem); color: var(--crudo); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 45px; font-weight: 300; }

/* =========================================
   5. PELÍCULA 35MM: ESTRUCTURA MAESTRA
   ========================================= */
.h-scroll-section { position: relative; background-color: var(--bg-deep); z-index: 10; }
.h-sticky-wrapper { position: sticky; top: 0; height: 100dvh; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: transparent; }

/* ACELERACIÓN POR HARDWARE ANTI-GHOSTING */
.film-scale-wrapper { width: 100vw; height: 100dvh; display: flex; align-items: center; will-change: transform, filter, opacity; transform: translate3d(0,0,0); transform-origin: center center; backface-visibility: hidden; }

.film-track { 
    display: flex; height: 80dvh; width: max-content; 
    background-color: transparent; position: relative;
    will-change: transform; transform: translate3d(0,0,0); padding: 32px 0; 
    backface-visibility: hidden;
}

.film-track::before {
    content: ''; position: absolute; top: 32px; bottom: 32px; left: -500vw; right: -500vw; 
    background-color: #030303; z-index: 0; box-shadow: 0 40px 80px rgba(0,0,0,0.85); 
}

.reverse-flow { flex-direction: row-reverse; }

.sprockets-top, .sprockets-bottom { position: absolute; left: -500vw; right: -500vw; height: 32px; background-color: #030303; display: flex; align-items: center; z-index: 10; }
.sprockets-top { top: 0; border: none; } /* Safari Fix: Sin bordes translúcidos */
.sprockets-bottom { bottom: 0; border: none; }

.sprockets-inner {
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='36' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 h36 v32 h-36 z M10,10 v12 a2,2 0 0,0 2,2 h10 a2,2 0 0,0 2,-2 v-12 a2,2 0 0,0 -2,-2 h-10 a2,2 0 0,0 -2,2 z' fill='%23030303' /%3E%3Crect x='10' y='8' width='14' height='16' rx='2' fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat: repeat-x; background-position: center;
}

.film-content { display: flex; height: 100%; width: max-content; position: relative; z-index: 5; padding: 0 18vw; }

/* =========================================
   6. FOTOGRAMAS Y MOSAICO
   ========================================= */
.film-frame {
    height: 100%; display: flex; align-items: center; flex-shrink: 0;
    padding: 0 4vw; position: relative; z-index: 5;
    border: none; /* Safari Fix: Sin líneas blancas separadoras */
    gap: 4vw;
}

.m-scene { will-change: transform, opacity, filter; transform-origin: center center; }
.m-item { position: relative; flex-shrink: 0; display: flex; flex-direction: column; }

.m-text { width: 30vw; max-width: 500px; }
.narrow { width: 22vw; max-width: 380px; }
.m-img { width: 28vw; max-width: 450px; }
.wide { width: 38vw; max-width: 650px; }

.m-top { align-self: flex-start; margin-top: 4vh; }
.m-center { align-self: center; }
.m-bottom { align-self: flex-end; margin-bottom: 4vh; }

.overlap-left { margin-left: -5vw; z-index: 5; }
.overlap-right { margin-right: -5vw; z-index: 5; }
.z-10 { z-index: 10; }

.m-img-inner {
    width: 100%; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.7); 
    max-height: 65dvh; 
    aspect-ratio: 3/4; 
    position: relative; 
    transform: translateZ(0);
}
.wide .m-img-inner { aspect-ratio: 16/9; max-height: 48dvh; }

.m-img-inner::after {
    content: ''; position: absolute; inset: 0; border-radius: 12px;
    box-shadow: inset 0 0 35px 15px #030303; pointer-events: none;
    transition: box-shadow 0.6s ease; z-index: 2;
}

.m-img-inner img, .m-img-inner video { 
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    filter: grayscale(15%) contrast(110%); 
    transition: filter 0.6s ease, transform 0.6s ease;
    will-change: filter, transform; transform: translateZ(0);
}

.m-img-inner:hover img, .m-img-inner:hover video { filter: grayscale(0%) contrast(110%); transform: scale(1.03) translateZ(0); }
.m-img-inner:hover::after { box-shadow: inset 0 0 10px 2px rgba(3, 3, 3, 0.4); }

.exp-title { font-family: var(--font-title); font-size: clamp(2rem, 3.5vw, 3.5rem); color: var(--champagne); line-height: 1.1; margin-bottom: 20px; }
.exp-subtitle { color: var(--brand-sepia); font-size: 0.75rem; letter-spacing: 4px; text-transform: uppercase; display: block; margin-bottom: 15px; }
.exp-paragraph { color: var(--crudo); font-size: 1.1rem; line-height: 1.8; font-weight: 300; }
.exp-highlight { font-family: var(--font-title); font-size: 2.2rem; color: var(--champagne); font-style: italic; margin-bottom: 15px; display: block; font-weight: 400; }

/* =========================================
   7. MARQUESINAS PARALELAS SUPERPUESTAS
   ========================================= */
.marquee-wrapper { 
    position: relative; width: 100%; height: 350px; overflow: hidden; 
    background-color: var(--bg-deep); z-index: 5; 
}
.marquee-container { 
    width: 120vw; position: absolute; padding: 30px 0; display: flex; 
    align-items: center; left: -10vw;
    border-top: 1px solid rgba(255, 255, 255, 0.03); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.03); 
}

.marquee-top { top: 12%; background-color: #15110f; z-index: 10; box-shadow: 0 30px 60px rgba(0,0,0,0.95); }
.marquee-bottom { top: 48%; background-color: var(--brand-sepia); z-index: 5; opacity: 0.85; }

.marquee-content { display: flex; align-items: center; white-space: nowrap; width: max-content; will-change: transform; transform: translate3d(0,0,0); backface-visibility: hidden; }
.marquee-text { font-family: var(--font-title); font-size: clamp(2.5rem, 5vw, 4rem); color: var(--champagne); letter-spacing: 6px; text-transform: uppercase; padding: 0 40px; }

/* SOLUCIÓN IG BROWSER: min-width garantiza que no las aplaste a 0px */
.marquee-logo { height: 65px; min-width: 65px; margin: 0 40px; object-fit: contain; flex-shrink: 0; width: auto; max-width: none; display: block; }
.marquee-text-img { height: 40px; min-width: 180px; margin: 0 40px; object-fit: contain; flex-shrink: 0; width: auto; max-width: none; display: block; }

/* =========================================
   8. PORTFOLIO SHOWCASE (LAX PARALLAX Y LINKS)
   ========================================= */
.portfolio { padding: 120px 6%; background-color: var(--bg-deep); z-index: 5; position: relative; }
.section-header { text-align: center; margin-bottom: 70px; }
.section-title { font-family: var(--font-title); font-size: 2.2rem; letter-spacing: 6px; text-transform: uppercase; color: var(--champagne); }
.grid-container { display: flex; flex-direction: column; gap: 40px; max-width: 1200px; margin: 0 auto; }

.grid-item { 
    position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/9; 
    background: var(--bg-deep); cursor: pointer; border-radius: 12px; 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), 0 15px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transform: translate3d(0,0,0); backface-visibility: hidden;
}

.grid-item:hover { box-shadow: 0 50px 100px rgba(0, 0, 0, 0.95), 0 20px 40px rgba(0, 0, 0, 0.7); }

.parallax-wrap {
    position: absolute; top: -25%; left: 0; width: 100%; height: 150%; 
    will-change: transform; transform: translate3d(0,0,0); backface-visibility: hidden;
}

.grid-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0.65; transform: translateZ(0); }
.grid-item:hover .grid-img { transform: scale(1.03) translateZ(0); opacity: 0.85; }
.item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26, 20, 18, 0.9) 0%, rgba(26, 20, 18, 0.2) 70%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 35px; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.grid-item:hover .item-overlay { opacity: 1; }

/* =========================================
   9. CONTACTO Y FOOTER (CAJA INTERACTIVA 3D)
   ========================================= */
.contacto { padding: 120px 6%; background-color: var(--bg-deep); text-align: center; position: relative; z-index: 5; overflow: hidden; }

.contacto-wrapper { 
    max-width: 1000px; margin: 0 auto; padding: 80px 6%; 
    border: 1px solid rgba(248, 242, 232, 0.25); border-radius: 30px; 
    will-change: transform, filter, opacity; transform-origin: center center;
    transform: translate3d(0,0,0); backface-visibility: hidden;
}

.contacto-wrapper > * { display: block; will-change: transform; transform: translate3d(0,0,0); backface-visibility: hidden; }

.contacto-pretitle { color: var(--brand-sepia); font-size: 0.95rem; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 25px; }
.contacto-title { font-family: var(--font-title); font-size: clamp(2.5rem, 5vw, 4rem); color: var(--champagne); margin-bottom: 30px; }
.contacto-text { color: var(--crudo); font-size: 1.15rem; line-height: 1.9; margin-bottom: 70px; font-weight: 300; max-width: 700px; margin-left: auto; margin-right: auto; }
.contacto-links { display: flex; justify-content: center; gap: 70px; flex-wrap: wrap; }
.contacto-item { display: flex; flex-direction: column; gap: 12px; text-decoration: none; transition: transform 0.3s ease; }
.contacto-item:hover { transform: translateY(-5px); }
.contacto-label { color: var(--sepia-muted); font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; }
.contacto-value { color: var(--champagne); font-family: var(--font-title); font-size: 1.4rem; letter-spacing: 1px; border-bottom: 1px solid transparent; padding-bottom: 5px; transition: border-color 0.3s ease; }
.contacto-item:hover .contacto-value { border-color: var(--brand-sepia); }

.footer { background-color: var(--bg-deep); padding: 40px 6%; text-align: center; border-top: 1px solid rgba(217, 210, 200, 0.05); position: relative; z-index: 5; }
.footer p { color: var(--sepia-muted); font-size: 0.8rem; letter-spacing: 1px; }

/* =========================================
   10. INTERACTIVIDAD Y ANIMACIONES
   ========================================= */
.char {
    display: inline-block; transition: transform 0.1s linear, color 0.2s ease-out;
    will-change: transform, color; position: relative; transform-origin: center center; 
}

.fade-up { opacity: 0; transform: translateY(40px); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-up.visible { opacity: 1; transform: translateY(0); }

.img-reveal { 
    opacity: 0; 
    transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease; 
    will-change: transform, opacity; 
}

.grid-container .grid-item:nth-child(odd).img-reveal { transform: translateX(-10vw); }
.grid-container .grid-item:nth-child(odd).img-reveal .grid-img { clip-path: inset(0 100% 0 0); }
.grid-container .grid-item:nth-child(even).img-reveal { transform: translateX(10vw); }
.grid-container .grid-item:nth-child(even).img-reveal .grid-img { clip-path: inset(0 0 0 100%); }

.grid-container .grid-item:nth-child(odd).img-reveal.visible,
.grid-container .grid-item:nth-child(even).img-reveal.visible { opacity: 1; transform: translateX(0); }

.img-reveal .grid-img { 
    transform: scale(1.15) translateZ(0); 
    transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1.8s cubic-bezier(0.16, 1, 0.3, 1); 
    will-change: transform, clip-path;
}

.grid-container .grid-item:nth-child(odd).img-reveal.visible .grid-img,
.grid-container .grid-item:nth-child(even).img-reveal.visible .grid-img { 
    transform: scale(1) translateZ(0); clip-path: inset(0 0 0 0); 
}

/* =========================================
   11. RESPONSIVE MÓVIL
   ========================================= */
@media (max-width: 992px) {
    .film-content { padding: 0 10vw; }
    .film-frame { gap: 10vw; padding: 0 5vw; }
    
    .m-text, .narrow { width: 75vw !important; max-width: none !important; }
    .m-img { width: 80vw !important; max-width: none !important; }
    .wide { width: 85vw !important; max-width: none !important; }
    
    .m-img-inner { aspect-ratio: 3/4 !important; max-height: 60dvh !important; box-shadow: 0 10px 25px rgba(0,0,0,0.6); }
    .wide .m-img-inner { aspect-ratio: 4/3 !important; max-height: 40dvh !important; }
    
    .grid-item { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6) !important; border: none; }
    
    .overlap-left { margin-left: -6vw !important; }
    .overlap-right { margin-right: -6vw !important; }
    
    .exp-title { font-size: clamp(2rem, 8vw, 3rem) !important; }
    .exp-paragraph { font-size: 1rem !important; }
    
    .contacto-wrapper { padding: 50px 6%; border-radius: 20px; }
    .contacto-links { flex-direction: column; gap: 40px; }
}

@media (max-width: 768px) {
    .navbar { padding: 25px 6%; }
    .navbar.scrolled { padding: 20px 6%; }
    .logo-img { height: 50px; max-height: none; }
    .navbar.scrolled .logo-img { height: 28px; }
    .marquee-wrapper { height: 280px; }
    .marquee-container { padding: 20px 0; }
    .marquee-logo { height: 40px; margin: 0 20px; }
    .marquee-text-img { height: 25px; margin: 0 20px; }
    .marquee-text { padding: 0 20px; font-size: 2rem; }
    .nav-item { font-size: 1.8rem; letter-spacing: 4px; }
    
    .section-title { font-size: clamp(1.2rem, 6vw, 1.8rem); letter-spacing: 3px; }
}

/* =========================================
   12. PANTALLA DE CARGA (NUEVA: AISLADA Y SEGURA)
   ========================================= */

/* Bloqueo total desde el principio para evitar interacción */
body.loading-lock {
    overflow: hidden !important;
}

#premium-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: var(--bg-deep); /* Color chocolate puro */
    z-index: 999999; /* Por encima de la navegación y de todo */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s cubic-bezier(0.32, 0, 0.67, 0), visibility 0.6s;
    pointer-events: all;
}

.premium-logo {
    width: 60px; /* Tamaño mínimo y elegante (5 veces más pequeño) */
    height: auto;
    object-fit: contain;
    /* Pulso hiper-suave constante */
    animation: premiumPulse 2s ease-in-out infinite alternate;
    transition: transform 0.6s cubic-bezier(0.32, 0, 0.67, 0);
}

@keyframes premiumPulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    100% { transform: scale(1.05); opacity: 1; }
}

/* Clases que aplica el JS cuando carga la página */
#premium-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Al desaparecer, el logo se encoge en 0.6s (función cúbica) */
#premium-preloader.fade-out .premium-logo {
    transform: scale(0.4); 
}