@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · COMPONENTES (F3-T02 · dirección de arte)
   Fichero: web/estilos/componentes.css
   -----------------------------------------------------------------------------------------
   QUÉ ES: los componentes reutilizables del sitio: botones con presión, marquesina de texto,
   sello de tinta (club de sellos), cinta de precaución «CUIDADO BURGER», pegatinas, subrayado
   de rotulador, rótulo stencil, marcos tipo sello/stencil, tarjetas y paneles de cristal,
   cursor propio, texturas (grano procedural + trama real del negocio) e iconos menores.

   DEPENDE DE: web/estilos/tokens.css (F3-T01). Aquí NO se define ningún color, fuente ni
   duración propios: todo entra por var(--...). Se reutilizan .sp-cristal, .sp-display,
   .sp-rotulo y .sp-contorno tal como están; no se redefinen.

   REGLAS DE ESTE FICHERO
   1. Cero HEX sueltos. Las transparencias van en rgba() porque un HEX no puede derivarse con
      var(): cada rgba() es una mezcla del color de token correspondiente sobre transparente
      (mismo criterio que tokens.css §5) y lleva su origen comentado.
      Única excepción deliberada: el SVG del cursor (data URI), que no puede leer var(); su
      tinta va literal y codificada como %23E3BB29 (= --sp-mostaza). Documentado en §8.
   2. Nada de `transition: all`: las propiedades animadas se enumeran una a una.
   3. prefers-reduced-motion: además de los tokens (que anulan duraciones), aquí se detienen
      la marquesina y la cinta móvil, y el sello aparece ya estampado sin gesto.
   4. Contraste: las parejas citadas son las medidas en MARCA.md §2.2.
   ========================================================================================= */


/* =========================================================================================
   0. BASE — <picture> transparente para el layout (F8-T02)
   -----------------------------------------------------------------------------------------
   Todas las fotos con formato moderno van dentro de un <picture> con su <img> de respaldo.
   Sin esta regla, el <picture> pasaría a ser el hijo de la rejilla/flex y el <img> quedaría
   dentro de una caja propia: se romperían la rejilla de la carta (acto 7), el hero y las
   tarjetas del sistema. Con `display: contents` el <picture> no genera caja y el <img>
   conserva EXACTAMENTE el sitio y las reglas que ya tenía (ninguna hoja de estilo necesita
   saber que existe). El único caso que necesita un <picture> con caja propia lo dice su
   propia regla: `#acto-6 .a6-burger picture { display: block; }` (sec-06.css).
   ========================================================================================= */
picture {
  display: contents;
}


/* =========================================================================================
   1. BOTONES — .sp-btn + variantes
   Primario granate con tinta blanca (9,65:1) · secundario mostaza con tinta negra (11,41:1) ·
   fantasma mostaza sobre negro (11,41:1). El granate NUNCA va como texto sobre negro.
   Altura mínima táctil 48px (--alto-tactil-min): el pedido en mesa se usa desde el móvil.
   ========================================================================================= */
.sp-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alto-tactil-min);
  padding: var(--esp-3) var(--esp-6);
  border: 2px solid transparent;
  border-radius: var(--radio-sm);            /* .25rem: herencia literal del sitio actual */
  font-family: var(--fuente-cta);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-cta);
  line-height: var(--lh-rotulo);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color var(--transicion-rapida),
    border-color var(--transicion-rapida),
    color var(--transicion-rapida),
    box-shadow var(--transicion-rapida),
    transform var(--transicion-rapida);
}

/* Efecto de PRESIÓN: el botón se hunde 2px y su sombra se comprime (gesto de tampón).
   :active es el estado real (ratón/dedo); .is-activo existe para poder demostrarlo y probarlo. */
.sp-btn:active,
.sp-btn.is-activo {
  transform: translateY(2px);
  transition-duration: var(--dur-1);
}

/* --- Primario: granate, tinta blanca --- */
.sp-btn--primario {
  background-color: var(--sp-granate);
  color: var(--tinta-sobre-granate);          /* 9,65:1 AAA */
  box-shadow: var(--sombra-granate);
}
.sp-btn--primario:hover,
.sp-btn--primario.is-hover {
  background-color: var(--sp-granate-hover);  /* blanco sobre el granate profundo: 12,30:1 */
}
.sp-btn--primario:active,
.sp-btn--primario.is-activo {
  background-color: var(--sp-granate-hover);
  box-shadow: 0 2px 0 rgba(137, 13, 55, .55); /* granate (--sp-granate) al 55%: sombra apretada */
}

/* --- Secundario: mostaza, tinta negra --- */
.sp-btn--mostaza {
  background-color: var(--sp-mostaza);
  color: var(--tinta-sobre-mostaza);          /* 11,41:1 AAA */
  box-shadow: var(--sombra-mostaza);
}
.sp-btn--mostaza:hover,
.sp-btn--mostaza.is-hover {
  background-color: var(--sp-mostaza-clara);
}
.sp-btn--mostaza:active,
.sp-btn--mostaza.is-activo {
  background-color: var(--sp-mostaza-clara);
  box-shadow: 0 2px 0 rgba(227, 187, 41, .5); /* mostaza (--sp-mostaza) al 50% */
}

/* --- Fantasma: filete mostaza sobre negro --- */
.sp-btn--fantasma {
  background-color: transparent;
  border-color: var(--sp-mostaza);
  color: var(--sp-mostaza);                   /* 11,41:1 sobre negro */
}
.sp-btn--fantasma:hover,
.sp-btn--fantasma.is-hover { background-color: rgba(227, 187, 41, .12); }  /* mostaza al 12% */
.sp-btn--fantasma:active,
.sp-btn--fantasma.is-activo { background-color: rgba(227, 187, 41, .22); } /* mostaza al 22% */

/* --- Cristal: para ir DENTRO de un panel .sp-cristal --- */
.sp-btn--cristal {
  background-color: rgba(255, 255, 255, .12); /* blanco (--sp-blanco) al 12% */
  border-color: rgba(255, 255, 255, .3);      /* = --cristal-borde-resalte */
  color: var(--cristal-tinta);
  -webkit-backdrop-filter: blur(var(--cristal-blur-suave));
  backdrop-filter: blur(var(--cristal-blur-suave));
}
.sp-btn--cristal:hover,
.sp-btn--cristal.is-hover { background-color: rgba(255, 255, 255, .2); }
.sp-btn--cristal:active,
.sp-btn--cristal.is-activo { background-color: rgba(255, 255, 255, .08); }

/* --- Tamaño --- */
.sp-btn--bloque { width: 100%; }

/* --- Foco visible: anillo mostaza (--foco-anillo); nunca se quita sin sustituto.
       .is-foco permite demostrar el estado en la página de componentes. --- */
.sp-btn:focus-visible,
.sp-btn.is-foco {
  outline: none;
  box-shadow: var(--foco-anillo);
}

/* --- Deshabilitado: superficie humo + tinta gris (exento de contraste por WCAG 1.4.3) --- */
.sp-btn[disabled],
.sp-btn.is-deshabilitado {
  background-color: var(--estado-deshabilitado-fondo);
  border-color: transparent;
  color: var(--estado-deshabilitado-tinta);
  opacity: var(--estado-deshabilitado-opacidad);
  box-shadow: var(--sombra-nula);
  cursor: not-allowed;
  transform: none;
}

/* Iconos dentro de botones: tamaño óptico */
.sp-btn .sp-icono { width: 1.15em; height: 1.15em; }


/* =========================================================================================
   2. MARQUESINA — banda de texto en movimiento (100 % CSS, sin JS)
   Estructura en HTML: .sp-marquesina > .sp-marquesina__via > 2 × .sp-marquesina__grupo
   (el 2.º grupo va aria-hidden="true": es la copia que cierra el bucle).
   El keyframe desplaza exactamente medio ancho (un grupo) → bucle sin salto.
   ========================================================================================= */
.sp-marquesina {
  --marquesina-velocidad: 26s;
  position: relative;
  overflow: hidden;
  padding: var(--esp-2) 0;
}
.sp-marquesina__via {
  display: flex;
  width: max-content;
  animation: sp-marquesina var(--marquesina-velocidad) linear infinite;
  will-change: transform;
}
.sp-marquesina:hover .sp-marquesina__via { animation-play-state: paused; } /* se detiene al posarse */
.sp-marquesina__grupo {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  padding-right: var(--esp-5);   /* = al gap: el fin de un grupo enlaza con el inicio del otro */
  white-space: nowrap;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-rotulo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
}
.sp-marquesina__punto { color: var(--tinta-acento); }   /* el «·» separador */

@keyframes sp-marquesina {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Variante tinta (calle sobre negro): texto mostaza con punto blanco */
.sp-marquesina--tinta { color: var(--tinta-acento); }
.sp-marquesina--tinta .sp-marquesina__punto { color: var(--tinta-principal); }

/* Variante cinta (banda maciza mostaza, tinta negra 11,41:1, punto granate) */
.sp-marquesina--cinta {
  background-color: var(--sp-mostaza);
  color: var(--tinta-sobre-mostaza);
}
.sp-marquesina--cinta .sp-marquesina__punto { color: var(--sp-granate); } /* adorno: 5,24:1, no es texto */

/* Variante lenta (para textos largos o fondos) */
.sp-marquesina--lenta { --marquesina-velocidad: 44s; }


/* =========================================================================================
   3. SELLO DE TINTA — .sp-sello (tampón) + .sp-casilla (casillas del club de sellos)
   Uso real: club de sellos (Fase 7, «cada pecado se marca con animación tipo sello»).
   La animación es una caída seca de tampón: entra grande y girado, golpea, rebota un 5 %
   y se asienta. El estado de reposo ES el estado final del keyframe: sin animación (o con
   reduced motion) el sello se ve idéntico, solo aparece sin gesto.
   ========================================================================================= */
.sp-sello {
  --sello-tam: 9rem;
  --sello-tinta: var(--sp-mostaza);
  --sello-giro: -9deg;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sello-tam);
  aspect-ratio: 1;                 /* círculo: la altura sigue al ancho */
  max-width: 100%;                 /* nunca desborda su casilla (club a 5 columnas en móvil) */
  transform: rotate(var(--sello-giro));
  color: var(--sello-tinta);
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
.sp-sello::before {                    /* aro exterior del tampón */
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: var(--radio-circulo);
  opacity: .92;
}
.sp-sello::after {                     /* aro interior punteado: tinta irregular */
  content: '';
  position: absolute;
  inset: var(--esp-4);                 /* el texto queda por dentro del punteado */
  border: 1px dashed currentColor;
  border-radius: var(--radio-circulo);
  opacity: .7;
}
.sp-sello__texto {
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-h6);
  line-height: var(--lh-compacto);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 0 var(--esp-3);
}
.sp-sello__sub {
  display: block;
  font-size: var(--fs-small);
  letter-spacing: .05em;    /* más apretado que un rótulo: cabe dentro del aro */
  opacity: .85;
}
.sp-sello--mini { --sello-tam: 3.5rem; }
.sp-sello--mini::after { inset: var(--esp-1); }
.sp-sello--mini .sp-sello__texto {
  font-size: var(--fs-small);
  letter-spacing: .08em;
  padding: 0 var(--esp-1);
}
.sp-sello--blanco { --sello-tinta: var(--sp-blanco); }

/* Estados de la animación */
.sp-sello.is-pendiente {               /* aún sin sellar: espera fuera de plano */
  opacity: 0;
  transform: scale(2.05) rotate(calc(var(--sello-giro) - 6deg));
}
.sp-sello.is-estampando {
  animation: sp-estampado var(--dur-4) var(--ease-entrada) both;
}
@keyframes sp-estampado {
  0%   { opacity: 0; transform: scale(2.05) rotate(calc(var(--sello-giro) - 6deg)); }
  36%  { opacity: 1; transform: scale(.9) rotate(calc(var(--sello-giro) + 2deg)); }
  58%  { transform: scale(1.06) rotate(calc(var(--sello-giro) - 2deg)); }
  76%  { transform: scale(.985) rotate(calc(var(--sello-giro) + 1deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--sello-giro)); }
}

/* Casilla del club (10 por tarjeta; la 10 se marca como premio) */
.sp-casilla {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;                                 /* deja al sello encogerse en móvil */
  padding: var(--esp-1);
  aspect-ratio: 1;
  border: 1px dashed rgba(227, 187, 41, .45);   /* mostaza al 45% */
  border-radius: var(--radio-md);
  background-color: rgba(255, 255, 255, .04);   /* blanco al 4% */
}
.sp-casilla.is-sellada {
  border-style: solid;
  border-color: rgba(227, 187, 41, .25);       /* mostaza al 25% */
}
.sp-casilla--premio {
  border-style: solid;
  border-color: var(--sp-mostaza);
  box-shadow: var(--sombra-mostaza);
  background-color: rgba(227, 187, 41, .08);    /* mostaza al 8% */
}


/* =========================================================================================
   4. CINTA DE PRECAUCIÓN — .sp-cinta («CUIDADO BURGER»)
   Banda diagonal tipo cinta de obra: mostaza con rayas negras a 45°, y el texto SIEMPRE sobre
   chip macizo mostaza con tinta negra (11,41:1): el texto nunca cae sobre una raya.
   Material producido en F3-T02 (MARCA §6.3/§8.4: la cinta «CUIDADO BURGER» no existía).
   Estructura: .sp-cinta > .sp-cinta__via > (.sp-cinta__grupo > .sp-cinta__texto ×N)
   La variante --movil necesita 2 grupos idénticos (igual que la marquesina).
   ========================================================================================= */
.sp-cinta {
  --cinta-giro: -1.8deg;
  overflow: hidden;
  transform: rotate(var(--cinta-giro));
}
.sp-cinta__via {
  display: flex;
  align-items: center;
  width: max-content;
  min-width: 100%;
  padding: var(--esp-2) var(--esp-4);
  background-color: var(--sp-mostaza);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0) 0 0.875rem,            /* franja mostaza (transparente sobre el fondo) */
    rgba(0, 0, 0, .85) 0.875rem 1.25rem     /* franja negra: negro Santo al 85% */
  );
  box-shadow: var(--sombra-sutil);
}
.sp-cinta__grupo {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  padding-right: var(--esp-4);
}
.sp-cinta__texto {
  flex: none;
  padding: var(--esp-1) var(--esp-3);
  background-color: var(--sp-mostaza);   /* chip macizo: aísla el texto de las rayas */
  color: var(--tinta-sobre-mostaza);     /* negro sobre mostaza: 11,41:1 */
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-cta);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  white-space: nowrap;
}
.sp-cinta--plana { transform: none; }
.sp-cinta--movil .sp-cinta__via {
  animation: sp-marquesina 34s linear infinite;   /* reutiliza el bucle de la marquesina */
}
.sp-cinta--movil:hover .sp-cinta__via { animation-play-state: paused; }


/* =========================================================================================
   5. PEGATINAS, SUBRAYADO DE ROTULADOR Y RÓTULO STENCIL
   Receta real de las pegatinas del negocio: blanco + granate y giradas unos grados
   (MARCA §6.3). Aquí se reutiliza como etiqueta de interfaz para categorías y flags.
   ========================================================================================= */
.sp-pegatina {
  --pegatina-giro: -3deg;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border: 2px solid var(--sp-granate);
  border-radius: var(--radio-sm);
  background-color: var(--sp-blanco);
  color: var(--sp-granate);              /* granate sobre blanco: 9,65:1 (inverso del CTA) */
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-small);
  line-height: var(--lh-rotulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(var(--pegatina-giro));
  box-shadow: var(--sombra-sutil);
}
.sp-pegatina--mostaza {
  background-color: var(--sp-mostaza);
  border-color: var(--sp-negro);
  color: var(--tinta-sobre-mostaza);     /* 11,41:1 */
}
.sp-pegatina--granate {
  background-color: var(--sp-granate);
  border-color: var(--sp-blanco);
  color: var(--tinta-sobre-granate);     /* 9,65:1 */
}
.sp-pegatina--der { --pegatina-giro: 2.5deg; }
.sp-pegatina--recta { --pegatina-giro: 0deg; }
.sp-pegatina--recorte {                  /* esquinas comidas: recorte de troquel */
  border: 0;
  clip-path: polygon(
    var(--esp-2) 0,
    100% 0,
    100% calc(100% - var(--esp-2)),
    calc(100% - var(--esp-2)) 100%,
    0 100%,
    0 var(--esp-2)
  );
}

/* Subrayado de rotulador: trazo SVG propio usado como MÁSCARA, pintado con el color de
   tinta (background-color) → el trazo puede tomar cualquier color de token sin llevar
   color embebido. Se aplica sobre una palabra con .sp-subrayado. */
.sp-subrayado {
  --trazo-rotulador: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15c26-5 46-3 68-4 20-1 38-3 57-2 20 1 36 3 57 1 14-1 32-5 52-4v10c-18 2-36-2-54 0-20 2-38-3-59-2-19 1-40 5-65 3-15-1-34-2-56 1z'/%3E%3C/svg%3E");
  position: relative;
  white-space: nowrap;
}
.sp-subrayado::after {
  content: '';
  position: absolute;
  left: -.06em;
  right: -.06em;
  bottom: -.12em;
  height: .4em;
  background-color: var(--sp-mostaza);
  -webkit-mask-image: var(--trazo-rotulador);
  mask-image: var(--trazo-rotulador);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}
.sp-subrayado--blanco::after { background-color: var(--sp-blanco); }
/* Granate como subrayado: SOLO ornamento sobre texto claro o bloques de color
   (granate sobre negro da 2,18:1: nunca lleva texto encima). */
.sp-subrayado--granate::after { background-color: var(--sp-granate); }

/* Rótulo stencil: se usa JUNTO a .sp-rotulo (solo añade el aire de plantilla) */
.sp-rotulo-stencil { letter-spacing: .24em; }


/* =========================================================================================
   6. MARCOS TIPO SELLO / STENCIL — tarjetas y bloques con lenguaje de calle
   ========================================================================================= */
.sp-marco-sello {
  position: relative;
  padding: var(--esp-5);
  background-color: var(--sup-elevada);
  border: var(--borde-marca);                  /* 3px granate: el borde real de las tarjetas de local */
  border-radius: var(--radio-sm);
}
.sp-marco-sello::after {                        /* filete punteado interior: matasellos */
  content: '';
  position: absolute;
  inset: var(--esp-2);
  border: 2px dashed rgba(227, 187, 41, .5);    /* mostaza al 50% */
  border-radius: var(--radio-sm);
  pointer-events: none;
}

.sp-marco-stencil {
  position: relative;
  padding: var(--esp-5);
  background-color: var(--sup-base);
  border: var(--borde-acento);                  /* 2px mostaza: el patrón del bloque del reto */
  clip-path: polygon(                           /* esquinas cortadas: corte de plantilla */
    var(--esp-3) 0,
    100% 0,
    100% calc(100% - var(--esp-3)),
    calc(100% - var(--esp-3)) 100%,
    0 100%,
    0 var(--esp-3)
  );
}


/* =========================================================================================
   7. TARJETAS Y PANELES DE CRISTAL — se apoyan en .sp-cristal (tokens.css)
   El cristal base es negro al 72 % (9,29:1 mínimo con blanco). Los colores de marca entran
   como acentos internos: cabecera granate (texto blanco, 9,65:1), cifras en mostaza
   (5,05:1 mínimo → AA) y CTA granate con tinta blanca.
   ========================================================================================= */
.sp-tarjeta {
  display: flex;
  flex-direction: column;
  padding: 0;                          /* la foto sangra hasta el borde del cristal */
  overflow: hidden;
}
.sp-tarjeta__foto {
  display: block;
  width: 100%;
  height: auto;                        /* deja mandar a aspect-ratio (los atributos width/height del HTML son la reserva de espacio) */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, .18);  /* = --cristal-borde */
}
.sp-tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--cristal-padding);
}
.sp-tarjeta__nombre {
  margin: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-h5);
  line-height: var(--lh-compacto);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cristal-tinta);
}
.sp-tarjeta__texto {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--cristal-tinta);
}
.sp-tarjeta__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-top: var(--esp-1);
  padding-top: var(--esp-3);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.sp-tarjeta__precio {
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-precio);
  letter-spacing: var(--ls-pequeno);
  color: var(--cristal-tinta-acento);  /* mostaza sobre cristal */
  white-space: nowrap;                 /* el precio nunca se parte */
}
.sp-tarjeta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-left: auto;                   /* pegado a la derecha aunque el pie envuelva */
}
/* Una pegatina dentro del cuerpo de la tarjeta no se estira a lo ancho: es un sello, no una banda */
.sp-tarjeta__cuerpo > .sp-pegatina { align-self: flex-start; }

.sp-panel {
  padding: 0;
  overflow: hidden;
}
.sp-panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--cristal-padding);
  background-color: var(--cristal-fondo-granate);  /* granate al 78% dentro del cristal */
  color: var(--tinta-sobre-granate);               /* blanco sobre granate: 9,65:1 */
}
.sp-panel__titulo {
  margin: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-rotulo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
}
.sp-panel__meta {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-pequeno);
  opacity: .9;
}
.sp-panel__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--cristal-padding);
  color: var(--cristal-tinta);
}
.sp-panel__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-3);
  margin: 0;
  padding-bottom: var(--esp-2);
  border-bottom: 1px dashed rgba(255, 255, 255, .18);   /* blanco al 18% */
  font-size: var(--fs-small);
  letter-spacing: .04em;
}
.sp-panel__fila:last-child { border-bottom: 0; padding-bottom: 0; }
.sp-panel__fila strong {              /* cifras destacadas del panel, en mostaza */
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-precio);
  color: var(--cristal-tinta-acento);
}
.sp-panel__pie {
  display: flex;
  gap: var(--esp-2);
  padding: 0 var(--cristal-padding) var(--cristal-padding);
}
.sp-panel__pie .sp-btn { flex: 1; }


/* =========================================================================================
   8. CURSOR PERSONALIZADO — aro fino de mostaza con punto central (sobrio, nada agresivo)
   SVG propio embebido como data URI. Los data URI no pueden leer var(), así que la tinta va
   literal y URL-codificada: %23E3BB29 = --sp-mostaza (11,41:1 sobre negro; 5,24:1 sobre
   granate). Es la ÚNICA tinta del fichero fuera de var(), y es deliberada y visible aquí.
   Fallback: si el navegador no puede pintar la imagen, usa `auto` (el puntero del sistema).
   ========================================================================================= */
.sp-cursor,
.sp-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10.5' fill='none' stroke='%23E3BB29' stroke-width='1.6'/%3E%3Ccircle cx='16' cy='16' r='1.6' fill='%23E3BB29'/%3E%3C/svg%3E") 16 16, auto;
}


/* =========================================================================================
   9. TEXTURAS — grano de película y texturas procedurales + trama real del negocio
   Los SVG procedurales viven en web/img/texturas/ (ver su README). Aquí se aplican siempre
   como capas de baja opacidad, nunca como contenido.
   ========================================================================================= */

/* Grano de película: capa POR ENCIMA del contenido a opacidad ínfima (efecto de film).
   .sp-grano--fijo la fija al viewport (el patrón de body::before del sitio real). */
.sp-grano { position: relative; }
.sp-grano::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-trama);
  background-image: url('../img/texturas/grano.svg');
  opacity: .06;
  pointer-events: none;
}
.sp-grano--fijo::after { position: fixed; }

/* Texturas procedurales POR DEBAJO del contenido (isolation + z-index -1), con opacidad
   ajustable por instancia: --textura-opacidad (por defecto .5). */
.sp-textura {
  position: relative;
  isolation: isolate;
  --textura-opacidad: .5;         /* knob por instancia: se sobreescribe al usarla */
}
.sp-textura::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-position: center;
  background-repeat: repeat;
  opacity: var(--textura-opacidad);
  pointer-events: none;
}
.sp-textura--hormigon::before {
  background-image: url('../img/texturas/hormigon.svg');
  background-size: 512px 512px;
}
.sp-textura--asfalto::before {
  background-image: url('../img/texturas/asfalto.svg');
  background-size: 384px 384px;
}

/* Trama REAL del negocio (textura-fondo.png: burgers a línea blanca, copiada del corpus).
   La opacidad la manda el token --trama-opacidad (0,1: la medida en el sitio original).
   F8-T02 · PESO: el PNG original mide 485 KB (4606x3543). Las hermanas AVIF (130) y WebP (236)
   las produce `tools/optimizar-imagenes.py`; `image-set()` elige según lo que acepte el
   navegador y la línea anterior (el PNG) queda de respaldo: una declaración que el navegador
   no entiende se ignora entera, así que el orden manda. */
.sp-trama {
  position: relative;
  isolation: isolate;
}
.sp-trama::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../img/texturas/textura-fondo.png');
  background-image: image-set(
    url('../img/texturas/textura-fondo.avif') type('image/avif'),
    url('../img/texturas/textura-fondo.webp') type('image/webp'),
    url('../img/texturas/textura-fondo.png') type('image/png')
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--trama-opacidad);
  pointer-events: none;
}


/* =========================================================================================
   10. ICONOS MENORES — máscara CSS: el icono toma el color de la tinta (currentColor)
   Los ficheros viven en web/img/iconos/ (ver su README). El icono es siempre decorativo
   (aria-hidden en el HTML): el significado lo lleva el texto que lo acompaña.
   ========================================================================================= */
.sp-icono {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -.14em;
}
.sp-icono--flecha {
  -webkit-mask-image: url('../img/iconos/icono-flecha.svg');
  mask-image: url('../img/iconos/icono-flecha.svg');
}
.sp-icono--bolsa {
  -webkit-mask-image: url('../img/iconos/icono-bolsa.svg');
  mask-image: url('../img/iconos/icono-bolsa.svg');
}

/* Desplegable: control con la flecha 8×8 al final (el gesto del menú real del sitio) */
.sp-desplegable {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alto-tactil-min);
  padding: var(--esp-2) var(--esp-4);
  background-color: rgba(255, 255, 255, .06);   /* blanco al 6% */
  border: var(--borde-tenue);
  border-radius: var(--radio-sm);
  color: var(--tinta-principal);
  font-family: var(--fuente-cta);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-cta);
  letter-spacing: var(--ls-cta);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transicion-rapida), background-color var(--transicion-rapida);
}
.sp-desplegable::after {
  content: '';
  width: .5rem;                                  /* 8px: el tamaño real del icono perdido */
  height: .5rem;
  background-color: currentColor;
  -webkit-mask: url('../img/iconos/icono-flecha.svg') center / contain no-repeat;
  mask: url('../img/iconos/icono-flecha.svg') center / contain no-repeat;
  transition: transform var(--transicion-base);
}
.sp-desplegable:hover {
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
}
.sp-desplegable:focus-visible,
.sp-desplegable.is-foco {
  outline: none;
  box-shadow: var(--foco-anillo);
}
.sp-desplegable.is-abierto::after { transform: rotate(180deg); }


/* =========================================================================================
   11. PREFERS-REDUCED-MOTION — lo que se mueve solo, se queda quieto
   Los tokens de F3-T01 ya anulan duraciones de transición; aquí se detienen además los
   bucles (marquesina, cinta móvil) y la animación de entrada del sello.
   Nada de esto cambia colores ni contraste: solo el movimiento.
   ========================================================================================= */
@media (prefers-reduced-motion: reduce) {
  .sp-marquesina__via,
  .sp-cinta--movil .sp-cinta__via {
    animation: none;
    transform: none;
  }
  .sp-sello,
  .sp-sello.is-estampando,
  .sp-sello.is-pendiente {
    animation: none;
    opacity: 1;
    transform: rotate(var(--sello-giro));
  }
  .sp-btn:active,
  .sp-btn.is-activo {
    transform: none;                    /* sin hundimiento: el cambio de color ya marca la presión */
  }
  .sp-desplegable.is-abierto::after { transform: none; }
}