.act-2 {
  place-items: stretch;
}

.act-2 .field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.act-2 .panel {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  padding: 8vh 7vw;
  text-align: center;
}

.act-2 .count {
  font-size: clamp(38px, 8.5vw, 104px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s var(--ease), transform 1.6s var(--ease);
}

.act-2 .count.is-in {
  opacity: 1;
  transform: translateY(0);
}

.act-2 .unit {
  margin-top: 1.2em;
  font-size: clamp(9px, 1.1vw, 11px);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}

.act-2 .unit.is-in {
  opacity: 1;
}

.act-2 .line {
  margin-top: 3.4em;
  max-width: 22ch;
  font-size: clamp(17px, 2.1vw, 25px);
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.6s var(--ease), transform 1.8s var(--ease);
}

.act-2 .line.is-in {
  opacity: 1;
  transform: translateY(0);
}

.act-2 .closing {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, 12px);
  max-width: 26ch;
  font-size: clamp(18px, 2.3vw, 27px);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0;
  transition: opacity 2.4s var(--ease), transform 2.6s var(--ease);
}

.act-2 .closing.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}

.act-3 {
  place-items: center;
}

.act-3 .wrap {
  display: grid;
  place-items: center;
  gap: 2.2vh;
  padding: 6vh 5vw;
  text-align: center;
}

.act-3 .intro,
.act-3 .progreso {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.6s var(--ease), transform 1.8s var(--ease);
}

.act-3 .intro.is-in,
.act-3 .progreso.is-in {
  opacity: 1;
  transform: translateY(0);
}

.act-3 .intro {
  max-width: 24ch;
  font-size: clamp(15px, 1.8vw, 21px);
  line-height: 1.6;
  color: var(--ink-soft);
}

.act-3 .progreso {
  font-size: clamp(9px, 1.1vw, 11px);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.act-3 .dias {
  width: min(76vw, 430px);
  max-height: 52vh;
  overflow: visible;
  opacity: 0;
  transition: opacity 2.2s var(--ease), transform 1.8s var(--ease);
}

.act-3 .dias.is-in {
  opacity: 1;
}

.act-3 .dias.se-va {
  opacity: 0;
  transform: scale(0.94);
}

.act-3 .punto {
  fill: var(--ink);
  opacity: 0.26;
  transition: opacity 1.2s var(--ease), fill 1.2s var(--ease);
}

.act-3 .halo {
  fill: var(--rose);
  opacity: 0;
  transition: opacity 1s var(--ease);
}

.act-3 .vivo {
  cursor: pointer;
}

.act-3 .vivo .punto {
  opacity: 0.75;
  animation: latir 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 47ms);
}

.act-3 .vivo:hover .halo {
  opacity: 0.4;
}

.act-3 .vivo.visto .punto {
  opacity: 0.9;
  fill: #c98a6a;
  animation: none;
}

.act-3 .vivo.visto .halo {
  opacity: 0.28;
}

.act-3 .todo-vivo .punto {
  opacity: 0.85;
  animation: none;
}

@keyframes latir {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

.act-3 .recuerdo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.6em;
  background: rgba(247, 241, 230, 0.86);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s var(--ease), visibility 1.1s;
  cursor: pointer;
  z-index: 5;
}

.act-3 .recuerdo.is-open {
  opacity: 1;
  visibility: visible;
}

.act-3 .recuerdo img {
  max-width: min(78vw, 520px);
  max-height: 56vh;
  display: block;
  filter: url(#torn) sepia(0.14) saturate(0.94) contrast(0.98);
  transform: scale(0.97) rotate(-0.6deg);
  transition: transform 1.6s var(--ease);
}

.act-3 .recuerdo.is-open img {
  transform: scale(1) rotate(-0.6deg);
}

.act-3 .recuerdo .cap {
  font-size: clamp(17px, 2.1vw, 24px);
  color: var(--ink);
}

.act-3 .recuerdo .fecha {
  margin-top: -1em;
  font-size: clamp(9px, 1.1vw, 11px);
  letter-spacing: 0.38em;
  text-indent: 0.38em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.act-3 .cierre {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5em;
  opacity: 0;
  transition: opacity 2s var(--ease);
  pointer-events: none;
}

.act-3 .cierre.is-in {
  opacity: 1;
}

.act-3 .numero {
  font-size: clamp(64px, 15vw, 190px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  transition: opacity 1.6s var(--ease), transform 1.8s var(--ease);
}

.act-3 .numero.se-parte {
  opacity: 0;
  transform: translateY(-16px);
}

.act-3 .partido {
  position: absolute;
  font-size: clamp(64px, 15vw, 190px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 2s var(--ease), transform 2.2s var(--ease);
}

.act-3 .partido.is-in {
  opacity: 1;
  transform: translateY(0);
}

.act-3 .nota {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translateX(-50%);
  max-width: 26ch;
  text-align: center;
  font-size: clamp(15px, 1.8vw, 21px);
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 2.2s var(--ease);
}

.act-3 .nota.is-in {
  opacity: 1;
}

#dusk {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
      ellipse 90% 70% at 50% 44%,
      rgba(28, 24, 34, 0.86) 0%,
      rgba(14, 13, 20, 0.97) 70%
    ),
    #0b0a10;
}

body.es-de-noche .act-5 {
  color: var(--paper-warm);
}

.act-5 {
  z-index: 4;
  place-items: center;
  align-content: center;
  gap: 0;
  text-align: center;
  padding: 8vh 7vw;
}

.act-5 .linea {
  position: absolute;
  max-width: 22ch;
  font-size: clamp(19px, 2.6vw, 31px);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.8s var(--ease), transform 2s var(--ease);
}

.act-5 .linea.is-in {
  opacity: 1;
  transform: translateY(0);
}

.act-5 .salida {
  display: grid;
  gap: 1.5em;
  transition: opacity 1.2s var(--ease);
}

.act-5 .salida.se-va {
  opacity: 0;
}

.act-5 .salida-linea {
  font-size: clamp(19px, 2.6vw, 31px);
  line-height: 1.5;
  color: rgba(251, 244, 232, 0.92);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 2.2s var(--ease), transform 2.4s var(--ease);
}

.act-5 .salida-linea.is-in {
  opacity: 1;
  transform: translateY(0);
}

.act-5 .play {
  position: absolute;
  bottom: 22vh;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s var(--ease), visibility 1.6s, transform 0.6s var(--ease);
}

.act-5 .play.is-in {
  opacity: 1;
  visibility: visible;
}

.act-5 .play:hover {
  transform: scale(1.06);
}

.act-5 .play circle {
  fill: none;
  stroke: rgba(251, 244, 232, 0.7);
  stroke-width: 1.4;
}

.act-5 .play path {
  fill: rgba(251, 244, 232, 0.9);
}

.act-5 video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0b0a10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s var(--ease), visibility 2s;
  z-index: 6;
}

.act-5 video.is-in {
  opacity: 1;
  visibility: visible;
}

body.es-de-noche .hint {
  color: rgba(251, 244, 232, 0.25);
}

.act-3 .especial .punto {
  fill: #c07a52;
}

.act-3 .especial .halo {
  fill: var(--peach);
  opacity: 0.3;
}

.act-3 .recuerdo .titulo {
  font-size: clamp(46px, 9vw, 104px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 12ch;
}

.act-3 .recuerdo.sin-foto .cap {
  font-size: clamp(19px, 2.4vw, 28px);
  color: var(--ink-soft);
}

.act-lineas {
  place-items: center;
  align-content: center;
  text-align: center;
  padding: 8vh 7vw;
}

.act-lineas .linea {
  max-width: 22ch;
  font-size: clamp(19px, 2.6vw, 31px);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.8s var(--ease), transform 2s var(--ease);
}

.act-lineas .linea.is-in {
  opacity: 1;
  transform: translateY(0);
}

#paso {
  position: fixed;
  inset: 0;
  z-index: 8;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.act-3 .recuerdo.cambiando img,
.act-3 .recuerdo.cambiando .cap,
.act-3 .recuerdo.cambiando .fecha {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.act-6 {
  place-items: stretch;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.act-6 .rollo {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 10vh 5vw 16vh;
  display: grid;
  gap: 13vh;
}

.act-6 .portada,
.act-6 .gracias,
.act-6 .cierre-rollo,
.act-6 .bloque-video {
  max-width: 620px;
  margin-inline: auto;
  width: 100%;
}

.act-6 .portada {
  display: grid;
  justify-items: center;
  gap: 0.9em;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 2.4s var(--ease), transform 2.6s var(--ease);
}

.act-6 .portada.is-in {
  opacity: 1;
  transform: translateY(0);
}

.act-6 .emblema {
  width: min(78%, 400px);
  overflow: visible;
  margin-bottom: 0.6em;
}

.act-6 .emblema path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.act-6 .marca {
  font-size: 11px;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.act-6 h1 {
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.act-6 .bajada {
  font-size: clamp(15px, 2vw, 19px);
  color: var(--ink-soft);
}

.act-6 .bloque {
  display: grid;
  gap: 6vh;
}

.act-6 [hidden] {
  display: none !important;
}

.act-6 .continuara {
  margin-top: 2vh;
  text-align: center;
  font-size: clamp(19px, 2.4vw, 27px);
  font-style: italic;
  color: var(--ink-soft);
}

.act-6 h2 {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.44em;
  text-indent: 0.44em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.act-6 .album {
  column-count: 2;
  column-gap: 6vw;
}

@media (min-width: 900px) {
  .act-6 .album {
    column-count: 3;
    column-gap: 4vw;
  }
}

.act-6 .ficha,
.act-6 .garabato {
  break-inside: avoid;
  page-break-inside: avoid;
  display: block;
}

.act-6 .ficha {
  width: var(--ancho, 100%);
  margin: 0 auto 9vh;
  transform: rotate(var(--giro, 0deg)) translateY(var(--sube, 0));
}

.act-6 .ficha img {
  width: 100%;
  display: block;
  filter: url(#torn) sepia(0.14) saturate(0.94) contrast(0.98);
}

.act-6 .ficha.recorte img {
  filter: saturate(0.96) contrast(0.98)
    drop-shadow(0 6px 14px rgba(90, 70, 50, 0.14));
}

.act-6 .nombre {
  margin-top: 0.9em;
  font-size: clamp(13px, 1.5vw, 17px);
  color: var(--ink);
  text-align: center;
}

.act-6 .sello {
  margin-top: 0.5em;
  font-size: 8px;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

.act-6 .garabato {
  width: 78%;
  margin: 0 auto 9vh;
  overflow: visible;
}

.act-6 .garabato path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

.act-6 video {
  width: 100%;
  border-radius: 2px;
  background: #0b0a10;
}

.act-6 .gracias {
  display: grid;
  gap: 4.5vh;
  text-align: center;
}

.act-6 .gracia {
  font-size: clamp(17px, 2.2vw, 23px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 26ch;
  margin: 0 auto;
}

.act-6 .cierre-rollo {
  text-align: center;
  display: grid;
  gap: 0.5em;
  font-size: clamp(17px, 2.2vw, 23px);
  line-height: 1.6;
  color: var(--ink);
}

.act-6 .revela,
.act-6 .gracia,
.act-6 .garabato {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.8s var(--ease), transform 2s var(--ease);
}

.act-6 .ficha {
  opacity: 0;
  transition: opacity 1.8s var(--ease), transform 2s var(--ease);
}

.act-6 .revela.is-in,
.act-6 .gracia.is-in,
.act-6 .garabato.is-in {
  opacity: 1;
  transform: translateY(0);
}

.act-6 .ficha.is-in {
  opacity: 1;
}

.act-1 .calendario {
  position: absolute;
  max-width: 22ch;
  font-size: clamp(19px, 2.6vw, 31px);
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
  opacity: 0;
  transition: opacity 1.8s var(--ease);
}

.act-1 .calendario.rodando {
  will-change: filter, transform;
}

.act-1 .calendario.is-in {
  opacity: 1;
}

.act-1 .c-dia,
.act-1 .c-anio {
  font-variant-numeric: tabular-nums;
}

.act-1 .rodando .c-dia {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}

.act-1 .rodando .c-mes {
  display: inline-block;
  min-width: 6.4ch;
  text-align: center;
}


.act-3 .antes {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translateX(-50%);
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}

.act-3 .antes.is-in {
  opacity: 1;
}



.act-4 {
  place-items: stretch;
}

.act-4 .nube {
  position: absolute;
  inset: 0;
}

.act-4 .gracia-suelta {
  position: absolute;
  top: var(--t, 50%);
  left: var(--l, 50%);
  width: max-content;
  max-width: min(30ch, 40vw);
  font-size: clamp(16px, 1.9vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 12px));
  transition: opacity 1.5s var(--ease), transform 1.7s var(--ease);
}

.act-4 .gracia-suelta.is-in {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.act-4 .ultima {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 24ch;
  font-size: clamp(19px, 2.6vw, 30px);
  line-height: 1.55;
  color: var(--ink);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 14px));
  transition: opacity 2s var(--ease), transform 2.2s var(--ease);
}

.act-4 .ultima.is-in {
  opacity: 1;
  transform: translate(-50%, -50%);
}

@media (max-width: 760px) {
  .act-4 .gracia-suelta {
    left: 50%;
    max-width: 86vw;
  }
}

#puerta {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.4em;
  background: var(--paper);
  animation: entra-puerta 2.6s var(--ease) both;
}

#puerta[hidden] {
  display: none;
}

#puerta .emblema {
  width: min(64vw, 420px);
  overflow: visible;
}

#puerta .emblema path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.75;
}

#puerta .marca {
  font-size: 11px;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

@keyframes entra-puerta {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Respiracion en reposo, acto por acto.
   Cada grupo lleva sus propios fotogramas para no pisar la transformacion
   que ya tenia (centrado, giro del collage, escala de la foto). */

@keyframes flota-x {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}

@keyframes flota-foto {
  0%,
  100% {
    transform: scale(1) rotate(-0.6deg) translateY(0);
  }
  50% {
    transform: scale(1.006) rotate(-0.6deg) translateY(-5px);
  }
}

@keyframes flota-ficha {
  0%,
  100% {
    transform: rotate(var(--giro, 0deg)) translateY(var(--sube, 0px));
  }
  50% {
    transform: rotate(var(--giro, 0deg))
      translateY(calc(var(--sube, 0px) - 5px));
  }
}

.act-1 .calendario.llego,
.act-lineas .linea.is-in,
.act-2 .line.is-in,
.act-3 .partido.is-in {
  animation: flota 9.5s ease-in-out 2.6s infinite;
}

.act-2 .closing.is-in,
.act-3 .nota.is-in {
  animation: flota-x 10s ease-in-out 2.4s infinite;
}

.act-3 .dias.is-in {
  animation: respira 14s ease-in-out 2s infinite;
  will-change: transform;
}

.act-3 .recuerdo.is-open img {
  animation: flota-foto 11s ease-in-out 2s infinite;
}

.act-4 .gracia-suelta.is-in,
.act-4 .ultima.is-in {
  animation: flota-centro 9s ease-in-out 2s infinite;
}

.act-5 .salida-linea.is-in {
  animation: flota 10s ease-in-out 2.6s infinite;
}

.act-6 .ficha.is-in {
  animation: flota-ficha 12s ease-in-out 1.2s infinite;
}

#puerta .emblema {
  animation: respira 13s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .act-1 .calendario.llego,
  .act-lineas .linea.is-in,
  .act-2 .line.is-in,
  .act-2 .closing.is-in,
  .act-3 .dias.is-in,
  .act-3 .recuerdo.is-open img,
  .act-3 .partido.is-in,
  .act-3 .nota.is-in,
  .act-4 .gracia-suelta.is-in,
  .act-4 .ultima.is-in,
  .act-5 .salida-linea.is-in,
  .act-6 .ficha.is-in,
  #puerta .emblema {
    animation: none;
  }
}