/* ═══════════════════════════════════════════════════════════════════════
   VIXOZ 2026 · TOKENS
   ───────────────────────────────────────────────────────────────────────
   Los dos colores de marca son EXACTOS y no se tocan:
       azul  #2C3BB8   ·   verde  #00DC8E

   Todas las variantes se derivan manteniendo el tono (hue) de cada uno:
       azul  → hue 234°
       verde → hue 159°
   No existe ningun color fuera de estas dos familias (mas blanco y negro).
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Marca · valores exactos, no modificar ───────────────────────── */
  --azul-marca:  #2C3BB8;
  --verde-marca: #00DC8E;

  /* ── Familia azul · hue 234° ─────────────────────────────────────── */
  --azul-950: #060923;  /* casi negro con tinte azul — fondo del shader   */
  --azul-900: #0B0F38;  /* azul marino profundo — fondo base del sitio    */
  --azul-800: #121854;
  --azul-700: #1B2579;  /* superficies elevadas, cards                    */
  --azul-600: #243099;
  --azul-500: #2C3BB8;  /* ← marca                                        */
  --azul-400: #4A58D3;  /* bordes, rims                                   */
  --azul-300: #7D87E3;
  --azul-200: #B4BBF3;  /* texto secundario sobre azul oscuro             */

  /* ── Familia verde · hue 159° ────────────────────────────────────── */
  --verde-700: #008556;
  --verde-600: #00AD71;
  --verde-500: #00DC8E;  /* ← marca                                       */
  --verde-400: #1AFFAF;  /* glow, picos de luz                            */
  --verde-300: #6EF8C7;
  --verde-200: #B8F9E3;

  /* ── Neutros ─────────────────────────────────────────────────────── */
  --blanco: #FFFFFF;

  /* ── Roles semanticos ────────────────────────────────────────────────
     Usar SIEMPRE estos en el CSS de secciones, nunca los de arriba
     directamente. Asi una seccion se puede re-tematizar cambiando el rol. */
  --fondo:            var(--azul-900);
  --fondo-profundo:   var(--azul-950);
  --superficie:       var(--azul-800);
  --superficie-alta:  var(--azul-700);
  --borde:            color-mix(in srgb, var(--azul-400) 40%, transparent);
  --borde-fuerte:     var(--azul-400);

  --texto:            var(--blanco);
  --texto-tenue:      var(--azul-200);
  --texto-etiqueta:   var(--azul-300);

  --acento:           var(--verde-500);
  --acento-brillo:    var(--verde-400);
  --acento-suave:     color-mix(in srgb, var(--verde-500) 14%, transparent);

  --foco:             var(--verde-400);

  /* ── Tipografia ──────────────────────────────────────────────────────
     Archivo (variable: peso 100-900 + ancho 62-125) para titulos.
     Inter para todo el texto corrido. Solo Google Fonts.               */
  --fuente-titulo: 'Archivo', system-ui, -apple-system, sans-serif;
  --fuente-texto:  'Inter', system-ui, -apple-system, sans-serif;

  /* Escala fluida. El minimo es el valor en mobile, el maximo en desktop. */
  --t-hero:    clamp(2.75rem, 7.2vw, 6.5rem);   /* CREAMOS / EXPERIENCIAS */
  --t-titulo:  clamp(2.1rem, 5.2vw, 4.25rem);   /* titulos de seccion     */
  --t-sub:     clamp(1.5rem, 3vw,  2.25rem);
  --t-cuerpo:  clamp(1rem, 1.05vw, 1.125rem);
  --t-chico:   0.9375rem;
  --t-etiqueta: 0.6875rem;                      /* NOMBRE / 0N            */

  /* Archivo es variable tambien en ancho (75%-125%). 100% es el ancho
     normal; subirlo hace los titulos mas anchos y contundentes. */
  --ancho-titulo: 100%;

  --tracking-titulo:   -0.04em;
  --tracking-etiqueta:  0.28em;

  --interlinea-titulo: 0.94;
  --interlinea-texto:  1.65;

  /* ── Ritmo vertical y layout ─────────────────────────────────────── */
  --ancho-max:     84rem;   /* 1344px — contenedor principal            */
  --ancho-texto:   34rem;   /* medida comoda de lectura                 */
  --margen-lateral: clamp(1.25rem, 5vw, 5rem);
  --seccion-y:     clamp(5rem, 11vh, 10rem);

  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-12: 3rem;
  --esp-16: 4rem;
  --esp-24: 6rem;

  /* ── Movimiento ──────────────────────────────────────────────────── */
  --curva-salida:  cubic-bezier(0.16, 1, 0.3, 1);   /* entradas, reveals */
  --curva-suave:   cubic-bezier(0.65, 0, 0.35, 1);  /* barras, trazos    */
  --dur-rapida:  200ms;
  --dur-media:   450ms;
  --dur-lenta:   900ms;

  /* ── Capas ───────────────────────────────────────────────────────── */
  /* El apilado es delicado: el canvas 3D tiene que quedar ENCIMA del fondo
     de las secciones opacas (si no, los triangulos y la composicion de
     Estudio desaparecen ahi) pero DEBAJO del texto.
        0  plasma
        1  velo de contraste sobre el plasma
       (auto) fondo de cada seccion — pinta por orden de documento
        2  canvas 3D compartido
        3  contenido de las secciones
     Por eso .sitio no lleva z-index: crearia un contexto de apilado y
     encerraria todo esto. */
  --z-plasma:     0;
  --z-velo:       1;
  --z-canvas-3d:  2;
  --z-contenido:  3;
  --z-header:    40;
  --z-flotantes: 50;
  --z-modal:    100;
  --z-preloader: 9999;
}

/* Si el navegador no soporta color-mix, los roles que lo usan caen a un
   valor solido equivalente para no quedar transparentes. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --borde:        #2A3580;
    --acento-suave: #123F36;
  }
}