@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · sec-10.css · ACTO 10 «Club de sellos» (frente S10, F2)
   -----------------------------------------------------------------------------------------
   SOLO estilos de este acto. Prefijo propio: .a10- . No toca tokens, componentes ni el motor.

   QUÉ ES (BRIEF §3 acto 10 · emoción: RECOMPENSA): pin corto + reveal. Una plaza con la copia
   del club a la izquierda y la TARJETA DE CRISTAL de 10 casillas a la derecha. Al avanzar el
   acto (p≥0,52) cae el SELLO DE TINTA sobre la casilla nueva (la caída la dispara sec-10.js;
   el keyframe es el del componente .sp-sello, F3-T02). La casilla 10, «Penitencia gratis»,
   va marcada como premio. La tarjeta entra con el cue con hold del contrato (0,15 → 1).

   LA MARCA DEL SELLO: web/assets/sec-10/sello-s-p.png es el logotipo real del negocio
   (logo-s-p-negro-01 del corpus de su web) con tratamiento mecánico (recorte + 720 px +
   alfa = luminancia). Aquí se aplica como MÁSCARA y se pinta con la mostaza de marca: el
   color nunca va horneado en el fichero y todo queda por token.

   REGLAS: 0 HEX (todo var()/color-mix), sin `transition: all`, animación solo transform y
   opacity (la caída del tampón). prefers-reduced-motion: el componente ya deja el sello
   estampado sin gesto y los cues del motor conservan la opacidad; aquí no se añade nada que
   se mueva solo.
   ========================================================================================= */

/* --------------------------------------------------------------------- el acto -------- */
.a10 {
  background: var(--sp-negro);   /* el suelo nunca es blanco mientras entra el stage */
  color: var(--sp-blanco);
}

.a10-escena { isolation: isolate; }   /* la trama se mezcla dentro del escenario, no con la página */


/* ------------------------------------------------------------------- la plaza --------- */
/* Copia + tarjeta. Dos columnas en escritorio; una sola, con la tarjeta debajo, en móvil.
   CARRIL DE LA COMANDA: el ticket de la firma es fijo en el borde derecho (comanda.css,
   S04: min(17rem, 24vw) + margen esp-5). Aquí se le reserva ese carril más un extra de aire
   (esp-6) para que la tarjeta no quede nunca debajo del papel: la casilla 10,
   «Penitencia gratis», tiene que verse (el ticket va girado -1,1deg y roza su esquina). */
.a10-plaza {
  position: absolute;
  inset: 0;
  max-width: var(--ancho-contenedor);
  margin-inline: auto;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(var(--esp-5), 4vw, var(--esp-8));
  padding: clamp(4.75rem, 12vh, 6.5rem) calc(min(17rem, 24vw) + var(--esp-6)) clamp(2.25rem, 6vh, 3.5rem) var(--esp-pagina-x);
}


/* ------------------------------------------------------------------- la copia --------- */
.a10-copia {
  display: grid;
  gap: clamp(var(--esp-3), 1.8vh, var(--esp-5));
  align-content: center;
}

/* H2 del acto: dispositivo de marca (relleno transparente + contorno mostaza, BRIEF §9).
   Sin cue: es el rótulo del acto y está presente desde que entra el escenario (suelo). */
.a10-titulo {
  margin: 0;
  max-width: 24ch;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-titular);
  text-shadow: 0 0.25rem 1.5rem color-mix(in oklab, var(--sp-negro) 75%, transparent);
}

/* Qué suma y qué no (texto literal del BRIEF): es la aclaración del club, va en blanco. */
.a10-sub {
  margin: 0;
  max-width: 42ch;
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto);
  font-size: var(--fs-p);
  line-height: var(--lh-texto);
  color: var(--tinta-principal);
}

/* Nota del club (regla de la burger del mes y del reto): letra pequeña con filete mostaza. */
.a10-nota {
  margin: 0;
  max-width: 46ch;
  padding-left: var(--esp-3);
  border-left: 2px solid color-mix(in oklab, var(--sp-mostaza) 55%, transparent);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: color-mix(in oklab, var(--sp-blanco) 74%, transparent);   /* ≈12:1 sobre negro */
}


/* ------------------------------------------------------------------- la tarjeta ------- */
.a10-panel {
  display: grid;
  justify-items: end;
  width: 100%;
}

.a10-tarjeta {
  width: min(100%, 33rem);
  padding: clamp(var(--esp-4), 2.6vw, var(--esp-6));
}

.a10-rejilla {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(var(--esp-2), 1.3vw, var(--esp-3));
}

/* Los tampones mini de las casillas ya selladas: se encogen con la casilla (móvil). */
.a10-rejilla .sp-sello--mini { --sello-tam: min(3.5rem, 84%); }

/* ---------------------------------------------- el sello que cae (casilla nueva) -------- */
/* Tampón del tamaño de su casilla (cae en grande por el keyframe sp-estampado del
   componente: entra a 2,05 y golpea). La marca del negocio se pinta como tinta mostaza. */
.a10-sello {
  --sello-tam: 100%;
  --sello-giro: -7deg;
  max-width: none;                 /* el tampón mide lo que la casilla, no se recorta */
  color: var(--sp-mostaza);
}

.a10-sello::after { inset: var(--esp-2); }   /* tampón pequeño: el aro punteado va más cerca del borde */

.a10-sello__marca {
  width: 68%;
  aspect-ratio: 720 / 769;         /* proporción real del arte recortado (720x769) */
  background-color: var(--sp-mostaza);
  -webkit-mask-image: url('../assets/sec-10/sello-s-p.png');
  mask-image: url('../assets/sec-10/sello-s-p.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* La casilla 10 (premio): texto literal del BRIEF, en mostaza sobre el tinte del componente. */
.a10-premio {
  padding: 0 var(--esp-1);
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-small);
  line-height: 1.1;
  letter-spacing: var(--ls-pequeno);
  text-align: center;
  color: var(--tinta-acento);      /* mostaza sobre el cristal reforzado: AAA */
}


/* ------------------------------------------------------------ hook de la comanda ------- */
/* Marcador sin pintura: el módulo de la firma (S04) lo convierte en la línea del ticket. */
.a10-comanda {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* -------------------------------------------------------------------------- móvil ----- */
/* El corte va en 900 px: es donde la comanda (comanda.css) deja el ticket fijo y pasa a
   chip inferior. A partir de ahí la plaza es una columna y no reserva carril a la derecha. */
@media (max-width: 900px) {
  .a10-plaza {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: clamp(var(--esp-4), 3vh, var(--esp-6));
    padding: clamp(4.25rem, 11vh, 5.5rem) var(--esp-pagina-x) clamp(1.5rem, 5vh, 2.5rem);
  }

  .a10-panel { justify-items: center; }

  .a10-tarjeta { width: min(100%, 26rem); }

  .a10-titulo { max-width: 20ch; }

  .a10-sub,
  .a10-nota { max-width: 100%; }
}


/* -------------------------------------------------- degradado sin motor (sin scrollcraft) -- */
/* Si el motor no carga no hay cues que leer: sec-10.js marca .a10--sin-motor y aquí el acto
   se apila como columna legible (textos del BRIEF y la tarjeta completos, con el sello ya
   estampado) en vez de quedarse en negro. */
.a10--sin-motor .a10-escena {
  position: relative;
  padding-block: var(--esp-seccion);
}

.a10--sin-motor .a10-plaza {
  position: static;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: var(--esp-6);
  padding: 0 var(--esp-pagina-x);
}

.a10--sin-motor .a10-panel { justify-items: center; }

.a10--sin-motor .a10-tarjeta { opacity: 1; }   /* sin motor no hay cue que la encienda */

/* prefers-reduced-motion: no hay nada más que parar. La caída del tampón la detiene el
   propio componente (.sp-sello aparece estampado, sin gesto) y los cues del motor
   conservan la opacidad sin desplazamiento. El acto no tiene bucles propios. */