/*
    BRANDFIRM - MASTER CSS V73 (LANDSCAPE FIX + READABILITY + ACCESSIBILITY)
    Estrategia: Display (DM Sans) + Interface (Inter) + 1200px Grid + Editorial Typography + Asymmetrical Metadata
*/

/* 1. IMPORTACIÓN DE FUENTES */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,500&family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,800&display=block');

/* 2. RESET Y BASE */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, strong { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { 
    line-height: 1; 
    font-family: 'Inter', sans-serif; 
    font-size: 13px; 
    font-weight: 400; 
    letter-spacing: -0.01em; 
    text-rendering: optimizeLegibility;
    background-color: #050506; 
    color: #8e8e8e; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%; /* Prohíbe el zoom automático en móviles */
}

:root { color-scheme: dark; }
ul { list-style: none; }
*, *:before, *:after { box-sizing: border-box; }
a { color: #8e8e8e; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #f4f4f5; }
:focus-visible { outline: 1px solid #555555; outline-offset: 4px; border-radius: 2px; }
img { border: none; max-width: 100%; height: auto; display: block; border-radius: 2px; }

/* UTILIDADES CLAVE */
.text-grey { color: #8e8e8e !important; }
.text-white { color: #f4f4f5 !important; }

/* CIMIENTOS DE ALINEACIÓN */
.clear { clear: both; display: block; font-size: 0; height: 0; line-height: 0; width: 100%; }
.fullwidth { width: 100%; }
.fullheight { height: 100%; }
.table { display: table; }
.table-cell { display: table-cell; }
.middle { vertical-align: middle; }
.relative { position: relative; width: 100%; display: block; }

/* DIVISOR MATEMÁTICO SIMÉTRICO */
.divider { width: 100%; height: 1px; background-color: #333333; margin: 60px 0; display: block; }

/* CUSTOM SCROLLBAR */
html { scrollbar-width: thin; scrollbar-color: #555555 #050506; }
::-webkit-scrollbar { width: 14px; background: #050506; }
::-webkit-scrollbar-track { background-color: #050506; }
::-webkit-scrollbar-thumb { background-color: #555555; border-radius: 10px; border: 4px solid #050506; }
::-webkit-scrollbar-thumb:hover { background-color: #f4f4f5; }

/* 3. TIPOGRAFÍA Y JERARQUÍA */
h1, h3, h4, .service-title { font-weight: 500; color: #f4f4f5; font-family: 'Inter', sans-serif; }
p { line-height: 1.6; margin-bottom: 22px; color: #8e8e8e; }
strong { font-weight: 600; color: #f4f4f5; }

/* TÍTULO HERO HOME (DM Sans 500) - Blindado */
.home-banner h1 { 
    font-family: 'DM Sans', sans-serif !important; 
    font-weight: 500 !important; 
    font-size: 62px !important; 
    line-height: 1.1; 
    letter-spacing: 0.01em; 
    border: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
}

/* Títulos H1 (Proyectos) - Layout Editorial sin Divisor */
.main-content h1 { 
    font-size: 28px; 
    padding-bottom: 0; 
    margin-bottom: 35px; 
    width: 100%; 
    border-bottom: none; 
    display: block; 
    letter-spacing: -0.02em; 
}

/* Títulos H1 (Home y B2C) - Sincronizados por el usuario a 21px y margin 30px */
.home .main-content h1 { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    font-size: 21px; 
    font-weight: 400; 
    border-bottom: none; 
    margin-bottom: 30px;
    letter-spacing: -0.01em;
}
.b2c-link { 
    font-size: 19px; 
    color: #8e8e8e; 
    font-weight: 400; 
    transition: color 0.2s ease;
}
.b2c-link:hover { color: #f4f4f5; }

/* Texto Principal (Contact) - Sincronizado a 21px */
.main-content .contact-intro { 
    display: block; 
    font-size: 22px; 
    line-height: 1.5; 
    font-weight: 400; 
    padding: 0; 
    margin: 0; 
    max-width: 800px; 
    color: #8e8e8e; 
    border: none; 
    letter-spacing: -0.01em; 
}
.main-content .contact-intro a { color: #8e8e8e; transition: color 0.2s ease; }
.main-content .contact-intro a:hover { color: #f4f4f5; }

/* RITMO DE LECTURA ESTÁNDAR */
h2 { font-size: 18px; padding: 0; margin: 0 0 80px 0; line-height: 1.5; width: 100%; color: #8e8e8e; letter-spacing: -0.01em; font-weight: 400; }

/* TÍTULOS PORTAFOLIO (Index) */
.portfolio-item h3 { font-size: 18px; margin-bottom: 2px; line-height: 1.2; letter-spacing: -0.02em; }
.portfolio-item h3 a { color: #f4f4f5 !important; transition: color 0.2s ease; }
.portfolio-item h3 a:hover { color: #8e8e8e !important; }

/* TAGS PORTAFOLIO */
.tags { font-size: 15px; color: #8e8e8e; line-height: 1.5; display: block; font-weight: 400; letter-spacing: -0.01em; }

/* TÍTULOS DE SERVICIOS (Contacto) */
.service-title { display: block; font-size: 19px; margin-bottom: 20px; line-height: 1.4; color: #8e8e8e; font-weight: 500; }

/* BLOQUES DE TEXTO A DOS COLUMNAS (Desbloqueado para igualar a las imágenes) */
.text-split { 
    display: flex; 
    gap: 60px; 
    width: 100%; 
    margin-bottom: 80px; 
}
.text-split-col { 
    flex: 1 1 0%; 
    width: 50%; 
}
.text-split-col .project-desc { margin-bottom: 0; font-size: 18px; font-weight: 400; line-height: 1.6; color: #8e8e8e; }

/* BLOQUE DE TEXTO A UNA COLUMNA */
.text-single-col { 
    width: 100%; 
    max-width: 470px; 
    margin-bottom: 80px; 
    display: block;
}
.text-single-col .project-desc { margin-bottom: 0; font-size: 18px; font-weight: 400; line-height: 1.6; color: #8e8e8e; }

/* BLOQUE DE INTRODUCCIÓN DE PROYECTO */
.project-intro { 
    display: flex; 
    gap: 60px; 
    width: 100%; 
    margin-bottom: 80px; 
}
.intro-meta { 
    width: max-content; 
    flex-shrink: 0; 
    margin-left: 50px; 
}
.meta-item { 
    margin-bottom: 12px; 
    font-size: 14px; 
    color: #8e8e8e; 
    line-height: 1.4; 
    border-top: 1px solid #333333; 
    padding-top: 10px; 
}
.meta-item strong { 
    display: block; 
    font-size: 11px; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    color: #8e8e8e; 
    margin-bottom: 6px; 
}
.intro-text { flex: 1 1 0%; }
.intro-text .project-desc { font-size: 18px; line-height: 1.6; margin-bottom: 0; color: #8e8e8e; font-weight: 400; }

/* BLOQUE BUSINESS IMPACT */
.impact-block { width: 100%; max-width: 800px; margin-top: 40px; margin-bottom: 80px; display: block; }
.impact-title { font-size: 22px; color: #f4f4f5; font-weight: 500; display: block; margin-bottom: 40px; letter-spacing: -0.01em; }
.impact-item { margin-bottom: 35px; display: block; }
.impact-item strong { font-size: 22px; color: #f4f4f5; font-weight: 500; display: block; margin-bottom: 8px; letter-spacing: normal; line-height: 1.3; }
.read-more-link { font-size: 20px; color: #8e8e8e; transition: color 0.2s ease; font-weight: 400; }
.read-more-link:hover { color: #f4f4f5; }

/* 4. ESTRUCTURA Y GRILLA WIDESCREEN (1200px) */
.main-container { width: 100%; margin: 0 auto; position: relative; overflow: hidden; background-color: #050506; }
.content-width { width: 90%; max-width: 1200px; margin: 0 auto; }
.main-content { width: 100%; display: block; }
.main-content-inner { padding-top: 110px; padding-bottom: 40px; margin: 0 auto; }
.home .main-content-inner { padding-top: 45px; }

/* CLEARFIX GRILLA Y PREVENCIÓN DE ENGANCHES EN ESCRITORIO */
.column-container { width: 100%; display: block; }
.column-container:after { content: ""; display: table; clear: both; }
.column-one-third { width: 31.3%; margin-right: 3.05%; float: left; margin-bottom: 40px; }
.column-one-third:nth-child(3n) { margin-right: 0; } 
.column-one-third:nth-child(3n+1) { clear: left; } /* Fuerza fila perfecta en Desktop */

/* 5. HEADER Y LOGO */
.topbar-outer { width: 100%; position: fixed; top: 0; z-index: 999; background-color: #0f0f11; height: 60px; }
.topbar { display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: 1200px; margin: 0 auto; height: 100%; }
.logo { font-size: 22px; font-weight: 800; color: #f4f4f5; font-family: 'Inter', sans-serif; letter-spacing: -0.04em; }
.logo a { color: #f4f4f5; display: block; }
.logo img { height: 17px !important; width: auto !important; display: block; border-radius: 0 !important; }
.topnav { display: flex; align-items: center; }
.topnav li { padding-left: 30px; }
.topnav li a { font-size: 13px; color: #8e8e8e; font-weight: 400; transition: color 0.2s ease; }
.topnav li a:hover { color: #f4f4f5; }

.home-banner2 { display: block; padding-top: 140px; padding-bottom: 30px; }

/* Ajustes Contact Page (Margen ajustado para el divisor) */
.contact-page .home-banner2 { padding-bottom: 0 !important; }
.contact-page .main-content-inner { padding-top: 60px !important; }
.contact-page .contact-intro { margin-bottom: 40px; display: block; }
.contact-page .contact-intro + .divider { margin-top: 55px; margin-bottom: 55px; }

/* 6. UX DE IMÁGENES */
.image-link { position: relative; display: block; line-height: 0; margin-bottom: 24px; }
.image-link:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #050506; opacity: 0; border-radius: 2px; transition: opacity 0.2s ease; pointer-events: none; z-index: 10; }
.image-link:hover:before { opacity: 0.3; }

.case-study-img { width: 100%; height: auto; display: block; margin-bottom: 80px; border-radius: 2px; }

/* 7. FOOTER */
.footer { background-color: #0f0f11; height: 60px; width: 100%; display: block; margin-top: 50px; }
.footer .content-width { display: flex; justify-content: space-between; align-items: center; height: 100%; margin: 0 auto; }
.footer .column-container, .footer .column-one-fourth { width: auto; float: none; margin: 0; padding: 0; }
.footer-social { display: flex; }
.footer-social li { margin-right: 15px; }
.footer-copyright { color: #8e8e8e; font-size: 13px; font-weight: 400; }

/* ANIQUILACIÓN DE CLASES FANTASMA OBSOLETAS */
.tooltip, .mobilenav-click, .mobilenav-container, .mobilenav, .bx-wrapper, .carousel-nav { display: none !important; }

/* INTERACCIÓN SVG LINKEDIN */
.footer-social a svg { fill: #8e8e8e; transition: fill 0.2s ease-in-out; }
.footer-social a:hover svg { fill: #f4f4f5; }

/* LISTA DE SERVICIOS (CONTACTO) */
ul.arrow-list { padding-left: 0 !important; margin-left: 0 !important; margin-bottom: 20px; list-style: none; }
ul.arrow-list li { display: block; position: relative; padding-left: 17px; margin-bottom: 10px; font-size: 17px; line-height: 1.5; color: #8e8e8e; font-weight: 400; }
ul.arrow-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); 
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
}

/* =========================================================
   8. METADATA GRID SYMMETRY LOGIC (MOBILE & DESKTOP)
   ========================================================= */

/* SOLO ESCRITORIO: Oculta el módulo fantasma y ajusta bordes a 1 columna */
@media only screen and (min-width: 1012px) {
    .meta-empty { display: none !important; }
    
    .intro-meta .meta-item:last-child {
        border-bottom: 1px solid #333333;
        padding-bottom: 10px;
    }
    
    .intro-meta .meta-item:has(+ .meta-empty) {
        border-bottom: 1px solid #333333;
        padding-bottom: 10px;
    }
}

/* ANTI-SNAGGING PARA PANTALLAS INTERMEDIAS (TABLET & LANDSCAPE MOBILE) */
@media only screen and (max-width: 1011px) {
    /* CORRECCIÓN DE HEADER OVERLAP: Se cambió el padding condensado por reglas específicas laterales */
    .content-width, .topbar { width: 100%; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
    .home-banner2 { padding-top: 120px; padding-bottom: 30px; }
    .home-banner h1 { font-size: 48px !important; }
    /* Ajuste de H1 para ahorrar espacio vertical en landscape */
    .main-content h1 { font-size: 24px; margin-bottom: 25px; line-height: 1.3; }
    
    /* Reducción del espacio vacío antes del footer */
    .main-content-inner { padding-bottom: 20px; }
    .footer { margin-top: 20px; }
    
    /* FIX DE ENGANCHES PARA 2 COLUMNAS */
    .column-one-third { width: 48%; margin-right: 4%; }
    .column-one-third:nth-child(n) { margin-right: 4%; } /* Resetea el margen de desktop */
    .column-one-third:nth-child(2n) { margin-right: 0; } /* El último de la fila va sin margen */
    .column-one-third:nth-child(3n+1) { clear: none; } /* Apaga la regla de 3 columnas de escritorio */
    .column-one-third:nth-child(2n+1) { clear: left; } /* Fuerza fila perfecta cada 2 items */
    
    .footer .content-width { padding-left: 20px; padding-right: 20px; }
    .topnav { display: flex !important; }

    /* Fuerza el apilado en tablets y celulares en horizontal para lectura lineal */
    .project-intro { flex-direction: column; gap: 40px; margin-bottom: 60px; }
    .intro-meta { width: 100%; display: flex; flex-wrap: wrap; gap: 20px; margin-left: 0; order: -1; }
    .meta-item { width: calc(50% - 10px); margin-bottom: 0; }
    
    /* Límite de ancho para no fatigar la lectura en landscape */
    .intro-text { width: 100%; max-width: 640px; }
    
    /* Módulo fantasma visible y bordes simétricos en grilla 2x2 */
    .meta-empty { display: block !important; }
    .intro-meta .meta-item:nth-last-child(1),
    .intro-meta .meta-item:nth-last-child(2) {
        border-bottom: 1px solid #333333;
        padding-bottom: 12px;
    }
    
    /* Fuerza el apilado de los bloques de texto doble y aplica tope de lectura */
    .text-split { flex-direction: column; gap: 40px; margin-bottom: 60px; }
    .text-split-col { width: 100%; max-width: 640px; }
}

/* MOBILE VERTICAL */
@media only screen and (max-width: 767px) {
    .main-content-inner { padding-top: 90px; padding-bottom: 30px; }
    .home-banner h1 { font-size: 42px !important; }
    
    .main-content h1 { font-size: 24px; margin-bottom: 25px; line-height: 1.3; }
    
    /* Home Title stacking for Mobile */
    .home .main-content h1 { flex-direction: column; align-items: flex-start; gap: 12px; border-bottom: none; font-size: 20px; }
    .b2c-link { margin-top: 0; font-size: 18px; }
    .contact-page .contact-intro { font-size: 20px; }
    
    .column-one-third { width: 100%; margin-right: 0 !important; margin-bottom: 40px; float: none; }
    
    /* Imágenes Full-bleed en proyectos */
    .case-study-img { margin-bottom: 40px; margin-left: -20px; width: calc(100% + 40px); max-width: none; border-radius: 0; }
    .portfolio-item .image-link { margin-left: -20px; width: calc(100% + 40px); }
    .portfolio-item img { border-radius: 0; }
    
    h2 { margin-bottom: 40px; }
    
    /* Ajustes de espaciado general para mobile */
    .project-intro { margin-bottom: 40px; gap: 30px; }
    .text-split { margin-bottom: 40px; gap: 30px; }
    .text-single-col { max-width: 100%; margin-bottom: 40px; }
    
    .divider { margin: 40px 0; }
    .impact-block { margin-bottom: 40px; margin-top: 20px; }
    .impact-title { font-size: 18px; margin-bottom: 25px; }
    .impact-item strong { font-size: 18px; margin-bottom: 4px; }
    .footer { margin-top: 20px; }
}