/* BEGIN tokens-estudio (paleta.py) */
/* Paleta generada desde: colores de marca #3D2EFF, #0B1020, #FFFFFF. Para cambiar colores o tipografias de TODA la web, edita SOLO este bloque
   (o vuelve a ejecutar paleta.py). El resto del CSS usa siempre var(--...), nunca colores sueltos. */
:root {
  --color-fondo: #f8f7fa;
  --color-superficie: #ffffff;
  --color-texto: #181721;
  --color-texto-suave: #57556d;
  --color-borde: #dad9e2;
  --color-acento: #3d2eff;
  --color-acento-hover: #1c0aff;
  --color-sobre-acento: #ffffff;
  --color-acento-texto: #3d2eff;
  --color-marca-original: #3d2eff;
  --color-oscuro: #0b1020;
  --color-sobre-oscuro: #ffffff;
  --color-sobre-oscuro-suave: #c2c1cd;
  --color-acento-sobre-oscuro: #766bff;
  --fuente-titulos: 'Inter Display', system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-texto: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* escala tipografica fluida (movil → escritorio) */
  --texto-xs: clamp(.78rem, .75rem + .15vw, .85rem);
  --texto-s: clamp(.9rem, .86rem + .2vw, 1rem);
  --texto-m: clamp(1rem, .95rem + .25vw, 1.125rem);
  --texto-l: clamp(1.2rem, 1.05rem + .7vw, 1.6rem);
  --texto-xl: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  --texto-xxl: clamp(2.3rem, 1.4rem + 4.2vw, 5rem);
  /* espacios, radios, sombras */
  --espacio-s: clamp(.75rem, .6rem + .5vw, 1rem);
  --espacio-m: clamp(1.25rem, 1rem + 1vw, 2rem);
  --espacio-l: clamp(2.5rem, 1.8rem + 3vw, 5rem);
  --espacio-xl: clamp(4rem, 2.5rem + 6vw, 9rem);
  --radio-s: 8px; --radio-m: 16px; --radio-l: 28px;
  --sombra-s: 0 2px 8px rgb(0 0 0 / .06); --sombra-m: 0 12px 34px rgb(0 0 0 / .10);
  --ancho-max: 1240px;
}
/* END tokens-estudio */

/* Detalle: móvil dibujado, placa Toque y avisos */
:root {
  --color-oscuro-2: #121731;
  --deco-muesca: #05070d;
  --deco-movil-2: #0d1120;
  --color-ok: #13a35a;
  --deco-movil-3: #23283c;
  --deco-movil-1: #2a2f45;
  --deco-placa-texto: #4a4860;
  --color-aviso-texto: #6b4a00;
  --deco-punto: #d4d2dc;
  --deco-placa-3: #d9d6e6;
  --deco-placa-2: #eceaf4;
  --color-aviso-borde: #f0d58c;
  --deco-barra: #f3f2f6;
  --deco-pantalla: #f8f7f4;
  --color-aviso-fondo: #fff4d6;
  --blanco: #ffffff;
}

/* Detalle: móvil dibujado, placa Toque y avisos */
:root {
  --color-oscuro-2: #121731;
  --deco-muesca: #05070d;
  --deco-movil-2: #0d1120;
  --color-ok: #13a35a;
  --deco-movil-3: #23283c;
  --deco-movil-1: #2a2f45;
  --deco-placa-texto: #4a4860;
  --color-aviso-texto: #6b4a00;
  --deco-punto: #d4d2dc;
  --deco-placa-3: #d9d6e6;
  --deco-placa-2: #eceaf4;
  --color-aviso-borde: #f0d58c;
  --deco-barra: #f3f2f6;
  --deco-pantalla: #f8f7f4;
  --color-aviso-fondo: #fff4d6;
  --blanco: #ffffff;
}

/* Transparencias (líneas y velos) */
:root {
  --alfa-1: rgb(0 0 0 / .12);
  --alfa-2: rgb(0 0 0 / .45);
  --alfa-3: rgb(0 0 0 / .5);
  --alfa-4: rgb(248 247 250 / .88);
  --alfa-5: rgb(255 255 255 / .045);
  --alfa-6: rgb(255 255 255 / .06);
  --alfa-7: rgb(255 255 255 / .12);
  --alfa-8: rgb(255 255 255 / .14);
  --alfa-9: rgb(255 255 255 / .28);
  --alfa-10: rgb(255 255 255 / .3);
  --alfa-11: rgb(255 255 255 / .96);
  --alfa-12: rgb(61 46 255 / .07);
  --alfa-13: rgb(61 46 255 / .15);
}