/* --- VARIABLES & RESET --- */
:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --accent-gray: #333333;
    --font-main: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

/* --- NAVBAR GLOBAL --- */
.navbar {
    position: fixed;
    top: 0; left: 0; width: 100%;
    padding: 30px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2001 !important; 
    mix-blend-mode: difference; /* Inversión de color mágica */
    color: #fff;
}

.logo { font-weight: 800; font-size: 1.2rem; letter-spacing: -1px; flex: 1; }

.nav-links { flex: 2; display: flex; justify-content: center; gap: 40px; }

.nav-links a {
    text-transform: uppercase; font-size: 0.75rem;
    letter-spacing: 1px; font-weight: 600; opacity: 0.7; transition: 0.3s; position: relative;
}
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a::after {
    content: ''; position: absolute; width: 0%; height: 1px; bottom: -5px; left: 0;
    background-color: #fff; transition: width 0.3s ease;
}
.nav-links a:hover::after { width: 100%; }

.nav-contact { flex: 1; display: flex; justify-content: flex-end; }
.nav-contact a {
    font-size: 0.75rem; text-transform: uppercase; border: 1px solid #fff;
    padding: 10px 20px; border-radius: 50px; transition: 0.3s;
}
.nav-contact a:hover { background-color: #fff; color: #000; }

/* --- INDEX: HERO VIDEO MASK --- */
.hero-container {
    position: relative; height: 100vh; width: 100%;
    background-color: #000; display: flex; align-items: center; justify-content: center; overflow: hidden;
}

.text-mask-layer {
    position: relative; z-index: 1; background-color: #000;
    width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-left: 5vw;
}

.title-huge {
    font-size: 13vw; line-height: 0.85; font-weight: 800; color: #fff;
    text-transform: uppercase; letter-spacing: -0.05em; user-select: none;
}

.line-wrapper { overflow: hidden; display: block; }
.anim-text { display: block; transform: translateY(120%); animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }

@keyframes slideUp { from { transform: translateY(120%); } to { transform: translateY(0%); } }

.video-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
    z-index: 2; mix-blend-mode: multiply; pointer-events: none; opacity: 0;
    animation: fadeInVideo 1s ease forwards 0s;
}
@keyframes fadeInVideo { to { opacity: 1; } }

/* --- INDEX: CONTENT --- */
.index-content {
    height: 50vh; display: flex; align-items: center; justify-content: center;
    border-top: 1px solid var(--accent-gray); color: #666; font-size: 0.9rem; letter-spacing: 2px;
}

/* --- PROJECT PAGE: STYLES --- */
.project-hero { padding: 150px 40px 60px 40px; border-bottom: 1px solid var(--accent-gray); }
.project-title { font-size: 8vw; line-height: 0.9; text-transform: uppercase; letter-spacing: -0.03em; margin-bottom: 40px; }

.hero-image-container { width: 100%; height: 80vh; overflow: hidden; position: relative; }
.hero-image { width: 100%; height: 120%; object-fit: cover; transform: translateY(-10%); }

.project-meta { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--accent-gray); }
.meta-item { padding: 30px 40px; border-right: 1px solid var(--accent-gray); }
.meta-item:last-child { border-right: none; }
.meta-label { display: block; font-size: 0.75rem; color: #666; text-transform: uppercase; margin-bottom: 10px; }

.project-text-section { display: grid; grid-template-columns: repeat(12, 1fr); padding: 100px 40px; border-bottom: 1px solid var(--accent-gray); }
.text-block { grid-column: 4 / 10; }
.text-block h3 { font-size: 2rem; margin-bottom: 30px; font-weight: 400; }
.text-block p { font-size: 1.1rem; line-height: 1.6; color: #aaa; margin-bottom: 20px; }

.full-image { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--accent-gray); }
.dual-gallery { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--accent-gray); }
.dual-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dual-gallery div:first-child { border-right: 1px solid var(--accent-gray); }

/* --- FOOTER & NEXT PROJECT --- */
.next-project { padding: 150px 40px; text-align: center; border-bottom: 1px solid var(--accent-gray); transition: background 0.3s; }
.next-project:hover { background: #111; }
.next-label { color: #666; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; margin-bottom: 20px; display: block;}
.next-title { font-size: 6vw; text-transform: uppercase; color: #fff; letter-spacing: -2px; }

footer { padding: 40px; font-size: 0.8rem; color: #444; display: flex; justify-content: space-between; }
.btn-top { cursor: pointer; transition: color 0.3s; }
.btn-top:hover { color: #fff; }

/* --- ANIMATIONS (Reveal) --- */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .navbar { padding: 20px; }
    .nav-links { display: none; }
    .title-huge { font-size: 18vw; }
    .project-title { font-size: 15vw; }
    .project-meta { grid-template-columns: 1fr 1fr; }
    .meta-item { border-bottom: 1px solid var(--accent-gray); border-right: none; }
    .text-block { grid-column: 1 / -1; }
    .dual-gallery { grid-template-columns: 1fr; }
}

        /* --- 1. BASE & TYPOGRAPHY --- */
        :root {
            --bg-color: #050505;
            --text-color: #ffffff;
            --accent-color: #333; /* Gris oscuro para líneas */
            --font-main: 'Inter', 'Helvetica Neue', Arial, sans-serif;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: var(--font-main);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased; /* Texto más nítido en Mac */
        }

        /* Ocultar scrollbar para limpieza visual */
        ::-webkit-scrollbar { width: 0px; background: transparent; }

        h1, h2, h3, p, a { color: inherit; text-decoration: none; }

        /* --- 2. LAYOUT GRID SYSTEM --- */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            width: 100%;
            border-bottom: 1px solid var(--accent-color);
        }

        /* --- 3. NAVIGATION (STICKY & MINIMAL) --- */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 100;
            padding: 20px 40px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            mix-blend-mode: difference; /* El texto cambia de color según el fondo */
        }

        .logo { font-weight: 600; letter-spacing: -1px; font-size: 1.2rem; }
        .menu-item { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }

        /* --- 4. HERO SECTION (TYPOGRAPHIC) --- */
        .hero {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 40px;
            border-bottom: 1px solid var(--accent-color);
        }

        .hero h1 {
            font-size: 11vw; /* Gigante */
            line-height: 0.9;
            font-weight: 300; /* Letra fina */
            letter-spacing: -0.04em; /* Tracking negativo (estilo suizo) */
            text-transform: uppercase;
        }

        .hero-meta {
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: #888;
            text-transform: uppercase;
        }

        /* --- 5. PARALLAX IMAGE SECTION (THE REVEAL) --- */
        .project-section {
            position: relative;
            /* Grid layout: Texto izquierda, Imagen derecha */
            display: grid;
            grid-template-columns: 4fr 8fr; 
            min-height: 100vh;
            border-bottom: 1px solid var(--accent-color);
        }

        /* Columna de Texto (Sticky) */
        .project-info {
            padding: 60px 40px;
            border-right: 1px solid var(--accent-color);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: sticky;
            top: 0;
            height: 100vh;
        }

        .project-number { font-size: 1rem; color: #555; margin-bottom: 20px; }
        .project-title { font-size: 3rem; font-weight: 400; line-height: 1; margin-bottom: 40px; letter-spacing: -2px;}
        .project-desc { font-size: 1rem; line-height: 1.6; color: #aaa; max-width: 300px; }
        .btn-view { margin-top: auto; border-bottom: 1px solid #fff; padding-bottom: 5px; width: max-content;}

        /* Columna de Imagen (Contenedor Parallax) */
        .project-image-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden; /* CLAVE: Oculta lo que sobra de la imagen */
        }

.parallax-img {
    width: 100%;
    height: 130%; /* Damos un poco más de margen (antes 120%) */
    object-fit: cover;
    position: absolute;
    top: -15%; /* CLAVE: Subimos la imagen físicamente para centrarla */
    left: 0;
    will-change: transform;
    /* Quitamos el transition aquí para el transform porque causaría lag con el scroll */
    transition: filter 0.5s ease; 
    filter: grayscale(0%);
}

.project-section:hover .parallax-img {
    filter: grayscale(0%);
}

        /* --- 6. FULL WIDTH BANNER --- */
        .full-banner {
            height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid var(--accent-color);
            overflow: hidden;
            position: relative;
        }

        .full-banner img {
            width: 100%;
            height: 140%;
            position: absolute;
            top: -20%; /* Centramos para el parallax */
            object-fit: cover;
            opacity: 0.6;
        }

        .banner-text {
            position: relative;
            z-index: 2;
            font-size: 5vw;
            text-transform: uppercase;
            letter-spacing: -2px;
            mix-blend-mode: overlay;
        }

        /* --- 7. FOOTER MINIMAL --- */
        footer {
            padding: 100px 40px;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        
        .footer-col h4 { color: #555; margin-bottom: 20px; font-weight: 400;}
        .footer-col p { font-size: 1.5rem; line-height: 1.4; max-width: 400px;}

/* --- CAROUSEL SECTION --- */
.carousel-section {
    border-bottom: 1px solid var(--accent-gray);
    overflow: hidden; /* Evita scroll horizontal en la página */
    padding-bottom: 80px;
}

.carousel-header {
    padding: 60px 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--accent-gray);
    margin-bottom: 40px;
}

.carousel-title {
    font-size: 5vw;
    text-transform: uppercase;
    letter-spacing: -2px;
    line-height: 1;
}

.drag-indicator {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    animation: blink 2s infinite;
}

@keyframes blink { 0%, 100% {opacity: 1;} 50% {opacity: 0.3;} }

/* EL SLIDER EN SÍ */
.slider-container {
    width: 100%;
    overflow-x: scroll; /* Scroll nativo */
    overflow-y: hidden;
    cursor: grab; /* Manita abierta */
    /* Ocultar barra de scroll nativa */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE */
}
.slider-container::-webkit-scrollbar { 
    display: none; /* Chrome/Safari */
}

.slider-container:active {
    cursor: grabbing; /* Manita cerrada al arrastrar */
}

.slider-track {
    display: flex;
    gap: 40px; /* Espacio entre items */
    padding: 0 40px; /* Padding lateral */
    width: max-content; /* El ancho se adapta al contenido */
}

.slider-item {
    width: 400px; /* Ancho fijo de cada tarjeta */
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.slider-item:hover {
    transform: translateY(-10px);
}

.card-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #111;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.7s ease;
}

/* Efecto Hover: Color y Zoom sutil */
.slider-item:hover .card-image img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.card-info h3 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 5px;
}

.card-info p {
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive para el carrusel */
@media (max-width: 768px) {
    .carousel-title { font-size: 12vw; }
    .slider-item { width: 280px; }
    .card-image { height: 350px; }
}

/* --- SERVICES SECTION --- */
.services-container {
    border-bottom: 1px solid var(--accent-gray);
    background-color: var(--bg-color);
}

.services-header {
    padding: 20px 40px;
    border-bottom: 1px solid var(--accent-gray);
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #666;
    letter-spacing: 1px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columnas iguales */
    /* No ponemos gap para que los bordes se toquen */
}

.service-item {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 600px; /* Altura mínima para presencia */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Animación suave */
    border-right: 1px solid var(--accent-gray); /* Borde derecho por defecto */
    position: relative;
    cursor: default;
}

/* Quitamos el borde derecho del último elemento para que no se duplique con el borde de la pantalla si lo hubiera */
.service-item:last-child {
    border-right: none;
}

/* --- INTERACCIÓN HOVER (INVERSIÓN) --- */
.service-item:hover {
    background-color: #ffffff; /* Fondo Blanco */
    color: #000000; /* Texto Negro */
}

/* Cuando hago hover, las líneas grises internas del item se vuelven negras o transparentes */
.service-item:hover .serv-list li {
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

/* --- TYPOGRAPHY & LAYOUT --- */
.serv-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    font-size: 1rem;
    font-family: monospace; /* Toque técnico */
}

.serv-title {
    font-size: 3.5vw; /* Tamaño responsivo grande */
    line-height: 0.9;
    text-transform: uppercase;
    margin-bottom: 30px;
    letter-spacing: -2px;
}

.serv-desc {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 90%;
    margin-bottom: 60px;
    opacity: 0.7; /* Texto un poco más apagado */
}

.serv-list {
    list-style: none;
    margin-top: auto; /* Empuja la lista al final */
}

.serv-list li {
    padding: 15px 0;
    border-bottom: 1px solid var(--accent-gray);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: border-color 0.4s;
}

.serv-list li:last-child {
    border-bottom: none;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .serv-title { font-size: 3rem; }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
    }
    
    .service-item {
        border-right: none;
        border-bottom: 1px solid var(--accent-gray);
        min-height: auto;
        padding: 60px 20px;
    }
    
    .serv-title { 
		font-size: clamp(2.5rem, 11vw, 3.5rem);
	    word-break: break-word; 
        hyphens: auto;}
}

/* --- CLIENTS SECTION --- */
.clients-section {
    border-bottom: 1px solid var(--accent-gray);
    background-color: var(--bg-color);
}

.clients-header {
    padding: 60px 40px;
    border-bottom: 1px solid var(--accent-gray);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.clients-title {
    font-size: 4vw;
    text-transform: uppercase;
    letter-spacing: -2px;
    line-height: 1;
}

.clients-subtitle {
    text-align: right;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* --- LOGO GRID --- */
.logo-grid {
    display: grid;
    /* 4 Columnas en escritorio */
    grid-template-columns: repeat(4, 1fr); 
    width: 100%;
}

.logo-item {
    aspect-ratio: 1 / 1; /* Cajas perfectamente cuadradas */
    border-right: 1px solid var(--accent-gray);
    border-bottom: 1px solid var(--accent-gray);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 40px;
    transition: background-color 0.3s ease;
    cursor: crosshair; /* Cursor técnico */
}

/* Ajuste de bordes para la retícula perfecta */
.logo-item:nth-child(4n) { border-right: none; } /* Quita borde derecho cada 4 items */

/* IMAGEN DEL LOGO */
.logo-item img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
    opacity: 0.5; /* Logos un poco apagados al inicio */
    transition: all 0.4s ease;
    filter: grayscale(100%) invert(1); /* Asegura que sean blancos */
}

/* TEXTO DE CATEGORÍA (Oculto hasta el hover) */
.client-name {
    position: absolute;
    bottom: 20px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    color: #000; /* Será negro porque el fondo será blanco */
    font-weight: 600;
}

/* --- INTERACCIÓN HOVER --- */
.logo-item:hover {
    background-color: #ffffff; /* Fondo se vuelve blanco */
}

.logo-item:hover img {
    opacity: 1;
    transform: scale(1.1); /* Ligero zoom */
    filter: grayscale(0%) invert(0); /* Se vuelven negros (o su color original) */
}

.logo-item:hover .client-name {
    opacity: 1;
    transform: translateY(0);
}

/* --- CAJA DE LLAMADA A LA ACCIÓN (CTA) --- */
.cta-box {
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.your-logo {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.cta-box:hover {
    background-color: #333; /* Un gris más claro, pero no blanco */
}
.cta-box:hover .your-logo {
    color: #fff; /* Mantiene blanco */
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .logo-grid { grid-template-columns: repeat(3, 1fr); }
    .logo-item:nth-child(4n) { border-right: 1px solid var(--accent-gray); } /* Reset */
    .logo-item:nth-child(3n) { border-right: none; }
    .clients-title { font-size: 3rem; }
}

@media (max-width: 768px) {
    .clients-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .clients-subtitle { text-align: left; }
    
    .logo-grid { grid-template-columns: repeat(2, 1fr); }
    .logo-item:nth-child(3n) { border-right: 1px solid var(--accent-gray); } /* Reset */
    .logo-item:nth-child(2n) { border-right: none; }
    
    .logo-item { aspect-ratio: auto; 
		padding: 5px; 
		height: 140px; }
	
	.title-huge {
        /* Bajamos de 13vw a 9.5vw para que entren 10 letras */
        font-size: 13.2vw; 
        
        /* Aseguramos que no se rompa la palabra */
        word-break: normal; 
        overflow-wrap: normal;
    }
	.client-name {
        display: none;
    }
	.banner-text {
        font-size: 10vw;   /* Aumentamos tamaño para que se lea bien */
        line-height: 0.9;  /* Esto junta las líneas (MENOS de 1 es más pegado) */
        width: 80%;        /* Evita que el texto toque los bordes de la pantalla */
        text-align: center;
    }
}

html {
    scroll-behavior: smooth; /* Hace que baje deslizándose suavemente */
}

/* Esto soluciona que el menú tape el título al bajar */
#work {
    scroll-margin-top: 100px; /* Ajusta este valor según la altura de tu navbar */
}

/* --- SCROLL INDICATOR --- */
.scroll-indicator {
    position: absolute;
    bottom: 40px; /* Separación del borde inferior */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Encima del video */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    mix-blend-mode: difference; /* Truco pro: invierte el color según el fondo */
    opacity: 1;
    transition: opacity 0.5s ease; /* Para que desaparezca suave al bajar */
}

.scroll-text {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    font-weight: 600;
}

.scroll-line {
    width: 1px;
    height: 40px; /* Alto de la línea */
    background-color: #fff;
    position: relative;
    overflow: hidden;
}

/* Animación de la línea "cayendo" infinita */
.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Color que "tapa" la línea blanca */
    animation: scrollAnim 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes scrollAnim {
    0% { transform: translateY(-100%); } /* Empieza arriba fuera de vista */
    100% { transform: translateY(100%); } /* Termina abajo */
}

/* --- AJUSTE MÓVIL --- */
@media (max-width: 768px) {
    .scroll-indicator {
        bottom: 80px; /* Lo subimos un poco en móvil para que no choque con la barra del navegador */
    }
}

        /* Mobile */
        @media (max-width: 768px) {
            .hero h1 { font-size: 15vw; }
            .project-section { grid-template-columns: 1fr; }
            .project-info { height: auto; position: relative; border-right: none; border-bottom: 1px solid var(--accent-color); }
            .project-image-wrapper { height: 60vh; }
        }

/* --- PAGE HEADER --- */
.page-header {
    padding: 150px 40px 60px 40px; /* Mucho padding arriba para librar el navbar */
    border-bottom: 1px solid var(--accent-gray);
}

.page-title {
    font-size: 8vw;
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    margin-bottom: 40px;
}

.page-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: monospace;
}

/* --- WORK GRID SYSTEM --- */
.work-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Columnas exactas */
    width: 100%;
}

.work-card {
    border-bottom: 1px solid var(--accent-gray);
    border-right: 1px solid var(--accent-gray); /* Línea vertical central */
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    transition: background-color 0.4s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Para contener la imagen si hacemos zoom */
}

/* Quitamos borde derecho a los pares para que no se duplique con el borde de pantalla */
.work-card:nth-child(even) {
    border-right: none;
}

/* --- IMAGEN DEL PROYECTO --- */
.work-image-box {
    width: 100%;
    aspect-ratio: 16 / 9; /* Formato rectangular */
    overflow: hidden;
    background-color: #111;
}

.work-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* Blanco y negro por defecto */
    transition: filter 0.5s ease, transform 0.7s ease;
}

/* --- TEXTOS DEL PROYECTO --- */
.work-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.work-cat {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 1px;
}

.work-name {
    font-size: 2rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: #fff;
    transition: color 0.4s ease;
}

.work-arrow {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.5rem;
    opacity: 0;
    transform: translate(-10px, 10px);
    transition: all 0.4s ease;
}

/* --- EFECTOS HOVER --- */
.work-card:hover {
    background-color: #fff; /* Fondo blanco */
}

.work-card:hover .work-image-box img {
    filter: grayscale(0%); /* A color */
    transform: scale(1.05); /* Zoom sutil */
}

.work-card:hover .work-name {
    color: #000; /* Texto negro */
}

.work-card:hover .work-cat {
    color: #444; /* Categoría gris oscura */
}

.work-card:hover .work-arrow {
    opacity: 1;
    color: #000;
    transform: translate(0, 0); /* Flecha aparece */
}

/* --- CASE STUDY HEADER --- */
.case-header {
    padding-top: 150px;
    border-bottom: 1px solid var(--accent-gray);
}

.case-title-wrapper {
    padding: 0 40px 60px 40px;
}

.case-title-wrapper h1 {
    font-size: 10vw; /* Título gigante */
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}

/* Grid de Meta Datos (Cliente, Año, etc) */
.case-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--accent-gray);
}

.meta-box {
    padding: 20px 40px;
    border-right: 1px solid var(--accent-gray);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.meta-box:last-child { border-right: none; }

.meta-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.meta-value {
    font-size: 0.95rem;
    font-weight: 600;
}

/* --- HERO IMAGE CONTAINER --- */
.case-hero-img {
    width: 100%;
    height: 80vh;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--accent-gray);
}
/* Reutiliza tu clase .parallax-img y tu script JS para animar esto */

/* --- STICKY CONTENT SECTION --- */
.case-content {
    display: grid;
    grid-template-columns: 4fr 8fr; /* 1/3 Texto, 2/3 Imágenes */
    border-bottom: 1px solid var(--accent-gray);
    position: relative;
}

.case-text {
    padding: 80px 40px;
    border-right: 1px solid var(--accent-gray);
    height: fit-content; /* Importante para sticky */
}

/* EL EFECTO STICKY: El texto te persigue mientras bajas */
.sticky-col {
    position: sticky;
    top: 0; /* Se pega al techo */
}

.section-heading {
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.body-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #aaa;
    margin-bottom: 50px;
    max-width: 90%;
}

.deliverables-list h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 20px;
}

.deliverables-list ul {
    list-style: none;
    padding: 0;
}

.deliverables-list li {
    padding: 10px 0;
    border-bottom: 1px solid #333;
    color: #fff;
}

/* Galería derecha */
.case-gallery {
    display: flex;
    flex-direction: column;
}

.case-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--accent-gray);
}

.case-gallery img:last-child { border-bottom: none; }

/* --- DESIGN SYSTEM SECTION (Swatches & Type) --- */
.design-system {
    padding: 80px 40px;
    border-bottom: 1px solid var(--accent-gray);
}

.ds-title {
    font-size: 4vw;
    text-transform: uppercase;
    margin-bottom: 60px;
}

.ds-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.ds-item h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 30px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

/* Paleta de Colores */
.color-swatches {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* Importante: permite que bajen de línea si no caben */
}

.swatch {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Circulares */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    border: 1px solid #333;
    
    /* PROPIEDADES NUEVAS PARA EVITAR DEFORMACIÓN */
    flex-shrink: 0; /* Evita que se aplasten y parezcan huevos */
    aspect-ratio: 1 / 1; /* Mantiene la proporción cuadrada siempre */
}

/* --- AJUSTE PARA MÓVILES (IPHONE MINI, ETC) --- */
@media (max-width: 768px) {
    .color-swatches {
        gap: 10px; /* Reducimos el espacio entre bolas */
        justify-content: flex-start; /* Alineados a la izquierda */
    }

    .swatch {
        width: 75px;  /* Tamaño reducido para que quepan 3 o 4 en fila */
        height: 75px; 
        font-size: 0.6rem; /* Texto un poco más pequeño para que quepa el HEX */
    }
}

/* Preview de Tipografía */
.type-preview {
    display: flex;
    align-items: center;
    gap: 30px;
}

.type-lg {
    font-size: 6rem;
    line-height: 1;
    font-weight: 600;
}

.type-meta span {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
	
}
.type-meta p {
    font-family: monospace;
    font-size: 0.8rem;
    color: #666;
    letter-spacing: 2px;
	word-wrap: break-word;      /* Estándar */
    overflow-wrap: break-word;  /* Estándar moderno */
    word-break: break-all;      /* Forza el corte de la línea si es necesario */
    line-height: 1.4;
    margin-top: 5px;
}

/* EN MÓVIL: Cambiamos la dirección para que el abecedario tenga espacio */
@media (max-width: 768px) {
    .type-preview {
        flex-direction: column; /* Pone la 'Aa' arriba y el texto abajo */
        align-items: flex-start; /* Alinea a la izquierda */
        gap: 10px;
    }
}

/* --- FULL WIDTH FINAL IMAGE --- */
.full-width-img img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--accent-gray);
}

/* --- NEXT PROJECT NAV --- */
.next-project-nav {
    padding: 100px 40px;
    background-color: var(--bg-color);
    transition: background-color 0.4s ease;
    cursor: pointer;
    display: block;
}

.next-project-nav:hover {
    background-color: #111; /* Se oscurece ligeramente */
}

.next-subtitle {
    display: block;
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.next-link {
    font-size: 6vw;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.next-link .arrow {
    font-size: 4vw;
    transition: transform 0.3s ease;
}

.next-project-nav:hover .arrow {
    transform: translateX(20px);
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .case-title-wrapper h1 { font-size: 15vw; }
    
    .case-meta-grid {
        grid-template-columns: 1fr 1fr; /* 2 columnas en móvil */
    }
    .meta-box { border-bottom: 1px solid var(--accent-gray); }
    .meta-box:nth-child(2n) { border-right: none; }
    
    /* Rompemos el layout sticky en móvil */
    .case-content {
        grid-template-columns: 1fr;
    }
    
    .case-text {
        border-right: none;
        border-bottom: 1px solid var(--accent-gray);
        position: static; /* Ya no es sticky */
    }
    
    .ds-grid { grid-template-columns: 1fr; }
    
    .next-link { font-size: 12vw; }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .page-title { font-size: 15vw; }
    
    .work-grid {
        grid-template-columns: 1fr; /* 1 Columna en móvil */
    }
    
    .work-card {
        border-right: none; /* Quitamos línea vertical */
        padding: 20px;
    }
    
    .work-name { font-size: 1.5rem; }
}

/* --- PAGE TRANSITION OVERLAY --- */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Color de la cortina (Negro) */
    z-index: 9999; /* Encima de todo, incluso del navbar */
    opacity: 1; /* Empieza visible (tapando la web) */
    pointer-events: none; /* Importante: deja pasar clicks cuando es invisible */
    transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1); /* Curva suave "Quart" */
}

/* Clase que añadiremos con JS para ocultar la capa */
.page-transition.reveal {
    opacity: 0;
}

/* --- ESTILOS NAVBAR MÓVIL --- */

/* 1. Botón Hamburguesa */
.hamburger {
    display: none; /* Oculto en escritorio */
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 2000; /* Por encima de todo */
    width: 30px;
}

.bar {
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.4s ease;
}

/* Animación a 'X' cuando está activo */
.hamburger.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}
.hamburger.active .bar:nth-child(2) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* 2. Overlay (La cortina negra) */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-color); /* Negro */
    z-index: 2000; ; /* Debajo del navbar pero encima del contenido */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    
    /* Estado inicial: oculto arriba */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Estado abierto */
.mobile-overlay.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Enlaces del menú móvil */
.mobile-links-list {
    list-style: none;
}

.m-link {
    font-size: 12vw; /* Letra GIGANTE estilo tu diseño */
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.1;
    display: block;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
    color: #fff;
    display: flex;
    justify-content: space-between;
}

.m-link .num {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.5;
    margin-top: 10px;
}

/* --- MEDIA QUERIES --- */
@media (max-width: 768px) {
	
	  footer {
        /* 1. Cambiamos la dirección a columna (uno arriba, otro abajo) */
        flex-direction: column;
        
        /* 2. Reducimos el padding para ganar espacio */
        padding: 40px 20px; 
        
        /* 3. Espacio vertical entre el nombre y el botón */
        gap: 15px; 
    }

    /* El primer elemento (PAUL_VALERA...) se queda a la izquierda por defecto */
    
    /* 4. Forzamos el botón 'Regresar' a la derecha */
    .btn-top {
        align-self: flex-end; /* Esto lo empuja al borde derecho */
        
        /* Opcional: Aumentar zona de clic para que sea más fácil de tocar con el dedo */
        padding: 10px 0 10px 20px; 
    }

    /* Ocultamos los links de escritorio */
    .desktop-only {
        display: none !important;
    }
    
    /* Mostramos la hamburguesa */
    .hamburger {
        display: flex;
    }
    
    /* Ajuste del navbar para que el logo y la hamburguesa queden alineados */
    .navbar {
        justify-content: space-between;
        padding: 20px;
    }
	
	 .case-hero-img {
        /* Usamos 'svh' (Small Viewport Height) que ignora la barra de navegación del móvil */
        height: 45svh; 
        min-height: 300px;
        /* Opcional: Si svh da problemas en navegadores muy viejos, usa height: 350px; fijo */
    }

    .parallax-img {
        height: 100% !important;
        width: 100%;
        top: 0 !important;
        left: 0;
        transform: none !important;
        object-fit: cover;
        position: absolute;
        will-change: auto; /* Ahorra batería desactivando optimización de animación */
    }
	
	    .next-project-nav {
        padding: 60px 20px;
    }

    /* 2. Cambiamos la orientación: Texto arriba, flecha abajo */
    .next-link {
        flex-direction: column; /* Pone los elementos en columna */
        align-items: flex-start; /* Alinea todo a la izquierda */
        gap: 20px; /* Espacio entre el texto y la flecha */
    }

    /* 3. Ajustamos el H1 para que no se salga */
    .next-link h1 {
        font-size: 15vw; /* Tamaño grande pero controlado */
        width: 100%; /* Asegura que ocupe todo el ancho disponible */
        word-wrap: break-word; /* Si una palabra es muy larga, la corta */
        line-height: 0.9;
    }

    /* 4. Ajuste específico para el subtítulo dentro del link */
    .next-link .subtitle-style {
        font-size: 1rem; /* Tamaño legible */
        display: block; /* Fuerza salto de línea */
        margin-top: 10px;
        letter-spacing: 1px;
        white-space: normal; /* Permite que el texto baje si es muy largo */
        opacity: 0.7;
    }

    /* 5. Colocamos la flecha a la derecha para mantener el estilo */
    .next-link .arrow {
        align-self: flex-end; /* Mueve la flecha a la derecha del contenedor */
        font-size: 10vw; /* Tamaño proporcional */
        margin-top: -10px; /* Ajuste visual */
    }
	
	  /* 1. Cambiamos la dirección a columna (uno debajo del otro) */
    .carousel-header {
        flex-direction: column;
        align-items: flex-start; /* Alinea todo a la izquierda */
        padding: 40px 20px; /* Reducimos el padding para ganar espacio */
        gap: 20px; /* Espacio seguro entre el título y el botón */
    }

    /* 2. Ajustamos el tamaño del título para que no sea excesivo */
    .carousel-title {
        font-size: 13vw; /* Grande e impactante */
        line-height: 0.9; /* Pegadito para estilo moderno */
        width: 100%;
        word-wrap: break-word; /* Evita que rompa el ancho si es muy largo */
    }

    /* 3. Estilizamos el botón "Explora" */
    .carousel-header a {
        align-self: flex-end; /* Mueve el botón "Explora" a la DERECHA */
        margin-top: 10px;
        text-decoration: none;
    }
	 /* 1. Reducimos el padding drásticamente para ganar espacio */
    .page-header {
        /* Arriba | Derecha | Abajo | Izquierda */
        padding: 130px 20px 40px 20px; 
    }

    /* 2. Ajustamos el título para que no toque los bordes */
    .page-title {
        font-size: 13.5vw; /* Un pelín más pequeño que 15vw para seguridad */
        line-height: 0.9;
        width: 100%;
        word-wrap: break-word; /* Evita desbordes si la palabra es larga */
        margin-bottom: 30px; /* Un poco menos de espacio abajo */
    }

    /* 3. Organizamos la info pequeña (meta) para que no se empalme */
    .page-meta {
        flex-direction: column; /* Pone un texto debajo del otro */
        align-items: flex-start; /* Todo alineado a la izquierda */
        gap: 10px; /* Espacio entre las dos líneas de texto */
        font-size: 0.8rem; /* Tamaño legible */
    }
	
/* 1. Ajuste del contenedor del menú */
.mobile-overlay {
    padding: 20px 30px; /* Más aire a los lados */
    justify-content: center; /* Centrado verticalmente */
    align-items: flex-start; /* Alineado a la izquierda */
}

/* 2. Ajuste de los enlaces */
.m-link {
    /* Usamos clamp para que nunca sea menor a 2rem ni mayor a 3.5rem */
    font-size: clamp(2.5rem, 10vw, 3.5rem); 
    line-height: 1.2;
    margin-bottom: 25px; /* Un poco más de separación entre items */
    padding-bottom: 5px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Línea más sutil */
    
    /* Flex para alinear el número a la derecha */
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alinea el número con la base de la letra */
}

/* 3. Ajuste de los números pequeños (01, 02...) */
.m-link .num {
    font-size: 0.9rem;
    font-weight: 300;
    opacity: 0.6;
    margin-bottom: 5px; /* Pequeño ajuste visual para alinear con el texto */
}

/* 4. Aseguramos que el botón de cerrar (hamburguesa) se vea bien */
.hamburger {
    margin-left: auto; /* Empuja la hamburguesa a la derecha si es necesario */
}

/* --- AJUSTE ESPECÍFICO PARA PANTALLAS PEQUEÑAS (iPhone Mini) --- */
@media (max-width: 390px) {
    .m-link {
        font-size: 9.5vw; /* Un pelín más pequeño para que respire en 375px */
    }
    
    .mobile-overlay {
        padding: 20px; /* Reducimos padding lateral en pantallas muy angostas */
    }
}

/* --- FIX DE SEGURIDAD (Para que el menú no quede debajo de la barra de navegación) --- */
.mobile-overlay {
    padding-top: 100px; /* Empuja el contenido hacia abajo para no chocar con el Logo/X */
    justify-content: flex-start; /* En móviles pequeños, mejor que empiece desde arriba */
}	

	
	/* Estilo para la flecha tipo superíndice */
.super-arrow {
    display: inline-block;
    
    /* 1. Tamaño: La flecha será el 50% del tamaño de la letra "I" de Instagram */
    width: 0.5em; 
    height: 0.5em;
    
    /* 2. Posición: La elevamos negativamente en el eje Y */
    transform: translateY(-0.4em); 
    
    /* 3. Ajustes visuales */
    margin-left: 2px; /* Un pelín de aire entre la 'm' y la flecha */
    vertical-align: middle; /* Base para calcular el transform */
    
    /* 4. Grosor: Asegura que se vea nítida aunque sea pequeña */
    overflow: visible; /* A veces necesario para trazos gruesos en iconos peques */
}

/* Opcional: Si en el iPhone Mini se ve muy pegado al borde derecho */
@media (max-width: 390px) {
    .super-arrow {
        width: 0.45em; /* Un poquito más pequeña en pantallas mini */
        height: 0.45em;
    }
}
    
/* --- CORRECCIÓN DE ANCHO DEL MENÚ --- */

.mobile-overlay {
    /* Reducimos el espacio a los lados para que el texto tenga más sitio */
    padding-left: 20px !important; 
    padding-right: 20px !important;
    
    /* Mantenemos el ajuste de seguridad superior */
    padding-top: 100px;
    
    /* Aseguramos que el ancho total no exceda la pantalla */
    box-sizing: border-box;
    width: 100%;
}

/* Ajuste específico para que el número (01, 02, 03) no se aplaste */
.m-link .num {
    /* Esto obliga al número a mantener su tamaño y no encogerse si falta espacio */
    flex-shrink: 0; 
    margin-left: 15px; /* Un poco de aire mínimo garantizado entre texto y número */
}
	


/* --- AJUSTE EXTRA PARA IPHONE MINI (Pantallas estrechas) --- */
@media (max-width: 390px) {
    .mobile-overlay {
        /* En pantallas muy angostas, apuramos más los bordes */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .m-link {
        /* Bajamos un pelín el tamaño de fuente si es necesario para "Proyectos" */
        font-size: 9vw; 
    }
}	
	
}

/* Por defecto (Escritorio): Ocultamos el video móvil */
.mobile-only-video {
    display: none;
}
.desktop-only-video {
    display: block;
}

/* En Móviles: Invertimos la visibilidad */
@media (max-width: 768px) {
    .desktop-only-video {
        display: none;
    }
    
    .mobile-only-video {
        display: block;
        object-fit: cover; /* Se ajustará perfecto porque el video ya es vertical */
        height: 100%;
        width: 100%;
    }
}

 /* --- WHATSAPP FLOAT BUTTON --- */
.whatsapp-float {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    background-color: #25d366; /* Fondo verde */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1500; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* Animación de entrada */
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s forwards;
    opacity: 0;
}

/* ESTILOS ESPECÍFICOS PARA LA IMAGEN */
.whatsapp-float img {
    width: 35px;       /* Tamaño de la imagen dentro del botón */
    height: 35px;
    object-fit: contain; /* Evita que la imagen se deforme */
    display: block;
}

/* Efecto Hover */
.whatsapp-float:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4);
}

/* Animación de entrada (Keyframes) */
@keyframes popIn {
    from { opacity: 0; transform: scale(0) rotate(-45deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

/* --- RESPONSIVE PARA MÓVIL --- */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 30px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    
    .whatsapp-float img {
        width: 28px; /* Ajuste de imagen en móvil */
        height: 28px;
    }
}