/* --- 1. VARIABLES & RESET --- */
/* --- 0. DEFINICIÓN AVANZADA (Para que la mezcla sea suave) --- */
/* Esto le dice al navegador: "Oye, --accent-red es un color, mézclalo bien" */
@property --accent-red {
  syntax: '<color>';
  initial-value: #FF2A2A;
  inherits: true;
}

/* --- 1. VARIABLES & RESET --- */
:root {
    --bg-color: #050505;
    --text-color: #E0E0E0;
    
    /* Color base por si falla la animación */
    --accent-red: #FF2A2A; 

    --font-display: 'Oswald', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --font-ui: 'Inter', sans-serif;

    /* AQUI ESTÁ EL CAMBIO DE VELOCIDAD: */
    /* 60s = 1 minuto para dar la vuelta completa al ciclo de colores */
    /* Si lo quieres aún más lento, pon 120s */
    animation: neonFlow 40s infinite linear;
}

/* DEFINICIÓN DE LA ANIMACIÓN DE COLORES */
@keyframes neonFlow {
    0% {
        --accent-red: #FF2A2A; /* ROJO (Inicio) */
    }
    25% {
        --accent-red: #00F3FF; /* CYAN */
    }
    50% {
        --accent-red: #39FF14; /* VERDE TÓXICO */
    }
    75% {
        --accent-red: #BC13FE; /* PÚRPURA */
    }
    100% {
        --accent-red: #FF2A2A; /* VUELTA AL ROJO (Final suave) */
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   /* cursor: none;  Ocultamos cursor nativo */
}

/* --- SCROLL BEHAVIOR & OFFSET --- */
html {
    scroll-behavior: smooth; /* Hace que el viaje sea suave */
}

/* Esto evita que el menú fijo tape el título de la sección al bajar */
section, footer {
    scroll-margin-top: 100px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-ui);
    overflow-x: hidden;
    line-height: 1.2;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- 2. UI ELEMENTS (CURSOR & MENU) --- */
/* Custom Cursor */
.cursor {
    position: fixed; width: 8px; height: 8px;
    background: var(--accent-red); border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;
}
.cursor-follower {
    position: fixed; width: 40px; height: 40px;
    border: 1px solid rgba(255, 42, 42, 0.5); border-radius: 50%;
    pointer-events: none; z-index: 9998;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, width 0.3s, height 0.3s;
}
.cursor-active { transform: translate(-50%, -50%) scale(0); }
.follower-active {
    width: 80px; height: 80px;
    background: rgba(255, 42, 42, 0.1);
    border-color: var(--accent-red);
    backdrop-filter: blur(2px);
}

/* Menu Overlay */
.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(5, 5, 5, 0.98);
    z-index: 200;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s ease;
}
.menu-overlay.active { opacity: 1; pointer-events: all; }

.menu-close {
    position: absolute; top: 2rem; right: 4rem;
    font-family: var(--font-mono); color: var(--accent-red);
}

.menu-links li { margin: 1.5rem 0; overflow: hidden; }
.menu-links a {
    font-family: var(--font-display); font-size: 4rem;
    font-weight: 700; color: #fff; text-transform: uppercase;
    display: block; transform: translateY(100%); transition: transform 0.5s ease 0.2s;
}
.menu-overlay.active .menu-links a { transform: translateY(0); }
.menu-links a:hover { color: var(--accent-red); -webkit-text-stroke: 1px var(--accent-red); }

.menu-footer {
    position: absolute; bottom: 3rem; width: 100%;
    display: flex; justify-content: space-between; padding: 0 4rem;
    font-family: var(--font-mono); font-size: 0.8rem; color: #666;
}

/* Navbar */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 2rem 4rem; position: fixed; width: 100%; top: 0; z-index: 100;
     /* --- FONDO NEGRO TRANSPARENTE CON BLUR --- */
    background: rgba(5, 5, 5, 0.6); /* 85% Negro, 15% Transparente */
    backdrop-filter: blur(12px);      /* Efecto cristal (desenfoca lo de atrás) */
    -webkit-backdrop-filter: blur(12px); /* Para que funcione en Safari/iPhone */
    
    /* Borde sutil abajo para separar del contenido (Opcional) */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    
    /* Transición suave por si cambia de tamaño */
    transition: all 0.3s ease;
}
.logo {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.8rem; letter-spacing: 1px; color: var(--accent-red);
}
.desktop-links { display: flex; gap: 2rem; }
.desktop-links a {
    font-family: var(--font-ui); font-size: 0.9rem; letter-spacing: 1px;
    text-transform: uppercase; opacity: 0.7; transition: opacity 0.3s;
}
.desktop-links a:hover { opacity: 1; color: var(--accent-red); }
.menu-btn {
    font-family: var(--font-ui); font-size: 0.9rem; letter-spacing: 1px;
    display: none; 
}

/* --- 3. SECTIONS --- */

/* =========================================
   HERO SECTION (CORREGIDO PARA SLIDER)
   ========================================= */
.hero {
    height: 100vh;
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    position: relative; /* CRUCIAL: Mantiene a los hijos absolutos dentro */
    overflow: hidden;   /* CRUCIAL: Corta lo que sobre salga */
}

/* SLIDER STYLES */
.hero-slider {
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; /* Fondo */
}

.hero-slide {
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.hero-slide.active {
    opacity: 0.6; /* Opacidad para que se lea el texto */
}

/* UI ELEMENTS */
.ui-grid { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 2; /* Encima del slider */
    pointer-events: none; 
}
.ui-line-v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 42, 42, 0.2); }
.ui-line-v.left { left: 15%; }
.ui-line-v.right { right: 15%; }
.ui-data { position: absolute; font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-red); opacity: 0.7; }
.top-left { top: 120px; left: 16%; }
.bottom-right { bottom: 40px; right: 16%; }

/* HERO CONTENT */
.hero-content { 
    position: relative; 
    z-index: 10; /* Encima de todo */
    text-align: center; width: 100%; 
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 11rem); 
    line-height: 1.0; text-transform: uppercase; font-weight: 700;
    color: var(--accent-red); margin-bottom: 1.5rem; letter-spacing: -2px;
}

.hero-subtitle {
    font-family: var(--font-ui); font-size: clamp(1rem, 2vw, 1.5rem);
    letter-spacing: 4px; text-transform: uppercase; color: #fff; margin-bottom: 3rem;
}

/* Buttons */
.btn-solid {
    display: inline-block; padding: 1rem 2.5rem;
    background: var(--accent-red); color: #000;
    font-weight: 600; font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.3s ease; border: none;
}
.btn-solid:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 0 20px rgba(255, 42, 42, 0.4); }

.btn-outline {
    border: 1px solid var(--accent-red); padding: 1rem 2.5rem;
    color: var(--accent-red); font-family: var(--font-ui); text-transform: uppercase;
    font-weight: 600; letter-spacing: 1px; transition: 0.3s;
}
.btn-outline:hover { background: var(--accent-red); color: #000; }

/* MARQUEE SECTION (OPTIMIZADO) */
.marquee-section {
    padding: 3rem 0; 
    background: var(--bg-color);
    border-top: 1px solid #333; 
    border-bottom: 1px solid #333;
    overflow: hidden; 
    position: relative;
    z-index: 5;
    /* Inclinación ligera para efecto "Speed" (Opcional, si te gusta el estilo previo) */
    /* transform: rotate(-1deg) scale(1.02); */ 
}

.marquee-container { 
    display: flex; 
    width: 100%; 
    overflow: hidden; 
    user-select: none;
}

.marquee-content {
    display: flex;
    align-items: center; /* Centrado vertical perfecto */
    white-space: nowrap;
    animation: scroll 25s linear infinite; /* Un poco más lento para legibilidad */
    
    /* CORRECCIÓN PRINCIPAL: */
    flex-shrink: 0;   
    /* min-width: 100%; <--- ESTO SE BORRA, causaba los huecos */
    
    will-change: transform; /* Optimización para que no de tirones */
}

.marquee-content span {
    font-family: var(--font-display); 
    font-size: 4vw;
    color: #5d5d5d; 
    font-weight: 700; 
    text-transform: uppercase; 
    padding: 0 1.5rem; /* Un poco más de aire entre palabras */
    transition: color 0.3s ease;
}

.marquee-content span:hover { 
    color: var(--accent-red); 
    cursor: default;
}

.separator {
    color: var(--accent-red); /* El '+' o infinito siempre rojo */
}

@keyframes scroll { 
    from { transform: translateX(0); } 
    to { transform: translateX(-100%); } 
}


/* =========================================
   TARGET SECTION (4 COLUMNAS + WIDE)
   ========================================= */

/* Contenedor Extra Ancho (Solo para esta sección) */
.container-wide {
    max-width: 95%; /* Ocupa casi todo el ancho */
    margin: 0 auto;
    padding: 0 2rem;
}

.target-section {
    padding: 2rem 0 4rem 0; 
    background-color: var(--bg-color);
    border-bottom: 1px solid #222;
}

.target-grid {
    display: grid;
    /* AQUÍ ESTÁ EL CAMBIO: 4 columnas */
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem; /* Menos gap para que quepan */
    margin-top: 4rem;
}

.target-card {
    border: 1px solid #333;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.01);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    
    /* FLEXBOX CONFIG */
    display: flex;
    flex-direction: column;
    /* justify-content: space-between;  <-- ESTO LO QUITAMOS */
}

/* Efecto Hover: Borde Rojo y Fondo sutil */
.target-card:hover {
    border-color: var(--accent-red);
    background: rgba(255, 42, 42, 0.03);
    transform: translateY(-5px);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #222;
}

.card-num {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--accent-red);
}

.card-icon {
    font-size: 1.5rem;
    filter: grayscale(1);
    transition: 0.3s;
}

.target-card:hover .card-icon {
    filter: grayscale(0);
    transform: scale(1.1);
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.8rem; /* Un poco más pequeño para caber en 4 col */
    color: #fff;
    margin-bottom: 1rem;
    text-transform: uppercase;
    line-height: 1;
}

.card-desc {
    font-family: var(--font-ui);
    font-size: 0.95rem; /* Texto ajustado */
    color: #888;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.card-status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s ease;
    
    /* EL TRUCO MAGICO: */
    margin-top: auto; /* Esto empuja este elemento al final de la tarjeta, dejando el resto arriba */
    padding-top: 2rem; /* Un poco de aire extra para separarlo del texto */
}

.target-card:hover .card-status {
    opacity: 1;
    color: var(--accent-red);
    transform: translateX(0);
}

/* RESPONSIVE PARA TARGET SECTION */

/* En Portátiles medianos (Laptop), bajamos a 2x2 */
@media (max-width: 1400px) {
    .target-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* En Móvil, 1 columna */
@media (max-width: 768px) {
    .target-grid {
        grid-template-columns: 1fr; 
        gap: 1.5rem;
    }
    .card-title {
        font-size: 1.8rem;
    }
}


/* WORK SECTION (Masonry Grid) */
.work-section { padding: 6rem 0; background-color: var(--bg-color); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

.section-header { margin-bottom: 3rem; }
.section-label { font-family: var(--font-mono); color: var(--accent-red); font-size: 0.8rem; letter-spacing: 2px; display: block; margin-bottom: 1rem; }
.section-title { font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4rem); color: #fff; line-height: 1; }
.text-red { color: var(--accent-red); }

.masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columnas */
    grid-auto-rows: 300px; 
    gap: 1.5rem;
}

.span-col-2 { grid-column: span 2; }
.span-row-2 { grid-row: span 2; }

.work-item {
    position: relative; display: block; width: 100%; height: 100%;
    overflow: hidden; border: 1px solid #111; 
}

.work-image { width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.work-image img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(0%); transition: filter 0.4s ease;
}

.work-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 60%);
    padding: 2rem; display: flex; justify-content: space-between; align-items: flex-end;
    opacity: 0; transition: opacity 0.3s ease;
}

.work-meta h3 {
    font-family: var(--font-display); font-size: 2rem; color: #fff; line-height: 1;
    margin-bottom: 0.5rem; transform: translateY(20px); transition: transform 0.4s ease;
}
.work-meta p {
    font-family: var(--font-mono); font-size: 0.8rem; color: var(--accent-red);
    text-transform: uppercase; transform: translateY(20px); transition: transform 0.4s 0.1s ease;
}
.work-arrow {
    font-size: 2rem; color: #fff; transform: translate(-20px, 20px); transition: transform 0.4s ease;
}

/* Work Hover Effects */
.work-item:hover .work-image { transform: scale(1.05); }
.work-item:hover .work-image img { filter: grayscale(1000%); }
.work-item:hover .work-overlay { opacity: 1; }
.work-item:hover .work-meta h3, .work-item:hover .work-meta p { transform: translateY(0); }
.work-item:hover .work-arrow { transform: translate(0, 0); }


/* SERVICES SECTION (NEW ACCORDION STYLE) */
.services-section { padding: 2rem 0; background-color: var(--bg-color); }

.accordion-list { margin-top: 4rem; border-top: 1px solid #333; }

.service-row {
    border-bottom: 1px solid #333;
    overflow: hidden;
    /* Preparamos el borde izquierdo invisible para la animación */
    border-left: 0px solid var(--accent-red);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

/* ESTADO HOVER (LA ANIMACIÓN) */
.service-row:hover {
    background: linear-gradient(90deg, rgba(255, 42, 42, 0.08) 0%, rgba(0,0,0,0) 100%); /* Degradado rojo sutil */
    border-left: 6px solid var(--accent-red); /* Aparece la barra roja */
    padding-left: 15px; /* Empuja el contenido a la derecha */
}

/* Hacemos que el número brille al pasar el ratón */
.service-row:hover .service-num {
    color: #fff;
    text-shadow: 0 0 8px var(--accent-red); /* Efecto neón */
}

/* Hacemos que el icono (+) gire un poco para invitar al clic */
.service-row:hover .service-icon {
    color: var(--accent-red);
    transform: rotate(90deg); /* Gira 90 grados al tocarlo */
}

.service-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 2rem 0; cursor: pointer; width: 100%;
}

.service-num { font-family: var(--font-mono); color: var(--accent-red); font-size: 1rem; width: 50px; }
.service-title {
    font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem);
    color: #fff; text-transform: uppercase; font-weight: 400; flex-grow: 1; padding-left: 2rem;
    transition: color 0.3s ease, transform 0.3s ease;
}
.service-icon {
    font-family: var(--font-display); font-size: 2rem; color: #555;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Service Active State */
.service-row.active .service-title { color: var(--accent-red); transform: translateX(10px); }
.service-row.active .service-icon { transform: rotate(45deg); color: var(--accent-red); }

/* Service Body (Hidden) */
.service-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-content {
    padding: 0 0 3rem 80px; display: grid; grid-template-columns: 2fr 1fr; gap: 4rem;
    opacity: 0; transform: translateY(-10px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.service-row.active .service-content { opacity: 1; transform: translateY(0); }

.col-desc p {
    font-family: var(--font-ui); font-size: 1.2rem; color: #bbb; line-height: 1.6; max-width: 600px;
}
.col-specs h4 {
    font-family: var(--font-mono); color: #666; font-size: 0.8rem;
    margin-bottom: 1rem; letter-spacing: 1px;
}
.col-specs ul { list-style: none; border-left: 1px solid var(--accent-red); padding-left: 1rem; }
.col-specs li {
    font-family: var(--font-mono); font-size: 0.9rem; color: #fff; margin-bottom: 0.5rem;
}


/* --- ABOUT SECTION --- */
.about-section {
    padding: 2rem 0;
    background-color: var(--bg-color);
    border-bottom: 1px solid #333; /* Separador del footer */
}

/* GRID PRINCIPAL */
.about-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Manifiesto ancho, Stats estrecho */
    gap: 6rem;
    margin-bottom: 8rem;
}

/* MANIFIESTO (Texto) */
.lead-text {
    font-family: var(--font-display);
    font-size: 3rem;
    color: #555; /* Gris oscuro para que resalte lo blanco */
    line-height: 1.1;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.text-white { color: #fff; }

.body-text {
    font-family: var(--font-ui);
    color: #aaa;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 90%;
}

.signature {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--accent-red);
    display: flex;
    gap: 2rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent-red);
}

/* STATS GRID (Derecha) */
.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2x2 grid */
    gap: 1rem;
}

.stat-item {
    border: 1px solid #222;
    padding: 1.5rem;
    transition: all 0.3s ease;
    background: rgba(255,255,255,0.01);
}

.stat-item:hover {
    border-color: var(--accent-red);
    background: rgba(255,42,42,0.05);
}

.stat-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 3rem;
    color: #fff;
    line-height: 1;
}

.stat-unit {
    font-size: 1rem;
    color: var(--accent-red);
    margin-left: 5px;
}

.stat-desc {
    font-family: var(--font-ui);
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.5rem;
}

/* STAT IMAGE (Decorativa) */
.stat-image {
    position: relative;
    overflow: hidden;
    border: 1px solid #222;
}

.stat-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.2);
    opacity: 0.6;
}

/* Efecto de linea de escaneo */
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-red);
    box-shadow: 0 0 10px var(--accent-red);
    animation: scan 3s linear infinite;
    opacity: 0.8;
}

@keyframes scan {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* TEAM / OPERATORS LIST */
.team-list {
    border-top: 1px solid #333;
    padding-top: 2rem;
}

.team-header {
    font-family: var(--font-mono);
    color: #555;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    gap: 2rem;
}

.team-member {
    padding: 1rem 0;
    border-bottom: 1px solid #222;
    transition: 0.3s;
}

.team-member:hover {
    border-bottom-color: var(--accent-red);
}

.role {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-red);
    margin-bottom: 0.2rem;
}

.name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
}

/* --- RESPONSIVE ABOUT --- */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr; /* Stack vertical */
        gap: 4rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr 1fr; /* 2 columnas en tablet */
    }
}

@media (max-width: 768px) {
    .lead-text { font-size: 2rem; }
    
    .about-stats {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }
    
    .team-grid {
        grid-template-columns: 1fr; /* 1 columna en móvil */
        gap: 1rem;
    }
    
    .stat-image {
        height: 150px; /* Altura fija para la imagen en móvil */
    }
}

/* --- FOOTER --- */

/* --- CTA MANIFESTO (Texto encima del Footer) --- */

.cta-manifesto {
    max-width: 650px;       /* Limitamos el ancho para que quede elegante */
    margin: 0 auto 3rem;    /* Centrado y con margen inferior de 3rem */
    text-align: center;
}

.manifesto-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-red);
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    opacity: 0.8;
}

.cta-manifesto p {
    font-family: var(--font-ui); /* 'Inter' para lectura limpia */
    font-size: 1.15rem;          /* Un poco más grande que el texto normal */
    line-height: 1.7;
    color: #888;                 /* Gris suave */
    font-weight: 300;
}

/* Utilidades para resaltar palabras dentro del texto */
.cta-manifesto .text-red {
    color: var(--accent-red);
    font-weight: 500;
}

.cta-manifesto .text-white {
    color: #fff;
    font-weight: 400;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .cta-manifesto {
        padding: 0 1rem;
    }
    .cta-manifesto p {
        font-size: 1rem;
    }
}


.footer {
    padding: 4rem 0 2rem;
    background-color: var(--bg-color);
    border-top: 1px solid #222;
    position: relative;
    overflow: hidden;
}

/* CTA GIGANTE */
.footer-cta {
    text-align: center;
    margin-bottom: 8rem;
}

.cta-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 9rem);
    line-height: 1.1;
    color: #fff;
    margin-bottom: 3rem;
    text-transform: uppercase;
}

/* Efecto Outline (Texto hueco) */
.text-outline {
    color: transparent;
    -webkit-text-stroke: 2px #fff;
    transition: all 0.3s ease;
}

/* Al hacer hover en el contenedor, el texto hueco se rellena de rojo */
.footer-cta:hover .text-outline {
    color: var(--accent-red);
    -webkit-text-stroke: 0px;
}

/* FOOTER GRID (INFO EXTRA) */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Socials - Email Grande - Location */
    gap: 4rem;
    border-top: 1px solid #222;
    padding-top: 4rem;
    margin-bottom: 4rem;
}

.footer-label {
    font-family: var(--font-mono);
    color: #555;
    font-size: 0.8rem;
    margin-bottom: 1.5rem;
    display: block;
}

/* --- SOCIAL LIST & CHAT LINKS ALIGNMENT --- */

.social-list li {
    margin-bottom: 0.8rem; /* Un poco más de espacio vertical entre items */
}

/* ESTILO BASE PARA LOS ENLACES (Izquierda y Derecha) */
.social-list a {
    font-family: var(--font-ui);
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    
    /* LA SOLUCIÓN DE ALINEACIÓN: */
    display: flex;          /* Convierte el enlace en una caja flexible */
    align-items: center;    /* Centra verticalmente icono y texto */
    gap: 10px;              /* Espacio entre el icono y el texto */
    width: fit-content;     /* Para que la caja mida lo justo */
}

/* ESTILO PARA LOS ICONOS SVG */
.social-list a svg {
    width: 20px;            /* Tamaño fijo para que no se vean enormes */
    height: 20px;
    fill: currentColor;     /* IMPORTANTE: Hereda el color (Blanco o Rojo) del texto */
    flex-shrink: 0;         /* Evita que el icono se aplaste */
}

/* --- COLUMNA IZQUIERDA (NETWORK) --- */
/* Blanco -> Rojo */
.social-list a {
    color: var(--accent-red);
    
}

.social-list a:hover {
    color: #fff;
    transform: translateX(5px);
}

/* --- COLUMNA DERECHA (LIVE CHAT) --- */
/* Rojo -> Blanco */
.social-list a.chat-link-red {
    color: var(--accent-red);
    font-weight: 500;
}

.social-list a.chat-link-red:hover {
    color: #fff;
    /* Hereda el desplazamiento automáticamente */
}

/* EMAIL GIGANTE */
.email-link {
    font-family: var(--font-display);
    font-size: 2vw; /* Responsive */
    color: #fff;
    line-height: 1;
    transition: color 0.3s;
}

.email-link:hover {
    color: var(--accent-red);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration: none;
}

.footer-col p {
    font-family: var(--font-mono);
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* BOTTOM BAR */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: #444;
    text-transform: uppercase;
    padding-top: 2rem;
    border-top: 1px solid #111;
}

.back-top {
    cursor: pointer;
    transition: color 0.3s;
}

.back-top:hover {
    color: var(--accent-red);
}

/* RESPONSIVE FOOTER */
@media (max-width: 768px) {
    .cta-title { margin-bottom: 2rem; }
    
    .footer-grid {
        grid-template-columns: 1fr; /* Una columna */
        gap: 3rem;
        text-align: center;
    }

    .email-link { font-size: 2rem; } /* Más pequeño en móvil */
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* UTILS */
.fade-in { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
.visible { opacity: 1; transform: translateY(0); }


/* --- 4. RESPONSIVE MEDIA QUERIES --- */

/* Tablet & Laptop (Max 1024px) */
@media (max-width: 1024px) {
    .navbar { padding: 1.5rem 2rem; }
    .desktop-links { display: none; }
    .menu-btn { display: block; color: #fff; cursor: pointer; }
    .ui-line-v { display: none; }
    
    .masonry-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 250px; }
    
    .service-content { padding-left: 0; }
}

/* Mobile (Max 768px) */
@media (max-width: 768px) {
    .hero-title { letter-spacing: -1px; margin-bottom: 1rem; }
    .hero-subtitle { font-size: 0.9rem; letter-spacing: 2px; }
    
    .menu-links a { font-size: 2.5rem; }
    .menu-footer { padding: 0 2rem; flex-direction: column; gap: 1rem; text-align: center; }

    /* Masonry Mobile Fix */
    .masonry-grid { display: flex; flex-direction: column; gap: 1rem; }
    .span-col-2, .span-row-2 { grid-column: auto; grid-row: auto; }
    .work-item { height: 350px; }
    .work-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%); }
    .work-meta h3, .work-meta p, .work-arrow { transform: translateY(0); }
    .work-image img { filter: grayscale(0%); }

    /* Services Mobile Fix */
    .service-title { font-size: 1.8rem; padding-left: 1rem; }
    .service-content { grid-template-columns: 1fr; gap: 2rem; }
    .col-desc p { font-size: 1rem; }
    .service-header { padding: 1.5rem 0; }
    
    .footer-content h2 { margin-bottom: 3rem; }
    .footer-bottom { flex-direction: column; gap: 1rem; }
}


/* --- PROJECT MODAL (LIGHTBOX COMPLETO) --- */
.project-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 9000;
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex; justify-content: center; align-items: center;
}

.project-modal.active {
    opacity: 1; pointer-events: all;
}

.modal-backdrop {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 5, 5, 0.95); /* Fondo casi negro */
    backdrop-filter: blur(5px);
}

.modal-container {
    position: relative; z-index: 9001;
    width: 90%; max-width: 1200px; height: 85vh;
    background: #0a0a0a;
    border: 1px solid #333;
    overflow: hidden;
    transform: translateY(50px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-modal.active .modal-container {
    transform: translateY(0);
}

/* BOTÓN CERRAR ESTÁNDAR (Para proyectos normales) */
.modal-close {
    position: absolute; top: 2rem; right: 2rem;
    font-family: var(--font-mono); color: var(--accent-red);
    cursor: pointer; z-index: 10; font-size: 0.9rem;
    background: rgba(0,0,0,0.5); padding: 5px 10px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.modal-close:hover {
    border-color: var(--accent-red);
    color: #fff;
}

/* --- BOTÓN CERRAR PARA DEMO REEL (MODO INMERSIVO) --- */
/* Esto fuerza al botón a flotar sobre el video en la esquina de la pantalla */
.project-modal.immersive-mode .modal-close {
    position: fixed !important; /* Fijo a la pantalla */
    top: 30px;
    right: 30px;
    background: rgba(0, 0, 0, 0.8); /* Fondo oscuro para leerse sobre video */
    color: #fff;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 10px 20px;
    z-index: 10000; /* Encima del video */
}

.project-modal.immersive-mode .modal-close:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #000;
}

.modal-content {
    display: grid; grid-template-columns: 1.5fr 1fr; /* Imagen grande, info pequeña */
    height: 100%;
}

/* MEDIA WRAPPER (VIDEO & IMG) */
.modal-media-wrapper {
    height: 100%; width: 100%;
    background: #000;
    overflow: hidden;
    position: relative; /* Para posicionar flechas */
}

#media-container {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}

.modal-img-display {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}

.modal-video-display {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Clase compartida para Video e Imagen en modo Galería */
.modal-media-item {
    width: 100%; 
    height: 100%;
    object-fit: contain; /* Importante: asegura que se vea todo el video sin recortar */
    display: block;
}

/* Transición suave al cambiar de slide */
#media-container {
    transition: opacity 0.2s ease;
    width: 100%;
    height: 100%;
}

/* --- NUEVA POSICIÓN DE FLECHAS (CENTRADAS A LOS LADOS) --- */

.gallery-nav {
    position: absolute;
    top: 50%;               /* Las ponemos a la mitad de la altura */
    left: 0;
    width: 100%;            /* Que ocupen todo el ancho de la imagen */
    padding: 0 20px;        /* Un poco de espacio respecto al borde */
    
    display: flex;
    justify-content: space-between; /* Esto empuja una flecha a cada extremo */
    transform: translateY(-50%);    /* Ajuste matemático para centrarlas perfecto */
    
    z-index: 20;
    pointer-events: none;   /* TRUCO IMPORTANTE: Esto hace que la caja de las flechas sea "invisible" al clic, para que puedas pausar el video pulsando en el centro */
}

.nav-btn {
    background: rgba(0,0,0,0.5);
    border: 1px solid #555;
    color: #fff;
    width: 50px; height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s;
    
    display: flex; align-items: center; justify-content: center;
    
    pointer-events: auto; /* Reactivamos el clic SOLO en los botones */
}

.nav-btn:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
}

/* INFO DEL MODAL */
.modal-info {
    padding: 4rem;
    display: flex; flex-direction: column; justify-content: center;
    border-left: 1px solid #333;
    background: #0a0a0a;
}

.modal-cat {
    font-family: var(--font-mono); font-size: 0.8rem; margin-bottom: 1rem;
}

.modal-title {
    font-family: var(--font-display); font-size: 4rem; line-height: 0.9;
    color: #fff; margin-bottom: 2rem; text-transform: uppercase;
}

.modal-desc {
    font-family: var(--font-ui); color: #aaa; font-size: 1rem;
    line-height: 1.6; margin-bottom: 3rem; max-width: 90%;
}

.modal-specs {
    border-top: 1px solid #333; padding-top: 2rem;
}

.spec-row {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 0.8rem;
    margin-bottom: 1rem; color: #666; border-bottom: 1px solid #222; padding-bottom: 0.5rem;
}

.spec-row span:last-child {
    color: #fff; text-align: right;
}

/* RESPONSIVE MODAL */
@media (max-width: 900px) {
    .modal-content { grid-template-columns: 1fr; overflow-y: auto; }
    .modal-container { height: 100vh; width: 100%; border: none; }
    .modal-media-wrapper { height: 50vh; min-height: 300px; }
    .modal-info { padding: 2rem; height: auto; border-left: none; }
    .modal-title { font-size: 2.5rem; }
    .modal-close { top: 1rem; right: 1rem; }
}


/* --- IMMERSIVE MODE (SOLO VIDEO) --- */

/* Cuando el modal tiene esta clase, cambiamos el layout */
.project-modal.immersive-mode .modal-container {
    background: transparent; /* Sin fondo */
    border: none;            /* Sin borde */
    height: auto;            /* Altura automática según video */
    width: 90%;              /* Ancho máximo */
    max-width: 1400px;
    aspect-ratio: 16/9;      /* Forzamos proporción cine */
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.project-modal.immersive-mode .modal-content {
    display: block;          /* Quitamos el Grid de 2 columnas */
    height: 100%;
}

.project-modal.immersive-mode .modal-info {
    display: none !important; /* OCULTAMOS TODA LA INFO */
}

.project-modal.immersive-mode .modal-media-wrapper {
    height: 100%;
    width: 100%;
}

.project-modal.immersive-mode .modal-video-display {
    border-radius: 4px;      /* Un toque sutil */
}

/* Movemos el botón de cerrar fuera del video para que se vea limpio */
.project-modal.immersive-mode .modal-close {
    position: fixed;         /* Fijo a la pantalla, no al video */
    top: 30px;               
    right: 30px;
    background: rgba(0, 0, 0, 0.6); /* Fondo semitransparente */
    color: #fff;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;     /* Forma redondeada */
    font-size: 0.8rem;
    font-family: var(--font-mono);
    letter-spacing: 1px;
    z-index: 10000;          /* Asegura que esté encima del video */
    backdrop-filter: blur(5px); /* Efecto cristal */
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-modal.immersive-mode .modal-close:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #000;
}

/* --- FIX: MARQUEE MÁS GRANDE EN MÓVIL --- */
@media (max-width: 768px) {
    .marquee-content span {
        /* Pasamos de un tamaño relativo pequeño a uno fijo y legible */
        font-size: 3.5rem !important; /* Aprox 24px */
        padding: 0 1.5rem; /* Un poco más de espacio entre palabras */
    }
}

/* --- ELIMINAR LÍNEAS DE SEPARACIÓN (ABOUT / FOOTER) --- */

/* 1. Quitamos la línea de abajo de la sección ABOUT */
.about-section {
    border-bottom: none !important;
}

/* 2. Quitamos la línea de arriba del FOOTER */
.footer {
    border-top: none !important;
    /* Reducimos el padding superior para que los textos queden más juntos */
    padding-top: 4rem; 
}



/* --- LANGUAGE SWITCHER --- */
.lang-switch {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-left: 2rem;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

.lang-switch a {
    color: #666;
    transition: color 0.3s ease;
    text-decoration: none;
}

.lang-switch a:hover {
    color: var(--accent-red);
}

.lang-switch a.active {
    color: #fff;
    font-weight: bold;
    border-bottom: 1px solid var(--accent-red);
}

/* Ajuste para Móvil */
.menu-lang-mobile {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
    font-family: var(--font-display);
    font-size: 2rem;
}
.menu-lang-mobile a {
    color: #444;
}
.menu-lang-mobile a.active {
    color: var(--accent-red);
}