/* ============================================================
   letra-chica — pared Nº 02 · violeta nocturno
   Contenido: párrafo 2 de la intro (CABA / 18+ / Lotería de la
   Ciudad / App Store / .bet.ar) — palabra por palabra.
   Anatomy unlike siblings: SIN heading (el PDF no lo trae) —
   un papel crema de aviso oficial fijado con cintas a la pared
   oscura, capitular grande, pregón en vertical al margen.
   Gesto propio: el papel SE PEGA a la pared al entrar en vista
   (cae, asienta el giro; las cintas aparecen después).
   ============================================================ */

.letra-chica {
  position: relative;
  background: var(--noche);
  color: var(--hueso);
  /* aire extra arriba: el polaroid del vestíbulo cuelga aquí */
  padding-top: clamp(7rem, 12vw, 10rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.letra-chica .numeral {
  bottom: clamp(.5rem, 2.5vw, 2rem);
  left: clamp(.6rem, 3vw, 2.8rem);
  transform: rotate(-2deg);
  color: rgba(253, 249, 240, .07);
}

.letra-chica_armado {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3.2rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

/* — pregón vertical, escrito al canto de la pared — */
.letra-chica_canto {
  writing-mode: vertical-rl;
  align-self: end;
  font: 700 var(--t-folio)/1 var(--letra);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(253, 249, 240, .5);
  padding-bottom: .5rem;
}

/* — el papel del aviso — */
.letra-chica_papel {
  position: relative;
  max-width: 62ch;
  background: var(--crema);
  color: var(--tinta);
  padding: clamp(1.8rem, 4vw, 3.2rem) clamp(1.6rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: .9rem 1rem 0 0 rgba(0, 0, 0, .45);
  transform: rotate(-1.2deg);
}
/* cintas adhesivas: cian arriba-izquierda, fucsia abajo-derecha */
.letra-chica_papel::before,
.letra-chica_papel::after {
  content: "";
  position: absolute;
  width: 4.8rem;
  height: 1.7rem;
}
.letra-chica_papel::before {
  top: -.85rem;
  left: 3rem;
  background: rgba(3, 233, 242, .68);
  transform: rotate(-5deg);
}
.letra-chica_papel::after {
  bottom: -.8rem;
  right: 2.6rem;
  background: rgba(214, 33, 127, .66);
  transform: rotate(4deg);
}

.letra-chica_texto { line-height: 1.7; }
.letra-chica_texto b { font-weight: 700; }

/* — capitular pintada — */
.letra-chica_capital {
  float: left;
  font: 400 3.6em/.82 var(--plakat);
  color: var(--fucsia);
  padding: .04em .12em 0 0;
  text-shadow: 2px 2px 0 var(--tinta);
}

.letra-chica_pie {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.letra-chica_pie .folio { color: rgba(26, 11, 30, .55); }

/* ── gesto: el papel se pega a la pared ── */
@media (min-width: 1025px) {
  .letra-chica_papel {
    opacity: 0;
    transform: rotate(-4.5deg) translateY(-26px) scale(1.025);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1.1, .36, 1);
  }
  .letra-chica_papel::before,
  .letra-chica_papel::after {
    opacity: 0;
    transition: opacity .3s ease .4s;
  }
  .letra-chica.en-vista .letra-chica_papel {
    opacity: 1;
    transform: rotate(-1.2deg) translateY(0) scale(1);
  }
  .letra-chica.en-vista .letra-chica_papel::before,
  .letra-chica.en-vista .letra-chica_papel::after { opacity: 1; }
}

/* ============================ móvil ============================ */
@media (max-width: 1024px) {
  .letra-chica {
    padding-top: 4rem;        /* el polaroid ya no cuelga en móvil */
    padding-bottom: 4rem;
  }

  .letra-chica_armado { grid-template-columns: 1fr; }

  .letra-chica_canto {
    writing-mode: horizontal-tb;
    order: -1;
    padding-bottom: 0;
  }

  .letra-chica_papel { transform: rotate(-.6deg); font-size: 1.05rem; }

  .letra-chica_pie { flex-direction: column; align-items: stretch; gap: 1.2rem; }
  .letra-chica_pie .folio { text-align: center; }
}