/* ============================================================
   TECNOMOTION V2 - DESIGN TOKENS
   Paleta: Lavanda Grisácea y Menta Suave
   ============================================================ */

:root {
    /* --- Base Colors (HEX) --- */
    --v2-primary: #C3B1E1;        /* Lavanda Grisácea - títulos de sección, tarjetas */
    --v2-primary-hover: #a68fc9;
    --v2-primary-light: #f4f1fa;  /* Fondo suave derivado del primario */
    --v2-primary-soft: rgba(195, 177, 225, 0.15);

    --v2-cta: #E2DAF2;            /* Lila Polvoriento - botones CTA */
    --v2-cta-hover: #d3c5ea;

    --v2-secondary: #36454F;      /* Gris Carbono - texto principal / profesional */
    --v2-accent: #B2DFDB;         /* Menta Pálido - fondo sección testimonios */
    --v2-metal: #C0C0C0;          /* Gris Acero/Plata - elementos de UI metálicos */
    --v2-gold: #C9A96A;           /* Dorado sutil - acentos finos */
    --v2-gold-rgb: 201, 169, 106;

    --v2-white: #ffffff;
    --v2-gray-50: #f8f9fa;   /* Near white background */
    --v2-gray-100: #f1f3f5;
    --v2-gray-200: #e9ecef;
    --v2-gray-400: #adb5bd;
    --v2-gray-600: #6c757d;
    --v2-gray-800: #343a40;
    --v2-black: #1a1a1a;

    /* --- RGB Components --- */
    --v2-primary-rgb: 195, 177, 225;
    --v2-accent-rgb: 178, 223, 219;
    --v2-black-rgb: 26, 26, 26;

    /* --- Warm Base Background (flat neutral beige/gray hybrid) --- */
    --v2-warm-gray: #F1ECE6;

    /* --- Semantic UI Colors --- */
    --v2-bg-body: var(--v2-warm-gray);
    --v2-bg-soft: var(--v2-gray-50);
    --v2-bg-accent: var(--v2-primary-light);
    --v2-bg-testimonial: var(--v2-accent);

    --v2-text-main: var(--v2-secondary);
    --v2-text-title: var(--v2-secondary);
    --v2-text-muted: var(--v2-gray-600);
    --v2-text-white: var(--v2-white);

    /* --- Typography (ref: ouraring.com — AkkuratLL / Editorial New) --- */
    --v2-font-main: 'Inter', sans-serif;        /* Texto / UI, equivalente libre de AkkuratLL */
    --v2-font-accent: 'Fraunces', serif;        /* Títulos, equivalente libre de Editorial New */
    
    /* --- Layout & Spacing --- */
    --v2-container-max: 1280px;
    --v2-section-padding: 100px 20px;
    --v2-header-height: 120px;   /* píldora + franja de estado */
    
    /* --- Effects --- */
    --v2-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
    --v2-shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.08);
    --v2-radius-sm: 8px;
    --v2-radius-md: 16px;
    --v2-radius-lg: 24px;
    
    /* Transition */
    --v2-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Sistema 2026: familia visual con la app Neuralia ===== */
    /* Violeta Neuralia: el mismo de la app. Blanco encima = 5,71:1 (AA) */
    --v2-violeta: #6d4fd0;
    --v2-violeta-hover: #5a3db8;      /* blanco encima 7,52:1 */
    --v2-violeta-texto: #5b3fbf;      /* violeta para texto chico sobre crema: 6,15:1 */
    --v2-violeta-50: #f4f1fd;         /* fondos de aviso */
    --v2-violeta-100: #ece7fb;
    --v2-violeta-200: #d9cff7;        /* bordes activos, foco */
    --v2-violeta-300: #c9bbf3;        /* eyebrow sobre fondo noche: 8,35:1 */
    --v2-violeta-rgb: 109, 79, 208;

    /* Tinta: la de la app, no el gris carbono viejo */
    --v2-tinta: #221f2e;              /* títulos y texto fuerte: 13,7:1 sobre crema */
    --v2-tinta-2: #4a4658;            /* cuerpo: 7,75:1 sobre crema */
    --v2-tinta-3: #5f5b70;            /* secundario, notas: 5,56:1 sobre crema (AA) */
    --v2-tinta-4: #928da4;            /* SOLO decorativo o texto ≥24 px: 2,72:1 */

    /* Superficies: el crema sigue siendo la base */
    --v2-crema: #F1ECE6;
    --v2-superficie: #FBF9F6;         /* tarjetas sobre crema */
    --v2-superficie-alt: #F7F3EE;     /* banda alterna de sección */
    --v2-blanco: #ffffff;             /* marcos de captura */
    --v2-noche: #26222d;              /* héroes interiores y bloque oscuro: blanco encima 14,7:1 */
    --v2-noche-2: #322d3a;

    /* Bordes */
    --v2-borde: rgba(34, 31, 46, 0.10);
    --v2-borde-fuerte: rgba(34, 31, 46, 0.18);
    --v2-borde-noche: rgba(255, 255, 255, 0.12);

    /* Estados (texto / fondo / punto). Todos ≥5:1 a 12 px semibold */
    --v2-hoy-texto: #1f6b4a;  --v2-hoy-fondo: #e2f0e7;  --v2-hoy-punto: #2f8a5f;          /* 5,48:1 */
    --v2-piloto-texto: #5a3db8; --v2-piloto-fondo: #ece7fb; --v2-piloto-punto: #6d4fd0;  /* 6,22:1 */
    --v2-desarrollo-texto: #7a4f00; --v2-desarrollo-fondo: #f8ecd3; --v2-desarrollo-punto: #c48a1a; /* 6,09:1 */
    --v2-ruta-texto: #55516a; --v2-ruta-fondo: #ebe8f0; --v2-ruta-punto: #928da4;        /* 6,25:1 */

    /* Radios: los de la app */
    --v2-radio-sm: 10px;
    --v2-radio-md: 16px;              /* botón de la app, inputs, capturas chicas */
    --v2-radio-lg: 28px;              /* tarjeta de la app */
    --v2-radio-pill: 999px;

    /* Sombras con tinte violeta, como la tarjeta del login */
    --v2-sombra-1: 0 1px 2px rgba(52, 38, 110, .05), 0 4px 12px -6px rgba(52, 38, 110, .10);
    --v2-sombra-2: 0 1px 1px rgba(52, 38, 110, .04), 0 4px 10px -4px rgba(52, 38, 110, .08),
                   0 16px 36px -20px rgba(52, 38, 110, .22);
    --v2-sombra-captura: 0 2px 4px rgba(34, 31, 46, .06), 0 24px 60px -24px rgba(52, 38, 110, .35);

    /* Tipografía fluida (390 px → 1280 px) */
    --v2-fs-h1: clamp(2.5rem, 1.6rem + 4.2vw, 5rem);        /* 40 → 80 px, Fraunces itálica 300 */
    --v2-fs-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3rem);     /* 30 → 48 px, Fraunces 400 */
    --v2-fs-h3: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);  /* 19 → 22 px, Inter 500 */
    --v2-fs-lede: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);/* 17 → 21 px */
    --v2-fs-body: clamp(1rem, .96rem + .2vw, 1.0625rem);    /* 16 → 17 px, Inter 400 */
    --v2-fs-small: .875rem;
    --v2-fs-eyebrow: .75rem;                                 /* Inter 600, mayúsculas, +0,14em */

    /* Espaciado */
    --v2-espacio-seccion: clamp(4.5rem, 3rem + 6vw, 8rem);   /* 72 px mobile → 128 px desktop */
    --v2-espacio-bloque: clamp(2rem, 1.5rem + 2vw, 3.5rem);  /* cabeza de sección → contenido */
    --v2-gutter: clamp(1.25rem, .9rem + 1.5vw, 2rem);
    --v2-ancho-texto: 64ch;
    --v2-ancla: 140px;   /* franja + píldora (+ subnav). Lo usa scroll-margin-top */

    /* Movimiento */
    --v2-ease: cubic-bezier(.2, .7, .2, 1);
    --v2-dur: .45s;

    /* Alias que usa el header */
    --v2-neuralia: var(--v2-violeta);
    --v2-neuralia-hover: var(--v2-violeta-hover);
}

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

html {
    scroll-behavior: smooth;
}

/* Base reset for light mode */
body {
    margin: 0;
    background-color: var(--v2-bg-body);
    color: var(--v2-text-main);
    font-family: var(--v2-font-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

h1, h2, h3, h4 {
    color: var(--v2-text-title);
    font-family: var(--v2-font-accent);
    font-weight: 700;
}