/* La noche del eclipse: una mansión violeta, niebla y detalles de ámbar. */
:root {
  color-scheme: dark;
  --ink: #120820;
  --paper: #f6e9ff;
  --muted: #d4bfe4;
  --line: #d5a4fa38;
  --violet: #7c3bd6;
  --pink: #ed51cf;
  --amber: #ffad45;
  --serif: "Cinzel", Georgia, serif;
}

body {
  background: radial-gradient(ellipse at 50% 20%, #35184e 0, #160b25 45%, var(--ink) 78%);
  color: var(--paper);
}
button, a, input, select { text-shadow: none; }
main, .footer { text-shadow: none; }
.skip-link { background: var(--amber); color: #24102c; }
.eyebrow, .section__index { color: #ecc8fb; }

/* El paisaje mantiene su encuadre vertical, también en una pantalla grande. */
.mansion-scene {
  position: fixed;
  z-index: 0;
  inset: 0 auto;
  left: 50%;
  width: min(100vw, calc(100svh * .60));
  transform: translateX(-50%);
  pointer-events: none;
  overflow: hidden;
  background: var(--ink);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.mansion-scene > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.83) saturate(.95);
}
.mansion-scene__sky {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 40% at 50% 16%, #f980db16, transparent 80%);
  mix-blend-mode: screen;
  animation: eclipseBreath 11s ease-in-out infinite alternate;
}
.mansion-scene__mist { position: absolute; inset: 0; overflow: hidden; }
.mansion-scene__mist::before, .mansion-scene__mist::after {
  content: "";
  position: absolute;
  left: -35%;
  width: 170%;
  height: 31%;
  bottom: -7%;
  background: radial-gradient(ellipse at 28% 65%, #cab0f238, transparent 40%), radial-gradient(ellipse at 72% 60%, #ba84e633, transparent 44%);
  filter: blur(23px);
  opacity: .5;
  animation: mistDrift 19s ease-in-out infinite alternate;
}
.mansion-scene__mist::after {
  bottom: 14%;
  height: 20%;
  opacity: .24;
  animation-duration: 27s;
  animation-direction: alternate-reverse;
}
.bat-layer { position: absolute; z-index: 2; inset: 0; pointer-events: none; overflow: hidden; }
.bat {
  position: absolute;
  left: var(--x, 18%);
  top: var(--y, 23%);
  width: var(--size, 25px);
  height: auto;
  color: #1a0a25;
  fill: currentColor;
  opacity: .83;
  animation: batFlight var(--duration, 12s) var(--delay, 0s) ease-in-out infinite alternate;
}
@keyframes eclipseBreath { from { opacity: .35; } to { opacity: .85; } }
@keyframes mistDrift { from { transform: translate3d(-4%, 1%, 0); } to { transform: translate3d(5%, -2%, 0); } }
@keyframes batFlight {
  0% { transform: translate3d(-12px, 7px, 0) rotate(-8deg) scaleY(.85); }
  35% { transform: translate3d(9px, -12px, 0) rotate(4deg) scaleY(1); }
  65% { transform: translate3d(31px, 1px, 0) rotate(-3deg) scaleY(.82); }
  100% { transform: translate3d(46px, -17px, 0) rotate(7deg) scaleY(1); }
}

/* La portada deja el centro libre para ver la casa y el camino del cementerio. */
.hero.section { min-height: 100svh; padding: 0; overflow: visible; transform: none; }
.hero__eyebrow {
  position: absolute;
  top: 6.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  margin: 0;
  font: 600 .69rem var(--condensed);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #ffe1b9;
}
.hero__title {
  position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 12ch;
  margin: 0;
  font: 600 clamp(2.2rem, min(9.4vw, 6.7svh), 4.3rem)/1.12 var(--serif);
  letter-spacing: .025em;
  color: #fff0ff;
  text-wrap: balance;
  text-shadow: none;
}
.hero__tagline {
  position: absolute;
  left: 50%;
  top: 29%;
  transform: translateX(-50%);
  width: 86%;
  max-width: 23rem;
  margin: 0;
  font-size: .72rem;
  letter-spacing: .015em;
  line-height: 1.55;
  color: #faeaff;
}
.hero__event-date {
  position: absolute;
  left: 50%;
  bottom: 14.5%;
  transform: translateX(-50%);
  width: 90%;
  margin: 0;
  font: 600 clamp(1.55rem, min(7vw, 4.1svh), 2.65rem)/1.2 var(--condensed);
  letter-spacing: .11em;
  color: #fff0d9;
  text-shadow: none;
}
.hero__event-date p { margin: 0; white-space: nowrap; }
.hero__event-date p + p { margin-top: .3rem; font-size: .73em; letter-spacing: .14em; }
.hero__actions {
  position: absolute;
  left: 50%;
  bottom: 5.8%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: .55rem;
  width: min(90%, 26rem);
}
.hero__actions .button { padding: .75rem .9rem; min-height: 43px; border-radius: 5px; gap: .5rem; font-size: .69rem; letter-spacing: .09em; }
.hero__scroll { bottom: .8%; color: #f0ccff; }
.hero__scroll:focus-visible { outline-color: var(--amber); }

/* Un portón de hierro invita a entrar a la nueva mansión. */
.intro.gate-intro {
  display: block;
  background: var(--ink);
  perspective: 1200px;
  transition: opacity .7s ease, visibility .7s ease;
}
.intro.gate-intro::before {
  content: "";
  position: absolute;
  inset: 0 auto;
  left: 50%;
  width: min(100vw, calc(100svh * .60));
  transform: translateX(-50%);
  background: linear-gradient(#12082040, #12082050), var(--scene-image, url("../media/mansion-eclipse.webp")) center / cover;
  filter: brightness(.8) saturate(.95);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  transition: transform 1.85s cubic-bezier(.22, .65, .2, 1);
}
body.intro-active main, body.intro-active .float-menu { visibility: hidden; opacity: 0; }
.gate-intro__copy {
  position: absolute;
  z-index: 2;
  top: max(5.5svh, 2rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(88vw, 31rem);
  text-align: center;
  transition: opacity .55s ease, transform .85s ease;
}
.gate-intro__copy .eyebrow { margin: 0 0 .8rem; color: #ffd297; font-size: .68rem; letter-spacing: .21em; }
.gate-intro__copy h2 { margin: 0; font: 500 clamp(1.7rem, 6.2vw, 2.8rem)/1.2 var(--serif); color: #ffefff; }
.gate-intro__invitation { margin: .75rem 0 0; font-size: .76rem; line-height: 1.5; color: #ebcdf6; }
.gate-stage {
  position: absolute;
  z-index: 3;
  top: 53.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, 620px, 54svh);
  height: min(68svh, 760px);
  perspective: 1100px;
  transition: transform 1.85s cubic-bezier(.22, .65, .2, 1);
}
.entry-gate {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #382042;
  cursor: pointer;
  transform-style: preserve-3d;
  filter: none;
  box-shadow: none;
}
.entry-gate:focus-visible { outline: 2px solid #ffd49a; outline-offset: 8px; }
.entry-gate__left, .entry-gate__right {
  position: absolute;
  top: 0;
  width: 54%;
  height: 100%;
  overflow: visible;
  filter: none;
  backface-visibility: visible;
  transition: transform 1.65s cubic-bezier(.3, .05, .25, 1);
}
.entry-gate__left { left: 0; transform-origin: 14% 50%; }
.entry-gate__right { right: 0; transform-origin: 86% 50%; }
.entry-gate__left img, .entry-gate__right img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.entry-gate__right img { transform: scaleX(-1); }
.gate-intro__controls {
  position: absolute;
  z-index: 4;
  bottom: max(5svh, 1.2rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(88vw, 28rem);
  text-align: center;
  transition: opacity .45s ease;
}
#gateHint { margin: 0 0 .65rem; color: #ffddb1; font: 600 .76rem var(--condensed); letter-spacing: .15em; }
.gate-intro .intro__skip { background: #210f32c9; color: #edccfc; border-color: #d5a4fa65; border-radius: 5px; font-size: .7rem; }
.gate-intro .intro__skip:hover { border-color: #f3c3ed; }
.gate-intro.is-opening .entry-gate__left { transform: rotateY(-112deg); }
.gate-intro.is-opening .entry-gate__right { transform: rotateY(112deg); }
.gate-intro.is-opening .gate-stage { transform: translate(-50%, -50%) scale(1.3); }
.gate-intro.is-opening::before { transform: translateX(-50%) scale(1.08); }
.gate-intro.is-opening .gate-intro__copy { opacity: 0; transform: translate(-50%, -12px); }
.gate-intro.is-opening #gateHint { opacity: 0; }

/* Las mismas secciones, con pequeñas superficies oscuras para leer sobre la niebla. */
.section:not(.hero) { padding: clamp(4.5rem, 9vw, 6.5rem) 1.5rem; background: transparent; }
.section__inner { width: min(100%, 32rem); }
.section__inner > .eyebrow { color: #ffc67f; letter-spacing: .21em; }
.section__inner > .display {
  max-width: 18ch;
  font: 500 clamp(1.8rem, 6.3vw, 2.8rem)/1.18 var(--serif);
  letter-spacing: .01em;
  color: #fff1ff;
  text-shadow: none;
}
.section__copy, .section__inner > .message__copy, .section__inner > .dress__note,
.section__inner > .prize__copy, .section__inner > .rsvp__note,
.hero__tagline, .details__note, .weather__copy, .video-section__copy, .lodging__copy, .gifts__copy,
.venue__address, .empty-note, .gallery__note { color: #f0dff8; }
.section__status { color: #d9bbeb; }
.section__mark, .section__icon { color: var(--amber); stroke: var(--amber); filter: none; }
.section__mark { color: var(--pink); }
.horror-card, .horror-player, .countdown div, .weather__day, .lodging__card,
.gifts__panel, .video-section__frame, .gallery__placeholder {
  background: #1b0b2bcf;
  border-color: #c687ea55;
  box-shadow: none;
  backdrop-filter: none;
}
.horror-card { border-radius: 12px; }
.horror-card h3, .gifts__panel h3, .lodging__card h3 { color: #ffe7ff; }
.horror-card p, .gifts__panel p, .lodging__address, .lodging__note { color: #e5cbed; }
.message__copy { font-size: .94rem; line-height: 1.9; }
.message__signature { color: #ffc981; font-family: var(--serif); font-size: 1.15rem; letter-spacing: .015em; }

.button, .section__inner .button { border-color: #e49ed0; text-shadow: none; }
.button--outline, .section__inner .button--outline { background: #250e39ad; border-color: #e799d185; color: #ffedff; }
.button--solid, .section__inner .button--solid { background: var(--amber); border-color: var(--amber); color: #2b1234; }
.button:hover, .section__inner .button:hover { background: #ffca88; border-color: #ffca88; color: #2b1234; }
.section__inner .text-link, .text-link { color: #ffd6a2; }
:is(.section, .gallery-dialog) :is(button, a, input, select):focus-visible { outline-color: #ffcb85; }

.music__song { color: #fff0ff; }
.music__artist, .music__times { color: #d8b9e8; }
.music__play { border-color: var(--pink); background: var(--pink); color: #250d35; }
.music__track input { accent-color: var(--pink); }
.month .month__heading { color: #ffe8ff; }
.month__grid > span { color: #f0ddf8; }
.month__grid > .month__weekday { color: #c9a7de; }
.month__grid > .is-event { background: var(--amber); color: #2b1234; box-shadow: none; }
.month .month__caption { border-color: #c987e235; color: #e7c4f2; }
.section__inner .details__time { color: #ffd4a0; }
.countdown b { color: #ffc47a; }
.countdown span { color: #e8c6f6; }
.venue__card .venue__name { color: #ffecff; }
.venue__card .venue__address, .venue__time { color: #e5c9f1; }
.venue__map iframe { filter: grayscale(.55) saturate(.65); }
.weather__temperature { color: #ffc77e; }
.weather__day time, .weather__condition, .weather__rain, .weather__outlook .weather__copy { color: #e5c9f1; }
.itinerary__list li::before { background: #c789df70; }
.itinerary__list li::after { background: var(--pink); box-shadow: none; }
.itinerary__list time { color: #ffc67e; }
.itinerary__list h3 { color: #fce9ff; }
.itinerary__list p { color: #e4c9f0; }
.gallery__item { border-color: #d194ee65; background: #1b0b2b; }
.gallery__item:hover { border-color: var(--pink); }
.gallery__placeholder, .video-section__empty { color: #dfb5ef; }
.gallery-dialog { border-color: #d493eb; background: #1b0b2b; color: #fbeaff; }
.gallery-dialog::backdrop { background: #10051eed; }
.gallery-dialog > button { border-color: #e6b1f5; background: #29103d; color: #ffe9ff; }
.dress__figures { color: #ffc47c; }
.dress__type { color: #fce7ff; }
.dress__palette span { border-color: #eed2fa80; }
.lodging__list { scrollbar-color: #b076d6 transparent; }
.lodging__stars { color: var(--amber); }
.lodging__distance { color: #eac6fa; }
.carousel__dots button { border-color: #dca7ed; }
.carousel__dots .is-active { background: var(--pink); border-color: var(--pink); }
.gifts__tab { border-color: #cd8ae46b; background: #220e35bf; color: #eed5f8; }
.gifts__tab[aria-selected="true"] { background: var(--pink); border-color: var(--pink); color: #270d34; }
.gifts__account div { border-color: #c787df35; }
.gifts__account dt { color: #d0a3e4; }
.gifts__account dd, .gifts__event-number { color: #ffe4ff; }
.prize__criteria span { background: #270e3ca3; border-color: #cf87db6b; color: #efd7f7; }
.rsvp__form > label, .rsvp__choices legend { color: #f2d9fb; }
.rsvp__form input, .rsvp__form select, .rsvp__form #guestName {
  background: #160925c9;
  border-color: #d090e26b;
  color: #ffefff;
}
.rsvp__form #guestName::placeholder { color: #c29dd1; }
.rsvp__choices label { color: #e8d2f3; border-color: #b97cd252; background: #240e35ab; }
.rsvp__choices label:has(input:checked) { border-color: var(--pink); background: #7c3bd633; }
.rsvp__choices input { accent-color: var(--pink); }
.rsvp__error { color: #ffb8b6; }
.section__inner .rsvp__deadline, .rsvp__deadline { color: #d3acdf; }
.footer { color: #ddb9ec; font-size: .72rem; }
.footer a { color: #ffd098; }

/* Menú y switches mantienen el mismo comportamiento de las otras invitaciones. */
.float-menu { left: max(.75rem, env(safe-area-inset-left)); right: auto; }
.float-menu__toggle { background: #1d0b2ee8; border-color: #d091eb78; color: #f2dffb; border-radius: 999px; }
.menu-chevron { transition: transform .2s; font-size: 1rem; line-height: 1; }
.float-menu__toggle[aria-expanded=true] .menu-chevron { transform: rotate(180deg); }
.menu-icon i { background: #efcbff; }
.float-menu__panel { left: 0; right: auto; width: min(18.5rem, calc(100vw - 1.5rem)); max-height: min(82svh, 42rem); background: #1a0a2bf7; border-color: #cb86e24d; border-radius: 16px; box-shadow: none; }
.float-menu__heading, .float-menu__heading span { color: #f7e5ff; }
.float-menu__hint { color: #d6b2e5; }
.float-menu__row { border-color: #c988de20; }
.float-menu__link { color: #e7ccf4; }
.float-menu__link { display: flex; gap: .6rem; align-items: center; border-radius: 6px; padding-inline: .35rem; font-size: .77rem; }
.menu-section-icon { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.float-menu__link.is-current { background: color-mix(in srgb, var(--violet) 28%, transparent); }
.float-menu__link.is-cta { background: var(--violet); color: var(--paper); font-weight: 600; }
.float-menu__link.is-cta.is-current { outline: 1px solid var(--amber); outline-offset: -1px; }
.float-menu__link:hover, .float-menu__link:focus { color: #ffd092; }
.float-menu__link[aria-disabled=true] { color: #9d7cae; text-decoration-color: #9d7cae66; }
.section-visibility__track { background: #352041; border-color: #9264a9; }
.section-visibility { position: relative; }
.section-visibility__input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.section-visibility__track { width: 36px; height: 21px; pointer-events: none; }
.section-visibility__track span { top: 2px; left: 2px; width: 16px; height: 16px; transition: transform .25s cubic-bezier(.3,.7,.3,1); }
.section-visibility:has(input:checked) .section-visibility__track { background: var(--violet); border-color: var(--pink); }
.section-visibility:has(input:checked) .section-visibility__track span { transform: translateX(15px); background: var(--paper); }
.section-visibility:has(input:disabled) { opacity: .5; cursor: default; }
.section-visibility input:focus-visible + .section-visibility__track { outline: 2px solid var(--amber); outline-offset: 4px; }
.menu-demo-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; padding: .9rem 0 .3rem; font-size: .69rem; }
.menu-demo-footer p { margin: 0; color: var(--muted); }
.menu-demo-footer > button { border: 0; border-bottom: 1px solid var(--amber); background: none; color: var(--amber); padding: .3rem 0; cursor: pointer; font-size: .68rem; }
.menu-demo-footer .button { flex-basis: 100%; min-height: 40px; padding: .7rem; font-size: .68rem; }
.float-music { position: fixed; right: max(.75rem, env(safe-area-inset-right)); top: 1.2rem; display: flex; gap: .4rem; padding: .7rem .9rem; border: 1px solid #d091eb78; background: #1d0b2ee8; color: var(--paper); border-radius: 999px; cursor: pointer; font-size: .7rem; }
.menu-tip { position: absolute; left: 0; top: calc(100% + 12px); width: min(17rem, calc(100vw - 1.5rem)); padding: .8rem; background: var(--violet); color: var(--paper); border: 0; border-radius: 10px; font-size: .72rem; cursor: pointer; animation: menuFloat 3s ease-in-out infinite alternate; }
.menu-pulse { animation: menuPulse 2s ease-in-out infinite alternate; }
@keyframes menuFloat { to { transform: translateY(4px); } }
@keyframes menuPulse { to { border-color: var(--amber); } }
.oc-hidden, .oc-demo-off { display: none !important; }
.weather__day { flex: 0 0 100%; }
.weather__icon { font-size: 1.7rem; margin: .4rem 0; }
.weather__day.is-event { border-color: var(--amber); }
.weather__event-label, .weather__year { color: var(--amber); font-size: .66rem; }
.section-visibility__track span { background: #b995ce; box-shadow: none; }
.section-visibility[aria-checked=true] .section-visibility__track { background: var(--violet); border-color: #ed8ada; }
.section-visibility[aria-checked=true] .section-visibility__track span { background: #ffe6ff; }
.section-visibility:hover .section-visibility__track, .section-visibility:focus-visible .section-visibility__track { outline-color: #f5c47e; }
.is-hidden .section-visibility__track { background: #281333; }
.is-hidden .section-visibility__track span { background: #916ba5; }
.float-menu__close, .float-menu__close span { color: #debde9; }

@media (max-width: 380px) {
  .section:not(.hero) { padding-inline: 1.2rem; }
  .hero__eyebrow { font-size: .61rem; letter-spacing: .18em; }
  .hero__title { font-size: clamp(1.9rem, 9.4vw, 2.3rem); }
  .hero__tagline { font-size: .68rem; top: 28%; }
  .hero__actions { gap: .4rem; }
  .hero__actions .button { padding-inline: .72rem; font-size: .63rem; }
  .gate-intro__copy h2 { font-size: 1.65rem; }
  .gate-intro__copy .eyebrow { letter-spacing: .15em; font-size: .61rem; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .mansion-scene { width: min(100vw, calc(100svh * .60)); }
  .hero__eyebrow { top: 5%; font-size: .56rem; letter-spacing: .15em; }
  .hero__title { top: 11%; font-size: 1.7rem; max-width: 13ch; }
  .hero__tagline { top: 31%; font-size: .62rem; max-width: 15rem; }
  .hero__event-date { bottom: 20%; font-size: 1.1rem; }
  .hero__event-date p + p { margin-top: .15rem; }
  .hero__actions { bottom: 7%; gap: .4rem; }
  .hero__actions .button { min-height: 32px; padding: .4rem .65rem; font-size: .56rem; }
  .hero__scroll { bottom: 0; padding: .15rem 1rem; font-size: .9rem; }
  .gate-intro__copy { top: 4%; }
  .gate-intro__copy h2 { font-size: 1.35rem; }
  .gate-intro__copy .eyebrow { margin-bottom: .3rem; font-size: .55rem; }
  .gate-intro__invitation { margin-top: .3rem; font-size: .61rem; }
  .gate-stage { height: 64svh; width: 51svh; top: 53%; }
  .gate-intro__controls { bottom: 3%; }
  #gateHint { font-size: .61rem; margin-bottom: .15rem; }
  .gate-intro .intro__skip { margin-top: .2rem; padding: .3rem .6rem; font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-tip, .menu-pulse { animation: none !important; }
  .mansion-scene__sky, .mansion-scene__mist::before, .mansion-scene__mist::after, .bat { animation: none !important; }
  .gate-stage, .entry-gate__left, .entry-gate__right, .gate-intro__copy, .gate-intro__controls, .intro.gate-intro::before { transition: none !important; }
  .gate-intro.is-opening .gate-stage { transform: translate(-50%, -50%); }
  .gate-intro.is-opening::before { transform: translateX(-50%); }
}