/* ===== Sección Pan de Muerto Magnum (de github.com/andrawiramirez-create/pan-de-muerto-magnum) =====
   Arriba el pan se ve cerrado y, al bajar, las capas se separan, flotan y aparecen las etiquetas. */
.pdm {
  --pdm-bg: #2b0102;          /* mismo color que el fondo de las fotos */
  --pdm-cream: #f6e7cf;
  position: relative;
  height: 320vh;              /* cuánto hay que bajar para abrir el pan */
  background: var(--pdm-bg);
  color: var(--pdm-cream);
}
.pdm__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.pdm__kicker {
  margin: 0 0 .6vh; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75;
}
.pdm__title {
  margin: 0 0 1vh; text-align: center; line-height: .9; color: var(--pdm-cream);
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(2.4rem, min(11vw, 8vh), 6rem);
  padding-inline: 16px;
}
.pdm__stage {
  position: relative;
  width: min(92vw, 56vh);
  aspect-ratio: 1024 / 1110;
  container-type: inline-size;
}
.pdm__layer {
  position: absolute; display: block; height: auto;
  will-change: transform;
  user-select: none; -webkit-user-drag: none;
}
.pdm__arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pdm__arrows path {
  fill: none; stroke: var(--pdm-cream); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.pdm__label {
  position: absolute; margin: 0; text-align: center; line-height: 1.05;
  font-family: "Fraunces", Georgia, serif; font-weight: 700;
  font-variation-settings: "SOFT" 50, "opsz" 48;
  font-size: max(11px, 3.4cqw);
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
}
.pdm__cta {
  margin-top: 2vh; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: box-shadow .2s;
}
.pdm__cta.is-on { pointer-events: auto; }
.pdm__hint {
  position: absolute; bottom: max(3vh, env(safe-area-inset-bottom, 0px));
  font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; opacity: .7;
  animation: pdm-bounce 1.8s ease-in-out infinite;
}
@keyframes pdm-bounce { 50% { transform: translateY(6px); } }