/* Marca de Rifas y Tandas. ÚNICA fuente de colores, tipografías y medidas: el resto del código solo usa var(--…).
   Paleta semántica: 1 color de marca + 1 acento + neutros + estados. Si hace falta otro tono, se agrega AQUÍ
   con su uso, y aparece solo en /marca/. */
:root{
  /* Marca */
  --marca:#E4007C;          /* botones principales, enlaces, selección */
  --marca-hover:color-mix(in srgb,var(--marca) 85%,#000); /* al pasar el mouse o tocar un botón principal */
  --marca-suave:color-mix(in srgb,var(--marca) 12%,#fff); /* fondos de avisos y chips de la marca */
  --sobre-marca:#FFFFFF;      /* texto encima de --marca */
  --acento:#F7A600;           /* detalles puntuales: insignias, destacados. Nunca texto largo. Igual al de og.rs */
  --sobre-acento:#16151A;     /* texto encima de --acento */
  /* Neutros */
  --fondo:#F6F5F2;          /* fondo de página */
  --superficie:#FFFFFF;       /* tarjetas, diálogos */
  --tinta:#16151A;            /* texto principal */
  --tinta-2:#5B5862;          /* texto secundario (≥ 4.5:1 sobre --superficie) */
  --linea:#E2DCD0;            /* bordes y divisores */
  /* Estados */
  --ok:#15803D;      /* éxito */
  --aviso:#B45309;   /* atención */
  --error:#C2410C;   /* error */
  --info:#1D4ED8;    /* información */
  /* Tipografía: máximo 2 familias */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Figtree',system-ui,sans-serif;
  --t-1:2.5rem; --t-2:1.75rem; --t-3:1.25rem; --t-texto:1rem; --t-chico:.875rem;
  /* Forma */
  --radio:14px; --radio-chico:10px; --sombra:0 1px 2px rgba(22,21,26,.06),0 8px 24px -12px rgba(22,21,26,.18);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--fondo);color:var(--tinta);font:400 var(--t-texto)/1.5 var(--sans);touch-action:manipulation;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
@media (pointer:coarse){input,select,textarea{font-size:16px}}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
img{max-width:100%;height:auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}