/* tokens.css · Creators Latam y Martín Velasco · sistema visual v1 · septiembre de 2026
   Claro en :root y [data-theme="light"]; oscuro en [data-theme="dark"]; escenario LED: [data-theme="dark"][data-escenario].
   La web no sigue el modo oscuro del teléfono: la landing declara <meta name="color-scheme" content="light">.
   Dentro de una pieza oscura, la pantalla del teléfono vuelve a claro con data-theme="light".
   Pareja: tokens.json (los mismos valores en formato DTCG). */

/* CL Sans: la Helvetica Neue del equipo si existe; si no, TeX Gyre Heros (carpeta fonts/, licencia GUST). */
@font-face{font-family:"CL Sans";font-weight:400;font-style:normal;font-display:swap;
  src:local("Helvetica Neue"),local("HelveticaNeue"),url("fonts/texgyreheros-regular.woff2") format("woff2")}
@font-face{font-family:"CL Sans";font-weight:700;font-style:normal;font-display:swap;
  src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),url("fonts/texgyreheros-bold.woff2") format("woff2")}

:root{
  /* Paleta con nombre. Las piezas usan los roles de abajo, no estos valores. */
  --blanco:#FFFFFF; --papel:#F6F7F8; --linea:#E5E7EB; --apagado:#8A919C;
  --pizarra:#5F6672; --tinta:#1D1D1F; --encendido:#007AFF; --encendido-suave:#F2F8FF;
  --error:#D70015;                        /* solo errores de formulario en la web */

  /* Letra: dos pesos, una escala */
  --fuente:"CL Sans", Arial, sans-serif;
  --regular:400; --bold:700;
  --t-12:12px; --t-15:15px; --t-17:17px; --t-19:19px; --t-24:24px; --t-30:30px;
  --t-42:42px; --t-58:58px; --t-80:80px; --t-112:112px; --t-160:160px;

  /* Tracking por tamaño VISIBLE (web y lámina: tal cual; redes: a un tercio; A4: pt × 1,7; entre dos pasos, el menor) */
  --trk-17:0; --trk-19:-.01em; --trk-24:-.015em; --trk-30:-.02em; --trk-42:-.028em;
  --trk-58:-.035em; --trk-80:-.04em; --trk-112:-.045em; --trk-160:-.05em;
  --trk-eyebrow:.1em;

  /* Interlineado por papel */
  --lh-cifra:1; --lh-titular:1.03; /* con mayúscula con tilde bajo un descendente: 1.18 */ --lh-titulo-42:1.08; --lh-titulo-30:1.15; --lh-titulo-24:1.25;
  --lh-eyebrow:1.2; --lh-pieza:1.35; --lh-bajada:1.4; --lh-cuerpo:1.5;
  --medida:32em; --medida-bajada:40em;

  /* Web: papeles en escritorio (celular, en la media query de abajo) */
  --web-h1:var(--t-80); --web-h1-trk:var(--trk-80);
  --web-h2:var(--t-58); --web-h2-trk:var(--trk-58);
  --web-h3:var(--t-24); --web-h3-trk:var(--trk-24);
  --web-bajada:var(--t-24); --web-bajada-trk:var(--trk-24);
  --web-cifra:var(--t-58); --web-cifra-trk:var(--trk-58);
  --web-cuerpo:var(--t-17); --web-chico:var(--t-15); --web-eyebrow:var(--t-12); --web-pie:var(--t-12); --web-boton:var(--t-19);

  /* Espacio (sistema de 8) y retícula web */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-24:24px; --s-32:32px;
  --s-48:48px; --s-64:64px; --s-80:80px; --s-96:96px; --s-128:128px; --s-160:160px;
  --contenedor:1200px; --margen-web:48px; --medianil:24px; --seccion:128px;
  --cabecera:64px; --boton-alto:52px; --tocable:44px;

  /* Forma (pantalla y lámina; en el lienzo de 1080: 16 / 32 / 40 y bordes de 2 px) */
  --r-campo:8px; --r-captura:12px; --r-tarjeta:16px; --r-pill:999px;
  --borde-ancho:1px; --borde-encendido:1.5px; --foco-ancho:2px;

  /* Interruptor, en unidades del ancho w de la cápsula (medidas de simbolo.svg) */
  --sw-alto:3.076; --sw-boton:.911; --sw-margen:.045; --sw-recorrido:2.076;
  --sw-separacion:.374; --sw-filas:1; --sw-min:12px; --sw-web:24px; --sw-web-hilera:16px;

  /* Íconos (Lucide, retícula de 24) */
  --icono-trazo:1.75; --icono-tam:1.17em;

  /* Movimiento en la web (en video: 6 · 9 · 8 · 14 · 15 · 21 · 24 fotogramas a 30 fps) */
  --mov-entrada:cubic-bezier(.05,.7,.1,1); --mov-estado:cubic-bezier(.4,0,0,1);
  --mov-salida:cubic-bezier(.3,0,.8,.15);  --mov-micro:cubic-bezier(.2,0,0,1);
  --dur-micro:150ms; --dur-fundido:200ms; --dur-salida:150ms; --dur-entrada:300ms; --dur-estado:300ms; --dur-dato:800ms;
}

@media (max-width:1023px){ :root{ --margen-web:40px; } }
@media (max-width:767px){
  :root{
    --web-h1:var(--t-42); --web-h1-trk:var(--trk-42);
    --web-h2:var(--t-30); --web-h2-trk:var(--trk-30);
    --web-h3:var(--t-19); --web-h3-trk:var(--trk-19);
    --web-bajada:var(--t-19); --web-bajada-trk:var(--trk-19);
    --web-cifra:var(--t-42); --web-cifra-trk:var(--trk-42);
    --margen-web:24px; --medianil:16px; --seccion:80px;
  }
}

:root,[data-theme="light"]{
  color-scheme:light;
  --fondo:var(--blanco);
  --superficie:var(--papel);              /* tarjetas, bandas, pantalla del teléfono */
  --elevado:var(--blanco);                /* burbujas, chips y campos dentro de una tarjeta */
  --texto:var(--tinta);
  --texto-2:var(--pizarra);               /* secundario, eyebrows y pies: cualquier tamaño */
  --texto-3:var(--apagado);               /* solo desde 24 px (o 19 px Bold) y sobre blanco */
  --borde:var(--linea);
  --borde-control:var(--apagado);         /* campos de formulario: 3,18:1 */
  --acento:var(--encendido);              /* relleno: botón, punto, barra, interruptor «ahora» */
  --acento-texto:var(--encendido);        /* solo desde 24 px o 19 px Bold */
  --acento-suave:var(--encendido-suave);  /* fondo del único elemento encendido */
  --sobre-acento:#FFFFFF;                 /* texto del botón: Bold desde 19 px */
  --control-apagado:var(--apagado);
  --control-hecho:var(--tinta);
  --telefono-marco:var(--tinta);
  --telefono-pantalla:var(--papel);
  --logo:var(--tinta);
  --logo-pie:var(--apagado);
  --trk-ajuste-titular:0; --trk-ajuste-texto:0;
  background:var(--fondo); color:var(--texto);
}

[data-theme="dark"]{
  color-scheme:dark;
  --fondo:var(--tinta);                   /* de noche, la tinta es el papel */
  --superficie:#2C2C2E;
  --elevado:#3A3A3C;
  --texto:var(--papel);
  --texto-2:#AEAEB2;
  --texto-3:var(--apagado);               /* el mismo valor que en claro */
  --borde:#3A3A3C;
  --borde-control:var(--apagado);
  --acento:#0A84FF;
  --acento-texto:#409CFF;
  --acento-suave:#1A2D43;                 /* #0A84FF al 16 % sobre la tinta */
  --sobre-acento:#FFFFFF;
  --control-apagado:var(--apagado);
  --control-hecho:var(--papel);
  --telefono-marco:#3A3A3C;               /* la pantalla sigue clara: el teléfono lleva data-theme="light" */
  --telefono-pantalla:var(--papel);
  --logo:var(--papel);
  --logo-pie:var(--apagado);
  --trk-ajuste-titular:.005em; --trk-ajuste-texto:.01em;  /* el claro sobre oscuro engorda */
  background:var(--fondo); color:var(--texto);
}
[data-theme="dark"][data-escenario]{ --fondo:#000000; background:var(--fondo); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:opacity var(--dur-fundido) linear!important}
}