/* =========================================================
   PALETA AJUSTADA: ROJO ELEGANTE + DORADO
   Se conservaron todas las clases, animaciones y responsive.
========================================================= */

:root {
  --wine-950: #210000;
  --wine-900: #350000;
  --wine-850: #4b0000;
  --wine-800: #670004;
  --wine-700: #8f0a12;
  --wine-600: #b91b22;

  --gold-100: #fff8de;
  --gold-200: #f8e8ad;
  --gold-300: #ebd27c;
  --gold-400: #d9b94e;
  --gold-500: #bd8f2b;

  --cream: #fff8e9;
  --text-soft: #eadfcf;

  --glass: rgba(104, 0, 4, 0.72);
  --glass-strong: rgba(72, 0, 2, 0.88);

  --gold-line: rgba(235, 210, 124, 0.42);
  --shadow: 0 26px 70px rgba(18, 0, 0, 0.52);

  --font-display: "Cinzel Decorative", "Cinzel", serif;
  --font-serif: "Cinzel", serif;
  --font-script: "Great Vibes", cursive;
  --font-body: "Quicksand", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  min-width: 320px;
  font-family: var(--font-body);
  color: var(--cream);
  background: var(--wine-950);
  overflow-x: hidden;
}

body.locked {
  overflow: hidden;
}

body.main-bg {
  background:
    radial-gradient(circle at 12% 18%, rgba(182, 28, 36, 0.24), transparent 30%),
    radial-gradient(circle at 90% 70%, rgba(189, 143, 43, 0.12), transparent 34%),
    linear-gradient(rgba(33, 0, 0, 0.86), rgba(47, 0, 0, 0.94)),
    url("../img/inicio.png") center top / cover fixed no-repeat;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.hidden {
  display: none !important;
}

::selection {
  color: var(--wine-950);
  background: var(--gold-300);
}

/* INTRO */
#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(248, 232, 173, 0.19), transparent 24%),
    radial-gradient(circle at 14% 84%, rgba(182, 28, 36, 0.82), transparent 32%),
    radial-gradient(circle at 86% 76%, rgba(145, 12, 20, 0.66), transparent 28%),
    linear-gradient(140deg, #210000 0%, #710006 48%, #2e0000 100%);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#intro-screen::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(
    from 10deg,
    transparent 0 16deg,
    rgba(255, 248, 222, 0.08) 18deg 21deg,
    transparent 24deg 58deg,
    rgba(235, 210, 124, 0.12) 62deg 65deg,
    transparent 68deg 110deg,
    rgba(255, 255, 255, 0.06) 114deg 117deg,
    transparent 120deg 180deg,
    rgba(235, 210, 124, 0.10) 184deg 188deg,
    transparent 191deg 250deg,
    rgba(255, 248, 222, 0.07) 254deg 258deg,
    transparent 262deg 360deg
  );
  opacity: 0.8;
  animation: intro-rays 18s linear infinite;
  pointer-events: none;
}

.intro-noise {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at center, #000, transparent 76%);
  pointer-events: none;
}

.intro-inner {
  position: relative;
  z-index: 5;
  width: min(94vw, 460px);
  animation: intro-copy-in 1s ease both;
}

.intro-overline,
.section-overline,
.hero-overline,
.card-kicker {
  color: var(--gold-300);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.intro-overline {
  margin-bottom: 6px;
  opacity: 0;
  animation: fade-up 0.7s 0.2s ease forwards;
}

.party-light {
  position: absolute;
  top: -18vh;
  width: 30vw;
  height: 125vh;
  z-index: 1;
  opacity: 0.6;
  filter: blur(5px);
  transform-origin: top center;
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.light-left {
  left: 7%;
  background: linear-gradient(to bottom, rgba(248, 232, 173, 0.28), transparent 74%);
  animation: light-left 5.2s ease-in-out infinite alternate;
}

.light-right {
  right: 7%;
  background: linear-gradient(to bottom, rgba(235, 210, 124, 0.22), transparent 75%);
  animation: light-right 5.8s ease-in-out infinite alternate;
}

.light-center {
  left: 50%;
  width: 22vw;
  background: linear-gradient(to bottom, rgba(189, 143, 43, 0.18), transparent 72%);
  animation: light-center 6.4s ease-in-out infinite alternate;
}

.intro-stars {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.intro-stars span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-100);
  box-shadow: 0 0 8px 2px rgba(248, 232, 173, 0.9);
  opacity: 0;
  animation: star-travel 4.8s linear infinite;
}

.intro-stars span:nth-child(1) { top: 14%; left: 10%; animation-delay: 0.2s; }
.intro-stars span:nth-child(2) { top: 24%; left: 78%; animation-delay: 1.1s; }
.intro-stars span:nth-child(3) { top: 66%; left: 16%; animation-delay: 2s; }
.intro-stars span:nth-child(4) { top: 76%; left: 70%; animation-delay: 2.8s; }
.intro-stars span:nth-child(5) { top: 36%; left: 54%; animation-delay: 3.5s; }
.intro-stars span:nth-child(6) { top: 8%; left: 42%; animation-delay: 4.1s; }

.disco-wrapper {
  position: relative;
  width: 260px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  animation: disco-drop 1.15s 0.15s cubic-bezier(.2,.85,.24,1.1) forwards;
}

.disco-wrapper:focus-visible {
  outline: 2px solid var(--gold-200);
  outline-offset: 8px;
  border-radius: 50%;
}

.disco-string {
  position: absolute;
  top: 0;
  width: 2px;
  height: 88px;
  background: linear-gradient(to bottom, var(--gold-100), var(--gold-500));
  box-shadow: 0 0 10px rgba(235, 210, 124, 0.7);
}

.disco-ball,
.hero-mini-disco {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, #ffffff 0 4%, transparent 14%),
    linear-gradient(135deg, #fff8de 0%, #ebd27c 20%, #bd8f2b 44%, #900d15 72%, #380000 100%);
  border: 2px solid rgba(255, 248, 222, 0.84);
  box-shadow:
    0 0 24px rgba(235, 210, 124, 0.82),
    0 0 70px rgba(182, 28, 36, 0.52),
    inset -28px -26px 42px rgba(33, 0, 0, 0.72),
    inset 20px 18px 30px rgba(255, 255, 255, 0.24);
}

.disco-ball {
  position: relative;
  z-index: 3;
  width: 184px;
  height: 184px;
  overflow: hidden;
  animation: disco-float 3s 1.3s ease-in-out infinite alternate;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.disco-ball::before,
.hero-mini-disco::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.30) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.27) 1px, transparent 1px);
  background-size: 24px 24px;
  mix-blend-mode: screen;
  animation: mirror-pan 8s linear infinite;
}

.disco-ball::after,
.hero-mini-disco::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 2px);
  background-size: 28px 26px;
  opacity: 0.58;
  animation: twinkle 1.8s ease-in-out infinite alternate;
}

.disco-ball i {
  position: absolute;
  z-index: 2;
  width: 24px;
  height: 19px;
  border-radius: 4px;
  background: rgba(255, 248, 222, 0.28);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.26);
}

.disco-ball i:nth-child(1) { left: 24px; top: 36px; }
.disco-ball i:nth-child(2) { left: 72px; top: 20px; }
.disco-ball i:nth-child(3) { right: 26px; top: 44px; }
.disco-ball i:nth-child(4) { left: 42px; top: 82px; }
.disco-ball i:nth-child(5) { left: 92px; top: 66px; }
.disco-ball i:nth-child(6) { right: 16px; top: 94px; }
.disco-ball i:nth-child(7) { left: 18px; top: 126px; }
.disco-ball i:nth-child(8) { left: 68px; top: 116px; }
.disco-ball i:nth-child(9) { right: 34px; top: 132px; }
.disco-ball i:nth-child(10) { left: 50px; bottom: 20px; }
.disco-ball i:nth-child(11) { right: 54px; bottom: 18px; }
.disco-ball i:nth-child(12) { right: 15px; bottom: 50px; }

.disco-halo {
  position: absolute;
  bottom: -24px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 232, 173, 0.34), rgba(182, 28, 36, 0.16) 46%, transparent 72%);
  filter: blur(18px);
  animation: halo-pulse 2.2s ease-in-out infinite alternate;
}

.disco-floor-light {
  position: absolute;
  bottom: -16px;
  width: 240px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(235, 210, 124, 0.38), transparent 70%);
  filter: blur(5px);
}

.disco-wrapper:hover .disco-ball {
  transform: scale(1.06) rotate(3deg);
  box-shadow:
    0 0 34px rgba(255, 248, 222, 0.95),
    0 0 95px rgba(235, 210, 124, 0.72),
    inset -28px -26px 42px rgba(33, 0, 0, 0.72),
    inset 20px 18px 30px rgba(255, 255, 255, 0.24);
}

.intro-copy {
  margin-top: 6px;
  opacity: 0;
  animation: fade-up 0.8s 0.9s ease forwards;
}

.intro-title {
  color: var(--gold-200);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4vw, 1.45rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(235, 210, 124, 0.48);
}

.intro-name {
  margin-top: -4px;
  color: var(--gold-100);
  font-family: var(--font-script);
  font-size: clamp(3.8rem, 15vw, 5.7rem);
  line-height: 1;
  text-shadow: 0 0 20px rgba(235, 210, 124, 0.38);
}
.intro-name {
  margin-top: 2px;
  font-size: clamp(2.9rem, 12vw, 4.5rem);
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
}

@media (min-width: 768px) {
  .intro-inner {
    width: min(92vw, 720px);
  }

  .intro-name {
    font-size: clamp(3.5rem, 5.2vw, 4.7rem);
    line-height: 1.12;
  }
}
.intro-text {
  max-width: 350px;
  margin: 8px auto 16px;
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.65;
}

.intro-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-300);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: action-pulse 1.7s ease-in-out infinite;
}

#intro-screen.is-opening .intro-inner {
  animation: intro-out 0.75s ease forwards;
}

#intro-screen.is-opening::before {
  animation-duration: 1.2s;
}

/* PORTAL */
#portal-transition {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
}

.portal-core {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff 0%, var(--gold-100) 16%, var(--gold-300) 30%, var(--wine-700) 56%, var(--wine-950) 74%);
  box-shadow: 0 0 50px rgba(255, 248, 222, 0.95), 0 0 130px rgba(235, 210, 124, 0.78);
}

#portal-transition.is-active {
  visibility: visible;
}

#portal-transition.is-active .portal-core {
  animation: portal-open 1.2s cubic-bezier(.18,.78,.26,1) forwards;
}

#portal-transition.is-leaving {
  animation: portal-fade 0.75s ease forwards;
}

/* HEADER */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.site-header.is-scrolled {
  background: rgba(42, 0, 0, 0.86);
  border-color: var(--gold-line);
  box-shadow: 0 12px 35px rgba(18, 0, 0, 0.25);
  backdrop-filter: blur(18px);
}

.nav {
  width: min(1160px, calc(100% - 32px));
  height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  color: var(--gold-200);
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.17em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-logo span {
  color: var(--cream);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-menu a {
  position: relative;
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 1px;
  background: var(--gold-300);
  transition: right 0.25s ease;
}

.nav-menu a:hover {
  color: var(--gold-200);
}

.nav-menu a:hover::after {
  right: 0;
}

.nav-menu .nav-confirm {
  padding: 10px 16px;
  color: var(--wine-950);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-200), var(--gold-500));
}

.nav-menu .nav-confirm::after {
  display: none;
}

/* HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 120px 20px 90px;
  text-align: center;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(to bottom, rgba(33, 0, 0, 0.35), rgba(33, 0, 0, 0.75)),
    url("../img/inicio.png") center top / cover no-repeat;
  filter: saturate(0.92) sepia(0.10) hue-rotate(340deg);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at center, rgba(145, 12, 20, 0.12), rgba(33, 0, 0, 0.82) 75%),
    linear-gradient(to top, var(--wine-950), transparent 32%);
}

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: inset 0 0 180px 38px rgba(20, 0, 0, 0.72);
  pointer-events: none;
}

.hero-beams {
  position: absolute;
  inset: -45%;
  z-index: -1;
  opacity: 0.46;
  background: conic-gradient(from 0deg, transparent 0 20deg, rgba(235,210,124,0.10) 22deg 24deg, transparent 27deg 68deg, rgba(255,248,222,0.07) 70deg 72deg, transparent 75deg 115deg, rgba(235,210,124,0.08) 118deg 121deg, transparent 124deg 360deg);
  animation: hero-rays 25s linear infinite;
}

.hero-mini-disco {
  position: absolute;
  top: -54px;
  left: 50%;
  z-index: -1;
  width: 210px;
  height: 210px;
  overflow: hidden;
  opacity: 0.32;
  transform: translateX(-50%);
}

.hero-inner {
  width: min(700px, 100%);
  padding: 44px 28px;
  border: 1px solid rgba(235, 210, 124, 0.18);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(96, 0, 6, 0.36), rgba(33, 0, 0, 0.16));
  box-shadow: 0 26px 90px rgba(15, 0, 0, 0.34), inset 0 1px rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}

.hero-overline {
  color: var(--gold-200);
}

.gold-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(260px, 80%);
  margin: 18px auto;
  color: var(--gold-300);
}

.gold-rule::before,
.gold-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-300));
}

.gold-rule::after {
  background: linear-gradient(to left, transparent, var(--gold-300));
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
}

.hero-small {
  display: block;
  color: var(--cream);
  font-size: clamp(1.65rem, 5vw, 3rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero-name {
  display: block;
  margin: -8px 0 -2px;
  color: var(--gold-100);
  font-family: var(--font-script);
  font-size: clamp(3.6rem, 18vw, 10rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 0 28px rgba(235, 210, 124, 0.38);
}

.hero-tagline {
  color: var(--gold-200);
  font-family: var(--font-serif);
  font-size: clamp(0.92rem, 2vw, 1.16rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-date-main {
  margin-top: 13px;
  color: var(--text-soft);
  font-size: 0.9rem;
  letter-spacing: 0.14em;
}

.hero-cta {
  margin-top: 28px;
}

.scroll-cue {
  position: absolute;
  bottom: 27px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: rgba(255, 248, 233, 0.72);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.scroll-cue span {
  position: relative;
  width: 22px;
  height: 34px;
  border: 1px solid rgba(235, 210, 124, 0.55);
  border-radius: 999px;
}

.scroll-cue span::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 3px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold-200);
  transform: translateX(-50%);
  animation: scroll-dot 1.6s ease-in-out infinite;
}

/* GENERALES */
main {
  overflow: hidden;
}

.section {
  position: relative;
  padding: 108px 20px;
  isolation: isolate;
}

.section-inner {
  width: min(1060px, 100%);
  margin: 0 auto;
}

.section-heading {
  max-width: 680px;
  margin: 0 auto 46px;
  text-align: center;
}

.section-title {
  margin-top: 9px;
  color: var(--gold-100);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.65rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(235, 210, 124, 0.14);
}

.section-description {
  max-width: 610px;
  margin: 15px auto 0;
  color: var(--text-soft);
  line-height: 1.75;
}

.glass-card {
  position: relative;
  border: 1px solid var(--gold-line);
  background:
    linear-gradient(145deg, rgba(145, 12, 20, 0.28), rgba(42, 0, 0, 0.82)),
    rgba(58, 0, 0, 0.72);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
}

.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 10% 0%, rgba(255, 248, 222, 0.11), transparent 33%);
  pointer-events: none;
}

.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.btn-primary {
  color: var(--wine-950);
  background: linear-gradient(135deg, var(--gold-100), var(--gold-400) 55%, var(--gold-500));
  box-shadow: 0 12px 30px rgba(189, 143, 43, 0.24), inset 0 1px rgba(255,255,255,0.6);
}

.btn-primary:hover {
  transform: translateY(-3px);
  filter: brightness(1.06);
  box-shadow: 0 18px 36px rgba(189, 143, 43, 0.34), 0 0 28px rgba(235,210,124,0.2);
}

.section-divider {
  position: relative;
  z-index: 8;
  height: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, transparent, rgba(235,210,124,0.7), transparent);
  box-shadow: 0 0 14px rgba(235, 210, 124, 0.18);
}

.section-divider span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--gold-300);
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: var(--wine-950);
  box-shadow: 0 0 20px rgba(235, 210, 124, 0.16);
}

/* INVITACIÓN */
.section-invitation {
  background:
    linear-gradient(rgba(50, 0, 0, 0.78), rgba(33, 0, 0, 0.94)),
    url("../img/rsvp.png") center / cover no-repeat;
}

.invitation-card {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(34px, 7vw, 66px);
  border-radius: 32px;
  text-align: center;
}

.invitation-lead {
  max-width: 520px;
  margin: 18px auto 0;
  color: var(--text-soft);
  font-size: 1.03rem;
  line-height: 1.8;
}

.parents-block {
  margin: 29px auto;
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  line-height: 1.7;
}

.parents-block span {
  display: block;
  color: var(--gold-300);
  font-family: var(--font-script);
  font-size: 2.2rem;
  line-height: 0.8;
}

.event-date-card {
  max-width: 560px;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 17px 22px;
  border-block: 1px solid var(--gold-line);
}

.event-date-card strong,
.event-date-card small {
  display: block;
}

.event-date-card strong {
  color: var(--gold-100);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.event-date-card small {
  margin-top: 5px;
  color: var(--gold-300);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.date-icon {
  color: var(--gold-300);
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.time-box {
  min-height: 116px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(235, 210, 124, 0.26);
  border-radius: 18px;
  background: rgba(33, 0, 0, 0.46);
  box-shadow: inset 0 1px rgba(255,255,255,0.04);
}

.time-number {
  display: block;
  color: var(--gold-200);
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 5vw, 2.5rem);
  line-height: 1;
}

.time-number.tick {
  animation: number-tick 0.35s ease;
}

.time-label {
  display: block;
  margin-top: 9px;
  color: var(--text-soft);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.countdown-message {
  min-height: 24px;
  margin-top: 18px;
  color: var(--gold-300);
  font-family: var(--font-serif);
  letter-spacing: 0.08em;
}

/* PROGRAMA */
.section-program {
  background:
    radial-gradient(circle at 10% 20%, rgba(182,28,36,0.24), transparent 28%),
    radial-gradient(circle at 90% 75%, rgba(189,143,43,0.08), transparent 30%),
    linear-gradient(180deg, var(--wine-950), #390000 52%, var(--wine-950));
}

.timeline {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 148px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold-300) 10%, var(--gold-300) 90%, transparent);
  box-shadow: 0 0 12px rgba(235,210,124,0.32);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 112px 72px 1fr;
  align-items: center;
  min-height: 146px;
}

.timeline-time {
  color: var(--gold-200);
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: right;
}

.timeline-dot {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  color: var(--wine-950);
  border: 5px solid var(--wine-950);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-100), var(--gold-500));
  box-shadow: 0 0 0 1px var(--gold-300), 0 0 24px rgba(235,210,124,0.25);
}

.timeline-dot span {
  font-size: 0.62rem;
  font-weight: 800;
}

.timeline-card {
  margin-block: 12px;
  padding: 24px 26px;
  border-radius: 20px;
}

.timeline-icon {
  color: var(--gold-300);
  font-size: 1.3rem;
}

.timeline-card h3 {
  margin-top: 5px;
  color: var(--gold-100);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

.timeline-card p {
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* DETALLES */
.section-details {
  background:
    linear-gradient(rgba(39,0,0,0.76), rgba(33,0,0,0.92)),
    url("../img/detalles.png") center / cover no-repeat;
}

.details-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 26px;
  align-items: stretch;
}

.dress-visual,
.dress-copy {
  border-radius: 28px;
}

.dress-visual {
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 28px;
}

.image-frame {
  position: relative;
  width: min(300px, 100%);
  padding: 18px;
  border: 1px solid var(--gold-line);
  border-radius: 160px 160px 24px 24px;
  background: radial-gradient(circle at top, rgba(235,210,124,0.15), transparent 60%);
}

.image-frame::before,
.image-frame::after {
  content: "✦";
  position: absolute;
  color: var(--gold-300);
  text-shadow: 0 0 12px rgba(235,210,124,0.65);
}

.image-frame::before { top: 18%; left: -10px; }
.image-frame::after { right: -10px; bottom: 22%; }

.image-frame img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 22px 24px rgba(0,0,0,0.34));
}

.dress-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 58px);
}

.dress-copy h3 {
  margin: 9px 0 15px;
  color: var(--gold-100);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 400;
}

.dress-copy > p {
  color: var(--text-soft);
  line-height: 1.8;
}

.color-reservation {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 1.4rem;
  padding: 1rem;

  border: 1px solid rgba(235, 210, 124, 0.35);
  border-radius: 18px;

  background: rgba(92, 2, 6, 0.45);
  box-shadow:
    inset 0 0 18px rgba(235, 210, 124, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

.reserved-colors {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Estilo general de ambos círculos */
.reserved-swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;

  border: 3px solid var(--gold-300);

  box-shadow:
    0 0 0 5px rgba(235, 210, 124, 0.08),
    0 0 16px rgba(0, 0, 0, 0.35);
}

/* Círculo rojo vino */
.reserved-swatch-red {
  background: #bb2424;
  position: relative;
  z-index: 2;
}

/* Círculo dorado */
.reserved-swatch-gold {
  margin-left: -10px;
  background: linear-gradient(
    135deg,
    #f5dc85 0%,
    #d4af37 45%,
    #9b7418 100%
  );

  border-color: #f1d77a;

  box-shadow:
    0 0 0 5px rgba(235, 210, 124, 0.08),
    0 0 18px rgba(212, 175, 55, 0.4);
}

.color-reservation small {
  display: block;
  margin-bottom: 4px;

  color: var(--gold-300);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.color-reservation strong {
  display: block;
  color: #fff3d4;
  font-family: "Cinzel", serif;
  font-size: 1rem;
}

.color-reservation p {
  margin-top: 5px;
  color: rgba(255, 243, 212, 0.78);
  font-size: 0.86rem;
  line-height: 1.5;
}

.color-reservation {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 18px;
  border: 1px solid var(--gold-line);
  border-radius: 18px;
  background: rgba(33, 0, 0, 0.48);
}

@media (max-width: 480px) {
  .reserved-swatch {
    width: 42px;
    height: 42px;
  }

  .color-reservation {
    gap: 13px;
    padding: 0.9rem;
  }

  .color-reservation strong {
    font-size: 0.9rem;
  }
}

/* UBICACIÓN */
.section-location {
  background:
    linear-gradient(rgba(36,0,0,0.72), rgba(33,0,0,0.93)),
    url("../img/ubi.png") center / cover no-repeat;
}

.location-card {
  min-height: 440px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 36px;
  padding: clamp(32px, 6vw, 64px);
  border-radius: 32px;
  overflow: hidden;
}

.location-copy .section-title {
  margin-top: 9px;
  text-align: left;
}

.location-address {
  margin-top: 22px;
  color: var(--gold-200);
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  line-height: 1.65;
}

.location-note {
  max-width: 450px;
  margin: 16px 0 27px;
  color: var(--text-soft);
  line-height: 1.75;
}

.location-pin {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  overflow: hidden;

  background: radial-gradient(
    circle,
    rgba(154, 13, 21, 0.45),
    rgba(64, 0, 2, 0.92)
  );

  border: 2px solid rgba(212, 175, 55, 0.65);
  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.35),
    0 0 50px rgba(154, 13, 21, 0.55),
    inset 0 0 25px rgba(0, 0, 0, 0.45);
}

/* círculo interior donde vive el logo */
.location-logo-wrap {
  position: relative;
  z-index: 2;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.35),
    0 0 12px rgba(212, 175, 55, 0.18);
}

/* imagen ya recortada dentro del círculo */
.location-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.location-pin .pin-ring {
  position: absolute;
  inset: 10px;
  z-index: 3;
  border: 1px solid rgba(212, 175, 55, 0.7);
  border-radius: 50%;
  pointer-events: none;
  animation: location-ring 3s ease-in-out infinite;
}

.location-pin small {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);

  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(75, 0, 4, 0.82);
  border: 1px solid rgba(212, 175, 55, 0.55);

  color: #f4d77b;
  font-family: "Cinzel", serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  backdrop-filter: blur(6px);
}

@keyframes location-ring {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.25);
  }
  50% {
    transform: scale(1.025);
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.55);
  }
}

@media (max-width: 600px) {
  .location-pin {
    width: 180px;
    height: 180px;
  }

  .location-logo {
    width: 68%;
    height: 68%;
  }

  .location-pin small {
    bottom: 10px;
    font-size: 0.68rem;
  }
}

/* CONFIRMACIÓN */
.section-confirm {
  background:
    radial-gradient(circle at 80% 20%, rgba(189,143,43,0.1), transparent 28%),
    linear-gradient(180deg, var(--wine-950), #480000 52%, var(--wine-950));
}

.confirm-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 36px;
  align-items: center;
}

.confirm-intro .section-title {
  max-width: 430px;
  margin-top: 9px;
  text-align: left;
}

.confirm-intro > p:not(.section-overline) {
  max-width: 440px;
  margin-top: 18px;
  color: var(--text-soft);
  line-height: 1.75;
}

.pass-card {
  max-width: 430px;
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--gold-line);
  border-radius: 20px;
  background: rgba(33,0,0,0.42);
}

.pass-card img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  filter: drop-shadow(0 8px 13px rgba(0,0,0,0.35));
}

.pass-card span,
.pass-card strong,
.pass-card small {
  display: block;
}

.pass-card span {
  color: var(--text-soft);
  font-size: 0.78rem;
}

.pass-card strong {
  margin: 4px 0;
  color: var(--gold-200);
  font-family: var(--font-serif);
}

.pass-card small {
  color: var(--gold-300);
}

.rsvp-form {
  display: grid;
  gap: 22px;
  padding: clamp(28px, 5vw, 46px);
  border-radius: 28px;
}

.field-group {
  position: relative;
}

.field-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--gold-200);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  color: var(--cream);
  border: 1px solid rgba(235,210,124,0.28);
  border-radius: 14px;
  outline: none;
  background: rgba(33,0,0,0.55);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-group input,
.field-group select {
  height: 52px;
  padding: 0 15px;
}

.field-group textarea {
  min-height: 118px;
  padding: 14px 15px 28px;
  resize: vertical;
}

.field-group input::placeholder,
.field-group textarea::placeholder {
  color: rgba(234, 223, 207, 0.48);
}

.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  border-color: var(--gold-300);
  box-shadow: 0 0 0 4px rgba(235,210,124,0.08), 0 0 18px rgba(235,210,124,0.1);
}

.field-group select option {
  color: var(--cream);
  background: var(--wine-900);
}

.field-group > small:not(.field-error) {
  display: block;
  margin-top: 7px;
  color: rgba(234,223,207,0.62);
  font-size: 0.7rem;
  line-height: 1.4;
}

.field-error {
  display: none;
  margin-top: 7px;
  color: #ffadb8;
  font-size: 0.72rem;
}

.field-error.is-visible {
  display: block;
}

.field-group input.has-error {
  border-color: #e47786;
  box-shadow: 0 0 0 4px rgba(228,119,134,0.08);
}

.character-count {
  position: absolute;
  right: 13px;
  bottom: 11px;
  color: rgba(234,223,207,0.5);
  font-size: 0.68rem;
}

.btn-submit {
  width: 100%;
  border: 0;
}

.form-security {
  color: rgba(234,223,207,0.58);
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: center;
}

/* FOOTER */
footer {
  position: relative;
  padding: 64px 20px 100px;
  text-align: center;
  background: #8b0710;
  border-top: 1px solid rgba(235,210,124,0.2);
}

.footer-inner {
  max-width: 500px;
  margin: 0 auto;
}

.footer-monogram {
  width: 62px;
  height: 62px;
  margin: 0 auto 15px;
  display: grid;
  place-items: center;
  color: var(--wine-950);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-100), var(--gold-500));
  font-family: var(--font-script);
  font-size: 2.4rem;
  box-shadow: 0 0 30px rgba(235,210,124,0.18);
}

.footer-inner > strong {
  color: var(--gold-200);
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-inner > p {
  margin-top: 8px;
  color: var(--text-soft);
}

.footer-credit {
  display: block;
  margin-top: 20px;
  color: rgba(234,223,207,0.6);
  font-size: 0.72rem;
}

.footer-credit a {
  color: var(--gold-300);
  text-decoration: none;
}

/* REPRODUCTOR */
.music-player {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 300;
  width: min(350px, calc(100vw - 40px));
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border: 1px solid rgba(235,210,124,0.32);
  border-radius: 18px;
  background: rgba(42,0,0,0.88);
  box-shadow: 0 18px 42px rgba(12,0,0,0.46);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
}

.music-player.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.music-toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--wine-950);
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-100), var(--gold-500));
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(189,143,43,0.24);
}

.pause-icon {
  display: none;
  font-size: 0.82rem;
  font-weight: 900;
}

.music-player.is-playing .play-icon {
  display: none;
}

.music-player.is-playing .pause-icon {
  display: inline;
}

.music-info {
  min-width: 92px;
  display: grid;
  gap: 2px;
}

.music-info strong {
  color: var(--gold-200);
  font-size: 0.74rem;
}

.music-info span {
  color: var(--text-soft);
  font-size: 0.63rem;
}

.equalizer {
  height: 25px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.equalizer i {
  width: 3px;
  height: 7px;
  border-radius: 5px;
  background: var(--gold-300);
}

.music-player.is-playing .equalizer i:nth-child(1) { animation: eq 0.65s ease-in-out infinite alternate; }
.music-player.is-playing .equalizer i:nth-child(2) { animation: eq 0.9s 0.1s ease-in-out infinite alternate; }
.music-player.is-playing .equalizer i:nth-child(3) { animation: eq 0.72s 0.2s ease-in-out infinite alternate; }
.music-player.is-playing .equalizer i:nth-child(4) { animation: eq 0.84s 0.3s ease-in-out infinite alternate; }

.volume-control {
  flex: 1;
  min-width: 70px;
  accent-color: var(--gold-300);
}

/* NAVEGACIÓN MÓVIL */
.mobile-nav {
  position: fixed;
  left: 50%;
  bottom: 12px;
  z-index: 250;
  width: calc(100% - 24px);
  max-width: 430px;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  padding: 7px;
  border: 1px solid rgba(235,210,124,0.32);
  border-radius: 20px;
  background: rgba(42,0,0,0.9);
  box-shadow: 0 18px 42px rgba(12,0,0,0.5);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.mobile-nav a {
  min-height: 50px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: rgba(234,223,207,0.62);
  border-radius: 14px;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.mobile-nav a span {
  font-size: 1rem;
}

.mobile-nav a small {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.mobile-nav a.active {
  color: var(--gold-200);
  background: rgba(145,12,20,0.48);
}

/* BRILLOS */
#magic-sparkles {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--gold-200) 35%, transparent 72%);
  box-shadow: 0 0 8px rgba(255,255,255,0.75), 0 0 17px rgba(235,210,124,0.62);
  opacity: 0;
  animation: sparkle-pop 2s ease-out forwards;
}

.sparkle::before,
.sparkle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: rgba(255,248,222,0.85);
  transform: translate(-50%, -50%);
}

.sparkle::before { width: 1px; height: 16px; }
.sparkle::after { width: 16px; height: 1px; }

.ambient-orb {
  position: fixed;
  z-index: -1;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.12;
}

.orb-one { top: 10%; left: -160px; background: var(--wine-600); }
.orb-two { right: -180px; bottom: 10%; background: var(--gold-500); }

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  transition:
    opacity 0.75s var(--reveal-delay, 0ms) ease,
    transform 0.75s var(--reveal-delay, 0ms) cubic-bezier(.2,.72,.25,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.site-entered {
  animation: site-in 0.9s ease both;
}

/* ANIMACIONES */
@keyframes intro-rays { to { transform: rotate(360deg); } }
@keyframes intro-copy-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes light-left { from { transform: rotate(-18deg); } to { transform: rotate(10deg); } }
@keyframes light-right { from { transform: rotate(18deg); } to { transform: rotate(-10deg); } }
@keyframes light-center { from { transform: translateX(-50%) rotate(-7deg); } to { transform: translateX(-50%) rotate(7deg); } }
@keyframes star-travel { 0% { opacity: 0; transform: translate(0,0) scale(.6); } 15% { opacity: 1; } 55% { opacity: .8; transform: translate(150px,90px) scale(1.5); } 100% { opacity: 0; transform: translate(260px,180px) scale(.7); } }
@keyframes disco-drop { from { opacity: 0; transform: translateY(-120px) scale(.62) rotate(-14deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes disco-float { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-10px) rotate(2deg); } }
@keyframes mirror-pan { to { background-position: 192px 0, 0 192px; } }
@keyframes twinkle { from { opacity: .32; } to { opacity: .76; } }
@keyframes halo-pulse { from { opacity: .55; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
@keyframes action-pulse { 50% { opacity: .68; transform: translateY(-3px); } }
@keyframes intro-out { to { opacity: 0; transform: scale(1.2); filter: blur(7px); } }
@keyframes portal-open { 0% { opacity: 0; transform: scale(.2); } 20% { opacity: 1; } 100% { opacity: 1; transform: scale(120); } }
@keyframes portal-fade { to { opacity: 0; } }
@keyframes hero-rays { to { transform: rotate(360deg); } }
@keyframes scroll-dot { 0% { opacity: 0; transform: translate(-50%,0); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,12px); } }
@keyframes number-tick { 50% { transform: translateY(-3px) scale(1.06); text-shadow: 0 0 18px rgba(235,210,124,0.7); } }
@keyframes pin-ring { 0% { opacity: .75; transform: scale(.72); } 100% { opacity: 0; transform: scale(1.22); } }
@keyframes eq { from { height: 5px; opacity: .55; } to { height: 24px; opacity: 1; } }
@keyframes sparkle-pop { 0% { opacity: 0; transform: scale(.3); } 24% { opacity: 1; transform: scale(1.12); } 65% { opacity: .85; } 100% { opacity: 0; transform: scale(.7); } }
@keyframes site-in { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }

/* RESPONSIVE */
@media (max-width: 900px) {
  body.main-bg {
    background-attachment: scroll;
  }

  .nav-menu {
    display: none;
  }

  .details-layout,
  .location-card,
  .confirm-layout {
    grid-template-columns: 1fr;
  }

  .location-copy .section-title,
  .confirm-intro .section-title {
    text-align: center;
  }

  .location-copy,
  .confirm-intro {
    text-align: center;
  }

  .location-note,
  .confirm-intro > p:not(.section-overline),
  .pass-card {
    margin-left: auto;
    margin-right: auto;
  }

  .music-player {
    right: 16px;
    bottom: 86px;
    width: 64px;
    min-height: 64px;
    padding: 9px;
    border-radius: 50%;
  }

  .music-info,
  .equalizer,
  .volume-control {
    display: none;
  }

  .music-toggle {
    width: 44px;
    height: 44px;
  }

  .mobile-nav {
    display: grid;
  }

  footer {
    padding-bottom: 116px;
  }
}

@media (max-width: 700px) {
  html {
    scroll-padding-top: 68px;
  }

  .nav {
    height: 66px;
  }

  .hero {
    min-height: 100svh;
    padding: 102px 14px 80px;
  }

  .hero-inner {
    padding: 38px 18px;
    border-radius: 26px;
  }

  .hero-mini-disco {
    width: 160px;
    height: 160px;
  }

  .section {
    padding: 82px 16px;
  }

  .invitation-card,
  .dress-copy,
  .location-card,
  .rsvp-form {
    border-radius: 24px;
  }

  .countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .time-box {
    min-height: 104px;
  }

  .timeline::before {
    left: 22px;
  }

  .timeline-item {
    grid-template-columns: 46px 1fr;
    align-items: start;
    padding-bottom: 24px;
  }

  .timeline-time {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 9px;
    text-align: left;
  }

  .timeline-dot {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    margin: 0;
  }

  .timeline-card {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    padding: 20px;
  }

  .dress-visual {
    min-height: 340px;
  }

  .location-pin {
    min-height: 240px;
  }
}

@media (max-width: 480px) {
  #intro-screen {
    padding: 16px;
  }

  .disco-wrapper {
    width: 220px;
    height: 260px;
  }

  .disco-ball {
    width: 154px;
    height: 154px;
  }

  .disco-string {
    height: 78px;
  }

  .disco-halo {
    width: 210px;
    height: 210px;
  }

  .intro-text {
    font-size: 0.86rem;
  }

  .intro-action {
    font-size: 0.61rem;
    letter-spacing: 0.1em;
  }

  .hero-small {
    font-size: 1.35rem;
  }

  .hero-name {
    margin: 1px 0 1px;
    font-size: 3.3rem;
  }

  .event-date-card {
    gap: 9px;
    padding-inline: 8px;
  }

  .date-icon {
    display: none;
  }

  .pass-card {
    align-items: flex-start;
  }

  .pass-card img {
    width: 68px;
    height: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   AJUSTE FINAL: ROJO INTENSO + DORADO EN TODAS LAS SECCIONES
   Este bloque sobrescribe únicamente los colores.
   No modifica estructura, animaciones ni responsive.
========================================================= */

:root {
  --wine-950: #2b0000;
  --wine-900: #470000;
  --wine-850: #620000;
  --wine-800: #800006;
  --wine-700: #aa0d16;
  --wine-600: #d5222c;

  --glass: rgba(125, 0, 6, 0.72);
  --glass-strong: rgba(82, 0, 2, 0.90);
  --shadow: 0 26px 70px rgba(28, 0, 0, 0.52);
}

body {
  background: var(--wine-950);
}

body.main-bg {
  background:
    radial-gradient(circle at 12% 18%, rgba(225, 30, 38, 0.30), transparent 32%),
    radial-gradient(circle at 90% 70%, rgba(189, 143, 43, 0.12), transparent 34%),
    linear-gradient(rgba(74, 0, 0, 0.80), rgba(43, 0, 0, 0.92)),
    url("../img/inicio.png") center top / cover fixed no-repeat;
}

/* INTRO */
#intro-screen {
  background:
    radial-gradient(circle at 50% 18%, rgba(248, 232, 173, 0.19), transparent 24%),
    radial-gradient(circle at 14% 84%, rgba(224, 28, 38, 0.78), transparent 34%),
    radial-gradient(circle at 86% 76%, rgba(185, 12, 22, 0.66), transparent 30%),
    linear-gradient(140deg, #2b0000 0%, #a00009 48%, #470000 100%);
}

.disco-ball,
.hero-mini-disco {
  background:
    radial-gradient(circle at 30% 22%, #ffffff 0 4%, transparent 14%),
    linear-gradient(135deg, #fff8de 0%, #ebd27c 20%, #bd8f2b 44%, #b41019 72%, #470000 100%);
  box-shadow:
    0 0 24px rgba(235, 210, 124, 0.82),
    0 0 70px rgba(215, 30, 40, 0.52),
    inset -28px -26px 42px rgba(43, 0, 0, 0.72),
    inset 20px 18px 30px rgba(255, 255, 255, 0.24);
}

.disco-halo {
  background: radial-gradient(circle, rgba(248, 232, 173, 0.34), rgba(220, 30, 40, 0.20) 46%, transparent 72%);
}

/* ENCABEZADO Y HERO */
.site-header.is-scrolled {
  background: rgba(70, 0, 0, 0.88);
  box-shadow: 0 12px 35px rgba(30, 0, 0, 0.28);
}

.hero::before {
  background:
    linear-gradient(to bottom, rgba(98, 0, 4, 0.30), rgba(58, 0, 0, 0.70)),
    url("../img/inicio.png") center top / cover no-repeat;
  filter: saturate(1.05) contrast(1.03) hue-rotate(350deg);
}

.hero::after {
  background:
    radial-gradient(circle at center, rgba(200, 18, 28, 0.18), rgba(43, 0, 0, 0.78) 75%),
    linear-gradient(to top, var(--wine-950), transparent 32%);
}

.hero-inner {
  background: linear-gradient(145deg, rgba(168, 8, 16, 0.42), rgba(62, 0, 0, 0.26));
  box-shadow: 0 26px 90px rgba(28, 0, 0, 0.36), inset 0 1px rgba(255,255,255,0.08);
}

/* TARJETAS DE CRISTAL EN TODA LA WEB */
.glass-card {
  background:
    linear-gradient(145deg, rgba(190, 15, 24, 0.34), rgba(72, 0, 0, 0.84)),
    rgba(92, 0, 3, 0.76);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,0.07);
}

.section-divider span {
  background: #3d0000;
}

/* INVITACIÓN */
.section-invitation {
  background:
    radial-gradient(circle at 16% 16%, rgba(225, 28, 38, 0.26), transparent 32%),
    linear-gradient(rgba(125, 0, 5, 0.68), rgba(48, 0, 0, 0.90)),
    url("../img/rsvp.png") center / cover no-repeat;
}

.time-box {
  background: rgba(92, 0, 3, 0.58);
}

/* PROGRAMA */
.section-program {
  background:
    radial-gradient(circle at 10% 20%, rgba(225, 28, 38, 0.34), transparent 30%),
    radial-gradient(circle at 90% 75%, rgba(189, 143, 43, 0.09), transparent 30%),
    linear-gradient(180deg, #360000 0%, #790006 52%, #360000 100%);
}

.timeline-dot {
  border-color: #420000;
}

/* DETALLES */
.section-details {
  background:
    radial-gradient(circle at 18% 20%, rgba(230, 35, 44, 0.36), transparent 34%),
    radial-gradient(circle at 84% 76%, rgba(195, 10, 18, 0.28), transparent 38%),
    linear-gradient(rgba(155, 0, 7, 0.62), rgba(52, 0, 0, 0.88)),
    url("../img/detalles.png") center / cover no-repeat;
}

.section-details .glass-card {
  background:
    linear-gradient(145deg, rgba(208, 24, 32, 0.46), rgba(88, 0, 2, 0.88)),
    rgba(118, 0, 4, 0.80);
}

.section-details .image-frame {
  background: radial-gradient(circle at top, rgba(238, 52, 60, 0.22), transparent 62%);
}

.color-reservation {
  background: rgba(132, 0, 5, 0.64);
}

/* UBICACIÓN */
.section-location {
  background:
    radial-gradient(circle at 82% 22%, rgba(220, 28, 38, 0.28), transparent 34%),
    linear-gradient(rgba(145, 0, 6, 0.60), rgba(50, 0, 0, 0.89)),
    url("../img/ubi.png") center / cover no-repeat;
}

.section-location .glass-card {
  background:
    linear-gradient(145deg, rgba(198, 20, 28, 0.40), rgba(76, 0, 0, 0.87)),
    rgba(105, 0, 3, 0.78);
}

.location-pin {
  background: radial-gradient(circle, rgba(205, 22, 31, 0.55), rgba(76, 0, 2, 0.94));
  box-shadow:
    0 0 18px rgba(212, 175, 55, 0.35),
    0 0 50px rgba(210, 24, 34, 0.48),
    inset 0 0 25px rgba(0, 0, 0, 0.45);
}

.location-pin small {
  background: rgba(98, 0, 4, 0.88);
}

/* CONFIRMACIÓN */
.section-confirm {
  background:
    radial-gradient(circle at 18% 78%, rgba(225, 28, 38, 0.30), transparent 34%),
    radial-gradient(circle at 80% 20%, rgba(189, 143, 43, 0.11), transparent 28%),
    linear-gradient(180deg, #360000 0%, #820007 52%, #360000 100%);
}

.pass-card {
  background: rgba(108, 0, 4, 0.58);
}

.field-group input,
.field-group select,
.field-group textarea {
  background: rgba(92, 0, 3, 0.68);
}

/* FOOTER, REPRODUCTOR Y NAVEGACIÓN */
footer {
  background: linear-gradient(180deg, #9f0812, #650004);
}

.music-player,
.mobile-nav {
  background: rgba(72, 0, 0, 0.92);
}

.mobile-nav a.active {
  background: rgba(190, 15, 24, 0.52);
}

@media (max-width: 900px) {
  body.main-bg {
    background-attachment: scroll;
  }
}

/* ==================================
   LLUVIA DE SOBRES
================================== */

.envelope-gift {
  position: relative;
  margin-top: 28px;
  padding: 22px 20px 18px;

  text-align: center;
  overflow: hidden;

  border: 1px solid var(--gold-line);
  border-radius: 22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(235, 210, 124, 0.13),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(175, 8, 14, 0.48),
      rgba(75, 0, 2, 0.82)
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.07),
    0 18px 38px rgba(20, 0, 0, 0.28);
}

.envelope-gift::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;

  width: 180px;
  height: 100px;

  background: radial-gradient(
    ellipse,
    rgba(235, 210, 124, 0.18),
    transparent 70%
  );

  transform: translateX(-50%);
  filter: blur(15px);
  pointer-events: none;
}

.envelope-gift-copy {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.envelope-gift-icon {
  flex: 0 0 auto;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  color: var(--gold-300);
  border: 1px solid var(--gold-line);
  border-radius: 50%;

  background: rgba(60, 0, 0, 0.55);

  text-shadow: 0 0 10px rgba(235, 210, 124, 0.65);
}

.envelope-gift small {
  display: block;
  margin-bottom: 4px;

  color: var(--gold-300);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.envelope-gift strong {
  display: block;

  color: var(--gold-100);
  font-family: var(--font-serif);
  font-size: 1.12rem;
  letter-spacing: 0.06em;
}

.envelope-gift p {
  max-width: 430px;
  margin: 8px auto 0;

  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.65;
}

.envelope-gift-image {
  position: relative;
  z-index: 2;

  width: min(170px, 58%);
  margin: 20px auto 0;

  object-fit: contain;

  filter:
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 12px rgba(235, 210, 124, 0.22));

  animation: envelope-float 3s ease-in-out infinite alternate;
}

@keyframes envelope-float {
  from {
    transform: translateY(0) rotate(-1deg);
  }

  to {
    transform: translateY(-8px) rotate(1deg);
  }
}

@media (max-width: 480px) {
  .envelope-gift {
    padding: 19px 15px 15px;
  }

  .envelope-gift-copy {
    gap: 9px;
  }

  .envelope-gift strong {
    font-size: 1rem;
  }

  .envelope-gift p {
    font-size: 0.82rem;
  }

  .envelope-gift-image {
    width: min(145px, 62%);
  }
}