@font-face { font-family: "Manual"; src: url("assets/Manual-Compressed-Black.otf") format("opentype"); font-display: swap; }

:root {
  color-scheme: light;
  --rojo: #EB3924;
  --rojo-oscuro: #C2382E;
  --amarillo: #FFCE57;
  --naranja: #FAAB3E;
  --verde: #82C671;
  --crema: #FEFCF2;
  --crema-2: #F6F0DC;
  --negro: #222222;
  --marron: #3F1211;
  --gris: #6E6A62;
  --linea: #E4DCC4;
  --titulo: "Manual", Impact, "Arial Narrow", sans-serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radio: 14px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--crema); color: var(--negro); font: 400 16px/1.45 var(--texto); }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.oculto { display: none !important; }

.titulo { font-family: var(--titulo); font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: .005em; margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--rojo); color: var(--crema); font-weight: 700; font-size: 17px; text-decoration: none;
}
.btn:hover { background: var(--rojo-oscuro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.secundario { background: transparent; color: var(--negro); box-shadow: inset 0 0 0 2px var(--negro); }
.btn.secundario:hover { background: var(--negro); color: var(--crema); }
.btn.whatsapp { background: #1F8F4E; }
.btn.whatsapp:hover { background: #18723E; }
.btn.chico { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* Línea de puntos de cheddar: el motivo de la marca */
.puntos {
  height: 10px; border: 0; margin: 0;
  background: radial-gradient(circle, var(--marron) 3px, transparent 3.5px) 0 50% / 16px 10px repeat-x;
}
.puntos.amarillos { background-image: radial-gradient(circle, var(--amarillo) 3px, transparent 3.5px); }

.paso { display: inline-flex; align-items: center; border: 0; background: var(--crema-2); border-radius: 999px; }
.paso button { width: 40px; height: 40px; border: 0; background: none; font-size: 22px; font-weight: 700; border-radius: 50%; }
.paso button:disabled { opacity: .3; cursor: default; }
.paso output { min-width: 26px; text-align: center; font-weight: 700; }

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