:root {
            --bg: #F4F4F5;
            --surface: #FFFFFF;
            --text: #09090B;
            --text-muted: #52525B;
            --text-subtle: #71717A;
            --line: #E4E4E7;
            --vinotinto: #662C52;
            --vinotinto-strong: #8B3D6F;
            --projects-bg: #E8E8EA;  /* gris levemente más oscuro que --bg, contrasta con cards blancos */
        }
        html.dark {
            --bg: #0A0A0B;
            --surface: #18181B;
            --text: #FAFAFA;
            --text-muted: #A1A1AA;
            --text-subtle: #71717A;
            --line: #27272A;
            --vinotinto: #8B3D6F;
            --vinotinto-strong: #A3517E;
            --projects-bg: #050507;  /* casi negro, contrasta con cards graphite */
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Manrope', system-ui, sans-serif;
            font-weight: 400;
            overflow-x: hidden;
            transition: background-color .35s ease, color .35s ease;
        }

        /* Jerarquía tipográfica: pesos diferenciados */
        h1 { font-weight: 800; letter-spacing: -0.04em; }
        h2 { font-weight: 800; letter-spacing: -0.03em; }
        h3 { font-weight: 700; letter-spacing: -0.02em; }
        .text-display { font-weight: 200; letter-spacing: -0.03em; }  /* light extralight para impacto editorial */
        .text-body { font-weight: 400; }
        .text-caption { font-weight: 500; letter-spacing: 0.02em; }
        .text-label { font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; }

        ::selection { background-color: var(--vinotinto); color: #FFFFFF; }

        /* ─── DARK MODE: vinotinto → rosa palo legible ───
           El color de marca #662C52 es invisible sobre fondos oscuros, así que en
           dark mode lo reemplazamos por #D8B5C7 (rosa palo) para texto y bordes.
           Las superficies con bg-vinotinto siguen siendo morado oscuro como
           antes (su contraste con texto blanco encima ya es suficiente). */
        html.dark .text-vinotinto,
        html.dark .hover\:text-vinotinto:hover {
            color: #D8B5C7 !important;
        }
        html.dark .border-vinotinto {
            border-color: #A3517E !important;
        }
        /* Variante decorativa: subrayados / divisores que también usan vinotinto */
        html.dark .decoration-vinotinto {
            text-decoration-color: #D8B5C7 !important;
        }

        /* Foco accesible */
        :focus-visible {
            outline: 2px solid #662C52;
            outline-offset: 4px;
            border-radius: 4px;
        }

        /* Skip link accesible */
        .skip-link {
            position: absolute;
            top: -100px;
            left: 1rem;
            background: #09090B;
            color: #fff;
            padding: .75rem 1rem;
            border-radius: .5rem;
            z-index: 100;
            font-weight: 700;
            transition: top .2s;
        }
        .skip-link:focus { top: 1rem; }

        .text-outline {
            color: transparent;
            -webkit-text-stroke: 1.5px #09090B;
        }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* Marquee */
        @keyframes marquee {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            animation: marquee 30s linear infinite;
            display: flex;
            width: max-content;
        }
        .animate-marquee:hover { animation-play-state: paused; }

        /* Lenis */
        html.lenis { height: auto; }
        .lenis.lenis-smooth { scroll-behavior: auto; }
        .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
        .lenis.lenis-stopped { overflow: hidden; }

        /* Cursor SOLO en desktop con puntero fino · usa mix-blend-mode difference
           para invertir automáticamente según el fondo (blanco sobre negro, negro sobre blanco) */
        @media (hover: hover) and (pointer: fine) {
            body { cursor: none; }
            #custom-cursor {
                position: fixed;
                top: 0; left: 0;
                width: 14px; height: 14px;
                background-color: #FFFFFF;
                border-radius: 50%;
                pointer-events: none;
                z-index: 10000;
                transform: translate(-50%, -50%);
                transition: width .3s, height .3s, background-color .3s, opacity .3s, border .3s;
                will-change: transform;
                mix-blend-mode: difference;
            }
            #custom-cursor.hovered {
                width: 60px; height: 60px;
                background-color: #FFFFFF;
                mix-blend-mode: difference;
            }
        }
        @media not all and (hover: hover) {
            #custom-cursor { display: none; }
        }

        /* Reveals iniciales */
        .reveal-up { opacity: 0; transform: translateY(40px); }
        .reveal-mask > * { will-change: transform; }

        /* Acordeón FAQ */
        .faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); }
        .faq-content {
            display: grid;
            grid-template-rows: 0fr;
            transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1);
        }
        .faq-item[data-open="true"] .faq-content { grid-template-rows: 1fr; }
        .faq-content > div { overflow: hidden; }

        /* Filtros proyectos */
        .filter-chip[data-active="true"] {
            background-color: #09090B;
            color: #fff;
        }

        /* Imagen con relación cuadrada custom para proyectos verticales */
        .project-card img { object-fit: contain; }

        /* ─── PORTFOLIO CARD (página /proyectos · <button>) ───
           El <button> absorbe el transform del hover (sin overflow:hidden → no flicker del
           clip rounded interno). El borde animado va en ::after del inner para que la
           imagen full-cover no lo tape (z-index: 5). */
        button.project-card {
            display: block;
            width: 100%;
            border-radius: 2rem;
            background: transparent;
            padding: 0;
        }
        button.project-card:focus { outline: none; }
        button.project-card:focus-visible { outline: none; }

        button.project-card .project-card-inner {
            position: relative;
            isolation: isolate;
            transform: translateZ(0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-font-smoothing: antialiased;
            border: 0 !important;
            outline: none !important;
            transition: box-shadow .35s ease;
            box-shadow:
                0 1px 2px rgba(0,0,0,0.04),
                0 4px 16px rgba(0,0,0,0.05);
        }
        button.project-card .project-card-inner::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            border: 1px solid var(--line, #E4E4E7);
            pointer-events: none;
            transition: border-color .35s ease, border-width .35s ease;
            z-index: 5;                            /* siempre sobre la imagen */
        }

        button.project-card:hover .project-card-inner {
            box-shadow:
                0 1px 2px rgba(0,0,0,0.06),
                0 16px 32px -8px rgba(102,44,82,0.18),
                0 30px 60px -20px rgba(0,0,0,0.20);
        }
        button.project-card:hover .project-card-inner::after {
            border-color: var(--vinotinto, #662C52);
        }
        button.project-card:focus-visible .project-card-inner::after {
            border-color: var(--vinotinto, #662C52);
            border-width: 2px;
        }
        button.project-card .project-card-inner img { object-fit: cover; }

        /* Dark mode */
        html.dark button.project-card .project-card-inner {
            box-shadow:
                0 1px 2px rgba(0,0,0,0.5),
                0 4px 12px rgba(0,0,0,0.35);
        }
        html.dark button.project-card:hover .project-card-inner {
            box-shadow:
                0 1px 2px rgba(0,0,0,0.6),
                0 16px 32px -8px rgba(139,61,111,0.4),
                0 30px 60px -20px rgba(0,0,0,0.7);
        }

        /* Tap highlight invisible para que el feedback de hover no se duplique en móvil */
        button.project-card { -webkit-tap-highlight-color: transparent; }

        /* ─── HOME SLIDER (.project-card como <article>) ─── */
        article.project-card .project-card-inner {
            transition: border-color .35s ease, box-shadow .5s ease, transform .5s ease;
        }
        article.project-card:hover .project-card-inner {
            border-color: var(--vinotinto, #662C52) !important;
            box-shadow:
                0 1px 2px rgba(0,0,0,0.06),
                0 16px 32px -8px rgba(102,44,82,0.12),
                0 30px 60px -20px rgba(0,0,0,0.18) !important;
        }

        /* Header adaptable: cambia color sobre secciones oscuras */
        #main-nav .brand-text { color: var(--text); }
        #main-nav.on-dark .brand-text { color: #FFFFFF; }
        #main-nav.on-dark #theme-toggle,
        #main-nav.on-dark #open-menu {
            background: rgba(255,255,255,0.10) !important;
            border-color: rgba(255,255,255,0.20) !important;
            color: #FFFFFF !important;
        }
        #main-nav .brand-icon {
            transition: filter .3s ease;
        }
        #main-nav.on-dark .brand-icon {
            filter: brightness(0) invert(1);
        }
        html.dark #main-nav .brand-icon {
            filter: brightness(0) invert(1);
        }
        /* Animación del logo: gira 120° al hover (3 vértices del triángulo)
           y un sutil pulso permanente al cargar */
        @keyframes brandPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.06); }
        }
        .brand-icon {
            animation: brandPulse 3s ease-in-out infinite;
        }
        .brand-link:hover .brand-icon {
            transform: rotate(120deg) scale(1.1);
            animation-play-state: paused;
        }
        /* Hover sobre el logo: NO cambia color de APPLI, en su lugar despliega "INGENIERÍA" al lado.
           Nota: NO usamos overflow:hidden en .brand-link porque recortaría el ícono cuando rota 120°.
           El brand-suffix tiene su propio overflow:hidden + max-width:0 para la animación. */
        .brand-link {
            position: relative;
        }
        .brand-suffix {
            display: inline-block;
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            white-space: nowrap;
            transform: translateX(-8px);
            transition: max-width .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1);
            margin-left: 0;
        }
        .brand-link:hover .brand-suffix {
            max-width: 20em;
            opacity: 1;
            transform: translateX(0);
            margin-left: .4em;
            padding-right: .2em; /* respiración al final, evita que itálicas se corten */
        }

        /* Fix bug Chrome: clip-path para que el border-radius se aplique a hijos con transform.
           El overflow-hidden + border-radius solo no es suficiente cuando hay GSAP/transform internos. */
        .hero-clip {
            clip-path: inset(0 0 0 0 round 0 0 3rem 3rem);
            -webkit-clip-path: inset(0 0 0 0 round 0 0 3rem 3rem);
        }
        @media (min-width: 768px) {
            .hero-clip {
                clip-path: inset(0 0 0 0 round 0 0 5rem 5rem);
                -webkit-clip-path: inset(0 0 0 0 round 0 0 5rem 5rem);
            }
        }

        /* ─── BENTO DE SERVICIOS · cards clickeables ─── */
        .service-card {
            transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s ease;
            box-shadow: 0 4px 16px rgba(9,9,11,0.04), 0 1px 3px rgba(9,9,11,0.06);
        }
        .service-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 48px rgba(9,9,11,0.18), 0 8px 16px rgba(9,9,11,0.08);
        }
        .service-card:focus-visible {
            outline: 2px solid var(--vinotinto, #662C52);
            outline-offset: 4px;
        }

        /* ─── DRAWER DE DETALLE (servicios y proyectos) ─── */
        #service-drawer .drawer-panel,
        #project-drawer .drawer-panel {
            border-top-left-radius: 2rem;
            border-bottom-left-radius: 2rem;
            -webkit-overflow-scrolling: touch; /* momentum en iOS */
            overscroll-behavior: contain;       /* evita bounce que filtre scroll a la página */
            touch-action: pan-y;                /* permite scroll vertical en touch */
        }
        #service-drawer.open,
        #project-drawer.open {
            pointer-events: auto !important;
        }
        #service-drawer.open .drawer-backdrop,
        #project-drawer.open .drawer-backdrop {
            opacity: 1;
        }
        #service-drawer.open .drawer-panel,
        #project-drawer.open .drawer-panel {
            transform: translateX(0);
        }
        /* En mobile el drawer ocupa toda la pantalla, sin esquinas redondeadas */
        @media (max-width: 768px) {
            #service-drawer .drawer-panel,
            #project-drawer .drawer-panel {
                border-radius: 0;
            }
        }

        /* Ocultar controles nativos del video en iOS Safari cuando el autoplay falla.
           El big play button se oculta vía pseudo-elementos webkit + reset general. */
        #hero video {
            -webkit-appearance: none;
            appearance: none;
            pointer-events: none; /* el video NO debe recibir taps (de paso permite scrollear sobre él) */
        }
        #hero video::-webkit-media-controls,
        #hero video::-webkit-media-controls-enclosure,
        #hero video::-webkit-media-controls-panel,
        #hero video::-webkit-media-controls-start-playback-button,
        #hero video::-webkit-media-controls-overlay-play-button,
        #hero video::-webkit-media-controls-overlay-enclosure {
            display: none !important;
            -webkit-appearance: none !important;
            opacity: 0 !important;
            pointer-events: none !important;
            visibility: hidden !important;
        }

        /* Slider de proyectos · scroll horizontal manual con drag + botones */
        #project-slider {
            scrollbar-width: none;
            -ms-overflow-style: none;
            scroll-behavior: smooth;
        }
        #project-slider::-webkit-scrollbar { display: none; }
        #project-slider.dragging { cursor: grabbing !important; }
        #project-slider.dragging a, #project-slider.dragging .project-card { pointer-events: none; }

        /* Helpers de contraste / depth */
        .ring-vinotinto { box-shadow: 0 0 0 1px rgba(102,44,82,0.15), 0 30px 60px -20px rgba(102,44,82,0.25); }
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent);
            margin: 0;
        }

        /* Inputs accesibles */
        .form-input {
            width: 100%;
            padding: 1rem 0;
            background: transparent;
            border: 0;
            border-bottom: 1px solid #D4D4D8;
            font: inherit;
            color: #09090B;
            outline: none;
            transition: border-color .25s;
        }
        .form-input:focus { border-bottom-color: var(--vinotinto); }
        .form-input::placeholder { color: #A1A1AA; }

        /* === LOADER Appli === */
        #loader {
            position: fixed; inset: 0; z-index: 100;
            background: var(--bg);
            display: flex; align-items: center; justify-content: center;
            padding: 2rem;
            transform: translateY(0%);
            transition: transform .9s cubic-bezier(.7,0,.3,1);
            pointer-events: none;
            overflow: hidden;
        }
        #loader.gone { transform: translateY(-100%); }

        /* Grilla técnica tenue */
        #loader::before {
            content: ""; position: absolute; inset: 0;
            background-image:
                linear-gradient(to right, var(--line) 1px, transparent 1px),
                linear-gradient(to bottom, var(--line) 1px, transparent 1px);
            background-size: 4rem 4rem;
            opacity: .35;
            mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
            -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
        }

        /* Esquinas tipo plano */
        #loader .l-corner {
            position: absolute; width: 18px; height: 18px; border: 1px solid var(--text);
        }
        #loader .l-tl { top: 2rem; left: 2rem; border-right: 0; border-bottom: 0; }
        #loader .l-tr { top: 2rem; right: 2rem; border-left: 0; border-bottom: 0; }
        #loader .l-bl { bottom: 2rem; left: 2rem; border-right: 0; border-top: 0; }
        #loader .l-br { bottom: 2rem; right: 2rem; border-left: 0; border-top: 0; }

        /* Contenido central */
        #loader .l-content {
            position: relative; z-index: 1;
            display: flex; flex-direction: column; align-items: center;
            gap: 1.25rem; max-width: 90vw;
        }
        #loader .l-mark {
            position: relative;
            width: clamp(220px, 32vw, 340px);
            height: clamp(220px, 32vw, 340px);
            display: flex; align-items: center; justify-content: center;
        }
        #loader .l-logo {
            width: 38%;
            height: auto;
            position: relative;
            z-index: 2;
            opacity: 0;
            transform: scale(.85);
            animation: lLogoIn 1s cubic-bezier(.2,.8,.2,1) forwards;
            animation-delay: .15s;
        }
        /* Texto orbital rotando */
        #loader .l-orbit {
            position: absolute;
            inset: 0;
            width: 100%; height: 100%;
            opacity: 0;
            animation: lFade .8s ease .35s forwards, lOrbit 14s linear infinite;
        }
        #loader .l-orbit .orbit-text {
            font-family: 'Manrope', system-ui, sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.32em;
            text-transform: uppercase;
            fill: var(--text);
            opacity: 0.85;
        }

        #loader .l-tagline {
            font-size: clamp(.9rem, 1.4vw, 1.15rem);
            color: var(--text-muted);
            opacity: 0;
            animation: lFade .6s ease .85s forwards;
            text-align: center;
            margin-top: .5rem;
        }

        @keyframes lFade { to { opacity: 1; } }
        @keyframes lLogoIn { to { opacity: 1; transform: scale(1); } }
        @keyframes lOrbit { to { transform: rotate(360deg); } }

        /* === Toggle theme === */
        .theme-toggle .moon { display: none; }
        .theme-toggle .sun { display: inline; }
        html.dark .theme-toggle .moon { display: inline; }
        html.dark .theme-toggle .sun { display: none; }

        /* === Soporte dark a clases existentes === */
        html.dark .bg-bgLight { background-color: var(--bg); }
        html.dark .bg-surface { background-color: var(--surface); }
        html.dark .text-textMain { color: var(--text); }
        html.dark .text-textMuted { color: var(--text-muted); }
        html.dark .text-textSubtle { color: var(--text-subtle); }
        html.dark .border-gray-100,
        html.dark .border-gray-200,
        html.dark .border-gray-300 { border-color: var(--line); }
        html.dark .bg-white { background-color: var(--surface); }

        /* Cards de logos de clientes · SIEMPRE fondo blanco para no perder los logos
           (mayor especificidad para sobrevivir a los overrides de dark mode arriba) */
        .client-logo-card,
        html.dark .client-logo-card {
            background-color: #FFFFFF;
            border-color: #E5E7EB;
        }
        .client-logo-card span,
        html.dark .client-logo-card span {
            color: #52525B;
        }
        html.dark .bg-white\/50,
        html.dark .bg-white\/80 { background-color: rgba(24,24,27,0.7); }
        html.dark nav .bg-white\/70 { background-color: rgba(24,24,27,0.6); border-color: var(--line); color: var(--text); }
        html.dark .shadow-sm,
        html.dark .shadow-lg,
        html.dark .shadow-2xl,
        html.dark .shadow-xl { box-shadow: 0 10px 30px rgba(0,0,0,.4); }