@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · sec-07.css — ACTO 7 · «Elige tu penitencia» (la carta real)
   Fichero: web/estilos/sec-07.css        Bloque: F2-secciones · frente S07
   -----------------------------------------------------------------------------------------
   Estilos SOLO de este acto, con prefijo .a7-.
   · 0 HEX literales: todo por tokens var() de tokens.css (regla dura, SPEC §2.8).
   · Sin transition:all; se animan solo opacity/transform.
   · El acto es administrativo y práctico a propósito (BRIEF §4.2): superficie elevada,
     tinta blanca/mostaza y acentos de marca puntuales (chip elegido en granate, local
     elegido en mostaza como el hero). El granate nunca es color de texto sobre negro.
   · La entrada la conduce el motor (data-sc-in + data-sc-stagger="60" en .a7-grid); aquí
     solo se añade la microaparición (a7-entra) que da el JS al cambiar filtro o local.
   ========================================================================================= */

/* ------------------------------------------------------------------- estructura ---------- */
.a7 {
  position: relative;              /* contexto del adorno de la cabecera */
  --a7-carril: 0px;                /* carril reservado al ticket fijo de la firma (solo ≥901 px) */
}
/* El ticket de «La comanda» vive fijo en el borde derecho (comanda.css: right var(--esp-5),
   ancho min(17rem, 24vw)); en pantallas con ticket lateral se reserva su carril para que ni
   las tarjetas ni el panel de la burger del mes queden debajo (misma fórmula que el acto 5). */
@media (min-width: 901px) {
  .a7 {
    --a7-carril: calc(min(17rem, 24vw) + var(--esp-5) + var(--esp-4));
  }
}
.a7-wrap {
  display: block;
  padding-right: calc(var(--esp-pagina-x) + var(--a7-carril));
}
/* El atributo hidden es LA fuente de verdad del filtrado (lo toca sec-07.js): pisa al
   display de las tarjetas y de las etiquetas de categoría sin excepciones. */
.a7 [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------- cabecera ----------- */
.a7-cab {
  position: relative;
  padding-inline-end: clamp(5.5rem, 14vw, 10rem);   /* la pegatina nunca tapa el titular */
}
.a7-cab__titulo {
  margin: 0;
}
.a7-cab__sub {
  margin: var(--esp-3) 0 0;
  max-width: var(--ancho-max-texto);
  font-size: var(--fs-p);
  line-height: var(--lh-texto);
  color: var(--sc-ink-soft);       /* blanco al 72 % (≈9:1 sobre negro), definido en pagina.css */
}
/* Pegatina real de la marca (corpus del negocio), decorativa y girada como un adhesivo */
.a7-cab__peg {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(4.5rem, 11vw, 7.5rem);
  height: auto;
  transform: rotate(-7deg);
  pointer-events: none;
}

/* ------------------------------------------------------------------- controles ------------ */
.a7-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-5);
  margin-top: var(--esp-6);
}
.a7-filtros,
.a7-locales {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

/* Filtros: fantasma mostaza en reposo (11,41:1 sobre negro); elegido en GRANATE macizo con
   tinta blanca (9,65:1) para no confundirlo con el selector de local (mostaza, como el hero). */
.a7-chip {
  padding-inline: var(--esp-4);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-cta);
}
.a7-chip[aria-pressed="true"] {
  background-color: var(--sp-granate);
  border-color: var(--sp-granate);
  color: var(--tinta-sobre-granate);
  box-shadow: var(--sombra-granate);
}
.a7-chip[aria-pressed="true"]:hover {
  background-color: var(--sp-granate-hover);
  border-color: var(--sp-granate-hover);
}

/* Selector de local: mismo idioma que el del hero (acto 1). El estado va en aria-pressed. */
.a7-local {
  background-color: transparent;
  border-color: var(--sp-mostaza);
  color: var(--sp-mostaza);                 /* 11,41:1 sobre negro */
}
.a7-local:hover {
  background-color: color-mix(in oklab, var(--sp-mostaza) 12%, transparent);
}
.a7-local[aria-pressed="true"] {
  background-color: var(--sp-mostaza);
  border-color: var(--sp-mostaza);
  color: var(--tinta-sobre-mostaza);        /* negro sobre mostaza: 11,41:1 */
  box-shadow: var(--sombra-mostaza);
}

/* ---------------------------------------------------------------- burger del mes ---------- */
.a7-mes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-2) var(--esp-4);
  margin-top: var(--esp-6);
  padding: var(--cristal-padding);
}
.a7-mes__rotulo {
  margin: 0;
  color: var(--cristal-tinta-acento);       /* mostaza sobre cristal */
}
.a7-mes__estado {
  margin: 0;
  font-size: var(--fs-h5);
  line-height: var(--lh-compacto);
  color: var(--cristal-tinta);
}

/* ------------------------------------------------------------------ la cuadrícula --------- */
.a7-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--esp-4);
  margin-top: var(--esp-6);
}

/* Rótulo de categoría real de la carta (nombre literal del JSON): ocupa la fila entera */
.a7-cat {
  grid-column: 1 / -1;
  margin: var(--esp-5) 0 var(--esp-1);
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-small);
  line-height: var(--lh-rotulo);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-acento);               /* mostaza sobre negro: 11,41:1 */
}
.a7-cat:first-child {
  margin-top: 0;
}

/* Tarjeta de producto: superficie elevada (negro humo), foto arriba y cuerpo abajo */
.a7-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--sup-elevada);
  border: var(--borde-tenue);
  border-radius: var(--radio-tarjeta);
}
.a7-card__media {
  aspect-ratio: 1 / 1;                      /* la reserva real la dan width/height del HTML */
  background-color: var(--sp-negro);
}
.a7-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.a7-card__media--contener .a7-card__img {
  object-fit: contain;                      /* encuadres muy panorámicos: entran enteros */
}
.a7-card__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-4);
}
.a7-card__nombre {
  margin: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-h6);
  line-height: var(--lh-compacto);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tinta-principal);
}
.a7-card__desc {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--sc-ink-soft);
  white-space: pre-line;                    /* saltos de línea LITERALES del JSON */
}
.a7-card__precio {
  margin: var(--esp-1) 0 0;
  margin-top: auto;                         /* el precio ancla abajo: filas ordenadas */
  padding-top: var(--esp-3);
  border-top: var(--borde-tenue);
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-precio);
  letter-spacing: var(--ls-pequeno);
  color: var(--tinta-acento);
  white-space: nowrap;                      /* el precio nunca se parte */
}
/* Producto sin foto en la carta (declarado en el INFORME): tarjeta sin imagen, cuerpo solo */
.a7-card--sinfoto {
  min-height: 11rem;
}
.a7-card--sinfoto .a7-card__cuerpo {
  justify-content: center;
}
.a7-card--sinfoto .a7-card__precio {
  margin-top: var(--esp-2);
}

/* ----------------------------------------------------------------------------- pie -------- */
.a7-pie {
  margin: var(--esp-7) 0 0;
  text-align: center;
}
.a7-cta {
  padding-inline: var(--esp-8);
}

/* -------------------------------------------------- microaparición al filtrar ------------- */
/* Solo la añade sec-07.js cuando una pieza oculta pasa a visible (cambio de filtro o de
   local), y solo si la pieza ya la reveló el motor (clase .sc-in). Con reduced-motion no
   se añade: el cambio es instantáneo (regla global de tokens.css). */
.a7-entra {
  animation: a7-entra var(--dur-3) var(--ease-salida) both;
}
@keyframes a7-entra {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------- móvil ------- */
@media (max-width: 640px) {
  .a7-grid {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: var(--esp-3);
  }
  .a7-cat { margin-top: var(--esp-4); }
  .a7-card__cuerpo { padding: var(--esp-3); }
  .a7-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .a7-cab { padding-inline-end: 4.75rem; }
  .a7-cab__peg { width: 4rem; }
  .a7-cta { width: 100%; }
}