:root {
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;   /* controles: botón, input, badge */
  --radius-md: 10px;  /* tarjetas, paneles, diálogos */
  --radius-lg: 16px;  /* superficies grandes, hero */
  --radius-pill: 999px;
  --radius-mark: 22%; /* el cuadro del icono de marca */
}