/* Club de lealtad Asbaje — paleta y tipografía de la marca. */
:root{
  --cream:#F9F6F0; --brick:#8E1E23; --maroon:#3C0005; --deep:#5E1418;
  --red:#EE3439; --navy:#04385E; --line:rgba(60,0,5,.14);
  --ok:#1d7a4c; --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--cream); color:var(--maroon);
  font-family:"Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{ font-family:"Quicksand",system-ui,sans-serif; font-weight:300; letter-spacing:-.01em; color:var(--brick); }
h1{ font-size:clamp(1.5rem,1.2rem+1.4vw,2rem); margin:.1em 0 .3em; }
h2{ font-size:1.15rem; margin:0 0 .6rem; }
main{ max-width:560px; margin:0 auto; padding:1.2rem clamp(1rem,4vw,1.5rem) 3rem; }
main.ancho{ max-width:1040px; }
header.top{ border-bottom:1px solid var(--line); background:rgba(249,246,240,.92); position:sticky; top:0; z-index:20; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
header.top .in{ max-width:1040px; margin:0 auto; padding:.7rem clamp(1rem,4vw,1.5rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
header.top img{ height:22px; display:block; }
header.top .quien{ font-size:.82rem; opacity:.7; display:flex; align-items:center; gap:.7rem; }

.card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.2rem; box-shadow:0 6px 22px rgba(60,0,5,.06); margin-bottom:1rem; }
label{ display:block; font-size:.83rem; font-weight:700; margin:0 0 .3em; letter-spacing:.02em; }
input,select,textarea{
  width:100%; font:inherit; color:inherit; padding:.72em .9em; border-radius:10px;
  border:1px solid var(--line); background:var(--cream); margin-bottom:.9rem;
}
input:focus,select:focus{ outline:2px solid var(--brick); outline-offset:1px; }
input[type=checkbox]{ width:auto; margin:0 .5em 0 0; vertical-align:-.1em; }
.chk{ font-size:.85rem; font-weight:400; display:flex; gap:.55em; align-items:flex-start; margin-bottom:1rem; }
.chk input{ margin-top:.25em; flex:none; }

button,.btn{
  font-family:"Quicksand",system-ui,sans-serif; font-weight:700; font-size:.95rem;
  color:#fff; background:linear-gradient(135deg,var(--red),var(--brick));
  border:0; border-radius:999px; padding:.75em 1.5em; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  box-shadow:0 4px 14px rgba(142,30,35,.28); transition:transform .15s var(--ease),filter .15s;
}
button:hover{ transform:translateY(-1px); filter:brightness(1.05); }
button:active{ transform:translateY(0); }
button:disabled{ opacity:.5; cursor:not-allowed; transform:none; filter:none; }
button.ancho{ width:100%; }
button.fantasma{ background:none; color:var(--brick); box-shadow:none; border:1px solid var(--line); }
button.chico{ padding:.5em 1em; font-size:.85rem; }

.aviso{ padding:.8em 1em; border-radius:10px; font-size:.88rem; margin-bottom:1rem; }
.aviso.mal{ background:#fdecec; color:#8E1E23; border:1px solid #f3c9c9; }
.aviso.bien{ background:#e8f5ee; color:var(--ok); border:1px solid #c2e4d2; }
.oculto{ display:none !important; }

/* Progreso de visitas: el diablito de la marca. Blanco sobre casilla = pendiente,
   rojo suelto = visita cumplida. Van en rejilla de 5: dos filas en un teléfono.
   ponytail: el pendiente se distingue por `color` y por el fondo de la casilla, no por
   stroke ni filter. En WebKit el `stroke` de CSS no cruza al contenido de <use>, y un
   drop-shadow de 0.7px se pierde en una pantalla real: los diez salían invisibles. */
.progreso{ display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem .4rem; justify-items:center;
           max-width:290px; margin:1.2rem auto .7rem; }
.progreso svg{ width:100%; max-width:46px; height:auto; aspect-ratio:538/802; display:block;
               color:#fff; background:#E7D9C4; border-radius:9px; padding:2px;
               transition:color .35s var(--ease), background-color .35s var(--ease); }
.progreso svg.on{ color:#EF0303; background:none; }
@media (prefers-reduced-motion:reduce){ .progreso svg{ transition:none; } }
.grande{ font-size:2.6rem; font-family:"Quicksand",sans-serif; font-weight:300; color:var(--brick); line-height:1; }

.qr{ text-align:center; padding:1.4rem 1rem; }
.qr img{ width:min(260px,72vw); height:auto; display:block; margin:0 auto; }
.codigo{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; font-size:.95rem; opacity:.65; margin-top:.7rem; }

.datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.7rem; margin-bottom:1rem; }
.dato{ background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:.7rem .8rem; }
.dato b{ display:block; font-family:"Quicksand",sans-serif; font-weight:700; font-size:1.35rem; color:var(--brick); line-height:1.2; }
.dato span{ font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; opacity:.6; }

table{ width:100%; border-collapse:collapse; font-size:.88rem; }
th,td{ text-align:left; padding:.55em .6em; border-bottom:1px solid var(--line); }
th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; opacity:.6; font-weight:700; }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
/* podio: solo las tres primeras del top 20, no de cualquier tabla */
#top tr:nth-child(-n+3) td:first-child{ font-weight:700; color:var(--brick); }

details{ border-top:1px solid var(--line); padding-top:.8rem; margin-top:.4rem; }
summary{ cursor:pointer; font-family:"Quicksand",sans-serif; font-weight:700; color:var(--brick); font-size:.92rem; }
.scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

#video{ width:100%; border-radius:12px; background:#000; display:block; aspect-ratio:4/3; object-fit:cover; }
.premios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.5rem; }
.premios button{ font-size:.85rem; padding:.7em .6em; }
.paginacion{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
              margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--line); }
.paginacion span{ font-size:.85rem; opacity:.65; font-variant-numeric:tabular-nums; }
.paginacion button{ white-space:nowrap; }

.pie{ text-align:center; font-size:.8rem; opacity:.6; padding:1.5rem 1rem; }
.pie a{ color:var(--brick); }