/* Camila Business Suite - Stylesheet */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@300;400;500;600;700&display=swap');

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

:root {
    /* Colors */
    --navy-deep: #030f26;
    --navy-card: #0A1C3A;
    --navy-light: #0d2247;
    --slate-card: #5C6878;
    --white: #ffffff;
    --ice-blue: #F4F7FA;
    --gray-blue: #E2E8F0;
    --text-dark-primary: #002C54;
    --text-dark-secondary: #4A607A;
    --text-light-primary: #ffffff;
    --text-light-secondary: #A2B2C3;
    --accent: #00BAAE;
    --accent-hover: #00E5D7;
    --accent-glow: rgba(0, 186, 174, 0.3);
    
    /* Fonts */
    --font-title: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background-color: var(--white);
    color: var(--text-dark-secondary);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Typography Helpers */
h1, h2, h3, h4 {
    font-family: var(--font-title);
    font-weight: 600;
}

p {
    font-size: 1rem;
}

/* Buttons & CTAs */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.8rem;
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-decoration: none;
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--accent);
    color: var(--white);
    border: 1px solid var(--accent);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 0 20px var(--accent-glow);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-secondary:hover {
    border-color: var(--white);
    background-color: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.btn-dark-outline {
    background-color: transparent;
    color: var(--text-dark-primary);
    border: 1px solid var(--text-dark-secondary);
}

.btn-dark-outline:hover {
    background-color: rgba(0, 44, 84, 0.05);
    border-color: var(--text-dark-primary);
    transform: translateY(-2px);
}

/* Sections General */
section {
    padding: 7rem 2rem;
    position: relative;
}

.section-dark {
    background-color: var(--navy-deep);
    color: var(--text-light-secondary);
}

.section-light {
    background-color: var(--white);
    color: var(--text-dark-secondary);
}

.section-alt {
    background-color: var(--ice-blue);
}

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

.section-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 4rem auto;
}

.section-header h2 {
    font-size: 2.25rem;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.section-dark .section-header h2 {
    color: var(--text-light-primary);
}

.section-light .section-header h2 {
    color: var(--text-dark-primary);
}

.section-header p {
    font-size: 1.1rem;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background-color: rgba(3, 15, 38, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-smooth);
}

.navbar.scrolled {
    background-color: rgba(3, 15, 38, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.navbar .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.navbar .logo-container {
    margin-right: 3rem;
}

.navbar .logo-container {
    margin-right: 3rem;
}

.navbar .logo-container img {
    height: 40px;
    width: auto;
    display: block;
}

.navbar .nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 1.25rem;
    margin-right: auto; /* Push the menu to the left to occupy center space but leave margin */
}

.navbar .nav-link {
    color: var(--text-light-secondary);
    text-decoration: none;
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 500;
    transition: var(--transition-smooth);
    position: relative;
    padding: 0.5rem 0;
    white-space: nowrap; /* Avoid wrapping in desktop viewports */
}

.navbar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: var(--transition-smooth);
}

.navbar .nav-link:hover {
    color: var(--white);
}

.navbar .nav-link:hover::after {
    width: 100%;
}

.navbar .nav-cta .btn {
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
    border-radius: 4px;
    line-height: 1.2;
}

.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.burger-menu span {
    width: 100%;
    height: 2px;
    background-color: var(--white);
    transition: var(--transition-smooth);
}

/* Hero Section */
.hero {
    min-height: calc(100vh - 75px);
    padding-top: 80px;
    padding-bottom: 2rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.hero-bg-network {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
}

.hero .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-content h1 {
    font-size: 3.5rem;
    line-height: 1.15;
    color: var(--white);
    letter-spacing: -0.5px;
}

.hero-content p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-light-secondary);
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ecosystem Visualization - Hero Right Block */
.ecosystem-visualization {
    width: 100%;
    max-width: 610px; /* Aumentado de 580px para dar más aire y presencia al ecosistema */
    background: linear-gradient(135deg, rgba(13, 31, 64, 0.96) 0%, rgba(8, 20, 43, 0.99) 100%); /* Navy distinguible y premium */
    border: 1.5px solid rgba(0, 186, 174, 0.22); /* Borde turquesa translúcido más definido */
    border-radius: 16px;
    padding: 2.75rem 2rem; /* Mantener el aire lateral y superior interno */
    box-shadow: 0 35px 80px rgba(0, 0, 0, 0.8), 0 0 45px rgba(0, 186, 174, 0.12); /* Sombra elegante con sutil resplandor */
    position: relative;
    z-index: 3;
    animation: floating 10s ease-in-out infinite alternate; /* Animación más lenta y sutil */
    margin: 0 auto;
    overflow: hidden; /* Recorta el spotlight radial */
}

.ecosystem-visualization::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px; /* Incrementado de 460px para el nuevo rango de resplandor */
    height: 500px;
    background: radial-gradient(circle, rgba(0, 186, 174, 0.16) 0%, rgba(3, 14, 38, 0) 75%); /* Spotlight más amplio e intenso */
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(25px);
}

@keyframes floating {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-6px); } /* Recorrido vertical suavizado y casi imperceptible */
}

.ecosystem-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-title);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--white);
    background: rgba(0, 186, 174, 0.12);
    border: 1px solid rgba(0, 186, 174, 0.4);
    padding: 0.5rem 1.25rem;
    border-radius: 30px;
    letter-spacing: 1.2px;
    margin: 0 auto 1.5rem auto; /* Centrado horizontal por defecto */
    width: max-content;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.ecosystem-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 450px; /* Incrementado de 420px (escala adicional del ~7%) */
    margin: 4.75rem auto 0 auto; /* Aumentado de 4.25rem para mayor respiración vertical */
}

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

/* Anillo externo SVG animado */
.network-svg .ring-path-outer {
    fill: none;
    stroke: rgba(0, 186, 174, 0.75); /* Más turquesa, más brillante */
    stroke-width: 2.6; /* Más fuerte */
    stroke-dasharray: 8, 8;
    animation: flow-dash-outer 8s linear infinite;
}

/* Anillo interno SVG animado */
.network-svg .ring-path-inner {
    fill: none;
    stroke: rgba(255, 255, 255, 0.35); /* Más visible */
    stroke-width: 1.5;
    stroke-dasharray: 5, 5;
    animation: flow-dash-inner 6s linear infinite;
}

@keyframes flow-dash-outer {
    to {
        stroke-dashoffset: -32;
    }
}

@keyframes flow-dash-inner {
    to {
        stroke-dashoffset: -20;
    }
}

/* Glow e iluminación de fondo */
.ecosystem-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84%; /* 2 * 42% */
    height: 84%;
    border-radius: 50%;
    border: 3px solid rgba(0, 186, 174, 0.65); /* Más continuo, grueso y visible */
    box-shadow: 0 0 45px rgba(0, 186, 174, 0.75), inset 0 0 25px rgba(0, 186, 174, 0.45); /* Glow elegante reforzado */
    pointer-events: none;
    z-index: 2;
}

.ecosystem-inner-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%; /* 2 * 25% */
    height: 50%;
    border-radius: 50%;
    border: 1.2px solid rgba(255, 255, 255, 0.25); /* Más visible */
    pointer-events: none;
    z-index: 2;
}

/* Central Hub Node */
.hub-node {
    position: absolute;
    top: 50%; /* Centrado absoluto */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 165px; /* Incrementado de 154px para proporcionalidad con la escala de 450px */
    height: 165px;
    background: radial-gradient(circle, #0e2752 0%, #020a17 100%);
    border: 3.5px solid var(--accent); /* Más grueso */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 0 55px rgba(0, 186, 174, 0.85), inset 0 0 30px rgba(0, 186, 174, 0.45); /* Glow incrementado */
    transition: var(--transition-smooth);
    cursor: pointer;
    animation: hub-pulse 4s ease-in-out infinite alternate;
}

@keyframes hub-pulse {
    0% {
        box-shadow: 0 0 35px rgba(0, 186, 174, 0.55), inset 0 0 15px rgba(0, 186, 174, 0.25);
    }
    100% {
        box-shadow: 0 0 75px rgba(0, 186, 174, 0.98), inset 0 0 40px rgba(0, 186, 174, 0.6);
    }
}

.hub-node:hover {
    transform: translate(-50%, -50%) scale(1.05);
    border-color: var(--accent-hover);
    box-shadow: 0 0 80px rgba(0, 229, 215, 0.98), inset 0 0 40px rgba(0, 229, 215, 0.6);
}

.hub-brand {
    font-size: 1.7rem; /* Incrementado de 1.6rem para proporcionalidad */
    font-family: var(--font-title);
    color: var(--white);
    font-weight: 800; /* Más grueso */
    letter-spacing: 0.5px;
    line-height: 1.1;
}

.hub-suite {
    font-size: 0.65rem; /* Incrementado de 0.6rem para proporcionalidad */
    font-family: var(--font-body);
    color: var(--accent-hover);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
    margin-top: 0.25rem;
}

/* Base style for all network nodes */
.network-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* Layer 1: Core Operativo (Nodos Internos Blancos) */
.node-inner {
    width: 47px; /* Incrementado de 44px para proporcionalidad */
    height: 47px;
    background: #ffffff; /* Blanco puro */
    border: 1px solid var(--gray-blue);
    border-radius: 50%;
}

.node-inner:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
}

.node-inner .node-icon {
    color: #030f26; /* Navy profundo en el icono */
    font-size: 1.12rem; /* Incrementado de 1.05rem */
    transition: var(--transition-smooth);
}

/* Layer 2: Red de Control (Nodos Externos Cian) */
.node-outer {
    width: 51px; /* Incrementado de 48px para proporcionalidad */
    height: 51px;
    background: #0A1C3A; /* Fondo oscuro premium */
    border: 1.5px solid var(--accent); /* Anillo cian */
    border-radius: 50%;
}

.node-outer:hover {
    border-color: var(--accent-hover);
    box-shadow: 0 0 20px rgba(0, 186, 174, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4);
    transform: translate(-50%, -50%) scale(1.1);
}

.node-outer .node-icon {
    color: var(--accent); /* Icono cian */
    font-size: 1.22rem; /* Incrementado de 1.15rem */
    transition: var(--transition-smooth);
}

.node-outer:hover .node-icon {
    color: var(--accent-hover);
}

/* Labels general setup */
.network-node .node-label {
    position: absolute;
    bottom: -23px; /* Incrementado de -21px por el mayor diámetro de los nodos */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.78rem; /* Incrementado de 0.75rem para mayor legibilidad en responsive */
    font-family: var(--font-body);
    color: #e2e8f0;
    font-weight: 600;
    opacity: 0.95;
    letter-spacing: 0.3px;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.network-node:hover .node-label {
    color: var(--white);
    opacity: 1;
}

/* Labels specifically for inner nodes (Core Operativo) */
.node-inner .node-label {
    font-size: 0.68rem;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Custom label positioning for perfect spacing and no overlaps */
.node-especiales-outer .node-label {
    bottom: auto;
    top: -25px; /* Ajustado de -23px por la escala de 51px */
}

.node-sri-outer .node-label {
    bottom: auto;
    top: 50%;
    left: calc(100% + 10px); /* Ajustado de +9px */
    right: auto;
    transform: translateY(-50%);
    white-space: nowrap;
    text-align: left;
}

.node-seguridad .node-label {
    bottom: auto;
    top: 50%;
    left: calc(100% + 10px); /* Ajustado de +9px */
    right: auto;
    transform: translateY(-50%);
    white-space: nowrap;
    text-align: left;
}

.node-control-gerencial .node-label {
    bottom: -25px; /* Ajustado de -23px */
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
}

.node-logistica-outer .node-label {
    bottom: auto;
    top: calc(100% + 10px); /* Ajustado de +9px */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.node-inteligencia .node-label {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 10px); /* Ajustado de +9px */
    transform: translateY(-50%);
    white-space: normal;
    text-align: right;
    width: 95px; /* Ajustado de 90px */
    line-height: 1.25;
}

.node-inventarios-inner .node-label {
    bottom: auto;
    top: -22px; /* Ajustado de -20px */
}

.node-talento-inner .node-label {
    bottom: calc(100% + 10px); /* Ajustado de +9px */
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 85px; /* Ajustado de 80px */
    white-space: normal;
    line-height: 1.2;
}

/* Complementary Chips below network container */
.ecosystem-chips {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Incrementado de 0.85rem para mejor respiración */
    margin-top: 2.75rem; /* Incrementado de 2.25rem para dar más aire inferior */
    flex-wrap: wrap;
}

.chip-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-family: var(--font-body);
    font-weight: 500;
    transition: var(--transition-smooth);
}

.chip-item i {
    color: var(--accent);
    font-size: 0.75rem;
}

.chip-item:hover {
    background: rgba(0, 186, 174, 0.08);
    border-color: rgba(0, 186, 174, 0.25);
    color: var(--white);
}

/* ==========================================================================
   Ecosystem Visual Variants (Dark, Gray, White)
   ========================================================================== */

/* 1. VARIANT: Dark (Default style mapped explicitly to class) */
.hero-ecosystem--dark {
    /* Uses default styles already defined in style.css */
}

/* 2. VARIANT: Gray (Fondo gris claro / gris azulado premium) */
.hero-ecosystem--gray.ecosystem-visualization {
    background: linear-gradient(135deg, #E4E9EE 0%, #D8DFE5 100%); /* Gris claro premium suave y limpio */
    border: 1.5px solid rgba(0, 44, 84, 0.08);
    box-shadow: 0 30px 60px rgba(0, 44, 84, 0.08), 0 0 40px rgba(0, 186, 174, 0.04);
}

.hero-ecosystem--gray.ecosystem-visualization::before {
    background: radial-gradient(circle, rgba(0, 186, 174, 0.08) 0%, rgba(237, 242, 246, 0) 75%);
}

/* Badge superior grande y centrado */
.hero-ecosystem--gray .ecosystem-badge {
    color: #ffffff;
    background: #0A1C3A;
    border: 1px solid rgba(0, 186, 174, 0.25);
    padding: 0.45rem 1.4rem; /* Reducido para hacerlo más fino y limpio */
    font-size: 0.78rem; /* Reducido para refinamiento */
    letter-spacing: 1.5px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: max-content;
    position: absolute; /* Posicionamiento absoluto para centrado garantizado */
    top: 0.9rem; /* Mover más arriba para darle más aire respecto al diagrama */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.hero-ecosystem--gray .ecosystem-badge i {
    color: var(--accent);
    font-size: 0.95rem;
}

/* Núcleo central con fondo oscuro */
.hero-ecosystem--gray .hub-node {
    background: radial-gradient(circle, #0e2752 0%, #020a17 100%);
    border: 3.5px solid var(--accent);
    box-shadow: 0 0 35px rgba(0, 186, 174, 0.55), inset 0 0 15px rgba(0, 186, 174, 0.25);
    animation: hub-pulse 4s ease-in-out infinite alternate;
}

.hero-ecosystem--gray .hub-node:hover {
    border-color: var(--accent-hover);
    box-shadow: 0 0 55px rgba(0, 229, 215, 0.75), inset 0 0 25px rgba(0, 229, 215, 0.4);
}

.hero-ecosystem--gray .hub-brand {
    color: var(--white);
}

.hero-ecosystem--gray .hub-suite {
    color: var(--accent-hover);
}

/* Nodos internos oscuros (core operativo) */
.hero-ecosystem--gray .node-inner {
    background: #0A1C3A;
    border: 1.5px solid var(--accent);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.hero-ecosystem--gray .node-inner:hover {
    box-shadow: 0 0 15px rgba(0, 186, 174, 0.4), 0 4px 12px rgba(0, 44, 84, 0.18);
    border-color: var(--accent-hover);
}

.hero-ecosystem--gray .node-inner .node-icon {
    color: #ffffff;
}

/* Nodos externos oscuros */
.hero-ecosystem--gray .node-outer {
    background: #0A1C3A;
    border: 1.5px solid var(--accent);
    box-shadow: 0 4px 10px rgba(0, 44, 84, 0.1);
}

.hero-ecosystem--gray .node-outer:hover {
    border-color: var(--accent-hover);
    box-shadow: 0 0 15px rgba(0, 186, 174, 0.4), 0 6px 12px rgba(0, 44, 84, 0.15);
}

.hero-ecosystem--gray .node-outer .node-icon {
    color: var(--accent);
}

.hero-ecosystem--gray .node-outer:hover .node-icon {
    color: var(--accent-hover);
}

/* Etiquetas limpias sin fondo sólido (eliminamos el estilo cápsula) */
.hero-ecosystem--gray .network-node .node-label {
    position: absolute;
    white-space: nowrap;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.1px;
    pointer-events: none;
    transition: var(--transition-smooth);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    /* Halo blanco sutil para dar contraste e independizar del fondo sin emborronar (mejorado) */
    text-shadow: 0 1px 2px #ffffff, 0 0 4px #ffffff;
    z-index: 12;
    
    /* Posición por defecto (abajo del nodo) */
    bottom: auto;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}

/* Diferenciar ligeramente etiquetas internas y externas - Modificado a negro para máxima legibilidad */
.hero-ecosystem--gray .node-inner .node-label {
    color: #000000; /* Negro para máximo contraste */
    font-size: 0.74rem;
    font-weight: 700; /* Aumentado a bold para mejor presencia */
}

.hero-ecosystem--gray .node-outer .node-label {
    color: #000000; /* Negro para máximo contraste */
    font-size: 0.78rem;
    font-weight: 700; /* Bold */
}

/* Resaltado interactivo simple de color en hover */
.hero-ecosystem--gray .network-node:hover .node-label {
    color: var(--accent); /* Turquesa acento */
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Líneas y Anillos */
.hero-ecosystem--gray .ring-path-inner {
    stroke: rgba(74, 96, 122, 0.35); /* Gris azulado medio / neutral técnico */
}

.hero-ecosystem--gray .ring-path-outer {
    stroke: rgba(0, 186, 174, 0.85); /* Turquesa premium limpio y claro */
}

.hero-ecosystem--gray .ecosystem-glow {
    border: 2.5px solid rgba(0, 186, 174, 0.55);
    box-shadow: 0 0 20px rgba(0, 186, 174, 0.15), inset 0 0 10px rgba(0, 186, 174, 0.1);
}

.hero-ecosystem--gray .ecosystem-inner-glow {
    border: 1.2px solid rgba(74, 96, 122, 0.25);
}

/* Chips inferiores oscuros (navy) */
.hero-ecosystem--gray .chip-item {
    background: #0A1C3A;
    border: 1px solid rgba(0, 186, 174, 0.25);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.hero-ecosystem--gray .chip-item i {
    color: var(--accent);
}

.hero-ecosystem--gray .chip-item:hover {
    background: #0d2247;
    border-color: var(--accent-hover);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 186, 174, 0.2);
}

/* Posicionamiento radial concéntrico hacia afuera de etiquetas en el círculo interno (evita solapamiento con el hub) */
.hero-ecosystem--gray .node-compras .node-label {
    bottom: calc(100% + 6px);
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.hero-ecosystem--gray .node-ventas .node-label {
    bottom: calc(100% + 6px); /* Colocado arriba para evitar colisión con SRI */
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.hero-ecosystem--gray .node-finanzas .node-label {
    top: calc(100% + 6px); /* Colocado abajo para evitar colisión con Seguridad */
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.hero-ecosystem--gray .node-inventarios-inner .node-label {
    bottom: auto;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

/* Talento Humano se desplaza hacia la izquierda para evitar colisión con Logística */
.hero-ecosystem--gray .node-talento-inner .node-label {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 8px); /* Desplazado a la izquierda */
    transform: translateY(-50%);
    text-align: right;
    width: 75px;
    white-space: normal;
    line-height: 1.2;
}

.hero-ecosystem--gray .node-produccion .node-label {
    bottom: calc(100% + 8px); /* Colocado arriba para evitar colisión con Inteligencia */
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

/* Posicionamiento concéntrico de las etiquetas externas (evita salirse del contenedor y pegarse a los bordes) */
.hero-ecosystem--gray .node-especiales-outer .node-label {
    bottom: calc(100% + 8px);
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.hero-ecosystem--gray .node-sri-outer .node-label {
    bottom: auto;
    top: calc(100% + 8px); /* Posicionado abajo de su ícono */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.hero-ecosystem--gray .node-seguridad .node-label {
    bottom: auto;
    top: calc(100% + 8px); /* Posicionado abajo de su ícono */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.hero-ecosystem--gray .node-control-gerencial .node-label {
    bottom: auto;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

/* Logística se mueve por debajo de su nodo camión para evitar colisión con Talento Humano */
.hero-ecosystem--gray .node-logistica-outer .node-label {
    bottom: auto;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
}

.hero-ecosystem--gray .node-inteligencia .node-label {
    bottom: auto;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: normal;
    text-align: center;
    width: 95px;
    line-height: 1.2;
}


/* 3. VARIANT: White (Fondo blanco premium) */
.hero-ecosystem--white.ecosystem-visualization {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1.5px solid rgba(0, 186, 174, 0.22);
    box-shadow: 0 30px 65px rgba(0, 44, 84, 0.14), 0 0 35px rgba(0, 186, 174, 0.08);
}

.hero-ecosystem--white.ecosystem-visualization::before {
    background: radial-gradient(circle, rgba(0, 186, 174, 0.08) 0%, rgba(255, 255, 255, 0) 75%);
}

.hero-ecosystem--white .ecosystem-badge {
    color: var(--text-dark-primary);
    background: rgba(0, 186, 174, 0.06);
    border: 1px solid rgba(0, 186, 174, 0.25);
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    letter-spacing: 1.8px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 44, 84, 0.05);
}

.hero-ecosystem--white .hub-node {
    background: radial-gradient(circle, #ffffff 0%, #f8fafc 100%);
    border: 3.5px solid var(--accent);
    box-shadow: 0 0 35px rgba(0, 186, 174, 0.45), inset 0 0 15px rgba(0, 186, 174, 0.2);
    animation: hub-pulse-light 4s ease-in-out infinite alternate;
}

.hero-ecosystem--white .hub-node:hover {
    box-shadow: 0 0 55px rgba(0, 229, 215, 0.65), inset 0 0 25px rgba(0, 229, 215, 0.35);
}

.hero-ecosystem--white .hub-brand {
    color: var(--text-dark-primary);
}

.hero-ecosystem--white .hub-suite {
    color: var(--accent);
}

.hero-ecosystem--white .node-inner {
    box-shadow: 0 4px 12px rgba(0, 44, 84, 0.08);
    border: 1.5px solid var(--gray-blue);
}

.hero-ecosystem--white .node-inner:hover {
    box-shadow: 0 0 15px rgba(0, 186, 174, 0.25), 0 4px 12px rgba(0, 44, 84, 0.12);
    border-color: var(--accent);
}

.hero-ecosystem--white .node-inner .node-label {
    color: var(--text-dark-primary);
    text-shadow: none;
}

.hero-ecosystem--white .network-node .node-label {
    color: var(--text-dark-secondary);
}

.hero-ecosystem--white .network-node:hover .node-label {
    color: var(--text-dark-primary);
}

.hero-ecosystem--white .ring-path-inner {
    stroke: rgba(0, 44, 84, 0.15);
}

.hero-ecosystem--white .ring-path-outer {
    stroke: rgba(0, 186, 174, 0.65);
}

.hero-ecosystem--white .ecosystem-glow {
    border: 3px solid rgba(0, 186, 174, 0.45);
    box-shadow: 0 0 25px rgba(0, 186, 174, 0.2), inset 0 0 15px rgba(0, 186, 174, 0.1);
}

.hero-ecosystem--white .ecosystem-inner-glow {
    border: 1.2px solid rgba(0, 44, 84, 0.12);
}

.hero-ecosystem--white .chip-item {
    background: rgba(0, 44, 84, 0.03);
    border: 1px solid rgba(0, 44, 84, 0.08);
    color: var(--text-dark-secondary);
}

.hero-ecosystem--white .chip-item:hover {
    background: rgba(0, 186, 174, 0.08);
    border-color: rgba(0, 186, 174, 0.25);
    color: var(--text-dark-primary);
}


/* Keyframes for Light Pulse Animation */
@keyframes hub-pulse-light {
    0% {
        box-shadow: 0 0 25px rgba(0, 186, 174, 0.3), inset 0 0 10px rgba(0, 186, 174, 0.15);
    }
    100% {
        box-shadow: 0 0 45px rgba(0, 186, 174, 0.55), inset 0 0 20px rgba(0, 186, 174, 0.3);
    }
}

/* Problem Section */
.section-problem {
    background: linear-gradient(180deg, #030f26 0%, #071733 90px, #F4F7FA 220px, #F4F7FA 100%);
    padding-top: 11rem;
    padding-bottom: 8.5rem;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-title);
    font-size: 0.9rem; /* Increased size for strong presence */
    font-weight: 700;
    letter-spacing: 2px; /* Premium letter spacing */
    text-transform: uppercase;
    color: var(--text-dark-primary); /* Deep dark navy for absolute contrast and legibility */
    background-color: rgba(0, 160, 176, 0.15); /* Saturated background for better reading */
    border: 1.5px solid var(--accent); /* Solid turquesa/cyan border for visual anchor */
    border-radius: 30px; /* Capsule shape */
    padding: 0.5rem 1.4rem; /* More generous pill size */
    margin-bottom: 1.8rem; /* More space below */
    box-shadow: 0 4px 12px rgba(0, 160, 176, 0.06);
}

.section-problem .section-header h2 {
    font-size: 2.85rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-dark-primary);
    max-width: 900px;
    margin: 0 auto 1.8rem auto;
    letter-spacing: -0.5px;
}

.section-problem .section-header h2 .highlight {
    font-weight: 500; /* Bolder highlight for visual strength */
    color: var(--accent);
    display: block;
    margin-top: 0.4rem;
    font-size: 2.95rem; /* Slightly larger highlight text */
}

.section-problem .section-header p {
    font-size: 1.15rem; /* Slightly larger size for premium presence */
    line-height: 1.7; /* Better interlining/breathing */
    color: var(--text-dark-secondary);
    max-width: 780px; /* Width control */
    margin: 0 auto;
    text-align: center;
}

.section-problem .section-header .paragraph-punchline {
    display: block; /* Separate in a final line for high impact */
    margin-top: 1rem; /* Margins and breathing */
    font-weight: 700; /* Strong bold weight */
    color: var(--text-dark-primary); /* High-contrast navy color */
    font-size: 1.25rem; /* Visual strength */
    letter-spacing: -0.2px;
}

/* Bloque de Video del Problema (Sección 2) */
.problem-video-block {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* 40% text / 60% video layout */
    gap: 3.5rem; /* Expanded gap for premium breathing space */
    align-items: center;
    background-color: var(--slate-card); /* Gray-blue premium background */
    border: 1px solid rgba(0, 160, 176, 0.25); /* More defined turquesa border for light background */
    border-radius: 16px;
    padding: 3rem 4rem; /* Generous padding for high impact */
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18); /* Soft elegant shadow for light section background */
    margin: 1.5rem auto 4.5rem auto; /* Generous margins to separate block from header and comparison */
    max-width: 1100px; /* Wider presence on desktop */
    position: relative;
    overflow: hidden;
}

/* Glow decorative background */
.problem-video-block::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 160, 176, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.problem-video-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem; /* Better vertical separation between components */
}

.problem-video-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-title);
    font-size: 0.75rem; /* Enhanced badge size */
    font-weight: 700;
    color: #ffffff; /* White text for excellent contrast on slate */
    background-color: rgba(3, 15, 38, 0.3); /* Dark translucent background for anchor */
    border: 1px solid rgba(0, 160, 176, 0.45); /* Defined cian border */
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    letter-spacing: 1px;
}

.problem-video-info h3 {
    font-size: 2rem; /* Clearly dominant headline */
    color: var(--white);
    line-height: 1.25;
    font-weight: 700;
}

.problem-video-info p {
    font-size: 0.95rem; /* Clean readable description size */
    color: #f1f5f9; /* Bright gray-blue for maximum contrast on slate background */
    line-height: 1.6;
    margin-bottom: 0.4rem; /* Additional breathing before the button */
}

.problem-video-thumbnail-container {
    position: relative;
    z-index: 2;
    cursor: pointer;
    width: 100%;
}

.problem-video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: rgba(3, 15, 38, 0.6);
    border: 1px solid rgba(0, 160, 176, 0.2);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: var(--transition-smooth);
}

.problem-video-thumbnail-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
    transition: var(--transition-smooth);
}

.problem-video-overlay-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 15, 38, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.problem-play-icon-glow {
    width: 64px; /* Enhanced play icon size for a larger video wrapper */
    height: 64px;
    background-color: var(--accent);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    padding-left: 5px; /* Center adjustment */
    box-shadow: 0 0 20px rgba(0, 160, 176, 0.5);
    transition: var(--transition-smooth);
}

/* Hover effects */
.problem-video-thumbnail-container:hover .problem-video-thumbnail-wrapper {
    transform: translateY(-5px);
    border-color: var(--accent-hover);
    box-shadow: 0 20px 45px rgba(0, 160, 176, 0.3);
}

.problem-video-thumbnail-container:hover .problem-video-thumbnail-wrapper video {
    opacity: 0.9;
    transform: scale(1.03);
}

.problem-video-thumbnail-container:hover .problem-video-overlay-play {
    background: rgba(3, 15, 38, 0.2);
}

.problem-video-thumbnail-container:hover .problem-play-icon-glow {
    background-color: var(--accent-hover);
    transform: scale(1.08);
    box-shadow: 0 0 35px rgba(0, 194, 212, 0.75);
}

.problem-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    margin-top: 4rem;
    align-items: stretch;
}

.comparison-box {
    border-radius: 20px; /* More modern rounded corners */
    padding: 4.5rem; /* Increased padding for premium spatial breathing */
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    position: relative;
}

.comparison-box.chaos {
    background-color: #F1F5F9; /* Cooler and darker gray-blue */
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-top: 4px solid #94A3B8; /* Stronger top border, yet muted */
    opacity: 0.95;
}

.comparison-box.solution {
    background-color: var(--navy-card);
    border: 1px solid rgba(0, 186, 174, 0.25);
    border-top: 5px solid var(--accent); /* More prominent turquesa border */
    box-shadow: 0 25px 55px rgba(0, 186, 174, 0.15); /* Deeper, premium shadow */
    transform: scale(1.03); /* Larger scale to visually dominate */
    z-index: 5;
}

.comparison-box.solution:hover {
    transform: scale(1.045) translateY(-3px);
    box-shadow: 0 30px 65px rgba(0, 186, 174, 0.25);
}

.comparison-box.chaos:hover {
    transform: translateY(-2px);
}

.comparison-box h3 {
    font-size: 1.8rem; /* Larger card title */
    font-weight: 700;
}

.comparison-box.chaos h3 {
    color: #475569;
}

.comparison-box.solution h3 {
    color: var(--white);
}

.comparison-flow {
    display: flex;
    flex-direction: column;
    gap: 0.8rem; /* Slightly more gap */
    padding: 0.5rem 0;
}

.flow-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.6rem; /* Enlarge visual boxes */
    border-radius: 10px;
    font-size: 1.05rem; /* Larger and more readable text */
    font-weight: 600; /* Bolder items */
}

.chaos .flow-item {
    background-color: #E2E8F0;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-left: 5px solid #94A3B8;
    color: #475569;
}

.solution .flow-item {
    background-color: var(--navy-light);
    border: 1px solid rgba(0, 186, 174, 0.15);
    border-left: 5px solid var(--accent);
    color: var(--white);
    box-shadow: 0 6px 16px rgba(3, 15, 38, 0.2);
}

.flow-connector {
    display: flex;
    align-items: center;
    font-size: 0.8rem; /* Larger connector label font */
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0.5rem 0;
    padding: 0.4rem 0 0.4rem 2rem;
}

.chaos .flow-connector {
    color: #64748B;
    border-left: 3px dashed #94A3B8; /* Bolder dashed connection line */
    margin-left: 1.5rem;
}

.solution .flow-connector {
    color: var(--accent);
    border-left: 3px solid var(--accent); /* Bolder solid connection line */
    margin-left: 1.5rem;
}

.flow-connector span {
    border-radius: 20px;
    padding: 0.4rem 1.1rem; /* More generous pill margins */
    line-height: 1;
}

.chaos .flow-connector span {
    background-color: #CBD5E1; /* Muted but visible */
    color: #334155;
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.solution .flow-connector span {
    background-color: rgba(0, 186, 174, 0.12);
    color: var(--accent-hover);
    border: 1px solid rgba(0, 186, 174, 0.3);
}

/* Section: Camila se adapta a tu operación */
.section-alt {
    background: radial-gradient(circle at 15% 15%, #081a3d 0%, var(--navy-deep) 100%);
    position: relative;
    padding: 7rem 2rem; /* Restaurado padding premium */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.section-alt .section-header {
    margin-bottom: 3.5rem; /* Espaciado premium con el configurador */
}

.section-alt .section-header h2 {
    color: var(--white); /* Título en blanco sobre fondo oscuro */
}

.section-alt .section-header p {
    max-width: 720px;
    margin: 0 auto 0.2rem auto;
    line-height: 1.7;
    color: var(--text-light-secondary); /* Párrafo en gris claro */
}

.section-alt .eyebrow {
    color: #ffffff;
    background-color: rgba(0, 160, 176, 0.2);
    border-color: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(0, 160, 176, 0.15);
}

/* Subtle background mesh */
.section-alt::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(0, 160, 176, 0.02) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: 0.7;
    z-index: 1;
    pointer-events: none;
}

.adaptability-panel {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr; /* Increased left column width to balance weight */
    gap: 1.5rem; /* Reduced gap from 2rem to bring panels closer */
    align-items: start; /* Aligns top selector with the header of the display card */
    position: relative;
    z-index: 2;
}

.adaptability-control {
    display: flex;
    flex-direction: column;
    gap: 1.35rem; /* Increased gap slightly to vertically balance the height with the right panel */
}.adaptability-btn {
    background-color: rgba(255, 255, 255, 0.03); /* Soft translucent background for dark theme */
    border: 1px solid rgba(255, 255, 255, 0.08); /* White border for subtle shape definition */
    border-left: 4px solid transparent; /* Prevents shifting when active border is applied */
    border-radius: 12px;
    padding: 1rem 1.4rem; /* More compact padding for 6 scenarios */
    text-align: left;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 1rem; /* Compact gap */
    width: 100%;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.adaptability-btn .btn-icon-wrapper {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-light-secondary); /* Light icons for dark theme */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.adaptability-btn .btn-text-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-right: 1.5rem;
}

.adaptability-btn h4 {
    font-size: 1.05rem; /* More compact h4 */
    color: rgba(255, 255, 255, 0.9); /* Primary light text */
    transition: var(--transition-smooth);
    font-weight: 600;
}

.adaptability-btn p {
    font-size: 0.82rem; /* More compact description */
    color: var(--text-light-secondary); /* Secondary light text */
    opacity: 0.85;
    line-height: 1.4;
    transition: var(--transition-smooth);
}

.adaptability-btn .active-indicator {
    position: absolute;
    right: -16px; /* Extends past button edge to visually connect directly to the display panel */
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    font-size: 0.85rem;
    color: var(--accent);
    background-color: var(--navy-deep);
    border: 1.5px solid var(--accent);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 160, 176, 0.25);
    opacity: 0;
    transition: var(--transition-smooth);
    z-index: 10;
}

/* Active State of Left Button (Tab Switch) */
.adaptability-btn.active {
    background-color: var(--navy-card); /* Distinct card background */
    border: 1px solid rgba(0, 160, 176, 0.35); /* Cyan border */
    border-left: 4px solid var(--accent); /* Elegant left border accent */
    box-shadow: 0 15px 35px rgba(3, 15, 38, 0.4); /* Stronger premium shadow */
}

.adaptability-btn.active .btn-icon-wrapper {
    background-color: var(--accent);
    color: var(--white);
    box-shadow: 0 0 12px var(--accent-glow);
}

.adaptability-btn.active h4 {
    color: var(--white);
}

.adaptability-btn.active p {
    color: rgba(255, 255, 255, 0.9); /* Increased contrast on dark active background */
    opacity: 1;
}

.adaptability-btn.active .active-indicator {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.adaptability-btn:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.08); /* Lighter hover background */
    border-color: rgba(0, 160, 176, 0.45); /* Subtle accent color on border hover */
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.adaptability-btn:hover:not(.active) h4 {
    color: var(--accent-hover); /* Turn accent on hover for interactive feel */
}

.adaptability-btn:hover:not(.active) p {
    opacity: 0.95;
    color: var(--white);
}

.adaptability-btn:hover:not(.active) .btn-icon-wrapper {
    background-color: rgba(0, 160, 176, 0.15);
    color: var(--accent-hover);
}

/* Right Display Panel (Dark Control Dashboard) */
.adaptability-display {
    background-color: #07152d; /* Rich dark navy brand color */
    border: 1px solid rgba(0, 160, 176, 0.25); /* Reinforced border with accent color to prevent washing out */
    border-radius: 16px;
    padding: 1.6rem 1.8rem; /* More compact padding for better vertical balance */
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45); /* Reinforced shadow */
    min-height: 400px; /* Reduced from 480px to align perfectly with left controls */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Group elements naturally instead of pulling them apart */
    gap: 1.6rem; /* Cleaner spacing between header and grid */
    transition: var(--transition-smooth);
}

.display-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.display-header .badge-status {
    align-self: flex-start;
    font-size: 0.82rem; /* Increased from 0.76rem for readability */
    font-weight: 700; /* Bolder for presence */
    letter-spacing: 1.2px; /* Slightly wider */
    text-transform: uppercase;
    color: #00f2fe; /* Bright neon cyan turquesa for maximum contrast */
    background-color: rgba(0, 242, 254, 0.08); /* More visible matching background */
    padding: 0.5rem 1.1rem; /* Generous pill padding */
    border-radius: 30px;
    border: 1px solid rgba(0, 242, 254, 0.35); /* Solidified border matching turquesa */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.15); /* Soft premium glow */
    margin-bottom: 0.4rem; /* Better vertical integration with h3 */
}

.display-header h3 {
    font-size: 1.6rem;
    color: var(--white);
    font-weight: 700;
}

.display-header p {
    font-size: 0.92rem;
    color: var(--text-light-secondary);
}

.display-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem; /* Reduced gap for tighter, more balanced layout */
}

/* Display Cards (Modules) */
.display-card {
    border: 1px solid rgba(255, 255, 255, 0.04);
    background-color: rgba(255, 255, 255, 0.01);
    border-radius: 10px;
    padding: 0.85rem 0.6rem; /* Compact padding for perfect vertical balance */
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.4rem; /* Closer interior alignment */
    min-height: 76px; /* Reduced to align with left controls height */
    position: relative;
    overflow: hidden;
}
.display-card .card-icon {
    font-size: 1.45rem;
    color: rgba(255, 255, 255, 0.25);
    transition: var(--transition-smooth);
}

.display-card .card-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    transition: var(--transition-smooth);
}

.display-card .card-status {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    line-height: 1;
    opacity: 0.4;
    transition: var(--transition-smooth);
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.3);
}

/* Módulos Base */
.display-card.base {
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.05);
    transform: translateY(-3px) scale(1.02);
    opacity: 1;
}

.display-card.base .card-icon {
    color: var(--white);
    transform: scale(1.05);
}

.display-card.base .card-name {
    color: var(--white);
}

.display-card.base .card-status {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
}

/* Módulos Incluidos */
.display-card.incluido {
    border: 1.5px solid rgba(0, 160, 176, 0.6);
    background-color: rgba(0, 160, 176, 0.08);
    box-shadow: 0 8px 25px rgba(0, 160, 176, 0.15);
    transform: translateY(-3px) scale(1.02);
    opacity: 1;
}

.display-card.incluido .card-icon {
    color: var(--accent);
    transform: scale(1.05);
}

.display-card.incluido .card-name {
    color: var(--white);
}

.display-card.incluido .card-status {
    opacity: 1;
    background-color: rgba(0, 160, 176, 0.15);
    border: 1px solid rgba(0, 160, 176, 0.3);
    color: #00e5ff;
}

/* Módulos Opcionales */
.display-card.opcional {
    opacity: 0.55;
    background-color: rgba(255, 255, 255, 0.01);
    border: 1.5px solid rgba(255, 255, 255, 0.03);
    transform: scale(0.98);
}

.display-card.opcional .card-icon {
    color: rgba(255, 255, 255, 0.2);
}

.display-card.opcional .card-name {
    color: rgba(255, 255, 255, 0.3);
}

.display-card.opcional .card-status {
    opacity: 0.4;
    background-color: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.25);
    border: 1px solid transparent;
}

/* Módulos Según Alcance */
.display-card.alcance {
    border: 1.5px dashed rgba(0, 160, 176, 0.35);
    background-color: rgba(255, 255, 255, 0.03);
    transform: translateY(-1px) scale(1.0);
    opacity: 0.8;
}

.display-card.alcance .card-icon {
    color: rgba(0, 160, 176, 0.6);
}

.display-card.alcance .card-name {
    color: rgba(255, 255, 255, 0.65);
}

.display-card.alcance .card-status {
    opacity: 0.8;
    background-color: rgba(0, 160, 176, 0.08);
    border: 1px dashed rgba(0, 160, 176, 0.35);
    color: rgba(0, 160, 176, 0.9);
}

/* Notes & Warnings */
.display-footer-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-light-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    opacity: 0.85;
    margin-top: auto; /* Push to bottom of adaptability-display */
}

.display-footer-note i {
    color: var(--accent);
    font-size: 0.95rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.section-footer-note {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    background-color: rgba(0, 44, 84, 0.03); /* Soft gray-blue translucent background */
    border: 1px solid rgba(0, 160, 176, 0.18); /* Elegant turquesa border */
    border-left: 4px solid var(--accent); /* Solid left turquesa accent bar */
    border-radius: 8px;
    padding: 1rem 1.6rem;
    max-width: 820px;
    margin: 3rem auto 0 auto;
    box-shadow: 0 4px 20px rgba(0, 44, 84, 0.02);
}

.section-footer-note p {
    color: var(--text-dark-primary); /* Primary dark color for readability */
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    margin: 0;
}

/* Specific theme overrides for dark adaptability section (section-alt) */
.section-alt .section-footer-note {
    background-color: rgba(255, 255, 255, 0.03); /* Translucent light background */
    border-color: rgba(0, 160, 176, 0.25);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.section-alt .section-footer-note p {
    color: var(--text-light-secondary); /* High contrast light text */
}

.section-footer-note .note-icon {
    color: var(--accent);
    font-size: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* Micro-animations */
@keyframes activeEntry {
    0% {
        transform: scale(0.95) translateY(5px);
        box-shadow: 0 0 0 rgba(0, 160, 176, 0);
    }
    50% {
        transform: scale(1.04) translateY(-4px);
        box-shadow: 0 10px 30px rgba(0, 160, 176, 0.25);
    }
    100% {
        transform: scale(1.02) translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 160, 176, 0.15);
    }
}

.animate-active-entry {
    animation: activeEntry 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Areas de Gestion - Mapa Modular */
.dashboard-modular-container {
    background-color: #07152d; /* Rich dark navy brand color matching simulator panel */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 30px 70px rgba(3, 15, 38, 0.35);
    margin-top: 2rem;
    position: relative;
}

.dashboard-modular-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.dashboard-modular-header .dots-window {
    display: flex;
    gap: 0.4rem;
}

.dashboard-modular-header .dots-window span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
}

.dashboard-modular-header .window-title {
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-light-secondary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.mapa-modular {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.capa-container {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.capa-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.3rem;
}

.capa-badge {
    font-family: var(--font-title);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #00f2fe; /* Neon cyan for maximum contrast on dark */
    background-color: rgba(0, 242, 254, 0.08);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(0, 242, 254, 0.25);
}

.capa-line {
    flex: 1;
    height: 1.5px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.capa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.module-card {
    background-color: #0A1C3A; /* Premium dark navy card background */
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 2rem;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.module-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 160, 176, 0.6);
    box-shadow: 0 15px 35px rgba(0, 160, 176, 0.15);
    background-color: #0e2752; /* Hover light dark-navy */
}

.module-icon {
    width: 42px;
    height: 42px;
    background-color: rgba(0, 160, 176, 0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.2rem;
    transition: var(--transition-smooth);
}

.module-card:hover .module-icon {
    background-color: var(--accent);
    color: var(--white);
    box-shadow: 0 0 12px var(--accent-glow);
}

.module-card h3 {
    font-size: 1.15rem;
    color: var(--white); /* White text for contrast */
    font-weight: 600;
}

.module-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.module-tag {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7); /* Translucent tag text */
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    transition: var(--transition-smooth);
}

.module-card:hover .module-tag {
    border-color: rgba(0, 160, 176, 0.25);
    background-color: rgba(0, 160, 176, 0.05);
    color: var(--white);
}

/* Highlighted style for Procesos Especiales */
.module-card.module-card-highlighted {
    background-color: rgba(0, 160, 176, 0.08); /* Soft turquesa tint background */
    border: 1.5px solid var(--accent); /* Clear accent border */
    box-shadow: 0 8px 30px rgba(0, 160, 176, 0.1);
}

.module-card.module-card-highlighted:hover {
    transform: translateY(-5px);
    border-color: #00e5ff;
    box-shadow: 0 18px 45px rgba(0, 160, 176, 0.25);
    background-color: rgba(0, 160, 176, 0.12);
}

.module-card.module-card-highlighted .badge-destacado {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white);
    background-color: var(--accent);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    position: absolute;
    top: 1rem;
    right: 1rem;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.module-card.module-card-highlighted .tag-highlighted {
    background-color: rgba(0, 160, 176, 0.12);
    border: 1px solid rgba(0, 160, 176, 0.3);
    color: #00e5ff; /* Cyan highlighted text */
}

.module-card.module-card-highlighted:hover .tag-highlighted {
    background-color: rgba(0, 160, 176, 0.2);
    border-color: #00e5ff;
    color: var(--white);
}

/* Bloque de Video Recorrido Visual de Áreas */
.areas-video-block {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Proporción texto/video equilibrada */
    gap: 3.5rem; /* Separación amplia */
    background-color: var(--slate-card); /* Plomo/gris azulado premium */
    border: 1px solid rgba(0, 160, 176, 0.25); /* Borde cian sutil */
    border-radius: 16px;
    padding: 3rem 4rem; /* Padding interno generoso */
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    margin: 1.5rem auto 4.5rem auto; /* Debajo del encabezado y antes del tablero modular */
    max-width: 1100px; /* Ancho amplio homologado con el problema */
    position: relative;
    overflow: hidden;
}

/* Background subtle glow effect */
.areas-video-block::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 160, 176, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.areas-video-info {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem; /* Separación vertical equilibrada */
}

.areas-video-block .video-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-title);
    font-size: 0.75rem;
    font-weight: 700;
    color: #ffffff;
    background-color: rgba(3, 15, 38, 0.3);
    border: 1px solid rgba(0, 160, 176, 0.45);
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    letter-spacing: 1px;
}

.areas-video-info h3 {
    font-size: 2rem; /* Título grande restaurado */
    color: var(--white);
    line-height: 1.25;
    font-weight: 700;
}

.areas-video-info p {
    font-size: 0.95rem; /* Descripción legible */
    color: #f1f5f9;
    line-height: 1.6;
    margin-bottom: 0.4rem;
}

.areas-video-thumbnail-container {
    position: relative;
    z-index: 2;
    cursor: pointer;
    width: 100%;
}

.areas-video-block .video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background-color: rgba(3, 15, 38, 0.6);
    border: 1px solid rgba(0, 160, 176, 0.2);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    transition: var(--transition-smooth);
}

.areas-video-block .video-thumbnail-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
    transition: var(--transition-smooth);
}

.areas-video-block .video-overlay-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 15, 38, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.areas-video-block .play-icon-glow {
    width: 64px; /* Icono grande y claro restaurado */
    height: 64px;
    background-color: var(--accent);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem; /* Tamaño de icono grande */
    padding-left: 5px; /* Ajuste centrado */
    box-shadow: 0 0 20px rgba(0, 160, 176, 0.5);
    transition: var(--transition-smooth);
}

/* Hover behaviors */
.areas-video-thumbnail-container:hover .video-thumbnail-wrapper {
    transform: translateY(-5px);
    border-color: var(--accent-hover);
    box-shadow: 0 20px 45px rgba(0, 160, 176, 0.3);
}

.areas-video-thumbnail-container:hover .video-thumbnail-wrapper video {
    opacity: 0.9;
    transform: scale(1.03);
}

.areas-video-thumbnail-container:hover .video-overlay-play {
    background: rgba(3, 15, 38, 0.2);
}

.areas-video-thumbnail-container:hover .play-icon-glow {
    background-color: var(--accent-hover);
    transform: scale(1.08);
    box-shadow: 0 0 35px rgba(0, 194, 212, 0.75);
}

/* Control Gerencial Section */
.gerencial-section {
    padding: 8rem 2rem;
    background-color: var(--navy-light); /* Tono navy/azul profundo diferenciado */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); /* Sombra hacia abajo para cierre visual */
    position: relative;
    z-index: 10;
}

.gerencial-content {
    display: grid;
    grid-template-columns: 46% 54%; /* Columnas balanceadas para simetría de alturas */
    gap: 3.5rem; /* Espaciado amplio y elegante */
    align-items: center;
}

.gerencial-text {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    align-self: center; /* Asegura el centrado vertical */
}

.gerencial-text h2 {
    font-size: 2.25rem;
    color: var(--text-light-primary);
    line-height: 1.25;
}

.gerencial-text p {
    font-size: 1.15rem; /* Slightly larger text for executive reading */
    line-height: 1.6;
}

.gerencial-visual {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06); /* Finer border for more premium aesthetic */
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.45); /* Enhanced depth shadow */
    background-color: var(--navy-card);
    align-self: center; /* Asegura el centrado vertical */
}

.gerencial-video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.gerencial-video-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Indicators List styling for balanced, executive layouts */
.gerencial-indicators-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.35rem; /* Increased vertical spacing to perfectly balance the taller video */
    margin: 0.5rem 0;
    padding: 0;
}

.gerencial-indicators-list li {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    color: var(--text-light-secondary);
    font-weight: 500;
    line-height: 1.4;
}

.gerencial-indicators-list li i {
    color: var(--accent); /* turquesa */
    font-size: 1.15rem;
    margin-right: 0.8rem;
    flex-shrink: 0;
}

/* Tighter vertical separation for Section 5 descriptions */
.gerencial-description {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Center play overlay on top of video loop preview */
.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(7, 21, 45, 0.75); /* Translucent navy backdrop */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 242, 254, 0.35); /* Neon turquesa accent border */
    color: var(--white);
    padding: 0.95rem 1.7rem;
    border-radius: 30px;
    font-family: var(--font-title);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 242, 254, 0.08);
    transition: var(--transition-smooth);
    z-index: 5;
    text-transform: uppercase;
}

.video-play-overlay i {
    color: #00f2fe; /* turquesa */
    font-size: 1.1rem;
    transition: var(--transition-smooth);
}

.video-play-overlay:hover {
    background: rgba(0, 242, 254, 0.15);
    border-color: #00f2fe;
    color: #00f2fe;
    box-shadow: 0 12px 30px rgba(0, 242, 254, 0.28);
    transform: translate(-50%, -50%) scale(1.05);
}

.video-play-overlay:hover i {
    transform: scale(1.15);
}

/* Methodology Section */
/* Methodology Section Dark Redesign */
.section-methodology {
    background-color: var(--navy-deep);
    color: var(--text-light-secondary);
    position: relative;
    overflow: hidden;
}

.section-methodology::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 20%, rgba(0, 160, 176, 0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Specific theme adjustment for dark eyebrow inside dark methodology */
.section-dark .eyebrow {
    color: #ffffff;
    background-color: rgba(0, 160, 176, 0.2);
    border-color: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(0, 160, 176, 0.15);
}

.methodology-timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 4rem auto 0 auto;
    padding: 0 1rem;
}

/* Timeline progress bar track */
.timeline-progress-bar {
    position: absolute;
    top: 35px; /* Centered vertically with the 70px nodes */
    left: 12.5%;
    width: 75%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.08); /* Dark inactive progress line */
    border-radius: 4px;
    z-index: 1;
}

/* Active progress line part */
.progress-line-active {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.55);
    border-radius: 4px;
    transition: var(--transition-smooth);
}

.methodology-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.timeline-step {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    transition: var(--transition-smooth);
}

/* Node positioning container */
.node-wrapper {
    position: relative;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Node layout */
.timeline-node {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #0A1C3A; /* Dark navy card background */
    border: 2px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    position: relative;
    z-index: 3;
}

.step-num {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5); /* Incrementado de 0.4 para mejor contraste base */
    transition: var(--transition-smooth);
}

.step-content h3 {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.95); /* Incrementado de 0.85 para mejor contraste base */
    margin-bottom: 0.6rem;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.step-content p {
    font-size: 0.88rem;
    color: #e2e8f0; /* Cambiado de var(--text-light-secondary) para mejor legibilidad */
    line-height: 1.6;
    max-width: 230px;
    margin: 0 auto;
    transition: var(--transition-smooth);
}

/* Active step specific highlights (Step 02) */
.timeline-step.step-active .timeline-node {
    background-color: #0d2247;
    border-color: var(--accent-hover);
    box-shadow: 0 0 25px rgba(0, 194, 212, 0.45);
    transform: scale(1.08);
}

.timeline-step.step-active .step-num {
    color: var(--accent-hover);
    text-shadow: 0 0 10px rgba(0, 194, 212, 0.3);
}

.timeline-step.step-active .step-content h3 {
    color: var(--white);
    font-weight: 700;
}

.timeline-step.step-active .step-content p {
    color: var(--white);
    opacity: 1;
}

/* Inactive step styles (01, 03, 04) */
.timeline-step.step-inactive {
    opacity: 0.60; /* Opacidad al 60% para legibilidad sin competir con el activo */
}

.timeline-step.step-inactive:hover {
    opacity: 0.85; /* Slightly less dimmed on hover */
}

.timeline-step:hover .timeline-node {
    border-color: rgba(0, 194, 212, 0.6);
}

/* Close CTA Section */
#contacto {
    background-color: var(--ice-blue);
    padding: 8rem 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 1;
}

.cta-box-container {
    background-color: var(--navy-card);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 4rem;
    box-shadow: 0 30px 70px rgba(3, 15, 38, 0.22), 0 15px 30px rgba(3, 15, 38, 0.12);
    position: relative;
    z-index: 10;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.cta-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cta-left h2 {
    font-size: 2.25rem;
    color: var(--white);
    line-height: 1.25;
}

.cta-left p {
    font-size: 1.1rem;
    color: var(--text-light-secondary);
}

/* Bloque de Garantías de Valor (Beneficios) */
.cta-benefits {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.cta-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.cta-benefit-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(0, 160, 176, 0.1);
    border: 1px solid rgba(0, 160, 176, 0.3);
    color: var(--accent-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.cta-benefit-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cta-benefit-text h3 {
    font-size: 1.05rem;
    color: var(--white);
    font-weight: 600;
}

/* Alta especificidad para evitar conflicto con .cta-left p */
.cta-left .cta-benefit-text p {
    font-size: 0.88rem;
    color: var(--text-light-secondary);
    line-height: 1.45;
}

.cta-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    position: relative;
    width: 100%;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 0.9rem 1rem;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 10px rgba(0, 160, 176, 0.2);
}

.form-group textarea {
    resize: none;
    height: 80px; /* Reducción de 20% para hacerlo más compacto y simétrico */
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light-secondary);
    margin-bottom: 0.4rem;
}

.cta-form .btn {
    width: 100%;
    margin-top: 1rem;
}

.form-trust-note {
    display: block;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-light-secondary);
    margin-top: 0.8rem;
    opacity: 0.8;
}

/* Footer */
.footer {
    padding: 5rem 2rem 2.5rem 2rem;
    background-color: var(--navy-deep);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 0.9fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-logo img {
    height: 40px;
    width: auto;
}

.footer-description {
    font-size: 0.9rem;
    color: var(--text-light-secondary);
    line-height: 1.6;
}

.footer-col h4 {
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 600;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-link {
    color: var(--text-light-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}

.footer-link:hover {
    color: var(--accent);
    padding-left: 5px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-light-secondary);
}

/* Video Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(3, 15, 38, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lightbox-content {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16/9;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-content video {
    width: 100%;
    height: 100%;
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10001; /* Ensure close button stays on top of video element */
    font-family: var(--font-title);
    transition: var(--transition-smooth);
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--white);
}

/* Transversal Security Note for Modular Dashboard */
.dashboard-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    line-height: 1.45;
}

.dashboard-footer-note i {
    color: #00f2fe; /* Matching the neon turquesa */
    font-size: 1rem;
    flex-shrink: 0;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    section {
        padding: 5rem 1.5rem;
    }
    
    .hero .grid-container,
    .problem-comparison,
    .adaptability-panel,
    .gerencial-content,
    .areas-video-block,
    .problem-video-block,
    .cta-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .gerencial-section {
        padding: 6rem 1.5rem;
    }
    
    .modules-grid,
    .capa-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .methodology-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .timeline-progress-bar {
        display: none;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
}

@media (max-width: 768px) {
    .navbar .nav-menu {
        position: fixed;
        top: 75px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 75px);
        background-color: var(--navy-deep);
        flex-direction: column;
        padding: 3rem 2rem;
        gap: 2rem;
        transition: var(--transition-smooth);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        align-items: flex-start;
    }
    
    .navbar .nav-menu.active {
        left: 0;
    }
    
    .burger-menu {
        display: flex;
    }
    
    .navbar .nav-cta {
        display: none;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .modules-grid,
    .capa-grid {
        grid-template-columns: 1fr;
    }
    
    .methodology-timeline-container {
        padding-left: 0;
    }
    
    .timeline-progress-bar {
        display: block;
        left: 25px; /* Centrado con el nodo de 50px */
        top: 20px;
        width: 3px;
        height: 75%;
        transform: translateX(-50%);
    }
    
    .progress-line-active {
        width: 100% !important;
        height: 33.33% !important;
    }
    
    .methodology-timeline {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .timeline-step {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .node-wrapper {
        height: auto;
        flex-shrink: 0;
    }
    
    .timeline-node {
        width: 50px;
        height: 50px;
    }
    
    .step-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .step-content p {
        max-width: 100%;
        margin: 0;
    }
    
    .display-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .areas-video-block,
    .problem-video-block {
        padding: 2.5rem 1.5rem;
        gap: 2rem;
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
    }

    .gerencial-section {
        padding: 5rem 1rem;
    }
    
    .cta-box-container {
        padding: 2.5rem 1.5rem;
        border-radius: 12px;
    }
    
    .areas-video-info,
    .problem-video-info {
        align-items: center;
        text-align: center;
    }
}

/* --- ADICIONES AUDITORÍA FUNCIONAL --- */

/* 1. Botón de conversión móvil en lista de navegación */
.navbar .nav-menu .mobile-cta-li {
    display: none;
}

@media (max-width: 768px) {
    .navbar .nav-menu .mobile-cta-li {
        display: block;
        width: 100%;
        margin-top: 1rem;
    }
    
    .navbar .nav-menu .mobile-cta-li .btn {
        width: 100%;
        padding: 0.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.9rem;
    }
}

/* 2. Éxito del Formulario de Contacto */
@keyframes fadeInSuccess {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-success-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.5rem 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(0, 160, 176, 0.25);
    border-radius: 8px;
    box-shadow: 0 15px 45px rgba(3, 15, 38, 0.3), 0 0 25px rgba(0, 160, 176, 0.1);
    animation: fadeInSuccess 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.form-success-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(0, 160, 176, 0.08);
    border: 2px solid var(--accent);
    color: var(--accent-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 15px rgba(0, 160, 176, 0.2);
}

.form-success-message h3 {
    color: var(--white);
    font-size: 1.6rem;
    margin-bottom: 1rem;
    font-family: var(--font-title);
    font-weight: 600;
}

.form-success-message p {
    color: var(--text-light-secondary);
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* 3. Validación y Errores del Formulario */
.form-error-inline {
    color: #F87171;
    font-size: 0.78rem;
    margin-top: 0.3rem;
    display: block;
    font-family: var(--font-body);
}

.form-input.has-error {
    border-color: #F87171 !important;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.2) !important;
}

.form-general-error {
    background-color: rgba(248, 113, 113, 0.1);
    border: 1px solid #F87171;
    color: #F87171;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    text-align: center;
    font-family: var(--font-body);
    box-sizing: border-box;
}

/* 4. Overlay de video minimalista para Control Gerencial (Video 2) */
.gerencial-video-overlay-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 15, 38, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    border-radius: 12px;
}

.gerencial-play-icon-glow {
    width: 64px;
    height: 64px;
    background-color: var(--accent);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    padding-left: 5px;
    box-shadow: 0 0 20px rgba(0, 160, 176, 0.5);
    transition: var(--transition-smooth);
}

/* Hover behaviors */
.gerencial-video-container:hover .gerencial-video-overlay-play {
    background: rgba(3, 15, 38, 0.25);
}

.gerencial-video-container:hover .gerencial-play-icon-glow {
    background-color: var(--accent-hover);
    transform: scale(1.08);
    box-shadow: 0 0 35px rgba(0, 194, 212, 0.75);
}

/* ==========================================
   Section 5.5: Soluciones Digitales
   ========================================== */
.solutions-section {
    background-color: var(--ice-blue); /* Claro premium/gris azulado suave */
    padding: 8.5rem 2rem; /* Aumentado padding de sección */
    border-top: 1px solid var(--gray-blue);
    border-bottom: 1px solid var(--gray-blue);
    position: relative;
}

.solutions-section .section-header {
    max-width: 900px; /* Aumentado ancho de 750px a 900px */
    margin: 0 auto 5rem auto; /* Aumentado espaciado inferior */
}

.solutions-section .section-header h2 {
    font-size: 2.5rem; /* Aumentado de 2.25rem */
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--text-dark-primary);
}

.solutions-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    margin-top: 1.5rem;
    text-align: left;
}

.solutions-p-main {
    font-size: 1.15rem; /* Aumentado de 1.05rem */
    font-weight: 600; /* Firme y con autoridad */
    color: #030f26; /* Navy profundo */
    line-height: 1.7; /* Mejor interlineado */
}

.solutions-p-sec {
    font-size: 1.05rem; /* Aumentado de 0.95rem */
    color: #1e293b; /* Grafito operativo */
    line-height: 1.7; /* Mejor interlineado */
    font-weight: 450;
}

/* Flujo Conceptual Premium Oscuro */
.conceptual-flow-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--navy-card); /* Azul navy oscuro premium */
    border: 1px solid rgba(0, 160, 176, 0.2); /* Borde sutil turquesa/cian */
    border-radius: 12px;
    padding: 1.75rem 2.25rem;
    margin: 4.5rem auto; /* Aumentado espacio vertical */
    max-width: 1100px;
    box-shadow: 0 15px 40px rgba(3, 15, 38, 0.15); /* Sombra elegante */
}

.conceptual-flow-step {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
}

.flow-step-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 160, 176, 0.1); /* Fondo translúcido adaptado */
    border: 1px solid rgba(0, 160, 176, 0.3); /* Borde turquesa sutil */
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.flow-step-text h4 {
    font-size: 0.95rem;
    color: var(--white); /* Blanco sobre oscuro */
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.flow-step-text p {
    font-size: 0.88rem;
    color: #cbd5e1; /* Gris claro (slate-300) de alto contraste */
    font-weight: 500;
    margin: 0;
}

.conceptual-flow-arrow {
    color: var(--accent); /* Mismo tono turquesa/cian de los iconos */
    font-size: 0.95rem;
    padding: 0 0.8rem;
    display: flex;
    align-items: center;
    opacity: 1.0; /* Contraste total */
}

/* Tratamiento del Texto Destacado Central (Limpio y centrado sin banner) */
.solutions-callout {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 5rem auto 3.5rem auto; /* Aumentado espaciado vertical */
    text-align: center;
    display: block;
    width: 100%;
}

.solutions-callout p {
    font-size: 1.45rem;
    font-weight: 700;
    color: #030f26; /* Navy profundo */
    text-align: center;
    padding-left: 0;
    max-width: 850px;
    margin: 0 auto;
    line-height: 1.45;
}

/* Grilla de Tarjetas (5 bloques) */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.75rem;
    margin-top: 4rem; /* Aumentado espaciado superior */
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.solution-card {
    background: var(--navy-card); /* Azul navy oscuro premium */
    border: 1px solid rgba(0, 160, 176, 0.2); /* Borde sutil turquesa/cian */
    border-radius: 12px;
    padding: 2.25rem 2rem;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    box-shadow: 0 10px 30px rgba(3, 15, 38, 0.12); /* Sombra elegante */
    position: relative;
    grid-column: span 3; /* 2 columnas en pantallas medianas */
}

@media (min-width: 769px) and (max-width: 1023px) {
    /* En tablet, la última tarjeta (tarjeta 5) se expande al ancho completo para balancear la fila impar */
    .solutions-grid .solution-card:nth-child(5) {
        grid-column: span 6;
    }
}

@media (min-width: 1024px) {
    /* Fila 1 y 2: Todas las tarjetas tienen el mismo tamaño (span 2 de 6 columnas) */
    .solutions-grid .solution-card {
        grid-column: span 2;
    }
    /* Centrar las dos tarjetas de la segunda fila (tarjeta 4 y 5) */
    .solutions-grid .solution-card:nth-child(4) {
        grid-column: 2 / span 2;
    }
    .solutions-grid .solution-card:nth-child(5) {
        grid-column: 4 / span 2;
    }
}

.solution-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 160, 176, 0.18); /* Brillo sutil cian en hover */
    border-color: var(--accent-hover);
}

.solution-card .card-icon {
    background: transparent; /* Removido fondo cuadrado interno */
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 1.6rem; /* Aumentado aproximadamente un 28% para mayor nitidez */
    transition: var(--transition-smooth);
}

.solution-card:hover .card-icon {
    color: var(--accent-hover);
    transform: scale(1.1); /* Animación sutil de escala para el icono */
}

.solution-card h3 {
    font-size: 1.25rem;
    color: var(--white); /* Blanco premium */
    margin-bottom: 0.4rem;
    font-family: var(--font-title);
    font-weight: 700;
}

.solution-card p {
    font-size: 0.95rem;
    color: #e2e8f0; /* Gris claro (slate-200) de alto contraste */
    line-height: 1.6;
    margin: 0;
    font-weight: 400; /* Regular para lectura limpia */
}

/* Footer Section */
.solutions-footer {
    margin-top: 6rem; /* Aumentado espacio vertical */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem; /* Aumentado espaciado entre frase y CTA */
}

.solutions-close-phrase {
    font-size: 1.08rem;
    font-weight: 600;
    color: #030f26; /* Navy profundo firme */
    max-width: 750px;
    line-height: 1.6;
    margin: 0 auto;
}

.solutions-footer .btn {
    padding: 1rem 2.5rem; /* Mayor padding para más presencia */
    font-size: 1.05rem; /* Tamaño de letra más destacado */
    min-width: 290px; /* Ancho visual destacado */
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 160, 176, 0.25);
    font-weight: 600;
    transition: var(--transition-smooth);
}

.solutions-footer .btn:hover {
    box-shadow: 0 12px 30px rgba(0, 194, 212, 0.4);
    transform: translateY(-3px);
}

/* Responsiveness */
@media (max-width: 768px) {
    .solutions-section {
        padding: 5rem 1rem;
    }

    .solutions-intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .conceptual-flow-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .conceptual-flow-arrow {
        transform: rotate(90deg);
        align-self: center;
        padding: 0.5rem 0;
    }
    
    .solutions-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    
    .solutions-grid .solution-card {
        grid-column: span 1 !important;
    }
}

/* ==========================================================================
   Section Transition Fades (Separadores con degradado suave)
   ========================================================================== */

/* Reusable fade utility classes */
.fade-from-ice-blue,
.fade-from-navy-deep,
.fade-from-white,
.fade-from-navy-light,
.fade-from-ice-blue-after {
    position: relative;
}

/* Pseudo-elements for the gradient overlays */
.fade-from-ice-blue::before,
.fade-from-navy-deep::before,
.fade-from-white::before,
.fade-from-navy-light::before,
.fade-from-ice-blue-after::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 1; /* Render overlay on top of background but behind container content (z-index 2) */
    transition: var(--transition-smooth);
}

/* Specific linear gradients to blend section backgrounds */
.fade-from-ice-blue::before {
    background: linear-gradient(180deg, var(--ice-blue) 0%, rgba(244, 247, 250, 0) 100%);
}

.fade-from-navy-deep::before {
    background: linear-gradient(180deg, var(--navy-deep) 0%, rgba(3, 15, 38, 0) 100%);
}

.fade-from-white::before {
    background: linear-gradient(180deg, var(--white) 0%, rgba(255, 255, 255, 0) 100%);
}

.fade-from-navy-light::before {
    background: linear-gradient(180deg, var(--navy-light) 0%, rgba(13, 34, 71, 0) 100%);
}

/* Specific overlay for methodology using ::after to avoid overriding its ::before */
.fade-from-ice-blue-after::after {
    background: linear-gradient(180deg, var(--ice-blue) 0%, rgba(244, 247, 250, 0) 100%);
}

/* Responsive adjustments to shrink transition height on smaller screens */
@media (max-width: 768px) {
    .fade-from-ice-blue::before,
    .fade-from-navy-deep::before,
    .fade-from-white::before,
    .fade-from-navy-light::before,
    .fade-from-ice-blue-after::after {
        height: 60px;
    }
}

/* Ensure footer contents render above transition overlays */
.footer-grid,
.footer-bottom {
    position: relative;
    z-index: 2;
}

/* Footer Social Links */
.footer-social-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--text-light-secondary);
    font-size: 0.9rem;
    transition: var(--transition-smooth);
    width: max-content;
}

.social-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-light-secondary);
    transition: var(--transition-smooth);
}

.footer-social-link:hover {
    color: var(--accent-hover);
}

.footer-social-link:hover .social-icon-wrapper {
    background-color: rgba(0, 186, 174, 0.1);
    border-color: var(--accent);
    color: var(--accent-hover);
    transform: translateY(-1px);
}

/* WhatsApp Secondary Contact Block styling */
.cta-whatsapp-block {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 44, 84, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: flex-start;
}

.cta-whatsapp-content h3 {
    font-size: 1.25rem;
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--text-dark-primary);
    margin-bottom: 0.35rem;
}

.cta-whatsapp-content p {
    font-size: 0.95rem;
    color: var(--text-dark-secondary);
    line-height: 1.5;
}

.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background-color: transparent;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    transition: var(--transition-smooth);
    cursor: pointer;
    text-decoration: none;
}

.btn-whatsapp:hover {
    background-color: var(--accent);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(0, 186, 174, 0.2);
    transform: translateY(-2px);
}