/* Espaciado en base 8, radios, filetes, sombra y movimiento */
:root{
  --esp-4:4px; /* @kind spacing */
  --esp-8:8px; /* @kind spacing */
  --esp-12:12px; /* @kind spacing */
  --esp-16:16px; /* @kind spacing */
  --esp-24:24px; /* @kind spacing */
  --esp-32:32px; /* @kind spacing */
  --esp-48:48px; /* @kind spacing */
  --esp-64:64px; /* @kind spacing */
  --esp-96:96px; /* @kind spacing */
  --esp-128:128px; /* @kind spacing */

  --seccion-y:clamp(64px, 40px + 6.4vw, 120px); /* @kind spacing */
  --contenedor:1200px; /* @kind spacing */
  --margen-lateral:clamp(20px, 18px + .5vw, 24px); /* @kind spacing */
  --columnas:12; /* @kind other */
  --medianil:24px; /* @kind spacing */

  /* Interfaz amable, ilustración rigurosa */
  --radio-boton:8px; /* @kind radius */
  --radio-campo:8px; /* @kind radius */
  --radio-tarjeta:12px; /* @kind radius */
  --radio-imagen:12px; /* @kind radius */
  --radio-pildora:20px; /* @kind radius */
  --radio-ilustracion:0; /* @kind radius */
  --radio-sangre:0; /* @kind radius */

  --filete:1px solid var(--linea); /* @kind other */
  --filete-fuerte:1px solid var(--tinta); /* @kind other */
  --trazo-circulo:1.25px; /* @kind other */
  --trazo-axonometria:1.1px; /* @kind other */

  --circulo-numero:40px; /* @kind spacing */
  --circulo-numero-pequeno:36px; /* @kind spacing */
  --circulo-numero-grande:44px; /* @kind spacing */
  --vineta-tamano:7px; /* @kind spacing */
  --circulo-control:44px; /* @kind spacing */

  --sombra-flotante:0 6px 24px rgb(27 29 23 / .08); /* @kind shadow */
  --anillo-foco:0 0 0 2px var(--foco); /* @kind shadow */

  --mov-duracion:250ms; /* @kind other */
  --mov-curva:cubic-bezier(.2,0,0,1); /* @kind other */
}