/* ============================================================
           PALETA: única fuente de color del sitio.
           Cada fondo tiene su pareja de texto; nunca se mezclan.
           ============================================================ */
        :root {
            --site-bg: #faf7f4;
            --site-surface: #fdfbf8;
            --site-text: #1e1a16;
            --site-muted: #595450;
            --site-border: #d2d0cd;
            --site-primary: #e68a4f;
            --site-on-primary: #000000;
            --site-secondary: #f9e3d6;
            --site-on-secondary: #000000;
            --site-accent: #dc8b89;
            --site-on-accent: #000000;

            /* Roles legibles para texto, enlaces e iconos sobre bg/surface */
            --site-primary-text: #b05917;
            --site-secondary-text: #806d62;
            --site-accent-text: #a75b5a;
            --site-indicator: #d2783c;

            /* Rol tonal cálido, muy usado en tarjetas y bandas */
            --color-tonal-bg: #fff0e8;
            --color-tonal-surface: #f9d6c2;
            --color-tonal-panel: #e8a67f;
            --color-on-tonal-panel: #000000;
            --color-tonal-text: #1e1a16;
            --color-tonal-primary-text: #994a05;
            --color-tonal-indicator: #be6527;
            --color-category-0: #fae0d2;
            --color-category-1: #efc8b1;
            --color-on-category-0: #000000;
            --color-on-category-1: #000000;

            /* Semánticos de estado (avisos de panel, validación de formularios) */
            --color-success: #28bcd9;
            --color-warning: #f59e0b;
            --color-error: #ef4444;
            --color-info: #3b82f6;

            /* Alias --color-* que consumen los componentes y el pie */
            --color-bg: var(--site-bg);
            --color-surface: var(--site-surface);
            --color-text: var(--site-text);
            --color-muted: var(--site-muted);
            --color-border: var(--site-border);
            --color-primary: var(--site-primary);
            --color-on-primary: var(--site-on-primary);
            --color-secondary: var(--site-secondary);
            --color-on-secondary: var(--site-on-secondary);
            --color-accent: var(--site-accent);
            --color-on-accent: var(--site-on-accent);
            --color-primary-text: var(--site-primary-text);
            --color-secondary-text: var(--site-secondary-text);
            --color-accent-text: var(--site-accent-text);
            --color-indicator: var(--site-indicator);

            --radius-panel: 20px;
            --shadow-medium: 0 4px 12px rgba(0,0,0, 0.15);
            --header-height: 4.5rem;
        }

        /* Tema oscuro del sistema: se mantienen las parejas de contraste */
        @media (prefers-color-scheme: dark) {
            :root {
                --site-bg: #14120f;
                --site-surface: #201d1b;
                --site-text: #f4ede6;
                --site-muted: #b6b0a9;
                --site-border: #383633;
                --site-primary: #f2a271;
                --site-on-primary: #000000;
                --site-secondary: #3e281b;
                --site-on-secondary: #ffffff;
                --site-accent: #f19e9b;
                --site-on-accent: #000000;
                --site-primary-text: #f2a271;
                --site-secondary-text: #9b8071;
                --site-accent-text: #f19e9b;
                --site-indicator: #f2a271;
                --color-tonal-bg: #130803;
                --color-tonal-surface: #321909;
                --color-tonal-panel: #683104;
                --color-on-tonal-panel: #ffffff;
                --color-tonal-text: #f4ede6;
                --color-tonal-primary-text: #f2a271;
                --color-tonal-indicator: #f2a271;
                --color-category-0: #342116;
                --color-category-1: #4e2f1c;
                --color-on-category-0: #ffffff;
                --color-on-category-1: #ffffff;
            }
        }

        /* ============================================================
           BASE: reset mínimo y tipografía editorial
           ============================================================ */
        * { box-sizing: border-box; }

        html {
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
            -webkit-text-size-adjust: 100%;
        }

        /* En pantallas pequeñas o bajas el ajuste pasa a proximidad
           para no bloquear el desplazamiento natural del usuario. */
        @media (max-width: 768px), (max-height: 640px) {
            html { scroll-snap-type: y proximity; }
        }

        body {
            margin: 0;
            background: var(--site-bg);
            color: var(--site-text);
            font-family: 'Roboto', system-ui, -apple-system, sans-serif;
            font-weight: 400;
            line-height: 1.75;
            overflow-x: hidden;
        }

        h1, h2, h3, h4 {
            font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
            font-weight: 700;
            letter-spacing: -0.02em;
            margin: 0 0 1rem;
            color: inherit;
        }

        p { margin: 0 0 1rem; }

        a { color: var(--site-primary-text); text-decoration: none; }
        a:hover { text-decoration: underline; }

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

        :focus-visible {
            outline: 3px solid var(--color-indicator);
            outline-offset: 3px;
        }

        /* ============================================================
           MAZO DE PANELES: siete secciones a pantalla completa
           ============================================================ */
        .deck { margin: 0; padding: 0; }

        .panel {
            min-height: 100vh;
            min-height: 100svh;
            height: auto;
            scroll-snap-align: start;
            display: grid;
            align-items: center;
            padding: clamp(5rem, 10vh, 8rem) clamp(1.5rem, 6vw, 6rem) clamp(3rem, 8vh, 6rem);
            position: relative;
            overflow: visible;
        }

        .inner {
            width: min(1200px, 100%);
            margin: auto;
            display: grid;
            gap: 2.5rem;
        }

        .panel h1 {
            font-size: clamp(3rem, 8vw, 7.5rem);
            line-height: 0.98;
        }

        .panel h2 {
            font-size: clamp(2.5rem, 6vw, 5.5rem);
            line-height: 1.02;
        }

        .panel .lead {
            font-size: clamp(1.05rem, 1.6vw, 1.35rem);
            max-width: 46ch;
            color: inherit;
        }

        .split {
            grid-template-columns: 5fr 7fr;
            align-items: center;
        }

        /* Fondos alternos: ningún panel repite el fondo de su vecino */
        .p-hero { background: var(--site-bg); }
        .p-connect { background: var(--site-surface); }
        .p-ai { background: var(--site-text); color: var(--site-bg); }
        .p-steps { background: var(--color-tonal-bg); color: var(--color-tonal-text); }
        .p-quote { background: var(--site-secondary); color: var(--site-on-secondary); }
        .p-pricing { background: var(--color-category-0); color: var(--color-on-category-0); }
        .p-contact { background: var(--site-bg); }
        .p-tonal { background: var(--color-tonal-surface); color: var(--site-text); }
        .p-accent { background: var(--site-accent); color: var(--site-on-accent); }

        .dots {
            position: fixed;
            right: 1.5rem;
            top: 50%;
            transform: translateY(-50%);
            display: grid;
            gap: 0.75rem;
            z-index: 40;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .dots a {
            display: block;
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 999px;
            background: var(--site-border);
            border: 1px solid var(--color-indicator);
        }

        .dots a:hover { background: var(--color-indicator); }

        @media (max-width: 768px) {
            .split { grid-template-columns: 1fr; }
            .dots { display: none; }
        }

        /* ============================================================
           BOTONES: forma cuadrada en iconos, píldora en acciones
           ============================================================ */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            min-height: 48px;
            padding: 0.85rem 1.6rem;
            border: 1px solid transparent;
            border-radius: 999px;
            font-family: 'Roboto', system-ui, sans-serif;
            font-weight: 500;
            font-size: 1rem;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        }

        .btn:hover { transform: scale(1.02); text-decoration: none; }

        /* Pareja obligatoria: fondo primario + texto on-primary */
        .btn-primary {
            background: var(--site-primary);
            color: var(--site-on-primary);
            box-shadow: var(--shadow-medium);
        }

        .btn-ghost {
            background: transparent;
            color: inherit;
            border-color: var(--site-border);
        }

        .btn-ghost:hover { border-color: var(--color-indicator); }

        .icon-square {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.75rem;
            height: 2.75rem;
            border-radius: 0;
            background: rgba(230,138,79, 0.15);
            color: var(--site-primary-text);
            font-size: 1.35rem;
        }

        /* ============================================================
           CABECERA FIJA: sobria, sin transparencias frágiles
           ============================================================ */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 60;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            min-height: var(--header-height);
            padding: 0.6rem clamp(1rem, 4vw, 3rem);
            background: var(--site-bg);
            border-bottom: 1px solid var(--site-border);
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            color: var(--site-text);
            font-family: 'Fraunces', Georgia, serif;
            font-size: 1.15rem;
            font-weight: 700;
        }

        .brand:hover { text-decoration: none; }

        .brand-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 0;
            background: rgba(230,138,79, 0.16);
            color: var(--site-primary-text);
            font-size: 1.25rem;
        }

        .nav-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            background: transparent;
            border: 1px solid var(--site-border);
            border-radius: 0;
            color: var(--site-text);
            font-size: 1.4rem;
            cursor: pointer;
        }

        .nav-list {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            min-height: 48px;
            padding: 0 0.9rem;
            color: var(--site-text);
            font-size: 0.98rem;
            font-weight: 500;
            border-radius: 999px;
        }

        .nav-link:hover {
            color: var(--site-primary-text);
            text-decoration: none;
        }

        .nav-cta { margin-left: 0.4rem; }

        @media (max-width: 900px) {
            .nav-toggle { display: inline-flex; }

            .site-nav {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                display: none;
                background: var(--site-surface);
                border-bottom: 1px solid var(--site-border);
                padding: 1rem clamp(1rem, 4vw, 3rem) 1.5rem;
            }

            .site-nav.is-open { display: block; }

            .nav-list {
                flex-direction: column;
                align-items: stretch;
                gap: 0.25rem;
            }

            .nav-link {
                justify-content: flex-start;
                padding: 0 0.5rem;
            }

            .nav-cta { margin: 0.75rem 0 0; justify-content: center; }
        }

        /* Bloques reutilizables de contenido */
        .card {
            background: var(--site-surface);
            color: var(--site-text);
            border: 1px solid var(--site-border);
            border-radius: var(--radius-panel);
            box-shadow: var(--shadow-medium);
            padding: 1.75rem;
            transition: transform 0.2s ease;
        }

        .card:hover { transform: scale(1.02); }

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

        .eyebrow {
            display: inline-block;
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--site-primary-text);
            margin-bottom: 0.75rem;
        }

        .skip-link {
            position: absolute;
            left: -9999px;
            top: 0;
            background: var(--site-primary);
            color: var(--site-on-primary);
            padding: 0.75rem 1rem;
            z-index: 100;
        }

        .skip-link:focus { left: 0.5rem; top: 0.5rem; }