/* Estampas de un patio de noche. Todos los estilos pertenecen a esta sección. */
.act-section { position: relative; isolation: isolate; overflow: hidden; background: #235C45; color: #FFF6E5; padding: 245px 64px 160px; }
.act-section::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url("assets/cream-paper.png") center / 800px auto repeat; mix-blend-mode: soft-light; opacity: .18; pointer-events: none; }
.act-section::after { content: ""; position: absolute; z-index: -1; inset: 22px; border: 1px solid #E8AC4559; outline: 1px solid #FFF6E526; outline-offset: 6px; border-radius: 120px 120px 3px 3px; pointer-events: none; }
.act-light-canopy { position: absolute; left: 50%; top: 0; translate: -50% 0; width: max(100%, 1100px); height: 225px; pointer-events: none; }
.act-bulb-halo { fill: url(#act-warm-halo); }
.act-bulb-core { fill: #FFF0B5; stroke: #D9A957; stroke-width: .6; }
.act-light-soft { animation: act-glow 6.8s ease-in-out infinite alternate; animation-delay: var(--glow-delay, 0s); animation-play-state: paused; }
.act-lights-active .act-light-soft { animation-play-state: running; }
.act-papel { position: absolute; top: 109px; left: 50%; translate: -50% 0; width: max(100%, 1050px); height: 114px; pointer-events: none; filter: drop-shadow(0 4px 2px #0D322E40); }
.act-edge-lantern { position: absolute; width: 65px; height: 176px; top: 225px; pointer-events: none; }.act-edge-lantern-left { left: 36px; }.act-edge-lantern-right { right: 36px; }
.act-brass-stars { position: absolute; width: 70px; height: 150px; top: 580px; pointer-events: none; }.act-brass-stars-left { left: 14px; }.act-brass-stars-right { right: 14px; transform: scaleX(-1); }
.act-header { max-width: 700px; margin: 0 auto 65px; text-align: center; }
.act-eyebrow { display: flex; align-items: center; justify-content: center; gap: 16px; color: #F4CC80; font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; margin: 0 0 20px; line-height: 1.8; }
.act-eyebrow::before,.act-eyebrow::after { content: ""; width: 28px; height: 1px; background: #E8AC4590; }
.act-title { font-family: var(--serif); font-size: clamp(42px, 5.4vw, 70px); line-height: 1.1; font-weight: 400; letter-spacing: -.035em; margin: 0 0 25px; text-shadow: 0 3px 0 #0D362A; }
.act-description { max-width: 490px; margin: 0 auto; font-size: 15px; line-height: 1.95; color: #F3E7CF; text-wrap: pretty; }
.act-collection { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 70px; max-width: 1000px; margin: 0 auto; padding: 0 10px 54px; }
.act-stamp { position: relative; min-width: 0; padding: 25px 26px 29px; text-align: center; background: #173E2D26; border: 1px solid #E8AC4559; box-shadow: 0 4px 16px #112F2110; }
.act-stamp::before { content: ""; position: absolute; inset: 6px; border: 1px solid #FFF6E528; pointer-events: none; }
.act-stamp-ponche { border-radius: 115px 115px 3px 3px; }.act-stamp-ponche::before { border-radius: 110px 110px 0 0; }
.act-stamp-cena { border-style: dashed; border-radius: 3px; }.act-stamp-cena::before { inset: 9px; border-block-color: #E8AC4559; }
.act-stamp-pinata { border-radius: 3px 3px 100px 100px; }.act-stamp-pinata::before { border-radius: 0 0 95px 95px; }
.act-stamp-aguinaldos { border: 3px double #E8AC4566; }.act-stamp-aguinaldos::before { inset: 7px; border-style: dashed; border-color: #FFF6E530; }
.act-alternate { translate: 0 48px; }
.act-illustration { display: block; width: min(100%, 270px); height: auto; margin: 0 auto 18px; overflow: visible; filter: drop-shadow(0 8px 4px #12362325); }
.act-label { display: inline-block; padding: 5px 15px; margin: 0 0 13px; background: #C83B32; color: #FFF6E5; font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; line-height: 1.5; clip-path: polygon(0 0, 100% 0, 97% 50%, 100% 100%, 0 100%, 3% 50%); }
.act-moment-title { margin: 0 0 10px; color: #FFF6E5; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.7vw, 32px); line-height: 1.25; letter-spacing: -.025em; }
.act-moment-description { margin: 0 auto; max-width: 295px; font-size: 14px; color: #F3E7CF; line-height: 1.85; text-wrap: pretty; }
.act-motion-ready .act-stamp:not(.act-revealed) { opacity: 0; transform: translateY(18px); }
.act-stamp { transition: opacity .65s ease, transform .65s ease; }
.act-steam { transform-box: fill-box; transform-origin: center; animation: act-steam 6s ease-in-out infinite; animation-play-state: paused; }
.act-steam-second { animation-delay: -3s; }
.act-art-active .act-steam { animation-play-state: running; }
.act-swing { transform-origin: 160px 8px; animation: act-sway 8s ease-in-out infinite; animation-play-state: paused; }
.act-art-active .act-swing { animation-play-state: running; }
.act-closing { position: relative; max-width: 670px; margin: 70px auto 0; padding: 36px 35px 24px; text-align: center; }
.act-closing p { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 34px); line-height: 1.5; font-weight: 400; margin: 0 auto; color: #FFF0C6; text-wrap: balance; }
.act-closing-lights { display: block; width: min(100%, 330px); height: 64px; margin: 10px auto 0; overflow: visible; }
.act-flowers { position: absolute; width: 175px; height: 155px; bottom: 36px; pointer-events: none; filter: drop-shadow(0 5px 3px #102D2D40); }.act-flowers-left { left: 18px; }.act-flowers-right { right: 18px; transform: scaleX(-1); }
.act-ribbon { position: absolute; bottom: 0; height: 24px; left: 0; right: 0; background: repeating-linear-gradient(90deg,#C83B32 0 16px,#AD3029 16px 18px); border-top: 2px solid #E8AC45; border-bottom: 5px solid #173E2D; box-shadow: 0 -5px 0 #FFF6E510; }
@keyframes act-glow { from { opacity: .68; } to { opacity: 1; } }
@keyframes act-steam { 0%,100% { transform: translateY(2px); opacity: .4; } 50% { transform: translate(2px,-5px); opacity: .8; } }
@keyframes act-sway { 0%,100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }
@media (max-width: 760px) {
  .act-section { padding: 221px 34px 146px; }
  .act-section::after { inset: 15px; outline-offset: 4px; border-radius: 75px 75px 3px 3px; }
  .act-light-canopy { width: 980px; height: 192px; top: -7px; }
  .act-papel { width: 900px; height: 100px; top: 89px; }
  .act-edge-lantern { width: 31px; height: 98px; top: 177px; }.act-edge-lantern-left { left: 17px; }.act-edge-lantern-right { right: 17px; }
  .act-brass-stars { width: 24px; height: 78px; top: 490px; }.act-brass-stars-left { left: 7px; }.act-brass-stars-right { right: 7px; }
  .act-header { margin-bottom: 42px; }
  .act-eyebrow { font-size: 9px; gap: 8px; letter-spacing: .10em; }.act-eyebrow::before,.act-eyebrow::after { width: 12px; flex-shrink: 0; }
  .act-title { font-size: clamp(37px,10vw,48px); margin-bottom: 20px; }
  .act-description { font-size: 14px; line-height: 1.9; }
  .act-collection { grid-template-columns: minmax(0,1fr); gap: 31px; padding: 0; max-width: 470px; }
  .act-stamp { padding: 23px 19px 28px; }
  .act-alternate { translate: none; }
  .act-illustration { width: min(90%,235px); margin-left: 0; margin-right: auto; }
  .act-alternate .act-illustration { margin-left: auto; margin-right: 0; }
  .act-moment-title { font-size: 27px; }.act-moment-description { font-size: 14px; }
  .act-closing { margin-top: 47px; padding: 15px 0 20px; }
  .act-closing p { font-size: 25px; line-height: 1.5; }
  .act-flowers { width: 92px; height: 83px; bottom: 33px; }.act-flowers-left { left: 9px; }.act-flowers-right { right: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .act-section *, .act-section *::before, .act-section *::after { animation: none !important; transition: none !important; }
  .act-section .act-stamp { opacity: 1 !important; transform: none !important; }
}