:root {
            /* Paleta de marca Taktico (ajustada 2026-08: navy más claro + acento más vivo) */
            --navy-950: #0e2236;
            --navy-900: #14304a;
            --navy-800: #1a3854;
            --navy-700: #214460;
            --slate: #2e4254;
            /* acento principal */
            --bronze: #d97523;
            /* acento claro (hover / gradientes) */
            --bronze-light: #ef8f3c;
            --bronze-glow: rgba(217, 117, 35, 0.35);

            --text: #e8eef5;
            --text-muted: #9fb3c8;
            --text-dim: #6b8199;
            --line: rgba(159, 179, 200, 0.14);
            --card: rgba(255, 255, 255, 0.035);
            --card-hover: rgba(255, 255, 255, 0.06);

            --radius: 16px;
            --radius-sm: 10px;
            --maxw: 1200px;
            --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
            --font-head: 'Poppins', sans-serif;
            --font-body: 'Inter', sans-serif;

            /* Auxiliares (Reestructura Visual §5) — variedad editorial sin salir
               de la identidad Navy/Orange oficial */
            --offwhite: #F5F2EC;
            --graphite: #17212B;
            --slate-aux: #536576;
            --mist: #E7EBEE;
            --pale-navy: #E8EEF3;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            color: var(--text);
            background: var(--navy-950);
            line-height: 1.65;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, .logo-text {
            font-family: var(--font-head);
            line-height: 1.15;
            letter-spacing: -0.02em;
        }

        /* Titulares principales — serif editorial moderna (Fraunces).
           Se usa en H1 del hero, H2 de encabezados de sección, y titulares
           de sub-hero / CTA. El resto de la UI mantiene la sans (Poppins/Inter). */
        .hero h1,
        .page-hero h1,
        .sec-head h2,
        .cta-box h2,
        .identity-quote {
            font-family: var(--font-display);
            font-weight: 600;
            letter-spacing: -0.015em;
            font-optical-sizing: auto;
        }

        .hero h1 { font-weight: 600; }

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

        .container {
            width: 100%;
            max-width: var(--maxw);
            margin: 0 auto;
            padding: 0 24px;
        }

        .accent {
            color: var(--bronze-light);
        }

        /* ============ NAVBAR ============ */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 18px 0;
            transition: var(--transition);
            background: rgba(14, 34, 54, 0);
        }

        .navbar.scrolled {
            padding: 12px 0;
            background: rgba(14, 34, 54, 0.85);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--line);
        }

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

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: var(--font-head);
            font-weight: 800;
            font-size: 1.5rem;
            letter-spacing: 0.02em;
        }

        .brand .mark {
            position: relative;
            display: inline-flex;
        }

        /* Flecha-K estilizada como en el logo (fallback de texto) */
        .brand .arrow {
            color: var(--bronze);
        }

        /* Logo como imagen */
        .brand-logo {
            height: 60px;
            width: auto;
            display: block;
            transition: var(--transition);
        }

        .navbar.scrolled .brand-logo {
            height: 50px;
        }

        .footer-brand .brand-logo {
            height: 72px;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 32px;
            list-style: none;
        }

        .nav-links a {
            color: var(--text-muted);
            font-size: 0.95rem;
            font-weight: 500;
            transition: var(--transition);
            position: relative;
        }

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

        .nav-links a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 0;
            height: 2px;
            background: var(--bronze);
            transition: var(--transition);
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-cta {
            background: var(--bronze);
            color: #fff !important;
            padding: 10px 22px;
            border-radius: 50px;
            font-weight: 600;
            transition: var(--transition);
        }

        .nav-cta::after {
            display: none;
        }

        .nav-cta:hover {
            background: var(--bronze-light);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px var(--bronze-glow);
        }

        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: var(--text);
            font-size: 1.5rem;
            cursor: pointer;
        }

        /* ============ HERO ============ */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
            --aurora-color: var(--bronze);
            background:
                radial-gradient(900px 600px at 75% 20%, rgba(20, 48, 73, 0.9), transparent 60%),
                radial-gradient(700px 500px at 10% 80%, rgba(217, 117, 35, 0.12), transparent 60%),
                linear-gradient(160deg, var(--navy-900), var(--navy-950));
        }

        /* Patrón de circuito (FONDO ACTUAL) */
        .circuit {
            position: absolute;
            inset: 0;
            z-index: 0;
            opacity: 0.5;
            pointer-events: none;
        }

        /* Oculta el fondo actual sin borrarlo. Para revertir: quita la clase
           "circuit--hidden" del <svg> y comenta/elimina el bloque .ds-bg. */
        .circuit--hidden {
            display: none;
        }

        /* ============================================================
           FONDO "DIGITAL SERENITY" (opción nueva, animada) — hero
           Portado de un componente React a vanilla. Acentos en bronce.
           ============================================================ */
        .ds-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            /* Fondo "Aurora": gradiente radial que respira entre azul/naranja/blanco
               de marca. --aurora-color lo anima site.js (color-cycle en rAF).
               Fondo anterior (estático), por si se revierte:
               background: linear-gradient(135deg, #14304a 0%, #0e2236 52%, #1a3854 100%); */
            background-image: radial-gradient(125% 125% at 50% 0%, var(--navy-950) 48%, var(--aurora-color, var(--bronze)));
        }

        .ds-grid {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        @keyframes ds-grid-draw {
            0% { stroke-dashoffset: 1000; opacity: 0; }
            50% { opacity: 0.3; }
            100% { stroke-dashoffset: 0; opacity: 0.18; }
        }

        @keyframes ds-pulse-glow {
            0%, 100% { opacity: 0.12; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(1.25); }
        }

        @keyframes ds-float {
            0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; }
            25% { transform: translateY(-10px) translateX(5px); opacity: 0.7; }
            50% { transform: translateY(-5px) translateX(-3px); opacity: 0.45; }
            75% { transform: translateY(-15px) translateX(7px); opacity: 0.85; }
        }

        .ds-line {
            stroke: #2e6f9e;
            stroke-width: 0.6;
            opacity: 0;
            stroke-dasharray: 5 5;
            stroke-dashoffset: 1000;
            animation: ds-grid-draw 2s ease-out forwards;
        }

        .ds-line--accent { stroke: var(--bronze); }

        .ds-dot {
            opacity: 0;
            transform-box: fill-box;
            transform-origin: center;
            animation: ds-pulse-glow 3.2s ease-in-out infinite;
        }

        .ds-dot--bronze { fill: var(--bronze-light); }
        .ds-dot--slate { fill: #cbd5e1; }

        /* Esquinas decorativas */
        .ds-corner {
            position: absolute;
            width: 38px;
            height: 38px;
            border: 1px solid rgba(217, 117, 35, 0.3);
            opacity: 0;
            animation: word-appear 1s ease-out forwards;
        }

        .ds-corner span {
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--bronze-light);
            opacity: 0.5;
        }

        .ds-corner--tl { top: 22px; left: 22px; animation-delay: 4s; }
        .ds-corner--tr { top: 22px; right: 22px; animation-delay: 4.2s; }
        .ds-corner--bl { bottom: 22px; left: 22px; animation-delay: 4.4s; }
        .ds-corner--br { bottom: 22px; right: 22px; animation-delay: 4.6s; }
        .ds-corner--tl span { top: 0; left: 0; }
        .ds-corner--tr span { top: 0; right: 0; }
        .ds-corner--bl span { bottom: 0; left: 0; }
        .ds-corner--br span { bottom: 0; right: 0; }

        /* Partículas flotantes */
        .ds-float {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--bronze-light);
            opacity: 0;
            animation: ds-float 6s ease-in-out infinite;
        }

        .ds-float--slate { background: #cbd5e1; }

        /* Gradiente que sigue el mouse */
        .ds-mouse {
            position: absolute;
            width: 380px;
            height: 380px;
            border-radius: 9999px;
            pointer-events: none;
            transform: translate(-50%, -50%);
            background-image: radial-gradient(circle,
                rgba(239, 143, 60, 0.10),
                rgba(217, 117, 35, 0.05),
                transparent 70%);
            filter: blur(40px);
            opacity: 0;
            will-change: left, top, opacity;
            transition: left 70ms linear, top 70ms linear, opacity 300ms ease-out;
            z-index: 1;
        }

        /* Ripple al hacer clic dentro del hero */
        .ds-ripple {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: rgba(239, 143, 60, 0.7);
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 4;
            animation: ds-ripple-anim 1s ease-out forwards;
        }

        @keyframes ds-ripple-anim {
            0% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(14); }
        }

        /* Entrada escalonada del contenido del hero (estilo word-appear) */
        @keyframes word-appear {
            0% { opacity: 0; transform: translateY(30px) scale(0.92); filter: blur(8px); }
            50% { opacity: 0.8; transform: translateY(8px) scale(0.97); filter: blur(2px); }
            100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }

        .hero-content > * {
            opacity: 0;
            animation: word-appear 0.9s ease-out forwards;
        }

        .hero-content > .eyebrow { animation-delay: 0.2s; }
        .hero-content > h1 { animation-delay: 0.45s; }
        .hero-content > .sub { animation-delay: 0.75s; }
        .hero-content > .hero-ctas { animation-delay: 1s; }
        .hero-content > .hero-stats { animation-delay: 1.25s; }

        @media (prefers-reduced-motion: reduce) {
            .ds-line, .ds-dot, .ds-corner, .ds-float, .hero-content > * {
                animation: none;
                opacity: 1;
                stroke-dashoffset: 0;
            }
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 760px;
            padding: 120px 0 80px;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--bronze-light);
            background: rgba(217, 117, 35, 0.1);
            border: 1px solid rgba(217, 117, 35, 0.25);
            padding: 8px 16px;
            border-radius: 50px;
            margin-bottom: 28px;
        }

        .eyebrow .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--bronze-light);
            box-shadow: 0 0 12px var(--bronze-light);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.8); }
        }

        .hero h1 {
            font-size: clamp(2.4rem, 5.5vw, 4.1rem);
            font-weight: 800;
            margin-bottom: 24px;
        }

        .hero h1 .grad {
            background: linear-gradient(120deg, var(--bronze-light), var(--bronze));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero p.sub {
            font-size: clamp(1.05rem, 2vw, 1.3rem);
            color: var(--text-muted);
            margin-bottom: 40px;
            max-width: 620px;
        }

        .hero-ctas {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            align-items: center;
        }

        /* ===== Botón premium "Agenda tu diagnóstico" (efecto portado) ===== */
        .btn-diag {
            position: relative;
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            gap: 16px;
            padding: 14px 22px;
            border-radius: 18px;
            border: 2px solid rgba(217, 117, 35, 0.45);
            background: linear-gradient(135deg,
                rgba(217, 117, 35, 0.55),
                rgba(239, 143, 60, 0.35),
                rgba(217, 117, 35, 0.6));
            cursor: pointer;
            text-align: left;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .btn-diag:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 22px 52px var(--bronze-glow);
            border-color: rgba(239, 143, 60, 0.7);
        }

        .btn-diag:active {
            transform: scale(0.97);
        }

        /* Capa de brillo que barre al hover */
        .btn-diag .shine {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 214, 170, 0.45), transparent);
            transform: translateX(-100%);
            transition: transform 1s ease-out;
            pointer-events: none;
        }

        .btn-diag:hover .shine {
            transform: translateX(100%);
        }

        /* Glow suave al hover */
        .btn-diag .glow {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,
                rgba(239, 143, 60, 0.22),
                rgba(239, 143, 60, 0.08),
                rgba(239, 143, 60, 0.22));
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
        }

        .btn-diag:hover .glow {
            opacity: 1;
        }

        .btn-diag .ic-box {
            position: relative;
            z-index: 2;
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(217, 117, 35, 0.65), rgba(239, 143, 60, 0.35));
            backdrop-filter: blur(4px);
            color: #fff;
            font-size: 1.25rem;
            transition: all 0.3s ease;
        }

        .btn-diag:hover .ic-box {
            transform: scale(1.08);
            background: linear-gradient(135deg, rgba(239, 143, 60, 0.8), rgba(217, 117, 35, 0.5));
        }

        .btn-diag .txt {
            position: relative;
            z-index: 2;
        }

        .btn-diag .txt .t {
            display: block;
            color: #fff;
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 1.08rem;
            line-height: 1.2;
        }

        .btn-diag .txt .s {
            display: block;
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.85rem;
        }

        .btn-diag .arr {
            position: relative;
            z-index: 2;
            color: #fff;
            opacity: 0.4;
            transition: all 0.3s ease;
        }

        .btn-diag:hover .arr {
            opacity: 1;
            transform: translateX(4px);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 15px 30px;
            border-radius: 50px;
            font-family: var(--font-head);
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            border: 2px solid transparent;
        }

        .btn-primary {
            background: var(--bronze);
            color: #fff;
        }

        .btn-primary:hover {
            background: var(--bronze-light);
            transform: translateY(-3px);
            box-shadow: 0 12px 28px var(--bronze-glow);
        }

        .btn-ghost {
            background: transparent;
            color: var(--text);
            border-color: var(--line);
        }

        .btn-ghost:hover {
            border-color: var(--bronze-light);
            color: var(--bronze-light);
            transform: translateY(-3px);
        }

        .hero-stats {
            display: flex;
            gap: 30px;
            margin-top: 56px;
            flex-wrap: wrap;
        }

        .stat .num {
            font-family: var(--font-head);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--bronze-light);
        }

        .stat .lbl {
            font-size: 0.9rem;
            color: var(--text-dim);
        }

        /* ===== Hero a 2 columnas: contenido + visual orbital ===== */
        .hero-grid {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1fr 1.02fr;
            align-items: center;
            gap: 56px;
        }

        .hero-grid .hero-content {
            max-width: none;
        }

        .hero-visual {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 110px 0 80px;
        }

        .orbit-stage {
            position: relative;
            width: min(100%, 360px);
            aspect-ratio: 1;
        }

        /* Halo de fondo */
        .orbit-stage::before {
            content: '';
            position: absolute;
            inset: 18%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(217, 117, 35, 0.18), transparent 70%);
            filter: blur(20px);
        }

        .ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid var(--line);
        }

        .ring--1 { inset: 0; }
        .ring--2 { inset: 50px; border-color: rgba(217, 117, 35, 0.22); }
        .ring--3 { inset: 100px; }

        /* Núcleo central */
        .core {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 94px;
            height: 94px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 2.3rem;
            background: radial-gradient(circle at 32% 30%, rgba(239, 143, 60, 0.55), rgba(217, 117, 35, 0.12));
            border: 1px solid rgba(239, 143, 60, 0.55);
            box-shadow: 0 0 42px var(--bronze-glow), inset 0 0 22px rgba(239, 143, 60, 0.22);
            z-index: 3;
            animation: corePulse 3.2s ease-in-out infinite;
        }

        @keyframes corePulse {
            0%, 100% { box-shadow: 0 0 42px var(--bronze-glow), inset 0 0 22px rgba(239, 143, 60, 0.22); }
            50% { box-shadow: 0 0 70px var(--bronze-glow), inset 0 0 30px rgba(239, 143, 60, 0.38); }
        }

        /* Etiqueta del núcleo */
        .core-label {
            position: absolute;
            top: calc(50% + 60px);
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 0.78rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--bronze-light);
            white-space: nowrap;
            z-index: 3;
        }

        /* Órbitas que giran (wrapper) */
        .orbiter {
            position: absolute;
            inset: 0;
        }

        .orbiter--1 { animation: orbitSpin 20s linear infinite; }
        .orbiter--2 { inset: 50px; animation: orbitSpinRev 27s linear infinite; }
        .orbiter--3 { inset: 100px; animation: orbitSpin 23s linear infinite; }

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

        /* Posición de cada chip (estática dentro del wrapper que gira) */
        .chip-holder {
            position: absolute;
            top: -26px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* El chip se contra-gira para mantener el icono derecho */
        .chip {
            width: 52px;
            height: 52px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--navy-800);
            border: 1px solid var(--line);
            color: var(--bronze-light);
            font-size: 1.2rem;
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
        }

        .orbiter--1 .chip { animation: orbitSpinRev 20s linear infinite; }
        .orbiter--2 .chip { animation: orbitSpin 27s linear infinite; }
        .orbiter--3 .chip { animation: orbitSpinRev 23s linear infinite; }

        @media (max-width: 920px) {
            .hero-grid { grid-template-columns: 1fr; }
            .hero-grid .hero-content { max-width: 760px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .core, .orbiter, .chip { animation: none; }
        }

        /* ============ SECCIONES GENERAL ============ */
        section {
            position: relative;
        }

        .sec-pad {
            padding: 110px 0;
        }

        .sec-head {
            text-align: center;
            max-width: 680px;
            margin: 0 auto 64px;
        }

        .sec-tag {
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--bronze-light);
            margin-bottom: 14px;
        }

        /* Variante más grande del sec-tag (usada en "Trabajo seleccionado") */
        .sec-tag-lg {
            font-size: 1.35rem;
            font-family: var(--font-head);
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: none;
            margin-bottom: 10px;
        }

        .sec-head h2 {
            font-size: clamp(1.9rem, 4vw, 2.7rem);
            font-weight: 700;
            margin-bottom: 16px;
        }

        .sec-head p {
            color: var(--text-muted);
            font-size: 1.1rem;
        }

        /* ===== Separadores visuales entre secciones 2-3-4 ===== */
        .services,
        .why,
        .process {
            border-top: 1px solid var(--line);
        }

        /* Marca con acento bronce en el borde superior */
        .services::after,
        .why::after,
        .process::after {
            content: '';
            position: absolute;
            top: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 150px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--bronze-light), transparent);
            opacity: 0.75;
            box-shadow: 0 0 14px var(--bronze-glow);
        }

        /* ============ SERVICIOS ============ */
        .services {
            background:
                radial-gradient(700px 400px at 90% 0%, rgba(20, 48, 73, 0.5), transparent 60%),
                linear-gradient(180deg, #1a3854 0%, #14304a 100%);
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 26px;
        }

        /* Tarjeta con efecto "reveal": círculo bronce que sale del ícono */
        .service-card {
            position: relative;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
        }

        .service-card:hover {
            border-color: rgba(217, 117, 35, 0.5);
            transform: translateY(-8px);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
        }

        /* Capas */
        .sc-layer { padding: 38px 32px; }

        .sc-base {
            position: relative;
            z-index: 1;
            flex: 1;
            background: var(--card);
        }

        .sc-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            background: linear-gradient(150deg, var(--bronze), var(--bronze-light));
            clip-path: circle(48px at 62px 68px);
            transition: clip-path 0.75s cubic-bezier(0.65, 0, 0.35, 1);
            will-change: clip-path;
        }

        .service-card:hover .sc-overlay {
            clip-path: circle(150% at 62px 68px);
        }

        /* Estilos comunes de contenido */
        .service-icon {
            width: 60px;
            height: 60px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            margin-bottom: 24px;
        }

        .service-card h3 {
            font-size: 1.35rem;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .service-card p {
            font-size: 0.98rem;
            margin-bottom: 20px;
        }

        .service-card ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .service-card li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.92rem;
        }

        .service-card li i { font-size: 0.8rem; }

        /* Capa BASE (oscura) */
        .sc-base .service-icon {
            color: var(--bronze-light);
            background: rgba(217, 117, 35, 0.12);
            border: 1px solid rgba(217, 117, 35, 0.25);
        }

        .sc-base h3 { color: var(--text); }
        .sc-base p { color: var(--text-muted); }
        .sc-base li { color: var(--text-muted); }
        .sc-base li i { color: var(--bronze-light); }

        /* Capa OVERLAY (bronce) — texto blanco para legibilidad */
        .sc-overlay .service-icon {
            color: var(--bronze);
            background: #fff;
            border: 1px solid rgba(255, 255, 255, 0.7);
        }

        .sc-overlay h3 { color: #fff; }
        .sc-overlay p { color: rgba(255, 255, 255, 0.92); }
        .sc-overlay li { color: rgba(255, 255, 255, 0.94); }
        .sc-overlay li i { color: #fff; }

        @media (prefers-reduced-motion: reduce) {
            .sc-overlay { transition: none; }
        }

        /* ============ DIFERENCIADORES ============ */
        .why {
            background:
                radial-gradient(600px 360px at 10% 0%, rgba(217, 117, 35, 0.06), transparent 60%),
                var(--navy-950);
        }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px;
        }

        .why-item {
            text-align: center;
            padding: 32px 20px;
        }

        .why-item .ic {
            font-size: 2rem;
            color: var(--bronze-light);
            margin-bottom: 18px;
        }

        .why-item h4 {
            font-size: 1.15rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .why-item p {
            color: var(--text-muted);
            font-size: 0.94rem;
        }

        /* ============ PROCESO ============ */
        .process {
            background:
                radial-gradient(700px 400px at 90% 0%, rgba(20, 48, 73, 0.5), transparent 60%),
                linear-gradient(180deg, #1a3854 0%, #14304a 100%);
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            counter-reset: step;
        }

        .step {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 36px 26px;
            position: relative;
            overflow: hidden;
            transition: var(--transition);
        }

        /* Barra superior de bronce (igual que en las tarjetas de servicios) */
        .step::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--bronze), var(--bronze-light));
            transform: scaleX(0);
            transform-origin: left;
            transition: var(--transition);
        }

        .step:hover {
            background: var(--card-hover);
            border-color: rgba(217, 117, 35, 0.45);
            transform: translateY(-10px);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(217, 117, 35, 0.15);
        }

        .step:hover::before {
            transform: scaleX(1);
        }

        .step .step-num {
            counter-increment: step;
            font-family: var(--font-head);
            font-size: 2.8rem;
            font-weight: 800;
            color: rgba(217, 117, 35, 0.25);
            line-height: 1;
            margin-bottom: 16px;
            transition: var(--transition);
        }

        /* El número se enciende en bronce al pasar el mouse */
        .step:hover .step-num {
            color: var(--bronze-light);
            text-shadow: 0 0 22px var(--bronze-glow);
            transform: scale(1.06);
            transform-origin: left center;
        }

        .step .step-num::before {
            content: "0" counter(step);
        }

        .step h4 {
            font-size: 1.2rem;
            margin-bottom: 10px;
        }

        .step p {
            color: var(--text-muted);
            font-size: 0.94rem;
        }

        /* ============ CLIENTES / MARCAS (oculta hasta tener logos) ============ */
        .clients {
            background: var(--navy-950);
            padding: 64px 0;
            border-top: 1px solid var(--line);
        }

        .clients .sec-tag {
            text-align: center;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--bronze-light);
            margin-bottom: 34px;
        }

        .clients-logos {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 44px;
        }

        .client-logo {
            height: 46px;
            width: auto;
            max-width: 160px;
            object-fit: contain;
            filter: grayscale(100%) brightness(1.6);
            opacity: 0.55;
            transition: var(--transition);
        }

        .client-logo:hover {
            filter: none;
            opacity: 1;
            transform: scale(1.05);
        }

        /* Placeholder visual mientras no hay logo real */
        .client-slot {
            height: 46px;
            min-width: 130px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed var(--line);
            border-radius: 10px;
            color: var(--text-dim);
            font-size: 0.82rem;
            font-family: var(--font-head);
        }

        /* ============ CTA BANNER ============ */
        .cta-banner {
            background:
                radial-gradient(600px 300px at 50% 0%, rgba(217, 117, 35, 0.18), transparent 70%),
                var(--navy-950);
        }

        .cta-box {
            background: linear-gradient(135deg, var(--navy-700), var(--navy-800));
            border: 1px solid rgba(217, 117, 35, 0.25);
            border-radius: 24px;
            padding: 64px 48px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-box h2 {
            font-size: clamp(1.7rem, 3.5vw, 2.5rem);
            margin-bottom: 16px;
        }

        .cta-box p {
            color: var(--text-muted);
            font-size: 1.1rem;
            max-width: 540px;
            margin: 0 auto 32px;
        }

        /* ===== Formulario de contacto ===== */
        .contact-form {
            max-width: 720px;
            margin: 0 auto;
            text-align: left;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
        }

        .form-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-field.full {
            grid-column: 1 / -1;
        }

        .form-field label {
            font-family: var(--font-head);
            font-size: 0.84rem;
            font-weight: 600;
            color: var(--text-muted);
            letter-spacing: 0.02em;
        }

        .form-field label .req {
            color: var(--bronze-light);
        }

        .form-field input,
        .form-field select,
        .form-field textarea {
            width: 100%;
            padding: 13px 16px;
            border-radius: var(--radius-sm);
            background: rgba(14, 34, 54, 0.5);
            border: 1px solid var(--line);
            color: var(--text);
            font-family: var(--font-body);
            font-size: 0.96rem;
            transition: var(--transition);
        }

        .form-field textarea {
            resize: vertical;
            min-height: 110px;
        }

        .form-field input::placeholder,
        .form-field textarea::placeholder {
            color: var(--text-dim);
        }

        .form-field input:focus,
        .form-field select:focus,
        .form-field textarea:focus {
            outline: none;
            border-color: var(--bronze);
            box-shadow: 0 0 0 3px var(--bronze-glow);
            background: rgba(14, 34, 54, 0.78);
        }

        .form-field select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-right: 42px;
        }

        .form-field select option {
            background: var(--navy-800);
            color: var(--text);
        }

        .form-actions {
            grid-column: 1 / -1;
            display: flex;
            gap: 14px;
            margin-top: 6px;
            flex-wrap: wrap;
        }

        .form-actions .btn {
            flex: 1;
            min-width: 220px;
            justify-content: center;
        }

        .form-status {
            grid-column: 1 / -1;
            text-align: center;
            font-size: 0.95rem;
            margin-top: 2px;
            min-height: 1.2em;
            transition: var(--transition);
        }

        .form-status.ok { color: #34d399; }
        .form-status.err { color: #f87171; }

        /* Honeypot anti-spam (oculto) */
        .hp-field {
            position: absolute;
            left: -9999px;
            opacity: 0;
            height: 0;
            overflow: hidden;
        }

        .form-note {
            text-align: center;
            margin-top: 18px;
            color: var(--text-dim);
            font-size: 0.9rem;
        }

        .form-note a {
            color: var(--bronze-light);
        }

        @media (max-width: 600px) {
            .form-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ============ CONTACTO / FOOTER ============ */
        footer {
            background: var(--navy-950);
            border-top: 1px solid var(--line);
            padding: 72px 0 32px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 48px;
        }

        .footer-tagline {
            font-family: var(--font-head);
            font-weight: 600;
            color: var(--text);
            font-size: 1rem;
            margin-bottom: 16px;
        }

        .branch-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

        .branch-pill {
            display: inline-flex;
            align-items: center;
            font-family: var(--font-head);
            font-size: 0.78rem;
            font-weight: 600;
            padding: 7px 14px;
            border-radius: 50px;
            border: 1px solid rgba(217, 117, 35, 0.35);
            color: var(--bronze-light);
            background: rgba(217, 117, 35, 0.08);
            transition: var(--transition);
        }

        .branch-pill--alt {
            border-color: var(--line);
            color: var(--text-muted);
            background: transparent;
        }

        .branch-pill:hover { background: var(--bronze); color: #fff; border-color: var(--bronze); }

        html[data-theme="light"] .footer-tagline { color: var(--lt-text); }

        .footer-brand .brand {
            margin-bottom: 18px;
        }

        .footer-brand p {
            color: var(--text-muted);
            max-width: 320px;
            font-size: 0.96rem;
        }

        .footer-col h5 {
            font-family: var(--font-head);
            font-size: 0.85rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--bronze-light);
            margin-bottom: 20px;
        }

        .footer-col ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .footer-col a, .footer-col li {
            color: var(--text-muted);
            font-size: 0.96rem;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .footer-col a:hover {
            color: var(--bronze-light);
        }

        .footer-col i {
            color: var(--bronze-light);
            width: 18px;
            text-align: center;
        }

        .socials {
            display: flex;
            gap: 14px;
            margin-top: 22px;
        }

        .socials a {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--card);
            border: 1px solid var(--line);
            color: var(--text-muted);
            transition: var(--transition);
        }

        .socials a:hover {
            background: var(--bronze);
            color: #fff;
            border-color: var(--bronze);
            transform: translateY(-3px);
        }

        .copyright {
            text-align: center;
            padding-top: 28px;
            border-top: 1px solid var(--line);
            color: var(--text-dim);
            font-size: 0.88rem;
        }

        /* WhatsApp flotante */
        .wa-float {
            position: fixed;
            bottom: 26px;
            right: 26px;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #25d366;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem;
            z-index: 999;
            box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
            transition: var(--transition);
            animation: floaty 3s ease-in-out infinite;
        }

        .wa-float:hover {
            transform: scale(1.1);
        }

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

        /* ============ ANIMACIÓN SCROLL ============ */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }

        .reveal.in {
            opacity: 1;
            transform: translateY(0);
        }

        /* ============ TRABAJO SELECCIONADO (casos) ============ */
        .works-scroll {
            display: flex;
            gap: 24px;
            overflow-x: auto;
            scroll-snap-type: x proximity;
            padding: 6px 6px 22px;
            margin: 0 -6px;
            scrollbar-width: thin;
            scrollbar-color: var(--bronze) transparent;
        }

        .works-scroll::-webkit-scrollbar { height: 6px; }
        .works-scroll::-webkit-scrollbar-track { background: transparent; }
        .works-scroll::-webkit-scrollbar-thumb { background: rgba(217, 117, 35, 0.4); border-radius: 10px; }
        .works-scroll::-webkit-scrollbar-thumb:hover { background: var(--bronze); }

        .work-card {
            scroll-snap-align: start;
            flex: 0 0 min(360px, 84vw);
            display: flex;
            flex-direction: column;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            cursor: pointer;
            transition: var(--transition);
        }

        .work-card:hover,
        .work-card:focus-visible {
            transform: translateY(-8px);
            border-color: rgba(217, 117, 35, 0.45);
            box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35);
            outline: none;
        }

        .work-thumb {
            position: relative;
            aspect-ratio: 16 / 11;
            background: linear-gradient(150deg, #123049, #0a1825);
            overflow: hidden;
        }

        .work-browser-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 9px 12px;
            background: rgba(255, 255, 255, 0.04);
            border-bottom: 1px solid var(--line);
        }

        .wb-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }

        .wb-label {
            margin-left: 6px;
            font-size: 0.68rem;
            color: var(--text-dim);
            font-family: var(--font-body);
        }

        .work-live {
            position: absolute;
            top: 46px;
            left: 12px;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--font-head);
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #34d399;
            background: rgba(7, 18, 29, 0.78);
            border: 1px solid rgba(52, 211, 153, 0.35);
            padding: 5px 11px;
            border-radius: 50px;
            backdrop-filter: blur(6px);
        }

        .work-live.is-soon { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); }
        .work-live i { font-size: 6px; }
        .work-live:not(.is-soon) i { animation: pulseDot 1.8s infinite; }

        @keyframes pulseDot {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.35; }
        }

        .work-open {
            position: absolute;
            top: 42px;
            right: 12px;
            z-index: 2;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background: rgba(7, 18, 29, 0.6);
            border: 1px solid var(--line);
            font-size: 0.78rem;
            transition: var(--transition);
        }

        .work-card:hover .work-open,
        .work-card:focus-visible .work-open {
            background: var(--bronze);
            border-color: var(--bronze);
        }

        .work-preview {
            position: absolute;
            inset: 34px 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.1rem;
            color: rgba(224, 122, 38, 0.55);
        }

        .work-media {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .work-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
        .work-body h3 { font-family: var(--font-head); font-size: 1.12rem; font-weight: 600; color: var(--text); }
        .work-body p { color: var(--text-muted); font-size: 0.92rem; }

        .work-link {
            margin-top: auto;
            padding-top: 6px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-head);
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--bronze-light);
        }

        .work-link i { transition: transform 0.25s ease; font-size: 0.75rem; }
        .work-card:hover .work-link i,
        .work-card:focus-visible .work-link i { transform: translateX(3px); }

        .works-more { text-align: center; margin-top: 40px; }

        /* ── Franja de logos de clientes (marquee infinito) — SIN USO desde que
              llegaron los 4 logos reales (2026-09-12): con tan pocos, el loop se
              veía repetitivo; se optó por la fila estática .client-logos/.cl-*
              de abajo. Se deja el CSS por si la lista de clientes crece y vale
              la pena retomar el scroll infinito. ── */
        .logo-marquee { margin-top: 56px; }

        .lm-label {
            text-align: center;
            font-family: var(--font-head);
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 26px;
        }

        .lm-viewport {
            position: relative;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        }

        .lm-track {
            display: flex;
            align-items: center;
            gap: 16px;
            width: max-content;
            animation: lmScroll 34s linear infinite;
        }

        .lm-viewport:hover .lm-track { animation-play-state: paused; }

        .lm-item {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            padding: 14px 26px;
            border-radius: 12px;
            background: var(--card);
            border: 1px solid var(--line);
            font-family: var(--font-head);
            font-weight: 600;
            font-size: 0.88rem;
            color: var(--text-dim);
            white-space: nowrap;
        }

        .lm-item i { font-size: 0.95rem; opacity: 0.7; }

        @keyframes lmScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }

        @media (prefers-reduced-motion: reduce) {
            .lm-track { animation: none; }
        }

        /* ── Franja de logos de clientes (fila estática, 4 logos reales) —
              mismo tamaño para el mismo impacto visual; opacidad reducida por
              defecto y a color al pasar el mouse, en vez de movimiento continuo
              (con solo 4 logos un marquee se veía repetitivo). ── */
        .client-logos { margin-top: 56px; }

        .cl-label {
            text-align: center;
            font-family: var(--font-head);
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 30px;
        }

        .cl-row {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 52px;
        }

        .cl-logo {
            height: 42px;
            width: auto;
            max-width: 150px;
            object-fit: contain;
            opacity: 0.8;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

        .cl-logo:hover { opacity: 1; transform: translateY(-2px); }

        @media (max-width: 640px) {
            .cl-row { gap: 32px; }
            .cl-logo { height: 34px; }
        }

        /* ── Modal de detalle de trabajo ── */
        .work-modal-card {
            width: 100%;
            max-width: 720px;
            max-height: 88vh;
            overflow-y: auto;
            background: var(--navy-800);
            border: 1px solid var(--line);
            border-radius: 22px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
            transform: scale(0.94) translateY(16px);
            transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
            text-align: left;
        }

        .modal-overlay.open .work-modal-card { transform: scale(1) translateY(0); }

        .wm-close {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 5;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(7, 18, 29, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .wm-close:hover { background: var(--bronze); border-color: var(--bronze); transform: rotate(90deg); }

        .wm-gallery {
            position: relative;
            aspect-ratio: 16 / 9;
            background: linear-gradient(150deg, #123049, #0a1825);
            overflow: hidden;
        }

        .wm-gallery-track {
            display: flex;
            height: 100%;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
        }

        .wm-gallery-track > * {
            flex: 0 0 100%;
            scroll-snap-align: start;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.6rem;
            color: rgba(224, 122, 38, 0.55);
        }

        /* Capturas de pantalla/UI: "contain" en vez de "cover" — evita recortar
           tablas anchas o recibos verticales que no son 16:9 */
        .wm-gallery-track img {
            object-fit: contain;
            padding: 22px;
            box-sizing: border-box;
        }

        /* Navegación de la galería (flechas + puntos) — solo visible si hay 2+ imágenes */
        .wm-gnav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 3;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(7, 18, 29, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.18);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.85rem;
        }

        .wm-gnav:hover { background: var(--bronze); border-color: var(--bronze); }
        .wm-gnav-prev { left: 14px; }
        .wm-gnav-next { right: 14px; }

        .wm-gallery-dots {
            position: absolute;
            bottom: 14px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            gap: 7px;
        }

        .wm-gdot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            border: none;
            padding: 0;
            cursor: pointer;
            transition: var(--transition);
        }

        .wm-gdot.active { background: var(--bronze-light); width: 20px; border-radius: 4px; }

        .wm-body { padding: 30px 32px 34px; }

        .wm-tag {
            display: inline-block;
            font-family: var(--font-head);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--bronze-light);
            background: rgba(217, 117, 35, 0.12);
            border: 1px solid rgba(217, 117, 35, 0.28);
            padding: 5px 14px;
            border-radius: 50px;
            margin-bottom: 16px;
        }

        .wm-body h2 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
        .wm-desc { color: var(--text-muted); font-size: 0.98rem; margin-bottom: 26px; }

        .wm-kpis {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 14px;
            margin-bottom: 28px;
        }

        .wm-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
        .wm-kpi .kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 8px; }
        .wm-kpi .kpi-value { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .wm-kpi .kpi-value .from { color: var(--text-dim); font-weight: 500; text-decoration: line-through; font-size: 0.85em; }
        .wm-kpi .kpi-value .to { color: var(--bronze-light); }
        .wm-kpi .kpi-value i { color: var(--bronze-light); font-size: 0.7rem; }

        .wm-section { margin-bottom: 22px; }

        .wm-section h4 {
            font-family: var(--font-head);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--bronze-light);
            margin-bottom: 8px;
        }

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

        .wm-footer { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 8px; }

        .wm-placeholder-note {
            font-size: 0.8rem;
            color: var(--text-dim);
            font-style: italic;
            border-top: 1px dashed var(--line);
            padding-top: 16px;
            margin-top: 4px;
        }

        /* ============ RESPONSIVE ============ */
        @media (max-width: 980px) {
            .services-grid { grid-template-columns: 1fr 1fr; }
            .why-grid { grid-template-columns: 1fr 1fr; }
            .steps { grid-template-columns: 1fr 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 720px) {
            .nav-links {
                position: fixed;
                top: 64px;
                right: 0;
                flex-direction: column;
                background: var(--navy-900);
                border: 1px solid var(--line);
                border-radius: 0 0 0 16px;
                padding: 24px;
                gap: 20px;
                width: 220px;
                transform: translateX(110%);
                transition: var(--transition);
            }

            .nav-links.open {
                transform: translateX(0);
            }

            .menu-toggle { display: block; }
            .services-grid, .why-grid, .steps, .footer-grid {
                grid-template-columns: 1fr;
            }
            .hero-stats { gap: 28px; }
            .sec-pad { padding: 72px 0; }
            .cta-box { padding: 44px 24px; }
            .work-card { flex-basis: 88vw; }
            .wm-body { padding: 24px 22px 28px; }
        }

        /* ============ CADENA DE VALOR (Datos → Resultado) ============ */
        .chain {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px 10px;
            justify-items: center;
            align-items: center;
            margin: 0 auto;
            max-width: 720px;
        }

        @media (max-width: 620px) {
            .chain { grid-template-columns: repeat(2, 1fr); }
        }

        .chain-node {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 16px;
            border-radius: 50px;
            border: 1px solid var(--line);
            background: var(--card);
            font-family: var(--font-head);
            font-weight: 600;
            font-size: 0.86rem;
            color: var(--text);
            white-space: nowrap;
        }

        .chain-node i { color: var(--bronze-light); font-size: 0.8rem; }
        .chain-node.is-key { background: linear-gradient(135deg, var(--bronze), var(--bronze-light)); border-color: transparent; color: #fff; }
        .chain-node.is-key i { color: #fff; }

        /* ============ VERBOS (Entendemos / Diseñamos / Convertimos) ============ */
        .verbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
        .verb {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 30px 26px;
            transition: var(--transition);
        }
        .verb:hover { transform: translateY(-6px); border-color: rgba(217, 117, 35, 0.3); }
        .verb .v-ic { font-size: 1.7rem; color: var(--bronze-light); margin-bottom: 14px; }
        .verb h4 { font-family: var(--font-head); font-size: 1.2rem; margin-bottom: 8px; }
        .verb p { color: var(--text-muted); font-size: 0.95rem; }

        /* ============ FUENTES FRAGMENTADAS (Problema) ============ */
        .sources-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
            margin-bottom: 52px;
        }

        .source-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 18px;
            border-radius: 50px;
            border: 1px dashed rgba(159, 179, 200, 0.3);
            color: var(--text-dim);
            font-family: var(--font-head);
            font-weight: 500;
            font-size: 0.85rem;
            background: transparent;
            transition: var(--transition);
            /* Ligera dispersión aleatoria para sugerir fragmentación */
        }

        .source-chip:nth-child(odd) { transform: translateY(-4px); }
        .source-chip:nth-child(3n) { transform: translateY(5px); }

        .source-chip i { font-size: 0.8rem; opacity: 0.7; }

        .source-chip:hover {
            border-style: solid;
            border-color: rgba(217, 117, 35, 0.4);
            color: var(--bronze-light);
            transform: translateY(-2px);
        }

        html[data-theme="light"] .source-chip { border-color: var(--lt-line); color: var(--lt-text-dim); }
        html[data-theme="light"] .source-chip:hover { border-color: rgba(217, 117, 35, 0.4); color: var(--bronze); }

        /* ============ DOLOR (Lo que escuchamos) ============ */
        .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
        .pain-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 28px 24px;
            transition: var(--transition);
        }
        .pain-card:hover { transform: translateY(-6px); border-color: rgba(217, 117, 35, 0.3); }
        .pain-quote {
            font-family: var(--font-head);
            font-size: 1.08rem;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 14px;
            line-height: 1.35;
        }
        .pain-quote::before { content: '\201C'; color: var(--bronze-light); margin-right: 2px; }
        .pain-quote::after { content: '\201D'; color: var(--bronze-light); }
        .pain-card .pain-quote:last-child { margin-bottom: 0; }
        .pain-sol { display: flex; align-items: flex-start; gap: 10px; color: var(--text-muted); font-size: 0.92rem; }
        .pain-sol i { color: var(--bronze-light); margin-top: 4px; font-size: 0.8rem; }

        /* ============ INTELIGENCIA (4 cards) ============ */
        .intel-grid { grid-template-columns: repeat(4, 1fr) !important; }

        /* ============ OPORTUNIDADES ============ */
        .opp-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 26px;
        }

        .opp-card {
            position: relative;
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 32px 28px;
            overflow: hidden;
            transition: var(--transition);
        }

        .opp-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 3px; height: 100%;
            background: linear-gradient(180deg, var(--bronze), var(--bronze-light));
            transform: scaleY(0);
            transform-origin: top;
            transition: var(--transition);
        }

        .opp-card:hover {
            transform: translateY(-8px);
            border-color: rgba(217, 117, 35, 0.4);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
        }

        .opp-card:hover::before { transform: scaleY(1); }

        .opp-num {
            font-family: var(--font-head);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--bronze-light);
            margin-bottom: 14px;
        }

        .opp-card h4 { font-size: 1.2rem; margin-bottom: 18px; }

        .opp-row { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); }
        .opp-row:last-child { border-bottom: none; padding-bottom: 0; }
        .opp-row .k { font-family: var(--font-head); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
        .opp-row .v { color: var(--text-muted); font-size: 0.9rem; margin-top: 2px; }
        .opp-row.is-action .v { color: var(--bronze-light); font-weight: 600; }

        html[data-theme="light"] .opp-card { background: var(--lt-surface); border-color: var(--lt-line); }
        html[data-theme="light"] .opp-card h4 { color: var(--lt-text); }
        html[data-theme="light"] .opp-row { border-bottom-color: var(--lt-line); }
        html[data-theme="light"] .opp-row .k { color: var(--lt-text-dim); }
        html[data-theme="light"] .opp-row .v { color: var(--lt-text-muted); }
        html[data-theme="light"] .opp-row.is-action .v { color: var(--bronze); }
        html[data-theme="light"] .sol-note { color: var(--lt-text-dim); }

        /* ============ SOLUCIONES: núcleo + 3 ramas ============ */
        .branch-core {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            margin: 0 auto;
        }

        .branch-core-ic {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at 32% 30%, rgba(239, 143, 60, 0.55), rgba(217, 117, 35, 0.12));
            border: 1px solid rgba(239, 143, 60, 0.55);
            color: #fff;
            font-size: 1.6rem;
            box-shadow: 0 0 32px var(--bronze-glow);
        }

        .branch-core-lbl {
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 0.85rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--bronze-light);
        }

        .branches-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 26px;
            margin-top: 8px;
            position: relative;
        }

        .branches-grid::before {
            content: '';
            position: absolute;
            top: -32px;
            left: 50%;
            width: 1px;
            height: 32px;
            background: linear-gradient(180deg, var(--bronze-light), transparent);
            transform: translateX(-50%);
        }

        .sol-note {
            text-align: center;
            max-width: 620px;
            margin: 44px auto 0;
            color: var(--text-dim);
            font-size: 0.88rem;
            font-style: italic;
        }

        @media (max-width: 980px) {
            .intel-grid, .opp-grid, .branches-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 720px) {
            .intel-grid, .opp-grid, .branches-grid { grid-template-columns: 1fr !important; }
        }

        /* ============ BENEFICIOS ============ */
        .bene-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
        .bene-item { text-align: center; padding: 26px 16px; }
        .bene-item .b-ic { font-size: 1.8rem; color: var(--bronze-light); margin-bottom: 14px; }
        .bene-item h4 { font-family: var(--font-head); font-size: 1.08rem; margin-bottom: 8px; }
        .bene-item p { color: var(--text-muted); font-size: 0.9rem; }

        @media (max-width: 900px) {
            .verbs, .pain-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 620px) {
            .verbs, .pain-grid { grid-template-columns: 1fr; }

            /* Compactar Problema en móvil para reducir scroll */
            #problema .sec-head h2 { display: none; }
            #problema .sec-head { margin-bottom: 30px; }
            #problema .sec-head p { font-size: 0.98rem; }
            .sources-row { gap: 8px; margin-bottom: 34px; }
            .source-chip { font-size: 0.76rem; padding: 7px 14px; }
            .source-chip:nth-child(odd), .source-chip:nth-child(3n) { transform: none; }
            .pain-card { padding: 16px 18px; }
            .pain-quote { font-size: 1rem; margin-bottom: 7px; }
            .pain-sol { font-size: 0.85rem; }

            /* Compactar pasos (Cómo trabajamos) en móvil */
            .step { padding: 20px 20px; }
            .step .step-num { font-size: 2.1rem; margin-bottom: 6px; }
            .step h4 { font-size: 1.08rem; }
            .step p { font-size: 0.88rem; }
        }

        /* Overrides de modo claro para secciones nuevas */
        html[data-theme="light"] .chain-node { background: var(--lt-surface); border-color: var(--lt-line); color: var(--lt-text); }
        html[data-theme="light"] .verb, html[data-theme="light"] .pain-card { background: var(--lt-surface); border-color: var(--lt-line); }
        html[data-theme="light"] .verb h4, html[data-theme="light"] .pain-quote, html[data-theme="light"] .bene-item h4 { color: var(--lt-text); }
        html[data-theme="light"] .verb p, html[data-theme="light"] .pain-sol, html[data-theme="light"] .bene-item p { color: var(--lt-text-muted); }

        /* ============================================================
           MODO CLARO — "marco oscuro + contenido cálido claro"
           (Reestructura Visual y de Contenido, sept 2026)
           Navbar, hero y footer permanecen oscuros (logo blanco intacto).
           Las secciones de contenido usan NEUTROS CÁLIDOS estilo editorial
           (beige #F4EFE9), no el gris frío anterior.
           ============================================================ */
        html[data-theme="light"] {
            --lt-bg: #F4EFE9;
            --lt-surface: #ffffff;
            --lt-text: #14304a;
            --lt-text-muted: #5b5750;
            --lt-text-dim: #8b857b;
            --lt-line: rgba(90, 74, 58, 0.16);
        }

        /* Fondos de secciones de contenido — beige cálido dominante */
        html[data-theme="light"] .services { background: linear-gradient(180deg, #FBF8F3, #F4EFE9); }
        html[data-theme="light"] .why { background: linear-gradient(180deg, #F4EFE9, #FBF8F3); }
        html[data-theme="light"] .process { background: linear-gradient(180deg, #FBF8F3, #F4EFE9); }
        html[data-theme="light"] .cta-banner { background: var(--lt-bg); }
        html[data-theme="light"] .clients { background: var(--lt-bg); border-top-color: var(--lt-line); }

        /* Sombras cálidas y suaves para tarjetas en modo claro (estética editorial,
           no sombras negras duras) */
        html[data-theme="light"] .capacity-card:hover,
        html[data-theme="light"] .opp-card:hover,
        html[data-theme="light"] .service-card:hover,
        html[data-theme="light"] .story-card,
        html[data-theme="light"] .pain-card:hover,
        html[data-theme="light"] .work-card:hover,
        html[data-theme="light"] .result-card:hover,
        html[data-theme="light"] .sol-module:hover {
            box-shadow: 0 14px 36px rgba(90, 70, 50, 0.12), 0 4px 10px rgba(90, 70, 50, 0.06) !important;
        }

        /* Encabezados de sección */
        html[data-theme="light"] .sec-head h2 { color: var(--lt-text); }
        html[data-theme="light"] .sec-head p { color: var(--lt-text-muted); }

        /* Tarjetas de servicios (capa base) — la capa overlay bronce no cambia */
        html[data-theme="light"] .service-card { border-color: var(--lt-line); }
        html[data-theme="light"] .sc-base { background: var(--lt-surface); }
        html[data-theme="light"] .sc-base h3 { color: var(--lt-text); }
        html[data-theme="light"] .sc-base p,
        html[data-theme="light"] .sc-base li { color: var(--lt-text-muted); }
        html[data-theme="light"] .sc-base .service-icon {
            color: var(--bronze);
            background: rgba(217, 117, 35, 0.1);
            border-color: rgba(217, 117, 35, 0.25);
        }

        /* Diferenciadores */
        html[data-theme="light"] .why-item h4 { color: var(--lt-text); }
        html[data-theme="light"] .why-item p { color: var(--lt-text-muted); }

        /* Proceso */
        html[data-theme="light"] .step { background: var(--lt-surface); border-color: var(--lt-line); }
        html[data-theme="light"] .step h4 { color: var(--lt-text); }
        html[data-theme="light"] .step p { color: var(--lt-text-muted); }
        html[data-theme="light"] .step:hover { box-shadow: 0 18px 40px rgba(20, 48, 73, 0.12); }

        /* CTA + formulario (modo claro, genérico — usado por contacto.html) */
        html[data-theme="light"] .cta-box {
            background: linear-gradient(135deg, #ffffff, #F4EFE9);
            border-color: rgba(217, 117, 35, 0.25);
        }
        html[data-theme="light"] .cta-box h2 { color: var(--lt-text); }
        html[data-theme="light"] .cta-box p { color: var(--lt-text-muted); }
        html[data-theme="light"] .form-field label { color: var(--lt-text-muted); }
        html[data-theme="light"] .form-field input,
        html[data-theme="light"] .form-field select,
        html[data-theme="light"] .form-field textarea {
            background-color: #ffffff;
            border-color: var(--lt-line);
            color: var(--lt-text);
        }
        html[data-theme="light"] .form-field input::placeholder,
        html[data-theme="light"] .form-field textarea::placeholder { color: var(--lt-text-dim); }
        html[data-theme="light"] .form-field input:focus,
        html[data-theme="light"] .form-field select:focus,
        html[data-theme="light"] .form-field textarea:focus {
            background-color: #ffffff;
            border-color: var(--bronze);
        }
        html[data-theme="light"] .form-field select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a6076' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 14px;
        }
        html[data-theme="light"] .form-note { color: var(--lt-text-dim); }
        html[data-theme="light"] .cta-banner .btn-ghost { color: var(--lt-text); border-color: var(--lt-line); }
        html[data-theme="light"] .cta-banner .btn-ghost:hover { color: var(--bronze); border-color: var(--bronze-light); }

        /* CTA final del Home (#cta-final): la caja se mantiene azul oscuro también
           en modo claro, para dar contraste sobre el beige de la sección (Jorge, 2026-09-10). */
        html[data-theme="light"] #cta-final .cta-box {
            background: linear-gradient(135deg, var(--navy-800), var(--navy-950));
            border-color: rgba(217, 117, 35, 0.3);
        }
        html[data-theme="light"] #cta-final .cta-box h2 { color: #fff; }
        html[data-theme="light"] #cta-final .cta-box p { color: var(--text-muted); }
        html[data-theme="light"] #cta-final .form-field label { color: var(--text-muted); }

        /* Campos de llenado en claro sobre la caja azul oscuro, para que se vea
           dónde escribir (Jorge, 2026-09-10). Aplica en ambos temas. */
        #cta-final .form-field input,
        #cta-final .form-field select,
        #cta-final .form-field textarea {
            background-color: #f4f2ee;
            border-color: rgba(255, 255, 255, 0.16);
            color: var(--navy-900);
        }
        #cta-final .form-field input::placeholder,
        #cta-final .form-field textarea::placeholder { color: rgba(20, 48, 73, 0.45); }
        #cta-final .form-field input:focus,
        #cta-final .form-field select:focus,
        #cta-final .form-field textarea:focus {
            background-color: #ffffff;
            border-color: var(--bronze);
            box-shadow: 0 0 0 3px rgba(217, 117, 35, 0.25);
        }
        #cta-final .form-field select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b5750' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            background-size: 14px;
        }
        #cta-final .form-field select option { background: #ffffff; color: var(--navy-900); }
        html[data-theme="light"] #cta-final .form-note { color: var(--text-dim); }
        html[data-theme="light"] #cta-final .form-note a { color: var(--bronze-light); }
        html[data-theme="light"] #cta-final .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.25); }
        html[data-theme="light"] #cta-final .btn-ghost:hover { color: var(--bronze-light); border-color: var(--bronze-light); }
        html[data-theme="light"] .works-more .btn-ghost,
        html[data-theme="light"] .wm-footer .btn-ghost { color: var(--lt-text); border-color: var(--lt-line); }
        html[data-theme="light"] .works-more .btn-ghost:hover,
        html[data-theme="light"] .wm-footer .btn-ghost:hover { color: var(--bronze); border-color: var(--bronze-light); }

        /* Slots de clientes */
        html[data-theme="light"] .client-slot { border-color: var(--lt-line); color: var(--lt-text-dim); }

        /* Franja de logos (marquee, sin uso — ver nota en site.css) */
        html[data-theme="light"] .lm-label { color: var(--lt-text-dim); }
        html[data-theme="light"] .lm-item {
            background: var(--lt-surface);
            border-color: var(--lt-line);
            color: var(--lt-text-dim);
            box-shadow: 0 4px 14px rgba(90, 70, 50, 0.06);
        }

        /* Franja de logos (fila estática) */
        html[data-theme="light"] .cl-label { color: var(--lt-text-dim); }

        /* Trabajo seleccionado — modo claro */
        html[data-theme="light"] .work-card { border-color: var(--lt-line); background: var(--lt-surface); }
        html[data-theme="light"] .work-body h3 { color: var(--lt-text); }
        html[data-theme="light"] .work-body p { color: var(--lt-text-muted); }
        html[data-theme="light"] .work-browser-bar { background: rgba(20, 48, 73, 0.04); border-bottom-color: var(--lt-line); }
        html[data-theme="light"] .wb-label { color: var(--lt-text-dim); }
        html[data-theme="light"] .work-modal-card { background: #ffffff; border-color: var(--lt-line); box-shadow: 0 30px 80px rgba(20, 48, 73, 0.25); }
        html[data-theme="light"] .wm-body h2 { color: var(--lt-text); }
        html[data-theme="light"] .wm-desc,
        html[data-theme="light"] .wm-section p { color: var(--lt-text-muted); }
        html[data-theme="light"] .wm-kpi { background: var(--lt-surface); border-color: var(--lt-line); }
        html[data-theme="light"] .wm-kpi .kpi-value { color: var(--lt-text); }
        html[data-theme="light"] .wm-kpi .kpi-label { color: var(--lt-text-dim); }
        html[data-theme="light"] .wm-placeholder-note { border-top-color: var(--lt-line); color: var(--lt-text-dim); }

        /* ============================================================
           TOGGLE BB8 (día/noche) — portado de styled-components a CSS
           ============================================================ */
        .theme-li { display: flex; align-items: center; }

        .bb8-toggle {
            --toggle-size: 9px;
            --toggle-width: 10.625em;
            --toggle-height: 5.625em;
            --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
            --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4) no-repeat;
            --bb8-diameter: 4.375em;
            --radius: 99em;
            --transition: 0.4s;
            --accent: #de7d2f;
            --bb8-bg: #fff;
            cursor: pointer;
            font-size: var(--toggle-size);
            display: inline-block;
        }

        .bb8-toggle, .bb8-toggle *, .bb8-toggle *::before, .bb8-toggle *::after { box-sizing: border-box; }

        .bb8-toggle__checkbox { appearance: none; -webkit-appearance: none; display: none; }

        .bb8-toggle__container {
            width: var(--toggle-width);
            height: var(--toggle-height);
            background: var(--toggle-bg);
            background-size: 100% 11.25em;
            background-position-y: -5.625em;
            border-radius: var(--radius);
            position: relative;
            transition: var(--transition);
        }

        .bb8 {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            top: calc(var(--toggle-offset) - 1.688em + 0.188em);
            left: var(--toggle-offset);
            transition: var(--transition);
            z-index: 2;
        }

        .bb8__head-container {
            position: relative;
            transition: var(--transition);
            z-index: 2;
            transform-origin: 1.25em 3.75em;
        }

        .bb8__head {
            overflow: hidden;
            margin-bottom: -0.188em;
            width: 2.5em;
            height: 1.688em;
            background: linear-gradient(transparent 0.063em, dimgray 0.063em 0.313em, transparent 0.313em 0.375em, var(--accent) 0.375em 0.5em, transparent 0.5em 1.313em, silver 1.313em 1.438em, transparent 1.438em),
                linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 1.25em),
                linear-gradient(-45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 1.25em),
                linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
            border-radius: var(--radius) var(--radius) 0 0;
            position: relative;
            z-index: 1;
            filter: drop-shadow(0 0.063em 0.125em gray);
        }

        .bb8__head::before {
            content: "";
            position: absolute;
            width: 0.563em;
            height: 0.563em;
            background: radial-gradient(0.125em circle at 0.25em 0.375em, red, transparent),
                radial-gradient(0.063em circle at 0.375em 0.188em, var(--bb8-bg) 50%, transparent 100%),
                linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
            border-radius: var(--radius);
            top: 0.413em;
            left: 50%;
            transform: translate(-50%);
            box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em, 0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
            z-index: 1;
            transition: var(--transition);
        }

        .bb8__head::after {
            content: "";
            position: absolute;
            bottom: 0.375em;
            left: 0;
            width: 100%;
            height: 0.188em;
            background: linear-gradient(to right, var(--accent) 0.125em, transparent 0.125em 0.188em, var(--accent) 0.188em 0.313em, transparent 0.313em 0.375em, var(--accent) 0.375em 0.938em, transparent 0.938em 1em, var(--accent) 1em 1.125em, transparent 1.125em 1.875em, var(--accent) 1.875em 2em, transparent 2em 2.063em, var(--accent) 2.063em 2.25em, transparent 2.25em 2.313em, var(--accent) 2.313em 2.375em, transparent 2.375em 2.438em, var(--accent) 2.438em);
            transition: var(--transition);
        }

        .bb8__antenna {
            position: absolute;
            transform: translateY(-90%);
            width: 0.059em;
            border-radius: var(--radius) var(--radius) 0 0;
            transition: var(--transition);
        }

        .bb8__antenna:nth-child(1) {
            height: 0.938em;
            right: 0.938em;
            background: linear-gradient(#000 0.188em, silver 0.188em);
        }

        .bb8__antenna:nth-child(2) {
            height: 0.375em;
            left: 50%;
            transform: translate(-50%, -90%);
            background: silver;
        }

        .bb8__body {
            width: 4.375em;
            height: 4.375em;
            border-radius: var(--radius);
            position: relative;
            overflow: hidden;
            transition: var(--transition);
            z-index: 1;
            transform: rotate(45deg);
            background: linear-gradient(-90deg, var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10% 90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
                linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10% 90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
                linear-gradient(to right, transparent 2.156em, silver 2.156em 2.219em, transparent 2.188em),
                linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent 2.188em);
            background-color: var(--bb8-bg);
        }

        .bb8__body::after {
            content: "";
            bottom: 1.5em;
            left: 0.563em;
            position: absolute;
            width: 0.188em;
            height: 0.188em;
            background: rgb(236, 236, 236);
            color: rgb(236, 236, 236);
            border-radius: 50%;
            box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
        }

        .bb8__body::before {
            content: "";
            width: 2.625em;
            height: 2.625em;
            position: absolute;
            border-radius: 50%;
            overflow: hidden;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 0.313em solid var(--accent);
            background: radial-gradient(1em circle at center, rgb(236, 236, 236) 50%, transparent 51%),
                radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
                linear-gradient(-90deg, transparent 42%, var(--accent) 42% 58%, transparent 58%),
                linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
        }

        .artificial__hidden { position: absolute; border-radius: inherit; inset: 0; pointer-events: none; overflow: hidden; }

        .bb8__shadow {
            content: "";
            width: var(--bb8-diameter);
            height: 20%;
            border-radius: 50%;
            background: #3a271c;
            box-shadow: 0.313em 0 3.125em #3a271c;
            opacity: 0.25;
            position: absolute;
            bottom: 0;
            left: calc(var(--toggle-offset) - 0.938em);
            transition: var(--transition);
            transform: skew(-70deg);
            z-index: 1;
        }

        .bb8-toggle__scenery { width: 100%; height: 100%; pointer-events: none; overflow: hidden; position: relative; border-radius: inherit; }

        .bb8-toggle__scenery::before { content: ""; position: absolute; width: 100%; height: 30%; bottom: 0; background: #b18d71; z-index: 1; }

        .bb8-toggle__cloud { z-index: 1; position: absolute; border-radius: 50%; }

        .bb8-toggle__cloud:nth-last-child(1) {
            width: 0.875em; height: 0.625em;
            filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae) drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
            right: 1.875em; top: 2.813em;
            background: linear-gradient(to top right, #ffffffae, #ffffffae);
            transition: var(--transition);
        }

        .bb8-toggle__cloud:nth-last-child(2) {
            top: 0.625em; right: 4.375em; width: 0.875em; height: 0.375em; background: #dfdedeae;
            filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae) drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
            transition: 0.6s;
        }

        .bb8-toggle__cloud:nth-last-child(3) {
            top: 1.25em; right: 0.938em; width: 0.875em; height: 0.375em; background: #ffffffae;
            filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae) drop-shadow(-0.625em 0.313em #ffffffae);
            transition: 0.8s;
        }

        .gomrassen, .hermes, .chenini { position: absolute; border-radius: var(--radius); background: linear-gradient(#fff, #6e8ea2); top: 100%; }

        .gomrassen { left: 0.938em; width: 1.875em; height: 1.875em; box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b; transition: var(--transition); }

        .gomrassen::before, .gomrassen::after { content: ""; position: absolute; border-radius: inherit; box-shadow: inset 0 0 0.063em rgb(140, 162, 169); background: rgb(184, 196, 200); }
        .gomrassen::before { left: 0.313em; top: 0.313em; width: 0.438em; height: 0.438em; }
        .gomrassen::after { width: 0.25em; height: 0.25em; left: 1.25em; top: 0.75em; }

        .hermes { left: 3.438em; width: 0.625em; height: 0.625em; box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b; transition: 0.6s; }
        .chenini { left: 4.375em; width: 0.5em; height: 0.5em; box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b; transition: 0.8s; }

        .tatto-1, .tatto-2 { position: absolute; width: 1.25em; height: 1.25em; border-radius: var(--radius); }
        .tatto-1 { background: #fefefe; right: 3.125em; top: 0.625em; box-shadow: 0 0 0.438em #fdf4e1; transition: var(--transition); }
        .tatto-2 { background: linear-gradient(#e6ac5c, #d75449); right: 1.25em; top: 2.188em; box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f; transition: 0.7s; }

        .bb8-toggle__star {
            position: absolute; width: 0.063em; height: 0.063em; background: #fff; border-radius: var(--radius);
            filter: drop-shadow(0 0 0.063em #fff); color: #fff; top: 100%;
        }
        .bb8-toggle__star:nth-child(1) { left: 3.75em; box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em, -3.125em 1.875em, 1.25em 2.813em; transition: 0.2s; }
        .bb8-toggle__star:nth-child(2) { left: 4.688em; box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em, -3.125em 1.25em, 1.25em -1.563em; transition: 0.3s; }
        .bb8-toggle__star:nth-child(3) { left: 5.313em; box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em; transition: var(--transition); }
        .bb8-toggle__star:nth-child(4) { left: 1.875em; width: 0.125em; height: 0.125em; transition: 0.5s; }
        .bb8-toggle__star:nth-child(5) { left: 5em; width: 0.125em; height: 0.125em; transition: 0.6s; }
        .bb8-toggle__star:nth-child(6) { left: 2.5em; width: 0.125em; height: 0.125em; transition: 0.7s; }
        .bb8-toggle__star:nth-child(7) { left: 3.438em; width: 0.125em; height: 0.125em; transition: 0.8s; }

        /* Acciones al activar (día) */
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(1) { top: 0.625em; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(2) { top: 1.875em; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(3) { top: 1.25em; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(4) { top: 3.438em; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(5) { top: 3.438em; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(6) { top: 0.313em; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(7) { top: 1.875em; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud { right: -100%; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen { top: 0.938em; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes { top: 2.5em; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini { top: 2.75em; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container { background-position-y: 0; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 { top: 100%; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 { top: 100%; }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 { left: calc(100% - var(--bb8-diameter) - var(--toggle-offset)); }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow { left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em); transform: skew(70deg); }
        .bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body { transform: rotate(225deg); }
        .bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before { left: 100%; }
        .bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::before { left: 0; }

        @media (prefers-reduced-motion: reduce) {
            .bb8-toggle__container, .bb8, .bb8 * { transition: none !important; }
        }

        /* ============================================================
           MODAL DE CONFIRMACIÓN (al enviar el formulario)
           ============================================================ */
        .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(4, 9, 15, 0.72);
            backdrop-filter: blur(6px);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .modal-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        .confirm-card {
            width: 100%;
            max-width: 430px;
            background: var(--navy-800);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 38px 32px;
            text-align: center;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
            transform: scale(0.92) translateY(12px);
            transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .modal-overlay.open .confirm-card {
            transform: scale(1) translateY(0);
        }

        .confirm-icon {
            font-size: 3.4rem;
            color: #34d399;
            margin-bottom: 18px;
            line-height: 1;
        }

        .modal-overlay.open .confirm-icon {
            animation: confirmPop 0.55s ease both;
        }

        @keyframes confirmPop {
            0% { transform: scale(0); }
            60% { transform: scale(1.18); }
            100% { transform: scale(1); }
        }

        .confirm-card h2 {
            font-family: var(--font-head);
            font-size: 1.55rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 10px;
        }

        .confirm-sub {
            color: var(--text-muted);
            font-size: 0.98rem;
            margin-bottom: 26px;
        }

        .confirm-details {
            text-align: left;
            margin-bottom: 28px;
        }

        .cd-row {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 0;
            border-bottom: 1px solid var(--line);
            font-size: 0.95rem;
        }

        .cd-row:last-child { border-bottom: none; }
        .cd-row .cd-k { color: var(--text-dim); }
        .cd-row .cd-v { color: var(--text); font-weight: 500; text-align: right; }

        .confirm-close { width: 100%; justify-content: center; }

        /* Modal en modo claro */
        html[data-theme="light"] .confirm-card { background: #ffffff; border-color: var(--lt-line); box-shadow: 0 30px 80px rgba(20, 48, 73, 0.25); }
        html[data-theme="light"] .confirm-card h2 { color: var(--lt-text); }
        html[data-theme="light"] .confirm-sub { color: var(--lt-text-muted); }
        html[data-theme="light"] .cd-row { border-bottom-color: var(--lt-line); }
        html[data-theme="light"] .cd-row .cd-k { color: var(--lt-text-dim); }
        html[data-theme="light"] .cd-row .cd-v { color: var(--lt-text); }

        /* ============================================================
           NUEVOS COMPONENTES — Reestructura de Arquitectura
           (Cómo trabajamos / Soluciones / Proyectos, páginas nuevas)
           ============================================================ */

        /* ── Modelo de 6 etapas (Información→Inteligencia→Oportunidad→
               Estrategia→Solución→Resultado) — variante de .chain a 6 nodos ── */
        .model-chain {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;
            gap: 0;
            align-items: center;
            max-width: 980px;
            margin: 0 auto;
        }

        .model-node {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            text-align: center;
            padding: 0 6px;
        }

        .model-node .mn-ic {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--card);
            border: 1px solid var(--line);
            color: var(--bronze-light);
            font-size: 1.3rem;
        }

        .model-node.is-key .mn-ic {
            background: linear-gradient(135deg, var(--bronze), var(--bronze-light));
            border-color: transparent;
            color: #fff;
            box-shadow: 0 0 24px var(--bronze-glow);
        }

        .model-node .mn-lbl {
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 0.86rem;
            color: var(--text);
        }

        .model-node .mn-sub {
            font-size: 0.76rem;
            color: var(--text-dim);
            line-height: 1.3;
        }

        .model-arrow {
            color: var(--bronze-light);
            opacity: 0.5;
            font-size: 0.9rem;
            display: flex;
            justify-content: center;
        }

        @media (max-width: 900px) {
            .model-chain { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
            .model-arrow:nth-child(6) { transform: rotate(90deg); }
        }
        @media (max-width: 560px) {
            .model-chain { grid-template-columns: repeat(2, 1fr); }
        }

        html[data-theme="light"] .model-node .mn-lbl { color: var(--lt-text); }
        html[data-theme="light"] .model-node .mn-ic { background: var(--lt-surface); border-color: var(--lt-line); }

        /* Problema condensado (Home): 5 tarjetas en una fila en desktop */
        .pain-grid-5 { grid-template-columns: repeat(5, 1fr); }
        @media (max-width: 1100px) { .pain-grid-5 { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 720px) { .pain-grid-5 { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .pain-grid-5 { grid-template-columns: 1fr; } }

        /* ── Principios (5) ── */
        .principles-list {
            display: flex;
            flex-direction: column;
            gap: 0;
            max-width: 720px;
            margin: 0 auto;
        }

        .principle-row {
            display: flex;
            align-items: baseline;
            gap: 20px;
            padding: 22px 0;
            border-bottom: 1px solid var(--line);
        }

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

        .principle-num {
            font-family: var(--font-head);
            font-size: 1.4rem;
            font-weight: 800;
            color: rgba(217, 117, 35, 0.35);
            flex-shrink: 0;
            width: 46px;
        }

        .principle-txt {
            font-family: var(--font-head);
            font-size: 1.15rem;
            font-weight: 600;
        }

        .principle-txt .vs { color: var(--text-dim); font-weight: 400; font-size: 0.9em; }
        .principle-txt .win { color: var(--bronze-light); }

        html[data-theme="light"] .principle-row { border-bottom-color: var(--lt-line); }
        html[data-theme="light"] .principle-txt { color: var(--lt-text); }

        /* ── Diagnóstico (4 etapas) — reusa estilo de .chain-node ── */
        .diag-chain {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
            max-width: 780px;
            margin: 0 auto;
        }

        .diag-chain .chain-node { font-size: 0.94rem; padding: 12px 22px; }
        .diag-arrow { color: var(--bronze-light); opacity: 0.6; }

        /* ── Dos capacidades (Home) ── */
        .capacity-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 26px;
        }

        .capacity-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 40px 34px;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }

        .capacity-card:hover {
            transform: translateY(-8px);
            border-color: rgba(217, 117, 35, 0.4);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
        }

        .capacity-num {
            font-family: var(--font-head);
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--bronze-light);
            margin-bottom: 16px;
        }

        .capacity-card h3 {
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: 14px;
            color: var(--text);
            letter-spacing: -0.01em;
        }

        .capacity-card p {
            color: var(--text-muted);
            font-size: 1.02rem;
            line-height: 1.6;
            margin-bottom: 24px;
        }

        .capacity-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }

        /* "Textos flotantes" (chips) — con relleno de color + sombra para resaltar,
           ya que representan las líneas de servicio reales de cada capacidad */
        .capacity-tag {
            font-family: var(--font-head);
            font-size: 0.82rem;
            font-weight: 700;
            padding: 8px 17px;
            border-radius: 50px;
            border: 1px solid rgba(217, 117, 35, 0.35);
            background: rgba(217, 117, 35, 0.12);
            color: var(--bronze-light);
            box-shadow: 0 4px 12px rgba(217, 117, 35, 0.15);
            transition: var(--transition);
        }

        .capacity-tag:hover {
            background: rgba(217, 117, 35, 0.22);
            border-color: rgba(217, 117, 35, 0.55);
            box-shadow: 0 8px 20px rgba(217, 117, 35, 0.28);
            transform: translateY(-2px);
        }

        .capacity-card .btn { align-self: flex-start; margin-top: auto; }

        @media (max-width: 720px) {
            .capacity-cards { grid-template-columns: 1fr; }
        }

        /* Modo claro: título en el mismo azul marino intenso que el resto de
           encabezados de sección (--lt-text), no heredar el blanco del modo oscuro */
        html[data-theme="light"] .capacity-card { background: var(--lt-surface); border-color: var(--lt-line); }
        html[data-theme="light"] .capacity-card h3 { color: var(--lt-text); }
        html[data-theme="light"] .capacity-card p { color: var(--lt-text-muted); }
        html[data-theme="light"] .capacity-tag {
            border-color: rgba(217, 117, 35, 0.35);
            background: rgba(217, 117, 35, 0.1);
            color: var(--bronze);
            box-shadow: 0 4px 12px rgba(217, 117, 35, 0.12);
        }
        html[data-theme="light"] .capacity-tag:hover {
            background: rgba(217, 117, 35, 0.18);
            box-shadow: 0 8px 20px rgba(217, 117, 35, 0.2);
        }

        /* ── Soluciones a Medida (concepto transversal) ── */
        .medida-visual {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            max-width: 420px;
            margin: 0 auto;
        }

        .medida-item {
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 0.98rem;
            color: var(--text);
            padding: 10px 0;
        }

        .medida-plus { color: var(--bronze-light); font-size: 1rem; opacity: 0.7; }

        .medida-result {
            margin-top: 6px;
            padding: 16px 32px;
            border-radius: 50px;
            background: linear-gradient(135deg, var(--bronze), var(--bronze-light));
            color: #fff;
            font-family: var(--font-head);
            font-weight: 800;
            font-size: 1.05rem;
            box-shadow: 0 12px 28px var(--bronze-glow);
        }

        html[data-theme="light"] .medida-item { color: var(--lt-text); }

        /* ── Historias de proyecto (página Proyectos) ── */
        .story-card {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--card);
            overflow: hidden;
            margin-bottom: 40px;
        }

        .story-media {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 0;
        }

        .story-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            min-height: 220px;
        }

        /* Variante de 3 capturas (proporciones muy distintas entre sí: hoja de
           cálculo ancha, login, dashboard alto) — "contain" en vez de "cover"
           para no recortar el contenido, sobre un fondo oscuro uniforme. */
        .story-media.has-3 {
            grid-template-columns: repeat(3, 1fr);
        }
        .story-media.has-3 img {
            object-fit: contain;
            background: linear-gradient(150deg, #123049, #0a1825);
            padding: 16px;
            box-sizing: border-box;
        }

        /* Variante de 4 capturas (2×2, mismas reglas de "contain" que has-3) */
        .story-media.has-4 {
            grid-template-columns: 1fr 1fr;
        }
        .story-media.has-4 img {
            object-fit: contain;
            background: linear-gradient(150deg, #123049, #0a1825);
            padding: 16px;
            box-sizing: border-box;
        }

        .story-body { padding: 40px; }

        .story-tag {
            display: inline-block;
            font-family: var(--font-head);
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--bronze-light);
            background: rgba(217, 117, 35, 0.12);
            border: 1px solid rgba(217, 117, 35, 0.28);
            padding: 5px 14px;
            border-radius: 50px;
            margin-bottom: 16px;
        }

        .story-body h3 { font-size: 1.5rem; margin-bottom: 20px; }

        .story-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px 28px;
            margin-bottom: 20px;
        }

        .story-field { border-left: 2px solid rgba(217, 117, 35, 0.3); padding-left: 14px; }
        .story-field.full { grid-column: 1 / -1; }

        .story-field .k {
            display: block;
            font-family: var(--font-head);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 4px;
        }

        .story-field .v { color: var(--text-muted); font-size: 0.94rem; line-height: 1.55; }
        .story-field.is-result .v { color: var(--bronze-light); font-weight: 600; }

        .story-note {
            font-size: 0.8rem;
            color: var(--text-dim);
            font-style: italic;
            border-top: 1px dashed var(--line);
            padding-top: 14px;
            margin-top: 8px;
        }

        @media (max-width: 860px) {
            .story-media { grid-template-columns: 1fr 1fr; }
            .story-media.has-3 { grid-template-columns: 1fr 1fr; }
            .story-body { padding: 28px 24px; }
            .story-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 560px) {
            .story-media { grid-template-columns: 1fr; }
            .story-media.has-3 { grid-template-columns: 1fr; }
            .story-media.has-4 { grid-template-columns: 1fr; }
        }

        html[data-theme="light"] .story-card { background: var(--lt-surface); border-color: var(--lt-line); }
        html[data-theme="light"] .story-body h3 { color: var(--lt-text); }
        html[data-theme="light"] .story-field { border-left-color: rgba(217, 117, 35, 0.25); }
        html[data-theme="light"] .story-field .v { color: var(--lt-text-muted); }
        html[data-theme="light"] .story-note { border-top-color: var(--lt-line); color: var(--lt-text-dim); }

        /* ── Sub-hero para páginas internas (Cómo trabajamos / Soluciones / Proyectos / Contacto) ── */
        .page-hero {
            padding: 160px 0 80px;
            text-align: center;
            background:
                radial-gradient(900px 500px at 50% 0%, rgba(217, 117, 35, 0.1), transparent 60%),
                linear-gradient(160deg, var(--navy-900), var(--navy-950));
        }

        .page-hero .eyebrow { margin: 0 auto 24px; display: inline-flex; }
        .page-hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; margin-bottom: 18px; max-width: 780px; margin-inline: auto; }
        .page-hero p { color: var(--text-muted); font-size: 1.15rem; max-width: 620px; margin: 0 auto; }

        html[data-theme="light"] .page-hero { background: linear-gradient(160deg, var(--navy-900), var(--navy-950)); }
        /* El sub-hero permanece oscuro siempre (mismo criterio que el hero principal) */

        /* ── Contacto directo (página Contacto) ── */
        .direct-contact {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
            margin-top: 56px;
            padding-top: 40px;
            border-top: 1px solid var(--line);
        }

        .direct-contact a {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-muted);
            font-size: 0.98rem;
            transition: var(--transition);
        }

        .direct-contact a i { color: var(--bronze-light); font-size: 1.1rem; }
        .direct-contact a:hover { color: var(--bronze-light); }

        html[data-theme="light"] .direct-contact { border-top-color: var(--lt-line); }
        html[data-theme="light"] .direct-contact a { color: var(--lt-text-muted); }

        /* ============================================================
           REESTRUCTURA VISUAL Y DE CONTENIDO (sept 2026)
           Componentes editoriales para la Home: diagrama de convergencia,
           módulos de soluciones, tarjetas de resultado, flujo de nodos.
           ============================================================ */

        /* ── Hero: mockup de producto (ventanas apiladas + teléfono) ──
           Componente nativo. Vive sobre el fondo oscuro del hero. Animación
           siempre activa y sutil (deriva/flotación), no depende de hover. */
        .hero-mock {
            position: relative;
            width: min(100%, 420px);
            margin-right: 36px;
            isolation: isolate;
            animation: hmFloat 7s ease-in-out infinite;
        }

        .hero-mock::before {
            content: '';
            position: absolute;
            inset: -14% -12% -16% -12%;
            z-index: -1;
            background:
                radial-gradient(55% 55% at 68% 36%, rgba(217, 117, 35, 0.22), transparent 70%),
                radial-gradient(55% 55% at 30% 74%, rgba(47, 143, 125, 0.18), transparent 72%);
            filter: blur(30px);
            animation: hmGlow 8s ease-in-out infinite;
        }

        /* Ventana principal (navegador) */
        .hm-window {
            position: relative;
            z-index: 3;
            background: #fff;
            border: 1px solid rgba(20, 48, 73, 0.10);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
            transform: rotate(2deg);
            animation: hmDriftWin 9s ease-in-out infinite;
        }

        .hm-titlebar {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 13px 16px;
            background: #f4f2ee;
            border-bottom: 1px solid rgba(20, 48, 73, 0.08);
        }

        .hm-dots { display: flex; gap: 6px; flex-shrink: 0; }
        .hm-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d9d4cc; }
        .hm-dots i:nth-child(1) { background: #ec6a5e; }
        .hm-dots i:nth-child(2) { background: #f4bf4f; }
        .hm-dots i:nth-child(3) { background: #61c554; }

        .hm-navbtns { display: flex; gap: 11px; color: #a7a299; font-size: 0.7rem; flex-shrink: 0; }

        .hm-search {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 7px;
            background: #fff;
            border: 1px solid rgba(20, 48, 73, 0.10);
            border-radius: 50px;
            padding: 6px 13px;
            font-family: var(--font-body);
            font-size: 0.72rem;
            color: #a7a299;
        }

        .hm-star {
            width: 26px;
            height: 26px;
            flex-shrink: 0;
            border-radius: 8px;
            background: #fff;
            border: 1px solid rgba(20, 48, 73, 0.10);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--bronze);
            font-size: 0.68rem;
        }

        .hm-body { padding: 22px 22px 26px; background: #fff; }

        .hm-account { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
        .hm-avatar { width: 34px; height: 34px; border-radius: 11px; background: var(--navy-900); flex-shrink: 0; }
        .hm-account-name { font-family: var(--font-head); font-weight: 700; color: var(--navy-900); font-size: 0.95rem; }

        .hm-block { margin-bottom: 22px; }
        .hm-label { display: block; font-family: var(--font-head); font-size: 0.76rem; font-weight: 600; color: rgba(20, 48, 73, 0.5); margin-bottom: 9px; }
        .hm-progress { display: block; height: 7px; border-radius: 50px; background: #ece8e1; overflow: hidden; }
        .hm-progress span { display: block; height: 100%; width: 72%; border-radius: 50px; background: linear-gradient(90deg, var(--bronze), var(--bronze-light)); }

        .hm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
        .hm-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
        .hm-ic {
            width: 44px;
            height: 44px;
            border-radius: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 0.95rem;
            box-shadow: 0 8px 18px rgba(20, 48, 73, 0.16);
            animation: hmTile 4.2s ease-in-out infinite;
        }
        .hm-ic--navy { background: linear-gradient(150deg, var(--navy-800), var(--navy-950)); }
        .hm-ic--bronze { background: linear-gradient(150deg, var(--bronze-light), var(--bronze)); }
        .hm-ic--teal { background: linear-gradient(150deg, var(--teal-soft), var(--teal)); }
        .hm-tile span:last-child { font-family: var(--font-head); font-size: 0.66rem; font-weight: 500; line-height: 1.2; color: rgba(20, 48, 73, 0.58); }

        .hm-tile:nth-child(2) .hm-ic { animation-delay: 0.35s; }
        .hm-tile:nth-child(3) .hm-ic { animation-delay: 0.7s; }
        .hm-tile:nth-child(4) .hm-ic { animation-delay: 1.05s; }
        .hm-tile:nth-child(5) .hm-ic { animation-delay: 1.4s; }
        .hm-tile:nth-child(6) .hm-ic { animation-delay: 1.75s; }

        /* Paneles apilados detrás */
        .hm-stack {
            position: absolute;
            inset: 0;
            border-radius: 18px;
            z-index: 1;
        }
        .hm-stack--bronze {
            background: linear-gradient(135deg, var(--bronze-light), var(--bronze));
            box-shadow: 0 26px 55px rgba(0, 0, 0, 0.30);
            transform: rotate(6deg);
            animation: hmDriftB 10s ease-in-out infinite;
        }
        .hm-stack--teal {
            background: linear-gradient(135deg, var(--teal-soft), var(--teal));
            box-shadow: 0 26px 55px rgba(0, 0, 0, 0.28);
            transform: rotate(12deg);
            animation: hmDriftT 12s ease-in-out infinite;
        }

        /* Teléfono */
        .hm-phone {
            position: absolute;
            right: -13%;
            bottom: -15%;
            width: 35%;
            z-index: 4;
            background: var(--navy-950);
            border-radius: 26px;
            padding: 6px;
            box-shadow: 0 34px 70px rgba(0, 0, 0, 0.5);
            transform: rotate(-12deg);
            animation: hmDriftPhone 9s ease-in-out infinite;
        }
        .hm-phone-screen { background: #fff; border-radius: 21px; overflow: hidden; }
        .hm-phone-status {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 12px 6px;
            font-size: 0.56rem;
            font-weight: 700;
            color: var(--navy-900);
        }
        .hm-batt { display: flex; align-items: center; gap: 4px; color: rgba(20, 48, 73, 0.5); }
        .hm-batt i { width: 15px; height: 8px; border-radius: 2px; background: var(--teal); display: block; }
        .hm-assistant { padding: 16px 15px 28px; text-align: center; }
        .hm-assistant-title {
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 0.76rem;
            color: var(--navy-900);
            margin-bottom: 14px;
        }
        .hm-bubble {
            background: #ecebe7;
            color: rgba(20, 48, 73, 0.68);
            font-family: var(--font-body);
            font-size: 0.64rem;
            line-height: 1.4;
            border-radius: 13px 13px 13px 3px;
            padding: 11px 12px;
            margin-bottom: 22px;
        }
        .hm-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; }
        .hm-wave span {
            width: 4px;
            border-radius: 2px;
            background: var(--teal);
            animation: hmWave 1.1s ease-in-out infinite;
        }
        .hm-wave span:nth-child(1) { height: 34%; animation-delay: 0s; }
        .hm-wave span:nth-child(2) { height: 62%; animation-delay: 0.12s; }
        .hm-wave span:nth-child(3) { height: 100%; animation-delay: 0.24s; }
        .hm-wave span:nth-child(4) { height: 74%; animation-delay: 0.36s; }
        .hm-wave span:nth-child(5) { height: 100%; animation-delay: 0.48s; }
        .hm-wave span:nth-child(6) { height: 48%; animation-delay: 0.6s; }
        .hm-wave span:nth-child(7) { height: 30%; animation-delay: 0.72s; }
        @keyframes hmWave { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }

        @keyframes hmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
        @keyframes hmGlow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
        @keyframes hmDriftWin { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(0.4deg); } }
        @keyframes hmDriftB { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(7.4deg); } }
        @keyframes hmDriftT { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(13.7deg); } }
        @keyframes hmDriftPhone { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-8deg); } }
        @keyframes hmTile { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.05); } }

        @media (prefers-reduced-motion: reduce) {
            .hero-mock,
            .hero-mock::before,
            .hm-window,
            .hm-stack--bronze,
            .hm-stack--teal,
            .hm-phone,
            .hm-ic,
            .hm-wave span { animation: none !important; }
            .hm-wave span { transform: scaleY(0.85); }
        }

        @media (max-width: 920px) {
            .hero-grid { grid-template-columns: 1fr; }
            .hero-visual { display: flex; justify-content: center; padding: 0 0 44px; }
            .hero-mock { width: min(100%, 400px); }
        }

        @media (max-width: 560px) { .hero-visual { display: none; } }

        /* ── Soluciones (resumen en Home): 3 módulos ── */
        .sol-modules {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        @media (max-width: 900px) { .sol-modules { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

        .sol-module {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 34px 30px;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }

        .sol-module:hover {
            transform: translateY(-6px);
            border-color: rgba(217, 117, 35, 0.4);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
        }

        .sol-module .sm-ic {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            color: var(--bronze-light);
            background: rgba(217, 117, 35, 0.1);
            border: 1px solid rgba(217, 117, 35, 0.22);
            margin-bottom: 18px;
        }

        .sol-module h3 { font-family: var(--font-head); font-size: 1.18rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
        .sol-module > p { color: var(--text-muted); font-size: 0.94rem; margin-bottom: 16px; }

        .sol-module ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
        .sol-module li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--text-muted); }
        .sol-module li i { color: var(--bronze-light); font-size: 0.72rem; margin-top: 5px; }
        .sol-module .sm-link { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; color: var(--bronze-light); display: inline-flex; align-items: center; gap: 8px; }
        .sol-module:hover .sm-link i { transform: translateX(3px); }
        .sol-module .sm-link i { transition: transform 0.25s ease; font-size: 0.75rem; }

        html[data-theme="light"] .sol-module { background: var(--lt-surface); border-color: var(--lt-line); }
        html[data-theme="light"] .sol-module h3 { color: var(--lt-text); }
        html[data-theme="light"] .sol-module > p,
        html[data-theme="light"] .sol-module li { color: var(--lt-text-muted); }
        html[data-theme="light"] .sol-module .sm-ic { color: var(--bronze); background: rgba(217, 117, 35, 0.08); border-color: rgba(217, 117, 35, 0.2); }

        /* ── Resultados: 4 tarjetas + gráfico ascendente ── */
        .results-wrap { max-width: 1000px; margin: 0 auto; }

        .results-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            margin-bottom: 32px;
        }

        @media (max-width: 820px) { .results-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 460px) { .results-grid { grid-template-columns: 1fr; } }

        .result-card {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 28px 24px;
            text-align: center;
            transition: var(--transition);
        }

        .result-card:hover { transform: translateY(-5px); border-color: rgba(217, 117, 35, 0.35); }
        .result-card .rc-ic { font-size: 1.5rem; color: var(--bronze-light); margin-bottom: 12px; }
        .result-card h4 { font-family: var(--font-head); font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }
        .result-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

        .result-graph {
            background: var(--card);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            padding: 26px 28px 20px;
        }

        .result-graph .rg-label {
            font-family: var(--font-head);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 14px;
        }

        .result-graph svg { display: block; width: 100%; height: 120px; }

        html[data-theme="light"] .result-card,
        html[data-theme="light"] .result-graph { background: var(--lt-surface); border-color: var(--lt-line); }
        html[data-theme="light"] .result-card h4 { color: var(--lt-text); }
        html[data-theme="light"] .result-card p { color: var(--lt-text-muted); }
        html[data-theme="light"] .result-graph .rg-label { color: var(--lt-text-dim); }

        /* ── Flujo de nodos (CTA final) ── */
        .node-flow {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 0 auto 34px;
        }

        .node-flow .nf-node {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 18px;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.07);
            font-family: var(--font-head);
            font-weight: 600;
            font-size: 0.82rem;
            color: rgba(255, 255, 255, 0.85);
        }

        .node-flow .nf-arrow { color: var(--bronze-light); opacity: 0.6; font-size: 0.8rem; }
        /* node-flow vive solo en #cta-final, cuya caja es azul oscuro en ambos temas
           → conserva el tratamiento base (claro sobre oscuro). */

        /* ── Ajuste editorial: sec-tag como "eyebrow" en mayúsculas más marcado ── */
        .sec-tag { font-size: 0.78rem; letter-spacing: 0.16em; }

        /* Proyectos destacados: mini-campos Problema / Qué hicimos / Resultado ── */
        .work-fields {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 4px 0 14px;
        }

        .work-fields .wf-row { display: flex; flex-direction: column; gap: 2px; }
        .work-fields .wf-k {
            font-family: var(--font-head);
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-dim);
        }
        .work-fields .wf-v { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; }
        .work-fields .wf-row.is-result .wf-v { color: var(--bronze-light); font-weight: 600; }

        html[data-theme="light"] .work-fields .wf-k { color: var(--lt-text-dim); }
        html[data-theme="light"] .work-fields .wf-v { color: var(--lt-text-muted); }
        html[data-theme="light"] .work-fields .wf-row.is-result .wf-v { color: var(--bronze); }

        /* ============================================================
           ELEMENTOS VISUALES EDITORIALES (referencia de frames, sept 2026)
           Diagramas nativos: tarjetas de datos, mapa de conexión radial,
           mini-dashboard. Diseñados light-first (fondo crema), con
           overrides para modo oscuro. Preparados para animar en Fase 4.
           ============================================================ */

        /* -- token de acento funcional secundario (verde/turquesa, §04) -- */
        :root { --teal: #2f8f7d; --teal-soft: #7bb8a9; }

        /* ── Tarjeta de datos genérica (fuente de información) ── */
        .data-card {
            background: #fff;
            border: 1px solid var(--lt-line);
            border-radius: 16px;
            padding: 16px 18px;
            box-shadow: 0 10px 26px rgba(90, 70, 50, 0.10), 0 2px 6px rgba(90, 70, 50, 0.05);
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 190px;
        }

        .data-card .dc-head { display: flex; align-items: center; gap: 12px; }

        .data-card .dc-ic {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            color: var(--navy-900);
            flex-shrink: 0;
        }

        .data-card .dc-ic.is-accent { color: var(--bronze); }
        .data-card .dc-ic.is-teal { color: var(--teal); }

        .data-card .dc-title {
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 0.98rem;
            color: var(--navy-900);
        }

        .data-card .dc-lines { display: flex; flex-direction: column; gap: 6px; padding-left: 46px; }
        .data-card .dc-line { height: 6px; border-radius: 4px; background: #e4ded4; }
        .data-card .dc-line.w1 { width: 78%; }
        .data-card .dc-line.w2 { width: 54%; }
        .data-card .dc-line.w3 { width: 66%; }

        html[data-theme="dark"] .data-card,
        :root:not([data-theme="light"]) .data-card {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
        }
        html[data-theme="dark"] .data-card .dc-ic,
        html[data-theme="dark"] .data-card .dc-title { color: #fff; }
        html[data-theme="dark"] .data-card .dc-line { background: rgba(255, 255, 255, 0.14); }

        /* ── Layout editorial de 2 columnas (texto | visual) ── */
        .editorial-split {
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 56px;
            align-items: center;
            max-width: 1080px;
            margin: 0 auto;
        }

        .editorial-split .es-text { text-align: left; }
        .editorial-split .es-text .sec-tag { margin-bottom: 14px; }

        .editorial-split .es-text h2 {
            font-family: var(--font-display);
            font-size: clamp(1.7rem, 3.4vw, 2.5rem);
            font-weight: 600;
            letter-spacing: -0.015em;
            line-height: 1.12;
            margin-bottom: 16px;
            color: var(--text);
        }

        .editorial-split .es-text > p {
            color: var(--text-muted);
            font-size: 1.05rem;
            line-height: 1.65;
        }

        .editorial-split .es-text .es-caption {
            margin-top: 18px;
            font-size: 0.9rem;
            color: var(--text-dim);
            font-style: italic;
        }

        html[data-theme="light"] .editorial-split .es-text h2 { color: var(--lt-text); }
        html[data-theme="light"] .editorial-split .es-text > p { color: var(--lt-text-muted); }
        html[data-theme="light"] .editorial-split .es-text .es-caption { color: var(--lt-text-dim); }

        @media (max-width: 880px) {
            .editorial-split { grid-template-columns: 1fr; gap: 30px; }
            .editorial-split .es-text { text-align: center; }
        }

        /* ── PROBLEMA: mapa de caos (tarjetas dispersas + conexiones sueltas) ── */
        .chaos-map {
            position: relative;
            max-width: 760px;
            margin: 0 auto 44px;
            aspect-ratio: 4 / 3;
        }

        /* Variante compacta (dentro de .editorial-split) */
        .chaos-map.is-compact {
            max-width: 100%;
            margin: 0;
            aspect-ratio: 1 / 0.86;
        }
        .chaos-map.is-compact .data-card { width: 50%; padding: 10px 12px; border-radius: 12px; gap: 6px; }
        .chaos-map.is-compact .dc-ic { width: 26px; height: 26px; font-size: 0.9rem; }
        .chaos-map.is-compact .dc-title { font-size: 0.8rem; }
        .chaos-map.is-compact .dc-lines { padding-left: 38px; gap: 4px; }
        .chaos-map.is-compact .dc-line { height: 5px; }
        .chaos-map.is-compact .cc-1 { top: 0%;   left: 0%;   transform: rotate(-4deg); }
        .chaos-map.is-compact .cc-2 { top: 6%;   right: 0%;  transform: rotate(3deg); }
        .chaos-map.is-compact .cc-3 { top: 38%;  left: 10%;  transform: rotate(-1deg); z-index: 2; }
        .chaos-map.is-compact .cc-4 { top: 46%;  right: 1%;  transform: rotate(4deg); }
        .chaos-map.is-compact .cc-5 { bottom: 2%; left: 0%;  transform: rotate(2deg); }
        .chaos-map.is-compact .cc-6 { bottom: 0%; left: 32%; transform: rotate(-3deg); }

        .chaos-map svg.cm-links {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .chaos-map .cm-link {
            fill: none;
            stroke: rgba(90, 74, 58, 0.28);
            stroke-width: 1.5;
            stroke-dasharray: 4 6;
        }

        .chaos-map .data-card {
            position: absolute;
            min-width: 0;
            width: 40%;
        }

        .chaos-map .cc-1 { top: 2%;   left: 0%;   transform: rotate(-3deg); }
        .chaos-map .cc-2 { top: 0%;   right: 0%;  transform: rotate(4deg); }
        .chaos-map .cc-3 { top: 30%;  left: 30%;  transform: rotate(-1deg); z-index: 2; }
        .chaos-map .cc-4 { top: 46%;  right: 1%;  transform: rotate(3deg); }
        .chaos-map .cc-5 { bottom: 0%; left: 1%;  transform: rotate(2deg); }
        .chaos-map .cc-6 { bottom: 4%; left: 33%; transform: rotate(-4deg); }

        html[data-theme="dark"] .chaos-map .cm-link { stroke: rgba(255, 255, 255, 0.18); }

        @media (max-width: 720px) {
            .chaos-map { aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
            .chaos-map svg.cm-links { display: none; }
            .chaos-map .data-card { position: static; width: 100%; transform: none !important; }
        }

        /* ── MÉTODO: mapa de conexión radial hacia el núcleo Taktico ── */
        .radial-map {
            position: relative;
            max-width: 820px;
            margin: 0 auto 44px;
            aspect-ratio: 16 / 11;
        }

        /* Variante compacta (dentro de .editorial-split, columna derecha) */
        .radial-map.is-compact {
            max-width: 100%;
            margin: 0;
            aspect-ratio: 1 / 0.9;
        }
        .radial-map.is-compact .data-card { width: 43%; padding: 9px 11px; border-radius: 11px; gap: 5px; }
        .radial-map.is-compact .dc-ic { width: 24px; height: 24px; font-size: 0.82rem; }
        .radial-map.is-compact .dc-title { font-size: 0.76rem; }
        .radial-map.is-compact .dc-lines { padding-left: 34px; gap: 4px; }
        .radial-map.is-compact .dc-line { height: 4px; }
        .radial-map.is-compact .rm-core {
            width: 82px;
            height: 82px;
            border-radius: 18px;
            padding: 15px;
        }
        .radial-map.is-compact .rm-1 { top: 0%; left: 0%; }
        .radial-map.is-compact .rm-2 { top: 0%; right: 0%; }
        .radial-map.is-compact .rm-3 { top: 50%; left: 0%; transform: translateY(-50%); }
        .radial-map.is-compact .rm-4 { top: 50%; right: 0%; transform: translateY(-50%); }
        .radial-map.is-compact .rm-5 { bottom: 0%; left: 0%; }
        .radial-map.is-compact .rm-6 { bottom: 0%; right: 0%; }

        .radial-map svg.rm-links {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .radial-map .rm-link {
            fill: none;
            stroke: var(--teal-soft);
            stroke-width: 2;
        }

        .radial-map .rm-link.is-accent { stroke: var(--bronze); }

        .radial-map .rm-dot { fill: var(--teal); }
        .radial-map .rm-dot.is-accent { fill: var(--bronze); }

        .radial-map .rm-core {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 150px;
            height: 150px;
            border-radius: 26px;
            background: linear-gradient(150deg, var(--navy-800), var(--navy-950));
            border: 1px solid rgba(217, 117, 35, 0.35);
            box-shadow: 0 18px 44px rgba(20, 48, 73, 0.28), 0 0 0 6px rgba(20, 48, 73, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 26px;
            z-index: 3;
        }

        .radial-map .rm-core img { width: 100%; height: auto; display: block; }

        .radial-map .data-card {
            position: absolute;
            width: 30%;
            min-width: 0;
        }

        .radial-map .rm-1 { top: 4%;  left: 0%; }
        .radial-map .rm-2 { top: 4%;  right: 0%; }
        .radial-map .rm-3 { top: 50%; left: -2%; transform: translateY(-50%); }
        .radial-map .rm-4 { top: 50%; right: -2%; transform: translateY(-50%); }
        .radial-map .rm-5 { bottom: 4%; left: 0%; }
        .radial-map .rm-6 { bottom: 4%; right: 0%; }

        /* .rm-core es navy en ambos temas (marco de marca) */

        @media (max-width: 760px) {
            .radial-map { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 340px; }
            .radial-map svg.rm-links { display: none; }
            .radial-map .rm-core { position: static; transform: none; order: -1; width: 120px; height: 120px; }
            .radial-map .data-card { position: static; width: 100%; transform: none !important; }
        }

        /* ── INTELIGENCIA: mini-dashboard (mockup del producto) ── */
        .mini-dash {
            max-width: 560px;
            margin: 0 auto 44px;
            background: #fff;
            border: 1px solid var(--lt-line);
            border-radius: 20px;
            padding: 24px 26px;
            box-shadow: 0 20px 50px rgba(90, 70, 50, 0.14), 0 4px 12px rgba(90, 70, 50, 0.06);
        }

        .mini-dash .md-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .mini-dash .md-title { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy-900); }
        .mini-dash .md-range {
            font-size: 0.74rem;
            color: var(--lt-text-dim);
            border: 1px solid var(--lt-line);
            border-radius: 8px;
            padding: 4px 10px;
        }

        .mini-dash .md-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }

        .mini-dash .md-kpi {
            background: #FBF8F3;
            border: 1px solid var(--lt-line);
            border-radius: 12px;
            padding: 12px 14px;
        }

        .mini-dash .md-kpi .k-lbl { font-size: 0.72rem; color: var(--lt-text-dim); margin-bottom: 3px; }
        .mini-dash .md-kpi .k-val { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--navy-900); letter-spacing: -0.01em; }
        .mini-dash .md-kpi .k-delta { font-size: 0.72rem; color: var(--teal); font-weight: 600; margin-top: 2px; }

        .mini-dash .md-chart {
            background: #FBF8F3;
            border: 1px solid var(--lt-line);
            border-radius: 12px;
            padding: 14px 16px 10px;
            margin-bottom: 14px;
        }

        .mini-dash .md-chart .c-lbl { font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; color: var(--navy-900); margin-bottom: 8px; }
        .mini-dash .md-chart svg { display: block; width: 100%; height: 92px; }

        .mini-dash .md-bars { display: flex; flex-direction: column; gap: 8px; }
        .mini-dash .md-bar-row { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 10px; font-size: 0.76rem; color: var(--lt-text-muted); }
        .mini-dash .md-bar-track { display: block; height: 10px; border-radius: 6px; background: #e4ddd0; overflow: hidden; }
        .mini-dash .md-bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--teal); }
        .mini-dash .md-bar-fill.is-accent { background: var(--bronze); }
        .mini-dash .md-bar-val { text-align: right; font-weight: 600; color: var(--navy-900); }

        html[data-theme="dark"] .mini-dash {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
        }
        html[data-theme="dark"] .mini-dash .md-title,
        html[data-theme="dark"] .mini-dash .md-kpi .k-val,
        html[data-theme="dark"] .mini-dash .md-chart .c-lbl,
        html[data-theme="dark"] .mini-dash .md-bar-val { color: #fff; }
        html[data-theme="dark"] .mini-dash .md-kpi,
        html[data-theme="dark"] .mini-dash .md-chart { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
        html[data-theme="dark"] .mini-dash .md-range { color: var(--text-dim); border-color: rgba(255, 255, 255, 0.14); }
        html[data-theme="dark"] .mini-dash .md-bar-track { background: rgba(255, 255, 255, 0.08); }
        html[data-theme="dark"] .mini-dash .md-kpi .k-lbl,
        html[data-theme="dark"] .mini-dash .md-bar-row { color: var(--text-muted); }

        /* ── Mini-visuales dentro de las tarjetas de Capacidad ── */
        .capacity-card.has-visual { position: relative; }

        .cap-visual {
            margin-top: auto;
            align-self: center;
            width: 220px;
            max-width: 100%;
            background: #FBF8F3;
            border: 1px solid var(--lt-line);
            border-radius: 12px;
            padding: 12px 14px;
            box-shadow: 0 6px 16px rgba(90, 70, 50, 0.08);
        }

        html[data-theme="dark"] .cap-visual { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.09); }

        /* ── cap-visual--solutions / --intel: 3 tarjetas superpuestas (estilo baraja),
              centradas dentro de la tarjeta de capacidad ── */
        .cap-visual--solutions,
        .cap-visual--intel {
            background: none;
            border: none;
            box-shadow: none;
            padding: 0;
            width: 100%;
            max-width: 360px;
            position: relative;
            aspect-ratio: 3 / 2;
        }

        .cap-visual--solutions .sv-card,
        .cap-visual--intel .sv-card {
            position: absolute;
            background: #fff;
            border: 1px solid var(--lt-line);
            border-radius: 14px;
            box-shadow: 0 14px 34px rgba(90, 70, 50, 0.16);
            padding: 13px 15px;
            box-sizing: border-box;
        }

        .cap-visual--solutions .sv-title,
        .cap-visual--intel .sv-title {
            font-family: var(--font-head);
            font-weight: 700;
            font-size: 0.74rem;
            color: var(--navy-900);
            margin-bottom: 10px;
        }

        .cap-visual--solutions .sv-checks,
        .cap-visual--intel .sv-checks { list-style: none; display: flex; flex-direction: column; gap: 7px; }
        .cap-visual--solutions .sv-checks li,
        .cap-visual--intel .sv-checks li { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--lt-text-muted); }
        .cap-visual--solutions .sv-checks li i,
        .cap-visual--intel .sv-checks li i { color: var(--teal); font-size: 0.82rem; }

        html[data-theme="dark"] .cap-visual--solutions .sv-card,
        html[data-theme="dark"] .cap-visual--intel .sv-card { background: var(--navy-800); border-color: rgba(255, 255, 255, 0.1); }
        html[data-theme="dark"] .cap-visual--solutions .sv-title,
        html[data-theme="dark"] .cap-visual--intel .sv-title { color: #fff; }
        html[data-theme="dark"] .cap-visual--solutions .sv-checks li,
        html[data-theme="dark"] .cap-visual--intel .sv-checks li { color: var(--text-muted); }

        /* -- SOLUCIONES: Automatización / Sistema empresarial / Asistente de IA -- */
        .cap-visual--solutions .sv-card--auto { top: 0; left: 0; width: 52%; transform: rotate(-6deg); z-index: 1; }
        .cap-visual--solutions .sv-card--sys  { top: 12%; left: 23%; width: 56%; transform: rotate(-1deg); z-index: 2; }
        .cap-visual--solutions .sv-card--chat { top: 32%; right: 0; width: 47%; transform: rotate(4deg); z-index: 3; }

        .cap-visual--solutions .sv-card--auto .sv-title {
            background: var(--navy-900);
            color: #fff;
            margin: -13px -15px 11px;
            padding: 9px 15px;
            border-radius: 13px 13px 0 0;
        }

        .cap-visual--solutions .sv-app { display: grid; grid-template-columns: 16px 1fr 20px; gap: 9px; }
        .cap-visual--solutions .sv-app-side { display: flex; flex-direction: column; gap: 7px; align-items: center; color: var(--lt-text-dim); font-size: 0.58rem; }
        .cap-visual--solutions .sv-app-main { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
        .cap-visual--solutions .sv-row { height: 7px; border-radius: 4px; background: #e4ded4; }
        .cap-visual--solutions .sv-row--sm { width: 62%; }
        .cap-visual--solutions .sv-app-status { display: flex; flex-direction: column; gap: 8px; align-items: center; padding-top: 2px; }
        .cap-visual--solutions .sv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
        .cap-visual--solutions .sv-dot--off { background: #d9d2c6; }

        .cap-visual--solutions .sv-card--chat .sv-bubble {
            background: #FBF8F3;
            border: 1px solid var(--lt-line);
            border-radius: 9px 9px 9px 2px;
            padding: 7px 10px;
            font-size: 0.68rem;
            color: var(--lt-text-muted);
            line-height: 1.3;
            margin-bottom: 9px;
        }
        .cap-visual--solutions .sv-wave { display: flex; align-items: center; gap: 2px; height: 18px; }
        .cap-visual--solutions .sv-wave span { flex: 1; background: var(--teal); border-radius: 2px; }
        .cap-visual--solutions .sv-wave span:nth-child(1) { height: 32%; }
        .cap-visual--solutions .sv-wave span:nth-child(2) { height: 62%; }
        .cap-visual--solutions .sv-wave span:nth-child(3) { height: 100%; }
        .cap-visual--solutions .sv-wave span:nth-child(4) { height: 48%; }
        .cap-visual--solutions .sv-wave span:nth-child(5) { height: 82%; }
        .cap-visual--solutions .sv-wave span:nth-child(6) { height: 40%; }
        .cap-visual--solutions .sv-wave span:nth-child(7) { height: 66%; }

        html[data-theme="dark"] .cap-visual--solutions .sv-row { background: rgba(255, 255, 255, 0.12); }
        html[data-theme="dark"] .cap-visual--solutions .sv-card--chat .sv-bubble { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); color: var(--text-muted); }

        /* -- INTELIGENCIA: Impacto / Resumen / Crecimiento -- */
        .cap-visual--intel .sv-card--impact  { top: 0; left: 0; width: 50%; transform: rotate(-6deg); z-index: 1; }
        .cap-visual--intel .sv-card--resumen { top: 14%; left: 22%; width: 56%; transform: rotate(-1deg); z-index: 2; }
        .cap-visual--intel .sv-card--growth  { top: 34%; right: 0; width: 48%; transform: rotate(4deg); z-index: 3; }

        .cap-visual--intel .sv-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 9px;
            font-family: var(--font-head);
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--navy-900);
        }
        .cap-visual--intel .sv-chip {
            font-weight: 500;
            color: var(--lt-text-dim);
            border: 1px solid var(--lt-line);
            border-radius: 6px;
            padding: 2px 7px;
            font-size: 0.6rem;
        }
        .cap-visual--intel .sv-stat { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 6px; }
        .cap-visual--intel .sv-lbl { display: block; font-size: 0.58rem; color: var(--lt-text-dim); }
        .cap-visual--intel .sv-val { display: block; font-family: var(--font-head); font-weight: 800; font-size: 0.92rem; color: var(--navy-900); letter-spacing: -0.01em; }
        .cap-visual--intel .sv-delta { font-size: 0.64rem; font-weight: 700; color: var(--teal); }
        .cap-visual--intel .sv-spark { display: block; width: 100%; height: 34px; }

        .cap-visual--intel .sv-badge {
            display: inline-flex;
            align-items: baseline;
            gap: 5px;
            font-family: var(--font-head);
            font-weight: 800;
            font-size: 0.86rem;
            color: var(--teal);
            margin-bottom: 8px;
        }
        .cap-visual--intel .sv-badge span { font-weight: 500; font-size: 0.58rem; color: var(--lt-text-dim); }
        .cap-visual--intel .sv-bars { display: block; width: 100%; height: 62px; }

        html[data-theme="dark"] .cap-visual--intel .sv-head,
        html[data-theme="dark"] .cap-visual--intel .sv-val { color: #fff; }
        html[data-theme="dark"] .cap-visual--intel .sv-chip,
        html[data-theme="dark"] .cap-visual--intel .sv-lbl,
        html[data-theme="dark"] .cap-visual--intel .sv-badge span { color: var(--text-dim); border-color: rgba(255, 255, 255, 0.12); }

        @media (max-width: 720px) {
            .cap-visual { align-self: center; width: 100%; }
            .cap-visual--solutions, .cap-visual--intel { max-width: 320px; }
        }

        /* Caption editorial bajo un visual */
        .visual-caption {
            text-align: center;
            max-width: 460px;
            margin: 0 auto;
            color: var(--lt-text-muted);
            font-size: 0.95rem;
        }
        html[data-theme="dark"] .visual-caption { color: var(--text-muted); }

        /* ============================================================
           PROYECTOS ⇄ CLIENTES — selector de 2 vistas + abanico de tarjetas
           (datos y lógica en proyectos-clientes.js). Las tarjetas son
           blancas con texto navy fijo (igual que el mockup del hero), así
           funcionan igual en ambos temas; el resto usa tokens + override claro.
           ============================================================ */
        .pc { margin-top: 8px; }

        .pc-tabs { display: flex; justify-content: center; margin-bottom: 20px; }

        .pc-seg {
            display: inline-flex;
            gap: 4px;
            padding: 5px;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid var(--line);
        }

        .pc-tab {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 10px 26px;
            border: 0;
            border-radius: 50px;
            background: transparent;
            color: var(--text-muted);
            font-family: var(--font-head);
            font-size: 0.92rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
        }

        .pc-tab i { font-size: 0.85rem; }
        .pc-tab:hover { color: var(--text); }
        .pc-tab[aria-pressed="true"] {
            background: linear-gradient(135deg, var(--bronze), var(--bronze-light));
            color: #fff;
            box-shadow: 0 6px 18px rgba(217, 117, 35, 0.32);
        }

        .pc-filters {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-bottom: 6px;
        }
        .pc-filters[hidden] { display: none; }

        .pc-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 50px;
            border: 1px solid var(--line);
            background: var(--card);
            color: var(--text-muted);
            font-family: var(--font-head);
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s ease;
        }
        .pc-chip i { font-size: 0.78rem; opacity: 0.8; }
        .pc-chip .n { font-size: 0.7rem; opacity: 0.65; }
        .pc-chip:hover { border-color: var(--bronze); color: var(--text); }
        .pc-chip[aria-pressed="true"] {
            background: rgba(217, 117, 35, 0.16);
            border-color: var(--bronze);
            color: var(--bronze-light);
        }

        /* Escenario del abanico */
        .pc-stage {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .pc-fan {
            --pc-w: 13rem;
            --pc-h: calc(var(--pc-w) * 1.42);
            position: relative;
            flex: 1;
            max-width: 62rem;
            height: calc(var(--pc-h) * 1.42);
        }

        .pc-card {
            position: absolute;
            left: 50%;
            top: 43%;
            width: var(--pc-w);
            height: var(--pc-h);
            margin-left: calc(var(--pc-w) / -2);
            margin-top: calc(var(--pc-h) / -2);
            display: flex;
            flex-direction: column;
            padding: 0;
            border: 0;
            border-radius: 20px;
            overflow: hidden;
            background: #ffffff;
            color: #14304a;
            text-align: left;
            font-family: var(--font-body);
            cursor: pointer;
            opacity: 0;
            backface-visibility: hidden;
            transform-origin: 50% 85%;
            box-shadow: 0 18px 40px rgba(20, 48, 74, 0.22), 0 2px 6px rgba(20, 48, 74, 0.08);
            transition: transform 0.7s cubic-bezier(0.34, 1.35, 0.64, 1), opacity 0.45s ease, box-shadow 0.3s ease;
        }
        .pc-card.is-in { opacity: 1; }
        .pc-card.is-selected { box-shadow: 0 26px 54px rgba(20, 48, 74, 0.32), 0 0 0 2px var(--bronze); }
        .pc-card:focus-visible { outline: 3px solid var(--bronze); outline-offset: 3px; }

        .pc-thumb { flex: 0 0 50%; overflow: hidden; background: linear-gradient(150deg, #123049, #0a1825); }
        .pc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

        .pc-cbody { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 13px 15px 15px; min-height: 0; }
        .pc-cmeta { display: flex; flex-wrap: wrap; gap: 5px; }
        .pc-ctag {
            font-family: var(--font-head);
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #b85f14;
            background: rgba(217, 117, 35, 0.12);
            border: 1px solid rgba(217, 117, 35, 0.3);
            padding: 3px 8px;
            border-radius: 50px;
        }
        .pc-ctitle {
            font-family: var(--font-head);
            font-size: 0.84rem;
            font-weight: 600;
            line-height: 1.28;
            color: #14304a;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .pc-cclient {
            margin-top: auto;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.72rem;
            font-weight: 500;
            color: #5b5750;
        }
        .pc-mlogo {
            width: 26px; height: 26px; flex-shrink: 0;
            border-radius: 7px; border: 1px solid rgba(90, 74, 58, 0.16);
            background: #fff; display: flex; align-items: center; justify-content: center; padding: 2px;
        }
        .pc-mlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }

        /* Tarjeta de cliente */
        .pc-logo {
            flex: 0 0 52%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: linear-gradient(180deg, #f7f4ef, #efeae2);
        }
        .pc-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .pc-cname { font-family: var(--font-head); font-size: 0.98rem; font-weight: 700; color: #14304a; line-height: 1.2; }
        .pc-csector { font-size: 0.72rem; color: #5b5750; line-height: 1.35; }
        .pc-ccount { margin-top: auto; font-size: 0.7rem; font-weight: 600; color: #8b857b; }
        .pc-cpending { font-size: 0.7rem; font-style: italic; color: #8b857b; }

        .pc-arrow {
            width: 46px; height: 46px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            border-radius: 50%;
            border: 1.5px solid var(--line);
            background: var(--card);
            color: var(--text-muted);
            font-size: 0.9rem;
            cursor: pointer;
            z-index: 30;
            transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
        }
        .pc-arrow:hover:not(:disabled) { color: var(--bronze-light); border-color: var(--bronze); }
        .pc-arrow:disabled { opacity: 0.3; cursor: default; }

        .pc-dots { display: flex; justify-content: center; gap: 9px; margin-top: 4px; }
        .pc-dot {
            width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
            background: rgba(255, 255, 255, 0.22);
            cursor: pointer;
            transition: transform 0.3s ease, background 0.3s ease;
        }
        .pc-dot[aria-current="true"] { background: var(--bronze); transform: scale(1.35); }

        /* Panel de detalle (el "match" cliente ⇄ proyecto) */
        .pc-detail {
            max-width: 62rem;
            margin: 30px auto 0;
            padding: 30px 34px;
            border-radius: 22px;
            background: var(--card);
            border: 1px solid var(--line);
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
            gap: 26px 44px;
        }
        .pc-detail.is-anim { animation: pcFade 0.45s ease both; }
        @keyframes pcFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

        .pc-d-eyebrow {
            font-family: var(--font-head);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--bronze-light);
            margin-bottom: 10px;
        }
        .pc-d-title { font-family: var(--font-head); font-size: 1.35rem; line-height: 1.25; color: var(--text); margin-bottom: 14px; }
        .pc-d-sector { color: var(--text-muted); font-size: 0.92rem; }
        .pc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
        .pc-d-main .pc-tags { margin-bottom: 20px; }
        .pc-tag {
            font-family: var(--font-head);
            font-size: 0.7rem;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 50px;
            background: rgba(217, 117, 35, 0.12);
            border: 1px solid rgba(217, 117, 35, 0.28);
            color: var(--bronze-light);
        }

        .pc-clientlink, .pc-projitem {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            padding: 12px 16px;
            text-align: left;
            border-radius: 16px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text);
            font-family: var(--font-body);
            cursor: pointer;
            transition: border-color 0.25s ease, transform 0.25s ease;
        }
        .pc-clientlink:hover, .pc-projitem:hover { border-color: var(--bronze); transform: translateX(3px); }
        .pc-clientlink > i, .pc-projitem > i { margin-left: auto; color: var(--bronze-light); font-size: 0.8rem; }
        .pc-clogo {
            width: 52px; height: 52px; flex-shrink: 0; padding: 6px;
            border-radius: 12px; background: #fff;
            display: flex; align-items: center; justify-content: center;
        }
        .pc-clogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .pc-cl-text small { display: block; font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-dim); }
        .pc-cl-text strong { font-family: var(--font-head); font-size: 0.98rem; font-weight: 600; }

        .pc-biglogo {
            width: 150px; height: 96px; margin-bottom: 14px; padding: 10px;
            border-radius: 16px; background: #fff;
            display: flex; align-items: center; justify-content: center;
        }
        .pc-biglogo img { max-width: 100%; max-height: 100%; object-fit: contain; }

        .pc-d-side .work-fields { margin-bottom: 18px; }
        .pc-more { margin-top: 4px; }
        .pc-pending-note { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; }

        .pc-projlist { list-style: none; display: flex; flex-direction: column; gap: 12px; }
        .pc-pthumb { width: 72px; height: 56px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: #0a1825; }
        .pc-pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .pc-pi-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
        .pc-pi-text strong { font-family: var(--font-head); font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
        .pc-noscript { text-align: center; color: var(--text-muted); }

        @media (max-width: 820px) {
            .pc-detail { grid-template-columns: 1fr; padding: 24px 22px; }
        }
        @media (max-width: 640px) {
            .pc-fan { --pc-w: 10.5rem; }
            .pc-arrow { width: 38px; height: 38px; }
            .pc-tab { padding: 9px 20px; }
        }
        @media (max-width: 480px) {
            .pc-fan { --pc-w: 9.5rem; }
            .pc-stage { gap: 6px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .pc-card { transition: none; }
            .pc-detail.is-anim { animation: none; }
        }

        /* Tema claro — sección .why sobre beige */
        html[data-theme="light"] .pc-seg { background: #ffffff; border-color: var(--lt-line); }
        html[data-theme="light"] .pc-tab { color: var(--lt-text-muted); }
        html[data-theme="light"] .pc-tab:hover { color: var(--lt-text); }
        html[data-theme="light"] .pc-tab[aria-pressed="true"] { color: #fff; }
        html[data-theme="light"] .pc-chip { background: #ffffff; border-color: var(--lt-line); color: var(--lt-text-muted); }
        html[data-theme="light"] .pc-chip:hover { color: var(--lt-text); }
        html[data-theme="light"] .pc-chip[aria-pressed="true"] { background: rgba(217, 117, 35, 0.12); color: #b85f14; }
        html[data-theme="light"] .pc-arrow { background: #ffffff; border-color: var(--lt-line); color: var(--lt-text-muted); }
        html[data-theme="light"] .pc-arrow:hover:not(:disabled) { color: var(--bronze); }
        html[data-theme="light"] .pc-dot { background: rgba(20, 48, 74, 0.2); }
        html[data-theme="light"] .pc-dot[aria-current="true"] { background: var(--bronze); }
        html[data-theme="light"] .pc-detail { background: #ffffff; border-color: var(--lt-line); box-shadow: 0 14px 36px rgba(90, 70, 50, 0.08); }
        html[data-theme="light"] .pc-d-eyebrow { color: #b85f14; }
        html[data-theme="light"] .pc-d-title { color: var(--lt-text); }
        html[data-theme="light"] .pc-d-sector,
        html[data-theme="light"] .pc-pending-note,
        html[data-theme="light"] .pc-noscript { color: var(--lt-text-muted); }
        html[data-theme="light"] .pc-tag { color: #b85f14; }
        html[data-theme="light"] .pc-clientlink,
        html[data-theme="light"] .pc-projitem { background: var(--lt-bg); border-color: var(--lt-line); color: var(--lt-text); }
        html[data-theme="light"] .pc-clientlink > i,
        html[data-theme="light"] .pc-projitem > i { color: var(--bronze); }
        html[data-theme="light"] .pc-cl-text small { color: var(--lt-text-dim); }
        html[data-theme="light"] .pc-clogo,
        html[data-theme="light"] .pc-biglogo { border: 1px solid var(--lt-line); }