.moments {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(230px, 23vw, 290px) clamp(24px, 5vw, 70px) 118px;
  color: var(--midnight);
  background: linear-gradient(180deg, #091a33 0, #20385d 95px, #94afc6 195px, #dceaf5 285px, #dceaf5 100%);
}
.moments::before {
  content: "";
  position: absolute;
  inset: 210px 0 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 48% 16% at 50% 30%, rgba(250, 252, 255, .75), transparent),
    radial-gradient(circle at 5% 53%, rgba(188, 200, 214, .18), transparent 17%),
    radial-gradient(circle at 95% 68%, rgba(188, 200, 214, .2), transparent 17%);
}
.moments-head { width: min(100%, 760px); margin: 0 auto; text-align: center; }
.moments-eyebrow {
  margin: 0 0 23px;
  color: var(--deep);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .25em;
  line-height: 1.5;
  text-transform: uppercase;
}
.moments h2 {
  margin: 0;
  color: var(--midnight);
  font: 400 clamp(3.3rem, 6.5vw, 6rem)/1.03 var(--serif);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.moments-intro {
  width: min(100%, 570px);
  margin: 25px auto 0;
  color: var(--deep);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.75;
  text-wrap: pretty;
}
.moments-stage { position: relative; width: min(100%, 1130px); margin: clamp(75px, 9vw, 125px) auto 0; }
.moments-garland { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.moments-wire { fill: none; stroke: #8299ad; stroke-width: 1.7; stroke-linecap: round; }
.moments-bulb { fill: #d0dce6; stroke: #7992a8; stroke-width: 1.2; opacity: .75; transition: fill 1s ease var(--light-delay, 0s), opacity 1s ease var(--light-delay, 0s), filter 1s ease var(--light-delay, 0s); }
.moments-bulb.is-lit { fill: #fff; opacity: 1; filter: drop-shadow(0 0 5px rgba(250, 252, 255, .95)) drop-shadow(0 0 8px rgba(111, 147, 177, .7)); }
.moments-bulb.is-lit:nth-child(7n) { animation: moments-breathe 6s ease-in-out infinite; }
@keyframes moments-breathe { 50% { opacity: .69; } }
.moments-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(76px, 10vw, 145px); row-gap: clamp(105px, 11vw, 150px); }
.moment { position: relative; min-width: 0; text-align: center; }
.moment:nth-child(3) { grid-column: 2; grid-row: 2; }
.moment:nth-child(4) { grid-column: 1; grid-row: 2; }
.moment-art { width: min(100%, 240px); height: 190px; margin: 0 auto; filter: drop-shadow(0 12px 15px rgba(32, 56, 93, .14)); }
.moment-art svg { display: block; width: 100%; height: 100%; }
.moment-copy { max-width: 390px; margin: 18px auto 0; }
.moment h3 { margin: 0; color: var(--midnight); font: 400 clamp(1.75rem, 2.5vw, 2.3rem)/1.18 var(--serif); }
.moment p { margin: 11px auto 0; color: var(--deep); font-size: clamp(.96rem, 1.2vw, 1.04rem); line-height: 1.7; text-wrap: pretty; overflow-wrap: anywhere; }
.moments.is-enhanced .moment { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.moments.is-enhanced .moment.is-visible { opacity: 1; transform: none; }
.moments-close { width: min(100%, 700px); margin: clamp(95px, 11vw, 145px) auto 0; text-align: center; }
.moments-close-ornament { display: flex; align-items: center; justify-content: center; gap: 13px; height: 36px; }
.close-star { margin-right: 9px; color: #7f98af; font-size: 2rem; line-height: 1; text-shadow: 0 1px 0 #fff, 0 0 9px rgba(130, 153, 173, .35); }
.close-light { width: 5px; height: 5px; border: 1px solid #7891a8; border-radius: 50%; background: #fff; box-shadow: 0 0 5px #fff, 0 0 11px rgba(105, 143, 177, .58); }
.moments-close p { margin: 18px auto 0; color: var(--midnight); font: 400 clamp(1.8rem, 3vw, 2.7rem)/1.3 var(--serif); text-wrap: balance; }

@media (max-width: 700px) {
  .moments { padding: 214px 25px 88px; background: linear-gradient(180deg, #091a33 0, #20385d 73px, #94afc6 148px, #dceaf5 218px, #dceaf5 100%); }
  .moments-eyebrow { font-size: .65rem; letter-spacing: .2em; }
  .moments h2 { font-size: clamp(2.8rem, 10vw, 4.5rem); }
  .moments-intro { font-size: .97rem; }
  .moments-stage { margin-top: 74px; }
  .moments-grid { grid-template-columns: minmax(0, 1fr); row-gap: 82px; }
  .moment:nth-child(3), .moment:nth-child(4) { grid-column: auto; grid-row: auto; }
  .moment { text-align: left; }
  .moment-art { width: min(67vw, 222px); height: auto; aspect-ratio: 240 / 190; margin-left: 6%; margin-right: auto; }
  .moment:nth-child(even) .moment-art { margin-left: auto; margin-right: 5%; }
  .moment-copy { max-width: min(310px, calc(100% - 30px)); margin: 18px 0 0; }
  .moment h3 { font-size: clamp(1.75rem, 6vw, 2rem); }
  .moment p { font-size: .96rem; }
  .moments-close { margin-top: 90px; }
}
@media (max-width: 360px) {
  .moments { padding-left: 20px; padding-right: 20px; }
  .moment-art { width: min(65vw, 205px); }
  .moment-copy { max-width: calc(100% - 30px); }
}
/* ---- Pulido visual: transición de noche a hielo, revelados y brillos ---- */
.moments {
  padding-top: clamp(330px, 29vw, 400px);
  background:
    linear-gradient(180deg, #091a33 0, rgba(9, 26, 51, .8) 50px, rgba(9, 26, 51, .45) 120px, rgba(9, 26, 51, .15) 200px, rgba(9, 26, 51, 0) 280px),
    radial-gradient(ellipse 110% 580px at 50% 740px, #dceaf5 0 38%, rgba(220, 234, 245, .8) 52%, rgba(190, 210, 228, .52) 66%, rgba(140, 170, 205, .26) 80%, rgba(100, 135, 180, .08) 92%, rgba(90, 125, 170, 0) 100%),
    linear-gradient(180deg, rgba(220, 234, 245, 0) 250px, rgba(220, 234, 245, .35) 400px, rgba(220, 234, 245, .8) 520px, #dceaf5 640px),
    #dceaf5 url("assets/images/cielo-acuarela.jpg") 30% 58% / 150% auto no-repeat;
}
.moments::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 320px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1.4px 1.4px at 8% 22%, #fafcff 50%, transparent 51%),
    radial-gradient(1px 1px at 19% 61%, #dceaf5 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 31% 14%, #fafcff 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 47%, #bcc8d6 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 58% 9%, #fafcff 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 38%, #dceaf5 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 79% 19%, #fafcff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 56%, #bcc8d6 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 95% 12%, #fafcff 50%, transparent 51%);
  -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 25%, transparent 80%);
  animation: moments-stars 5s ease-in-out infinite alternate;
}
@keyframes moments-stars { from { opacity: .55; } to { opacity: 1; } }
.moments::before { inset: 330px 0 0; }

/* Bancos de nubes de acuarela que suben desde la luz y se disuelven en la noche */
.moments-head::before,
.moments-head::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  z-index: -1;
  pointer-events: none;
}
.moments-head::before {
  top: 110px;
  height: 400px;
  background:
    radial-gradient(circle 120px at 5% 70%, rgba(214, 228, 241, .28), transparent 100%),
    radial-gradient(circle 150px at 17% 48%, rgba(214, 228, 241, .2), transparent 100%),
    radial-gradient(circle 110px at 30% 74%, rgba(214, 228, 241, .26), transparent 100%),
    radial-gradient(circle 170px at 44% 40%, rgba(214, 228, 241, .16), transparent 100%),
    radial-gradient(circle 120px at 57% 72%, rgba(214, 228, 241, .26), transparent 100%),
    radial-gradient(circle 160px at 72% 52%, rgba(214, 228, 241, .2), transparent 100%),
    radial-gradient(circle 100px at 86% 36%, rgba(214, 228, 241, .16), transparent 100%),
    radial-gradient(circle 150px at 99% 66%, rgba(214, 228, 241, .26), transparent 100%);
  filter: blur(30px);
  animation: moments-mist 30s ease-in-out infinite alternate;
}
.moments-head::after {
  top: 250px;
  height: 300px;
  background:
    radial-gradient(circle 130px at 2% 66%, rgba(236, 244, 250, .32), transparent 100%),
    radial-gradient(circle 90px at 14% 52%, rgba(236, 244, 250, .34), transparent 100%),
    radial-gradient(circle 150px at 27% 72%, rgba(236, 244, 250, .38), transparent 100%),
    radial-gradient(circle 105px at 40% 58%, rgba(236, 244, 250, .32), transparent 100%),
    radial-gradient(circle 160px at 55% 74%, rgba(236, 244, 250, .36), transparent 100%),
    radial-gradient(circle 95px at 68% 54%, rgba(236, 244, 250, .32), transparent 100%),
    radial-gradient(circle 150px at 83% 70%, rgba(236, 244, 250, .38), transparent 100%),
    radial-gradient(circle 115px at 97% 58%, rgba(236, 244, 250, .34), transparent 100%);
  filter: blur(30px);
  animation: moments-mist 38s ease-in-out infinite alternate-reverse;
}
@keyframes moments-mist { from { translate: -3% 0; } to { translate: 3% 0; } }

/* Encabezado con revelado escalonado */
.moments-head.reveal-on-view { opacity: 1; transform: none; }
.moments-head > * { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1), filter 1s ease; }
.moments-head > :nth-child(2) { transition-delay: .14s; }
.moments-head > :nth-child(3) { transition-delay: .28s; }
.moments-head.is-in-view > *, .no-js .moments-head > * { opacity: 1; transform: none; filter: none; }
.moments h2 {
  background: linear-gradient(180deg, #16264a 0%, #101c38 45%, #2c4a73 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(250, 252, 255, .75));
}
.moments-head.is-in-view h2 { filter: drop-shadow(0 2px 0 rgba(250, 252, 255, .75)); }
.moments-intro::after {
  content: "";
  display: block;
  width: 150px;
  height: 1px;
  margin: 30px auto 0;
  background: linear-gradient(90deg, transparent, #9fb3c6 25%, #20385d 50%, #9fb3c6 75%, transparent);
  transform: scaleX(0);
  transition: transform 1.3s cubic-bezier(.2, .7, .2, 1) .6s;
}
.moments-head.is-in-view .moments-intro::after, .no-js .moments-intro::after { transform: scaleX(1); }

/* Guirnalda más luminosa */
.moments-wire { stroke: #8ba3b8; filter: drop-shadow(0 1px 0 rgba(250, 252, 255, .9)); }
.moments-bulb.is-lit { filter: drop-shadow(0 0 4px rgba(250, 252, 255, 1)) drop-shadow(0 0 10px rgba(111, 147, 177, .8)); }
.moments-bulb.is-lit:nth-child(3n) { animation: moments-twinkle 3.2s ease-in-out infinite; }
.moments-bulb.is-lit:nth-child(3n+1) { animation: moments-twinkle 4.4s ease-in-out 1.1s infinite; }
.moments-bulb.is-lit:nth-child(7n) { animation: moments-breathe 6s ease-in-out infinite; }
@keyframes moments-twinkle { 50% { opacity: .55; } }

/* Medallón de luz detrás de cada ilustración */
.moment-art { position: relative; }
.moment-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 118%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(250, 252, 255, .95) 0, rgba(250, 252, 255, .55) 34%, rgba(220, 234, 245, 0) 68%);
  animation: moments-halo 7s ease-in-out infinite;
}
@keyframes moments-halo { 50% { opacity: .7; scale: .94; } }
.moment-art svg { animation: moments-float 6.5s ease-in-out infinite; }
.moment:nth-child(2) .moment-art svg { animation-delay: -1.6s; }
.moment:nth-child(3) .moment-art svg { animation-delay: -3.2s; }
.moment:nth-child(4) .moment-art svg { animation-delay: -4.8s; }
@keyframes moments-float { 50% { translate: 0 -8px; rotate: -1.2deg; } }
.moment-art--star svg > path:last-of-type,
.moment-art--toast svg > path:last-of-type,
.moment-art--camera svg > path:last-of-type {
  transform-box: fill-box;
  transform-origin: center;
  animation: moments-sparkle 3.6s ease-in-out infinite;
}
@keyframes moments-sparkle { 50% { opacity: .35; scale: .8; } }

/* Revelado de cada momento: ilustración y luego el texto */
.moment h3::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, #7f98af, transparent);
}
.moments.is-enhanced .moment, .moments.is-enhanced .moment.is-visible { opacity: 1; transform: none; transition: none; }
.moments.is-enhanced .moment > * { opacity: 0; transform: translateY(22px); filter: blur(6px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1), filter 1s ease; }
.moments.is-enhanced .moment > .moment-art { transform: translateY(18px) scale(.9); }
.moments.is-enhanced .moment > .moment-copy { transition-delay: .2s; }
.moments.is-enhanced .moment.is-visible > * { opacity: 1; transform: none; filter: none; }

/* Cierre */
.moments-close.reveal-on-view { opacity: 1; transform: none; }
.moments-close > * { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1), filter 1s ease; }
.moments-close > p { transition-delay: .25s; }
.moments-close.is-in-view > *, .no-js .moments-close > * { opacity: 1; transform: none; filter: none; }
.close-star { display: inline-block; animation: moments-star-spin 7s ease-in-out infinite; }
@keyframes moments-star-spin { 50% { rotate: 20deg; scale: 1.12; } }
.close-light { opacity: .35; transition: opacity .6s ease, box-shadow .6s ease; }
.moments-close.is-in-view .close-light, .no-js .close-light { opacity: 1; }
.moments-close.is-in-view .close-light:nth-child(2) { transition-delay: .5s; }
.moments-close.is-in-view .close-light:nth-child(3) { transition-delay: .7s; }
.moments-close.is-in-view .close-light:nth-child(4) { transition-delay: .9s; }
.moments-close.is-in-view .close-light { animation: moments-twinkle 3s ease-in-out 1.6s infinite; }
.moments-close.is-in-view .close-light:nth-child(3) { animation-delay: 2.1s; }
.moments-close.is-in-view .close-light:nth-child(4) { animation-delay: 2.6s; }
.moments-close p {
  background: linear-gradient(90deg, #20385d, #101c38 35%, #101c38 65%, #20385d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 700px) {
  .moments {
    padding-top: 290px;
    background:
      linear-gradient(180deg, #091a33 0, rgba(9, 26, 51, .88) 40px, rgba(9, 26, 51, .5) 105px, rgba(9, 26, 51, 0) 230px),
      radial-gradient(ellipse 120% 330px at 50% 500px, #dceaf5 0 50%, rgba(220, 234, 245, .82) 62%, rgba(186, 207, 226, .5) 76%, rgba(140, 170, 202, .18) 89%, rgba(120, 150, 185, 0) 100%),
      linear-gradient(180deg, rgba(220, 234, 245, 0) 180px, rgba(220, 234, 245, .4) 290px, rgba(220, 234, 245, .85) 370px, #dceaf5 450px),
      #dceaf5 url("assets/images/cielo-acuarela.jpg") 30% 58% / 150% auto no-repeat;
  }
  .moments::after { height: 230px; }
  .moments::before { inset: 260px 0 0; }
  .moments-head::before { top: 90px; height: 260px; left: -30%; right: -30%; }
  .moments-head::after { top: 170px; height: 220px; left: -30%; right: -30%; }
  .moment-copy { max-width: min(290px, calc(100% - 74px)); }
  .moment h3::after { margin-left: 0; background: linear-gradient(90deg, #7f98af, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .moments::after, .moments-head::before, .moments-head::after, .moment-art::before, .moment-art svg,
  .moment-art svg > path, .close-star, .close-light, .moments-close.is-in-view .close-light { animation: none !important; }
  .moments-head > *, .moments-close > *, .moments.is-enhanced .moment > *, .close-light { opacity: 1; transform: none; filter: none; transition: none; }
  .moments-intro::after { transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .moments.is-enhanced .moment { opacity: 1; transform: none; transition: none; }
  .moments-bulb, .moments-bulb.is-lit { animation: none !important; transition: none; fill: #fff; opacity: 1; }
}