@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');

/* Invitación romántica: marfil + dorado champán */
:root {
  --ivory: #f7f5f0;
  --paper: #fffefa;
  --gold: #8a5a44;
  --gold-dark :#8a5a44; /* #9e895e*/;
  --ink: #464441;
  --muted: #817c72;
  --line: #d8c9a8;
  --shadow: 0 16px 45px rgba(62, 52, 35, .13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; }
body { margin: 0; width: 100%; min-width: 0; background: #e7e2d8; color: var(--ink); font-family: 'Montserrat', sans-serif; font-weight: 300; overflow-x: clip; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.invitation { width: 100%; max-width: 760px; margin: 0 auto; background: var(--ivory); overflow: clip; position: relative; box-shadow: 0 0 55px #514b4030; }
.floral {
  width: 100%;
  height: clamp(90px, 16vw, 140px);

  background-image: url("img/arreglofloral.png");
  background-repeat: repeat-x;
  /* El PNG tiene bastante margen vacío arriba y abajo; ampliarlo y alinearlo
     al borde acerca las flores al extremo de cada sección. */
  background-position: center bottom;
  background-size: auto 200%;

  pointer-events: none;
  z-index: 1;
}

.floral-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.floral-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: rotate(180deg);
}

.hero, .footer { position: relative; }
.hero { min-height: 100vh; min-height: 100svh; min-height: 100dvh; width: 100%; padding: clamp(104px, 13vh, 130px) 22px clamp(80px, 10vh, 100px); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-around; background: url("img/fondoindex.webp") center 46% / cover no-repeat; }
.hero .floral { display: none; }
.hero .names { color: #fffefa; }
.hero .names .name-ampersand { color: #f5ead5; }
.hero .intro { color: #fffefa; text-shadow: 0 1px 5px rgba(0, 0, 0, .5); }
.hero .intro em { color: inherit; font-family: inherit; font-size: inherit; font-style: italic; font-weight: 300; text-shadow: none; }
.hero .hero-down { color: #fffefa; border-color: rgba(255, 250, 238, .8); background: rgba(35, 31, 26, .24); box-shadow: 0 5px 16px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .18); }
.hero .hero-down:hover { color: #f5ead5; background: rgba(35, 31, 26, .38); }
.eyebrow { font-size: .68rem; letter-spacing: .24em; font-weight: 500; color: var(--gold-dark); margin: 0 0 17px; }
h1, h2, h3, .countdown strong, .event-date strong { font-family: 'Crimson Text', Georgia, serif; }
.names { font-family: 'Pinyon Script', cursive; }
h1 { color: var(--gold); font-size: clamp(2.5rem, 12vw, 4rem); line-height: .82; font-weight: 600; margin: 0 0 24px; }
h1 em { font-weight: 400; }
.intro { max-width: 340px; line-height: 1.8; font-size: .94rem; }
.hero .intro::before { content: ""; display: block; width: var(--hero-divider-width); height: 1px; margin: 0 auto 16px; background: var(--line); }
.names { position: relative; width: min(100%, 300px); height: clamp(160px, 30vw, 210px); flex: 0 0 auto; color: var(--gold-dark); margin: 0; }
.names span { position: absolute; font-family: 'Pinyon Script', cursive; line-height: 1; white-space: nowrap; }
.names .name-first, .names .name-second { font-size: clamp(5rem, 9vw, 6rem); }
.names .name-first { top: 0; left: 6%; }
.names .name-ampersand { top: 48%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(2.6rem, 6vw, 3.6rem); font-style: italic; color: var(--gold); }
.names .name-second { right: 6%; bottom: 0; }
.countdown { display: flex; align-items: stretch; justify-content: center; gap: clamp(9px, 3vw, 24px); margin: 4px 0 28px; }
.countdown div { min-width: 52px; display: flex; flex-direction: column; gap: 5px; }
.countdown strong { font-size: clamp(1.8rem, 7vw, 3rem); line-height: 1; font-weight: 600; }
.countdown span { font-family: 'Crimson Text', Georgia, serif; color: var(--gold-dark); font-size: 1.05rem; }
.countdown i { width: 1px; background: var(--line); }
.date-line { letter-spacing: .17em; font-size: .7rem; margin: 0 0 26px; }
.hero { --hero-divider-width: clamp(190px, 60vw, 300px); }
.hero .date-line { width: var(--hero-divider-width); margin: 0; padding: 0 10px 8px; border-bottom: 1px solid var(--gold); color: var(--gold-dark); font-size: clamp(1.25rem, 3vw, 1.5rem); letter-spacing: .2em; text-align: center; }
.hero .date-line { color: #f5ead5; border-color: rgba(255, 250, 238, .9); }
.hero .intro::before { background: rgba(255, 250, 238, .88); }
.button { cursor: pointer; border-radius: 7px; border: 1px solid var(--gold); padding: 14px 24px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; text-decoration: none; text-align: center; transition: .2s ease; font-size: .85rem; font-weight: 500; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #9e895e2b; }
.button-solid { background: var(--gold);
   color: var(--ivory); }
.button-outline { background: transparent; color: var(--gold-dark); }
.hero-down { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: linear-gradient(145deg, #fffefa, #f1eadc); box-shadow: 0 5px 16px rgba(62, 52, 35, .1), inset 0 1px rgba(255, 255, 255, .9); color: var(--gold-dark); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, color .2s ease; }
.hero-down svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-down:hover { transform: translateY(3px); box-shadow: 0 8px 20px rgba(62, 52, 35, .14), inset 0 1px rgba(255, 255, 255, .9); color: var(--gold); }
.hero-down:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; border-radius: 50%; }
.hero > .hero-down { position: absolute; z-index: 2; left: 50%; bottom: 38px; translate: -50% 0; }
.section { position: relative; min-height: 100vh; min-height: 100svh; min-height: 100dvh; width: 100%; padding: clamp(58px, 9vh, 90px) clamp(18px, 4vw, 30px); text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.section.has-next { padding-bottom: clamp(112px, 14vh, 132px); }
.countdown-section { justify-content: flex-end; background: url("img/cuentaRegresiva.webp") center 52% / cover no-repeat; }
.countdown-section .section-icon, .countdown-section .eyebrow, .countdown-section h2 { color: #fffefa; text-shadow: 0 2px 8px rgba(0, 0, 0, .68); }
.countdown-section .countdown { width: calc(100% + clamp(36px, 8vw, 60px)); max-width: none; margin: 4px 0 0; padding: 24px 20px; border: 1px solid rgba(255, 250, 238, .5); border-radius: 0; background: rgba(35, 31, 26, .48); box-shadow: 0 12px 32px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .08); }
.countdown-section .countdown div { flex: 1; min-width: 0; }
.countdown-section .countdown strong { color: #fffefa; text-shadow: 0 1px 5px rgba(0, 0, 0, .42); }
.countdown-section .countdown span { color: #f5ead5; }
.countdown-section .countdown i { background: rgba(255, 250, 238, .48); }
.countdown-section .hero-down { border-color: rgba(216, 201, 168, .72); background: rgba(247, 245, 240, .12); box-shadow: 0 5px 16px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .12); color: #e5d6b4; }
.countdown-section .hero-down:hover { color: #fffefa; }
.celebration { gap: clamp(12px, 2vh, 18px); background: linear-gradient(145deg, #eee8dc 0%, #e2d6bf 100%); }
.celebration h2, .celebration .month, .celebration .year, .celebration .event-date span, .celebration .event-date strong, .celebration .event-card h3 { color: #8a5a44; }
.celebration h2 { margin: 0; }
.celebration-rings { display: block; width: clamp(92px, 16vw, 120px); height: auto; object-fit: contain; margin: 0 auto; }
.section-icon { color: var(--gold); font-size: 2.5rem; line-height: 1; margin-bottom: 13px; font-family: Georgia, serif; }
.table-icon, .bow-icon, .gift-icon { display: block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bow-icon { margin-inline: auto; }
.gift-icon { margin-inline: auto; }
h2 { color: var(--gold); font-size: clamp(2.5rem, 9vw, 4rem); line-height: .98; font-weight: 600; margin: 0 0 24px; }
.event-card { max-width: 500px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 25px; padding: 36px 20px; box-shadow: var(--shadow); }
.celebration .event-card { padding: 44px 20px; }
.celebration .month, .celebration .year { margin: 0; }
.celebration .year { font-size: 1.08rem; }
.celebration .event-date { margin-top: 16px; }
.celebration .event-date span { font-size: 1rem; }
.celebration .event-card h3 { margin: 20px 0 6px; }
.celebration .event-card .button { margin-top: 14px; border-color: #8a5a44; background: #8a5a44; color: #fffefa; }
.month, .year { color: var(--gold-dark); letter-spacing: .28em; font-family: 'Crimson Text', Georgia, serif; }
.event-date { display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px; align-items: center; margin: 18px 0 0; }
.event-date span { border-top: 1px solid var(--ink); padding-top: 9px; font-family: 'Crimson Text', Georgia, serif; color: var(--gold-dark); font-size: .92rem; }
.event-date strong { color: var(--gold); font-size: 5rem; font-weight: 600; line-height: 1; }
.event-card h3 { font-size: 1.7rem; margin: 26px 0 5px; }
.muted { color: var(--muted); line-height: 1.7; font-size: .88rem; }
.event-card .button { margin-top: 14px; min-width: 190px; }
.scroll-cue { min-height: 54px; padding: 6px 7px 6px 20px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 15px; border: 1px solid #d8c9a8; border-radius: 999px; background: linear-gradient(135deg, #fffefa, #f1eadc); box-shadow: 0 7px 22px rgba(62, 52, 35, .09), inset 0 1px rgba(255, 255, 255, .9); color: var(--gold-dark); font-size: .7rem; font-weight: 500; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease; }
.scroll-cue:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(62, 52, 35, .14), inset 0 1px rgba(255, 255, 255, .9); }
.scroll-cue:active { transform: scale(.98); }
.scroll-cue:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
.scroll-cue-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #c7b38a, #ad976c); color: white; box-shadow: 0 3px 8px #9e895e38; }
.scroll-cue-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.section-next { position: absolute; left: 50%; bottom: 24px; translate: -50% 0; margin-top: 0; }
.gallery-section { position: relative; isolation: isolate; padding-bottom: 65px; background: #5a3a2e; color: #fffdf8; }
.gallery-section h2 { color: #eee8dc; }
.gallery-section .eyebrow { color: #d8c9a8; }
.gallery-section .subtitle { color: #f4f0e8; }
.gallery-section .hero-down { border-color: rgba(216, 201, 168, .72); background: rgba(247, 245, 240, .12); box-shadow: 0 5px 16px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .12); color: #e5d6b4; }
.gallery-section .hero-down:hover { color: #fffefa; }
.subtitle { margin: -12px 0 30px; font-size: 1rem; }
.gallery { position: relative; display: flex; width: min(100%, 500px); align-items: center; justify-content: center; gap: 0; }
.gallery-frame { width: 100%; max-width: 500px; aspect-ratio: 3 / 4; background: #e6dfd0; border: 6px solid white; box-shadow: 0 8px 25px #00000014; position: relative; overflow: hidden; touch-action: pan-y; }
.gallery-frame img { width: 100%; height: 100%; object-fit: cover; display: none; opacity: 0; transition: opacity 280ms ease; user-select: none; -webkit-user-drag: none; }
.gallery-frame img.is-visible { opacity: 1; }
.photo-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 25px; color: #9e8e6b; background: linear-gradient(145deg, #eee9dd, #d8d0bf); }
.photo-placeholder span { font-size: 4rem; }
.photo-placeholder p { line-height: 1.6; font-size: .8rem; }
.dots { display: flex; justify-content: center; gap: 12px; margin-top: 22px; }
.dots span { width: 9px; height: 9px; border-radius: 50%; background: #d6cbb5; }
.dots .active { background: var(--gold); }
.details-section { background: linear-gradient(180deg, #f7f5f0 0%, #eee8dc 100%); display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 28px); padding: clamp(45px, 8vh, 75px) clamp(16px, 4vw, 28px); }
.details-title { margin: 0; color: #8a5a44; font-size: clamp(1.8rem, 7vw, 2.5rem); line-height: 1.05; }
.detail-card { width: 100%; max-width: 520px; min-height: 260px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: clamp(27px, 5vh, 40px) clamp(20px, 5vw, 34px); display: flex; flex-direction: column; align-items: center; box-shadow: 0 8px 25px #00000008; }
.detail-card .section-icon { font-size: 2.3rem; }
.detail-card h2 { font-size: 2.35rem; margin-bottom: 16px; }
.detail-card p { line-height: 1.75; font-size: .86rem; margin: 0 0 22px; flex: 1; }
.detail-card .button { width: 100%; padding: 13px 10px; font-size: .75rem; }
.footer { isolation: isolate; min-height: 100vh; min-height: 100svh; min-height: 100dvh; padding: 40px 20px; background: url("img/teEsperamos.jpg") center 46% / cover no-repeat; color: #fffefa; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; }
.footer-monogram { display: block; width: clamp(190px, 36vw, 310px); max-width: 68vw; max-height: 52svh; height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.footer p { margin: 0; color: #fffefa; font-family: 'Crimson Text', Georgia, serif; font-size: clamp(1.7rem, 5vw, 2.3rem); text-shadow: 0 2px 12px rgba(0, 0, 0, .75); }
.modal { position: fixed; inset: 0; z-index: 20; background: rgba(28, 26, 22, .56); display: flex; justify-content: center; align-items: center; padding: 18px; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; }
.modal.open { opacity: 1; visibility: visible; }
.modal-panel { position: relative; width: min(100%, 510px); max-height: 88vh; overflow-y: auto; padding: 48px 30px 32px; border: 1px solid var(--line); border-radius: 25px; background: var(--paper); text-align: center; box-shadow: var(--shadow); transform: translateY(12px); transition: transform .22s ease; }
.modal.open .modal-panel { transform: translateY(0); }
.modal-panel h2 { font-size: 2.8rem; margin-bottom: 20px; }
.dress-modal-panel { width: min(100%, 590px); }
.dress-reference { display: block; width: auto; max-width: 100%; max-height: 48svh; object-fit: contain; margin: 14px auto 20px; border: 1px solid var(--line); border-radius: 12px; }
.map-modal-panel { width: min(100%, 780px); padding: 38px 24px 24px; }
.map-modal-panel .section-icon { margin-bottom: 6px; }
.map-modal-panel h2 { margin: 0 0 4px; font-size: 2.5rem; }
.map-modal-panel > p { margin: 0 0 16px; }
.venue-map { display: block; width: 100%; height: min(52vh, 440px); border: 1px solid var(--line); border-radius: 14px; background: #eee8dc; }
.map-modal-panel .close-action { margin-top: 16px; }
.modal-panel p { line-height: 1.8; font-size: .92rem; }
.close { position: absolute; top: 10px; right: 17px; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--gold-dark); font-size: 2rem; cursor: pointer; line-height: 1; }
.close-action { margin-top: 10px; }
.gift-data { padding: 20px; background: #f5f1e8; border-radius: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.copy-alias-button { margin: 10px 0 2px; padding: 10px 14px; font-size: .78rem; }
.drive-link { text-decoration: none; }
.music-platform-links { display: grid; gap: 12px; margin: 18px 0 8px; }
.music-platform { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: #f5f1e8; color: var(--gold-dark); font-weight: 500; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.music-platform:hover { transform: translateY(-1px); background: #eee8dc; }
.local-form { display: grid; gap: 15px; text-align: left; margin-top: 22px; }
.local-form label { display: grid; gap: 7px; font-size: .8rem; color: var(--muted); }
.local-form input, .local-form select { width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; outline-color: var(--gold); }
.honeypot-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rsvp-response-frame { position: absolute; width: 1px; height: 1px; border: 0; visibility: hidden; }
.attendance-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.attendance-group legend { margin-bottom: 8px; color: var(--muted); font-size: .8rem; }
.attendance-options { position: relative; width: 100%; min-height: 164px; transition: min-height .22s ease; }
.attendance-options.is-settled { min-height: 104px; }
.local-form .attendance-choice { position: absolute; display: flex; width: calc(50% - 6px); min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fffefa; color: var(--ink); font-size: .76rem; text-align: center; cursor: pointer; }
.attendance-choice--yes { top: 0; left: 0; }
#rsvpModal.open .attendance-choice--yes { animation: attendance-pulse 1.15s ease-in-out infinite; }
.attendance-choice--no { z-index: 1; top: 0; left: calc(50% + 6px); transition: left .22s ease, top .22s ease; }
.local-form .attendance-choice input[type="radio"] { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--gold-dark); }
.attendance-hint { min-height: 1.4em; margin: 2px 0 0 !important; color: var(--gold-dark); font-size: .72rem !important; line-height: 1.4 !important; text-align: center; }
@keyframes attendance-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { #rsvpModal.open .attendance-choice--yes { animation: none; } }
.celebration-effects { position: fixed; z-index: 30; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -30px; left: var(--x); opacity: 0; animation: confetti-fall var(--fall-time) linear var(--fall-delay) forwards; will-change: transform, opacity; }
.paper-bit { width: 8px; height: 13px; border-radius: 1px; background: var(--paper-color); }
.streamer { width: 12px; height: 50px; border-left: 3px solid var(--streamer-color); border-right: 2px solid var(--streamer-color); border-radius: 45% 55% 50% 40%; }
@keyframes confetti-fall { 0% { opacity: 0; transform: translate3d(0, -30px, 0) rotate(0); } 12% { opacity: .95; } 100% { opacity: 0; transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin)); } }
.invitation.screen-shake, #rsvpModal .modal-panel.screen-shake { animation: invitation-shake .48s ease-in-out; }
@keyframes invitation-shake { 0%, 100% { transform: translateX(0); } 16% { transform: translateX(-7px); } 32% { transform: translateX(7px); } 48% { transform: translateX(-5px); } 64% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }
.local-form .button { width: 100%; margin-top: 4px; }
.local-form .button:disabled { cursor: wait; opacity: .88; }
.local-form .button.is-loading:hover { transform: none; box-shadow: none; }
.submit-spinner { display: none; width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.is-loading .submit-spinner { display: inline-block; animation: submit-spinner-spin .75s linear infinite; }
@keyframes submit-spinner-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-loading .submit-spinner { animation: none; } }
.form-note { font-size: .72rem !important; color: var(--muted); margin-top: 18px; }
.toast { position: fixed; z-index: 40; bottom: 22px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #393630; color: white; padding: 13px 18px; border-radius: 12px; width: max-content; max-width: calc(100% - 32px); font-size: .83rem; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 540px) {
  html, body { height: 100%; overflow: hidden; }
  .invitation { height: 100dvh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: none; }
  .invitation::-webkit-scrollbar { display: none; }
  .hero { min-height: 100svh; min-height: 100dvh; padding: 94px 18px 78px; }
  .hero > .hero-down { bottom: 50px; }
  .hero .intro { max-width: 310px; margin: 0; font-size: 1.05rem; line-height: 1.7; }
  .names { height: clamp(152px, 42vw, 180px); }
  .names .name-first, .names .name-second { font-size: clamp(3.7rem, 16vw, 4.3rem); }
  .countdown { width: 100%; max-width: 350px; gap: clamp(7px, 2.5vw, 14px); }
  .countdown div { min-width: 0; flex: 1; }
  .countdown strong { font-size: clamp(1.65rem, 7.5vw, 2.4rem); }
  .countdown span { font-size: .95rem; }
  .date-line { font-size: .61rem; letter-spacing: .12em; }
  .section { min-height: 100vh; min-height: 100svh; min-height: 100dvh; padding: 58px 18px; }
  .section.has-next { padding-bottom: 112px; }
  .event-card { width: 100%; padding: 30px 15px; border-radius: 20px; }
  .celebration { padding-top: 38px; padding-bottom: 38px; }
  .celebration-rings { width: clamp(82px, 23vw, 96px); }
  .celebration .event-card { padding: 52px 15px; }
  .celebration .year { font-size: 1.05rem; }
  .celebration .event-date { margin-top: 18px; }
  .celebration .event-date span { font-size: .84rem; }
  .celebration .event-card h3 { margin-top: 24px; }
  .event-date { gap: 8px; }
  .event-date span { font-size: .73rem; }
  .event-date strong { font-size: clamp(4rem, 19vw, 5rem); }
  .gallery { display: flex; width: 100%; max-width: 500px; gap: 0; justify-content: center; }
  .gallery-section.has-next { padding-bottom: 90px; }
  .gallery-frame { width: 100%; height: clamp(290px, 56svh, 430px); aspect-ratio: auto; border-width: 4px; }
  .details-section { height: 100dvh; min-height: 0; gap: 18px; padding: 42px 15px 55px; justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
  .details-section.has-next { padding-bottom: 18px; }
  .details-section > *:not(.section-next) { flex: 0 0 auto; }
  .details-section > .section-next { position: relative; bottom: auto; left: auto; translate: none; flex: 0 0 auto; margin: 10px 0 0; }
  .details-title { font-size: clamp(2rem, 8.2vw, 2.5rem); }
  .detail-card { min-height: 0; padding: 28px 20px; border-radius: 18px; }
  .detail-card h2 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .detail-card p { font-size: .85rem; flex: initial; }
  .detail-card .button { width: 100%; max-width: 300px; font-size: .78rem; }
  .modal { padding: 12px; }
  .modal-panel { width: 100%; max-height: calc(100svh - 24px); padding: 44px 20px 26px; border-radius: 22px; }
  .dress-reference { max-height: 42svh; }
  .modal-panel h2 { font-size: 2.5rem; }
  .map-modal-panel { padding: 40px 14px 18px; }
  .map-modal-panel .section-icon { margin-bottom: 4px; }
  .map-modal-panel h2 { font-size: 2.25rem; }
  .map-modal-panel > p { margin-bottom: 12px; font-size: .82rem; }
  .venue-map { height: min(48svh, 340px); }
  .map-modal-panel .close-action { width: 100%; margin-top: 12px; }
  .footer { min-height: 100svh; min-height: 100dvh; padding: 36px 20px; }
  .floral { height: 80px; background-size: auto 200%; background-position: center bottom; }
}
@media (max-width: 540px) and (max-height: 650px) {
  .gallery-section { padding-top: 34px; }
  .gallery-section h2 { margin-bottom: 16px; }
  .gallery-section .subtitle { margin-bottom: 18px; }
  .gallery-frame { height: clamp(280px, 53svh, 340px); }
}
@media (max-width: 360px) {
  .hero { padding-left: 12px; padding-right: 12px; }
  h1 { font-size: 3.3rem; }
  .countdown { gap: 6px; }
  .countdown strong { font-size: 1.55rem; }
  .countdown span { font-size: .82rem; }
  .event-date span { font-size: .66rem; }
  .modal-panel { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }



#detalles{
  margin: .7em 0;
}