.page-decoracion {
  --paper: #fff6e7;
  --violet: #88409b;
  --coral: #df765f;
}

.page-decoracion .hero::before {
  inset: 64px -8vw auto !important;
  height: min(32vh, 290px) !important;
  background-size: 108% 100% !important;
  background-position: center top !important;
  opacity: .76 !important;
  filter: drop-shadow(0 18px 24px rgba(36, 22, 45, .11)) saturate(1.08);
  transform-origin: top center;
  animation: upper-showpiece 8.4s ease-in-out infinite !important;
}

.page-decoracion .hero::before {
  inset: 82px 0 auto !important;
  height: min(28vh, 250px) !important;
  background: url("../images/decor/decoracion-top.svg") top center / 100% 100% no-repeat !important;
  opacity: .68 !important;
  animation: theme-top-float 6.4s ease-in-out infinite !important;
}

.page-decoracion .hero {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 18%, rgba(246, 200, 95, .34) 0 120px, transparent 122px),
    radial-gradient(circle at 88% 20%, rgba(238, 113, 130, .2) 0 160px, transparent 162px),
    linear-gradient(180deg, #fff8e8 0%, #fff1d6 58%, #f7eff8 100%);
}

.page-decoracion .hero::before {
  inset: 0 0 auto;
  height: min(31vh, 270px);
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(136, 64, 155, .26) 49% 51%, transparent 52%) 8% 18% / 760px 94px no-repeat,
    conic-gradient(from 150deg at 50% 0, rgba(238, 113, 130, .58) 0 60deg, transparent 61deg) 12% 50% / 48px 54px no-repeat,
    conic-gradient(from 150deg at 50% 0, rgba(246, 200, 95, .7) 0 60deg, transparent 61deg) 22% 57% / 48px 54px no-repeat,
    conic-gradient(from 150deg at 50% 0, rgba(168, 204, 69, .56) 0 60deg, transparent 61deg) 32% 50% / 48px 54px no-repeat,
    conic-gradient(from 150deg at 50% 0, rgba(114, 209, 208, .56) 0 60deg, transparent 61deg) 42% 57% / 48px 54px no-repeat,
    conic-gradient(from 150deg at 50% 0, rgba(136, 64, 155, .42) 0 60deg, transparent 61deg) 52% 50% / 48px 54px no-repeat,
    conic-gradient(from 150deg at 50% 0, rgba(238, 113, 130, .48) 0 60deg, transparent 61deg) 62% 57% / 48px 54px no-repeat,
    conic-gradient(from 150deg at 50% 0, rgba(246, 200, 95, .62) 0 60deg, transparent 61deg) 72% 50% / 48px 54px no-repeat,
    conic-gradient(from 150deg at 50% 0, rgba(168, 204, 69, .46) 0 60deg, transparent 61deg) 82% 57% / 48px 54px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .52), rgba(255, 255, 255, .18)) 78% 34% / 150px 110px no-repeat,
    linear-gradient(90deg, rgba(136, 64, 155, .22), rgba(238, 113, 130, .18)) 78% 34% / 150px 12px no-repeat,
    linear-gradient(180deg, rgba(255, 248, 232, .72), transparent 70%);
  opacity: .92;
  animation: decor-garland-sway 5.8s ease-in-out infinite;
}

.page-decoracion .hero::after {
  content: "";
  position: absolute;
  right: 4%;
  bottom: 7%;
  z-index: -1;
  width: 170px;
  height: 250px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(246, 200, 95, .72) 0 48px, transparent 50px),
    radial-gradient(ellipse at 26% 55%, rgba(240, 109, 86, .64) 0 38px, transparent 40px),
    radial-gradient(ellipse at 74% 55%, rgba(111, 58, 165, .42) 0 38px, transparent 40px),
    linear-gradient(90deg, transparent 49%, rgba(136, 64, 155, .24) 50%, transparent 51%);
  animation: balloon-rise-pop 4.1s ease-in-out infinite;
}

@keyframes decor-garland-sway {
  0%, 100% { transform: translateY(0) rotate(.2deg); }
  50% { transform: translateY(7px) rotate(-.2deg); }
}

.page-decoracion .hero-grid {
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
}

.page-decoracion .hero-grid::after {
  content: "";
  position: absolute;
  left: 38%;
  top: 14%;
  z-index: -1;
  width: 210px;
  height: 160px;
  border-radius: 60% 40% 55% 45%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 34%, rgba(255, 255, 255, .8) 0 18px, transparent 19px),
    linear-gradient(135deg, rgba(238, 113, 130, .18), rgba(246, 200, 95, .24));
  animation: gentle-wiggle 4s ease-in-out infinite;
}

.page-decoracion .hero-stage {
  min-height: clamp(430px, 55vw, 680px);
}

.page-decoracion .portal-ring {
  display: none;
}

.page-decoracion .stage-card {
  border-width: 7px;
  border-color: #fff;
  border-radius: 26px;
}

.page-decoracion .stage-card.primary {
  width: 70%;
  height: 70%;
  right: 4%;
  top: 6%;
  border-radius: 110px 110px 30px 30px;
  transform: rotateY(-8deg) rotateX(3deg) translateZ(80px);
}

.page-decoracion .stage-card.side {
  width: 48%;
  height: 34%;
  left: 0;
  bottom: 12%;
  border-radius: 28px 90px 28px 28px;
}

.page-decoracion .stage-card.mini {
  width: 43%;
  height: 31%;
  right: 0;
  bottom: 0;
  border-radius: 90px 28px 28px 28px;
}

.page-decoracion .service-gallery {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
}

.page-decoracion .service-gallery .gallery-item:nth-child(2),
.page-decoracion .service-gallery .gallery-item:nth-child(5) {
  margin-top: 28px;
}

@media (max-width: 1080px) {
  .page-decoracion .hero-grid,
  .page-decoracion .service-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-decoracion .hero-grid {
    grid-template-columns: 1fr;
  }

  .page-decoracion .service-gallery .gallery-item:nth-child(2),
  .page-decoracion .service-gallery .gallery-item:nth-child(5) {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .page-decoracion .hero {
    background:
      radial-gradient(circle at 18% 10%, rgba(246, 200, 95, .34) 0 86px, transparent 88px),
      radial-gradient(circle at 88% 28%, rgba(240, 109, 86, .22) 0 112px, transparent 114px),
      linear-gradient(180deg, #fff8e8, #fff1d6 58%, #f7eff8);
  }

  .page-decoracion .hero::after {
    right: 2%;
    bottom: 34%;
    width: 104px;
    height: 150px;
    opacity: .62;
  }

  .page-decoracion .hero-stage {
    min-height: 255px;
  }

  .page-decoracion .stage-card.primary {
    width: 68%;
    height: 72%;
    right: 4%;
    top: 0;
    border-radius: 82px 82px 24px 24px;
  }

  .page-decoracion .stage-card.side,
  .page-decoracion .stage-card.mini {
    width: 47%;
    height: 34%;
  }

  .page-decoracion .service-gallery {
    display: flex;
  }
}

.page-decoracion .hero::before {
  inset: 64px -8vw auto !important;
  height: min(32vh, 290px) !important;
  background-size: 108% 100% !important;
  background-position: center top !important;
  opacity: .76 !important;
  filter: drop-shadow(0 18px 24px rgba(36, 22, 45, .11)) saturate(1.08);
  transform-origin: top center;
  animation: upper-showpiece 8.4s ease-in-out infinite !important;
}