/*
Theme Name: Portfolio
Theme URI: https://jairohdz.com
Author: Jairo Hernández
Author URI: mailto:me@jairohdz.com
Description: Tema personalizado a medida, estructurado para arquitecturas de Growth & Performance y MarTech. Totalmente fiel al diseño original con compatibilidad para menús nativos de WordPress y diseño móvil optimizado.
Version: 1.0.1
Text Domain: portfolio
*/

/* ==========================================================================
   1. RESET, VARIABLES Y CONFIGURACIÓN GENERAL (Fiel al original)
   ========================================================================== */
:root {
    --bg-color: #0c0c0c;
    --text-color: #f5f5f5;
    --text-muted: #666666;
    --border-color: rgba(255, 255, 255, 0.15);

    --c-black: #000000;    
    --c-white: #ffffff;
    --c-gray: #898989;    
    
    --c-cyan: #00f0ff;
    --c-green: #39ff14;
    --c-purple: #b026ff;
    
    --c-magenta: #ff00f0;
    --c-yellow: #f0ff00;
    --c-red: #ff0f00;

    --c-linkedin: #0A66C2;
}

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

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* === PANTALLA DE CARGA (Loader) === */
#loader {
    position: fixed; inset: 0; background-color: var(--bg-color);
    z-index: 999999; display: flex; justify-content: center; align-items: center;
    font-family: 'Oswald', sans-serif; font-size: 1.5rem; text-transform: uppercase;
    letter-spacing: 4px; color: var(--text-muted);
}

.noise {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 9999; opacity: 0.04;
    background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}


/* ==========================================================================
   2. NAVEGACIÓN SUPERIOR (Soporte Híbrido: HTML Original + WordPress Menus)
   ========================================================================== */
nav {
    position: fixed; top: 0; width: 100%; padding: 2.5rem 4rem;
    display: flex; justify-content: space-between; align-items: flex-start; 
    z-index: 99999; transition: background 0.4s ease;
}

nav.nav-scrolled {
    background: linear-gradient(to bottom, rgba(12,12,12,0.99) 0%, rgba(12,12,12,0.05) 100%);
    padding-bottom: 4rem 4rem 0rem 4rem; pointer-events: none; 
}
nav.nav-scrolled > * { pointer-events: auto; }

.nav-left { position: relative; height: 24px; display: flex; align-items: center; }
.nav-logo { font-family: 'Oswald', sans-serif; font-size: 1.5rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; }

/* Compatibilidad estructural con ul.menu de WordPress */
.menu-links, .menu { display: flex; align-items: center; gap: 2.5rem; height: 24px; list-style: none; }
.nav-item, .menu-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-item > a, .menu-item > a { color: var(--text-color); text-decoration: none; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; }
.nav-item:hover > a, .menu-item:hover > a { color: var(--text-muted); }

/* === SOLUCIÓN SUBMENÚS: Ocultamiento absoluto inicial para evitar render inmediato === */
.submenu, .sub-menu {
    position: absolute; top: 35px; left: -15px; background: rgba(12, 12, 12, 0.98); border: 1px solid var(--border-color);
    padding: 1.2rem; display: flex; flex-direction: column; gap: 15px; min-width: 190px;
    opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.98); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    list-style: none; z-index: 1000;
}

/* Disparador hover tanto para maquetación estática como dinámica de WP */
.nav-item:hover .submenu, 
.menu-item:hover .sub-menu { 
    opacity: 1; visibility: visible; transform: translateY(0) scale(1); 
}

.submenu a, .sub-menu li a { 
    color: var(--text-muted); text-decoration: none; font-size: 0.75rem; 
    text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; display: block;
}

/* ==========================================================================
   Hover de categorías de color (Adaptado para WordPress li > a)
   ========================================================================== */
/* 1. Hover global por defecto para todos los submenús */
.submenu a:hover, 
.sub-menu li a:hover { 
    color: var(--text-color); 
}

/* 2. Reglas específicas de color. 
   Soportan tanto tu HTML estático (a.sub-cyan) 
   como las listas dinámicas de WordPress (.sub-cyan > a) 
*/
a.sub-white:hover, .sub-white:hover > a, .sub-white > a:hover { color: var(--c-white) !important; }
a.sub-cyan:hover,  .sub-cyan:hover > a,  .sub-cyan > a:hover  { color: var(--c-cyan) !important; }
a.sub-green:hover, .sub-green:hover > a, .sub-green > a:hover { color: var(--c-green) !important; }
a.sub-purple:hover,.sub-purple:hover > a,.sub-purple > a:hover { color: var(--c-purple) !important; }

.nav-icon { display: flex; align-items: center; justify-content: center; height: 100%; }
.nav-icon svg { width: 17px; height: 17px; fill: none; stroke: var(--text-color); stroke-width: 2; transition: stroke 0.3s ease, transform 0.3s ease; }
.nav-icon:hover svg { transform: scale(1.1); stroke: var(--text-muted); }
/* Ocultar botón hamburguesa en Desktop */
.mobile-menu-btn {
    display: none;
}

/* ==========================================================================
   3. HERO SECTION (Fiel al original)
   ========================================================================== */
.hero { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 4rem; position: relative; overflow: hidden; }
.hero-bg-wrapper { position: absolute; top: 50%; left: 50%; width: 110vw; height: 110vh; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; opacity: 0.3; }
.hero-bg-img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero-image-wrapper { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 85vh; display: flex; align-items: flex-end; z-index: 1; pointer-events: none; }
.hero-profile-img { max-height: 100%; width: auto; object-fit: contain; transform-origin: bottom center; will-change: transform; }
.hero-content-wrapper { position: relative; width: 100%; height: 250px; transform: translateY(-10vh); z-index: 5; }
.hero-default { position: absolute; top: 0; left: 0; width: 100%; }
.hero-intro { font-size: 0.9rem; font-weight: 300; margin-bottom: 0.5rem; color: var(--text-muted); }
.intro-name { font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 500; color: #888888; letter-spacing: 1px; text-transform: uppercase; margin-left: 5px; }
.hero-title-container { margin-bottom: 2rem; }
.hero-title { font-family: 'Oswald', sans-serif; font-size: clamp(4rem, 10vw, 11rem); font-weight: 700; line-height: 0.9; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3); transition: color 0.4s ease, -webkit-text-stroke 0.4s ease; }
.hero-title:hover { color: var(--text-color); -webkit-text-stroke: 0px transparent; }
.rotating-words { display: inline-block; position: relative; vertical-align: bottom; height: clamp(4rem, 10vw, 11rem); overflow: hidden; width: 100%; }
.word { position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(100%); -webkit-text-stroke: 0px transparent !important; }
.word.c-white { color: var(--c-white); } .word.c-cyan { color: var(--c-cyan); } .word.c-green { color: var(--c-green); } .word.c-purple { color: var(--c-purple); }
.hero-cta-btn { display: inline-block; padding: 12px 30px; border: 1px solid var(--border-color); color: var(--text-color); text-decoration: none; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease; backdrop-filter: blur(5px); }
.hero-cta-btn:hover { background: var(--text-color); color: var(--bg-color); }

.bottom-right-bio { position: absolute; bottom: 85px; right: 4rem; max-width: 320px; text-align: right; z-index: 10; }
.bio-highlight { font-size: 1rem; color: #ffffff; font-weight: 400; }
.bio-text { font-size: 0.85rem; font-weight: 300; line-height: 1.6; color: var(--text-muted); margin-bottom: 6px; }
.bio-text-small { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); }
.bio-socials { display: flex; justify-content: flex-end; gap: 12px; margin-top: 15px; }
.bio-social-icon { width: 16px; height: 16px; fill: var(--text-muted); transition: fill 0.3s ease, transform 0.3s ease; }
.hover-linkedin:hover .bio-social-icon { fill: var(--c-linkedin); transform: scale(1.1); }

/* === SCROLL INDICATOR & MARQUEE === */
.scroll-indicator { position: fixed; bottom: 250px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 1; z-index: 100; transition: opacity 0.3s ease; }
.scroll-text { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); }
.scroll-line { width: 1px; height: 30px; background-color: var(--border-color); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-color: var(--text-color); animation: scrollDownAnim 2s infinite ease-in-out; }
.scroll-arrow { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } 
@keyframes scrollDownAnim { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }

.marquee-wrapper { position: absolute; bottom: 0; left: 0; width: 100vw; overflow: hidden; background: rgba(0,0,0,0.4); z-index: 10; padding-bottom: 15px; }
.marquee-header { width: 100%; text-align: center; margin-bottom: 15px; }
.marquee-separator { width: 100%; height: 1px; background-color: var(--border-color); margin-bottom: 10px; }
.marquee-subtitle { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); }
.marquee-track { display: flex; align-items: center; gap: 5rem; width: max-width; }
/* ==========================================================================
   Marquee: Blanco tenue (Normal) -> Contorno + Color Original (Hover)
   ========================================================================== */
.marquee-track img { 
    height: 30px !important; /* Tamaño con buena presencia */
    object-fit: contain; 
    
    /* Preparamos el espacio para el contorno */
    padding: 2px 5px !important; /* Espacio interno para que el borde no toque el logo */
    border: 1px solid transparent !important; /* Borde invisible inicial para evitar "saltos" en pantalla */
    border-radius: 4px !important; /* Esquinas sutilmente redondeadas */
    
    /* ESTADO NORMAL: Blanco puro con 50% de opacidad */
    filter: brightness(0) invert(1) opacity(0.5) !important; 
    
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

/* ESTADO HOVER: Aparece el contorno y el color */
.marquee-track img:hover { 
    /* filter: none; elimina todos los filtros y revela la imagen a todo color original */
    filter: none !important; 
    
    /* El contorno se vuelve visible (Blanco al 40% de opacidad) */
    border: 1px solid rgba(255, 255, 255, 0.4) !important; 
    
    /* Fondo translúcido sutil para darle volumen a la "tarjeta" del logo */
    background-color: #ffffff !important; 
    
    /* Efecto de micro-interacción: crece un poquito */
    transform: scale(1.05); 
    
    /* Opcional: Un pequeño brillo alrededor de la caja */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   4. STRUCTURAL SECTIONS & TYPOGRAPHY (Fiel al original)
   ========================================================================== */
.section-padding { padding: 8rem 4rem; position: relative; z-index: 10; background-color: var(--bg-color); }
.section-header { margin-bottom: 4rem; }
.section-title { font-family: 'Oswald', sans-serif; font-size: clamp(3rem, 6vw, 6rem); font-weight: 700; text-transform: uppercase; line-height: 1; margin-bottom: 1rem; }
.section-subtitle { font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); }
.reveal-up { opacity: 0; transform: translateY(40px); }

/* === PILARES ESTRATÉGICOS === */
.pillars-section { background-color: var(--bg-color); position: relative; z-index: 10; padding-top: 8rem; }
.pillars-header-wrap { padding: 0 4rem; margin-bottom: 3rem; }
.pillars-accordion { display: flex; width: 100vw; height: 75vh; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.pillar-panel { flex: 1; position: relative; overflow: hidden; border-right: 1px solid var(--border-color); transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1); }
.pillar-panel:last-child { border-right: none; }
.pillar-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); min-width: 100%; min-height: 100%; object-fit: cover; filter: grayscale(100%) brightness(0.3); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1; }
.pillar-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.1) 100%); z-index: 2; transition: opacity 0.6s; }
.pillar-panel:hover { flex: 3; }
.pillar-panel:hover .pillar-video { filter: grayscale(0%) brightness(0.7); transform: translate(-50%, -50%) scale(1.05); }
.pillar-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 3; transition: opacity 0.4s; }
.pillar-idle h3 { font-family: 'Oswald', sans-serif; font-size: 2.5rem; text-transform: uppercase; color: var(--text-muted); transform: rotate(-90deg); white-space: nowrap; letter-spacing: 4px; transition: color 0.3s; }
.pillar-panel:hover .pillar-idle { opacity: 0; pointer-events: none; }
.pillar-active { position: absolute; bottom: 3rem; left: 3rem; right: 3rem; z-index: 4; opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); pointer-events: none; }
.pillar-panel:hover .pillar-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pillar-active h3 { font-family: 'Oswald', sans-serif; font-size: 3.5rem; line-height: 1.1; text-transform: uppercase; margin-bottom: 1rem; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.8); transition: color 0.4s ease; }
.panel-creative:hover .pillar-active h3 { color: var(--c-cyan); -webkit-text-stroke: 0px; }
.panel-marketing:hover .pillar-active h3 { color: var(--c-purple); -webkit-text-stroke: 0px; }
.panel-tech:hover .pillar-active h3 { color: var(--c-green); -webkit-text-stroke: 0px; }
.pillar-active p { font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--text-color); margin-bottom: 2rem; max-width: 500px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.pillar-btn { display: inline-block; padding: 12px 30px; border: 1px solid var(--text-color); color: var(--text-color); text-decoration: none; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease; backdrop-filter: blur(5px); }
.pillar-btn:hover { background: var(--text-color); color: var(--bg-color); }



/* === 5. PORTAFOLIO BENTO GRID (Fiel al original) === */
.portfolio-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.portfolio-header-wrap { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2rem; }
.bento-portfolio { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, min(32vh, 300px)); gap: 1.5rem; width: 100%; }
.bento-item { position: relative; background-size: cover; background-position: center; border: 1px solid var(--border-color); filter: grayscale(100%); transition: filter 0.5s ease; overflow: hidden; }
.bento-item:hover { filter: grayscale(0%); }
.bento-main { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento-sec-1 { grid-column: 3 / 5; grid-row: 1 / 2; }
.bento-sec-2 { grid-column: 3 / 4; grid-row: 2 / 3; }
.bento-sec-3 { grid-column: 4 / 5; grid-row: 2 / 3; }
.bento-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); padding: 2.5rem; display: flex; flex-direction: column; justify-content: flex-end; }
.bento-sec-2 .bento-overlay, .bento-sec-3 .bento-overlay { padding: 1.5rem; }
.bento-category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
.c-cat-creative { color: var(--c-cyan); } .c-cat-marketing { color: var(--c-green); } .c-cat-tech { color: var(--c-purple); }
.bento-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; line-height: 1.1; margin-bottom: 0.5rem; }
.bento-main .bento-title { font-size: 3.5rem; }
.bento-sec-1 .bento-title { font-size: 2.2rem; }
.bento-sec-2 .bento-title, .bento-sec-3 .bento-title { font-size: 1.5rem; }
.bento-hover-content { opacity: 0; transform: translateY(15px); transition: all 0.4s ease; display: flex; flex-direction: column; align-items: flex-start; }
.bento-item:hover .bento-hover-content { opacity: 1; transform: translateY(0); }
.bento-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1rem; margin-top: 0.5rem; width: 100%; }
.bento-sec-2 .bento-metrics, .bento-sec-3 .bento-metrics { grid-template-columns: 1fr; }
.metric span { display: block; font-size: 0.65rem; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.metric strong { font-size: 1.1rem; font-weight: 500; color: var(--text-color); }
.bento-btn { display: inline-block; /*margin-top: 1.5rem;*/ padding: 8px 24px; border: 1px solid var(--text-color); color: var(--text-color); text-decoration: none; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; transition: all 0.3s ease; backdrop-filter: blur(5px); }
.bento-btn:hover { background: var(--text-color); color: var(--bg-color); }


/* === 6. ABOUT ME SECTION (Fiel al original) === */
.about-section { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; min-height: 70vh; }
.about-image-container { position: relative; width: 100%; height: 100%; min-height: 600px; overflow: hidden; border: 1px solid var(--border-color); }
.about-image { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(100%); transition: filter 0.5s ease, transform 0.8s ease; }
.about-image-container:hover .about-image { filter: grayscale(0%); transform: scale(1.03); }
.about-content { display: flex; flex-direction: column; justify-content: center; }
.about-heading { font-family: 'Oswald', sans-serif; font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 700; text-transform: uppercase; line-height: 1.1; margin-bottom: 2rem; color: var(--text-color); }
.about-heading span { color: var(--text-muted); display: block; font-size: clamp(2.5rem, 4vw, 4rem); }
.about-text { font-size: 1.1rem; font-weight: 300; line-height: 1.6; color: var(--text-muted); margin-bottom: 3rem; max-width: 90%; }
.about-text strong { color: var(--text-color); font-weight: 500; }

/* === 7. TIMELINE CAREER (Fiel al original Valentin Cheval Style) === */
.career-timeline-container { margin-top: 6rem; border-top: 1px solid var(--border-color); }
.timeline-row { display: flex; align-items: center; border-bottom: 1px solid var(--border-color); padding: 3.5rem 0; position: relative; overflow: hidden; transition: padding-left 0.4s ease, background-color 0.4s ease; }
.timeline-row:hover { background-color: rgba(255,255,255,0.02); padding-left: 2rem; }
.timeline-year { font-family: 'Oswald', sans-serif; font-size: clamp(4rem, 6vw, 6rem); font-weight: 700; color: transparent; -webkit-text-stroke: 1px var(--text-muted); width: 250px; flex-shrink: 0; transition: color 0.4s ease, -webkit-text-stroke 0.4s ease; }
.timeline-row:hover .timeline-year { color: var(--text-color); -webkit-text-stroke: 0px transparent; }
.timeline-details { flex: 1; display: flex; justify-content: space-between; align-items: center; padding-right: 2rem; }
.timeline-role { font-family: 'Oswald', sans-serif; font-size: 1.8rem; text-transform: uppercase; color: var(--text-color); }
.timeline-role span { display: block; font-family: 'Inter', sans-serif; font-size: 0.8rem; letter-spacing: 2px; color: var(--text-muted); margin-top: 0.3rem; }
.timeline-desc { font-size: 1rem; color: var(--text-muted); max-width: 400px; line-height: 1.6; font-weight: 300; }
.timeline-arrow { font-size: 2rem; color: var(--text-muted); transition: transform 0.4s ease, color 0.4s; }
.timeline-row:hover .timeline-arrow { transform: translateX(20px) rotate(-45deg); color: var(--text-color); }

/* === 8. FOOTER & PLACEHOLDERS (Fiel al original) === */
.footer { padding: 8rem 4rem 2rem 4rem; background-color: var(--bg-color); border-top: 1px solid var(--border-color); text-align: center; display: flex; flex-direction: column; justify-content: center; }
.footer-cta-text { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-bottom: 1rem; }
.footer-cta-link { font-family: 'Oswald', sans-serif; font-size: clamp(4rem, 10vw, 12rem); font-weight: 700; text-transform: uppercase; color: var(--text-color); text-decoration: none; line-height: 0.9; display: block; margin-bottom: 6rem; transition: color 0.3s; }
.footer-cta-link:hover { color: var(--text-muted); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 2rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.footer-links { display: flex; gap: 2rem; }
.footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: var(--text-color); }
.footer .reveal-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.footer {
    position: relative;
    z-index: 50; /* Nos aseguramos de que no quede sepultado bajo el Bento Grid */
}
.placeholder-section { height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-color); font-family: 'Oswald', sans-serif; font-size: 3rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 4px; position: relative; z-index: 20; background-color: var(--bg-color); }

/* === BUSCADOR POPUP (Reparado para formulario) === */
#search-popup {
    position: fixed; 
    inset: 0; 
    background: rgba(12, 12, 12, 0.98); 
    z-index: 100000;
    display: flex; 
    justify-content: center; 
    align-items: center;
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.4s ease;
}
#search-popup.active { 
    opacity: 1; 
    pointer-events: auto; 
}
.search-close { 
    position: absolute; 
    top: 3rem; 
    right: 4rem; 
    font-size: 2rem; 
    color: var(--text-muted); 
    transition: color 0.3s; 
    cursor: pointer; /* Añadido para asegurar clicabilidad */
}
.search-close:hover { 
    color: var(--text-color); 
}
.search-input {
    background: transparent; 
    border: none; 
    border-bottom: 2px solid var(--text-muted);
    color: var(--text-color); 
    font-size: clamp(2rem, 5vw, 4rem); 
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase; 
    width: 70%; 
    text-align: center; 
    outline: none; 
    padding-bottom: 10px; 
    transition: border-color 0.3s;
}
.search-input:focus { 
    border-bottom-color: var(--text-color); 
}







/* Corrección para que el Header no se pierda */
.sp-page-container { margin-top: -80px; } /* Sube la página para que el top menu flote encima */

.sp-hero-master { 
    height: 60vh; 
    background-size: cover; 
    background-position: center; 
    display: flex; 
    align-items: flex-end; 
    position: relative; 
}
.sp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #0c0c0c 10%, rgba(0,0,0,0.3) 100%); }

.sp-hero-content { position: relative; z-index: 10; padding-bottom: 50px; }
.sp-title { font-family: 'Oswald', sans-serif; font-size: 5rem; text-transform: uppercase; margin: 10px 0; }
.sp-subtitle { font-family: 'Inter', sans-serif; color: var(--c-cyan); letter-spacing: 2px; }

/* Grid Técnico */
.sp-data-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; padding: 80px 0; }
.sp-block h3 { font-family: monospace; font-size: 0.7rem; margin-bottom: 15px; color: var(--text-muted); }
.sp-text-stream { font-family: 'Inter', sans-serif; font-size: 1.1rem; line-height: 1.6; }

/* Galería Impactante */
.sp-visual-stream { padding-bottom: 100px; display: flex; flex-direction: column; gap: 40px; }
.stream-item img { width: 100%; border-radius: 4px; filter: grayscale(0.5); transition: 0.5s; }
.stream-item img:hover { filter: grayscale(0); }








/* ==========================================================================
   PORTAFOLIO: ASYMMETRIC NEXUS GRID RESTRUCURADO (Desktop)
   ========================================================================== */
.nexus-section { background-color: var(--bg-color); }
.nexus-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 3rem; border-bottom: 1px solid var(--border-color); padding-bottom: 2rem;
}

/* === NUEVOS REQUERIMIENTOS DE COLOR DE CATEGORÍAS === */
.c-cat-cyan, .c-cat-cyan > a { color: var(--c-cyan) !important; }     /* Brand & Content */
.c-cat-green, .c-cat-green > a { color: var(--c-green) !important; }   /* MarTech & Devs */
.c-cat-purple, .c-cat-purple > a { color: var(--c-purple) !important; } /* Growth & Performance */

/* Tarjeta Principal (Gigante Estructurada) */
.nx-featured-card {
    display: flex; height: 520px; background: #080808;
    border: 1px solid var(--border-color); text-decoration: none;
    overflow: hidden; margin-bottom: 2.5rem;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.nx-featured-card:hover {
    border-color: rgba(255,255,255,0.35);
    box-shadow: 0 15px 50px rgba(0,0,0,0.9);
}
.nx-feat-visual { width: 52%; overflow: hidden; position: relative; border-right: 1px solid var(--border-color); }
.nx-feat-content { width: 48%; padding: 3rem; display: flex; flex-direction: column; justify-content: center; }

/* Sub-Grilla (Las 2 secundarias inferiores) */
.nx-sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.nx-small-card {
    display: flex; flex-direction: column; background: #080808;
    border: 1px solid var(--border-color); text-decoration: none;
    overflow: hidden; transition: border-color 0.4s ease, transform 0.4s ease;
}
.nx-small-card:hover { border-color: rgba(255,255,255,0.35); transform: translateY(-5px); }
.nx-small-visual { height: 260px; overflow: hidden; position: relative; border-bottom: 1px solid var(--border-color); }
.nx-small-content { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; }

/* === TRANSMISIÓN SUAVE DE GALERÍA (Efecto Cinemático de Imagen) === */
.nx-image-scale {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    filter: grayscale(100%) opacity(0.35); /* Inicio opaco/gris ultra elegante */
    transform: scale(1.02);
    /* Animación continua de paneo lento simulando transición de galería de arte */
    animation: nexusGalleryPan 24s infinite ease-in-out;
    transition: filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes nexusGalleryPan {
    0% { background-position: center center; }
    50% { background-position: 54% 48%; }
    100% { background-position: center center; }
}
.nx-featured-card:hover .nx-image-scale,
.nx-small-card:hover .nx-image-scale {
    filter: grayscale(0%) opacity(0.85) !important; /* Recupera color y luz en hover */
    transform: scale(1.06) !important;
}

/* === OVERLAYS INTERNOS DE LA IMAGEN (Ranking y Tech) === */
.nx-stars-overlay {
    position: absolute; top: 1.2rem; right: 1.2rem;
    background: rgba(12, 12, 12, 0.85); border: 1px solid var(--border-color);
    padding: 5px 10px; border-radius: 4px; font-size: 0.7rem;
    color: #ffb800; z-index: 15; letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.nx-tech-tags {
    position: absolute; bottom: 1.2rem; left: 1.2rem; right: 1.2rem;
    display: flex; flex-wrap: wrap; gap: 6px; z-index: 15;
}
.nx-tag {
    font-size: 0.62rem; text-transform: uppercase; background: rgba(12, 12, 12, 0.9);
    color: var(--text-color); padding: 4px 8px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px; font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
}

/* === AJUSTES TIPOGRÁFICOS CORREGIDOS === */
.nx-cat-badge {
    font-family: 'Oswald', sans-serif; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 2px; margin-bottom: 0.8rem; display: inline-block;
}
.nx-title-large {
    font-family: 'Oswald', sans-serif; 
    font-size: clamp(1.8rem, 3.2vw, 2.4rem); /* Título más chico requerido para no romper espacio */
    line-height: 1.15; color: var(--text-color); margin-bottom: 1rem;
    text-transform: uppercase;
}
.nx-title-small {
    font-family: 'Oswald', sans-serif; font-size: 1.6rem;
    line-height: 1.2; color: var(--text-color); margin-bottom: 1.5rem;
    text-transform: uppercase;
}
.nx-challenge-text {
    font-size: 0.9rem; line-height: 1.5; color: var(--text-muted);
    margin-bottom: auto; max-width: 95%;
}

/* === CONTENEDOR DE DOBLE KPI VERIFICADO === */
.nx-meta-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.1);
    width: 100%;
}
.nx-bar-stacked { flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.nx-client-box { display: flex; align-items: center; gap: 0.8rem; }
.nx-logo-img, .nx-logo-placeholder {
    width: 40px; height: 40px; border-radius: 4px; background: #ffffff;
    padding: 4px; object-fit: contain; border: 1px solid var(--border-color);
}
.nx-logo-placeholder { background: rgba(255,255,255,0.02); padding: 10px; color: var(--text-muted); }

.nx-meta-label { display: block; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 2px; }
.nx-meta-value { font-size: 0.9rem; font-weight: 500; color: var(--text-color); }

.nx-kpi-container { display: flex; gap: 1.5rem; }
.nx-kpi-box { text-align: right; display: flex; flex-direction: column; }
.nx-kpi-value { font-family: 'Oswald', sans-serif; font-size: 1.6rem; line-height: 1; }
.nx-small-card .nx-kpi-box { text-align: left; }

/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVA EXCLUSIVA PARA MOBILE (Añadir dentro del Query)
   ========================================================================== */
@media (max-width: 768px) {
    .nexus-header { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    
    /* Colapso vertical completo del bloque gigante */
    .nx-featured-card { flex-direction: column; height: auto; margin-bottom: 1.5rem; }
    .nx-feat-visual { width: 100%; height: 260px; border-right: none; border-bottom: 1px solid var(--border-color); }
    .nx-feat-content { width: 100%; padding: 1.5rem; }
    
    /* Las secundarias se transforman en 1 sola columna */
    .nx-sub-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .nx-small-visual { height: 220px; }
    .nx-small-content { padding: 1.5rem; }
    
    .nx-title-large { font-size: 1.8rem; }
    .nx-title-small { font-size: 1.4rem; }
    
    /* Barras de datos apiladas */
    .nx-meta-bar { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
    .nx-kpi-container { width: 100%; justify-content: space-between; border-top: 1px dashed rgba(255,255,255,0.05); padding-top: 1rem; }
    .nx-small-card .nx-kpi-box, .nx-kpi-box { text-align: left; }
}

/* ==========================================================================
   PORTFOLIO HUB (ARCHIVE) - DYNAMIC UI
   ========================================================================== */

.archive-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Barra de Filtros */
.hub-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: #111;
    padding: 20px;
    border: 1px solid #222;
    align-items: center;
}

.hub-input-group, 
.hub-select-group {
    flex: 1;
    min-width: 200px;
}

.hub-filter-bar input,
.hub-filter-bar select {
    width: 100%;
    background: #000;
    border: 1px solid #333;
    color: #fff;
    padding: 12px 15px;
    font-family: monospace;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.hub-filter-bar input:focus,
.hub-filter-bar select:focus {
    border-color: var(--c-white);
}

/* Grid de Resultados */
.hub-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

/* Tarjetas Individuales del Hub */
.hub-card {
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.hub-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.hub-card-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hub-card-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) contrast(1.1);
    opacity: 0.7;
    transition: filter 0.5s ease, opacity 0.5s ease;
}

.hub-card:hover .hub-card-img {
    filter: grayscale(0%) contrast(1);
    opacity: 1;
}

.hub-card-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.hub-client {
    font-family: monospace;
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.hub-title {
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.3;
    margin-bottom: 25px;
}

.hub-footer {
    margin-top: auto;
    border-top: 1px solid #222;
    padding-top: 15px;
}

.hub-action {
    font-family: monospace;
    font-size: 0.85rem;
    color: #888;
    transition: color 0.3s ease;
}

.hub-card:hover .hub-action {
    color: #fff;
}

.hub-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: #111;
    border: 1px dashed #333;
    font-family: monospace;
    color: #888;
}



/* ==========================================================================
   PORTFOLIO HUB - TRI-SPLIT VIDEO HEADER
   ========================================================================== */

.hub-header-sec {
    position: relative;
    width: 100%;
    height: 45vh; /* Altura controlada para no empujar el buscador muy abajo */
    min-height: 380px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #050505;
}

/* Contenedor de Videos */
.hub-header-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    z-index: 0;
}

.hub-video-slice {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.03); /* Línea divisoria muy sutil */
}

.hub-video-slice:last-child {
    border-right: none;
}

.hub-video-slice video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    filter: grayscale(80%) contrast(1.2); /* Desaturamos los videos para que no molesten */
}

.slice-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--slice-tint); /* El tinte inyectado por HTML */
    mix-blend-mode: overlay; /* Efecto de luz de color sobre el video */
}

.hub-global-gradient {
    position: absolute;
    inset: 0;
    /* Gradiente oscuro abajo para que las letras blancas y el buscador resalten */
    background: linear-gradient(to bottom, rgba(5,5,5,0.6) 0%, rgba(5,5,5,0.95) 100%);
}

/* Contenido del Header */
.hub-header-content {
    position: relative;
    z-index: 2;
    padding-bottom: 30px; /* Espacio para que el buscador se solape */
}

/* Ajuste del Panel de Filtros para Solapamiento (Overlap) */
.hub-controls {
    position: relative;
    z-index: 10;
    margin-top: -45px; /* Sube la barra para "morder" el video */
    margin-bottom: 40px;
}

.hub-filter-bar {
    background: #0d0d0d;
    border: 1px solid #222;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8); /* Sombra pesada para separarlo del fondo */
    /* El resto de tus estilos de hub-filter-bar se mantienen igual */
}

.pillar-back-link {
    transition: color 0.3s ease;
    display: inline-block;
}

.pillar-back-link:hover {
    color: #fff !important;
}

.pillar-header-sec {
    height: 40vh !important; /* Un poco más bajo que el hub principal */
    min-height: 440px !important;
}


/* Limpieza de header para que se vea el top menu */
.sp-demo-wrapper { margin-top: -120px; color: #fff; background-color: #0c0c0c; }

/* Hero Editorial */
.sp-hero-editorial { height: 85vh; position: relative; display: flex; align-items: flex-end; }
.sp-hero-image { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sp-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #0c0c0c 15%, transparent 90%); }
.sp-hero-content { position: relative; z-index: 2; padding-bottom: 100px; }
.sp-category-tag { font-family: monospace; font-size: 0.7rem; color: var(--c-cyan); }
.sp-title { font-size: clamp(4rem, 10vw, 8rem); font-family: 'Oswald'; text-transform: uppercase; line-height: 0.9; margin: 15px 0; }

/* Editorial Grid */
.sp-editorial-grid { display: grid; grid-template-columns: 250px 1fr; gap: 100px; padding: 100px 20px; }
.sp-meta-block { margin-bottom: 30px; }
.sp-meta-block h4 { font-family: monospace; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; }
.sp-meta-block p { font-family: 'Inter'; font-size: 0.9rem; margin-top: 5px; }

/* Main Content */
.sp-drop-cap { font-family: 'Oswald'; font-size: 2.5rem; line-height: 1.1; margin-bottom: 30px; font-weight: 500; }
.sp-main-content p { font-size: 1.2rem; line-height: 1.8; color: #ccc; margin-bottom: 25px; }

/* Masonry Visual Stream */
.sp-gallery-masonry { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; padding-bottom: 150px; }
.sp-gallery-box img { width: 100%; height: 600px; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: 0.6s; }
.sp-gallery-box img:hover { filter: grayscale(0); transform: scale(1.01); }

/* Opción 1: Añadir al final de tu style.css para empujar los KPIs a la derecha */
.nx-meta-bar {
    justify-content: space-between !important;
    width: 100%;
}

.nx-kpi-container {
    margin-left: auto !important;
    justify-content: flex-end; /* Alinea los elementos internos a la derecha si es necesario */
}

/* En móvil, vuelve a alinearlos a la izquierda para que no se desborden */
@media (max-width: 768px) {
    .nx-meta-bar {
        flex-direction: column;
    }
    .nx-kpi-container {
        margin-left: 0 !important;
        justify-content: flex-start;
    }
}

/* ==========================================================================
   9. OPTIMIZACIÓN RESPONSIVA EXCLUSIVA PARA MOBILE (Separado al final)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* --- AJUSTES DE INTERACCIÓN Y CURSOR --- */
    * { cursor: auto !important; }
    .cursor { display: none !important; }

    /* --- CONTENEDORES GLOBALES --- */
    .section-padding { padding: 4rem 1.5rem; }
    .pillars-header-wrap { padding: 0 1.5rem; }

    /* --- NAVEGACIÓN MOBILE (Menú Hamburguesa Off-Canvas) --- */
    nav { 
        padding: 1.5rem 1.5rem; 
        background: rgba(12, 12, 12, 0.96);
        border-bottom: 1px solid var(--border-color);
        /* Mantenemos el flex row para que el logo y el botón queden en la misma línea */
        flex-direction: row; 
        align-items: center; 
    }

    /* Diseño del botón de tres líneas */
    .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer !important;
        z-index: 1002;
    }
    .mobile-menu-btn span {
        display: block;
        width: 30px;
        height: 2px;
        background-color: var(--text-color);
        transition: all 0.3s ease;
    }
    /* Animación de la X al abrir */
    .mobile-menu-btn.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
    .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Panel lateral desplegable (Off-Canvas) */
    .menu-links, .menu { 
        position: fixed;
        top: 0;
        right: -100%; /* Oculto fuera de la pantalla por la derecha */
        width: 80%; /* Ancho del menú desplegable */
        max-width: 400px;
        height: 100vh; /* Altura completa de la pantalla */
        background-color: var(--bg-color);
        border-left: 1px solid var(--border-color);
        flex-direction: column; 
        justify-content: flex-start;
        align-items: flex-start;
        padding: 6rem 2rem 2rem 2rem;
        gap: 2rem; 
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1001;
        overflow-y: auto; /* Permitir scroll si hay muchos enlaces */
    }
    
    /* Clase que se activa con JS para mostrar el menú */
    .menu-links.active {
        right: 0;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5);
    }

    .nav-item, .menu-item {
        height: auto;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-item > a, .menu-item > a {
        font-size: 1.2rem; /* Enlaces más grandes en móvil */
        display: block;
        width: 100%;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    /* Submenús en versión móvil: Se muestran siempre debajo del enlace principal */
    .submenu, .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        padding: 1rem 0 0 1rem;
        min-width: auto;
        text-align: left;
    }

    /* Buscador y selector de idioma en el panel lateral */
    #search-btn { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border-color); width: 50px; height: 50px; border-radius: 4px; }
    .lang-selector { margin-top: auto; padding-top: 2rem; border-top: 1px solid var(--border-color); }
    .lang-submenu { padding-top: 1rem; }
    
    /* ==========================================================================
   Ajuste: Forzar banderas de GTranslate a diseño circular original
   ========================================================================== */
    .menu-links img, 
    .menu-item img, 
    .gtranslate img, 
    .gt_img {
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }


    /* --- HERO SECTION MOBILE --- */
    /* Solución: Ajustamos el Hero a la altura real de la pantalla móvil (100dvh previene cortes por la barra del navegador) */
    .hero { 
        padding: 0 1.5rem; 
        height: 100dvh; 
        min-height: 600px;
    }
    
    .hero-content-wrapper { 
        height: auto; 
        transform: translateY(-8vh); /* Subimos un poco los textos para dar espacio a la foto */
    }
    
    .hero-title { font-size: clamp(2.5rem, 8vw, 5rem); }
    .rotating-words { height: clamp(2.5rem, 8vw, 5rem); }
    
    /* =========================================================================
       MODIFICAR POSICIÓN DE TU FOTO AQUÍ
       ========================================================================= */
    .hero-image-wrapper { 
        /* Altura de la foto en relación a la pantalla. Redúcela (ej: 40vh) si te tapa el texto */
        height: 45vh; 
        bottom: 0; 
        
        /* Ajuste Horizontal: 
           Actualmente está en translateX(-50%) que centra la imagen exactamente en medio.
           - Para moverla a la izquierda: Cambia a translateX(-60%) o más.
           - Para moverla a la derecha: Cambia a translateX(-40%) o menos. 
        */
        transform: translateX(-50%); 
        
        /* Ajuste Vertical Fino:
           Si quieres que la foto suba o baje un poco desde la base de la pantalla,
           descomenta la siguiente línea y ajusta el valor (positivo baja, negativo sube).
           margin-bottom: -20px; 
        */
    }
    
    /* --- AJUSTE DE IMAGEN DE FONDO EN MÓVIL --- */
    .hero-bg-wrapper {
        width: 100%;        /* Forzamos a que ocupe exactamente el ancho móvil */
        height: 100%;       /* Ocupa el 100% del alto del Hero (100dvh) */
        top: 0;             /* Reseteamos el centrado de escritorio */
        left: 0;            /* Reseteamos el centrado de escritorio */
        transform: none;    /* Eliminamos el desplazamiento del efecto mouse */
    }

    .hero-bg-img {
        width: 100%;
        height: 100%;
        object-fit: cover;  /* Mantiene la proporción sin deformar la imagen */
        
        /* =========================================================================
           CONTROL DE ENCUADRE DEL FONDO:
           Modifica el segundo valor si quieres mover la imagen verticalmente:
           - 'center center': Centra la imagen perfectamente (solución estándar).
           - 'center top': Prioriza que se vea la parte superior de la foto.
           - 'center bottom': Prioriza que se vea la parte inferior de la foto.
           ========================================================================= */
        object-position: center center; 
    }
    
    .hero-profile-img {
        /* Puedes limitar el ancho máximo aquí si la imagen se ve muy grande 
        max-width: 90%; */
    }
    /* ========================================================================= */

    .bottom-right-bio { 
        position: absolute;
        bottom: 90px; /* Ajustado para que no choque con el marquee */
        left: 1.5rem; 
        right: 1.5rem; 
        text-align: left; 
        max-width: 100%;
        z-index: 10;
    }
    
    /* Ajuste de submenús para que no queden flotando infinitamente */
    .submenu, .sub-menu {
        top: 25px;
        left: 50%;
        transform: translateX(-0%) translateY(5px);
        min-width: 260px;
        text-align: left;
    }
    .nav-item:hover .submenu, 
    .menu-item:hover .sub-menu {
        transform: translateX(-0%) translateY(0);
    }

    /* --- HERO SECTION --- */
    .hero { padding: 0 1.5rem; }
    .hero-content-wrapper { height: auto; transform: translateY(-30vh); }
    
    /* Escalado tipográfico seguro para evitar rupturas de layout */
    .hero-title { font-size: clamp(2.5rem, 8vw, 5rem); }
    .rotating-words { height: clamp(2.5rem, 8vw, 5rem); }
    
    .hero-image-wrapper { height: 50vh; }
    
    /* Bio inferior recolocada para evitar colisiones */
    .bottom-right-bio { 
        position: absolute;
        bottom: 110px; 
        left: 1.5rem; 
        right: 1.5rem; 
        text-align: left; 
        max-width: 100%;
    }
    .bio-socials { justify-content: flex-start; }
    .marquee-wrapper { padding-bottom: 8px; }
    .marquee-track { gap: 2.5rem; }

    /* --- PILARES ESTRATÉGICOS (Conversión fluida de horizontal a vertical) --- */
    .pillars-accordion { 
        flex-direction: column; 
        height: auto; 
        border-bottom: none;
    }
    .pillar-panel { 
        width: 100%;
        height: 320px; 
        flex: none !important; /* Desactivar animaciones expansivas en móvil */
        border-right: none; 
        border-bottom: 1px solid var(--border-color); 
    }
    /* En móvil forzamos la visualización limpia de los CTAs */
    .pillar-idle { display: none !important; }
    .pillar-active { 
        opacity: 1 !important; 
        transform: translateY(0) !important; 
        position: absolute; 
        bottom: 2rem; 
        left: 1.5rem; 
        right: 1.5rem; 
        pointer-events: auto;
    }
    .pillar-active h3 { 
        font-size: 2rem !important; 
        color: var(--text-color) !important;
        -webkit-text-stroke: 0px transparent !important;
    }
    .panel-creative .pillar-active h3 { color: var(--c-cyan) !important; }
    .panel-marketing .pillar-active h3 { color: var(--c-green) !important; }
    .panel-tech .pillar-active h3 { color: var(--c-purple) !important; }
    .pillar-active p { display: none; } /* Ocultamos descripción larga para optimizar espacio táctil */

    /* --- PORTAFOLIO BENTO GRID (Colapso a flujo vertical de tarjetas) --- */
    .portfolio-header-wrap { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
    .bento-portfolio { 
        grid-template-columns: 1fr; 
        grid-template-rows: auto; 
        gap: 1.5rem;
    }
    .bento-main, .bento-sec-1, .bento-sec-2, .bento-sec-3 { 
        grid-column: auto !important; 
        grid-row: auto !important; 
        min-height: 320px; 
    }
    /* Contenido siempre visible en Mobile (No hay hover real) */
    .bento-main .bento-title { font-size: 2.2rem; }
    .bento-sec-1 .bento-title { font-size: 1.8rem; }
    .bento-hover-content { 
        opacity: 1 !important; 
        transform: translateY(0) !important; 
    }
    .bento-metrics { grid-template-columns: 1fr; gap: 0.5rem; }

    /* --- ABOUT ME SECTION --- */
    .about-section { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-image-container { min-height: 380px; }
    .about-heading { font-size: 2.5rem; }
    .about-heading span { font-size: 1.8rem; }
    .about-text { max-width: 100%; margin-bottom: 2rem; }

    /* --- TIMELINE CAREER --- */
    .timeline-row { 
        flex-direction: column; 
        align-items: flex-start; 
        padding: 2rem 0; 
        gap: 0.8rem; 
    }
    .timeline-row:hover { padding-left: 0; background-color: transparent; }
    .timeline-year { width: auto; font-size: 3rem; -webkit-text-stroke: 1px var(--text-color); color: var(--text-color); }
    .timeline-details { padding-right: 0; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .timeline-role { font-size: 1.4rem; }
    .timeline-desc { max-width: 100%; }
    .timeline-arrow { display: none; }

    /* --- FOOTER --- */
    .footer { padding: 4rem 1.5rem 2rem 1.5rem; }
    .footer-cta-link { font-size: 2.8rem; margin-bottom: 4rem; }
    .footer-bottom { font-size: 0.6rem !Important; flex-direction: column; gap: 1.5rem; text-align: center; }
    .footer-links { flex-wrap: wrap; justify-content: center; gap: 1.2rem; }

    /* --- SUBMENÚS TIPO ACORDEÓN EN MÓVIL --- */
    /* 1. Ocultamos el submenú por defecto y quitamos los estilos de escritorio */
    .menu-item-has-children .sub-menu,
    .nav-item .submenu,
    .lang-selector .submenu {
        position: static !important;
        display: none;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0.5rem 0 0.5rem 1.5rem !important; /* Sangría a la izquierda para notar jerarquía */
        min-width: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    /* 2. Cuando el usuario hace hover/clic en el elemento principal, mostramos el submenú empujando el contenido hacia abajo */
    .menu-item-has-children:hover .sub-menu,
    .menu-item-has-children:focus-within .sub-menu,
    .nav-item:hover .submenu,
    .lang-selector:hover .submenu,
    .lang-selector:focus-within .submenu {
        display: flex !important;
        animation: slideDown 0.3s ease forwards;
    }

    /* 3. Animación suave para el despliegue del acordeón */
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* 4. Estilos de los enlaces hijos para que se vean un poco más pequeños que los principales */
    .menu-item-has-children .sub-menu a,
    .nav-item .submenu a {
        font-size: 1rem !important; /* Ligeramente más pequeño que el 1.2rem principal */
        color: var(--text-muted) !important;
        padding-bottom: 0.3rem !important;
        border-bottom: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Alinear a la izquierda */
        width: 100%;
    }
    
    .menu-item-has-children .sub-menu a:hover,
    .nav-item .submenu a:hover {
        color: var(--text-color) !important;
    }
    
    
}





















































/* ==========================================================================
   SINGLE PORTFOLIO - MASTER REFINEMENTS & SWIPER MARQUEE SYNC
   ========================================================================== */

.sp-premium-layout {
    background-color: #0c0c0c;
    color: #f5f5f5;
    overflow-x: hidden;
}

/* Margen controlado para dar aire y evitar superposiciones con el menú principal */
.sp-adjusted-header {
    padding-top: 145px !important; 
    padding-bottom: 60px;
}

.sp-header-top-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.sp-timestamp-tag {
    font-family: monospace;
    font-size: 0.8rem;
    color: #555555;
    letter-spacing: 1px;
}

/* Jerarquía Tipográfica de Cabecera */
.sp-refined-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
    text-transform: uppercase;
    line-height: 1.1;
    font-weight: 700;
    margin: 10px 0 0 0;
    color: #ffffff;
    letter-spacing: -0.5px;
}

/* SINCRONIZACIÓN RADICAL CON EL FRONT PAGE */
.sp-front-sync-bar {
    margin-top: 10px; 
    border-top: 1px solid rgba(255,255,255,0.08); 
    padding-top: 25px; 
    display: flex !important;
    flex-wrap: wrap; 
    align-items: center;
    justify-content: space-between !important; /* EMPUJA LOS KPIS TOTALMENTE A LA DERECHA */
    width: 100%;
    gap: 30px;
}

.sp-front-sync-bar .nx-client-box {
    display: flex;
    align-items: center;
    gap: 15px;
}
.sp-front-sync-bar .nx-logo-wrap,
.sp-front-sync-bar .nx-logo-placeholder {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.sp-front-sync-bar .nx-logo-img {
    width: 40px; height: 40px; border-radius: 4px; background: #ffffff;
    padding: 4px; object-fit: contain; border: 1px solid var(--border-color);
}
.sp-front-sync-bar .nx-meta-label {
    display: block;
    font-family: monospace;
    font-size: 0.68rem;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sp-front-sync-bar .nx-meta-value {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #ffffff;
    font-weight: 500;
}

/* Alineación del bloque de KPIs a la derecha */
.sp-front-sync-bar .nx-kpi-container {
    margin-top: 0 !important;
    margin-left: auto !important; /* Fuerza el anclaje derecho en resoluciones Desktop */
    display: flex;
    gap: 40px;
}
.sp-front-sync-bar .nx-kpi-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sp-front-sync-bar .nx-kpi-value {
    font-family: 'Oswald', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 700;
}
.sp-stars-rating {
    color: #f5c518; 
    font-size: 1.4rem !important; 
    letter-spacing: 1px;
}

/* Estilo de Etiquetas de Arquitectura */
.sp-architecture-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

/* MARQUESINA CONTINUA HORIZONTAL CON PROPORCIÓN MATEMÁTICA PROTEGIDA */
.sp-cinematic-carousel {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 25px 0;
    background: #090909;
    border-top: 1px solid #141414;
    border-bottom: 1px solid #141414;
    overflow: hidden;
}
.sp-hero-swiper {
    width: 100%;
    height: 230px; /* Estilizado, sutil y de baja altura */
}
.sp-hero-swiper .swiper-wrapper {
    transition-timing-function: linear !important; /* Movimiento lineal continuo e infinito */
}
.sp-hero-swiper .swiper-slide {
    height: 100%;
    opacity: 0.35;
    transition: opacity 0.4s ease;
}
.sp-hero-swiper .swiper-slide:hover {
    opacity: 1;
}
.sp-slide-inner {
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #181818;
    background: #000;
}
.sp-carousel-img {
    height: 100%;
    width: auto; /* IMPORTANTE: Respeta la proporción de aspecto original de tus mockups */
    display: block;
    object-fit: contain;
}
.sp-slide-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sp-slide-inner:hover .sp-slide-overlay { opacity: 1; }
.sp-expand-btn {
    font-family: monospace;
    font-size: 0.65rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    background: #000;
    letter-spacing: 1px;
}

/* Respaldo Estático de Imagen */
.sp-cinematic-visual { padding: 30px 0; }
.sp-visual-frame { width: 100%; height: 45vh; background-size: cover; background-position: center; border: 1px solid #151515; }

/* Bloque Editorial Separado */
.sp-editorial-focus { padding-top: 30px; padding-bottom: 80px; }
.sp-focus-grid { display: grid; grid-template-columns: 320px 1fr; gap: 80px; }
.sp-block-heading { font-family: monospace; font-size: 0.8rem; color: #444444; letter-spacing: 1.5px; margin-bottom: 25px; }
.sp-challenge-paragraph { font-size: 1.05rem; line-height: 1.7; color: #999999; }
.sp-concentrated-text { font-size: 1.15rem; line-height: 1.8; color: #cccccc; }
.sp-concentrated-text p { margin-bottom: 25px; }

/* Lightbox Estructura */
.sg-lightbox {
    display: none; position: fixed; z-index: 99999; inset: 0;
    background: rgba(4, 4, 4, 0.97); align-items: center; justify-content: center;
}
.sg-modal-content { max-width: 85%; max-height: 80vh; object-fit: contain; border: 1px solid #1a1a1a; }
.sg-close { position: absolute; top: 30px; right: 40px; color: #555; font-size: 2.5rem; cursor: pointer; }
.sg-close:hover { color: #fff; }
.sg-nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.01); border: 1px solid rgba(255,255,255,0.03);
    color: #666; font-size: 1.5rem; width: 55px; height: 55px;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s;
}
.sg-nav-btn:hover { background: #111; color: #fff; border-color: #333; }
.sg-prev { left: 30px; }
.sg-next { right: 30px; }

.sp-back-footer { padding: 20px 20px 80px 20px; border-top: 1px solid #151515; }
.sp-index-link { font-family: monospace; color: #444; text-decoration: none; font-size: 0.85rem; transition: color 0.3s; }
.sp-index-link:hover { color: #fff; }

/* MODIFICACIONES DE ADAPTACIÓN RESPONSIVE */
@media (max-width: 992px) {
    .sp-focus-grid { grid-template-columns: 1fr; gap: 40px; }
    .sp-front-sync-bar .nx-kpi-container { margin-left: 0 !important; }
}

@media (max-width: 768px) {
    .sp-adjusted-header { padding-top: 135px !important; }
    .sp-front-sync-bar { flex-direction: column; align-items: flex-start; gap: 20px; }
    .sp-front-sync-bar .nx-kpi-container { gap: 25px; width: 100%; justify-content: space-between; }
    .sp-hero-swiper { height: 150px !important; } /* Modificación mobile: Altura compacta para ver el contenido rápido */
    .sp-visual-frame { height: 200px !important; }
    .sg-nav-btn { width: 42px; height: 42px; font-size: 1.1rem; }
    .sg-prev { left: 10px; }
    .sg-next { right: 10px; }
}

























/* ==========================================================================
   PREMIUM INTERACTIVE MARQUEE CAROUSEL (PROPORTIONAL SYNC) - CORREGIDO
   ========================================================================== */

.sp-marquee-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 25px 0;
    background: #090909;
    border-top: 1px solid #141414;
    border-bottom: 1px solid #141414;
    overflow: hidden;
}

.sp-marquee-wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.sp-marquee-track {
    display: flex;
    width: max-content;
    gap: 25px;
    animation: marqueeFlowRight 40s linear infinite;
}

/* SOLUCIÓN AL SALTO: En lugar de cambiar la duración, pausamos el track. 
   Esto detiene las imágenes en el lugar exacto sin recalcular la animación. */
.sp-marquee-wrapper:hover .sp-marquee-track {
    /*animation-play-state: paused;*/ 
    cursor: pointer;
}

.sp-marquee-item {
    height: 210px; 
    position: relative;
    overflow: hidden;
    background: #000;
    border: 1px solid #181818;
    flex-shrink: 0;
    
    /* Transición optimizada para que el crecimiento sea ultra suave */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease, opacity 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
    
    filter: grayscale(1);
    opacity: 0.35;
}

.sp-marquee-track:hover .sp-marquee-item {
    filter: grayscale(1);
    opacity: 0.2;
}

/* Al hacer hover, crece sutilmente y recupera todo su color */
.sp-marquee-item:hover {
    transform: scale(1.05) !important; 
    filter: grayscale(0) !important;
    opacity: 1 !important;
    z-index: 10;
    border-color: var(--c-cyan);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8); /* Otorga profundidad al separarse del fondo */
}

/* Mantiene proporciones originales intactas */
.sp-marquee-img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain; 
}

.sp-marquee-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sp-marquee-item:hover .sp-marquee-hover-overlay {
    opacity: 1;
}

.sp-marquee-hover-overlay span {
    font-family: monospace;
    font-size: 0.65rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    background: #000;
    letter-spacing: 1px;
}

@keyframes marqueeFlowRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@media (max-width: 768px) {
    .sp-marquee-item {
        height: 140px; 
    }
}

.sp-arch-tag {
    font-size: 0.62rem; text-transform: uppercase; background: rgba(12, 12, 12, 0.9);
    color: var(--text-color); padding: 4px 8px; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px; font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
}