/* ==========================================================================
   TRIT SOFTWARE FACTORY - ESTILOS PRINCIPALES
   Landing page limpia, moderna y modular preparada para personalización.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES GLOBALES (Personaliza colores y fuentes aquí)
   -------------------------------------------------------------------------- */
:root {
    /* Paleta de colores basada en el logo TRIT */
    --color-primary: #5c7b64;          /* Verde salvia principal */
    --color-primary-light: #789a80;    /* Verde claro / hover */
    --color-primary-dark: #3e5644;     /* Verde oscuro para contrastes */
    --color-accent: #c76f52;           /* Terracota / Coral vibrante */
    --color-accent-hover: #b05c41;     /* Terracota oscuro hover */
    
    /* Neutros y Fondos */
    --color-bg: #f8faf9;               /* Fondo general unificado */
    --color-surface: #ffffff;          /* Fondo tarjetas */
    --color-surface-alt: #f0f4f1;      /* Fondo componentes secundarios */
    --color-border: #e2e8e5;          /* Bordes suaves */
    
    /* Tipografía y Textos */
    --color-text-main: #243026;        /* Texto principal */
    --color-text-muted: #5f7063;       /* Texto secundario / subtítulos */
    --color-white: #ffffff;
    
    /* Fuentes */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    /* Dimensiones y Efectos */
    --container-width: 1200px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 10px 25px -5px rgba(62, 86, 68, 0.08);
    --shadow-lg: 0 20px 35px -8px rgba(62, 86, 68, 0.12);
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* Tokens Navbar Estilo Cápsula Glassmorphism Flotante */
    --color-nav-bg: rgba(255, 255, 255, 0.88);
    --color-nav-bg-scrolled: rgba(255, 255, 255, 0.96);
    --color-nav-border: rgba(62, 86, 68, 0.12);
    --color-nav-text: #4e6052;
    --color-nav-text-hover: #1e2b20;
    --color-nav-text-active: #243026;

    /* Tokens Footer Estilo Howitzer (Paleta Clara) */
    --color-footer-bg: #eaf0ec;
    --color-footer-surface: #ffffff;
    --color-footer-border: #d4e0d8;
    --color-footer-text: #4a5c4e;
    --color-footer-text-muted: #526656;
    --color-footer-heading: #243026;

    /* Efectos 3D y Fondo Borroso */
    --color-card-glass: rgba(255, 255, 255, 0.76);
    --color-card-border: rgba(255, 255, 255, 0.88);
    --color-card-border-hover: rgba(120, 154, 128, 0.5);
    --color-orb-primary: rgba(92, 123, 100, 0.38);
    --color-orb-accent: rgba(199, 111, 82, 0.32);
    --color-orb-light: rgba(120, 154, 128, 0.3);
    --color-orb-subtle: rgba(199, 111, 82, 0.18);
    --color-blur-overlay: rgba(248, 250, 249, 0.45);
    --shadow-card-3d: 0 18px 40px -12px rgba(62, 86, 68, 0.16), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
    --shadow-card-3d-hover: 0 28px 56px -12px rgba(62, 86, 68, 0.24), 0 12px 28px -4px rgba(199, 111, 82, 0.18);

    /* Sección Contacto con identidad visual del logo TRIT (Bosque oscuro y esmeralda) */
    --color-contact-bg-start: #f0f5f2;
    --color-contact-bg-end: #eaf0ec;
    --color-contact-card-bg-start: #18281d;
    --color-contact-card-bg-end: #132017;
    --color-contact-card-bg: linear-gradient(155deg, #18281d 0%, #132017 100%);
    --color-contact-card-border: rgba(120, 154, 128, 0.28);
    --color-contact-card-glow-terracotta: rgba(199, 111, 82, 0.32);
    --color-contact-card-glow-salvia: rgba(92, 123, 100, 0.26);
    --color-contact-card-glow: rgba(199, 111, 82, 0.32);
    --color-contact-input-bg: #0e1911;
    --color-contact-input-focus-bg: #122116;
    --color-contact-input-border: rgba(120, 154, 128, 0.24);

    /* Burbujas y partículas difuminadas corporativas de contacto */
    --color-contact-blob-start: #9fbda1;
    --color-contact-blob-deep: rgba(36, 48, 38, 0.45);
    --color-contact-glow-start: #e8957b;
    --color-contact-glow-mid: rgba(199, 111, 82, 0.65);
    --color-contact-glow-end: rgba(92, 123, 100, 0.25);
    --color-contact-ambient-start: rgba(120, 154, 128, 0.55);
    --color-contact-ambient-end: rgba(62, 86, 68, 0.25);
    --color-contact-particle-1: rgba(159, 189, 161, 0.85);
    --color-contact-particle-2: rgba(199, 111, 82, 0.65);

    /* Estados y badges semánticos */
    --color-status-dot: #4ade80;
    --color-status-text: #c0ded0;
    --color-status-bg: rgba(92, 123, 100, 0.2);
    --color-status-border: rgba(159, 189, 161, 0.25);
    --color-glow-green: rgba(92, 123, 100, 0.22);
    --color-glow-accent: rgba(199, 111, 82, 0.08);

    /* Estados de alerta del formulario */
    --color-alert-success-bg: #d1fae5;
    --color-alert-success-text: #065f46;
    --color-alert-success-border: #a7f3d0;
    --color-alert-error-bg: #fee2e2;
    --color-alert-error-text: #991b1b;
    --color-alert-error-border: #fecaca;

    /* Tokens de componentes e isotipo */
    --color-badge-bg: rgba(120, 154, 128, 0.15);
    --color-cube-sage: #9fbda1;
    --color-cube-terracotta: #c9785b;
    --color-cube-terracotta-dark: #a85338;
    --color-focus-ring-accent: rgba(199, 111, 82, 0.4);
    --color-focus-ring-primary: rgba(120, 154, 128, 0.32);
    --shadow-accent-sm: 0 4px 14px rgba(199, 111, 82, 0.3);
    --shadow-accent-md: 0 6px 20px rgba(199, 111, 82, 0.4);
}

/* --------------------------------------------------------------------------
   2. RESET Y BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    line-height: 1.6;
    overflow-x: clip;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

button, input, textarea {
    font-family: inherit;
}

.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
}

/* Utilidad accesible para lectores de pantalla */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   3. BOTONES Y COMPONENTES REUTILIZABLES
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.7rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    box-shadow: var(--shadow-accent-sm);
}

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

.btn-outline {
    background-color: transparent;
    color: var(--color-primary-dark);
    border: 2px solid var(--color-primary-light);
}

.btn-outline:hover {
    background-color: var(--color-primary-light);
    color: var(--color-white);
    border-color: var(--color-primary-light);
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.badge {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    background-color: var(--color-badge-bg);
    color: var(--color-primary-dark);
    margin-bottom: 1rem;
}

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

.section-header h2 {
    font-size: 2.2rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.8rem;
    line-height: 1.25;
}

.section-header p {
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   4. NAVBAR (Floating Capsule Light Glassmorphism Header)
   -------------------------------------------------------------------------- */
.navbar {
    position: fixed;
    top: 1rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: min(92%, 720px);
    height: 56px;
    z-index: 1000;
    border-radius: 999px;
    transition: transform var(--transition-normal);
}

/* Capa de fondo GlassSurface (React Bits Adapter Optimizado Cross-Browser) */
.navbar-glass {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(14px) saturate(1.45);
    -webkit-backdrop-filter: blur(14px) saturate(1.45);
    border: 1px solid rgba(255, 255, 255, 0.60);
    box-shadow:
        0 0 2px 1px rgba(255, 255, 255, 0.85) inset,
        0 1px 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 1px 0 rgba(0, 0, 0, 0.03) inset,
        0 8px 32px -4px rgba(36, 48, 38, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.02);
    transition: opacity var(--transition-normal), background var(--transition-normal), backdrop-filter var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.glass-surface {
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass-surface__filter {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: -1;
}

.glass-surface--svg,
.glass-surface--fallback {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(14px) saturate(1.45);
    -webkit-backdrop-filter: blur(14px) saturate(1.45);
    border: 1px solid rgba(255, 255, 255, 0.60);
    box-shadow:
        0 0 2px 1px rgba(255, 255, 255, 0.85) inset,
        0 1px 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 1px 0 rgba(0, 0, 0, 0.03) inset,
        0 8px 32px -4px rgba(36, 48, 38, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.02);
}

.navbar.is-scrolled .navbar-glass,
.navbar.is-scrolled .navbar-glass.glass-surface--svg,
.navbar.is-scrolled .navbar-glass.glass-surface--fallback {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow:
        0 0 2px 1px rgba(255, 255, 255, 0.95) inset,
        0 1px 2px 0 rgba(255, 255, 255, 1) inset,
        0 12px 36px -6px rgba(36, 48, 38, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

.navbar .container,
.navbar-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: 100%;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Zona izquierda: Logotipo de la marca */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}

.navbar-brand:hover {
    opacity: 0.9;
}

.navbar-brand img {
    height: 28px;
    width: 28px;
    object-fit: contain;
    transition: transform var(--transition-fast);
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

.navbar-brand span {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    letter-spacing: -0.02em;
}

/* Zona derecha: Enlaces de todas las secciones agrupados */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: 1.65rem;
}

.nav-link {
    font-weight: 500;
    color: var(--color-nav-text);
    font-size: 0.92rem;
    text-decoration: none;
    position: relative;
    padding: 0.35rem 0;
    transition: color var(--transition-fast);
}

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

.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"] {
    color: var(--color-nav-text-active);
    font-weight: 600;
}

.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link[aria-current="page"]::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-link:focus-visible,
.navbar-brand:focus-visible,
.menu-toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Botón menú hamburguesa accesible para móvil */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary-dark);
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color var(--transition-fast);
}

.menu-toggle:hover {
    background-color: rgba(62, 86, 68, 0.08);
}

.menu-toggle svg {
    display: block;
    width: 24px;
    height: 24px;
}

.menu-toggle .icon-close {
    display: none;
}

.menu-toggle[aria-expanded="true"] .icon-menu {
    display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
    display: block;
}

.navbar-mobile-drawer {
    display: none;
}

/* --------------------------------------------------------------------------
   5. SECCIÓN HERO (INICIO - 100vh / 100dvh)
   Remodelada desde cero con animación de trazo SVG para logo y TRIT.
   -------------------------------------------------------------------------- */
.hero {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding-top: 84px;
    padding-bottom: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow-x: clip;
    overflow-y: visible;
    background-color: var(--color-bg);
    background-image: 
        radial-gradient(var(--color-border) 1.2px, transparent 1.2px),
        radial-gradient(circle at 80% 20%, rgba(92, 123, 100, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(199, 111, 82, 0.07) 0%, transparent 50%);
    background-size: 26px 26px, 100% 100%, 100% 100%;

    /* Variables reactivas de iluminación física (inician en 0 y son gobernadas 100% por los godrays) */
    --hero-shadow-x: 0px;
    --hero-shadow-y: 0px;
    --hero-shadow-blur: 0px;
    --hero-shadow-alpha: 0;
    --hero-shadow-soft-x: 0px;
    --hero-shadow-soft-y: 0px;
    --hero-shadow-soft-blur: 0px;
    --hero-shadow-soft-alpha: 0;
}

/* Contenedor y Canvas de Godrays (Luz crepuscular superior izquierda con derrame a servicios) */
.hero-godrays-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + clamp(180px, 24vh, 280px));
    pointer-events: none;
    z-index: 1;
}

.hero-godrays-canvas {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* Difuminado suave del fondo base que no bloquea los rayos de luz */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 140px;
    background: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);
    pointer-events: none;
    z-index: 0;
}

.hero-container {
    width: 92%;
    max-width: var(--container-width);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
}

/* Escenario Central de Marca: TRIT a la izquierda, Logotipo a la derecha */
.hero-brand-stage {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(1.8rem, 4.5vw, 4.8rem);
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    padding: clamp(0.75rem, 2vh, 2rem) clamp(1rem, 2.5vw, 2.5rem);
    border-radius: var(--radius-lg);
    background: transparent;
}

/* Bloque Izquierdo: Tipografía Vectorial TRIT y Sublínea centrada */
.hero-brand-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-brand-trit-svg {
    width: clamp(220px, 28vw, 480px);
    height: auto;
    overflow: visible;
    display: block;
    shape-rendering: geometricPrecision;
    will-change: transform, filter;
    transform: translateZ(0);
    filter: 
        drop-shadow(var(--hero-shadow-soft-x) var(--hero-shadow-soft-y) var(--hero-shadow-soft-blur) rgba(62, 86, 68, var(--hero-shadow-soft-alpha)))
        drop-shadow(var(--hero-shadow-x) var(--hero-shadow-y) var(--hero-shadow-blur) rgba(36, 48, 38, var(--hero-shadow-alpha)));
    transition: filter 0.08s linear;
}

.hero-brand-subline {
    display: block;
    width: 100%;
    text-align: center;
    font-size: clamp(0.72rem, 1.15vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--color-accent);
    text-shadow: var(--hero-shadow-soft-x) var(--hero-shadow-soft-y) 6px rgba(62, 86, 68, var(--hero-shadow-soft-alpha));
    margin-top: clamp(0.5rem, 1.2vh, 1rem);
    opacity: 0;
    animation: heroSublineFade 0.8s ease 1.5s forwards;
    white-space: nowrap;
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Bloque Derecho: Logotipo de Cintas Isométricas */
.hero-brand-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.hero-brand-logo-svg {
    width: clamp(140px, 21.5vw, 390px);
    height: clamp(140px, 21.5vw, 390px);
    overflow: visible;
    display: block;
    shape-rendering: geometricPrecision;
    will-change: transform, filter;
    transform: translateZ(0);
    filter: 
        drop-shadow(var(--hero-shadow-soft-x) var(--hero-shadow-soft-y) var(--hero-shadow-soft-blur) rgba(62, 86, 68, var(--hero-shadow-soft-alpha)))
        drop-shadow(var(--hero-shadow-x) var(--hero-shadow-y) var(--hero-shadow-blur) rgba(36, 48, 38, var(--hero-shadow-alpha)));
    transition: filter 0.08s linear;
}

/* Animación de Trazado SVG para Cintas Isométricas del Logo */
.logo-draw-path {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    stroke-width: 1.2;
    fill-opacity: 0;
    animation: heroLogoStroke 1.5s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

.logo-draw-path.p1 { stroke: var(--color-primary); fill: var(--color-primary); animation-delay: 0.1s; }
.logo-draw-path.p2 { stroke: var(--color-accent); fill: var(--color-accent); animation-delay: 0.25s; }
.logo-draw-path.p3 { stroke: var(--color-primary); fill: var(--color-primary); animation-delay: 0.4s; }
.logo-draw-path.p4 { stroke: var(--color-primary); fill: var(--color-primary); animation-delay: 0.55s; }

@keyframes heroLogoStroke {
    0% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
    }
    40% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }
    90%, 100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

/* Animación de Trazado SVG para las Letras T-R-I-T */
.trit-letter-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    stroke-width: 6;
    stroke: var(--color-primary-dark);
    fill: var(--color-primary-dark);
    fill-opacity: 0;
    animation: heroTritStroke 1.5s cubic-bezier(0.2, 0, 0.2, 1) forwards;
}

.trit-letter-path.t1 { animation-delay: 0.35s; }
.trit-letter-path.r  { animation-delay: 0.5s; }
.trit-letter-path.i  { animation-delay: 0.65s; }
.trit-letter-path.t2 { animation-delay: 0.8s; }

@keyframes heroTritStroke {
    0% {
        stroke-dashoffset: 100;
        fill-opacity: 0;
    }
    40% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }
    90%, 100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
    }
}

@keyframes heroSublineFade {
    0% {
        opacity: 0;
        letter-spacing: 0.14em;
        transform: translateY(3px);
    }
    100% {
        opacity: 1;
        letter-spacing: 0.26em;
        transform: translateY(0);
    }
}

/* Indicador de Desplazamiento Inferior */
.hero-scroll-btn {
    position: absolute;
    bottom: clamp(12px, 2.5vh, 26px);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
    animation: heroScrollBounce 2.2s infinite ease-in-out;
    padding: 6px;
    z-index: 10;
}

.hero-scroll-btn:hover {
    color: var(--color-accent-hover);
    transform: translateX(-50%) translateY(2px);
}

.hero-scroll-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.hero-scroll-btn svg {
    color: currentColor;
}

@keyframes heroScrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

/* --------------------------------------------------------------------------
   6. SERVICIOS (3D Floating Cards & Blurred Background)
   -------------------------------------------------------------------------- */
.services {
    position: relative;
    z-index: 1;
    padding: 7rem 0 8.5rem 0;
    background: var(--color-bg);
    overflow: hidden;
}

/* Atmósfera decorativa fluida y borrosa con fusión orgánica continua */
.services-bg-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, black 14%, black 86%, transparent 100%);
}

.decor-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(75px);
    opacity: 0.75;
    will-change: transform;
}

.decor-orb-primary {
    width: 540px;
    height: 540px;
    top: 0;
    left: -80px;
    background: radial-gradient(circle, var(--color-orb-primary) 0%, var(--color-badge-bg) 60%, transparent 80%);
    animation: orbDrift1 20s ease-in-out infinite alternate;
}

.decor-orb-accent {
    width: 500px;
    height: 500px;
    bottom: 0;
    right: -60px;
    background: radial-gradient(circle, var(--color-orb-accent) 0%, rgba(199, 111, 82, 0.12) 60%, transparent 80%);
    animation: orbDrift2 24s ease-in-out infinite alternate;
}

.decor-orb-light {
    width: 460px;
    height: 460px;
    top: 25%;
    left: 36%;
    background: radial-gradient(circle, var(--color-orb-light) 0%, rgba(62, 86, 68, 0.1) 60%, transparent 80%);
    animation: orbDrift3 28s ease-in-out infinite alternate;
}

.decor-orb-subtle {
    width: 360px;
    height: 360px;
    top: 10%;
    right: 18%;
    background: radial-gradient(circle, var(--color-orb-subtle) 0%, transparent 75%);
    animation: orbDrift1 22s ease-in-out infinite alternate-reverse;
}

.services-backdrop-blur {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    background: rgba(248, 250, 249, 0.45);
}

@keyframes orbDrift1 {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(70px, 50px, 0) scale(1.1); }
}

@keyframes orbDrift2 {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-60px, -40px, 0) scale(1.08); }
}

@keyframes orbDrift3 {
    0% { transform: translate3d(0, 0, 0) scale(0.95); }
    100% { transform: translate3d(50px, -35px, 0) scale(1.12); }
}

.services-container {
    position: relative;
    z-index: 2;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2.2rem;
}

/* Wrapper de levitación continua para cada tarjeta */
.service-card-wrapper {
    height: 100%;
    display: flex;
    perspective: 1000px;
    animation: cardFloat 6s ease-in-out infinite;
    animation-delay: calc(var(--card-index, 0) * 1.25s);
    will-change: transform;
}

.service-card-wrapper:hover {
    animation-play-state: paused;
}

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-14px);
    }
}

/* Tarjeta 3D interactiva */
.service-card {
    position: relative;
    width: 100%;
    background: var(--color-card-glass);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
    padding: 2.4rem 2rem;
    box-shadow: var(--shadow-card-3d), inset 0 1px 1px rgba(255, 255, 255, 0.95);
    transition: transform 0.15s ease-out, box-shadow var(--transition-normal), border-color var(--transition-normal);
    cursor: pointer;
}

.service-card:hover {
    box-shadow: var(--shadow-card-3d-hover), inset 0 1px 2px rgba(255, 255, 255, 1);
    border-color: var(--color-card-border-hover);
}

/* Reflejo especular (Shine) */
.service-card-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.1) 45%, transparent 75%);
    transition: opacity var(--transition-fast);
    z-index: 1;
}

.service-card:hover .service-card-shine {
    opacity: 1;
}

/* Interior de tarjeta con estructura contenida */
.service-card-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-icon {
    width: 58px;
    height: 58px;
    border-radius: var(--radius-md);
    background: rgba(120, 154, 128, 0.18);
    border: 1px solid rgba(120, 154, 128, 0.3);
    color: var(--color-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    contain: paint;
    flex-shrink: 0;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.service-icon svg,
.icon-service {
    width: 28px;
    height: 28px;
    stroke: currentColor;
    display: block;
    flex-shrink: 0;
    max-width: 100%;
    max-height: 100%;
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}

.service-card:hover .service-icon {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.service-card h3 {
    font-size: 1.25rem;
    color: var(--color-primary-dark);
    margin-bottom: 0.8rem;
    line-height: 1.3;
    font-weight: 700;
}

.service-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.8rem;
    flex-grow: 1;
}

.service-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(226, 232, 229, 0.8);
}

.service-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(120, 154, 128, 0.14);
    color: var(--color-primary-dark);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.service-link-arrow:hover,
.service-card:hover .service-link-arrow {
    background: var(--color-accent);
    color: var(--color-white);
    transform: translateX(3px);
    box-shadow: 0 4px 10px rgba(199, 111, 82, 0.3);
}

.service-link-arrow:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus-ring-accent);
}

/* --------------------------------------------------------------------------
   6b. SECCIÓN TRABAJOS / CASOS DE ÉXITO
   -------------------------------------------------------------------------- */
.projects {
    position: relative;
    padding: 6rem 0;
    background-color: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.projects .container {
    position: relative;
}

.project-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 3.5rem;
}

.filter-pill {
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.6rem 1.35rem;
    border-radius: 50px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-sm);
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.filter-pill:hover {
    border-color: var(--color-primary-light);
    color: var(--color-primary-dark);
    transform: translateY(-1px);
}

.filter-pill.is-active,
.filter-pill[aria-selected="true"] {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px rgba(92, 123, 100, 0.35);
}

.filter-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(92, 123, 100, 0.35);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.project-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal), opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, box-shadow, opacity;
    position: relative;
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px -8px rgba(62, 86, 68, 0.14), 0 8px 16px -4px rgba(199, 111, 82, 0.08);
    border-color: rgba(92, 123, 100, 0.4);
}

.project-card.is-fading-out {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
    pointer-events: none;
    filter: blur(4px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card.is-hidden {
    display: none !important;
}

/* Visual Mockup Frame */
.project-visual {
    position: relative;
    background: #0f1812;
    border-bottom: 1px solid rgba(159, 189, 161, 0.18);
    padding: 1.25rem;
    overflow: hidden;
}

.project-visual-interactive {
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition-fast);
}

.project-visual-interactive:hover {
    border-bottom-color: rgba(199, 111, 82, 0.45);
}

.project-visual-interactive:hover .visual-mockup-frame {
    border-color: rgba(199, 111, 82, 0.45);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.38);
}

.project-visual-interactive:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--color-primary-light), 0 0 0 3px rgba(92, 123, 100, 0.45);
}

/* Play overlay on mockup hover/focus - Minimalist transparent icon */
.project-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 24, 18, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    z-index: 5;
}

.project-visual-interactive:hover .project-play-overlay,
.project-visual-interactive:focus-visible .project-play-overlay {
    opacity: 1;
    visibility: visible;
}

.play-btn-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.16);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    transform: scale(0.92);
}

.play-btn-circle svg {
    margin-left: 3px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.project-visual-interactive:hover .play-btn-circle,
.project-visual-interactive:focus-visible .play-btn-circle {
    transform: scale(1.08);
    background-color: rgba(255, 255, 255, 0.28);
    border-color: #ffffff;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.45);
}

.visual-mockup-frame {
    position: relative;
    background: #162219;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(159, 189, 161, 0.22);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.mockup-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.9rem;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(159, 189, 161, 0.12);
}

.mockup-title {
    font-family: monospace;
    font-size: 0.72rem;
    color: #9fbda1;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.mockup-screen {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0d150f;
    display: block;
}

.mockup-screen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform var(--transition-normal);
}

.project-visual-interactive:hover .mockup-screen-img,
.project-visual-interactive:focus-visible .mockup-screen-img {
    transform: scale(1.04);
}


.mockup-metric-highlight {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.mockup-big-stat {
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1;
}

.mockup-sub-stat {
    font-size: 0.8125rem;
    color: #9fbda1;
    font-weight: 500;
    font-family: var(--font-family);
}

/* Astro sky radar */
.mockup-sky-radar {
    margin-top: 0.5rem;
}

.sky-svg {
    width: 100%;
    height: 48px;
    overflow: visible;
}

/* Fintech data bars */
.mockup-data-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 32px;
    margin-top: 0.75rem;
}

.mockup-data-bars .data-bar {
    flex: 1;
    background: linear-gradient(180deg, #789a80, #5c7b64);
    border-radius: 3px;
    opacity: 0.85;
}

.mockup-data-bars .data-bar.b1 { height: 40%; }
.mockup-data-bars .data-bar.b2 { height: 75%; background: linear-gradient(180deg, #c76f52, #5c7b64); }
.mockup-data-bars .data-bar.b3 { height: 60%; }
.mockup-data-bars .data-bar.b4 { height: 95%; background: linear-gradient(180deg, #c76f52, #789a80); }
.mockup-data-bars .data-bar.b5 { height: 80%; }

/* Fleet radar */
.mockup-route-radar {
    margin-top: 0.5rem;
}

.radar-svg {
    width: 100%;
    height: 48px;
    overflow: visible;
    color: #789a80;
}

/* Cloud mesh */
.mockup-cluster-grid {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.node-pod {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: rgba(92, 123, 100, 0.25);
    border: 1px solid rgba(159, 189, 161, 0.4);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.node-pod.active::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #4ade80;
    box-shadow: 0 0 6px #4ade80;
}

/* Metrics chart bars */
.mockup-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    height: 38px;
    margin-top: 0.75rem;
}

.chart-col {
    flex: 1;
    height: 100%;
    background: rgba(159, 189, 161, 0.1);
    border-radius: 3px;
    display: flex;
    align-items: flex-end;
}

.chart-fill {
    width: 100%;
    background: linear-gradient(180deg, #c76f52, #5c7b64);
    border-radius: 3px;
    transition: height var(--transition-fast);
}

/* Project Card Body */
.project-body {
    padding: 1.25rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.project-meta {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.project-client {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-main);
    margin-bottom: 0.5rem;
}

.project-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 1.15rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Metrics 3-column grid */
.project-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.9rem 0;
    margin-bottom: 1.25rem;
    border-top: 1px dashed var(--color-border);
    border-bottom: 1px dashed var(--color-border);
}

.project-metric {
    display: flex;
    flex-direction: column;
}

.metric-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    line-height: 1.25;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.metric-lbl {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    margin-top: 0.35rem;
    font-weight: 500;
}

/* Project Footer & CTAs */
.project-footer {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: 0.25rem;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tech-tag {
    font-size: 0.72rem;
    font-family: monospace;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.tech-tag:hover {
    background-color: #e5ece7;
    color: var(--color-text-main);
}

.project-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-sm);
    background-color: rgba(199, 111, 82, 0.08);
    border: 1px solid rgba(199, 111, 82, 0.2);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.project-cta svg {
    transition: transform var(--transition-fast);
}

.project-cta:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(199, 111, 82, 0.25);
}

.project-cta:hover svg {
    transform: translateX(3px);
}

.project-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(199, 111, 82, 0.4);
}

.project-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.project-link-live {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary-dark);
    text-decoration: none;
    padding: 0.48rem 0.85rem;
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.project-link-live:hover {
    background-color: #e2ede5;
    color: var(--color-primary-dark);
    border-color: var(--color-primary-light);
    transform: translateY(-1px);
}

.project-link-live svg {
    transition: transform var(--transition-fast);
}

.project-link-live:hover svg {
    transform: translate(1px, -1px);
}

.project-link-live:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(92, 123, 100, 0.35);
}

/* --------------------------------------------------------------------------
   6c. VISTA DETALLADA EXPANDIDA (MASTER-DETAIL IN-PAGE)
   -------------------------------------------------------------------------- */
.btn-expand-project {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: 0.625rem 1.1rem;
    cursor: pointer;
    min-height: 42px;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 2px 8px rgba(199, 111, 82, 0.22);
}

.btn-expand-project svg {
    transition: transform var(--transition-fast);
}

.btn-expand-project:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(199, 111, 82, 0.35);
}

.btn-expand-project:hover svg {
    transform: translateX(3px);
}

.btn-expand-project:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(199, 111, 82, 0.4);
}

/* Contenedor principal de la vista detallada */
.project-detail-view {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2.5rem;
    box-shadow: 0 16px 36px rgba(12, 19, 14, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    will-change: top, left, width, height, opacity;
    box-sizing: border-box;
}

.project-detail-view .project-detail-header-bar,
.project-detail-view .project-detail-grid {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.project-detail-view.is-expanded .project-detail-header-bar,
.project-detail-view.is-expanded .project-detail-grid {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

/* Barra superior de navegación y estado */
.project-detail-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.btn-back-projects {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 50px;
    padding: 0.6rem 1.35rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-back-projects svg {
    transition: transform var(--transition-fast);
}

.btn-back-projects:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateX(-4px);
    box-shadow: 0 4px 14px rgba(62, 86, 68, 0.2);
}

.btn-back-projects:hover svg {
    transform: translateX(-2px);
}

.btn-back-projects:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(92, 123, 100, 0.35);
}

/* Cuadrícula de 2 columnas para el detalle */
.project-detail-grid {
    display: grid;
    grid-template-columns: minmax(320px, 440px) 1fr;
    gap: 2.75rem;
    align-items: start;
}

/* Columna Izquierda: Video compacto y acciones */
.project-detail-media-col {
    display: flex;
    flex-direction: column;
}

.project-mini-mockup {
    background: #0f1812;
    border-radius: var(--radius-md);
    border: 1px solid rgba(159, 189, 161, 0.22);
    box-shadow: 0 16px 36px rgba(12, 19, 14, 0.22), 0 2px 6px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.project-mini-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background-color: #000000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-mini-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000000;
    display: block;
    outline: none;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Controles multimedia de video personalizados (Solo retroceder/adelantar y play/pause)
   -------------------------------------------------------------------------- */
.video-custom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.65rem;
    background: linear-gradient(to top, rgba(12, 19, 14, 0.96) 0%, rgba(12, 19, 14, 0.85) 75%, rgba(12, 19, 14, 0.4) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(159, 189, 161, 0.16);
    z-index: 10;
}

.video-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(159, 189, 161, 0.22);
    border-radius: var(--radius-sm);
    color: var(--color-primary-light);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

.video-ctrl-btn:hover {
    background: rgba(92, 123, 100, 0.3);
    border-color: var(--color-primary-light);
    color: #ffffff;
    transform: scale(1.05);
}

.video-ctrl-btn:active {
    transform: scale(0.95);
}

.video-ctrl-btn:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 1px;
}

.video-timeline-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    height: 26px;
    cursor: pointer;
    min-width: 60px;
}

.video-timeline-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    pointer-events: none;
    transition: height var(--transition-fast);
}

.video-timeline-wrap:hover .video-timeline-track {
    height: 6px;
}

.video-timeline-progress {
    height: 100%;
    background: var(--color-accent);
    border-radius: 2px;
    width: 0%;
}

.video-timeline-range {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    z-index: 2;
}

.video-timeline-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--color-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.video-timeline-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--color-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.video-timeline-wrap:hover .video-timeline-range::-webkit-slider-thumb,
.video-timeline-range:focus-visible::-webkit-slider-thumb {
    opacity: 1;
    transform: scale(1.15);
}

.video-timeline-wrap:hover .video-timeline-range::-moz-range-thumb,
.video-timeline-range:focus-visible::-moz-range-thumb {
    opacity: 1;
    transform: scale(1.15);
}

.video-timeline-range:focus-visible ~ .video-timeline-track {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

.video-time-display {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    padding-left: 0.2rem;
}

.project-mini-caption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78125rem;
    color: var(--color-text-muted);
    margin-top: 0.75rem;
    margin-bottom: 1.35rem;
    line-height: 1.4;
}

.project-mini-caption svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.project-detail-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.project-detail-btn-live {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
}

.project-detail-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
}

/* Columna Derecha: Información técnica y de negocio extendida */
.project-detail-info-col {
    display: flex;
    flex-direction: column;
}

.project-detail-title {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-text-main);
    letter-spacing: -0.02em;
    margin-bottom: 0.85rem;
}

.project-detail-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 1.75rem;
}

.project-detail-spec-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.project-detail-block {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.detail-block-badge {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-primary);
}

.detail-block-badge.accent {
    color: var(--color-accent);
}

.detail-block-badge h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
}

.project-detail-block p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.project-detail-metrics-wrap,
.project-detail-tags-wrap {
    margin-bottom: 1.5rem;
}

.project-detail-metrics-wrap h5,
.project-detail-tags-wrap h5 {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.85rem;
}

.project-detail-metrics-wrap .project-metrics {
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.4rem;
    margin-bottom: 0;
    gap: 1.25rem;
    align-items: start;
}

.project-detail-tags-wrap .tech-tag {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

@media (max-width: 992px) {
    .project-detail-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .project-detail-view {
        padding: 1.75rem 1.5rem;
    }
}

@media (max-width: 680px) {
    .project-detail-spec-blocks {
        grid-template-columns: 1fr;
    }
    .project-detail-header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .btn-back-projects {
        width: 100%;
        justify-content: center;
    }
    .project-detail-actions {
        flex-direction: column;
    }
    .video-custom-controls {
        padding: 0.35rem 0.5rem;
        gap: 0.35rem;
    }
    .video-ctrl-btn {
        width: 28px;
        height: 28px;
    }
    .video-time-display {
        font-size: 0.6875rem;
    }
    .trusted-companies-wrap {
        margin-top: 3rem;
        padding-top: 2rem;
    }
    .trusted-companies-label {
        font-size: 0.75rem;
        gap: 0.75rem;
    }
    .trusted-companies-label::before,
    .trusted-companies-label::after {
        width: 30px;
    }
    .trusted-companies-track {
        gap: 2.75rem;
    }
    .trusted-company-logo {
        height: 30px;
    }
}

/* --------------------------------------------------------------------------
   Carrusel: Empresas que confían en nosotros
   -------------------------------------------------------------------------- */
.trusted-companies-wrap {
    margin-top: 4.5rem;
    padding-top: 3.25rem;
    border-top: 1px solid rgba(159, 189, 161, 0.14);
    text-align: center;
    position: relative;
    z-index: 2;
}

.trusted-companies-label {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.trusted-companies-label::before,
.trusted-companies-label::after {
    content: '';
    display: inline-block;
    height: 1px;
    width: 60px;
    background: linear-gradient(to right, transparent, rgba(159, 189, 161, 0.28));
}

.trusted-companies-label::after {
    background: linear-gradient(to left, transparent, rgba(159, 189, 161, 0.28));
}

.trusted-companies-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0.75rem 0;
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.trusted-companies-track {
    display: flex;
    width: max-content;
    gap: 4.5rem;
    align-items: center;
    animation: marquee-infinite 42s linear infinite;
    will-change: transform;
}

.trusted-companies-slider:hover .trusted-companies-track {
    animation-play-state: paused;
}

.trusted-company-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 44px;
}

.trusted-company-logo {
    height: 48px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    filter: none;
    opacity: 0.95;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.trusted-company-logo[src*="kumelen"] {
    height: 58px;
    max-width: 180px;
}

.trusted-company-item:hover .trusted-company-logo {
    opacity: 1;
    transform: scale(1.08);
}

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

@media (prefers-reduced-motion: reduce) {
    .project-card,
    .project-card.is-fading-out,
    .project-detail-view,
    .btn-back-projects,
    .project-play-overlay,
    .play-btn-circle,
    .trusted-companies-track,
    .video-ctrl-btn,
    .video-timeline-progress,
    .video-timeline-range::-webkit-slider-thumb,
    .video-timeline-range::-moz-range-thumb {
        transition: none !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}

/* --------------------------------------------------------------------------
   7. SECCIÓN NOSOTROS / MÉTODO
   -------------------------------------------------------------------------- */
.about {
    position: relative;
    padding: 6.5rem 0 7rem 0;
    background: var(--color-bg);
    overflow: hidden;
}

/* Sutil resplandor de marca ambiental para continuidad visual orgánica */
.about::before {
    content: '';
    position: absolute;
    top: 25%;
    left: -5%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(92, 123, 100, 0.12) 0%, rgba(120, 154, 128, 0.05) 50%, transparent 75%);
    filter: blur(65px);
    pointer-events: none;
    z-index: 0;
}

.about-intro {
    max-width: 760px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.about .container {
    position: relative;
    z-index: 1;
}

/* Marca de agua / Isotipo TRIT difuminado de fondo que entra desde la derecha */
.about-bg-watermark {
    position: absolute;
    top: 50%;
    right: -1vw;
    transform: translateY(-50%) translateZ(0);
    width: 44vw;
    max-width: 680px;
    height: 74%;
    max-height: 760px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.30;
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}

.about-bg-watermark .about-bg-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.bg-cube-piece {
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}

.bg-cube-piece path {
    transition: fill var(--transition-fast), stroke var(--transition-fast), stroke-width var(--transition-fast);
}

/* Pieza naranja central en reposo */
.bg-cube-center {
    opacity: 1;
}

/* Cuando el usuario interactúa con la sección nosotros, el fondo cobra presencia */
.about:hover .about-bg-watermark {
    opacity: 0.40;
}

/* Estado inicial de espera antes del primer scroll */
.about-bg-watermark.intro-waiting .bg-cube-piece {
    opacity: 0;
}

/* Secuencia de ensamblaje aditivo y continuo al scrollear por primera vez */
.about-bg-watermark.intro-step-1,
.about-bg-watermark.intro-step-2,
.about-bg-watermark.intro-step-3 {
    opacity: 0.85 !important;
}

/* Paso 1: Aparece tarjeta 1 -> Se dibuja la franja izquierda verde */
.about-bg-watermark.intro-step-1 .bg-cube-left {
    opacity: 1 !important;
}
.about-bg-watermark.intro-step-1 .bg-cube-center,
.about-bg-watermark.intro-step-1 .bg-cube-right {
    opacity: 0 !important;
}

/* Paso 2: Aparece tarjeta 2 -> Se suma la barra central naranja de forma continua */
.about-bg-watermark.intro-step-2 .bg-cube-left,
.about-bg-watermark.intro-step-2 .bg-cube-center {
    opacity: 1 !important;
}
.about-bg-watermark.intro-step-2 .bg-cube-right {
    opacity: 0 !important;
}

/* Paso 3: Aparece tarjeta 3 -> Se suma la franja derecha verde completando el cubo */
.about-bg-watermark.intro-step-3 .bg-cube-left,
.about-bg-watermark.intro-step-3 .bg-cube-center,
.about-bg-watermark.intro-step-3 .bg-cube-right {
    opacity: 1 !important;
}

/* Iluminación reactiva del isotipo de fondo al seleccionar o pasar el cursor por un integrante */
.about-bg-watermark.highlight-piece-1,
.about-bg-watermark.highlight-piece-2,
.about-bg-watermark.highlight-piece-3 {
    opacity: 0.95 !important;
}

/* Al seleccionar cualquier integrante, las demás piezas se atenúan limpiamente */
.about-bg-watermark.highlight-piece-1 .bg-cube-piece,
.about-bg-watermark.highlight-piece-2 .bg-cube-piece,
.about-bg-watermark.highlight-piece-3 .bg-cube-piece {
    opacity: 0.12 !important;
    filter: none !important;
}

/* Nahuel - Prisma verde izquierdo a su color original */
.about-bg-watermark.highlight-piece-1 .bg-cube-left {
    opacity: 1 !important;
}

.about-bg-watermark.highlight-piece-1 .bg-cube-left path {
    fill: var(--color-cube-sage) !important;
    stroke: var(--color-primary) !important;
    stroke-width: 1.8px !important;
    filter: none !important;
}

/* Valentino - Barra naranja central a su color original */
.about-bg-watermark.highlight-piece-2 .bg-cube-center {
    opacity: 1 !important;
}

.about-bg-watermark.highlight-piece-2 .bg-cube-center path {
    fill: var(--color-cube-terracotta) !important;
    stroke: var(--color-cube-terracotta-dark) !important;
    stroke-width: 1.8px !important;
    filter: none !important;
}

/* Fermín - Prisma verde derecho a su color original */
.about-bg-watermark.highlight-piece-3 .bg-cube-right {
    opacity: 1 !important;
}

.about-bg-watermark.highlight-piece-3 .bg-cube-right path {
    fill: var(--color-cube-sage) !important;
    stroke: var(--color-primary) !important;
    stroke-width: 1.8px !important;
    filter: none !important;
}

.about-intro h2,
.why-us-header h2 {
    font-size: 2.3rem;
    color: var(--color-primary-dark);
    margin: 1rem 0 1.2rem;
    line-height: 1.2;
}

.about-intro p {
    color: var(--color-text-muted);
    margin: 0 auto 0.9rem;
    font-size: 1.05rem;
}

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

.team-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.why-us-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    cursor: default;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.team-card:hover,
.team-card.is-active,
.why-us-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.team-card[data-team-index="2"]:hover,
.team-card[data-team-index="2"].is-active {
    border-color: var(--color-accent);
}

.team-card[data-team-index="1"]:hover,
.team-card[data-team-index="1"].is-active,
.team-card[data-team-index="3"]:hover,
.team-card[data-team-index="3"].is-active {
    border-color: var(--color-primary-light);
}

.team-photo-wrap {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-surface-alt);
}

.team-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-fast);
    will-change: transform;
}

.team-card:hover .team-photo-wrap img,
.team-card.is-active .team-photo-wrap img {
    transform: scale(1.03);
}

.team-card-content {
    padding: 1.5rem;
}

.team-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.team-card-header .team-role {
    margin-bottom: 0;
}

.team-role {
    color: var(--color-accent-hover);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.45rem;
}

.team-card h3,
.why-us-card h3 {
    color: var(--color-primary-dark);
    font-size: 1.25rem;
    margin-bottom: 0.55rem;
}

.team-card-content > p:last-child,
.why-us-card p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.why-us {
    margin-top: 5.5rem;
}

.why-us-header {
    max-width: 680px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.why-us-header h2 {
    font-size: 2rem;
}

.why-us-card {
    padding: 1.6rem;
}

.why-us-icon-wrap {
    width: 48px;
    height: 48px;
    background-color: rgba(199, 111, 82, 0.15);
    color: var(--color-accent);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.why-us-icon {
    display: block;
}

.about-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.about-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.team-card.is-visible:hover,
.team-card.is-visible.is-active,
.why-us-card.is-visible:hover {
    transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   8. SECCIÓN CONTACTO
   -------------------------------------------------------------------------- */
.contact {
    position: relative;
    padding: 7.5rem 0 6.5rem 0;
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-contact-bg-start) 30%, var(--color-contact-bg-end) 100%);
    overflow: hidden;
}

/* Fondo decorativo con orbes difuminados contenidos sin corte de bordes */
.contact-bg-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse 94% 90% at 50% 50%, black 70%, transparent 100%);
    mask-image: radial-gradient(ellipse 94% 90% at 50% 50%, black 70%, transparent 100%);
}

/* Orbe difuminado principal en verde salvia y esmeralda corporativo */
.contact-blob-3d {
    position: absolute;
    top: clamp(4.5rem, 8vw, 7.5rem);
    left: clamp(3rem, 6vw, 7rem);
    width: clamp(240px, 22vw, 320px);
    height: clamp(240px, 22vw, 320px);
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, 
        var(--color-contact-blob-start) 0%, 
        var(--color-primary-light) 25%, 
        var(--color-primary) 50%, 
        var(--color-contact-blob-deep) 70%, 
        transparent 85%);
    filter: blur(48px);
    -webkit-filter: blur(48px);
    opacity: 0.85;
    will-change: transform;
    animation: contactBlobFloat 18s ease-in-out infinite alternate;
}

/* Orbe difuminado cálido en terracota del logo TRIT */
.contact-blob-glow {
    position: absolute;
    bottom: clamp(5.5rem, 10vw, 8.5rem);
    left: clamp(20%, 25vw, 33%);
    width: clamp(210px, 20vw, 290px);
    height: clamp(210px, 20vw, 290px);
    border-radius: 50%;
    background: radial-gradient(circle at 45% 45%, 
        var(--color-contact-glow-start) 0%, 
        var(--color-accent) 28%, 
        var(--color-accent-hover) 52%, 
        var(--color-contact-glow-mid) 70%, 
        transparent 85%);
    filter: blur(52px);
    -webkit-filter: blur(52px);
    opacity: 0.8;
    will-change: transform;
    animation: contactBlobGlowFloat 22s ease-in-out infinite alternate;
}

/* Orbe difuminado ambiental de profundidad en verde salvia suave */
.contact-blob-ambient {
    position: absolute;
    top: 45%;
    left: clamp(4rem, 7vw, 9rem);
    width: clamp(150px, 15vw, 210px);
    height: clamp(150px, 15vw, 210px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, 
        var(--color-contact-ambient-start) 0%, 
        var(--color-contact-ambient-end) 45%, 
        var(--color-contact-blob-deep) 68%, 
        transparent 85%);
    filter: blur(40px);
    -webkit-filter: blur(40px);
    opacity: 0.75;
    will-change: transform;
    animation: contactBlobAmbientFloat 20s ease-in-out infinite alternate;
}

/* Micro-orbes bokeh difuminados en los tonos de la marca */
.contact-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(6px);
    -webkit-filter: blur(6px);
}

.contact-particle.particle-1 {
    width: 28px;
    height: 28px;
    top: 24%;
    left: clamp(8rem, 13vw, 15rem);
    background: radial-gradient(circle, var(--color-white) 0%, var(--color-contact-particle-1) 50%, transparent 85%);
    opacity: 0.7;
}

.contact-particle.particle-2 {
    width: 22px;
    height: 22px;
    bottom: 28%;
    left: clamp(26%, 30vw, 36%);
    background: radial-gradient(circle, var(--color-white) 0%, var(--color-contact-particle-2) 50%, transparent 85%);
    opacity: 0.65;
}

@keyframes contactBlobFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(10px, -8px, 0) scale(1.03);
    }
    100% {
        transform: translate3d(4px, 6px, 0) scale(0.97);
    }
}

@keyframes contactBlobGlowFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-8px, 8px, 0) scale(0.98);
    }
    100% {
        transform: translate3d(-6px, -8px, 0) scale(1.02);
    }
}

@keyframes contactBlobAmbientFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(8px, 6px, 0) scale(1.03);
    }
}

.contact-container {
    position: relative;
    z-index: 2;
    margin-top: 1rem;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 4.5rem;
    align-items: center;
}

/* Columna izquierda: Titular icónico de gran impacto visual */
.contact-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 2rem;
}

.contact-title-huge {
    font-size: clamp(3rem, 5.2vw, 4.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--color-primary-dark);
    margin: 0;
    text-shadow: 0 2px 14px rgba(62, 86, 68, 0.12);
}

/* Columna derecha: Tarjeta oscura de contacto con identidad visual TRIT */
.contact-card-dark {
    position: relative;
    background: var(--color-contact-card-bg);
    border-radius: 20px;
    border: 1px solid var(--color-contact-card-border);
    padding: 2.6rem 2.4rem;
    box-shadow: 0 30px 60px -15px rgba(16, 28, 20, 0.65), 0 0 0 1px rgba(120, 154, 128, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;
    color: var(--color-white);
}

.contact-card-dark::before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-contact-card-glow-salvia) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Resplandor decorativo interno en terracota del logo TRIT */
.contact-card-glow {
    position: absolute;
    top: -45px;
    right: -45px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-contact-card-glow-terracotta) 0%, rgba(92, 123, 100, 0.14) 52%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.contact-card-header {
    position: relative;
    z-index: 1;
}

.contact-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}

.contact-card-title {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0;
    line-height: 1.2;
}

.contact-card-sparkle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    flex-shrink: 0;
}

.contact-card-direct {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.contact-direct-label {
    display: block;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}

.contact-direct-email {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-direct-email:hover {
    color: var(--color-accent);
}

.contact-direct-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.contact-direct-or {
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-quick-buttons {
    display: flex;
    gap: 0.5rem;
}

.contact-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(120, 154, 128, 0.12);
    border: 1px solid var(--color-contact-card-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.contact-icon-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    transform: translateY(-2px);
}

.contact-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus-ring-accent);
}

.contact-card-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120, 154, 128, 0.28), transparent);
    margin: 1.4rem 0 1.2rem 0;
    border: none;
}

.contact-card-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.2rem;
}

/* Formulario */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    position: relative;
    z-index: 1;
}

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

.contact-card-dark .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contact-card-dark .form-group label {
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

/* Directiva de Cursores Estándar (Regla 12) */
.form-group input,
.form-group textarea,
.contact-card-dark input,
.contact-card-dark textarea {
    cursor: text;
}

.form-group select {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    cursor: not-allowed;
}

.contact-card-dark input[type="text"],
.contact-card-dark input[type="email"],
.contact-card-dark textarea {
    background: var(--color-contact-input-bg);
    border: 1px solid var(--color-contact-input-border);
    border-radius: var(--radius-sm);
    color: var(--color-white);
    padding: 0.82rem 0.95rem;
    font-size: 0.94rem;
    width: 100%;
    cursor: text;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.contact-card-dark input::placeholder,
.contact-card-dark textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.contact-card-dark input:focus,
.contact-card-dark textarea:focus {
    outline: none;
    background: var(--color-contact-input-focus-bg);
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 3px var(--color-focus-ring-primary);
}

/* Selección de Servicios ("Estoy buscando...") estilo referencia */
.service-selection-group {
    margin-top: 0.2rem;
}

.service-selection-title {
    display: block;
    font-size: 0.84rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.75rem;
}

.service-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem 1rem;
}

.service-option-item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.2rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: transform var(--transition-fast);
}

.service-option-item:hover .service-option-text {
    color: var(--color-white);
}

.service-option-item:hover .service-option-box {
    border-color: rgba(255, 255, 255, 0.6);
}

.service-option-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.service-option-box {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.service-option-icon {
    display: block;
    stroke: var(--color-white);
    opacity: 0;
    transform: scale(0.4);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.service-option-text {
    font-size: 0.84rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 400;
    transition: color var(--transition-fast);
}

/* Estado activo / seleccionado */
.service-option-input:checked ~ .service-option-box {
    background: var(--color-primary);
    border-color: var(--color-primary-light);
}

.service-option-input:checked ~ .service-option-box .service-option-icon {
    opacity: 1;
    transform: scale(1);
}

.service-option-input:checked ~ .service-option-text {
    color: var(--color-white);
    font-weight: 600;
}

.service-option-input:focus-visible ~ .service-option-box {
    box-shadow: 0 0 0 3px rgba(120, 154, 128, 0.45);
}

/* Animación de pulso cuando se preselecciona desde tarjetas */
@keyframes servicePulse {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.service-option-item.highlight-selected .service-option-box {
    box-shadow: 0 0 0 3px rgba(120, 154, 128, 0.6), 0 0 10px rgba(92, 123, 100, 0.4);
    border-color: var(--color-primary-light);
}

.service-option-item.highlight-selected {
    animation: servicePulse 0.6s ease-out;
}

/* Botón enviar estilo referencia con color de acento del logo TRIT */
.btn-contact-submit {
    width: 100%;
    padding: 0.95rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    margin-top: 0.4rem;
    box-shadow: 0 4px 14px rgba(199, 111, 82, 0.35);
}

.btn-contact-submit:hover {
    background: var(--color-accent-hover);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(199, 111, 82, 0.5);
}

.btn-contact-submit:active {
    transform: translateY(0);
}

.btn-contact-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-contact-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-focus-ring-accent);
}

/* Estado de alerta de envío */
.form-status {
    display: none;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
}

.form-status.success {
    display: block;
    background-color: var(--color-alert-success-bg);
    color: var(--color-alert-success-text);
    border: 1px solid var(--color-alert-success-border);
}

.form-status.error {
    display: block;
    background-color: var(--color-alert-error-bg);
    color: var(--color-alert-error-text);
    border: 1px solid var(--color-alert-error-border);
}

/* --------------------------------------------------------------------------
   9. FOOTER (Howitzer Sleek Light Typography & Columns)
   -------------------------------------------------------------------------- */
.footer {
    position: relative;
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 5.5rem 0 3rem 0;
    border-top: none;
    overflow: hidden;
}

.footer-container {
    position: relative;
    z-index: 1;
}

.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: start;
    padding-bottom: clamp(2.5rem, 4.5vw, 4rem);
}

.footer-col-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
}

.footer-brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.footer-brand-logo:hover {
    opacity: 0.9;
}

.footer-brand-logo img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.footer-brand-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-primary-dark);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.footer-brand-tagline {
    font-size: 0.92rem;
    color: var(--color-footer-text);
    line-height: 1.6;
    max-width: 330px;
}

/* Botones de redes sociales en cuadrados redondeados sutiles */
.footer-social-links {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.5rem;
}

.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border-radius: 8px;
    background: var(--color-footer-surface);
    border: 1px solid var(--color-footer-border);
    color: var(--color-footer-text);
    transition: all var(--transition-fast);
    box-shadow: 0 1px 3px rgba(62, 86, 68, 0.05);
}

.footer-social-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 86, 68, 0.15);
}

.footer-social-btn svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* Columnas de navegación con borde superior delgado */
.footer-nav-col {
    border-top: 1px solid var(--color-footer-border);
    padding-top: 1.25rem;
}

.footer-col-title {
    color: var(--color-footer-heading);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.footer-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-link {
    font-size: 0.9rem;
    color: var(--color-footer-text);
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
}

.footer-link:hover {
    color: var(--color-accent);
    transform: translateX(3px);
}

.footer-link-static {
    font-size: 0.9rem;
    color: var(--color-footer-text-muted);
    display: inline-block;
}


/* Fila inferior de copyright y enlaces legales */
.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--color-footer-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--color-footer-text-muted);
}

.footer-copyright {
    color: var(--color-footer-text-muted);
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-legal-link {
    color: var(--color-footer-text-muted);
    font-size: 0.85rem;
    transition: color var(--transition-fast);
}

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

.footer-link:focus-visible,
.footer-social-btn:focus-visible,
.footer-legal-link:focus-visible,
.footer-brand-logo:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE DESIGN (Media Queries)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .navbar-nav {
        gap: 1.35rem;
    }

    .navbar-nav .nav-link {
        font-size: 0.88rem;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .team-grid,
    .why-us-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-card:last-child:nth-child(odd),
    .why-us-card:last-child:nth-child(odd) {
        grid-column: span 2;
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
    }

    .about-bg-watermark {
        width: 46vw;
        max-width: 480px;
        height: 65%;
        max-height: 520px;
        right: -2vw;
        opacity: 0.26;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2.8rem;
    }

    .contact-banner {
        align-items: center;
        text-align: center;
    }

    .contact-subtitle-lead {
        margin-left: auto;
        margin-right: auto;
    }

    .contact-trust-badges {
        align-items: center;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    .footer-col-brand {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .navbar {
        top: 0.75rem;
        width: min(94%, 480px);
        height: 52px;
    }

    .navbar.is-scrolled {
        top: 0.75rem;
    }

    .navbar .container,
    .navbar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
    }

    .navbar-nav {
        display: none;
    }

    .navbar-brand img {
        height: 28px;
        width: 28px;
    }

    .navbar-brand span {
        font-size: 1.15rem;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
        background: transparent;
        border: none;
        color: var(--color-primary-dark);
        border-radius: 50%;
        cursor: pointer;
        transition: background-color var(--transition-fast);
    }

    .menu-toggle:hover {
        background-color: rgba(62, 86, 68, 0.08);
    }

    .icon-close {
        display: none;
    }

    .menu-toggle.is-open .icon-menu {
        display: none;
    }

    .menu-toggle.is-open .icon-close {
        display: block;
    }

    .navbar-mobile-drawer {
        display: flex;
        position: absolute;
        top: calc(100% + 0.5rem);
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: 0 16px 36px rgba(36, 48, 38, 0.12);
        flex-direction: column;
        padding: 0.85rem 1rem 1rem 1rem;
        gap: 0.5rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
        pointer-events: none;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    .navbar-mobile-drawer.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .navbar-mobile-drawer .nav-link {
        width: 100%;
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        border-radius: 8px;
        color: var(--color-text-main);
        transition: color var(--transition-fast), background-color var(--transition-fast);
    }

    .navbar-mobile-drawer .nav-link:hover,
    .navbar-mobile-drawer .nav-link.active {
        color: var(--color-primary-dark);
        background: var(--color-surface-alt);
    }

    .footer {
        padding: 4rem 0 2.5rem 0;
    }

    .footer-social-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-bottom: 2rem;
    }

    .footer-col-brand {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .footer-legal-links {
        flex-wrap: wrap;
        gap: 1.25rem;
    }

    .hero {
        padding-top: 64px;
    }

    .hero-brand-stage {
        gap: clamp(0.75rem, 3.2vw, 1.8rem);
        padding: 0.5rem 0.75rem;
    }

    .hero-brand-trit-svg {
        width: clamp(180px, 48vw, 320px);
        height: auto;
    }

    .hero-brand-subline {
        font-size: clamp(0.65rem, 1.9vw, 0.95rem);
        letter-spacing: 0.22em;
    }

    .hero-brand-logo-svg {
        width: clamp(85px, 26vw, 165px);
        height: clamp(85px, 26vw, 165px);
    }

    .about {
        padding: 4.5rem 0;
    }

    .about-bg-watermark {
        display: none !important;
    }

    .about-intro {
        margin-bottom: 2.5rem;
        text-align: left;
    }

    .about-intro h2,
    .why-us-header h2 {
        font-size: 1.9rem;
    }

    .team-grid,
    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .team-card:last-child:nth-child(odd),
    .why-us-card:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: 100%;
    }

    .why-us {
        margin-top: 4rem;
    }

    .why-us-header {
        text-align: left;
        margin-bottom: 1.75rem;
    }

    .services {
        padding: 5rem 0 6rem 0;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }

    .service-card-wrapper {
        animation: cardFloatMobile 5s ease-in-out infinite;
        animation-delay: calc(var(--card-index, 0) * 0.8s);
    }

    @keyframes cardFloatMobile {
        0%, 100% {
            transform: translateY(0px);
        }
        50% {
            transform: translateY(-8px);
        }
    }

    .contact {
        padding: 4.5rem 0;
    }

    .contact-bg-decor {
        -webkit-mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, black 65%, transparent 100%);
        mask-image: radial-gradient(ellipse 92% 88% at 50% 50%, black 65%, transparent 100%);
    }

    .contact-blob-3d {
        top: 3.5rem;
        left: 1.5rem;
        width: 130px;
        height: 130px;
        filter: blur(32px);
        -webkit-filter: blur(32px);
        opacity: 0.75;
        animation: contactBlobFloatMobile 14s ease-in-out infinite alternate;
    }

    .contact-blob-glow {
        bottom: 4rem;
        right: 1.5rem;
        left: auto;
        width: 115px;
        height: 115px;
        filter: blur(30px);
        -webkit-filter: blur(30px);
        opacity: 0.72;
        animation: contactBlobGlowFloatMobile 16s ease-in-out infinite alternate;
    }

    .contact-blob-ambient {
        display: none;
    }

    .contact-particle {
        display: none;
    }

    @keyframes contactBlobFloatMobile {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(4px, -4px, 0);
        }
    }

    @keyframes contactBlobGlowFloatMobile {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(-4px, -4px, 0);
        }
    }

    .contact-title-huge {
        font-size: 2.3rem;
    }

    .contact-card-dark {
        padding: 2rem 1.4rem;
    }

    .contact-card-dark input[type="text"],
    .contact-card-dark input[type="email"],
    .contact-card-dark textarea {
        font-size: 1rem;
    }

    .contact-card-direct {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .contact-icon-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

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

    .service-options-grid {
        grid-template-columns: 1fr;
    }

    /* Proyectos en móvil */
    .projects {
        padding: 4.5rem 0;
    }

    .project-filters {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.75rem;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .project-filters::-webkit-scrollbar {
        display: none;
    }

    .filter-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .project-body {
        padding: 1.35rem 1.25rem 1.5rem;
    }

    .project-metrics {
        gap: 0.5rem;
    }

    .metric-val {
        font-size: 1.15rem;
    }

    .metric-lbl {
        font-size: 0.7rem;
    }

    .project-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .project-actions {
        display: flex;
        width: 100%;
        gap: 0.65rem;
    }

    .project-link-live,
    .project-cta {
        flex: 1;
        justify-content: center;
        text-align: center;
        padding: 0.65rem 0.85rem;
        min-height: 44px;
    }
}

@media (max-height: 640px) {
    .navbar {
        top: 0.5rem;
        height: 48px;
    }
    .navbar .container,
    .navbar-container {
        height: 100%;
    }
    .navbar-mobile-drawer {
        top: calc(100% + 0.4rem);
        max-height: calc(100vh - 65px);
    }
    .hero {
        padding-top: 68px;
    }
    .hero-brand-stage {
        padding: 0.3rem 0.8rem;
    }
    .hero-brand-trit-svg {
        max-height: 20vh;
    }
    .hero-brand-logo-svg {
        width: clamp(90px, 27vh, 180px);
        height: clamp(90px, 27vh, 180px);
    }
}

@media (max-height: 480px) {
    .hero-scroll-btn {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   11. ACCESIBILIDAD Y MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .logo-draw-path,
    .trit-letter-path {
        stroke-dashoffset: 0 !important;
        fill-opacity: 1 !important;
    }

    .hero-brand-subline {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero-brand-trit-svg,
    .hero-brand-logo-svg {
        animation: none !important;
        transition: none !important;
    }

    .hero-scroll-btn {
        animation: none !important;
    }

    .about-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .about-bg-watermark.intro-waiting .bg-cube-piece,
    .about-bg-watermark.intro-step-1 .bg-cube-piece,
    .about-bg-watermark.intro-step-2 .bg-cube-piece,
    .about-bg-watermark.intro-step-3 .bg-cube-piece {
        opacity: 1 !important;
    }

    .bg-cube-center {
        animation: none !important;
    }

    .bg-cube-piece path {
        transition: none !important;
    }

    .service-card-wrapper {
        animation: none !important;
        transform: none !important;
    }

    .service-card {
        transform: none !important;
    }

    .decor-orb,
    .contact-blob-3d,
    .contact-blob-glow,
    .contact-blob-ambient,
    .contact-orb {
        animation: none !important;
    }

    .service-option-item.highlight-selected {
        animation: none !important;
    }

    .project-card {
        transform: none !important;
        transition: none !important;
    }
}