/* -------------------------------------------------------------
   RADAR STYLE SYSTEM - PRODUCTION RELEASE v3.2
   ------------------------------------------------------------- */

/* Reset & Core Setup */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Brand Colors - High contrast flat tones (No neon spreads) */
    --color-bg-dark: #090c10;
    --color-bg-dark-panel: #0d1117;
    --color-card-bg: #141a22;
    
    --color-cyan: #00f0ff;
    --color-cyan-dim: rgba(0, 240, 255, 0.12);
    --color-magenta: #ff0055;
    --color-magenta-dim: rgba(255, 0, 85, 0.15);
    
    /* Typography (Matching XtreetX) */
    --font-heading: 'Anybody', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-alt: 'Space Grotesk', sans-serif;
    
    /* Premium Tactile Neumorphism (Flat, Solid, Catching Edges) */
    --neu-dark-elevated: 6px 6px 14px rgba(0, 0, 0, 0.45), 
                         -6px -6px 14px rgba(255, 255, 255, 0.015);
    --neu-dark-sunken: inset 3px 3px 6px rgba(0, 0, 0, 0.55), 
                       inset -3px -3px 6px rgba(255, 255, 255, 0.015);
    --neu-dark-border: 1px solid rgba(255, 255, 255, 0.035);
    
    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-tactile: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Body Styles */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--color-bg-dark);
    color: #e6edf3;
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

body.loading {
    overflow: hidden; /* Lock scroll during boot scan */
}

/* Technical grid backgrounds - No neon spreads */
.scanlines-overlay {
    display: none;
}

.technical-grid-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    pointer-events: none;
}

/* Font helpers */
.font-cyber {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.font-mono {
    font-family: var(--font-mono);
}

/* -------------------------------------------------------------
   1. FULLSCREEN SCAN PRELOADER
   ------------------------------------------------------------- */
#radar-preloader {
    position: fixed;
    inset: 0;
    background: var(--color-bg-dark);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), 
                visibility 0.6s;
}

#radar-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.preloader-radar-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--color-bg-dark-panel);
    border: var(--neu-dark-border);
    box-shadow: var(--neu-dark-elevated);
    padding: 6px;
}

.preloader-radar-grid {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, #0e141d 20%, #080a0e 100%);
    box-shadow: var(--neu-dark-sunken);
    overflow: hidden;
}

.preloader-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(0, 240, 255, 0.15);
    border-radius: 50%;
}
.preloader-ring.pr1 { width: 33%; height: 33%; }
.preloader-ring.pr2 { width: 66%; height: 66%; }
.preloader-ring.pr3 { width: 95%; height: 95%; }

.preloader-sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, var(--color-cyan-dim) 0deg, transparent 90deg);
    border-radius: 50%;
    animation: preloader-spin 1.5s infinite linear;
}

@keyframes preloader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.preloader-telemetry {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
}

.telemetry-log {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.05em;
}

.telemetry-log .txt-ok {
    color: var(--color-cyan);
    font-weight: 700;
}

#preloader-pct {
    color: var(--color-cyan);
    font-weight: 700;
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 8px;
}

/* -------------------------------------------------------------
   Main Header & Logo Alignment
   ------------------------------------------------------------- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    background: rgba(9, 12, 16, 0.8);
    backdrop-filter: blur(12px);
}

.header-container {
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.main-logo-img {
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* -------------------------------------------------------------
   "Mapa" Navigation Button
   ------------------------------------------------------------- */
.btn-map-nav {
    background: var(--color-bg-dark-panel);
    border: var(--neu-dark-border);
    box-shadow: var(--neu-dark-elevated);
    border-radius: 30px;
    padding: 10px 24px;
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-alt);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-tactile);
    position: relative;
    overflow: hidden;
}

.btn-map-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.3), transparent, rgba(255, 0, 85, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: var(--transition-smooth);
}

.btn-map-nav:hover {
    box-shadow: var(--neu-dark-sunken);
    transform: translateY(1px);
}

.btn-map-nav:hover::before {
    opacity: 0.9;
}

.hamburger-icon {
    transition: var(--transition-smooth);
    color: rgba(255, 255, 255, 0.8);
}

.btn-map-nav:hover .hamburger-icon {
    color: var(--color-cyan);
    transform: rotate(90deg);
}

/* Map Navigation Panel */
.map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.map-overlay[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.map-overlay-close-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(4, 5, 8, 0.6);
    backdrop-filter: blur(8px);
}

.map-panel {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: var(--color-bg-dark-panel);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: -15px 0 35px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
}

.map-overlay[aria-hidden="false"] .map-panel {
    transform: translateX(0);
}

.map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.map-panel-title {
    font-family: var(--font-alt);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--color-cyan);
}

.btn-close-map {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: var(--transition-tactile);
}

.btn-close-map:hover {
    color: var(--color-magenta);
}

/* Map Content */
.map-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.map-grid-visual {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    opacity: 0.04;
    pointer-events: none;
}

.vector-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #fff;
    border-radius: 50%;
}
.vector-circle.outer { width: 100%; height: 100%; }
.vector-circle.middle { width: 66%; height: 66%; }
.vector-circle.inner { width: 33%; height: 33%; }
.vector-axis {
    position: absolute;
    background: #fff;
}
.vector-axis.horizontal { top: 50%; left: 0; width: 100%; height: 1px; }
.vector-axis.vertical { left: 50%; top: 0; width: 1px; height: 100%; }

.map-menu-links {
    list-style: none;
    position: relative;
    z-index: 2;
}

.map-menu-links li {
    margin-bottom: 24px;
}

.map-link {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: var(--transition-smooth);
}

.map-link span {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.map-link:hover {
    color: var(--color-cyan);
    transform: translateX(10px);
}

.map-link.active {
    color: var(--color-cyan);
    border-left: 3px solid var(--color-magenta);
    padding-left: 10px;
}

.map-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
    font-family: var(--font-mono);
}

/* -------------------------------------------------------------
   Hero Layout (With Entrance Transitions)
   ------------------------------------------------------------- */
.hero-viewport {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    position: relative;
    z-index: 10;
}

.hero-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 40px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 50px;
    align-items: center;
}

.brand-panel {
    display: flex;
    flex-direction: column;
    gap: 30px;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.ready .brand-panel {
    opacity: 1;
    transform: translateX(0);
}

.tactical-header {
    display: flex;
    gap: 24px;
    align-items: center;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-mono);
}

.location-readout {
    font-weight: 700;
    color: var(--color-cyan);
    position: relative;
    padding-bottom: 4px;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, var(--color-cyan), transparent) 1;
}

.headline-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4.6vw, 4rem);
    font-weight: 900;
    line-height: 1.05;
    color: #ffffff; 
    letter-spacing: -0.02em;
    text-shadow: none;
}

.brand-provocative {
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 700;
    color: var(--color-cyan); 
    border-left: 3px solid var(--color-magenta); 
    padding-left: 15px;
    line-height: 1.3;
    text-shadow: none;
}

.brand-strategic {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: #b0b8c0; 
}

/* Tactical CTA "Tomar ruta" */
.cta-actions {
    margin-top: 10px;
}

.btn-route-cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: var(--color-bg-dark-panel);
    border: var(--neu-dark-border);
    box-shadow: var(--neu-dark-elevated);
    border-radius: 40px;
    padding: 16px 36px;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: var(--transition-tactile);
    cursor: pointer;
}

.btn-route-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 40px;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--color-cyan), transparent, var(--color-magenta));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: var(--transition-smooth);
}

.btn-route-cta:hover {
    box-shadow: var(--neu-dark-sunken);
    transform: translateY(2px);
}

.btn-route-cta:hover::before {
    opacity: 1;
    background: linear-gradient(135deg, var(--color-cyan), var(--color-magenta));
}

.arrow-svg {
    transition: var(--transition-smooth);
}

.btn-route-cta:hover .arrow-svg {
    transform: translateX(6px);
    color: var(--color-cyan);
}

/* Underline separators */
.dashboard-readouts {
    display: flex;
    gap: 30px;
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 25px;
    max-width: 580px;
}

.readout-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    position: relative;
}

.readout-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15%;
    right: -15px;
    height: 70%;
    width: 1px;
    background: linear-gradient(to bottom, var(--color-cyan), var(--color-magenta), transparent);
}

.readout-label {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-mono);
}

.readout-value {
    font-size: 1rem;
    color: #ffffff; 
    font-weight: 700;
    font-family: var(--font-mono);
}

/* -------------------------------------------------------------
   2. ISOMETRIC 3D RADAR PANEL LAYOUT (LARGER SIZING)
   ------------------------------------------------------------- */
.radar-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 1.0s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.ready .radar-panel {
    opacity: 1;
    transform: translateY(0);
}

.radar-3d-perspective-box {
    perspective: 1200px;
    perspective-origin: 50% 30%;
    width: 100%;
    max-width: 600px; 
    height: 560px; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Isometric console with scale-up entrance transition
   Incorporates page-wide --mouse-x and --mouse-y tracking offsets when cursors move outside */
.radar-instrument-frame {
    position: relative;
    width: 500px; 
    height: 500px; 
    border-radius: 50%;
    background: var(--color-bg-dark-panel);
    box-shadow: 
        15px 30px 50px rgba(0, 0, 0, 0.75), 
        -5px -5px 20px rgba(255, 255, 255, 0.005),
        inset 1px 1px 3px rgba(255, 255, 255, 0.04);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Initial state for boot scale-up animation */
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.3);
    opacity: 0;
    transform-style: preserve-3d;
    
    /* Cubic bezier allows smooth tracking transitions */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body.ready .radar-instrument-frame {
    /* Subtle mouse parallax tilt is added dynamically */
    transform: rotateX(calc(56deg + (var(--mouse-y, 0.5) - 0.5) * -12deg)) 
               rotateZ(calc(-38deg + (var(--mouse-x, 0.5) - 0.5) * 18deg)) 
               scale(1);
    opacity: 1;
}

.radar-glass-screen {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at center, #0e141d 20%, #06080b 100%);
    box-shadow: var(--neu-dark-sunken);
    position: relative;
    transform-style: preserve-3d; 
    border: 1px solid rgba(255, 255, 255, 0.015);
}

.radar-sweeper-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: crosshair;
    border-radius: 50%;
}

/* Compass face */
.radar-grid-vector {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.radar-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(0, 240, 255, 0.06);
    border-radius: 50%;
}
.radar-ring.r1 { width: 25%; height: 25%; }
.radar-ring.r2 { width: 50%; height: 50%; }
.radar-ring.r3 { width: 75%; height: 75%; }
.radar-ring.r4 { width: 95%; height: 95%; border-style: solid; border-color: rgba(0, 240, 255, 0.08); }

.radar-marker {
    position: absolute;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(0, 240, 255, 0.2);
    font-family: var(--font-mono);
}
.marker-0   { top: 12px; left: 50%; transform: translateX(-50%); }
.marker-90  { right: 12px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.marker-180 { bottom: 12px; left: 50%; transform: translateX(-50%); }
.marker-270 { left: 12px; top: 50%; transform: translateY(-50%) rotate(-90deg); }

.center-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
}
.cross-line {
    position: absolute;
    background-color: rgba(0, 240, 255, 0.15);
}
.cross-line.horizontal { top: 50%; left: 0; width: 100%; height: 1px; }
.cross-line.vertical { left: 50%; top: 0; width: 1px; height: 100%; }

/* -------------------------------------------------------------
   3. FLAT FRONT-FACING COORDINATES HUD (Outside tilted frame)
   ------------------------------------------------------------- */
.flat-hud {
    margin-top: 10px;
    background: var(--color-bg-dark-panel);
    border: var(--neu-dark-border);
    box-shadow: var(--neu-dark-elevated);
    border-radius: 8px;
    padding: 12px 28px;
    display: flex;
    gap: 28px;
    justify-content: center;
    align-items: center;
    z-index: 5;
    min-width: 340px;
    
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-family: var(--font-mono);
}

body.ready .flat-hud {
    opacity: 1;
    transform: translateY(0);
    animation: terminal-boot 0.8s steps(4) 0.6s forwards;
}

@keyframes terminal-boot {
    0% { opacity: 0; border-color: rgba(255, 255, 255, 0.035); }
    50% { opacity: 0.5; border-color: var(--color-cyan); }
    100% { opacity: 1; border-color: rgba(255, 255, 255, 0.035); }
}

.hud-item {
    display: flex;
    gap: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}
.hud-lbl { color: rgba(255,255,255,0.4); }
.hud-val { color: var(--color-cyan); font-weight: 700; }

/* -------------------------------------------------------------
   4. UPRIGHT BILLBOARD TOOLTIPS (GLOBOS) - POINTER-EVENTS NONE OVERRIDE
   ------------------------------------------------------------- */
.radar-globos-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none; /* Raycasts pass straight to canvas */
    transform-style: preserve-3d;
}

.service-globo {
    position: absolute;
    pointer-events: none; /* Mouse coordinates calculated purely by canvas offsets */
    opacity: 0; /* Hidden by default */
    transform: translate(-50%, -100%) rotateZ(38deg) rotateX(-56deg) scale(0.6);
    transform-origin: bottom center;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 12;
}

.service-globo.detected, 
.service-globo.locked {
    opacity: 1;
    transform: translate(-50%, -100%) rotateZ(38deg) rotateX(-56deg) scale(1);
    /* Retains pointer-events: none to allow cursor un-skew mapping to stay uninterrupted */
}

/* Connecting stem */
.globo-stem {
    width: 2px;
    height: 35px;
    background: linear-gradient(to top, var(--color-cyan), transparent);
    margin: 0 auto;
    position: relative;
}

.service-globo.locked .globo-stem {
    background: linear-gradient(to top, var(--color-magenta), transparent);
}

/* Tooltip card (Click locks calculated inside canvas listener) */
.globo-card {
    background: var(--color-card-bg);
    border: var(--neu-dark-border);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    position: relative;
    border-bottom: 2px solid var(--color-cyan);
    transition: var(--transition-tactile);
    pointer-events: none; /* Let clicks map directly to coordinates below */
}

.service-globo.locked .globo-card {
    border-bottom-color: var(--color-magenta);
    background: #18151c;
}

.globo-num {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.3);
}

.service-globo.locked .globo-num {
    color: rgba(255, 255, 255, 0.2);
}

.globo-title {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.globo-status {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-cyan);
}

.service-globo.locked .globo-status {
    color: var(--color-magenta);
}

/* -------------------------------------------------------------
   5. AMBIENT BACKGROUND GLITCH PARTICLES
   ------------------------------------------------------------- */
.glitch-particle {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    opacity: 0.95; /* Increased visibility */
    animation: particle-glitch-anim 0.45s steps(4) forwards;
}

.glitch-particle.cyan {
    background-color: var(--color-cyan);
}

.glitch-particle.magenta {
    background-color: var(--color-magenta);
}

@keyframes particle-glitch-anim {
    0% {
        transform: translate(0, 0) skewX(0deg);
        opacity: 0.95;
    }
    33% {
        transform: translate(calc(var(--glitch-x, 20px) * -1), var(--glitch-y, 8px)) skewX(30deg);
        opacity: 0.75;
    }
    66% {
        transform: translate(var(--glitch-x, 20px), calc(var(--glitch-y, 8px) * -1)) skewX(-20deg);
        opacity: 0.5;
    }
    100% {
        transform: translate(0, 0) skewX(0deg);
        opacity: 0;
    }
}

/* =============================================================
   6. MICRO APPS SECTION (SCROLL-DRIVEN NEUMORPHIC NETWORK)
   ============================================================= */
.modular-apps-track {
    position: relative;
    height: 250vh;
    background: #f0f3f8 !important;
    background-image: none !important;
    overflow: visible;
    z-index: 20;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.modular-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.modular-net-container {
    max-width: 1400px;
    width: 100%;
    display: grid;
    grid-template-columns: 32% 68%;
    gap: 40px;
    padding: 0 40px;
    align-items: center;
    box-sizing: border-box;
}

/* Left Pitch Panel */
.modular-pitch-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
}

.pitch-card {
    padding: 35px;
    border-radius: 24px;
    text-align: left;
    background-color: #f0f3f8;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 12px 12px 24px #d1d9e6, -12px -12px 24px #ffffff;
}

.pitch-tag {
    font-size: 0.65rem;
    color: #6b7280;
    font-weight: 700;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 12px;
}

.pitch-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: #10141a;
    margin: 0 0 16px 0;
    font-weight: 800;
    text-transform: uppercase;
}

.pitch-lead {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 25px;
}

/* Phase Alignment Indicator */
.dynamic-phase-indicator {
    margin-bottom: 30px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    padding-top: 20px;
}

.phase-meter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    margin-bottom: 8px;
    font-weight: 700;
}

.phase-lbl {
    color: #6b7280;
}

.phase-val {
    color: #0284c7;
    font-weight: 800;
}

.phase-bar-outer {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 1px 1px 2px #d1d9e6, inset -1px -1px 2px #ffffff;
}

.phase-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, #0284c7, #0d9488);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
}

/* Phase Stories Holder */
.phase-story-holder {
    position: relative;
    min-height: 120px;
}

.story-block {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.story-block.active {
    opacity: 1;
    visibility: visible;
}

.story-title {
    font-size: 0.75rem;
    color: #1e293b;
    margin: 0 0 8px 0;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.story-desc {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.5;
    color: #6b7280;
    margin: 0;
}

/* Right Column & Dynamic Assembly Canvas */
.modular-canvas-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.network-viewport {
    position: relative;
    width: 800px;
    height: 800px;
    transform-origin: center center;
}

.network-svg-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.net-line {
    stroke: rgba(160, 174, 192, 0.15);
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    transition: stroke 0.4s, stroke-width 0.4s;
}

.net-line.connected {
    stroke: #0284c7;
    stroke-width: 3.5;
    stroke-dasharray: 8 6;
    animation: flow-line 2s linear infinite;
}

@keyframes flow-line {
    to {
        stroke-dashoffset: -28;
    }
}

/* Neumorphic Core Node (MARCA) */
.net-node {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.core-node {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    left: 400px;
    top: 400px;
    transform: translate(-50%, -50%);
    z-index: 10;
    background-color: #f0f3f8;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    box-shadow: 12px 12px 24px #cbd5e1, -12px -12px 24px #ffffff;
}

.core-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.core-brand-lbl {
    font-size: 0.65rem;
    color: #6b7280;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.core-brand-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    color: #10141a;
    letter-spacing: 0.05em;
    margin: 4px 0 0 0;
    text-transform: uppercase;
}

/* Secondary Modular Nodes */
.secondary-node {
    width: 154px;
    height: 74px;
    border-radius: 16px;
    padding: 12px;
    background-color: #f0f3f8;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff;
    cursor: pointer;
    transition: border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
}

.secondary-node:hover {
    box-shadow: 4px 4px 8px #cbd5e1, -4px -4px 8px #ffffff;
}

.secondary-node.connected {
    box-shadow: inset 3px 3px 6px #cbd5e1, inset -3px -3px 6px #ffffff, 0 0 15px rgba(2, 132, 199, 0.06);
    border-color: rgba(2, 132, 199, 0.25);
    background-color: #ecf3fa;
}

.node-code {
    font-size: 0.62rem;
    color: #9ca3af;
    font-weight: 700;
    margin-bottom: 4px;
    display: block;
    transition: color 0.4s;
}

.secondary-node.connected .node-code {
    color: #0284c7;
}

.node-title {
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 800;
    color: #374151;
    margin: 0;
    line-height: 1.25;
    transition: color 0.4s;
}

.secondary-node.connected .node-title {
    color: #10141a;
}

/* =============================================================
   Section 3: Capacidades / Servicios (Interactive Catalog)
   ============================================================= */
.capabilities-section {
    background-color: #f8fafc;
    color: #10141a;
    padding: 100px 0;
    position: relative;
    z-index: 21;
    overflow: visible;
}

.capabilities-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 60px;
    align-items: start;
}

.capabilities-sidebar {
    position: sticky;
    top: 100px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.sidebar-header .sect-num {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0284c7;
}

.sidebar-header .sect-lbl {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: #4b5563;
    font-weight: 700;
}

.sidebar-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.1;
    color: #10141a;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.sidebar-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 40px;
}

/* Telemetry HUD Panel */
.telemetry-hud-card {
    background-color: #f8fafc;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 6px 6px 15px #cbd5e1, -6px -6px 15px #ffffff;
    position: relative;
}

.hud-glitch-header {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 12px;
    margin-bottom: 15px;
}

.hud-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #0d9488;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(13, 148, 136, 0.6);
    animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
    0% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.6; }
}

.hud-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.hud-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.04);
    padding-bottom: 8px;
}

.hud-row:last-child {
    border-bottom: none;
}

.hud-label {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 700;
}

.hud-value {
    font-size: 0.85rem;
    color: #10141a;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: var(--transition-tactile);
}

#cap-status-val.active-mode,
#cap-mode-val.active-mode,
#cap-integ-val.active-mode {
    color: #0284c7;
    animation: glitch-text-pulse 0.3s ease;
}

@keyframes glitch-text-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); }
}

.hud-route-cta {
    margin-top: 15px;
}

.btn-take-route {
    display: block;
    text-align: center;
    background-color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #10141a;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    padding: 14px 20px;
    border-radius: 8px;
    box-shadow: 4px 4px 8px #cbd5e1, -4px -4px 8px #ffffff;
    transition: var(--transition-tactile);
}

.btn-take-route:hover {
    box-shadow: inset 2px 2px 5px #cbd5e1, inset -2px -2px 5px #ffffff;
    color: #0284c7;
}

/* Right Column: Capabilities Feed */
.capabilities-feed {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.capability-card {
    background-color: #f8fafc;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 35px;
    box-shadow: 6px 6px 15px #cbd5e1, -6px -6px 15px #ffffff;
    transition: var(--transition-smooth);
    position: relative;
    cursor: default;
    border-left: 4px solid transparent;
}

.capability-card:hover {
    transform: translateY(-4px) translateX(2px);
    box-shadow: 12px 12px 25px #cbd5e1, -12px -12px 25px #ffffff;
    border-left: 4px solid #0284c7;
}

.cap-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.cap-number {
    font-size: 1.3rem;
    font-weight: 800;
    color: #cbd5e1;
    transition: var(--transition-smooth);
}

.capability-card:hover .cap-number {
    color: #0284c7;
}

.cap-tag {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.cap-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #10141a;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.cap-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #4b5563;
    margin-bottom: 25px;
}

.cap-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-badge {
    background-color: #f1f5f9;
    border: 1px solid rgba(0, 0, 0, 0.03);
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.capability-card:hover .tech-badge {
    background-color: #ecf3fa;
    color: #0284c7;
    border-color: rgba(2, 132, 199, 0.15);
}

/* =============================================================
   Section 4: Cómo Trabajamos / Ruta (Horizontal Journey Track)
   ============================================================= */
.process-track-container {
    position: relative;
    background-color: var(--color-bg-dark);
    height: 400vh; /* Scroll room */
    z-index: 22;
}

.process-sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Background Video Styling */
.process-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.process-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: opacity 1s ease;
}

.process-revealed .process-bg-video {
    opacity: 0.35;
}

/* Linear top and bottom dark fades */
.process-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        #f8fafc 0%, 
        rgba(9, 12, 16, 0) 10%, 
        rgba(9, 12, 16, 0) 90%, 
        #090c10 100%
    );
    z-index: 2;
    transition: background 1.2s ease;
}

.process-revealed .process-video-overlay {
    background: linear-gradient(to bottom, 
        #f8fafc 0%, 
        rgba(9, 12, 16, 0.92) 15%, 
        rgba(9, 12, 16, 0.95) 85%, 
        #090c10 100%
    );
}

/* POV Zoom-in entrance wrapper from deep space */
.process-horizontal-track-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease, filter 1.5s ease;
    opacity: 0;
    transform: scale(0.15); /* POV zoom-in start */
    filter: blur(15px);
    pointer-events: none;
}

.process-revealed .process-horizontal-track-wrapper {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    pointer-events: auto;
}

/* Horizontal Sliding container */
.process-horizontal-track {
    display: flex;
    width: 450vw; /* 100vw + 250vw + 100vw */
    height: 100%;
    position: relative;
    z-index: 3;
    will-change: transform;
    transition: transform 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.process-slide {
    width: 100vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0 10vw;
    box-sizing: border-box;
}

/* Slide 1: Intro Glass Panel */
.process-intro-slide {
    justify-content: flex-start;
}

.intro-glass-panel {
    max-width: 600px;
    background: rgba(13, 17, 23, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 45px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
}

.process-intro-slide .sect-num {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-cyan);
    display: block;
    margin-bottom: 5px;
}

.process-intro-slide .sect-lbl {
    font-size: 0.85rem;
    color: #8b949e;
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 20px;
}

.process-main-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 25px;
    letter-spacing: -0.02em;
}

.process-main-desc {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #b0b8c0;
    margin-bottom: 35px;
}

.scroll-prompt {
    font-size: 0.8rem;
    color: var(--color-cyan);
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.prompt-arrow {
    animation: bounce-arrow 1.5s infinite;
}

@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

/* Slide 2: Horizontal Timeline Journey */
.process-timeline-slide {
    width: 250vw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5vw;
}

.horizontal-road-track {
    position: absolute;
    left: 5vw;
    right: 5vw;
    top: 50%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-50%);
    border-radius: 2px;
    z-index: 1;
}

.road-line-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--color-magenta), var(--color-cyan));
    border-radius: 2px;
    transition: width 0.1s linear;
}

.horizontal-steps-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 2;
}

.horiz-step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 320px;
    transform: translateY(-40px);
}

.waypoint-indicator {
    background-color: #0d1117;
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: #8b949e;
    font-size: 0.8rem;
    font-weight: 800;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    transition: var(--transition-smooth);
    position: relative;
    z-index: 3;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

.waypoint-indicator::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 1px dashed transparent;
    transition: var(--transition-smooth);
}

.waypoint-indicator.active {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
}

.waypoint-indicator.active::after {
    border-color: rgba(0, 240, 255, 0.4);
    animation: rotate-dashed 8s linear infinite;
}

.waypoint-indicator.visited {
    border-color: var(--color-magenta);
    color: var(--color-magenta);
    box-shadow: 0 0 15px rgba(255, 0, 85, 0.3);
}

@keyframes rotate-dashed {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.neumorphic-dark-card {
    background-color: rgba(13, 17, 23, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 8px 8px 25px rgba(0, 0, 0, 0.4), -8px -8px 25px rgba(255, 255, 255, 0.005);
    backdrop-filter: blur(10px);
    transition: var(--transition-smooth);
    width: 100%;
}

.route-step-card.active {
    transform: scale(1.03);
    border-color: rgba(0, 240, 255, 0.2);
    box-shadow: 12px 12px 35px rgba(0, 240, 255, 0.08), -12px -12px 35px rgba(255, 255, 255, 0.005);
}

.step-phase {
    font-size: 0.65rem;
    color: #8b949e;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 10px;
}

.route-step-card.active .step-phase {
    color: var(--color-cyan);
}

.step-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.step-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #8b949e;
    transition: var(--transition-smooth);
}

.route-step-card.active .step-desc {
    color: #e6edf3;
}

/* Slide 3: Outro Closure */
.process-outro-slide {
    justify-content: flex-end;
}

.outro-glass-panel {
    max-width: 500px;
    padding: 40px;
    text-align: left;
}

.outro-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.outro-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: #b0b8c0;
    margin-bottom: 30px;
}

.outro-cta-wrapper {
    display: inline-block;
}

.outro-cta-wrapper .btn-take-route {
    background-color: transparent;
    border: 1px solid rgba(0, 240, 255, 0.2);
    color: #ffffff;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 800;
    transition: var(--transition-tactile);
}

.outro-cta-wrapper .btn-take-route:hover {
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
    border-color: var(--color-cyan);
    color: var(--color-cyan);
}

/* =============================================================
   Section 5: Prueba / Confianza (Videos Showcase)
   ============================================================= */
.portfolio-section {
    position: relative;
    background-color: #f8fafc; /* Clear/bright background */
    padding: 120px 0;
    z-index: 21;
}

.portfolio-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.portfolio-header {
    margin-bottom: 70px;
    max-width: 800px;
}

.portfolio-title {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #0f172a; /* Slate-900 (Dark text on light background) */
    text-transform: uppercase;
    margin: 15px 0;
}

.portfolio-lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #475569; /* Slate-600 */
}

/* Asymmetric Masonry-style Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Base Neumorphic Light Card */
.neumorphic-light-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    box-shadow: 
        10px 10px 30px rgba(163, 177, 198, 0.3), 
        -10px -10px 30px rgba(255, 255, 255, 0.8);
    overflow: hidden;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
    cursor: pointer;
    height: 380px;
}

/* Hover effects */
.portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        15px 15px 40px rgba(163, 177, 198, 0.4), 
        -15px -15px 40px rgba(255, 255, 255, 0.9);
}

.portfolio-card.wide {
    grid-column: span 2;
    height: 420px;
}

/* Video inside Card */
.video-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #000;
}

.portfolio-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
}

.portfolio-card:hover .portfolio-preview-video {
    transform: scale(1.05);
    opacity: 1;
}

/* Overlay inside Card */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.92) 20%, rgba(15, 23, 42, 0) 100%);
    padding: 35px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 2;
    transition: background 0.4s ease;
}

.card-meta {
    max-width: 75%;
}

.proj-category {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--color-cyan);
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.proj-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0;
}

.btn-view-project {
    font-size: 0.75rem;
    font-weight: 800;
    color: #ffffff;
    border-bottom: 2px solid var(--color-cyan);
    padding-bottom: 4px;
    letter-spacing: 0.05em;
    transition: var(--transition-tactile);
}

.portfolio-card:hover .btn-view-project {
    color: var(--color-cyan);
    border-bottom-color: var(--color-magenta);
}

/* Lightbox Modal Styles */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 12, 16, 0.85);
    backdrop-filter: blur(12px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding: 20px;
    box-sizing: border-box;
}

.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-modal {
    background-color: #ffffff;
    width: 100%;
    max-width: 1100px;
    height: auto;
    max-height: 90vh;
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.lightbox-overlay.active .lightbox-modal {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 2.8rem;
    color: #ffffff;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, color 0.3s ease;
    z-index: 10001;
}

.lightbox-close:hover {
    transform: rotate(90deg);
    color: var(--color-cyan);
}

.lightbox-media {
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightbox-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 60vh;
}

.lightbox-info {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 90vh;
}

.lightbox-category {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0284c7; /* Light mode blue accent */
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 10px;
}

.lightbox-title {
    font-size: 2.4rem;
    font-weight: 900;
    color: #0f172a;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.lightbox-desc {
    font-size: 1rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 30px;
}

.lightbox-bullets-container {
    margin-bottom: 35px;
    border-top: 1px solid #f1f5f9;
    padding-top: 25px;
}

.bullets-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 15px;
}

.lightbox-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lightbox-bullets li {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #334155;
    position: relative;
    padding-left: 20px;
}

.lightbox-bullets li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-cyan);
    font-weight: bold;
}

.btn-close-lightbox {
    background-color: #0f172a;
    color: #ffffff;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition-tactile);
}

.btn-close-lightbox:hover {
    background-color: #334155;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.15);
}

/* =============================================================
   Section 6: CTA Final / Contacto (Dark Immersive Space Closure)
   ============================================================= */
.contact-section {
    position: relative;
    background-color: var(--color-bg-dark);
    color: #ffffff;
    padding: 120px 0 60px 0;
    z-index: 22;
    overflow: hidden;
}

.contact-space-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Pulsing coordinate sweep gradient */
.contact-radar-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.04) 0%, rgba(255, 0, 85, 0.02) 50%, transparent 70%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: radar-pulse-glow 10s infinite alternate;
}

@keyframes radar-pulse-glow {
    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

.contact-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    z-index: 2;
}

.contact-card {
    background-color: rgba(13, 17, 23, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 60px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    margin-bottom: 80px;
}

.contact-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.contact-main-title {
    font-size: 3.2rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 15px 0;
}

.contact-desc {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #b0b8c0;
}

/* Actions Grid Layout */
.contact-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

/* Massive Premium CTA Button */
.btn-take-route-large {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background-color: transparent;
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: #ffffff;
    padding: 24px 45px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: var(--transition-tactile);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.btn-take-route-large:hover {
    border-color: var(--color-cyan);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.25);
    color: var(--color-cyan);
    transform: translateY(-3px);
}

.wa-icon-svg {
    transition: transform 0.3s ease;
}

.btn-take-route-large:hover .wa-icon-svg {
    transform: rotate(15deg) scale(1.1);
}

/* Contact detail list */
.contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item .lbl {
    font-size: 0.75rem;
    font-weight: 700;
    color: #8b949e;
    letter-spacing: 0.1em;
}

.detail-item .val-link {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
    transition: var(--transition-tactile);
    display: inline-block;
}

.detail-item .val-link:hover {
    color: var(--color-magenta);
    transform: translateX(3px);
}

/* Digital Telemetry Footer */
.telemetry-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed rgba(255, 255, 255, 0.07);
    padding-top: 30px;
    color: #4b5563;
}

.footer-stats {
    display: flex;
    gap: 30px;
}

.stat-node {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-copyright {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 0.75rem;
    text-align: right;
}

/* -------------------------------------------------------------
   Responsive Breakpoints
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 30px;
    }
    
    .brand-panel {
        text-align: center;
        align-items: center;
    }
    
    .brand-strategic {
        margin: 0 auto;
    }
    
    .brand-provocative {
        border-left: none;
        border-bottom: 3px solid var(--color-magenta);
        padding-left: 0;
        padding-bottom: 12px;
        display: inline-block;
    }
    
    .dashboard-readouts {
        margin: 20px auto 0;
        width: 100%;
        max-width: 500px;
    }
    
    .radar-panel {
        width: 100%;
    }
    
    .modular-apps-track {
        height: auto !important;
        padding: 80px 20px !important;
    }
    
    .modular-sticky-wrapper {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .modular-net-container {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 0 10px !important;
    }
    
    .network-viewport {
        transform: scale(0.7) !important;
        margin: -80px auto !important;
    }
    
    /* Responsive Section 3 */
    .capabilities-container {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 0 20px !important;
    }
    
    .capabilities-sidebar {
        position: relative !important;
        top: 0 !important;
    }
    
    .sidebar-title {
        font-size: 2.1rem !important;
    }
    
    .sidebar-lead {
        margin-bottom: 25px !important;
    }
    
    /* Responsive Section 4 */
    .process-track-container {
        height: auto !important;
    }
    
    .process-sticky-wrapper {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .process-horizontal-track {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
    }
    
    .process-slide {
        width: 100% !important;
        height: auto !important;
        padding: 80px 20px !important;
    }
    
    .process-timeline-slide {
        width: 100% !important;
        padding: 0 20px !important;
    }
    
    .horizontal-road-track {
        display: none !important;
    }
    
    .horizontal-steps-container {
        flex-direction: column !important;
        gap: 40px !important;
    }
    
    .horiz-step-node {
        width: 100% !important;
        transform: none !important;
        align-items: flex-start !important;
    }
    
    .waypoint-indicator {
        margin-bottom: 15px !important;
    }
    
    
    /* Responsive Section 5 */
    .portfolio-grid {
        grid-template-columns: 1fr !important;
    }
    
    .portfolio-card.wide {
        height: 380px !important;
    }
    
    .lightbox-modal {
        grid-template-columns: 1fr !important;
        max-height: 95vh;
    }
    
    #lightbox-player {
        max-height: 40vh;
    }
    
    .lightbox-info {
        padding: 30px !important;
    }
    
    /* Responsive Section 6 */
    .contact-card {
        padding: 40px !important;
    }
    
    .contact-main-title {
        font-size: 2.3rem !important;
    }
    
    .contact-actions-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .contact-details {
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding-left: 0 !important;
        padding-top: 30px !important;
    }
    
    .telemetry-footer {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }
    
    .footer-copyright {
        align-items: center !important;
        text-align: center !important;
    }
}

@media (max-width: 600px) {
    .main-header {
        height: 70px;
    }
    
    .header-container {
        padding: 0 20px;
    }
    
    .main-logo-img {
        height: 32px;
    }
    
    .hero-container {
        padding: 30px 15px;
        gap: 30px;
    }
    
    .main-title {
        font-size: 2.2rem;
    }
    
    .dashboard-readouts {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        padding-top: 20px;
    }
    
    .readout-item {
        width: 100%;
        text-align: center;
        padding-bottom: 15px;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    }
    
    .readout-item:not(:last-child)::after {
        display: none;
    }
    
    /* Shrink the isometric panel slightly for smaller mobile devices */
    .radar-3d-perspective-box {
        max-width: 320px;
        height: 350px;
    }
    
    .radar-instrument-frame {
        width: 320px;
        height: 320px;
        padding: 5px;
        
        /* Disable CSS tracking values on mobile for better touch performance */
        transform: rotateX(54deg) rotateY(0deg) rotateZ(-34deg) !important;
    }
    
    /* Adjust counter rotation angles for mobile */
    .service-globo {
        transform: translate(-50%, -100%) rotateZ(34deg) rotateX(-54deg) scale(0.5);
    }
    
    .service-globo.detected, 
    .service-globo.locked {
        transform: translate(-50%, -100%) rotateZ(34deg) rotateX(-54deg) scale(0.85);
    }
    
    .globo-card {
        min-width: 100px;
        padding: 6px 10px;
    }
    
    .globo-title {
        font-size: 0.65rem;
    }
    
    .radar-ring.r4 {
        width: 92%;
        height: 92%;
    }
    
    .radar-marker {
        font-size: 0.55rem;
    }
    .marker-0 { top: 8px; }
    .marker-90 { right: 8px; }
    .marker-180 { bottom: 8px; }
    .marker-270 { left: 8px; }
    
    .flat-hud {
        margin-top: 15px;
        min-width: 280px;
        padding: 8px 16px;
        gap: 15px;
    }
    
    .map-panel {
        padding: 30px 20px;
    }
    
    .map-link {
        font-size: 1.4rem;
    }
    
    /* Mobile overrides for new Neumorphic Modular section */
    .modular-apps-track {
        height: auto !important;
        padding: 60px 15px !important;
    }
    
    .modular-sticky-wrapper {
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .modular-net-container {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        padding: 0 10px !important;
    }
    
    .pitch-card {
        padding: 24px !important;
        border-radius: 16px !important;
    }
    
    .pitch-title {
        font-size: 1.8rem !important;
    }
    
    .network-viewport {
        transform: scale(0.42) !important;
        margin: -180px auto !important;
    }
    
    /* Mobile Section 3 */
    .capabilities-section {
        padding: 60px 0 !important;
    }
    
    .capability-card {
        padding: 24px !important;
    }
    
    .cap-title {
        font-size: 1.3rem !important;
    }
    
    .sidebar-title {
        font-size: 1.7rem !important;
    }
    
    /* Mobile Section 4 */
    .process-slide {
        padding: 60px 15px !important;
    }
    
    .process-main-title {
        font-size: 2.2rem !important;
    }
    
    .neumorphic-dark-card {
        padding: 20px !important;
    }
    
    .step-title {
        font-size: 1.2rem !important;
    }
    
    .outro-title {
        font-size: 1.8rem !important;
    }
    
    /* Mobile Section 5 */
    .portfolio-section {
        padding: 60px 0 !important;
    }
    
    .portfolio-title {
        font-size: 1.8rem !important;
    }
    
    .portfolio-card {
        height: 300px !important;
    }
    
    .portfolio-card.wide {
        height: 300px !important;
    }
    
    .proj-title {
        font-size: 1.4rem !important;
    }
    
    .lightbox-title {
        font-size: 1.6rem !important;
    }
    
    .lightbox-info {
        padding: 20px !important;
    }
    
    /* Mobile Section 6 */
    .contact-section {
        padding: 70px 0 40px 0 !important;
    }
    
    .contact-card {
        padding: 30px 20px !important;
    }
    
    .contact-main-title {
        font-size: 1.8rem !important;
    }
    
    .btn-take-route-large {
        padding: 18px 25px !important;
        font-size: 1rem !important;
    }
    
    .detail-item .val-link {
        font-size: 1.1rem !important;
    }
    
    .footer-stats {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
    }
}