:root {
  --wine: #7e1f25;
  --wine-dark: #491114;
  --gold: #b08b31;
  --gold-light: #e0c77c;
  --cream: #fbf6e8;
  --ink: #36281e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: Montserrat, sans-serif;
  background-color: #ead09a;
  background-image: url("assets/fondo-damasco.png");
  background-size: min(941px, 100vw) auto;
  background-position: center top;
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
}
main {
  position: relative;
  width: min(100%, 420px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-shadow: none;
  overflow: hidden;
  background-color: transparent;
  background-image: none;
}
.section {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  padding: 72px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: rgba(255, 252, 241, .76);
  background-image:
    linear-gradient(rgba(255, 252, 241, .72), rgba(255, 252, 241, .72)),
    url("assets/fondo-damasco.png");
  background-size: auto, cover;
  background-position: center;
}
.section::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(176,139,49,.52);
  pointer-events: none;
}
.hero {
  min-height: 100svh;
  padding: 26px 14px 0;
  justify-content: flex-start;
  background-color: rgba(255, 250, 234, .7);
  background-image:
    linear-gradient(rgba(255, 250, 234, .68), rgba(255, 250, 234, .68)),
    url("assets/fondo-damasco.png");
  background-size: auto, cover;
  background-position: center top;
  margin-bottom: 0;
  box-shadow: none;
}
.hero::after {
  display: block;
  inset: 14px;
  border: 2px solid rgba(176, 139, 49, .58);
  box-shadow: none;
}
.corner-ornament {
  position: absolute;
  z-index: 1;
  top: -4px;
  width: min(58%, 290px);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 5px rgba(83, 52, 10, .18));
}
.corner-right { right: -4px; }
.corner-left { left: -4px; transform: scaleX(-1); }
.hero > :not(.corner-ornament) { position: relative; z-index: 2; }
.invitation-frame {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  aspect-ratio: 937 / 1679;
  filter: drop-shadow(0 15px 16px rgba(75, 44, 8, .3));
}
.model-window {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  top: 24.5%;
  left: 13.5%;
  width: 73%;
  height: 55%;
  background: rgba(255, 250, 235, .54);
  border-radius: 44% 44% 4% 4% / 12% 12% 4% 4%;
}
.model-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  transform: scale(1.06);
}
.rose-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.frame-name {
  position: absolute !important;
  z-index: 3 !important;
  left: 9%;
  right: 9%;
  bottom: 4.8%;
  color: #3c2414;
  font-family: Italianno, cursive;
  font-size: clamp(64px, 18vw, 91px);
  line-height: 1;
  letter-spacing: .015em;
  text-shadow:
    0 1px 0 #fff5d9,
    0 3px 1px rgba(92, 55, 18, .28),
    0 7px 12px rgba(74, 38, 5, .2);
}
.eyebrow { font-family: Cinzel, serif; letter-spacing: .11em; font-weight: 700; }
.ribbon {
  position: relative;
  z-index: 3;
  margin: 0 0 -20px;
  padding: 13px 34px;
  color: #5e4328;
  background: linear-gradient(#fffdf7, #e6d5b2 54%, #fff9e8);
  border: 1px solid #c7aa68;
  border-radius: 50% 50% 12px 12px / 35% 35% 15px 15px;
  box-shadow: 0 4px 10px rgba(68,42,10,.2);
}
.portrait-frame {
  width: min(82vw, 360px);
  aspect-ratio: .71;
  padding: 12px;
  border: 5px double var(--gold);
  border-radius: 44% 44% 8px 8px / 22% 22% 8px 8px;
  background: #f8efd4;
  box-shadow: 0 12px 30px rgba(74,45,13,.25);
}
.reference-crop { background-image: url("assets/referencia.jpeg"); background-repeat: no-repeat; }
.portrait {
  width: 100%; height: 100%;
  background-size: 875px auto;
  background-position: -89px -145px;
  border-radius: 42% 42% 3px 3px / 20% 20% 3px 3px;
}
.name-plaque {
  z-index: 2;
  width: min(92vw, 410px);
  margin-top: -62px;
  padding: 22px 15px 25px;
  color: #2e1f13;
  background: linear-gradient(145deg, #dec27b, #9b712b 45%, #d5ae52 76%, #8a6226);
  border: 4px double #6e4a18;
  border-radius: 50% 48% 45% 50% / 32% 35% 38% 35%;
  box-shadow: 0 8px 16px rgba(66,39,8,.32);
}
.name-plaque span { font-family: Italianno, cursive; font-size: clamp(64px, 19vw, 92px); line-height: .85; }
.intro {
  max-width: 390px;
  margin: 28px 14px 0;
  padding: 24px 26px;
  font-family: Cinzel, serif;
  font-size: 14px;
  line-height: 1.8;
  background: linear-gradient(145deg, rgba(255,253,243,.8), rgba(238,219,174,.62));
  border: 1px solid rgba(132, 91, 30, .54);
  border-radius: 4px;
  box-shadow:
    inset 0 3px 7px rgba(75, 43, 9, .34),
    inset 0 -2px 5px rgba(255, 255, 255, .84),
    inset 8px 0 14px rgba(104, 65, 16, .18),
    inset -8px 0 14px rgba(104, 65, 16, .18),
    inset 0 0 34px rgba(126, 82, 21, .2),
    0 1px 0 rgba(255,255,255,.62);
}
.ornate-player {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  aspect-ratio: 3 / 2;
  margin-top: 14px;
}
.player-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 9px 9px rgba(66, 39, 7, .25));
}
.player-button {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 32%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .22s ease, filter .22s ease;
  filter: drop-shadow(0 6px 7px rgba(73, 44, 8, .32));
}
.player-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.player-button:hover { transform: translate(-50%, -50%) scale(1.04); }
.player-button:focus-visible { outline: 3px solid var(--wine); outline-offset: 5px; }
.player-button.playing { animation: player-float-spin 6s linear infinite; }
@keyframes player-float-spin {
  0% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
  50% { transform: translate(-50%, -50%) translateY(-10px) rotate(180deg); filter: drop-shadow(0 12px 14px rgba(125, 83, 20, .52)); }
  100% { transform: translate(-50%, -50%) translateY(0) rotate(360deg); }
}
.player-caption { z-index: 2; margin: -34px 0 5px; color: #876623; font: 600 11px Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; }
.floating-music-button {
  position: fixed;
  z-index: 1000;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 68px;
  height: 68px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff9eb;
  cursor: pointer;
  filter: drop-shadow(0 7px 10px rgba(56, 25, 2, .42));
  animation: floating-control 2.4s ease-in-out infinite;
}
.floating-music-button[hidden] { display: none; }
.floating-music-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.floating-music-button.playing img { animation: floating-spin 6s linear infinite; }
.floating-music-button span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 20px;
  transform: translate(-50%, -50%);
}
.floating-music-button.playing span {
  border-left: 5px solid #7e1f25;
  border-right: 5px solid #7e1f25;
}
.floating-music-button:not(.playing) span {
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid #7e1f25;
  transform: translate(-40%, -50%);
}
.floating-music-button:focus-visible { outline: 3px solid #7e1f25; outline-offset: 4px; }
@keyframes floating-spin { to { transform: rotate(360deg); } }
@keyframes floating-control { 50% { translate: 0 -7px; } }
.countdown-art {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  aspect-ratio: 2 / 3;
  margin-top: 38px;
  filter: drop-shadow(0 14px 15px rgba(65, 37, 7, .28));
}
.countdown-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.countdown-panel {
  position: absolute;
  z-index: 2;
  left: 8.5%;
  right: 8.5%;
  bottom: 8.7%;
  height: 16.7%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  color: #4b2a14;
  text-shadow: 0 1px 0 rgba(255, 240, 177, .78), 0 3px 4px rgba(65, 32, 5, .22);
}
.countdown-panel > div + div { border-left: 1px solid rgba(95, 53, 13, .32); }
.countdown-panel strong {
  display: block;
  font-family: Cinzel, serif;
  font-size: clamp(24px, 7vw, 36px);
  font-weight: 600;
  line-height: 1;
}
.countdown-panel small {
  display: block;
  margin-top: 9px;
  font: 600 clamp(7px, 2vw, 10px) Montserrat, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.event-date {
  position: relative;
  z-index: 2;
  width: min(88%, 390px);
  margin: 14px 0 0;
  padding: 18px 16px 20px;
  color: #5c3519;
  border-top: 1px solid rgba(176, 139, 49, .6);
  border-bottom: 1px solid rgba(176, 139, 49, .6);
  text-shadow: 0 1px 0 #fff8df;
}
.event-date span { display: block; margin-bottom: 4px; font: 38px Italianno, cursive; color: var(--wine); }
.event-date strong { font: 600 clamp(15px, 4.5vw, 20px) Cinzel, serif; letter-spacing: .1em; }
.script, h2 { font-family: Italianno, cursive; font-weight: 400; }
.seal, .medallion { display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #f7dda1, #9a6d28); border: 3px double #72501e; box-shadow: 0 4px 15px rgba(70,40,8,.25); }
.seal { width: 80px; height: 80px; font-size: 34px; }
h2 { margin: 18px 0 8px; font-size: clamp(49px, 14vw, 70px); color: var(--gold); line-height: .9; }
.music-button, .button { border: 0; cursor: pointer; text-decoration: none; font: 600 13px Montserrat, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.music-button { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 15px 22px; color: white; background: var(--wine); border-radius: 999px; box-shadow: 0 8px 18px rgba(91,17,22,.25); }
.music-bars { display: flex; gap: 3px; align-items: center; height: 20px; }
.music-bars i { display: block; width: 2px; height: 7px; background: #fff; }
.music-button.playing i { animation: sound .7s infinite alternate; }
.music-button.playing i:nth-child(2), .music-button.playing i:nth-child(4) { animation-delay: -.35s; }
@keyframes sound { to { height: 20px; } }
.reception {
  min-height: 0;
  padding: 26px 10px 0;
  box-shadow: none;
}
.reception::after {
  inset: 14px;
  border: 2px solid rgba(176, 139, 49, .58);
  box-shadow: none;
}
.venue-card {
  position: relative;
  z-index: 2;
  width: min(100%, 490px);
  aspect-ratio: 1199 / 1312;
  filter: drop-shadow(0 13px 13px rgba(67, 39, 7, .25));
}
.venue-frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.venue-content {
  position: absolute;
  z-index: 3;
  top: 25%;
  left: 9%;
  right: 9%;
  bottom: 13%;
  display: grid;
  grid-template-columns: 47% 53%;
  align-items: center;
}
.venue-castle {
  width: 116%;
  max-height: 72%;
  margin-left: -10%;
  object-fit: contain;
  filter: drop-shadow(0 7px 5px rgba(93, 54, 8, .2));
}
.venue-details { padding: 0 5px; }
.venue-details > p { margin: 0 0 8px; color: #a27b27; font: 34px Italianno, cursive; }
.venue-details h2 {
  margin: 0;
  color: #4c2a15;
  font: 600 clamp(22px, 6.5vw, 34px) Cinzel, serif;
  line-height: 1.28;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff5d3;
}
.venue-button {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 22px;
  color: white;
  background: linear-gradient(#c79c3f, #9b7123);
  border: 1px solid #785217;
  border-radius: 999px;
  box-shadow: 0 5px 0 #684313, 0 8px 13px rgba(77, 42, 4, .2);
  font: 600 11px Montserrat, sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s, box-shadow .2s;
}
.venue-button:hover { transform: translateY(2px); box-shadow: 0 3px 0 #684313, 0 5px 9px rgba(77, 42, 4, .2); }
.dress-card {
  position: relative;
  z-index: 1;
  width: min(96%, 440px);
  aspect-ratio: 2 / 3;
  margin-top: -54px;
  filter: drop-shadow(0 14px 13px rgba(66, 37, 5, .3));
}
.dress-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.dress-content {
  position: absolute;
  z-index: 2;
  top: 10.5%;
  left: 11%;
  right: 11%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff9e8;
  text-align: center;
  text-shadow: 0 2px 3px rgba(70, 38, 4, .42);
}
.dress-couple {
  width: 88%;
  height: 50%;
  margin-top: 2%;
  object-fit: contain;
  filter: drop-shadow(0 10px 7px rgba(64, 31, 4, .3));
}
.dress-content h2 {
  margin: 3% 0 12px;
  color: #fff8e2;
  font: 48px Italianno, cursive;
  line-height: .95;
}
.dress-content p {
  max-width: 310px;
  margin: 0;
  font: 600 clamp(12px, 3.5vw, 16px) Cinzel, serif;
  line-height: 1.65;
  text-transform: uppercase;
}
.dress-content strong { color: #fff2b8; }
.gift-card {
  position: relative;
  z-index: 2;
  width: min(96%, 445px);
  aspect-ratio: 1086 / 1448;
  margin-top: 18px;
  filter: drop-shadow(0 14px 13px rgba(66, 37, 5, .28));
}
.gift-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.gift-content {
  position: absolute;
  z-index: 2;
  top: 17%;
  left: 15%;
  right: 15%;
  bottom: 33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #4a2a18;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 250, 226, .85);
}
.gift-content h2 { margin: 0 0 15px; color: #7e1f25; font: 52px Italianno, cursive; line-height: .9; }
.gift-content p { max-width: 300px; margin: 6px 0; font: 600 clamp(10px, 3vw, 14px) Cinzel, serif; line-height: 1.55; }
.gift-content .gratitude { margin-top: 14px; color: #9a7027; font-family: Italianno, cursive; font-size: 25px; text-transform: none; }
.button { z-index: 2; display: inline-block; margin-top: 18px; padding: 15px 28px; color: white; background: var(--gold); border-radius: 999px; box-shadow: 0 7px 0 #795a21; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(2px); box-shadow: 0 5px 0 #795a21; }
.rsvp {
  min-height: 680px;
  margin-top: 0;
  padding: 105px 34px 70px;
  color: white;
  background:
    radial-gradient(circle at 50% 8%, rgba(217, 168, 76, .28), transparent 34%),
    linear-gradient(rgba(83, 14, 20, .92), rgba(48, 7, 11, .96)),
    url("assets/fondo-damasco.png");
  background-size: auto, auto, cover;
  box-shadow: none;
}
.rsvp::after {
  inset: 14px;
  border: 2px solid rgba(235,202,116,.76);
  box-shadow: inset 0 0 30px rgba(20, 0, 0, .28);
}
.rsvp-corner { position: absolute; z-index: 1; top: -2px; width: min(44%, 220px); height: auto; opacity: .9; pointer-events: none; }
.rsvp-corner-right { right: -2px; }
.rsvp-corner-left { left: -2px; transform: scaleX(-1); }
.rsvp-seal { position: relative; z-index: 2; width: 98px; height: 98px; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(22, 0, 0, .4)); }
.rsvp-kicker { z-index: 2; margin: 15px 0 7px; color: #daba64; font: 600 13px Cinzel, serif; letter-spacing: .24em; text-transform: uppercase; }
.rsvp h2 { z-index: 2; max-width: 400px; margin: 8px 0 13px; color: #f3d787; font-size: clamp(56px, 15vw, 75px); text-shadow: 0 3px 10px rgba(20,0,0,.48); }
.rsvp p { z-index: 2; max-width: 350px; line-height: 1.7; }
.rsvp-divider { z-index: 2; display: flex; align-items: center; width: min(78%, 320px); gap: 12px; color: #d6ae50; }
.rsvp-divider::before, .rsvp-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(to right, transparent, #d6ae50); }
.rsvp-divider::after { transform: scaleX(-1); }
.rsvp-divider span { font-size: 9px; }
.button-light { padding: 16px 27px; color: var(--wine-dark); background: linear-gradient(#fff4ca, #d7b65e); border: 1px solid #f8e4a7; box-shadow: 0 6px 0 #8e6822, 0 11px 19px rgba(17,0,0,.35); }
.closing { margin-top: 46px; font: 52px Italianno, cursive; color: #f0d68f; }
.site-footer {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 30px 0 0;
  padding: 43px 20px 34px;
  color: #f0db9e;
  background:
    linear-gradient(rgba(45, 9, 13, .96), rgba(28, 5, 8, .98)),
    url("assets/fondo-damasco.png");
  background-size: auto, 720px auto;
  border-top: 4px double #bd9340;
  border-bottom: 2px solid #78531c;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 235, 173, .2), inset 0 0 34px rgba(0, 0, 0, .34), 0 -9px 22px rgba(53, 29, 4, .2);
}

/* Los marcos decorativos ya forman parte de las imágenes. Estos bordes
   sintéticos dibujaban las líneas claras entre una sección y la siguiente. */
.section::after,
.hero::after,
.reception::after,
.rsvp::after {
  display: none;
}
.site-footer::before {
  content: "◆";
  position: absolute;
  z-index: -1;
  top: 13px;
  left: 50%;
  width: min(72%, 360px);
  color: #d3aa4c;
  background: linear-gradient(to right, transparent 0 41%, #2c090d 41% 59%, transparent 59% 100%);
  border-top: 1px solid transparent;
  transform: translateX(-50%);
  font-size: 9px;
}
.site-footer::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 20px;
  left: 50%;
  width: min(72%, 360px);
  height: 1px;
  background: linear-gradient(to right, transparent, #b68c37 18% 82%, transparent);
  transform: translateX(-50%);
}
.site-footer p { position: relative; margin: 0 0 7px; color: #f1d98c; font: 600 15px Cinzel, serif; letter-spacing: .16em; text-shadow: 0 2px 5px rgba(0,0,0,.5); }
.site-footer span { position: relative; color: #dbc68f; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; opacity: .82; }

@media (max-width: 370px) {
  .section { padding-inline: 20px; }
  .hero { padding-inline: 8px; }
  .stained-glass { background-size: 550px auto; background-position: -34px -535px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}