/* ============================================================
   molinete — pared Nº 05 · violeta nocturno
   Contenido: H2 + lead + tabla de 3 pasos (Paso/Acción/Detalle)
   + 2 párrafos — palabra por palabra, sin caja-tabla.
   Anatomy unlike siblings: cabecera CENTRADA (primera del
   recorrido); la tabla son TRES BOLETOS de papel crema con
   perforación y muescas, torcidos cada uno a su manera; abajo
   foto + relato en dos husos desparejos.
   Gesto propio: los boletos pasan el MOLINETE — se pican uno
   por uno (giran y asientan desde abajo, 1 → 2 → 3).
   ============================================================ */

.molinete {
  position: relative;
  background: var(--noche);
  color: var(--hueso);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.molinete .numeral {
  top: clamp(.5rem, 2.5vw, 2rem);
  right: clamp(.6rem, 3vw, 2.8rem);
  transform: rotate(2deg);
  color: rgba(253, 249, 240, .07);
}

/* — cabecera centrada (rompe los arranques laterales) — */
.molinete_cabecera {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem);
}
.molinete_cabecera .pregon {
  color: rgba(253, 249, 240, .6);
  margin-bottom: 1.1rem;
}
.molinete_titulo {
  font-size: clamp(2rem, 2.8vw + .8rem, 3.2rem);
  color: var(--hueso);
  margin-bottom: 1.4rem;
}
.molinete_titulo em {
  font-style: normal;
  color: var(--fucsia);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .6);
}
.molinete_lead { color: rgba(253, 249, 240, .85); }

/* rótulos de columnas de la tabla del PDF — se conservan */
.molinete_titulos {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
.molinete_titulos span {
  font: 700 var(--t-folio)/1 var(--letra);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--turquesa-viva);
}
.molinete_titulos span + span::before { content: "— "; color: rgba(253, 249, 240, .4); }

/* ── los tres boletos ── */
.molinete_boletos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
  margin-bottom: clamp(2.8rem, 6vw, 4.5rem);
}

.molinete_boleto {
  position: relative;
  background: var(--crema);
  color: var(--tinta);
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: .65rem .75rem 0 0 rgba(0, 0, 0, .45);
}
/* cada boleto torcido a su manera, el del medio cae más abajo */
.molinete_boleto:nth-child(1) { transform: rotate(-1.6deg); }
.molinete_boleto:nth-child(2) { transform: rotate(1.1deg) translateY(1rem); }
.molinete_boleto:nth-child(3) { transform: rotate(-.6deg); }

.molinete_paso {
  display: block;
  font: 400 1.32rem/1.1 var(--plakat);
  color: var(--fucsia);
  text-shadow: 1px 1px 0 var(--tinta);
  margin-bottom: .85rem;
}
.molinete_accion { font-weight: 600; }

/* perforación del boleto: línea de puntos + muescas a los lados */
.molinete_detalle {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px dashed rgba(26, 11, 30, .35);
  font-size: .95rem;
  color: rgba(26, 11, 30, .75);
  position: relative;
}
.molinete_detalle::before,
.molinete_detalle::after {
  content: "";
  position: absolute;
  top: -.55rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--noche);          /* la pared se asoma por la muesca */
}
.molinete_detalle::before { left: -2.05rem; }
.molinete_detalle::after  { right: -2.05rem; }

/* ── abajo: foto + relato, husos desparejos ── */
.molinete_bajo {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.4rem, 6vw, 5.5rem);
  align-items: center;
}

.molinete_foto {
  transform: rotate(-1.2deg);
}
.molinete_foto figcaption {
  margin-top: .8rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--tinta);
}

.molinete_relato > p { color: rgba(253, 249, 240, .87); }
.molinete_relato > p + p { margin-top: 1.2rem; }

.molinete_cta {
  margin-top: 2.2rem;
  background: var(--fucsia);
  color: var(--blanco);
  border-color: var(--fucsia-honda);
  box-shadow: .5rem .5rem 0 0 rgba(0, 0, 0, .45);
}
.molinete_cta:hover,
.molinete_cta:active { background: #ef3a94; }

/* ── gesto: los boletos se pican uno por uno ── */
@media (min-width: 1025px) {
  .molinete_boleto {
    opacity: 0;
    transform: rotate(-7deg) translateY(38px);
    transform-origin: bottom left;
    transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1.12, .36, 1);
  }
  .molinete.en-vista .molinete_boleto:nth-child(1) {
    opacity: 1; transform: rotate(-1.6deg); transition-delay: .05s;
  }
  .molinete.en-vista .molinete_boleto:nth-child(2) {
    opacity: 1; transform: rotate(1.1deg) translateY(1rem); transition-delay: .27s;
  }
  .molinete.en-vista .molinete_boleto:nth-child(3) {
    opacity: 1; transform: rotate(-.6deg); transition-delay: .49s;
  }
}

/* ============================ móvil ============================ */
@media (max-width: 1024px) {
  .molinete_cabecera { max-width: none; }

  .molinete_titulo { font-size: clamp(1.9rem, 7vw, 2.6rem); }

  .molinete_titulos { flex-wrap: wrap; gap: 1rem; }

  .molinete_boletos { grid-template-columns: 1fr; gap: 1.6rem; }
  .molinete_boleto:nth-child(1) { transform: rotate(-.8deg); }
  .molinete_boleto:nth-child(2) { transform: rotate(.6deg) translateY(0); }
  .molinete_boleto:nth-child(3) { transform: rotate(-.4deg); }
  .molinete_boleto { font-size: 1.04rem; }

  .molinete_bajo { grid-template-columns: 1fr; gap: 2.4rem; }
  .molinete_foto { order: 2; transform: rotate(-.7deg); }
  .molinete_relato { order: 1; }

  .molinete_cta { width: 90%; }
}