:root {
  --rojo: #9b0000;
  --rojo-vivo: #d10a0a;
  --amarillo: #ffc400;
  --amarillo-oscuro: #e0aa00;
  --hazard: repeating-linear-gradient(-45deg, var(--amarillo) 0 14px, #0d0d0d 14px 28px);
  --rojo-oscuro: #6e0000;
  --negro: #0d0d0d;
  --carbon: #1b1b1b;
  --gris: #e0e0e0;
  --gris-medio: #9a9a9a;
  --blanco: #ffffff;
  --ok: #1f9d55;
  --aviso: #e6a100;
  --radio: 10px;
  --sombra: 0 8px 24px rgba(0, 0, 0, 0.35);
  --titulos: 'Barlow Condensed', Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Arial Black', sans-serif;
  --texto: 'Barlow', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.55;
  color: var(--blanco);
  background: var(--negro);
}
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--titulos);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1;
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 26px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.btn[hidden] { display: none; }
.btn:active { transform: scale(0.97); }
.btn-rojo { background: var(--rojo-vivo); color: var(--blanco); }
.btn-rojo:hover { background: var(--rojo); }
.btn-amarillo { background: var(--amarillo); color: #111; box-shadow: 0 8px 22px rgba(255, 196, 0, 0.28); }
.btn-amarillo:hover { background: #ffd23a; transform: translateY(-2px); }
.btn-borde { border-color: var(--blanco); color: var(--blanco); background: transparent; }
.btn-borde:hover { background: var(--blanco); color: var(--negro); }
.btn-gris { background: var(--gris); color: var(--negro); }
.btn-gris:hover { background: var(--blanco); }
.btn-chico { min-height: 40px; padding: 6px 16px; font-size: 1rem; }

.tarjeta {
  background: var(--carbon);
  border-radius: var(--radio);
  padding: 20px;
}

:focus-visible { outline: 3px solid var(--aviso); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}