/* Triviando · estilos comunes (marca "Moderno vibrante") */
:root {
  --violeta: #5B2EFF;
  --violeta-oscuro: #4A22D9;
  --violeta-claro: #E6E0FF;
  --amarillo: #FFD23F;
  --rosa: #FF5C8A;
  --noche: #1B1036;
  --panel: #2C1E55;
  --crema: #FFF7E8;
  --blanco: #FFFFFF;
  --gris: #6B6585;
  --linea: #E4E0F0;
  --ok: #138A4A;
  --peligro: #C8243F;
  --fuente: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--fuente); color: var(--noche); background: var(--crema); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Logo: "triviand" + la "o" convertida en "?" */
.logo { --s: 40px; display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1; }
.logo-word { font-size: var(--s); font-weight: 800; letter-spacing: calc(var(--s) * -0.045); color: currentColor; }
.logo-q {
  width: calc(var(--s) * 0.74); height: calc(var(--s) * 0.74); margin-left: calc(var(--s) * 0.03);
  border-radius: 50%; background: var(--amarillo); color: var(--noche);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(var(--s) * 0.56); font-weight: 800; line-height: 1;
  transform: translateY(calc(var(--s) * 0.06));
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }