/* ==========================================================================
   SUSHI PLUS CHICKEN · la página del QR

   Mismos tokens de marca que el sitio (`css/style.css`) pero al revés: allá el
   fondo es crema y las cosas oscuras flotan encima; acá el fondo es nori y lo
   que flota es una tarjeta de papel. Es un formulario que se abre de noche, en
   la puerta de un restaurante, con el brillo del teléfono al máximo — el papel
   claro sobre oscuro es lo que se lee de un vistazo.

   El motivo de la marca —el corte diagonal de la carta impresa— aparece dos
   veces: el filo de arriba de la tarjeta y la trama del fondo. En ningún sitio
   se inventa un ángulo: todos son `--diag`. El confeti es el de la página del
   pedido, tal cual.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root {
  --rojo:#B01E24; --rojo-osc:#7E1418; --rojo-prof:#5A0E11;
  --naranja:#F0901E; --naranja-cl:#F7B733; --amarillo:#FBD24B;

  --crema:#FDF4E7; --crema-2:#F7E6D0; --crema-3:#EFD7BA; --arena:#A9907C;
  --tinta:#2A1D18; --tinta-2:#5B4740; --tinta-3:#8A7167;
  --nori:#16100D; --nori-2:#241A15;
  --papel:#FFFBF4;

  --linea:rgba(42,29,24,.13);
  --linea-sutil:rgba(42,29,24,.07);

  --display:'Fraunces','Georgia',serif;
  --sans:'Outfit','Segoe UI',system-ui,-apple-system,sans-serif;
  --script:'Caveat',cursive;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-suave:cubic-bezier(.33,1,.68,1);
  --d-rapido:.32s; --d-medio:.62s; --d-lento:1.05s;

  --diag:4.6deg;
  --radio:20px; --radio-s:13px;

  --sombra-m:0 18px 44px -18px rgba(0,0,0,.55);
  --sombra-l:0 44px 96px -34px rgba(0,0,0,.72);
}

/* --------------------------------------------------------------------------
   2 · Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html { -webkit-text-size-adjust:100%; }

body {
  min-height:100svh;
  background:var(--nori);
  color:var(--crema);
  font-family:var(--sans);
  font-size:clamp(.98rem,.94rem + .2vw,1.06rem);
  line-height:1.6;
  overflow-x:hidden;
  /* El notch del iPhone: esta página se abre casi siempre en vertical y con
     el teléfono en la mano, así que la barra de gestos de abajo se come el
     botón principal si no se cuenta. */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}

button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; border:0; background:none; }
svg { display:block; }
[hidden] { display:none !important; }

/* --------------------------------------------------------------------------
   3 · El fondo
   -------------------------------------------------------------------------- */
.fondo { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

/* Tres luces cálidas que se cruzan muy despacio. Duran entre 19 y 31 segundos
   y son primos entre sí: así el ciclo completo no se repite en varios minutos
   y nadie percibe un bucle. */
.fondo__luz {
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
  will-change:transform;
}
.fondo__luz--1 {
  width:62vmax; height:62vmax; top:-24vmax; left:-18vmax;
  background:radial-gradient(circle, var(--rojo) 0%, transparent 66%);
  animation:deriva1 23s var(--ease-suave) infinite alternate;
}
.fondo__luz--2 {
  width:52vmax; height:52vmax; bottom:-22vmax; right:-16vmax;
  background:radial-gradient(circle, var(--naranja) 0%, transparent 66%);
  opacity:.36;
  animation:deriva2 31s var(--ease-suave) infinite alternate;
}
.fondo__luz--3 {
  width:38vmax; height:38vmax; top:38%; right:-14vmax;
  background:radial-gradient(circle, var(--rojo-prof) 0%, transparent 70%);
  opacity:.55;
  animation:deriva3 19s var(--ease-suave) infinite alternate;
}
@keyframes deriva1 { to { transform:translate3d(9vw,6vh,0) scale(1.12); } }
@keyframes deriva2 { to { transform:translate3d(-8vw,-7vh,0) scale(1.18); } }
@keyframes deriva3 { to { transform:translate3d(-6vw,8vh,0) scale(.9); } }

/* La trama diagonal de la marca, apenas visible. Es lo que impide que el
   degradado se vea como un fondo de plantilla. */
.fondo__trama {
  position:absolute; inset:-20%;
  background:repeating-linear-gradient(
    calc(90deg + var(--diag)),
    rgba(253,244,231,.028) 0 1px,
    transparent 1px 13px);
}

/* --------------------------------------------------------------------------
   4 · Estructura
   -------------------------------------------------------------------------- */
.marco {
  position:relative; z-index:1;
  width:min(100% - 2rem, 30rem);
  margin-inline:auto;
  padding-block:clamp(1.6rem,5vh,3rem) 2.5rem;
  display:flex; flex-direction:column; gap:1.35rem;
}

/* --------------------------------------------------------------------------
   5 · La cabeza
   -------------------------------------------------------------------------- */
.cabeza { text-align:center; }

.cabeza__logo {
  position:relative; width:5.4rem; height:5.4rem; margin:0 auto .85rem;
  animation:entrar-arriba .9s var(--ease) both;
}
.cabeza__logo img {
  width:100%; height:100%; border-radius:50%; display:block;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(253,244,231,.12);
  animation:respirar 6s var(--ease-suave) infinite;
}
/* El aro que gira: un trazo discontinuo cálido. Da vida sin pedir atención. */
.cabeza__aro {
  position:absolute; inset:-9px; border-radius:50%;
  border:1.5px dashed rgba(240,144,30,.42);
  animation:girar 34s linear infinite;
}
@keyframes girar { to { transform:rotate(360deg); } }
@keyframes respirar { 50% { transform:scale(1.035); } }

.cabeza__t {
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.1rem,1.6rem + 2.4vw,2.9rem);
  line-height:1.04; letter-spacing:-.02em;
  background:linear-gradient(96deg, var(--crema) 12%, var(--amarillo) 54%, var(--naranja) 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:entrar-arriba .9s .07s var(--ease) both;
}
.cabeza__b {
  margin-top:.4rem; color:rgba(253,244,231,.62);
  font-size:.95rem; font-weight:300; text-wrap:balance;
  animation:entrar-arriba .9s .14s var(--ease) both;
}
.cabeza__sede {
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.7rem;
  padding:.24rem .78rem; border-radius:999px;
  background:rgba(253,244,231,.07); border:1px solid rgba(253,244,231,.14);
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--amarillo); font-weight:500;
  animation:entrar-arriba .9s .2s var(--ease) both;
}
.cabeza__sede::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--amarillo); box-shadow:0 0 8px var(--amarillo);
  animation:latir 2.4s ease-in-out infinite;
}
@keyframes latir { 50% { opacity:.35; transform:scale(.8); } }

@keyframes entrar-arriba {
  from { opacity:0; transform:translateY(14px); }
}

/* --------------------------------------------------------------------------
   6 · El hilo de progreso
   -------------------------------------------------------------------------- */
.hilo {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem;
  animation:entrar-arriba .9s .26s var(--ease) both;
}
.hilo__t { display:flex; flex-direction:column; gap:.42rem; }
.hilo__t i {
  height:3px; border-radius:2px; background:rgba(253,244,231,.14);
  position:relative; overflow:hidden;
}
/* El relleno crece de izquierda a derecha con la curva de la marca. Se hace
   con un ::after y scaleX y no animando el width: el width relayoutea toda la
   fila en cada cuadro. */
.hilo__t i::after {
  content:''; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(90deg, var(--naranja), var(--amarillo));
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-medio) var(--ease);
}
.hilo__t b {
  font-size:.7rem; font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(253,244,231,.34); transition:color var(--d-rapido) var(--ease);
}
.hilo__t--hecho i::after { transform:scaleX(1); }
.hilo__t--hecho b { color:rgba(253,244,231,.5); }
.hilo__t--activo i::after { transform:scaleX(1); }
.hilo__t--activo b { color:var(--amarillo); }
/* El tramo activo respira. Es la única forma de decir «estás aquí» sin gastar
   un color más. */
.hilo__t--activo i {
  box-shadow:0 0 12px -2px rgba(251,210,75,.6);
  animation:pulso-hilo 2.2s ease-in-out infinite;
}
@keyframes pulso-hilo { 50% { box-shadow:0 0 4px -2px rgba(251,210,75,.25); } }

/* --------------------------------------------------------------------------
   7 · La tarjeta
   -------------------------------------------------------------------------- */
.tarjeta {
  position:relative;
  background:var(--papel); color:var(--tinta);
  border-radius:var(--radio);
  box-shadow:var(--sombra-l);
  /* El alto lo pone el paso visible; la transición hace que el cambio de paso
     no dé un tirón. */
  transition:min-height var(--d-medio) var(--ease);
  animation:entrar-tarjeta 1s .3s var(--ease) both;
  overflow:hidden;
}
@keyframes entrar-tarjeta {
  from { opacity:0; transform:translateY(26px) scale(.97); }
}

/* El filo diagonal de arriba: el motivo de la carta impresa. Va como pieza
   propia y no como borde porque tiene que sobresalir del recorte. */
.tarjeta__filo {
  position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--rojo), var(--naranja) 46%, var(--amarillo));
  transform-origin:left;
  transform:rotate(calc(var(--diag) * -.16)) scaleX(1.06);
}

.paso {
  padding:clamp(1.5rem,4.5vw,2.1rem);
  padding-top:clamp(1.7rem,4.8vw,2.3rem);
  display:flex; flex-direction:column; gap:.95rem;
}

/* Los pasos entran desde la derecha y salen a la izquierda, con una pizca de
   la diagonal en la rotación. Es el mismo gesto de pasar una hoja del libro
   de la carta. */
.paso--activo { animation:paso-entra var(--d-medio) var(--ease) both; }
.paso--sale   { animation:paso-sale calc(var(--d-medio) * .55) var(--ease-io) both; }
@keyframes paso-entra {
  from { opacity:0; transform:translateX(26px) rotate(calc(var(--diag) * .1)); }
}
@keyframes paso-sale {
  to { opacity:0; transform:translateX(-22px) rotate(calc(var(--diag) * -.1)); }
}

.paso__ojo {
  font-family:var(--script); font-size:1.3rem; font-weight:700;
  color:var(--rojo); line-height:1; margin-bottom:-.5rem;
}
.paso__t {
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.45rem,1.2rem + 1.1vw,1.75rem);
  line-height:1.14; letter-spacing:-.015em; color:var(--tinta);
  text-wrap:balance;
}
.paso__d { color:var(--tinta-2); font-size:.95rem; font-weight:300; text-wrap:pretty; }
.paso__pie {
  font-size:.82rem; color:var(--tinta-3); line-height:1.5;
}
.paso__pie a { color:var(--rojo); text-underline-offset:3px; }

/* --------------------------------------------------------------------------
   8 · Cargando
   -------------------------------------------------------------------------- */
.cargando { text-align:center; padding:2.6rem 0; color:var(--tinta-3); }
.cargando__aro {
  display:block; width:34px; height:34px; margin:0 auto 1rem;
  border:3px solid var(--crema-3); border-top-color:var(--naranja);
  border-radius:50%; animation:girar .85s linear infinite;
}

/* --------------------------------------------------------------------------
   9 · Los permisos
   -------------------------------------------------------------------------- */
.permiso {
  display:grid; grid-template-columns:auto 1fr; gap:.85rem;
  padding:.95rem 1rem; border-radius:var(--radio-s);
  border:1.5px solid var(--linea); background:var(--crema);
  cursor:pointer;
  transition:border-color var(--d-rapido) var(--ease),
             background var(--d-rapido) var(--ease),
             transform var(--d-rapido) var(--ease);
}
.permiso:active { transform:scale(.988); }
.permiso input { position:absolute; opacity:0; width:0; height:0; }

/* El obligatorio arranca con un filo rojo tenue; el opcional no lleva nada.
   Que se vean distintos es lo que mantiene libre al segundo: si los dos fueran
   iguales, se marcan los dos sin leer y el permiso de publicidad deja de valer
   (Ley 1581, art. 9 — tiene que poder no darse). */
.permiso--nec { border-color:rgba(176,30,36,.28); }
.permiso--nec:has(input:checked) {
  border-color:var(--rojo); background:rgba(176,30,36,.05);
}
.permiso--opc:has(input:checked) {
  border-color:var(--naranja); background:rgba(240,144,30,.07);
}
.permiso:has(input:focus-visible) { outline:2px solid var(--naranja); outline-offset:2px; }

.permiso__caja {
  width:25px; height:25px; margin-top:.12rem; border-radius:8px;
  border:2px solid var(--arena); background:#fff;
  display:grid; place-items:center; flex:none;
  transition:border-color var(--d-rapido) var(--ease),
             background var(--d-rapido) var(--ease);
}
.permiso__caja svg {
  width:15px; height:15px; fill:none; stroke:#fff; stroke-width:3.4;
  stroke-linecap:round; stroke-linejoin:round;
  /* El palomazo se DIBUJA. Aparecer de golpe se siente a interruptor; que se
     trace se siente a firma. */
  stroke-dasharray:26; stroke-dashoffset:26;
  transition:stroke-dashoffset .38s var(--ease) .04s;
}
.permiso--nec input:checked ~ .permiso__caja { background:var(--rojo); border-color:var(--rojo); }
.permiso--opc input:checked ~ .permiso__caja { background:var(--naranja); border-color:var(--naranja); }
.permiso input:checked ~ .permiso__caja svg { stroke-dashoffset:0; }

.permiso__cuerpo { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.permiso__eti {
  align-self:flex-start;
  font-size:.63rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:.14rem .5rem; border-radius:999px;
  background:var(--rojo); color:var(--crema);
}
.permiso__eti--opc { background:var(--crema-3); color:var(--tinta-2); }
.permiso__t { font-weight:600; font-size:1rem; line-height:1.3; color:var(--tinta); }

/* Una línea que dice de qué va el permiso, y el texto entero debajo, plegado.

   Antes el texto completo iba dentro de la casilla, en una caja de siete
   líneas con scroll propio. Dos problemas: una caja que se desplaza dentro de
   una etiqueta que además es un botón se pelea con el dedo —tocarla para leer
   marcaba la casilla—, y catorce líneas de jerga entre el título y el botón
   son lo que hace que nadie lea ni el título.

   Plegado, la decisión de leerlo sigue siendo de quien acepta —que es donde la
   ley la pone— pero deja de estorbarle a quien ya decidió. `<details>` lo hace
   nativo: sin JavaScript, con teclado, y el lector de pantalla lo anuncia. */
.permiso__resumen {
  font-size:.83rem; line-height:1.45; color:var(--tinta-2); font-weight:300;
}

.legal { margin:-.35rem 0 .1rem; }
.legal summary {
  display:flex; align-items:center; gap:.4rem;
  padding:.42rem .2rem; cursor:pointer; list-style:none;
  font-size:.8rem; font-weight:500; color:var(--tinta-2);
  text-decoration:underline; text-decoration-color:var(--crema-3);
  text-underline-offset:3px;
  transition:color var(--d-rapido) var(--ease);
}
.legal summary::-webkit-details-marker { display:none; }
.legal summary::before {
  content:''; flex:none; width:8px; height:8px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform var(--d-rapido) var(--ease);
}
.legal[open] summary::before { transform:rotate(-135deg) translate(-2px,-2px); }
.legal summary:hover { color:var(--rojo); }
.legal summary:focus-visible { outline:2px solid var(--naranja); outline-offset:2px;
                               border-radius:4px; }
.legal--opc summary:hover { color:var(--naranja); }

/* El texto completo. Va pequeño pero NO gris claro: es lo que la persona está
   aceptando y tiene que poder leerse. 4.7:1 sobre el crema. */
.legal__texto {
  font-size:.79rem; line-height:1.55; color:var(--tinta-2); font-weight:300;
  padding:.5rem .8rem .7rem; margin-top:.1rem;
  border-left:2px solid var(--crema-3);
  background:rgba(247,230,208,.42); border-radius:0 var(--radio-s) var(--radio-s) 0;
  animation:legal-abre var(--d-rapido) var(--ease) both;
}
@keyframes legal-abre { from { opacity:0; transform:translateY(-4px); } }

/* --------------------------------------------------------------------------
   10 · Los botones
   -------------------------------------------------------------------------- */
.boton {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  width:100%; padding:.95rem 1.4rem; border-radius:999px;
  background:linear-gradient(96deg, var(--rojo) 0%, var(--rojo-osc) 100%);
  color:var(--crema); font-weight:600; font-size:1.02rem; letter-spacing:.01em;
  box-shadow:0 12px 26px -12px rgba(176,30,36,.85);
  transition:transform var(--d-rapido) var(--ease),
             box-shadow var(--d-rapido) var(--ease),
             opacity var(--d-rapido) var(--ease);
  margin-top:.2rem;
}
.boton svg { width:19px; height:19px; fill:none; stroke:currentColor;
             stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.boton:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(176,30,36,.9); }
.boton:active:not(:disabled) { transform:translateY(0) scale(.985); }
.boton:disabled { opacity:.42; box-shadow:none; cursor:not-allowed; }
.boton:focus-visible { outline:2px solid var(--naranja); outline-offset:3px; }

/* El barrido de luz. Va en un ::after y solo cuando el botón está vivo: en uno
   deshabilitado insinuaría que se puede pulsar. */
.boton::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(calc(90deg + var(--diag)),
    transparent 30%, rgba(255,255,255,.26) 50%, transparent 70%);
  transform:translateX(-130%);
}
.boton:not(:disabled)::after { animation:barrido 4.6s var(--ease-io) 1.4s infinite; }
@keyframes barrido { 0%,72% { transform:translateX(-130%); } 100% { transform:translateX(130%); } }

.boton--premio {
  background:linear-gradient(96deg, var(--naranja) 0%, var(--rojo) 96%);
  box-shadow:0 12px 26px -12px rgba(240,144,30,.9);
}
.boton--premio svg { fill:currentColor; stroke-width:1.2; }

.boton--fantasma {
  background:transparent; color:var(--tinta-2);
  border:1.5px solid var(--linea); box-shadow:none; font-weight:500;
}
.boton--fantasma::after { display:none; }
.boton--fantasma:hover { background:var(--crema); color:var(--tinta); transform:none; box-shadow:none; }

.botonera { display:flex; gap:.6rem; margin-top:.2rem; }
.botonera .boton { margin-top:0; }
.botonera .boton--fantasma { flex:0 0 auto; width:auto; padding-inline:1.2rem; }

.boton--cargando { pointer-events:none; }
.boton--cargando span { opacity:.45; }
.boton--cargando svg { animation:girar .8s linear infinite; }

.salida {
  align-self:center; margin-top:.15rem;
  font-size:.86rem; color:var(--tinta-3); font-weight:400;
  text-decoration:underline; text-underline-offset:3px;
  transition:color var(--d-rapido) var(--ease);
}
.salida:hover { color:var(--rojo); }

/* --------------------------------------------------------------------------
   11 · El teléfono
   -------------------------------------------------------------------------- */
.tel { display:flex; gap:.55rem; }

.tel__pais { position:relative; flex:0 0 8.4rem; }
.tel__pais select {
  width:100%; height:100%; padding:.9rem 2rem .9rem .9rem;
  border-radius:var(--radio-s); border:1.5px solid var(--linea);
  background:var(--crema); font-weight:500; font-size:1rem;
  appearance:none; cursor:pointer;
  transition:border-color var(--d-rapido) var(--ease);
}
.tel__flecha {
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  width:17px; height:17px; fill:none; stroke:var(--tinta-3); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; pointer-events:none;
}
.tel__num {
  flex:1 1 auto; min-width:0;
  padding:.9rem 1rem; border-radius:var(--radio-s);
  border:1.5px solid var(--linea); background:var(--crema);
  font-size:1.22rem; font-weight:600; letter-spacing:.035em;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--d-rapido) var(--ease),
             box-shadow var(--d-rapido) var(--ease);
}
.tel__num::placeholder { color:var(--arena); font-weight:400; letter-spacing:.02em; }
.tel__num:focus, .tel__pais select:focus {
  outline:none; border-color:var(--naranja);
  box-shadow:0 0 0 3px rgba(240,144,30,.16);
}

.campo { display:flex; flex-direction:column; gap:.35rem; }
.campo__eti { font-size:.84rem; font-weight:500; color:var(--tinta-2); }
.campo__eti em { font-style:normal; color:var(--tinta-3); font-weight:400; }
.campo input {
  padding:.82rem 1rem; border-radius:var(--radio-s);
  border:1.5px solid var(--linea); background:var(--crema); font-size:1rem;
  transition:border-color var(--d-rapido) var(--ease), box-shadow var(--d-rapido) var(--ease);
}
.campo input::placeholder { color:var(--arena); }
.campo input:focus {
  outline:none; border-color:var(--naranja); box-shadow:0 0 0 3px rgba(240,144,30,.16);
}

/* --------------------------------------------------------------------------
   12 · El recibo dibujado
   -------------------------------------------------------------------------- */
.recibo { position:relative; display:flex; justify-content:center; padding:.4rem 0 .2rem; }

.recibo__papel {
  width:11.5rem; padding:.85rem .9rem 1rem;
  background:#fff; color:var(--tinta-3);
  font-size:.56rem; line-height:1.5; text-align:center;
  box-shadow:0 8px 22px -10px rgba(42,29,24,.4);
  transform:rotate(calc(var(--diag) * -.42));
  /* El borde dentado de abajo, como el papel térmico cortado. */
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),
    94% 100%,88% calc(100% - 5px),82% 100%,76% calc(100% - 5px),70% 100%,
    64% calc(100% - 5px),58% 100%,52% calc(100% - 5px),46% 100%,
    40% calc(100% - 5px),34% 100%,28% calc(100% - 5px),22% 100%,
    16% calc(100% - 5px),10% 100%,4% calc(100% - 5px),0 100%);
  animation:mecer 5.5s var(--ease-suave) infinite alternate;
}
@keyframes mecer {
  to { transform:rotate(calc(var(--diag) * -.18)) translateY(-3px); }
}
.recibo__marca { font-weight:700; color:var(--tinta-2); letter-spacing:.03em; }
.recibo__nit { margin-bottom:.35rem; }

/* El número, que es lo único que importa de este dibujo. Va resaltado y late:
   la mirada tiene que caer ahí antes de leer una palabra. */
.recibo__num {
  display:inline-flex; align-items:baseline; gap:.25rem;
  padding:.16rem .5rem; border-radius:6px;
  background:rgba(251,210,75,.4);
  box-shadow:0 0 0 1.5px var(--naranja);
  animation:señalar 2.6s var(--ease-suave) infinite;
}
.recibo__num em { font-style:normal; font-size:.5rem; color:var(--tinta-2); }
.recibo__num b { font-size:.86rem; color:var(--rojo); letter-spacing:.06em;
                 font-variant-numeric:tabular-nums; }
@keyframes señalar {
  50% { background:rgba(251,210,75,.75); box-shadow:0 0 0 2.5px var(--naranja); }
}

.recibo__linea { border-top:1px dashed var(--crema-3); margin:.45rem 0; }
.recibo__fila { display:flex; justify-content:space-between; gap:.5rem; margin-bottom:.24rem; }
.recibo__fila span { height:4px; border-radius:2px; background:var(--crema-2); }
.recibo__fila span:first-child { flex:1 1 auto; }
.recibo__fila span:last-child  { flex:0 0 1.6rem; }

/* EL TOTAL, resaltado igual que el número.

   Los renglones del medio siguen siendo barras grises —qué se comió no importa
   acá— pero el total ya no puede serlo: desde que el registro tecleado lo pide
   como prueba, este dibujo tiene que contestar DOS preguntas, «¿cuál número?»
   y «¿cuál total?». Con una sola señalada, la segunda casilla se queda sin
   explicación y la gente escribe ahí el número otra vez.

   La animación va desfasada medio ciclo respecto al número: las dos latiendo a
   la vez se leen como un solo bloque parpadeando, y turnándose se leen como
   dos cosas distintas, que es lo que son. */
.recibo__fila--total { align-items:baseline; margin-top:.1rem; }
.recibo__fila--total span {
  height:auto; background:none; font-size:.5rem; font-weight:700;
  letter-spacing:.08em; color:var(--tinta-2); flex:0 0 auto;
}
.recibo__total {
  padding:.14rem .4rem; border-radius:6px;
  background:rgba(251,210,75,.4);
  box-shadow:0 0 0 1.5px var(--naranja);
  font-size:.72rem; color:var(--rojo); letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
  animation:señalar 2.6s var(--ease-suave) 1.3s infinite;
}

/* Las dos flechitas manuscritas que salen del papel hacia sus campos. Son
   pseudo-elementos sobre el contenedor, no dibujos: en un teléfono de 360 px
   el papel ya ocupa casi todo y una flecha de verdad no cabría. */
.recibo__senal {
  position:absolute; width:1.9rem; height:1.9rem; pointer-events:none;
  border-bottom:1.6px dashed var(--naranja);
  opacity:.55;
}
.recibo__senal--num {
  top:2.1rem; right:calc(50% - 7.4rem);
  border-right:1.6px dashed var(--naranja);
  border-bottom-right-radius:12px;
}
.recibo__senal--tot {
  bottom:1.1rem; left:calc(50% - 7.4rem);
  border-left:1.6px dashed var(--naranja);
  border-bottom-left-radius:12px;
}
@media (max-width:25rem) { .recibo__senal { display:none; } }

/* --------------------------------------------------------------------------
   13 · El número de la factura
   -------------------------------------------------------------------------- */
.factura {
  width:100%; padding:1rem; border-radius:var(--radio-s);
  border:2px solid var(--linea); background:var(--crema);
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.7rem,1.3rem + 2vw,2.2rem);
  letter-spacing:.16em; text-align:center;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--d-rapido) var(--ease), box-shadow var(--d-rapido) var(--ease);
}
.factura::placeholder { color:var(--crema-3); letter-spacing:.16em; }
.factura:focus {
  outline:none; border-color:var(--naranja);
  box-shadow:0 0 0 4px rgba(240,144,30,.18);
}

/* --------------------------------------------------------------------------
   13b · Los dos datos del recibo, uno al lado del otro

   En fila y no uno debajo del otro porque son UNA sola cosa —«copia el recibo»—
   y en dos renglones se leen como dos trámites. En pantallas muy angostas se
   apilan solos: dos campos de 40 mm son peores que dos renglones.
   -------------------------------------------------------------------------- */
.par { display:flex; gap:.6rem; align-items:stretch; }
/* `flex-end` y no el reparto por defecto: si una etiqueta parte en dos líneas
   y la otra no —«Número de la factura» lo hacía a 390 px— los dos campos
   quedaban a alturas distintas y se leían como si uno estuviera hundido.
   Anclados abajo, las cajas se alinean pase lo que pase con el texto. */
.par > .campo { flex:1 1 0; min-width:0; justify-content:flex-end; }
@media (max-width:23.5rem) { .par { flex-direction:column; gap:.7rem; } }

.campo--fuerte .campo__eti {
  font-size:.74rem; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--tinta-3); line-height:1.25;
}

/* El número de la factura se diseñó cuando era UN campo a todo el ancho: 2,2rem
   con 0,16em de espaciado. Partido en dos, ese mismo tamaño se sale de la caja
   —el marcador «$47.000» salía recortado en «$47.00(»— así que dentro del par
   encoge. Es el mismo campo, no otro: solo deja de ser el único. */
.par .factura {
  padding:.85rem .6rem;
  font-size:clamp(1.15rem,.92rem + 1.3vw,1.5rem);
  letter-spacing:.05em;
}
.par .factura::placeholder { letter-spacing:.05em; }

/* El campo del total lleva el peso adentro, no en el placeholder. Un `$` que
   desaparece al escribir es un `$` que no estaba: la gente lo teclea otra vez
   y el campo acaba con «$$47.000». */
.factura--pesos { display:flex; align-items:center; gap:.1rem; padding-left:.7rem; }
.factura--pesos i {
  font-style:normal; font-weight:600; color:var(--arena);
  font-size:1.05rem; line-height:1;
}
.factura--pesos input {
  flex:1 1 auto; min-width:0; width:100%;
  border:0; background:none; padding:0; outline:none;
  font:inherit; letter-spacing:inherit; color:inherit; text-align:inherit;
}
.factura--pesos input::placeholder { color:var(--crema-3); letter-spacing:.08em; }
.factura--pesos:focus-within {
  border-color:var(--rojo); background:#fff;
  box-shadow:0 0 0 4px rgba(176,30,36,.13);
}

/* --------------------------------------------------------------------------
   13c · La pista del enlace de WhatsApp

   Solo aparece cuando el enlace trae un teléfono dentro. Dice los cuatro
   últimos dígitos, nunca el número: los cuatro últimos ya los está viendo
   quien tiene la conversación abierta, y el número entero no tendría por qué
   salir de acá si el enlace lo reenviaron.
   -------------------------------------------------------------------------- */
.pista {
  display:flex; align-items:flex-start; gap:.5rem;
  padding:.62rem .8rem; border-radius:var(--radio-s);
  background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.3);
  font-size:.85rem; line-height:1.45; color:var(--tinta-2);
}
.pista svg {
  flex:none; width:17px; height:17px; margin-top:.14rem;
  fill:none; stroke:#128C43; stroke-width:2; stroke-linecap:round;
}
.pista b { color:var(--tinta); font-weight:700; font-variant-numeric:tabular-nums;
           letter-spacing:.04em; }

/* --------------------------------------------------------------------------
   14 · Avisos
   -------------------------------------------------------------------------- */
.aviso {
  display:flex; gap:.55rem; align-items:flex-start;
  padding:.72rem .9rem; border-radius:var(--radio-s);
  background:rgba(176,30,36,.08); border:1px solid rgba(176,30,36,.25);
  color:var(--rojo-osc); font-size:.88rem; line-height:1.45;
  animation:sacudir .42s var(--ease-io) both;
}
.aviso::before { content:'!'; flex:none; width:18px; height:18px; margin-top:.06rem;
  border-radius:50%; background:var(--rojo); color:#fff;
  font-size:.72rem; font-weight:700; display:grid; place-items:center; }
.aviso--suave {
  background:rgba(240,144,30,.1); border-color:rgba(240,144,30,.3); color:var(--tinta-2);
  animation:none;
}
.aviso--suave::before { background:var(--naranja); content:'i'; font-style:italic; }
@keyframes sacudir {
  0%,100% { transform:translateX(0); }
  22% { transform:translateX(-6px); } 44% { transform:translateX(5px); }
  66% { transform:translateX(-3px); } 88% { transform:translateX(2px); }
}

/* --------------------------------------------------------------------------
   15 · El resultado
   -------------------------------------------------------------------------- */
.paso--premio { text-align:center; align-items:center; }
.paso--premio .paso__ojo { margin-bottom:-.35rem; }

.medalla { position:relative; width:76px; height:76px; margin:.3rem auto .1rem; }
.medalla svg {
  position:relative; width:100%; height:100%;
  fill:var(--naranja); stroke:none;
  filter:drop-shadow(0 6px 16px rgba(240,144,30,.55));
  animation:sello .85s var(--ease) both;
}
/* El halo que se expande una vez, como el golpe de un sello. */
.medalla__halo {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--amarillo);
  animation:onda 1.6s var(--ease) .25s both;
}
@keyframes sello {
  0% { opacity:0; transform:scale(.3) rotate(-28deg); }
  62% { transform:scale(1.14) rotate(6deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes onda {
  0% { opacity:.9; transform:scale(.6); }
  100% { opacity:0; transform:scale(2.1); }
}

.listo__gano {
  font-family:var(--display); font-weight:700; line-height:1;
  font-size:clamp(2.6rem,2rem + 3.4vw,3.6rem); letter-spacing:-.03em;
  color:var(--rojo);
  font-variant-numeric:tabular-nums;
}
.listo__gano em {
  display:block; font-style:normal; font-family:var(--sans);
  font-size:.9rem; font-weight:500; letter-spacing:.19em; text-transform:uppercase;
  color:var(--naranja); margin-top:.3rem;
}
.listo__d { color:var(--tinta-2); font-size:.92rem; font-weight:300; text-wrap:balance; }

.saldo {
  display:flex; align-items:baseline; justify-content:center; gap:.45rem;
  width:100%; padding:.85rem 1rem; border-radius:var(--radio-s);
  background:var(--crema); border:1px solid var(--linea);
}
.saldo__eti { font-size:.82rem; color:var(--tinta-3); }
.saldo__n {
  font-family:var(--display); font-size:1.55rem; font-weight:700; color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.saldo__u { font-size:.82rem; color:var(--tinta-3); }

.meta { width:100%; }
.meta__barra {
  height:9px; border-radius:999px; background:var(--crema-2);
  overflow:hidden; box-shadow:inset 0 1px 3px rgba(42,29,24,.13);
}
.meta__barra span {
  display:block; height:100%; border-radius:999px; width:0;
  background:linear-gradient(90deg, var(--naranja), var(--amarillo));
  transition:width 1.1s var(--ease) .35s;
  position:relative; overflow:hidden;
}
.meta__barra span::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(calc(90deg + var(--diag)),
    transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  animation:barrido 2.8s var(--ease-io) 1.5s infinite;
}
.meta__t { margin-top:.45rem; font-size:.85rem; color:var(--tinta-2); }
.meta__t b { color:var(--rojo); font-weight:600; }

.alcanza { width:100%; }
.alcanza__t {
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-3); margin-bottom:.45rem;
}
.alcanza ul { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.alcanza li {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.34rem .72rem; border-radius:999px;
  background:rgba(240,144,30,.13); border:1px solid rgba(240,144,30,.35);
  font-size:.83rem; font-weight:500; color:var(--tinta);
  animation:entrar-arriba .6s var(--ease) both;
}
.alcanza li i {
  font-style:normal; font-size:.72rem; color:var(--naranja); font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   16 · Pausa / error
   -------------------------------------------------------------------------- */
.pausa { text-align:center; padding:1.2rem 0; display:flex; flex-direction:column;
         gap:.8rem; align-items:center; }
.pausa svg {
  width:46px; height:46px; fill:none; stroke:var(--naranja); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --------------------------------------------------------------------------
   17 · El confeti
   -------------------------------------------------------------------------- */
.confeti { position:fixed; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
/* El mismo de «¡Entregado!» en `pedido/pedido.css`: al tocar uno, tocar el otro. */
.confeti i {
  position:absolute; top:-12px; width:9px; height:14px; border-radius:2px;
  animation:caer linear forwards;
}
@keyframes caer { to { transform:translateY(110vh) rotate(720deg); } }

/* --------------------------------------------------------------------------
   18 · El pie
   -------------------------------------------------------------------------- */
.pie {
  display:flex; gap:.6rem; justify-content:center; align-items:center;
  font-size:.8rem; color:rgba(253,244,231,.4);
}
.pie a { color:inherit; text-decoration:none; transition:color var(--d-rapido) var(--ease); }
.pie a:hover { color:var(--amarillo); }

/* --------------------------------------------------------------------------
   19 · Pantalla muy angosta
   -------------------------------------------------------------------------- */
@media (max-width:23.5rem) {
  .tel__pais { flex-basis:7.2rem; }
  .tel__pais select { padding-left:.65rem; font-size:.92rem; }
  .permiso { padding:.8rem .85rem; gap:.7rem; }
  .hilo__t b { font-size:.63rem; letter-spacing:.05em; }
}

/* --------------------------------------------------------------------------
   20 · Movimiento reducido

   Se apaga TODO lo decorativo, no se atenúa. Quien pide esto muchas veces es
   porque el movimiento le produce mareo: media animación sigue mareando.
   Lo único que se conserva es el trazo del palomazo, que no se mueve por la
   pantalla y es la única señal de que la casilla quedó marcada.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .permiso__caja svg { transition-duration:.3s !important; }
  .meta__barra span { transition-duration:.4s !important; }
  .fondo__luz { animation:none; }
}

/* --------------------------------------------------------------------------
   21 · El botón principal en pantallas de 375 px

   «Sumar mis puntos» necesitaba 132 px y tenía 131,4: se partía en dos líneas
   por SEIS DÉCIMAS de píxel, y el botón pasaba de 50 a 83 px de alto. No se
   arregla acortando el texto —el siguiente que quepa justo lo vuelve a
   romper—; se arregla dándole aire, que es lo que sobra: los 22,4 px de
   costado de cada botón son generosos para un teléfono estrecho.
   -------------------------------------------------------------------------- */
@media (max-width: 23.5rem) {
  .botonera .boton { padding-inline: 1rem; }
  .botonera .boton--fantasma { padding-inline: .95rem; }
}


/* --------------------------------------------------------------------------
   22 · LA BOLETA — qué compra se está registrando

   Vive FUERA de la tarjeta, encima de todos los pasos. Antes esto iba dentro
   del primero y desaparecía al pasar al segundo, que es justo donde hace más
   falta: quien está tecleando su número tiene que seguir viendo por qué lo
   está tecleando.

   Es una cifra de entrada y una de salida con una flecha en medio —«esto
   compraste, esto ganas»— y no dos renglones sueltos: puestas en fila la
   relación se lee sin leer, que es lo único que hay que entender acá.

   Tres caras según de dónde vino la persona, y se distinguen por el color del
   borde y el icono, no por el texto: quien llega ya sabe de dónde viene.
   -------------------------------------------------------------------------- */
.boleta {
  position:relative; overflow:hidden;
  padding:1rem 1.1rem .9rem; border-radius:var(--radio);
  background:linear-gradient(140deg, rgba(255,251,244,.97), rgba(247,230,208,.93));
  border:1.5px solid rgba(240,144,30,.4);
  box-shadow:var(--sombra-m);
  animation:boleta-cae var(--d-medio) var(--ease) both;
}
@keyframes boleta-cae { from { opacity:0; transform:translateY(-10px) scale(.97); } }

/* El mismo filo diagonal de la tarjeta, para que las dos se lean como piezas
   del mismo juego y no como una caja pegada encima de otra. */
.boleta__filo {
  position:absolute; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg, var(--rojo), var(--naranja), var(--amarillo));
  transform:skewY(calc(var(--diag) * -.18)); transform-origin:left;
}

.boleta__via {
  display:flex; align-items:center; gap:.45rem;
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3);
}
.boleta__ico {
  flex:none; display:grid; place-items:center; width:22px; height:22px;
  border-radius:7px; background:var(--rojo); color:var(--crema);
}
.boleta__ico svg { width:13px; height:13px; fill:none; stroke:currentColor;
                   stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
/* El camino de WhatsApp se marca en verde. Es el único sitio de toda la marca
   donde entra un color de fuera, y entra porque es el color por el que la
   persona acaba de llegar: reconocerlo es más rápido que leer «WhatsApp». */
.boleta--bot { border-color:rgba(37,211,102,.45); }
.boleta--bot .boleta__ico { background:#128C43; }
.boleta--bot .boleta__filo {
  background:linear-gradient(90deg, #128C43, #25D366, var(--amarillo));
}

.boleta__cifras {
  display:flex; align-items:center; gap:.7rem; margin-top:.5rem;
}
.boleta__monto, .boleta__premio { display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.boleta__premio { margin-left:auto; text-align:right; }
.boleta__eti {
  font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-3);
}
.boleta__monto strong, .boleta__premio strong {
  font-family:var(--display); font-weight:700; line-height:1.05;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.boleta__monto strong {
  font-size:clamp(1.28rem,1.05rem + 1vw,1.6rem); color:var(--tinta);
}
.boleta__premio strong {
  font-size:clamp(1.28rem,1.05rem + 1vw,1.6rem); color:var(--rojo);
}
.boleta__flecha { flex:none; color:var(--arena); }
.boleta__flecha svg {
  width:20px; height:20px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.boleta__pie {
  margin-top:.55rem; padding-top:.5rem; border-top:1px dashed var(--crema-3);
  font-size:.79rem; line-height:1.4; color:var(--tinta-2); font-weight:300;
}

@media (max-width:23.5rem) {
  .boleta { padding:.85rem .9rem .8rem; }
  .boleta__cifras { gap:.45rem; }
  .boleta__flecha svg { width:16px; height:16px; }
}

/* --------------------------------------------------------------------------
   23 · Quien vuelve — «¿lo sumamos a tu número?»
   -------------------------------------------------------------------------- */
.conocido { display:flex; flex-direction:column; gap:.8rem; }
.conocido__tel {
  font-family:var(--display); font-weight:700; text-align:center;
  font-size:clamp(1.5rem,1.25rem + 1.2vw,1.85rem); letter-spacing:.05em;
  color:var(--tinta); font-variant-numeric:tabular-nums;
  padding:.7rem 1rem; border-radius:var(--radio-s);
  background:var(--crema); border:1.5px solid var(--linea);
}

/* --------------------------------------------------------------------------
   24 · Los premios y los códigos

   Los premios que alcanzan llevan su botón y el borde naranja; los que no, el
   motivo en gris —«te faltan 1.200 puntos», «se agotó»—. Un botón que después
   contesta «no te alcanza» es peor que uno apagado que ya lo dice.
   -------------------------------------------------------------------------- */
.premios, .codigos { width:100%; text-align:left; }
.premios__t {
  font-size:.72rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-3); margin-bottom:.45rem; text-align:center;
}
.premios__lista, .codigos__lista { list-style:none; display:flex; flex-direction:column; gap:.45rem; }

.premio {
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:.15rem .7rem;
  padding:.7rem .85rem; border-radius:var(--radio-s);
  background:var(--crema); border:1px solid var(--linea);
  animation:entrar-arriba .5s var(--ease) both;
}
.premio--puede { border-color:rgba(240,144,30,.5); background:rgba(240,144,30,.08); }
.premio__n { font-weight:600; color:var(--tinta); line-height:1.3; }
.premio__c {
  font-size:.78rem; font-weight:700; color:var(--tinta-3);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.premio__m { grid-column:1 / -1; font-size:.78rem; color:var(--tinta-3); line-height:1.4; }
.premio__b {
  padding:.45rem .95rem; border-radius:999px; white-space:nowrap;
  font-size:.86rem; font-weight:600;
  background:linear-gradient(96deg, var(--naranja), var(--rojo));
  color:var(--crema);
  transition:transform var(--d-rapido) var(--ease), opacity var(--d-rapido) var(--ease);
}
.premio__b:active:not(:disabled) { transform:scale(.96); }
.premio__b:disabled { opacity:.5; }
.premio__b--no { background:transparent; color:var(--tinta-2); border:1px solid var(--linea); }
.premio__confirma {
  grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:.45rem;
  margin-top:.35rem; font-size:.85rem; color:var(--tinta-2);
}

.codigo {
  display:flex; align-items:center; justify-content:space-between; gap:.7rem;
  padding:.65rem .9rem; border-radius:var(--radio-s);
  background:#fff; border:1.5px dashed var(--naranja);
}
.codigo b {
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.08rem;
  letter-spacing:.16em; color:var(--tinta);
}
.codigo span { font-size:.76rem; line-height:1.35; color:var(--tinta-3); text-align:right; }

/* El código grande del premio. Letra de máquina y espaciado: la cajera lo copia
   letra por letra desde esta pantalla, y en una fuente proporcional una M y una
   N se funden. */
.canje-codigo {
  font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700;
  font-size:clamp(2.1rem,1.6rem + 3vw,2.9rem); letter-spacing:.2em;
  color:var(--rojo); padding:.55rem 1.1rem .55rem 1.3rem;
  border-radius:var(--radio-s); background:#fff; border:2px dashed var(--naranja);
  font-variant-numeric:tabular-nums;
}