/* ===========================================================================
   rfs.corder.pro — hoja única (sitio público + panel)
   ---------------------------------------------------------------------------
   Sistema visual de "Rifas entre amigos Los Güeros" (versión "sticker",
   elegida el 2026-09-29 entre 8 propuestas): gris cemento, negro y el verde
   del logo. La foto del premio va en un marco blanco ligeramente girado y el
   logo encima como calcomanía; los títulos públicos usan Knewave, la letra de
   brocha que más se parece al logo.

   Sin etiquetas "eyebrow" en mayúsculas con puntito ni frases de relleno: el
   título dice qué es y la fecha del sorteo se escribe como se dice.

   Dos verdes con trabajo distinto: --accent (el del logo, para fondos, con
   texto blanco) y --accent-text (para texto verde sobre claro). --forest es
   el negro del pie y de la banda de cierre.

   Tema claro fijo, sin bloque de modo oscuro. Ninguna regla consulta el tema:
   todo el color sale de los tokens de :root.

   Orden: tokens → base → botones → formularios → cromo → sitio → panel.
   ======================================================================== */

:root{
  /* --bg es el suelo (lo más lejano al lector) y --surface lo más cercano.
     Esa diferencia de luminosidad es lo único que hace flotar una tarjeta, así
     que no son intercambiables: para hundir algo se usa --bg, nunca --surface-2. */
  --bg:#ecece8;
  --surface:#fbfbf9;
  --surface-2:#f1f1ed;
  --surface-3:#e1e1db;
  --line:#dcdcd5;
  --line-soft:#e8e8e2;
  /* Borde de los CONTROLES (campos, botones fantasma, celdas de la cuadrícula).
     Más oscuro que --line a propósito: un campo blanco sobre tarjeta blanca se
     delimita sólo por su borde, y con --line daba 1.31:1 — WCAG pide 3:1 para
     el contorno de un control. Éste da 3.16:1. --line sigue siendo el de las
     separaciones decorativas, donde ese mínimo no aplica. */
  --field-line:#7f7f76;

  /* Neutros cálidos, como el cemento de la foto. Pasan AA sobre --surface. */
  --ink:#121212;
  --ink-dim:#44443f;
  --ink-faint:#62625b;

  /* --accent es el verde del logo (#1f9b3f) un tono más oscuro: con el
     original, el texto blanco de los botones daba 3.6:1; con #178534 da 4.7:1.
     Como texto sobre el gris de fondo se usa --accent-text (5.5:1). */
  --accent:#178534;
  --accent-text:#146c28;
  --accent-deep:#126426;
  --accent-ink:#ffffff;
  --accent-soft:rgba(23,133,52,.10);
  --accent-line:rgba(23,133,52,.45);

  /* Negro para superficies grandes con texto claro (pie, banda de cierre). */
  --forest:#121212;
  --forest-2:#1d1d1b;
  --forest-dim:#d4d4cc;

  --warning:#b45309;
  --warning-soft:rgba(180,83,9,.10);
  --danger:#b91c1c;
  --danger-soft:rgba(185,28,28,.10);

  --wrap:1120px;
  --radius:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(18,18,18,.05);
  --shadow:0 12px 30px -18px rgba(18,18,18,.22);

  --font:'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --title:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --brush:'Knewave', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);

  /* Fija los controles que dibuja el navegador (inputs, selects, barras de
     scroll). Con "light dark", un visitante en modo oscuro vería la página
     blanca pero los campos del formulario en gris oscuro. */
  color-scheme:light;
}

/* ---------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------ */

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--title); margin:0 0 .5rem; line-height:1.12; letter-spacing:-.015em; text-wrap:balance }
h1{ font-size:clamp(1.9rem,1.4rem + 2.2vw,2.8rem); font-weight:800 }
h2{ font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem); font-weight:800 }
h3{ font-size:1.05rem; font-weight:700 }
/* Títulos del sitio público en brocha (la letra del logo). El panel se queda
   con Archivo: ahí se trabaja, no se vende. `.site-header ~ main` sólo existe
   en el layout público. */
.site-header ~ main :is(h1,h2){ font-family:var(--brush); font-weight:400; letter-spacing:.01em; line-height:1.05 }
p{ margin:0 0 1rem }
p:last-child{ margin-bottom:0 }

a{ color:var(--accent-text); text-underline-offset:2px }
a:hover{ color:var(--accent-deep) }
img{ max-width:100%; height:auto; display:block }

.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.muted{ color:var(--ink-dim) }

:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; border-radius:4px }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--surface); color:var(--ink); padding:.75rem 1rem;
  border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{ left:0 }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto }

/* Los anclas (#comprar, #datos, #como-funciona) caían debajo del encabezado
   fijo, que mide ~3.6 rem: el título de la sección quedaba tapado. */
[id]{ scroll-margin-top:4.5rem }
.section{ padding-block:clamp(2.2rem,1.6rem + 2.4vw,3.4rem) }
.section__head{ max-width:58ch; margin-bottom:1.5rem }
.section__head p{ color:var(--ink-dim); margin:0 }
.section__head h2{ font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem) }

/* ---------------------------------------------------------------------------
   Botones
   ------------------------------------------------------------------------ */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:700; font-size:.92rem; line-height:1.2;
  text-decoration:none; cursor:pointer;
  border:1px solid transparent; border-radius:10px; padding:14px 22px;
  transition:transform 140ms var(--ease-out), background 160ms var(--ease-out),
             border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.btn:active{ transform:scale(.97) }

.btn--primary{ background:var(--accent); color:var(--accent-ink); box-shadow:0 12px 26px -16px rgba(23,133,52,.45) }
/* El hover conserva la tinta oscura: blanco sobre --accent-deep da 3.3:1. */
.btn--primary:hover{ background:var(--accent-deep); color:var(--accent-ink) }

.btn--ghost{ background:var(--surface); color:var(--ink); border-color:var(--field-line) }
.btn--ghost:hover{ border-color:var(--accent-line); color:var(--accent-text) }

.btn--danger{ background:var(--danger); color:#fff }
.btn--danger:hover{ filter:brightness(1.08); color:#fff }

.btn--lg{ padding:16px 26px; font-size:1rem }
.btn--sm{ padding:9px 15px; font-size:.82rem; border-radius:8px }
.btn--block{ width:100% }

@media (prefers-reduced-motion: reduce){
  .btn{ transition:none }
  .btn:active{ transform:none }
}

/* ---------------------------------------------------------------------------
   Formularios
   ------------------------------------------------------------------------ */

.field{ display:block; margin-bottom:1rem }
.field__label{ display:block; font-size:.78rem; font-weight:600; margin-bottom:.4rem }
.field__optional{ font-weight:400; color:var(--ink-faint) }
.field__help{ display:block; font-size:.8rem; color:var(--ink-faint); margin-top:.35rem }

input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="number"],input[type="password"],input[type="search"],
input[type="datetime-local"],input[type="file"],select,textarea{
  width:100%; font:inherit;
  padding:12px 13px; border-radius:10px;
  border:1px solid var(--field-line); background:var(--surface); color:var(--ink);
  transition:border-color 160ms var(--ease-out);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{ border-color:var(--accent-deep); outline:none }
textarea{ resize:vertical; min-height:6rem }
textarea.mono{ font-family:var(--mono); font-size:.86rem; line-height:1.55 }
input::placeholder,textarea::placeholder{ color:var(--ink-faint) }
input:disabled,input[readonly],select:disabled{ background:var(--surface-2); color:var(--ink-faint); cursor:not-allowed }

.fields{ display:grid; gap:0 }
@media (min-width:40rem){
  .fields{ grid-template-columns:1fr 1fr; gap:0 1rem }
  .fields .field:first-child{ grid-column:1 / -1 }
}

/* ---------------------------------------------------------------------------
   Avisos, etiquetas y contenedores
   ------------------------------------------------------------------------ */

.alert{
  padding:.9rem 1.1rem; border-radius:var(--radius);
  border:1px solid transparent; margin:1rem 0; font-size:.92rem;
}
.alert--error{ background:var(--danger-soft); border-color:rgba(185,28,28,.35); color:var(--danger) }
.alert--success{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent-text) }
.alert--warning{ background:var(--warning-soft); border-color:rgba(180,83,9,.35); color:var(--warning) }
.alert a{ color:inherit }

.badge{
  display:inline-block; padding:.22rem .65rem; border-radius:999px;
  font-size:.75rem; font-weight:700; line-height:1.4; white-space:nowrap;
}
.badge-success{ background:var(--accent-soft); color:var(--accent-text) }
.badge-warning{ background:var(--warning-soft); color:var(--warning) }
.badge-danger{ background:var(--danger-soft); color:var(--danger) }
.badge-neutral{ background:var(--surface-2); color:var(--ink-dim) }

.tag{
  display:inline-block; margin:0 0 .75rem; padding:.24rem .75rem; border-radius:999px;
  background:var(--surface-2); color:var(--ink-dim);
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
}
.tag--live{ background:var(--accent-soft); color:var(--accent-text) }
.tag--done{ background:var(--warning-soft); color:var(--warning) }

.notice,.panel,.help{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.25rem,1rem + 1vw,2rem);
  margin-bottom:1.5rem; box-shadow:var(--shadow-sm);
}
.notice h1,.notice h2,.panel h2,.help h2{ margin-top:0 }

.empty{
  padding:2rem 1rem; text-align:center; color:var(--ink-dim);
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius-lg);
}

.back-link{ margin-top:1.5rem }

.prose > :first-child{ margin-top:0 }
.prose h2{ margin-top:2rem }
.prose ul,.prose ol{ padding-left:1.25rem }
.prose li{ margin-bottom:.35rem }

/* ---------------------------------------------------------------------------
   Cabecera, pie y WhatsApp
   ------------------------------------------------------------------------ */

.site-header{
  position:sticky; top:0; z-index:50;
  /* Blanco sólido, sin backdrop-filter: en teléfonos de gama media el
     desenfoque sobre un elemento fijo cuesta cuadros al hacer scroll por la
     cuadrícula de números, que es justo donde más se desplaza. */
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding-block:11px; min-height:3.5rem;
}
.site-header__brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--title); font-weight:800; font-size:.98rem; line-height:1.1;
  letter-spacing:.01em; text-transform:uppercase; text-decoration:none;
  color:var(--ink);
}
/* El logo sobresale del encabezado a propósito (margen negativo): a 44 px de
   alto la corona y el sello se leen; a la altura exacta de la barra, no. */
.site-header__logo{ width:62px; height:auto; margin-block:-12px; flex:none }
.site-header__name{ max-width:13rem }
.site-header__brand em{ font-style:normal; color:var(--accent-text) }
@media (max-width:40rem){ .site-header__name{ display:none } }
.site-header__nav{ display:flex; gap:22px; font-size:.86rem; font-weight:500 }
.site-header__nav a{ color:var(--ink-dim); text-decoration:none; transition:color 160ms var(--ease-out) }
.site-header__nav a:hover{ color:var(--accent-text) }

@media (max-width:820px){ .site-header__nav{ display:none } }

/* Pie en verde profundo: cierra la página con el mismo color que la abre en
   las bandas, pero sin competir con los botones verde claro. */
.site-footer{ background:var(--forest); color:var(--forest-dim); margin-top:3rem; padding-block:32px 92px }
.site-footer__inner{ display:flex; justify-content:space-between; align-items:center; gap:16px 24px; flex-wrap:wrap; font-size:.84rem }
.site-footer__brand{ display:flex; align-items:center; gap:14px }
/* Ficha blanca: el logo es negro y verde y sobre --forest se perdería. */
/* Esquinas redondeadas y no círculo: el sello del patrocinador sobresale del
   aro del logo y un círculo lo cortaba. */
.site-footer__logo{ width:88px; height:88px; padding:6px; object-fit:contain; background:#fff; border-radius:18px; flex:none }
.site-footer__name{ font-family:var(--title); font-weight:800; text-transform:uppercase; color:#fff; margin:0 }
.site-footer__sponsor{ margin:2px 0 0; color:var(--forest-dim) }
.site-footer__sponsor strong{ color:#fff }
.site-footer__name em{ font-style:normal; color:#4ade80 }
.site-footer__links{ display:flex; flex-wrap:wrap; gap:1rem }
.site-footer a{ color:var(--forest-dim); text-decoration:none }
.site-footer a:hover{ color:#fff; text-decoration:underline }
.site-footer :focus-visible{ outline-color:#fff }
.site-footer__credit{ margin:0 }
/* El pie ya no lleva margen propio cuando lo precede la banda de cierre,
   que es del mismo verde: si no, queda una franja blanca entre los dos. */
main:has(> .closing:last-child) + .site-footer{ margin-top:0 }

.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:46;
  width:54px; height:54px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
  box-shadow:0 14px 28px -14px rgba(0,0,0,.45);
  transition:transform 180ms var(--ease-out), bottom 320ms var(--ease-out);
}
.wa-float svg{ width:26px; height:26px }
.wa-float span{ display:none }
.wa-float:active{ transform:scale(.93) }
body.has-sel .wa-float{ bottom:92px }

@media (prefers-reduced-motion: reduce){ .wa-float{ transition:none } }

/* ---------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------
   Versión "sticker": la foto del premio manda (columna más ancha), en un
   marco blanco girado 1.5°, con el logo pegado encima como calcomanía. Los
   giros son pequeños a propósito: más de 2° en la foto se ve descuidado.
   En móvil la foto va primero: es lo que vende.
   ------------------------------------------------------------------------ */

.hero{ background:var(--bg); border-bottom:1px solid var(--line) }
/* Sin `width:100%` a propósito: este div también lleva .wrap, que ya define
   `width:min(100% - 2.5rem, var(--wrap))`. Como .wrap se declara antes y tiene
   la misma especificidad, un width aquí gana y deja el hero pegado al borde. */
.hero__inner{
  display:grid; gap:clamp(1.75rem,1rem + 3vw,3.5rem); align-items:center;
  padding-block:clamp(1.5rem,1rem + 2.5vw,3.5rem);
}
@media (min-width:52rem){
  .hero__inner{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr) }
  .hero__media{ order:2 }
}

/* El margen de arriba y de la izquierda es el espacio donde sobresale la
   calcomanía: sin él se saldría del .wrap y habría scroll horizontal. */
.hero__media{ position:relative; margin:34px 0 0 30px }
.hero__frame{
  position:relative; z-index:1; overflow:hidden;
  aspect-ratio:4 / 3; border-radius:calc(var(--radius-lg) + 6px);
  background:var(--surface-2); border:10px solid #fff;
  transform:rotate(1.5deg);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
}
.hero__sticker{
  position:absolute; z-index:2; left:-30px; top:-34px;
  width:clamp(130px, 17vw, 220px); height:auto; padding:clamp(8px,1vw,14px);
  background:#fff; border-radius:clamp(20px,2.4vw,30px);
  transform:rotate(-8deg);
  box-shadow:0 18px 36px -18px rgba(0,0,0,.55);
  pointer-events:none;
}
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:50% 50% }

.hero__media-empty{
  width:100%; height:100%; display:grid; place-items:center;
  color:var(--accent-line);
}
.hero__media-empty svg{ width:min(38%,200px); height:auto }

.hero__title{ font-size:clamp(2.6rem,5vw,4rem); line-height:.98; max-width:14ch; margin:0 }
/* Trazo verde bajo el título, como el del logo bajo "LOS GÜEROS". */
.hero__title::after{
  content:""; display:block; width:min(62%,18rem); height:14px; margin-top:12px;
  background:var(--accent); border-radius:8px 2px 10px 3px; transform:rotate(-2deg);
}
.hero__title em{ font-style:normal; color:var(--accent-text); white-space:nowrap }
.hero__text{ color:var(--ink-dim); font-size:1.05rem; line-height:1.55; max-width:46ch; margin-top:18px }
.hero__draw{ margin:10px 0 0; font-weight:600; color:var(--ink) }
/* Fecha del sorteo como hoja de calendario (opción B, 2026-10-03). */
.drawdate{
  display:flex; align-items:center; gap:14px; margin:18px 0 0; padding:12px 14px;
  border-radius:18px; background:var(--surface); border:1px solid var(--line);
  box-shadow:0 14px 30px -22px rgba(0,0,0,.45);
}
.drawdate__cal{ flex:none; width:64px; border-radius:12px; overflow:hidden; text-align:center; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.08) }
.drawdate__mes{ display:block; background:var(--accent); color:#fff; font-weight:800; font-size:.72rem; letter-spacing:.12em; padding:4px 0 }
.drawdate__dia{ display:block; font-family:var(--title); font-weight:800; font-size:1.9rem; line-height:1; padding:6px 0 7px; color:#121212 }
.drawdate__txt{ display:grid; gap:2px; line-height:1.25; min-width:0 }
.drawdate__txt small{ font-size:.8rem; color:var(--ink-faint); font-weight:600; text-transform:uppercase; letter-spacing:.06em }
.drawdate__txt b{ font-family:var(--title); font-size:1.08rem }
.drawdate__txt span{ font-size:.9rem; color:var(--ink-dim) }
.hero__cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px }

/* Precio y avance dentro del hero: lo primero que se pregunta un comprador es
   cuánto cuesta y cuántos quedan, y antes había que bajar a la franja. */
.hero__meter{
  display:flex; align-items:center; gap:1rem 1.5rem; flex-wrap:wrap;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
}
.hero__price{ margin:0; line-height:1.1 }
.hero__price b{ display:block; font-family:var(--title); font-size:1.6rem; font-weight:800; color:var(--accent-text) }
.hero__price span{ font-size:.85rem; color:var(--ink-faint) }
.hero__meter .progress{ flex:1 1 14rem; margin:0 }

/* Tarjeta de montos (2026-10-03): oscura como la máquina de la suerte y la
   banda "Elige tus boletos", al estilo de la lista de precios de rfsgdl.com.
   Precio arriba, pirámide debajo, y "Ya compré" como enlace discreto. */
.hero__meter--card{
  display:grid; gap:14px; justify-items:center; text-align:center;
  margin-top:24px; padding:22px clamp(12px,3.5vw,24px) 18px; border:0;
  background:#121212; color:#fff; border-radius:24px;
  box-shadow:0 22px 40px -26px rgba(0,0,0,.6), inset 0 0 0 3px #1f1f1d;
}
.hero__meter-title{ margin:0; font-family:var(--title); font-weight:800; font-size:1.25rem; line-height:1.15 }
.hero__meter--card .hero__price{ display:flex; align-items:baseline; gap:.45rem; margin-top:-6px }
.hero__meter--card .hero__price b{ display:inline; font-size:1.05rem; color:#4ade80 }
.hero__meter--card .hero__price span{ font-size:.92rem; color:rgba(255,255,255,.7) }
.hero__meter--card .hero__pyramid{ width:100%; margin-top:2px }
/* Base 0 y tope de ancho: en un teléfono de 320 px las hileras de 4 y 5 se
   reparten el ancho en vez de empujar la tarjeta fuera de la pantalla. */
.hero__meter--card .qty__row{ gap:.4rem }
.hero__meter--card .qty__preset{ flex:1 1 0; max-width:5.4rem; overflow:hidden }
.hero__meter--card .qty__preset small{ overflow-wrap:anywhere }
@media (max-width:23rem){
  .hero__meter--card{ padding-inline:10px }
  .hero__meter--card .qty__row{ gap:.3rem }
  .hero__meter--card .qty__preset{ padding:8px 2px; border-radius:9px }
  .hero__meter--card .qty__preset b{ font-size:.82rem }
  .hero__meter--card .qty__preset small{ font-size:.6rem }
}
.hero__meter--card .qty__preset{ background:#fbfbf9; border-color:#fbfbf9; color:#121212 }
.hero__meter--card .qty__preset small{ color:#55554f }
.hero__meter--card .qty__preset:hover{ border-color:#4ade80; color:#121212 }
.hero__meter--card .qty__preset.is-active{ background:var(--accent); border-color:#4ade80; color:#fff }
.hero__meter--card .qty__preset.is-active small{ color:#fff }
.hero__meter--card .qty__preset:active{ transform:scale(.96) }
.hero__pay{ display:flex; align-items:center; justify-content:center; gap:8px; margin:4px 0 0; font-size:.85rem; color:rgba(255,255,255,.7) }
.hero__done{ margin:2px 0 0; font-size:.9rem }
.hero__done a{ color:rgba(255,255,255,.78); text-underline-offset:3px }
.hero__done a:hover{ color:#fff }
.hero__meter--card :focus-visible{ outline:2px solid #4ade80; outline-offset:2px }

/* Franja de cifras bajo el hero */
.facts{ background:var(--surface); border-bottom:1px solid var(--line) }
/* auto-fit y no repeat(4): la cifra de días desaparece si no hay fecha de
   sorteo o si ya se sorteó, y con 4 columnas fijas quedaba un hueco al final. */
.facts__inner{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:18px; padding-block:18px }
.fact b{ display:block; font-family:var(--title); font-size:1.35rem; font-weight:800 }
.fact span{ font-size:.85rem; color:var(--ink-faint) }
.fact--hot b{ color:var(--accent-text) }

@media (max-width:30rem){ .facts__inner{ grid-template-columns:repeat(2,1fr) } }

/* Patrocinio: una franja sobria bajo las cifras, no un anuncio. */
.sponsor{ background:var(--surface); border-bottom:1px solid var(--line) }
.sponsor__inner{ display:flex; align-items:center; justify-content:center; gap:14px 20px; flex-wrap:wrap; padding-block:14px }
.sponsor__label{ margin:0; font-size:.9rem; color:var(--ink-faint) }
.sponsor__img{ width:170px; height:auto }

/* --- Galería del premio (fotos en public/uploads/rifa/galeria) ----------- */
.gallery__grid{ list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)) }
/* Con pocas fotos (2 o 3) llenan el ancho; con muchas, se acomodan en filas. */
.gallery__item{ display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--surface-2); box-shadow:var(--shadow-sm); outline-offset:3px }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease }
.gallery__item:hover img{ transform:scale(1.04) }
.gallery__item:active img{ transform:scale(.98); transition-duration:.1s }
.lightbox{ border:0; padding:0; background:transparent; max-width:min(96vw,1400px); max-height:92vh; overflow:visible }
.lightbox::backdrop{ background:rgba(10,10,10,.88) }
.lightbox__img{ display:block; max-width:min(96vw,1400px); max-height:92vh; width:auto; height:auto; border-radius:var(--radius) }
.lightbox__btn{ position:fixed; width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:28px; line-height:1; display:grid; place-items:center }
.lightbox__btn--close{ top:16px; right:16px }
.lightbox__btn--prev{ left:16px; top:50%; transform:translateY(-50%) }
.lightbox__btn--next{ right:16px; top:50%; transform:translateY(-50%) }
.lightbox__btn[hidden]{ display:none }
@media (prefers-reduced-motion:reduce){ .gallery__item img{ transition:none } }

/* ---------------------------------------------------------------------------
   Bandas de sección — el elemento que más define la marca
   ------------------------------------------------------------------------ */

.band{ background:var(--forest); color:#fff }
.band__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-block:14px }
/* Verde claro sobre negro: el --accent se ve apagado ahí (3.9:1); éste da 9:1. */
.band h2{ font-size:1.5rem; margin:0; color:#4ade80 }
.band .note{ font-size:.85rem; color:var(--forest-dim) }

/* ---------------------------------------------------------------------------
   Cómo participar
   ---------------------------------------------------------------------------
   Lista ordenada de verdad (<ol>), no tres tarjetas iguales: los pasos se
   leen en secuencia y el separador vertical dice "después" sin flechas.
   ------------------------------------------------------------------------ */

.steps{
  list-style:none; margin:0; padding:0; counter-reset:paso;
  display:grid; gap:1.25rem;
}
@media (min-width:48rem){
  .steps{ grid-template-columns:repeat(3,1fr); gap:0 }
  .steps__item + .steps__item{ border-left:1px solid var(--line); }
  .steps__item{ padding-inline:1.5rem }
  .steps__item:first-child{ padding-left:0 }
}
.steps__item{ counter-increment:paso; display:grid; grid-template-columns:auto 1fr; gap:.25rem 1rem; align-items:start }
.steps__item::before{
  content:counter(paso);
  grid-row:span 2;
  font-family:var(--brush); font-size:2.2rem; line-height:.9;
  color:var(--accent-text);
}
.steps__item h3{ margin:0; font-size:1.02rem }
.steps__item p{ margin:0; color:var(--ink-dim); font-size:.93rem; line-height:1.5 }

/* Cómo sale el ganador: lista numerada con el número en brocha, como los
   pasos, pero en una tarjeta: es la parte que la gente vuelve a leer. */
.rule__list{
  list-style:none; margin:0; padding:clamp(1rem,.8rem + 1vw,1.5rem); counter-reset:regla;
  display:grid; gap:1rem; max-width:48rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
}
/* El texto de cada renglón va en un <div>: sin él, cada nodo (strong, texto,
   span) sería un elemento suelto de la rejilla y se acomodaba en otra celda. */
.rule__list li{ counter-increment:regla; display:grid; grid-template-columns:2rem 1fr; gap:.75rem; color:var(--ink-dim); line-height:1.5 }
.rule__list li::before{ content:counter(regla); font-family:var(--brush); font-size:1.8rem; line-height:1; color:var(--accent-text) }
.rule__list strong{ color:var(--ink) }
.rule__list .mono{ font-weight:700; color:var(--ink) }

.winner__draw{ list-style:none; margin:1rem auto 0; padding:0; display:grid; gap:.3rem; font-size:.95rem; color:var(--ink-dim) }

/* Banda de cierre en verde profundo, pegada al pie. */
.closing{ background:var(--forest); color:#fff; margin-top:3rem }
.closing__inner{
  display:grid; gap:1.25rem; align-items:center;
  padding-block:clamp(2rem,1.5rem + 2vw,3rem);
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (min-width:48rem){ .closing__inner{ grid-template-columns:1fr auto } }
.closing h2{ color:#fff; margin-bottom:.35rem }
.closing p{ color:var(--forest-dim); margin:0; max-width:52ch }
.closing .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5) }
.closing .btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--forest) }
.closing :focus-visible{ outline-color:#fff }

/* ---------------------------------------------------------------------------
   Progreso, ganador
   ------------------------------------------------------------------------ */

.progress{ margin-bottom:1.5rem }
.progress__bar{
  height:.625rem; border-radius:999px; overflow:hidden;
  /* Hundido: --bg, el suelo. Con --surface-2 el riel se confundiría con la tarjeta. */
  background:var(--bg); border:1px solid var(--line);
}
.progress__bar span{ display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .4s ease }
.progress__legend{ font-size:.86rem; color:var(--ink-dim); margin:.5rem 0 0 }

@media (prefers-reduced-motion: reduce){ .progress__bar span{ transition:none } }

.winner{
  text-align:center; padding:2rem 1rem;
  background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:var(--radius-lg);
}
.winner__label{ font-size:.95rem; font-weight:600; color:var(--accent-text); margin-bottom:.5rem }
.winner__number{ font-family:var(--mono); font-size:clamp(2.5rem,2rem + 5vw,4rem); font-weight:700; line-height:1; margin-bottom:.5rem }
.winner__name{ font-size:1.125rem; font-weight:600; margin:0 }

/* ---------------------------------------------------------------------------
   Compra
   ------------------------------------------------------------------------ */

.buy{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.25rem,1rem + 1vw,2rem); box-shadow:var(--shadow-sm);
}
.buy__error{ margin:0 0 1.5rem }
/* Cada paso es un <fieldset> separado por una raya arriba. El <legend> va
   flotado a todo lo ancho: sin eso el navegador lo monta SOBRE la raya del
   borde (la raya asomaba después de "Opcional" y se salía de la tarjeta) y
   deja un hueco debajo. Flotado, se comporta como un título normal dentro
   del bloque, con el mismo ritmo en los cuatro pasos. */
.buy__block{ border:0; border-top:1px solid var(--line-soft); margin:1.75rem 0 0; padding:1.75rem 0 0; min-width:0 }
.buy__block:first-of-type{ border-top:0; padding-top:0; margin-top:0 }
.buy__legend{
  float:left; width:100%;
  display:flex; align-items:center; gap:.625rem; font-family:var(--title); font-weight:800; font-size:1.02rem; margin:0 0 1rem; padding:0;
}
.buy__legend + *{ clear:both }
.buy__legend .picker__hint{ margin-left:auto }
.buy__step{
  display:inline-grid; place-items:center; flex:none;
  width:1.625rem; height:1.625rem; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-text); font-size:.85rem;
}

.qty{ display:grid; gap:1rem }
@media (min-width:34rem){ .qty{ grid-template-columns:auto 1fr; align-items:end } }
.qty__presets{ display:flex; flex-wrap:wrap; gap:.5rem }
/* En celular los atajos se reparten el ancho completo (5 columnas iguales)
   y el campo también va a todo lo ancho: antes sobraba un hueco a la derecha. */
@media (max-width:33.99rem){
  .qty__presets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(3.25rem,1fr)) }
  .qty__preset{ min-width:0; padding-inline:4px }
  .qty .field--inline{ max-width:none }
}
.qty__preset{
  min-width:3rem; padding:12px 15px; font:inherit; font-weight:700; cursor:pointer;
  border:1px solid var(--field-line); border-radius:10px; background:var(--surface); color:var(--ink);
  transition:border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.qty__preset:hover{ border-color:var(--accent-line); color:var(--accent-text) }
/* Pirámide de montos (2026-10-03): 1, 2, 3, 4 y 5 botones por hilera, centrada. */
.qty__pyramid{ display:grid; gap:.5rem; grid-column:1 / -1 }
.qty__row{ display:flex; justify-content:center; gap:.5rem }
/* En el hero ocupa todo el ancho del meter, debajo del precio. */
.hero__pyramid{ flex:1 1 100%; margin-top:.25rem }
.hero__pyramid .qty__preset{ text-decoration:none }
.qty__pyramid .qty__preset{ flex:0 1 4.6rem; min-width:0; padding:9px 4px; display:grid; gap:1px; line-height:1.1; text-align:center }
.qty__pyramid .qty__preset b{ font-size:1rem }
.qty__pyramid .qty__preset small{ font-size:.66rem; font-weight:500; color:var(--ink-dim) }
.qty__pyramid .qty__preset.is-active small{ color:inherit; opacity:.85 }
@media (max-width:22rem){ .qty__pyramid .qty__preset b{ font-size:.86rem } }
.qty__preset.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.field--inline{ margin-bottom:0 }
@media (min-width:34rem){ .qty .field--inline{ max-width:14rem } }

.buy__total{
  margin:1.25rem 0 0; padding:.9rem 1.1rem; border-radius:var(--radius);
  background:var(--accent-soft); color:var(--accent-text); font-weight:700;
}
.buy__total strong{ font-family:var(--title); font-size:1.3rem }
.buy__submit{ margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--line-soft) }
.buy__legal{ margin:.75rem 0 0; font-size:.85rem; color:var(--ink-faint) }

/* ---------------------------------------------------------------------------
   Máquina de la suerte (rifas grandes)
   ---------------------------------------------------------------------------
   Caja negra con rodillos blancos: se lee como tragamonedas sin dibujar una.
   Los dígitos van en Knewave, la letra del logo. El alto de cada rodillo es
   1 "celda" y la tira tiene 30 (0-9 tres veces): app.js la mueve en % de su
   propia altura. Mientras gira, un desenfoque vertical dice "velocidad".
   ------------------------------------------------------------------------ */

.machine{ padding-bottom:0 }
/* .btn declara display:inline-flex y le ganaba al atributo hidden: "Me lo
   quedo" seguía visible con nada que quedarse. */
.machine[hidden], .machine [hidden]{ display:none !important }
.machine__hint{ font-size:.93rem; color:var(--ink-dim); margin:0 0 1rem; max-width:52ch }

.machine__box{
  max-width:36rem; margin-inline:auto;
  background:#121212; border-radius:24px; padding:clamp(14px,3vw,22px);
  box-shadow:0 22px 40px -26px rgba(0,0,0,.6), inset 0 0 0 3px #1f1f1d;
  display:grid; gap:14px; justify-items:center; text-align:center;
  container-type:inline-size;
}
/* Simetría (2026-10-03): los rodillos se miden contra el ancho de la CAJA
   (unidades cqi), no de la pantalla. Antes, con vw, la ventana verde se pasaba
   del relleno por la derecha (14 px a la izquierda y 2 px a la derecha a 390
   px) y a 320 px se salía de la caja. Ahora la ventana ocupa todo el ancho
   interior, igual que los botones, con los rodillos centrados. --n lo pone
   la vista (cifras del boleto). */
.machine__window{
  --gap:6px;
  --celda:clamp(46px, 15vw, 84px);
  --celda:min(84px, calc((100cqi - 16px - (var(--n, 6) - 1) * var(--gap)) / var(--n, 6) / .72));
  display:flex; justify-content:center; gap:var(--gap); padding:8px; border-radius:16px;
  width:100%; box-sizing:border-box;
  background:var(--accent);
}
.machine__reel{
  position:relative; overflow:hidden;
  width:calc(var(--celda) * .72); height:var(--celda);
  background:#fff; border-radius:10px;
}
/* Sombra arriba y abajo: el rodillo parece curvo. */
.machine__reel::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.28), transparent 26%, transparent 74%, rgba(0,0,0,.28));
}
.machine__strip{ display:flex; flex-direction:column; will-change:transform }
.machine__strip > span{
  height:var(--celda); display:grid; place-items:center;
  font-family:var(--brush); font-size:calc(var(--celda) * .62); line-height:1; color:#121212;
}
.machine__window.is-spinning .machine__strip{ filter:blur(1.6px) }
.machine__window.is-landed{ animation:maquina-cae .38s var(--ease-out) }
@keyframes maquina-cae{ 0%{ transform:scale(1) } 35%{ transform:scale(1.045) } 100%{ transform:scale(1) } }

.machine__result{ margin:0; min-height:1.6em; color:#fff; font-weight:700; font-size:1.05rem }
.machine__actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; width:100% }
.machine__spin{ min-width:9rem }
.machine__actions .btn:active{ transform:scale(.96) }
/* Tras girar (2026-10-03): "Otra vez" y "Me lo quedo" lado a lado y más
   compactos. "Me lo quedo" es la acción principal (verde); "Otra vez" queda
   como contorno blanco. Antes eran dos bloques apilados de ancho completo. */
.machine__actions{ display:grid; grid-template-columns:minmax(0,1fr); width:100% }
.machine__actions:has(.machine__keep:not([hidden])){ grid-template-columns:repeat(2,minmax(0,1fr)) }
.machine__actions .btn{ padding:13px 8px; border-radius:12px; white-space:nowrap }
@media (max-width:23rem){ .machine__actions .btn{ font-size:.9rem; padding-inline:4px } }
.machine__actions:has(.machine__keep:not([hidden])) .machine__spin{
  order:1; min-width:0; background:transparent; color:#fff; border-color:rgba(255,255,255,.45); box-shadow:none;
}
.machine__actions:has(.machine__keep:not([hidden])) .machine__spin:hover{ border-color:#fff; background:rgba(255,255,255,.08) }
.machine__keep{ order:2; background:var(--accent); color:#fff; border-color:#4ade80 }
.machine__keep:hover{ background:var(--accent-deep); border-color:#4ade80; color:#fff }

/* Mismo ancho que la caja de la máquina, campo y botón en una fila y de la
   misma altura. */
.machine__find{
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px;
  max-width:36rem; margin:0 auto;
}
.machine__find .field--inline{ margin:0 }
.machine__find .btn{ min-height:50px }
.machine__status{ grid-column:1 / -1; margin:0; font-size:.88rem; color:var(--ink-dim) }

/* Separador "o gira la máquina de la suerte" entre las dos formas de elegir. */
.machine__or{ display:flex; align-items:center; gap:.75rem; max-width:36rem; margin:1.5rem auto 1rem; color:var(--ink-faint); font-size:.88rem }
.machine__or::before, .machine__or::after{ content:""; flex:1; border-top:1px solid var(--line) }
.machine__mine{ max-width:36rem; margin-inline:auto }
.machine__hint{ max-width:36rem; margin-inline:auto }
.machine__find input{ font-family:var(--mono); letter-spacing:.08em }

.machine__mine{ margin-top:1rem }
.machine__count{ margin:0 0 .6rem; font-weight:600; color:var(--accent-text) }
.machine__chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.machine__chip{
  display:inline-flex; align-items:center; gap:4px; padding:4px 4px 4px 12px;
  border-radius:999px; background:var(--accent-soft); border:1px solid var(--accent-line);
  font-family:var(--mono); font-weight:700; color:var(--accent-text);
}
.machine__chip button{
  width:30px; height:30px; border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:var(--accent-text); font-size:1.15rem; line-height:1;
}
.machine__chip button:hover{ background:var(--accent-line) }
.machine__chip.is-new{ animation:ficha-nueva .45s cubic-bezier(.2,1.4,.4,1) }
@keyframes ficha-nueva{ 0%{ transform:scale(.4); opacity:0 } 100%{ transform:scale(1); opacity:1 } }

@media (prefers-reduced-motion: reduce){
  .machine__window.is-landed, .machine__chip.is-new{ animation:none }
  .machine__window.is-spinning .machine__strip{ filter:none }
}

/* Selector de números */
/* 1.75rem y no .5: el <legend> del bloque siguiente se monta sobre el borde
   superior de su fieldset, así que sin este hueco "Tus datos" quedaba pegado
   al pie de la cuadrícula. */
.picker{ padding-bottom:1.75rem }
.picker > summary{ cursor:pointer; list-style:none }
.picker > summary::-webkit-details-marker{ display:none }
.picker > summary::after{ content:"▾"; margin-left:auto; color:var(--ink-faint); transition:transform .2s }
.picker[open] > summary::after{ transform:rotate(180deg) }
.picker__hint{ margin-left:.25rem; font-size:.85rem; font-weight:500; color:var(--ink-faint) }
.picker__note,.picker__count{ font-size:.86rem; color:var(--ink-dim) }
.picker__count strong{ color:var(--accent-text) }

/* position:relative para que el buscador de app.js pueda leer el offsetTop de
   cada casilla relativo a la cuadrícula y centrarla sin mover la página. */
.grid{
  position:relative;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:7px;
  max-height:22rem; overflow-y:auto; padding:.75rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg); -webkit-overflow-scrolling:touch;
}
.grid__cell{
  position:relative; display:grid; place-items:center;
  padding:11px 4px; border:1px solid var(--field-line); border-radius:8px;
  background:var(--surface); color:var(--ink-dim);
  font-family:var(--mono); font-size:.82rem; letter-spacing:.04em;
  cursor:pointer; user-select:none;
  transition:transform 130ms var(--ease-out), background 150ms var(--ease-out),
             color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
/* En teléfono, 74 px por casilla dejaba 3 columnas: con 1 000 números son
   más de 330 filas que desplazar. A 58 px caben 4 y "1000" sigue entrando. */
@media (max-width:30rem){
  .grid{ grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:6px; padding:.5rem }
}
.grid__cell input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer }
.grid__cell:hover{ border-color:var(--accent-line); color:var(--ink) }
.grid__cell:active{ transform:scale(.94) }
.grid__cell:has(input:checked){ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700 }
.grid__cell:has(input:focus-visible){ outline:2px solid var(--accent-deep); outline-offset:2px }

/* Apartado en ámbar y vendido tachado: los dos estados que el comprador tiene
   que distinguir de un vistazo, con color Y con forma, no sólo color. */
.grid__cell.is-apartado{ background:var(--warning-soft); color:var(--warning); border-color:transparent; cursor:not-allowed }
.grid__cell.is-taken{ background:var(--surface-3); color:var(--ink-faint); border-color:transparent; cursor:not-allowed; text-decoration:line-through }
.grid__cell.is-disabled{ opacity:.45; cursor:not-allowed }
.grid__cell.is-disabled:hover{ border-color:var(--field-line) }

.legend{ display:flex; gap:15px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-dim); margin-bottom:.75rem }
.legend span{ display:inline-flex; align-items:center; gap:7px }
.legend .sw{ width:10px; height:10px; border-radius:2px; display:inline-block; border:1px solid var(--line) }
.legend .sw--libre{ background:var(--surface) }
.legend .sw--apartado{ background:var(--warning-soft); border-color:var(--warning) }
.legend .sw--vendido{ background:var(--surface-3); border-color:transparent }
.legend .sw--mio{ background:var(--accent); border-color:transparent }

/* Herramientas del selector. Sólo existen con JavaScript: el contenedor nace
   con `hidden` y app.js lo muestra, así nadie ve botones que no hacen nada. */
.picker__tools{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.75rem }
.picker__find{ flex:1 1 11rem; max-width:16rem }
.picker__find input{ padding:9px 12px; font-family:var(--mono); font-size:.86rem }
.picker__status{ flex:1 0 100%; font-size:.84rem; color:var(--ink-dim) }
.picker__status:empty{ display:none }
.picker__chosen{ font-family:var(--mono); font-size:.82rem; color:var(--accent-text); word-break:break-word }

/* Resaltado al buscar un número: anillo, no relleno, para no confundirse con
   "seleccionado". Se quita solo con la animación. */
.grid__cell.is-found{ outline:2px solid var(--accent-deep); outline-offset:2px; animation:hallado 1.6s var(--ease-out) forwards }
@keyframes hallado{ 0%,70%{ outline-color:var(--accent-deep) } 100%{ outline-color:transparent } }
@media (prefers-reduced-motion: reduce){ .grid__cell.is-found{ animation:none } }

/* ---------------------------------------------------------------------------
   Barra fija de compra
   ---------------------------------------------------------------------------
   Aparece cuando ya hay algo elegido y el botón de apartar no está a la vista:
   con una cuadrícula de 1 000 números, el comprador no debería tener que
   buscar el formulario al terminar de marcar. No envía nada: lleva a "Tus
   datos", que es lo que falta.
   ------------------------------------------------------------------------ */

.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -12px 30px -20px rgba(18,18,18,.35);
  transform:translateY(110%); transition:transform 260ms var(--ease-out);
}
.buybar.is-visible{ transform:none }
.buybar__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:12px }
.buybar__info{ margin:0; line-height:1.25; font-size:.86rem; color:var(--ink-dim) }
.buybar__info strong{ display:block; font-family:var(--title); font-size:1.12rem; color:var(--accent-text) }
@media (prefers-reduced-motion: reduce){ .buybar{ transition:none } }

/* Métodos de pago */
.methods{ display:grid; gap:.75rem }
.method{
  display:flex; align-items:flex-start; gap:.75rem; padding:1rem; cursor:pointer;
  border:1px solid var(--field-line); border-radius:var(--radius); background:var(--surface);
  transition:border-color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.method:hover{ border-color:var(--accent-line) }
/* Verde sólido, no --accent-line: el translúcido daba 2.28:1 sobre blanco y el
   borde es lo que comunica "esta opción está elegida". El fondo suave solo no
   basta, es demasiado tenue para leerse como estado. */
.method:has(input:checked){ border-color:var(--accent-deep); background:var(--accent-soft) }
.method:has(input:focus-visible){ outline:2px solid var(--accent-deep); outline-offset:2px }
.method input{ margin-top:.3rem; flex:none; accent-color:var(--accent-deep) }
.method__body{ display:block }
.method__name{ display:block; font-weight:700 }
.method__text{ display:block; font-size:.86rem; color:var(--ink-dim) }
/* Logos de pago (2026-10-03): SVG propios en img/pago-*.svg, del mismo
   tamaño, para que se lean como sellos de confianza y no como anuncio. */
.method__body{ flex:1; min-width:0 }
.method__logo{ flex:none; margin-top:.1rem }
/* Logos oficiales (OXXO de Wikimedia Commons, SPEI de Banxico): tienen
   proporciones distintas, así que van en un sello blanco del mismo tamaño
   con object-fit, y se ven parejos en cualquier fondo. */
.method__logo, .hero__pay img, .paybox__label img{
  width:58px; height:34px; padding:5px 6px; box-sizing:border-box; object-fit:contain;
  background:#fff; border-radius:7px; box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.1);
}

/* ---------------------------------------------------------------------------
   Pedido, folio y números
   ------------------------------------------------------------------------ */

.folio{
  text-align:center; padding:1.75rem 1rem; margin-bottom:1.5rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.folio__label{ font-size:.95rem; font-weight:600; color:var(--ink-faint); margin-bottom:.25rem }
.folio__code{ font-family:var(--mono); font-size:clamp(1.75rem,1.4rem + 2vw,2.5rem); font-weight:700; letter-spacing:.05em; margin-bottom:.5rem }
.folio__status{ margin-bottom:.5rem }
.folio__hint{ font-size:.86rem; color:var(--ink-faint); margin:0 }

.numbers{ display:flex; flex-wrap:wrap; gap:.375rem; list-style:none; margin:0 0 1.25rem; padding:0 }
.numbers__item{
  padding:.35rem .7rem; border-radius:8px;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-text);
  font-family:var(--mono); font-weight:700; font-size:.92rem;
}
.numbers__item--apartado{ background:var(--warning-soft); border-color:rgba(180,83,9,.35); color:var(--warning) }
.numbers__item--disponible{ background:var(--surface-2); border-color:var(--line); color:var(--ink-faint) }

.summary{ margin:0; display:grid; gap:.5rem }
.summary > div{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; padding-bottom:.5rem; border-bottom:1px solid var(--line-soft) }
.summary > div:last-child{ border-bottom:0; padding-bottom:0 }
.summary dt{ color:var(--ink-dim); font-size:.92rem }
.summary dd{ margin:0; font-weight:600; text-align:right }
.summary__total{ font-family:var(--title); font-size:1.15rem; color:var(--accent-text) }

/* Página de pago (2026-10-03): la cuenta a la vista, grande, con cuenta regresiva. */
.countdown{ margin:0 0 1rem; padding:.85rem 1rem; border-radius:14px; background:var(--accent-soft); color:var(--ink); font-size:.95rem; line-height:1.45 }
.countdown strong{ font-family:var(--mono); font-size:1.15rem }
.countdown span{ display:block; color:var(--ink-dim); font-size:.86rem }
.countdown.is-urgent{ background:#fdecec; color:#8a1c1c }
.countdown.is-over{ background:#fdecec; color:#8a1c1c }
.paybox{ margin:0 0 1.25rem; padding:1.25rem; border-radius:18px; background:var(--surface); border:2px solid var(--accent); display:grid; gap:.85rem }
.paybox__label{ margin:0; font-weight:700; color:var(--ink-dim); font-size:.95rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem }
.paybox__label img{ flex:none }
.paybox__amount{ margin:-.4rem 0 0; font-size:2rem; font-weight:800; letter-spacing:-.02em }
.paybox__account{ display:grid; gap:.4rem; padding:1rem; border-radius:14px; background:var(--accent-soft) }
.paybox__account--second{ background:transparent; border:1px solid var(--line) }
.paybox__kind{ font-size:.82rem; font-weight:700; color:var(--ink-dim) }
.paybox__number{ font-size:min(1.6rem, 5.6vw); font-weight:800; letter-spacing:0; white-space:nowrap }
.paybox__account .btn{ justify-self:start }
.paybox__holder{ margin:0; font-size:.95rem }
.paybox__steps{ margin:0; padding-left:1.2rem; display:grid; gap:.35rem; font-size:.93rem }
.paybox__ref{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; font-size:.93rem }
.folio--small .folio__code{ font-size:1.4rem }
.bank{ margin:0 0 1.25rem; display:grid; gap:.625rem }
.bank > div{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.5rem;
  padding:.7rem .9rem; border-radius:var(--radius); background:var(--surface-2);
}
.bank dt{ color:var(--ink-dim); font-size:.86rem }
.bank dd{ margin:0; font-weight:700; display:flex; align-items:center; gap:.625rem; flex-wrap:wrap }
/* Monoespaciada sólo lo que se copia o se teclea (CLABE, cuenta, folio): ahí
   importa distinguir 0 de O. El banco y el titular son nombres, no códigos. */
.bank__copyable span{ font-family:var(--mono) }
.bank__copyable button{ font-family:var(--font) }

.upload{ margin-top:1rem }

.done{ text-align:center; margin-bottom:1.5rem }
.done__icon{ width:3.5rem; height:3.5rem; margin:0 auto 1rem; color:var(--accent-deep) }

.search{ display:grid; gap:.75rem; margin-bottom:2rem }
@media (min-width:34rem){
  .search{ grid-template-columns:1fr auto; align-items:end }
  .search .field{ margin-bottom:0 }
}

.results__count{ color:var(--ink-dim); font-size:.92rem }
.result{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.25rem; margin-bottom:1rem; box-shadow:var(--shadow-sm);
}
.result__head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem }
.result__folio{ font-family:var(--mono); font-weight:700; font-size:1.125rem; margin:0 }
.result__meta{ font-size:.86rem; color:var(--ink-dim); margin-bottom:1rem }
.result__action{ margin:0; font-size:.92rem }

.error-page{ text-align:center; max-width:34ch; margin-inline:auto; padding-block:2rem }
.error-page__code{ font-family:var(--mono); font-size:3rem; font-weight:700; color:var(--line); line-height:1; margin-bottom:.5rem }
.error-page__text{ color:var(--ink-dim); margin-bottom:1.5rem }
.error-page__actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center }

/* ---------------------------------------------------------------------------
   Login
   ------------------------------------------------------------------------ */

body.is-centered{ display:grid; place-items:center; min-height:100vh; padding:1.5rem }
.centered-main{ width:min(100%,24rem) }
.login{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow) }
.login__title{ font-size:1.375rem; text-align:center; margin-bottom:1.5rem }
.login__form .field:last-of-type{ margin-bottom:1.5rem }
.login__back{ text-align:center; margin:1.25rem 0 0; font-size:.86rem }

/* ---------------------------------------------------------------------------
   Panel
   ------------------------------------------------------------------------ */

.admin-bar{ position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line) }
.admin-bar__inner{
  width:min(100% - 2rem,80rem); margin-inline:auto;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding-block:.5rem; min-height:3.5rem;
}
.admin-bar__brand{ font-family:var(--title); font-weight:800; text-transform:uppercase; color:var(--ink); text-decoration:none }
.admin-bar__brand em{ font-style:normal; color:var(--accent-text) }
.admin-bar__nav{ display:flex; gap:.25rem; flex-wrap:wrap; flex:1 }
.admin-bar__nav a{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .8rem; border-radius:8px; color:var(--ink-dim);
  text-decoration:none; font-weight:600; font-size:.88rem;
  transition:background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.admin-bar__nav svg{ width:18px; height:18px; flex:none }
.admin-bar__nav a:hover{ background:var(--surface-2); color:var(--ink) }
.admin-bar__nav a[aria-current="page"]{ background:var(--accent); color:var(--accent-ink) }
.admin-bar__user{ display:flex; align-items:center; gap:.75rem; font-size:.86rem }
.admin-bar__name{ color:var(--ink-dim) }
.admin-bar__site{ color:var(--ink-dim); text-decoration:none }
.admin-bar__site:hover{ color:var(--accent-text) }
@media (max-width:40rem){ .admin-bar__name,.admin-bar__site{ display:none } }

.admin-main{ padding-block:2rem 4rem }
.admin-wrap{ width:min(100% - 2rem,80rem); margin-inline:auto }

.admin-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem }
.admin-head h1{ margin-bottom:.25rem; font-size:1.5rem }
.admin-head__sub{ color:var(--ink-dim); font-size:.9rem; margin:0 }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:1rem; margin-bottom:1.5rem }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.25rem; box-shadow:var(--shadow-sm) }
.stat__label{ font-size:.85rem; font-weight:600; color:var(--ink-faint); margin-bottom:.35rem }
.stat__value{ font-family:var(--title); font-size:1.75rem; font-weight:800; line-height:1.1; margin-bottom:.25rem }
.stat__note{ font-size:.8rem; color:var(--ink-faint); margin:0 }

.progress--admin{ margin-bottom:2rem }

.admin-section{ margin-top:2rem }
.admin-section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem }
.admin-section__head h2{ margin:0 }

.admin-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.25rem,1rem + 1vw,1.75rem); margin-bottom:1.5rem; box-shadow:var(--shadow-sm);
}
.admin-card h2{ margin-top:0 }
.admin-card__note{ color:var(--ink-dim); font-size:.92rem }
.admin-card--danger{ border-color:rgba(185,28,28,.4) }
.admin-card--danger h2{ color:var(--danger) }

.admin-cols{ display:grid; gap:1.5rem }
@media (min-width:52rem){ .admin-cols{ grid-template-columns:1fr 1fr } }

.admin-form__row{ display:grid; gap:0 }
@media (min-width:40rem){ .admin-form__row{ grid-template-columns:1fr 1fr; gap:0 1rem } }
.admin-form__actions{ position:sticky; bottom:0; padding:1rem 0; background:linear-gradient(to top,var(--bg) 60%,transparent) }
.admin-gallery{ list-style:none; margin:0 0 .75rem; padding:0; display:flex; flex-wrap:wrap; gap:10px }
.admin-gallery li{ display:grid; gap:4px; justify-items:start }
.admin-gallery img{ width:120px; height:90px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line) }
.admin-gallery__del{ font-size:.85rem; display:flex; gap:4px; align-items:center }
.admin-form__thumb{ border-radius:var(--radius); border:1px solid var(--line); margin-bottom:.75rem }
.admin-form__counts{ font-size:.86rem; color:var(--ink-faint); margin:0 }
.admin-form__winner{ margin:0 }
.admin-form__inline{ margin-top:1rem }
@media (min-width:40rem){
  .admin-form__inline{ display:flex; gap:.75rem; align-items:end }
  .admin-form__inline .field{ margin-bottom:0; flex:1 }
}
.admin-note{ padding:.9rem 1.1rem; border-radius:var(--radius); background:var(--surface-2); font-size:.92rem }
.proof{ max-width:100%; border-radius:var(--radius); border:1px solid var(--line) }

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem }
.filters__item{
  padding:.42rem .9rem; border-radius:999px; text-decoration:none;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-dim);
  font-size:.86rem; font-weight:600;
}
.filters__item:hover{ color:var(--ink); border-color:var(--accent-line) }
.filters__item.is-active{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }

.search--inline{ margin-bottom:1.25rem }
@media (min-width:34rem){ .search--inline{ grid-template-columns:1fr auto auto } }

.table-scroll{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); -webkit-overflow-scrolling:touch;
}
.table{ width:100%; border-collapse:collapse; font-size:.9rem }
.table th,.table td{ padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--line-soft); white-space:nowrap }
.table th{ background:var(--surface-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600 }
.table tbody tr:last-child td{ border-bottom:0 }
.table tbody tr:hover{ background:var(--surface-2) }

.inline-form{ display:flex; gap:.5rem; align-items:center }
.inline-form select{ width:auto; padding:.35rem .5rem; font-size:.86rem }

.pager{ display:flex; align-items:center; justify-content:center; gap:1.25rem; margin-top:1.25rem; font-size:.9rem; color:var(--ink-dim) }

/* Pedidos en tarjetas (partials/order-cards.php): sólo en celular. */
.order-cards{ display:none; list-style:none; margin:0; padding:0; gap:.625rem }
.order-card{
  display:flex; align-items:stretch; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden;
}
.order-card__link{ flex:1; min-width:0; display:grid; gap:.2rem; padding:.9rem 1rem; color:var(--ink); text-decoration:none }
.order-card__link:active{ background:var(--surface-2) }
.order-card__top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem }
.order-card__folio{ font-weight:700 }
.order-card__name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.order-card__meta{ font-size:.85rem; color:var(--ink-dim) }
.order-card__meta strong{ color:var(--ink) }
.order-card__wa{
  display:grid; place-items:center; width:56px; flex:none;
  border-left:1px solid var(--line-soft); color:var(--accent-text);
}
.order-card__wa svg{ width:24px; height:24px }
.order-card__wa:active{ background:var(--accent-soft) }

/* Equipo */
.team{ list-style:none; margin:0; padding:0 }
.team__item{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; border-top:1px solid var(--line-soft) }
.team__item:first-child{ border-top:0; padding-top:0 }
.team__who{ display:grid; gap:.1rem; min-width:0; justify-items:start }
.team__email{ color:var(--ink-dim); overflow-wrap:anywhere }
.team__last{ font-size:.82rem; color:var(--ink-faint) }
.team__remove{ color:var(--danger) }

/* ---------------------------------------------------------------------------
   Panel en celular (< 48rem)
   ---------------------------------------------------------------------------
   Criterio de app: el menú pasa a una barra fija abajo, al alcance del
   pulgar, con ícono + texto; las tablas anchas se vuelven tarjetas; los
   controles miden al menos 44 px de alto y los campos 16 px de letra (con
   menos, Safari de iPhone hace zoom al tocarlos).
   ------------------------------------------------------------------------ */
@media (max-width:47.99rem){
  .admin-bar__inner{ flex-wrap:nowrap; justify-content:space-between; min-height:3.25rem }
  .admin-bar__nav{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:grid; grid-template-columns:repeat(6,1fr); gap:0; flex:none;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:var(--surface); border-top:1px solid var(--line);
    box-shadow:0 -8px 24px -18px rgba(0,0,0,.35);
  }
  .admin-bar__nav a{
    flex-direction:column; justify-content:center; gap:3px;
    min-height:50px; padding:4px 2px; border-radius:10px;
    font-size:.66rem; font-weight:600; letter-spacing:.01em; text-align:center;
  }
  .admin-bar__nav svg{ width:22px; height:22px }
  .admin-bar__nav a[aria-current="page"]{ background:var(--accent-soft); color:var(--accent-text) }
  .admin-bar__nav a:active{ transform:scale(.94) }

  /* Hueco para que la barra de abajo no tape lo último de la página. */
  .admin-main{ padding-block:1.25rem calc(6.5rem + env(safe-area-inset-bottom)) }
  .admin-wrap{ width:min(100% - 1.5rem,80rem) }
  .admin-head h1{ font-size:1.35rem }
  .admin-head > .btn{ width:100% }

  .stats{ grid-template-columns:1fr 1fr; gap:.625rem }
  .stat{ padding:.9rem }
  .stat__value{ font-size:1.3rem }
  .stat__label{ font-size:.8rem }

  /* Filtros en una sola fila que se desliza, en vez de dos o tres renglones. */
  .filters{ flex-wrap:nowrap; overflow-x:auto; margin-inline:-.75rem; padding:0 .75rem 4px; scrollbar-width:none }
  .filters::-webkit-scrollbar{ display:none }
  .filters__item{ flex:none; padding:.6rem 1rem }

  .order-cards{ display:grid }
  .table-scroll--desktop{ display:none }

  .table--stack thead{ display:none }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td{ display:block; width:100% }
  .table--stack tr{ padding:.85rem 1rem; border-bottom:1px solid var(--line-soft) }
  .table--stack tbody tr:last-child{ border-bottom:0 }
  .table--stack td{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.25rem 0; border:0; white-space:normal }
  .table--stack td[data-label]::before{ content:attr(data-label); color:var(--ink-faint); font-size:.85rem }
  .table--stack .table__title{ font-size:1.15rem; font-weight:700 }
  /* Número y estado en la misma línea: la tarjeta de boleto baja de 5 a 4 renglones. */
  .table--stack tr{ display:grid; grid-template-columns:1fr auto; column-gap:1rem }
  .table--stack td{ grid-column:1 / -1 }
  .table--stack .table__title{ grid-column:1 }
  .table--stack td[data-label="Estado"]{ grid-column:2; grid-row:1 }
  .table--stack td[data-label="Estado"]::before{ content:none }

  .search--inline{ grid-template-columns:1fr auto; gap:.5rem }
  .search--inline .field{ margin-bottom:0 }
  .search--inline > a.btn{ grid-column:1 / -1 }
  .table--stack .table__actions{ padding-top:.6rem }
  .table--stack .inline-form{ width:100% }
  .table--stack .inline-form select{ flex:1; padding:.6rem .75rem; font-size:1rem }
  .table--stack .inline-form .btn{ padding:.7rem 1rem }

  .admin-card .btn:not(.btn--sm), .admin-card form > .btn{ width:100% }
  .team__remove{ min-height:44px }
  textarea.mono{ font-size:1rem }

  /* "Guardar cambios" pegado justo arriba de la barra de navegación. */
  .admin-form__actions{
    bottom:calc(62px + env(safe-area-inset-bottom)); z-index:55;
    margin-inline:-.75rem; padding:.75rem;
    background:var(--bg); border-top:1px solid var(--line);
  }
  .admin-form__actions .btn{ width:100% }

  .pager{ gap:.75rem }
  .pager a{ padding:.7rem .9rem; border:1px solid var(--line); border-radius:10px; background:var(--surface); text-decoration:none }
}