/* --- RESET & VARIABLES --- */
:root {
    /* New Palette */
    --bg-color: #050505;
    --text-main: #ffffff;
    --text-muted: #b6bac5;
    /* Corporate Light Grey */
    --accent: #383e4e;
    /* Corporate Dark Blue-Grey */
    --border-color: rgba(182, 186, 197, 0.2);
    /* Muted line color */
    --card-bg: rgba(255, 255, 255, 0.02);
    --shadow-float: 0 4px 15px rgba(0, 0, 0, 0.5);

    /* Font */
    --font-main: 'Funnel Display', sans-serif;
    --transition-smooth: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

    /* Spacing */
    --container-padding: 5vw;
    --section-gap: 120px;
}

/* --- OVERRIDE PARA LIGHT MODE --- */
[data-theme="light"] {
    --bg-color: #F9FAFB;
    /* Fondo claro del dashboard */
    --text-main: #111827;
    /* Texto oscuro */
    --text-muted: #4B5563;
    /* Gris medio para lectura */
    --accent: #e5fcf9;
    /* Acento claro */
    --border-color: rgba(0, 0, 0, 0.1);
    --card-bg: #FFFFFF;
    /* Tarjetas blancas */
    --shadow-float: 0 4px 15px rgba(0, 0, 0, 0.1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-main);
    overflow-x: hidden;
    cursor: none;
    /* Custom cursor optional */
    transition: var(--transition-smooth);
    /* Suaviza el cambio de color */
}

a {
    text-decoration: none;
    color: inherit;
    cursor: none;
}

ul {
    list-style: none;
}

/* --- 2. BOTÓN FLOTANTE (Estilo Dashboard) --- */
.theme-float-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    /* Petición: Abajo a la izquierda */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--card-bg);
    /* Se adapta al tema */
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-float);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* Reactivamos el cursor para el botón */
    z-index: 9999;
    /* Por encima de todo */
    transition: transform 0.2s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.theme-float-btn:hover {
    transform: scale(1.1);
    border-color: #b6bac5;
}

/* --- 3. AJUSTES ESPECÍFICOS PARA LIGHT MODE --- */

/* Invertir el logo blanco a negro en modo claro */
[data-theme="light"] .logo-img,
[data-theme="light"] .hero-logo,
[data-theme="light"] .footer-logo {
    filter: invert(1);
}

/* Ajustar el cursor personalizado para que se vea en fondo blanco */
[data-theme="light"] .cursor-dot {
    background-color: #000;
}

[data-theme="light"] .cursor-outline {
    border-color: rgba(0, 0, 0, 0.2);
}

/* Ajustar tarjetas y secciones para que no desaparezcan */

[data-theme="light"] .project-card .card-visual-frame,
[data-theme="light"] .bento-card,
[data-theme="light"] .timeline-visual .visual-widget {
    /* Fondo Gris Oscuro (No blanco, no negro puro) */
    background-color: #000000;

    /* Mantenemos un borde sutil claro para definir la caja */
    border: 1px solid rgba(255, 255, 255, 0.1);

    /* Sombra para darle profundidad sobre el fondo blanco */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .diff-card.neurodeck {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Textos específicos dentro de tarjetas oscuras que deben cambiar */
[data-theme="light"] .office-card h4,
[data-theme="light"] .project-card .p-title,
[data-theme="light"] .timeline-content h3,
[data-theme="light"] .diff-header h3 {
    color: #111827;
}

/* Nav Bar en modo claro */
[data-theme="light"] .nav-container {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Hero Section override si quieres que siga siendo oscura o cambie */
[data-theme="light"] .hero-section,
[data-theme="light"] .ticker-section,
[data-theme="light"] .difference-section {
    background-color: #F3F4F6;
    /* Un gris muy suave para diferenciar secciones */
}

[data-theme="light"] {
    --bg-color: #F9FAFB;
    --text-main: #111827;
    --text-muted: #4B5563;
    --accent: #e5fcf9;
    --border-color: rgba(0, 0, 0, 0.1);
    --card-bg: #FFFFFF;
    --shadow-float: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* --- REGLAS ESPECÍFICAS LIGHT MODE (Añadir debajo de las variables) --- */

/* 1. Botón Navbar: Fondo Negro, Letra Blanca */
[data-theme="light"] .btn-primary-nav {
    background-color: #050505;
    color: #ffffff;
}

/* 2. Hero Title: Color Negro */
[data-theme="light"] .hero-title {
    color: #050505;
}

/* 2. Hero Title: Color Negro */
[data-theme="light"] .hero-subtitle {
    color: #414141;
}

/* 3. Partículas: Color Negro */
/* Usamos la ID #home para tener suficiente especificidad y sobrescribir el layer */
[data-theme="light"] #home {
    --particle-color: rgb(0, 0, 0);
}

/* --- AJUSTES TICKER (Light Mode) --- */

/* 2. Texto del Ticker más oscuro */
[data-theme="light"] .ticker-header p {
    color: #4B5563;
    /* Gris oscuro legible */
    opacity: 1;
    /* Quitamos transparencia para mayor contraste */
    font-weight: 600;
    /* Un poco más de peso ayuda a la legibilidad en fondo claro */
}

/* 3. Logos del Ticker oscuros (Invertir colores) */
[data-theme="light"] .client-logo {
    filter: invert(1);
    /* Convierte los logos blancos en negros */
    opacity: 0.8;
    /* Ajuste visual para que no sean negro puro agresivo */
}

/* --- CORRECCIÓN HOVER CARDS (Light Mode) --- */

/* 1. Fondo y Sombra de la Tarjeta al Hover */
[data-theme="light"] .office-grid .office-card:hover {
    /* Quitamos el gradiente oscuro y ponemos blanco puro o muy suave */
    background: #ffffff;

    /* Cambiamos el borde a algo suave en lugar del gris claro del modo oscuro */
    border-color: var(--accent);
    /* Usará el color de acento definido para light mode */

    /* Sombra mucho más sutil y limpia */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

    /* Mantenemos el movimiento, queda bien */
    transform: translateY(-5px);
    opacity: 1;
}

/* 2. Corregir Textos internos al Hover (para que no se pongan blancos) */

/* Títulos y Elementos de lista */
[data-theme="light"] .office-card:hover h4,
[data-theme="light"] .office-card:hover .task-list li {
    color: #111827;
    /* Forzamos color oscuro/negro */
}

/* El Badge del icono */
[data-theme="light"] .office-card:hover .icon-badge {
    background: rgba(0, 0, 0, 0.05);
    /* Fondo gris muy tenue */
    color: #383e4e;
    /* Icono oscuro */
}

/* Corrección Texto Timeline en Modo Claro */
[data-theme="light"] .timeline-content p {
    color: #374151;
    /* Gris oscuro para buena lectura */
    font-weight: 500;
    /* Un poco más de peso para mejorar contraste */
}

/* Corrección Lista Positiva en Modo Claro */
[data-theme="light"] .diff-list.positive li {
    color: #374151;
    /* Texto Gris Oscuro (antes era blanco) */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    /* Línea separadora gris suave */
}

/* Opcional: Si los subtítulos (span) se ven muy claros, oscurecerlos también */
[data-theme="light"] .diff-list.positive li span {
    color: #6B7280;
    /* Gris medio para los detalles */
}

/* --- Correcciones Proyectos (Light Mode) --- */

/* 1. Botón "View Case" a negro */
[data-theme="light"] .view-case-btn {
    color: #000000;
    /* Texto negro */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    /* Línea inferior oscura */
}

[data-theme="light"] .view-case-btn:hover {
    color: #4B5563;
    /* Gris oscuro al pasar el mouse */
    border-color: #4B5563;
}

/* 2. Texto de los detalles ("case-details") más oscuro */
[data-theme="light"] .case-details {
    color: #374151;
    /* Gris plomo oscuro para buena lectura */
}

/* --- CURSOR (Optional) --- */
.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--text-main);
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 1px solid var(--text-muted);
    transition: width 0.2s, height 0.2s, background-color 0.2s;
}

/* Hover states handled via JS or hover CSS on body */
body:hover .cursor-outline {
    opacity: 1;
}

/* --- TYPOGRAPHY UTILS --- */
.reveal-text {
    overflow: hidden;
    display: block;
}

.reveal-text>span {
    display: block;
    transform: translateY(100%);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-text.active>span {
    transform: translateY(0);
}

.highlight {
    color: var(--text-muted);
    font-style: italic;
}

/* --- NAVIGATION --- */
.nav-container {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    padding: 1px 50px;
    background: rgba(5, 5, 5, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    /* Elimina espacios extraños debajo de la imagen */
    align-items: center;
    /* Centra verticalmente el logo en el navbar */
    padding: 0px 0;
    /* Un poco de aire si es necesario */
    text-decoration: none;
    /* Asegura que no haya subrayados */
}

/* Control del tamaño de la imagen SVG */
.logo-img {
    height: 60px;
    /* Altura inicial sugerida (ajustable según grosor del navbar) */
    width: auto;
    /* Mantiene la proporción original */
    display: block;
    transition: transform 0.3s ease;
    /* Pequeño efecto suave al pasar el ratón */
}

/* Micro-interacción: Sutil efecto al hacer hover sobre el logo */
.logo:hover .logo-img {
    transform: scale(1.05);
    /* Crece un 5% imperceptible pero elegante */
    opacity: 0.9;
}

/* Ajuste para móviles si fuera necesario */
@media (max-width: 768px) {
    .logo-img {
        height: 24px;
        /* Un poco más pequeño en pantallas estrechas */
    }
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links a {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--text-main);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.link-text {
    font-size: 14px;
    color: var(--text-muted);
}

.btn-primary-nav {
    padding: 10px 24px;
    background: white;
    color: var(--bg-color);
    font-weight: 500;
    border-radius: 2px;
    transition: transform 0.3s, background-color 0.3s, color 0.3s;
}

.btn-primary-nav:hover {
    transform: translateY(-2px);
}

/* HERO SECTION */

.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* O la altura que prefieras */
    background-color: #000000;
    text-align: center;
    padding: 20px;
}

.hero-content-centered {
    max-width: 900px;
    width: 100%;
}

/* --- Logo Superior --- */
.hero-logo {
    height: 100px;
    /* Ajusta la altura según prefieras */
    align-items: center;
    justify-content: center;


    /* ⚠️ SI TU LOGO ES BLANCO Y EL FONDO ES BLANCO:
       Descomenta la siguiente línea para invertir el color a negro: */
    /* filter: invert(1); */
}

/* --- Títulos --- */
.hero-title {
    font-size: 4rem;
    /* Tamaño grande como en la imagen */
    line-height: 1.1;
    font-weight: 400;
    /* Google suele usar pesos medios, no muy bold */
    color: #ffffff;
    margin: 0;
    letter-spacing: -1.5px;
    /* Importante para el estilo 'tight' */
    transition: color 0.3s ease;
}

.hero-subtitle {
    font-size: 3.5rem;
    /* Ligeramente más pequeño que el H1 */
    line-height: 1.2;
    color: #b6bac5;
    /* Color gris característico */
    margin: 10px 0 40px 0;
    font-weight: 400;
    letter-spacing: -1px;
}

/* Ajustes Responsive para móviles */
@media (max-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 2rem;
    }
}

/* --- Botones --- */
.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 50px;
    /* Pill shape */
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Botón Negro (Windows) */
.btn-primary {
    background-color: #b6bac5;
    color: #000000;
}

.btn-primary:hover {
    background-color: #b6bac585;
    transform: translateY(-1px);
}

/* Botón Blanco (Explore) */
.btn-secondary {
    background-color: #ffffff;
    color: #202124;
    border: 1px solid #dadce0;
    /* Borde gris sutil */
}

.btn-secondary:hover {
    background-color: #f8f9fa;
    /* Gris muy claro al hover */
    border-color: #dadce0;
}


/* --- TICKER (MARQUEE) --- */
/* Espaciado general de la sección */
.ticker-section {
    padding: 60px 0 40px 0;
    /* Más espacio arriba para el texto */
    background-color: #000000;
    /* Fondo oscuro o transparente según tu diseño base */
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

/* Estilo del texto introductorio */
.ticker-header {
    text-align: center;
    margin-bottom: 3rem;
}

.ticker-header p {
    font-family: 'Funnel Display', sans-serif;
    /* Tu fuente principal */
    color: #b6bac5;
    /* Color secundario de marca */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Espaciado elegante entre letras */
    font-weight: 500;
    opacity: 0.8;
}

/* El contenedor que recorta el contenido */
.ticker-wrapper {
    width: 100%;
    overflow: hidden;
    /* EFECTO PRO: Desvanecimiento en los bordes */
    /* Esto hace que los logos no se corten de golpe al salir de la pantalla */
    mask-image: linear-gradient(to right,
            transparent,
            black 10%,
            black 90%,
            transparent);
    -webkit-mask-image: linear-gradient(to right,
            transparent,
            black 10%,
            black 90%,
            transparent);
}

/* La pista que se mueve */
.ticker-track {
    display: flex;
    width: max-content;
    /* Se adapta al ancho de todos los logos juntos */
    gap: 4rem;
    /* Espacio generoso entre logos */
    padding-right: 3rem;
    animation: scroll-infinite 50s linear infinite;
    /* 60s = Muy suave */
}

/* Estilo de los logos */
.client-logo {
    height: 40px;
    /* Altura uniforme */
    width: auto;
    object-fit: contain;
    /* Opcional: Filtro para uniformizar colores si los logos son de muchos colores */
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

/* Definición de la animación */
@keyframes scroll-infinite {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Se mueve exactamente el 50% (la mitad de la pista duplicada) */
        transform: translateX(-50%);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .ticker-track {
        gap: 3rem;
        /* Menos espacio en móviles */

    }

    .client-logo {
        height: 30px;
        /* Logos un poco más pequeños */
    }
}

/* --- CAPABILITIES SECTION (SPOTLIGHT EFFECT) --- */

/* --- NEW CAPABILITIES: OFFICE SPECTRUM --- */

.cap-header-centered {
    text-align: left;
    max-width: 1000px;
    margin-bottom: 20px;
}

.cap-header-centered h3 {
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 400;
    margin-top: 20px;
}

/* Grid Layout */
.office-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
}

/* Card Base */
.office-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid var(--border-color);
    /* Tu borde sutil */
    border-radius: 12px;
    padding: 40px 30px;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

/* Activamos la card específica que tiene el mouse encima */
.office-grid .office-card:hover {
    opacity: 1;
    filter: blur(0px);
    background: linear-gradient(180deg, rgba(56, 62, 78, 0.2) 0%, rgba(5, 5, 5, 0.5) 100%);
    /* Tinte azul #383e4e */
    border-color: var(--text-muted);
    /* #b6bac5 */
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Header de la Card */
.card-header {
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.icon-badge {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--text-muted);
    transition: color 0.3s;
}

/* El icono se ilumina en blanco al hover */
.office-card:hover .icon-badge {
    color: #fff;
    background: rgba(182, 186, 197, 0.2);
    /* #b6bac5 con transparencia */
}

.office-card h4 {
    font-size: 1.8rem;
    margin-bottom: 5px;
    color: #fff;
}

.card-sub {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

/* Body de la Card */
.description {
    font-size: 1rem;
    color: #a0a0a0;
    line-height: 1.5;
    margin-bottom: 30px;
    min-height: 3em;
    /* Para alinear alturas */
}

/* Lista de tareas (Slide content) */
.task-list {
    list-style: none;
    padding: 0;
}

.task-list li {
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s, padding-left 0.2s;
}

.task-list li span {
    color: #383e4e;
    /* Flecha oscura por defecto */
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 0;
    transition: color 0.3s;
}

/* Efecto hover en items de la lista */
.office-card:hover .task-list li:hover {
    padding-left: 5px;
    color: #fff;
}

.office-card:hover .task-list li:hover span {
    color: #b6bac5;
    /* Flecha clara al hover */
}


@keyframes scan {
    0% {
        top: -10%;
        opacity: 0;
    }

    10% {
        opacity: 0.5;
    }

    90% {
        opacity: 0.5;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .office-grid {
        grid-template-columns: 1fr;
        /* Una columna en móvil/tablet */
        gap: 20px;
    }

    .cap-header-centered h3 {
        font-size: 2rem;
    }

    /* Desactivamos el efecto de "dimming" en móvil porque no hay hover real */
    .office-grid:hover .office-card {
        opacity: 1;
        filter: blur(0);
    }

    .office-card {
        opacity: 1;
    }
}

/* --- DIFFERENCE SECTION (THE GAP) --- */

.difference-section {
    background-color: #050505;
    position: relative;
    overflow: hidden;
}

.diff-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    /* Neurodeck es un poco más ancha */
    gap: 40px;
    margin-top: 30px;
    align-items: stretch;
}

/* ESTILO BASE DE LAS TARJETAS */
.diff-card {
    padding: 3rem;
    border-radius: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s ease;
}

/* 1. TARJETA LEGACY (Competencia) */
.diff-card.legacy {
    background: transparent;
    border: 1px dashed rgba(182, 186, 197, 0.208);
    /* Borde punteado = fragilidad */
    opacity: 0.7;
    /* Visualmente menos importante */
}

.diff-card.legacy:hover {
    opacity: 1;
    /* Se ilumina al verla */
}

.diff-card.legacy h3 {
    color: #666;
    /* Texto apagado */
}

/* 2. TARJETA NEURODECK (Premium) */
.diff-card.neurodeck {
    /* Fondo con tu color corporativo muy sutil */
    background: linear-gradient(145deg, rgba(56, 62, 78, 0.2), rgba(5, 5, 5, 0.8));
    border: 1px solid #383e4e;
    /* Borde sólido corporativo */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    /* Sombra profunda */
    overflow: hidden;
    /* Para contener el brillo */
}

.diff-card.neurodeck:hover {
    transform: scale(1.02);
    /* Pequeño pop al hacer hover */
    border-color: #b6bac5;
    /* El borde brilla con el color secundario */
}

/* BADGE SUPERIOR */
.diff-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #b6bac5;
    color: #000;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 1px;
}

/* CABECERAS */
.diff-header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.diff-header h3 {
    font-size: 1cm;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #fff;
}

.diff-header span {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #b6bac5;
}

/* CONTENIDO */
.diff-main-text {
    font-size: 1.1rem;
    color: #a0a0a0;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* LISTAS */
.diff-list {
    list-style: none;
    padding: 0;
}

.diff-list li {
    padding: 12px 0;
    color: #888;
    position: relative;
    padding-left: 25px;
    font-size: 0.95rem;
}

/* Iconos de lista (CSS puro) */
.diff-list.negative li::before {
    content: "×";
    position: absolute;
    left: 0;
    color: #444;
    font-weight: bold;
    font-size: 1.2rem;
}

.diff-list.positive li {
    color: #fff;
    /* Texto blanco en Neurodeck */
    border-bottom: 1px solid rgba(182, 186, 197, 0.1);
}

.diff-list.positive li:last-child {
    border-bottom: none;
}

.diff-list.positive li::before {
    content: "→";
    /* Flecha en vez de check, más técnico */
    position: absolute;
    left: 0;
    color: #b6bac5;
    /* Color secundario */
}

.diff-list.positive li span {
    display: block;
    font-size: 0.8rem;
    color: #b6bac5;
    /* Subtítulo explicativo en gris */
    margin-top: 4px;
    opacity: 0.7;
}

/* EFECTO DE BRILLO DE FONDO (NEURO-GLOW) */
.neuro-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(56, 62, 78, 0.3) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    pointer-events: none;
    z-index: 0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .diff-container {
        grid-template-columns: 1fr;
        /* Una columna en móvil */
        gap: 30px;
    }

    .diff-card {
        padding: 2rem;
    }

    .diff-card.neurodeck {
        order: -1;
        /* Pone a Neurodeck primero en móvil para destacar */
    }
}

/* Logo del cliente dentro del acordeón */
.accordion-client-logo {
    height: 30px;
    /* Altura discreta pero legible */
    width: auto;
    display: block;
    margin-bottom: 2px;
    /* Espacio antes del título del proyecto */

    /* TRUCO VISUAL: */
    /* Esto vuelve el logo blanco puro si el SVG original es negro o de color */
    /* Ajusta la opacidad para que no compita demasiado con el título */
    filter: brightness(0) invert(1) opacity(0.7);

    transition: opacity 0.3s ease;
}

/* Al pasar el ratón, el logo se ilumina al 100% */
.accordion-header:hover .accordion-client-logo {
    opacity: 1;
}

/* --- GENERAL LAYOUT --- */
.section-padding {
    padding: 100px var(--container-padding);
}

.border-top {
    border-top: 1px solid var(--border-color);
}

.container {
    max-width: 100%;
    margin: 0 auto;
}

.grid-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px;
}

.section-label {
    font-size: 14px;
    color: var(--text-muted);
    letter-spacing: 1px;
    /*position: sticky;*/
    top: 20px;
    margin-bottom: 20px;
    white-space: nowrap;
}

.big-lead {
    font-size: 32px;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 40px;
    color: var(--text-main);
}

/* --- SERVICES --- */
.services-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.service-item {
    background: rgba(56, 62, 78, 0.1);
    /* Using corporate #383e4e with very low opacity */
    border: 1px solid var(--border-color);
    padding: 40px;
    transition: background 0.3s;
}

.service-item:hover {
    background: var(--accent);
    /* Corporate dark blue on hover */
}

.service-item .num {
    display: block;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.service-item h3 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 400;
}

.service-item p {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* --- COMPARISON --- */
.bg-soft {
    background: linear-gradient(to bottom, var(--bg-color), #0a0a0a);
}

.section-title-large {
    /* CORRECCIÓN PRINCIPAL: */
    /* Usamos clamp para controlar el tamaño. */
    /* Mínimo 2rem (móvil), Ideal 4.5vw (antes 6vw), Máximo 5rem (desktop grande) */
    font-size: clamp(2rem, 5vw, 6rem);

    text-transform: uppercase;
    margin-bottom: 40px;
    /* Un poco más de aire con el grid */
    margin-top: 10px;
    text-align: center;

    /* Aseguramos que ocupe el ancho pero no se desborde */
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    font-weight: 600;
    white-space: nowrap;
    /* Mantiene una sola línea */
    letter-spacing: -1px;
    /* Truco: juntar un poco las letras ayuda a que quepan */
    line-height: 1.2;
}

/* Ajuste específico para móviles muy pequeños si aún se corta */
@media (max-width: 480px) {
    .section-title-large {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
        /* Un poco más agresivo en móvil */
        white-space: normal;
        /* Permitir salto de línea solo en pantallas muy estrechas si es necesario */
        line-height: 1;
    }
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    /* Removing gap for borders */
    border: 1px solid var(--border-color);
    /* Aseguramos que el grid no se salga del contenedor padre */
    max-width: 100%;
    overflow: hidden;
    border-radius: 12px;
    /* Opcional: suavizar esquinas del bloque entero */
}

.comp-col {
    padding: 60px;
}

.comp-col.typical {
    border-right: 1px solid var(--border-color);
}

.comp-col.ours {
    background: rgba(56, 62, 78, 0.1);
    /* Subtle Tint */
}

.comp-header {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--text-main);
}

.comp-col ul li {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    position: relative;
    padding-left: 20px;
}

.comp-col.typical ul li::before {
    content: "×";
    position: absolute;
    left: 0;
    color: #666;
}

.comp-col.ours ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--text-main);
}

/* RESPONSIVE PARA EL GRID DE COMPARACIÓN */
/* Añadimos esto para que no se rompa en móvil */
@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        /* Una sola columna */
    }

    .comp-col.typical {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .comp-col {
        padding: 30px;
        /* Menos padding en móvil */
    }
}

/* --- LAYOUT HEADER --- */
.works-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Alinea texto abajo con botones */
    margin-bottom: 50px;
    flex-wrap: wrap;
    gap: 20px;
}

/* --- BOTONES DE NAVEGACIÓN (Flechas) --- */
.carousel-nav {
    display: flex;
    gap: 15px;
}

.nav-btn {
    width: 60px;
    /* Tamaño generoso */
    height: 60px;
    border-radius: 50%;
    /* Círculo perfecto */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #ffffff;
    /* Fondo blanco como en tu imagen */
    color: #050505;
    /* Flecha negra */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.nav-btn:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}

/* --- CONTENEDOR DE LA PISTA (TRACK) --- */
.projects-carousel {
    display: flex;
    /* Activa el modo flexible */
    flex-direction: row;
    /* Obliga a dirección horizontal */
    flex-wrap: nowrap;
    /* ¡CLAVE! Prohíbe que las tarjetas bajen de línea */
    gap: 40px;
    /* Espacio entre tarjetas */
    overflow-x: auto;
    /* Activa el scroll lateral */
    align-items: flex-start;
    /* Alinea todo arriba */

    /* Aseguramos que ocupe todo el ancho disponible */
    width: 100%;

    /* Espaciado para que no se corte la sombra inferior */
    padding-bottom: 60px;
    /* Un poco de margen a los lados para que respire al hacer scroll */
    padding-left: 20px;
    padding-right: 20px;

    /* Scroll suave */
    scroll-behavior: smooth;

    /* Ocultar barra de scroll (Estética limpia) */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

/* Ocultar barra en Chrome/Safari */
.projects-carousel::-webkit-scrollbar {
    display: none;
}

/* --- TARJETA INDIVIDUAL --- */
.project-card {
    /* ¡CLAVE! flex: 0 0 auto significa: 
       0 -> No crezcas más de lo necesario
       0 -> No te encojas aunque falte espacio (fuerza el scroll)
       auto -> Usa tu tamaño base */
    flex: 0 0 auto;

    width: 600px;
    /* Ancho fijo para desktop */
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;

    /* Animaciones de entrada */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s, transform 0.6s;
}

/* --- RESPONSIVE (Móvil) --- */
/* Importante: en móvil 600px es demasiado, ajustamos al ancho de pantalla */
@media (max-width: 768px) {
    .project-card {
        width: 85vw;
        /* 85% del ancho de la pantalla del móvil */
        min-width: 85vw;
    }
}

.project-card.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- MARCO VISUAL Y LOGO --- */
.card-visual-frame {
    position: relative;
    width: 100%;
    height: 500px;
    /* AUMENTADO: Altura fija considerable */
    border-radius: 32px;
    /* Más redondeado */
    overflow: hidden;
    background-color: #1a1d24;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 1, 0.3, 1);
    opacity: 0.9;
}

/* Badge del Logo (Central) */
.client-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    /* AUMENTADO: Logo mucho más grande */
    height: 130px;
    background-color: #ffffff;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    z-index: 2;
    transition: transform 0.3s ease;
}

.client-badge img {
    width: 100px;
    /* Logo interior más grande */
    height: auto;
}

/* Hover Effects */
.project-card:hover .project-img {
    transform: scale(1.05);
}

.project-card:hover .client-badge {
    transform: translate(-50%, -50%) scale(1.1);
}

/* --- TEXTO Y ACORDEÓN --- */
.card-info {
    padding: 0 10px;
}

.p-title {
    font-size: 1.8rem;
    /* Título más grande */
    color: #fff;
    margin-bottom: 8px;
}

.p-desc {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* El contenedor oculto */
.case-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    color: #a0a0a0;
    font-size: 1rem;
    line-height: 1.6;
}

.case-details p {
    margin-bottom: 15px;
}

/* Botón View Case */
.view-case-btn {
    background: none;
    border: none;
    color: #fff;
    font-family: var(--font-main);
    font-size: 1rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 2px;
    margin-top: 10px;
    transition: color 0.3s, border-color 0.3s;
}

.view-case-btn:hover {
    color: var(--text-muted);
    border-color: var(--text-muted);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .project-card {
        min-width: 85vw;
    }

    .card-visual-frame {
        height: 350px;
    }

    .client-badge {
        width: 100px;
        height: 100px;
    }

    .client-badge img {
        width: 50px;
    }

    .carousel-nav {
        display: none;
    }

    /* Ocultar flechas en móvil (se usa swipe) */
}

/* --- TEAM --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    max-width: 1200px;
    /* Restringimos el ancho total del bloque */
    margin: 0 auto;
    /* Centramos el bloque en la página */
    gap: 15px;
    /* Reducimos el hueco (antes 20px) */
}

.team-card {
    max-width: 100%;
    /* Ahora la tarjeta llenará su columna, que ya es estrecha */
}

.img-wrapper {
    width: 100%;
    aspect-ratio: 1;
    /* Square */
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--accent);
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s, transform 0.5s;
}

.team-card:hover .img-wrapper img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.team-info h4 {
    font-size: 25px;
    margin-bottom: 5px;
}

.team-info span {
    display: block;
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.team-info a {
    font-size: 14px;
    border-bottom: 1px solid var(--text-muted);
    padding-bottom: 2px;
}

/* --- CTA SECTION --- */
.cta-section {
    padding: 150px 0;
    text-align: center;
}

.cta-big-link {
    font-size: 8vw;
    color: var(--text-muted);
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.cta-big-link span {
    font-size: 6vw;
    transition: transform 0.3s;
}

.cta-big-link:hover {
    color: var(--text-main);
}

.cta-big-link:hover span {
    transform: translateX(20px);
}

/* --- FOOTER --- */
footer {
    padding: 80px var(--container-padding);
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
    flex-wrap: wrap;
    gap: 60px;
}

.footer-branding .footer-logo {
    height: 40px;
    margin-bottom: 20px;
}

.footer-branding p {
    color: var(--text-muted);
    max-width: 200px;
}

.footer-nav {
    display: flex;
    gap: 80px;
}

.f-col h4 {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.f-col a,
.f-col p {
    display: block;
    margin-bottom: 10px;
    color: var(--text-main);
    font-size: 16px;
    transition: opacity 0.3s;
}

.f-col a:hover {
    opacity: 0.6;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .grid-layout {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .hero-title {
        font-size: 12vw;
    }

    .content-inner {
        padding: 0;
        flex-direction: column;
        gap: 20px;
    }

    .accordion-header {
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .client-name {
        display: none;
    }

    /* Hide client name in header on mobile */
    .project-name {
        font-size: 20px;
    }
}

@media (max-width: 768px) {

    .nav-links {
        display: none;
    }

    .desk-only {
        display: none !important;
    }

    .hamburger-btn {
        display: flex;
    }

    /* Simplified mobile nav for now */
    .services-list,
    .comparison-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }

    .comp-col.typical {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .footer-nav {
        flex-direction: column;
        gap: 40px;
    }

    .nav-wrapper::after {
        content: "";
        display: none;
    }
}

/* --- MOBILE MENU STYLES --- */
.hamburger-btn {
    display: none;
    /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    /* Above overlay */
    padding: 0;
}

.hamburger-btn .bar {
    width: 100%;
    height: 2px;
    background-color: var(--text-main);
    transition: all 0.3s ease;
}

/* Hamburger Animation */
.hamburger-btn.active .bar:first-child {
    transform: translateY(9px) rotate(45deg);
}

.hamburger-btn.active .bar:last-child {
    transform: translateY(-9px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--bg-color);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.mobile-menu.active {
    opacity: 1;
    pointer-events: all;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 50px;
}

.mobile-nav-links a {
    font-size: 2rem;
    font-weight: 500;
    color: var(--text-main);
}

.mobile-nav-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.mobile-lang {
    font-size: 1.2rem;
    margin-top: 20px;
}

/* Mobile Polish */
@media (max-width: 480px) {
    :root {
        --container-padding: 20px;
        --section-gap: 80px;
    }

    .hero-title {
        font-size: 3.5rem;
        /* Better than 12vw on small screens */
    }

    .section-padding {
        padding: 80px 20px;
    }
}


/* Reveal Animation Class */
.reveal-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal-card.active {
    opacity: 1;
    transform: translateY(0);
}

/* --- BENTO GRID LAYOUT --- */

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columnas base */
    grid-auto-rows: minmax(280px, auto);
    /* Altura mínima */
    gap: 20px;
    position: relative;
}

/* Estilo Base de las Tarjetas */
.bento-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(182, 186, 197, 0.15);
    /* Borde sutil */
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Efecto Hover (sin JS complejo) */
.bento-card:hover {
    border-color: rgba(182, 186, 197, 0.4);
    background-color: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

/* Span Classes para el grid */
.span-2 {
    grid-column: span 2;
}

/* Contenido Interno */
.card-content {
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-text {
    z-index: 2;
    max-width: 60%;
    /* Dejar espacio para el visual en la tarjeta grande */
}

.bento-card h4 {
    font-size: 1.5rem;
    color: #fff;
    margin: 15px 0 10px 0;
    font-weight: 500;
}

.bento-card p {
    font-size: 1rem;
    color: #a0a0a0;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Badges Técnicos */
.tech-badge {
    display: inline-block;
    font-size: 0.7rem;
    color: #b6bac5;
    border: 1px solid rgba(182, 186, 197, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-family: monospace;
}

/* Lista de Formatos de Archivo */
.format-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.file-tag {
    font-size: 0.8rem;
    color: #888;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.file-tag .ext {
    color: #fff;
    font-weight: 600;
}

/* --- VISUAL ABSTRACTO: DOCUMENT STACK --- */
.card-visual {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 140px;
    height: 180px;
    perspective: 1000px;
}

.doc-stack {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(-15deg) rotateX(10deg);
}

.doc-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #1a1d24;
    border: 1px solid rgba(182, 186, 197, 0.3);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.layer-1 {
    transform: translateZ(-20px) translateX(20px);
    opacity: 0.5;
}

.layer-2 {
    transform: translateZ(-10px) translateX(10px);
    opacity: 0.7;
}

.layer-3 {
    transform: translateZ(0);
    background: linear-gradient(135deg, #232730, #1a1d24);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.doc-line {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.w-70 {
    width: 70%;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

.doc-status {
    margin-top: auto;
    font-size: 0.6rem;
    color: #E5FCF9;
    /* Green success color */
    font-family: monospace;
    text-align: right;
    animation: blink 2s infinite;
}

/* --- VISUAL ABSTRACTO: AGENT PULSE --- */
.visual-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.agent-pulse {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-dot {
    width: 10px;
    height: 10px;
    background: #b6bac5;
    border-radius: 50%;
    z-index: 2;
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #b6bac5;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.5;
}

.tech-mono {
    font-family: monospace;
    font-size: 0.7rem;
    color: #E5FCF9;
}

/* --- VISUAL ABSTRACTO: CODE --- */
.visual-code {
    background: #000;
    padding: 15px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.code-line {
    margin-bottom: 4px;
}

.indent {
    padding-left: 15px;
}

.c-purple {
    color: #c678dd;
}

.c-blue {
    color: #61afef;
}

.c-yellow {
    color: #e5c07b;
}

.c-green {
    color: #98c379;
}

/* --- CARD 4: ENTERPRISE --- */
.security-lock {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b6bac5;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
}

/* ANIMACIONES */
@keyframes blink {
    50% {
        opacity: 0.5;
    }
}

@keyframes ping {

    75%,
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        /* 2 columnas en tablet */
    }

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

@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
        /* 1 columna en móvil */
    }

    .span-2 {
        grid-column: span 1;
    }

    .card-visual {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: 140px;
        margin-top: 30px;
    }

    .card-text {
        max-width: 100%;
    }

    .doc-stack {
        transform: rotateY(-10deg) rotateX(10deg);
        margin: 0 auto;
        width: 120px;
    }
}

/* Efecto de atmósfera viva */
.ambient-light,
.ambient-light-2 {
    position: fixed;
    border-radius: 30%;
    filter: blur(100px);
    /* Desenfoque extremo */
    z-index: -1;
    /* Detrás de todo */
    opacity: 0.2;
    animation: float 20s infinite alternate;
}

.ambient-light {
    top: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: #383e4e;
    /* Tu azul oscuro corporativo */
}

.ambient-light-2 {
    bottom: 20%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #b6bac5 0%, #383e4e 100%);
    opacity: 0.15;
    /* Más sutil porque el gris claro es fuerte */
    animation-delay: -5s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(50px, 100px) scale(1.1);
    }

    100% {
        transform: translate(-20px, 50px) scale(0.9);
    }
}

/* --- PROCESS TIMELINE (NO CARDS) --- */

.section-header-wrapper {
    margin-bottom: 5rem;
    max-width: 700px;
}

.process-timeline {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Cada fila del proceso */
.timeline-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Mitad texto, mitad visual */
    gap: 60px;
    padding: 30px 0;
    border-top: 1px solid rgba(182, 186, 197, 0.2);
    /* Línea separadora fina */
    align-items: center;
}

/* El último item tiene borde final también */
.timeline-item:last-child {
    border-bottom: 1px solid rgba(182, 186, 197, 0.2);
}

/* COLUMNA IZQUIERDA: TEXTO */
.timeline-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px;
}

.step-number {
    font-family: 'Funnel Display', sans-serif;
    font-size: 4rem;
    /* Número gigante */
    color: #383e4e;
    /* Color corporativo oscuro */
    line-height: 1;
    margin-bottom: 20px;
    opacity: 0.9;
}

.timeline-content h3 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 400;
}

.timeline-content p {
    font-size: 1.1rem;
    color: #a0a0a0;
    line-height: 1.7;
    max-width: 90%;
}

/* COLUMNA DERECHA: WIDGETS VISUALES */
.timeline-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo base de los "Widgets" (Pantallitas) */
.visual-widget {
    background: #0a0a0a;
    /* Fondo muy oscuro */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* 1. AUDIT WIDGET */
.audit-widget {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.audit-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.9rem;
    color: #ccc;
}

.audit-row .check {
    color: #E5FCF9;
}

.audit-row.loading {
    opacity: 0.7;
}

.spinner {
    width: 12px;
    height: 12px;
    border: 2px solid #b6bac5;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 2. MATRIX WIDGET (REMASTERED) */
.matrix-widget {
    height: 240px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Aumentamos el padding izquierdo de 40px a 60px para dar aire al texto vertical */
    padding: 20px 20px 30px 60px;
}

/* El área del gráfico */
.m-grid {
    border-left: 2px solid #444;
    border-bottom: 2px solid #444;
    width: 100%;
    height: 100%;
    position: relative;
    background:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    /* Tamaño de la cuadrícula de fondo */
}

/* Etiquetas de los ejes */
.m-label {
    position: absolute;
    font-size: 0.65rem;
    color: #888;
    letter-spacing: 2px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0px;
}

.y-axis {
    /* Lo pegamos al borde izquierdo absoluto del contenedor (zona del padding) */
    left: 10px;
    top: 50%;
    /* Rotamos */
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;

    /* Aseguramos que el texto no se rompa */
    white-space: nowrap;

    /* Opcional: Centrar texto si definieras un ancho, pero con white-space vale */
    display: flex;
    align-items: center;
    gap: 8px;
    /* Espacio entre texto y flechita */
}

.x-axis {
    bottom: 10px;
    right: 20px;
}

/* Puntos */
.m-dot {
    width: 6px;
    height: 6px;
    background: #444;
    /* Color gris para puntos normales */
    border-radius: 50%;
    position: absolute;
    transition: all 0.3s ease;
}

/* Posiciones de ejemplo (Esfuerzo vs Impacto) */
.d1 {
    bottom: 20%;
    right: 20%;
}

/* Mucho esfuerzo, poco impacto */
.d2 {
    top: 20%;
    right: 30%;
}

/* Mucho esfuerzo, mucho impacto */
.d3 {
    bottom: 30%;
    left: 30%;
}

/* Poco esfuerzo, poco impacto */

/* EL TARGET (QUICK WIN: Top Left) */
.m-dot.target {
    top: 25%;
    left: 25%;
    width: 10px;
    height: 10px;
    background: #E5FCF9;
    box-shadow: 0 0 12px #E5FCF9;
    z-index: 2;
    cursor: pointer;
}

/* Tooltip mejorado */
.tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #383E4E;
    border: 1px solid #E5FCF9;
    color: #E5FCF9;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 1;
    z-index: 10;
}

/* Líneas guía (efecto técnico) */
.guideline-x,
.guideline-y {
    position: absolute;
    background: #383E4E;
    pointer-events: none;
}

/* Línea hacia el eje Y */
.guideline-x {
    height: 1px;
    width: 1000%;
    /* Suficientemente largo para llegar al eje */
    right: 100%;
    /* Empieza a la izquierda del punto */
    top: 50%;
}

/* Línea hacia el eje X */
.guideline-y {
    width: 1px;
    height: 1000%;
    bottom: 100%;
    /* Empieza abajo del punto */
    left: 50%;
}

/* Animación de pulso */
.m-dot.target {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 #E5FCF9;
    }

    70% {
        box-shadow: 0 0 0 10px rgba(4, 245, 124, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(4, 245, 124, 0);
    }
}

/* Ajuste Responsive */
@media (max-width: 900px) {
    .matrix-widget {
        padding: 20px 10px 30px 30px;
        /* Ajuste fino para móviles */
    }
}

/* 3. CODE WIDGET */
.code-widget {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
}

.c-header {
    display: flex;
    gap: 6px;
    margin-bottom: 15px;
}

.c-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
}

.c-line {
    margin-bottom: 6px;
    color: #a0a0a0;
}

.indent {
    margin-left: 20px;
}

.indent2 {
    margin-left: 40px;
}

.kwd {
    color: #c678dd;
}

/* Purple */
.def {
    color: #e5c07b;
}

/* Yellow */
.fn {
    color: #61afef;
}

/* Blue */
.str {
    color: #98c379;
}

/* Green */
.c-status {
    margin-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
    color: #04f57c;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* 4. GRAPH WIDGET (REMASTERED) */
.graph-widget {
    height: 240px;
    /* Misma altura que la matriz para consistencia */
    padding: 20px 20px 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.graph-inner {
    display: flex;
    flex: 1;
    width: 100%;
    gap: 10px;
}

/* --- EJE Y --- */
.graph-y-axis {
    display: flex;
    flex-direction: row;
    /* Título vertical + Valores */
    align-items: center;
    width: 40px;
    /* Ancho fijo para el eje Y */
}

.axis-label-y {
    writing-mode: vertical-lr;
    /* Texto vertical de abajo a arriba */
    transform: rotate(180deg);
    font-size: 0.6rem;
    color: #666;
    letter-spacing: 2px;
    white-space: nowrap;
    margin-right: 5px;
    font-weight: 600;
}

.y-values {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 85%;
    /* Alineado con el área de barras */
    padding-bottom: 20px;
    /* Compensar labels X */
    font-family: monospace;
    font-size: 0.7rem;
    color: #888;
    text-align: right;
    width: 100%;
}

/* --- ÁREA DE GRÁFICO --- */
.graph-area {
    position: relative;
    flex: 1;
    /* Ocupa el resto del ancho */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20px;
    /* Espacio para etiquetas X */
    border-left: 1px solid #444;
    border-bottom: 1px solid #444;
}

/* Grid de fondo */
.graph-grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 20px;
    /* Igual que graph-area */
    z-index: 0;
}

.g-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

/* Contenedor de Barras */
.graph-bars-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 100%;
    width: 100%;
    z-index: 1;
    padding: 0 10px;
}

.bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
    gap: 8px;
    position: relative;
}

/* Estilo de la Barra */
.g-bar {
    width: 12px;
    /* Barras finas y elegantes */
    background: #383e4e;
    /* Color base oscuro */
    border-radius: 2px 2px 0 0;
    position: relative;
    transition: height 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Alturas porcentuales */
.h-30 {
    height: 30%;
}

.h-45 {
    height: 45%;
}

.h-55 {
    height: 55%;
}

.h-75 {
    height: 75%;
}

.h-90 {
    height: 90%;
}

/* Barra Activa (Éxito) */
.g-bar.active {
    background: linear-gradient(to top, #383e4e, #E5FCF9);
    box-shadow: 0 0 15px rgba(4, 137, 245, 0.2);
}

/* Brillo superior en la barra activa */
.pulse-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    box-shadow: 0 0 10px #fff;
}

/* Tooltip al hacer hover en barras */
.g-bar:hover .bar-tooltip {
    opacity: 0.5;
    transform: translateX(-50%) translateY(-5px);
}

.bar-tooltip {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: #E5FCF9;
    color: #000;
    font-size: 0.6rem;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
    white-space: nowrap;
}

/* Eje X Etiquetas */
.x-val {
    font-family: monospace;
    font-size: 0.7rem;
    color: #888;
    position: absolute;
    bottom: -20px;
    /* Fuera del área del gráfico */
}

/* Título Eje X General */
.axis-label-x {
    text-align: center;
    font-size: 0.6rem;
    color: #666;
    letter-spacing: 2px;
    font-weight: 600;
    margin-top: 5px;
    padding-left: 40px;
    /* Compensar el ancho del eje Y */
}

/* ANIMACIONES */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    50% {
        opacity: 0.5;
        transform: scale(0.9);
    }
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .timeline-item {
        grid-template-columns: 1fr;
        /* Una columna */
        gap: 30px;
        text-align: left;
    }

    .timeline-visual {
        justify-content: flex-start;
        /* Alinear visual a la izquierda en móvil */
    }

    .visual-widget {
        max-width: 100%;
    }

    .step-number {
        font-size: 3rem;
        margin-bottom: 10px;
    }
}

@layer base, layout, moderncss;

@layer moderncss {
    @layer layout {

        /* Draw a particles ring in the background of the home screen */
        /* I am using Houdini PaintWorklets for this */
        @layer ring-particles {
            @supports (background: paint(something)) {
                @layer particles {
                    #home {
                        --ring-radius: 100;
                        --ring-thickness: 600;
                        --particle-count: 80;
                        --particle-rows: 25;
                        --particle-size: 2;
                        --particle-color: #b6bac5;

                        --particle-min-alpha: 0.1;
                        --particle-max-alpha: 1.0;

                        --seed: 200;

                        background-image: paint(ring-particles);
                    }
                }

                @layer animation {
                    @property --animation-tick {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 0;
                    }

                    @property --ring-radius {
                        syntax: '<number> | auto';
                        inherits: false;
                        initial-value: auto;
                    }

                    @keyframes ripple {
                        0% {
                            --animation-tick: 0;
                        }

                        100% {
                            --animation-tick: 1;
                        }
                    }

                    @keyframes ring {
                        0% {
                            --ring-radius: 150;
                        }

                        100% {
                            --ring-radius: 250;
                        }
                    }

                    #home {
                        animation: ripple 6s linear infinite, ring 6s ease-in-out infinite alternate;
                    }
                }

                @layer follow-mouse {
                    @property --ring-x {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 50;
                    }

                    @property --ring-y {
                        syntax: '<number>';
                        inherits: false;
                        initial-value: 50;
                    }

                    #home {
                        /* @NOTE: Requires JS until the CSSWG resolves on https://github.com/w3c/csswg-drafts/issues/6733 */
                        transition: --ring-x 3s ease,
                            --ring-y 3s ease;

                    }
                }
            }
        }
    }

    @layer home {
        #home {
            h1 svg {
                height: 1em;
                width: auto;
                display: block;
                margin: 0 auto;
            }

            p {
                font-size: 4.5em;
                text-align: center;
                font-weight: 500;

                color: var(--theme-surface-on-surface);

                span {
                    display: block;
                    font-size: 0.7em;
                    color: var(--theme-surface-on-surface-variant);
                }
            }

            .cta {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 0.3em;
                justify-content: center;

                width: 90%;
                margin: 0 auto;

                button {
                    font-size: 1.15em;
                }
            }
        }
    }
}

@layer base {
    html {
        background: var(--theme-surface-surface);
        font-family: "Google Sans Flex", sans-serif;
        font-weight: 400;

        font-size: 16px;

        color: var(--theme-surface-on-surface);
    }


    h2 {
        font-size: 2.5em;
        font-weight: 350;
        margin: 0.5rem 0;
        line-height: 1;

        @media (width >=930px) {
            width: 50%;
            max-width: 25ch;
        }
    }

    p {
        color: var(--theme-surface-on-surface-variant);
    }

    @scope (.dark) {
        p {
            color: var(--theme-surface-surface);
        }
    }
}

/* --- LANGUAGE SWITCHER --- */
.lang-switch-btn {
    background: transparent;
    border: none;
    font-family: var(--font-main);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    transition: opacity 0.3s;
}

.lang-opt {
    color: var(--text-muted);
    /* #b6bac5 por defecto */
    font-weight: 400;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

.separator {
    color: var(--border-color);
}

/* Estado Activo (El idioma seleccionado) */
.lang-opt.active {
    color: var(--text-main);
    /* Blanco en dark, Negro en light */
    font-weight: 600;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Hover effect */
.lang-switch-btn:hover .lang-opt:not(.active) {
    color: var(--text-main);
    opacity: 0.7;
}

/* --- TRANSICIÓN SUAVE DE TEXTO (INNOVACIÓN) --- */
/* Esta clase se añadirá via JS al body cuando cambiemos idioma */
body.lang-changing * {
    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.fade-out-text {
    opacity: 0 !important;
    transform: translateY(-2px);
}