:root {
  color-scheme: light;
  --ink: #513b32;
  --muted: #735a4d;
  --rose: #843b53;
  --rose-hover: #682c40;
  --gold: #9d7954;
  --paper: #f6ede4;
  --cover-halo: 230 209 189;
  --line: rgba(108, 77, 55, .22);
  --safe-top: 20%;
  --safe-bottom: 8%;
  --safe-left: 4%;
  --safe-right: 4%;
  /* Desplazamiento horizontal del texto superior de portada; negativo = izquierda. */
  --hero-top-offset-x: -55px;
  --transition-ease: cubic-bezier(.22,.61,.36,1);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #e5d2c1;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; text-transform: inherit; }
button, a, input, select { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
a { color: var(--rose); }
button, a { -webkit-user-select: none; user-select: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid var(--rose); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .baby-name, .signature, .date-main { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h2 { font-size: clamp(27px, 7.3cqw, 34px); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
h2[tabindex="-1"]:focus { outline: none; }
h3 { font-size: 21px; line-height: 1.16; }
p { line-height: 1.4; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; flex: none; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.experience { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 280px; display: grid; place-items: center; overflow: hidden; }
.envelope { position: relative; width: min(100vw, 56.25vh); width: min(100vw, 56.25dvh); aspect-ratio: 9 / 16; isolation: isolate; container-type: inline-size; }
.envelope-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; z-index: -1; }
.envelope-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; z-index: -2; }
.opening-screen, .goodbye-screen { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
/* Dos zonas de papel libre dejan el sello y su ramo completamente visibles. */
.opening-copy { width: 100%; height: 100%; display: grid; grid-template-rows: 24% 1fr 17% 7%; }
.opening-heading { grid-row: 1; align-self: center; justify-self: start; width: 82%; margin: 0 0 0 3%; }
.opening-copy .eyebrow { font-size: clamp(9px, 2.4cqw, 11px); letter-spacing: .12em; }
.opening-copy h1 { font-size: clamp(28px, 7.8cqw, 42px); line-height: 1.08; letter-spacing: -.035em; margin: 7px 0; }
.opening-copy h1 span { display: block; color: var(--rose); font-size: 1.18em; font-style: normal; margin-top: 5px; }
.opening-subtitle { font-size: clamp(12px, 3cqw, 14px); line-height: 1.45; }
.opening-action { grid-row: 3; align-self: start; width: 72%; justify-self: end; margin-right: 5%; }
.opening-action .button { width: 100%; max-width: 250px; }
.opening-action .small { margin-top: 6px; font-size: 12px; }
.eyebrow { font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.small { font-size: 12px; line-height: 1.35; }
.muted { color: var(--muted); }
.invitation {
  position: absolute; top: var(--safe-top); bottom: max(var(--safe-bottom), 64px); left: var(--safe-left); right: var(--safe-right);
  display: flex; flex-direction: column; padding: 0;
  isolation: isolate;
}
.invitation::before {
  content: ""; position: absolute; inset: -6% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(250,239,227,.82) 0%, rgba(249,235,221,.68) 36%, rgba(247,231,216,.34) 61%, rgba(247,231,216,0) 78%);
  filter: blur(15px);
}

.section-heading { display: flex; justify-content: flex-end; flex-shrink: 0; padding: 0 2px 5px; font-size: 10px; font-weight: 600; line-height: 1.25; letter-spacing: .075em; text-transform: uppercase; color: #735748; }
.section-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #9e6d6280 transparent; padding: 0 1px 3px; }
.section { min-height: 100%; text-align: center; font-size: 15px; }
.section.is-entering, .invitation.is-entering { animation: arrive 560ms var(--transition-ease) both; }
.section.is-leaving, .invitation.is-leaving { animation: leave 480ms var(--transition-ease) both; pointer-events: none; }
.section > .eyebrow { margin: 0 0 5px; }
.section-intro { margin: 8px auto 10px; font-size: 15px; line-height: 1.35; max-width: 36ch; }
.hero { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero h2 { font-size: 27px; font-style: normal; letter-spacing: 0; }
.baby-name { color: var(--rose); font-size: clamp(37px, 11.3cqw, 60px); font-style: normal; line-height: 1.12; letter-spacing: -.045em; margin: 8px 0 0; overflow-wrap: normal; text-wrap: balance; }
.fine-rule { width: 42px; height: 1px; background: var(--gold); opacity: .65; margin: 11px auto; }
.hero-message { font-size: 15px; line-height: 1.4; max-width: 35ch; text-wrap: pretty; }
.date-signature { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.date-signature > span:not(.date-main) { max-width: 80px; }
.date-main { font-size: 44px; line-height: 1; color: var(--rose); padding: 0 13px; border-inline: 1px solid var(--line); }
.button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; }
.button { min-height: 47px; padding: 12px 17px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; transition: background 180ms, transform 180ms; }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--rose); color: #fff9f5; box-shadow: 0 4px 13px #6930481a; }
.button-primary:hover { background: var(--rose-hover); }
.button-outline { color: var(--rose); border-color: #843b5366; background: #fff6ed69; }
.button-outline:hover { background: #fff6edb3; }
.button-stack { display: grid; gap: 7px; margin: 10px auto 0; width: 100%; max-width: 310px; }
.text-button { min-height: 44px; background: none; padding: 7px 2px; margin-top: 3px; border: 0; font-size: 14px; color: var(--rose); font-weight: 600; }
.text-button .icon { width: 17px; height: 17px; }
.scroll-hint { text-align: center; font-size: 9px; color: var(--muted); padding-top: 6px; flex-shrink: 0; letter-spacing: .04em; }
.scroll-hint span { margin-left: 4px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; margin: 9px 0 5px; }
.photo-tile { margin: 0; text-align: left; min-width: 0; }
.photo-tile:nth-child(even) { padding-top: 0; }
.photo-button, .photo-placeholder { width: 100%; aspect-ratio: 3/2; background: #f5e8dc70; padding: 5px; border: 1px solid #fff5eaaa; border-radius: 3px; box-shadow: 0 4px 14px #77523b10; }
.photo-button { display: block; }
.photo-button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); gap: 7px; text-align: center; font-size: 12px; }
.photo-placeholder .icon { opacity: .7; width: 27px; height: 27px; }
.photo-tile figcaption { font-size: 12px; line-height: 1.3; padding: 5px 2px; color: var(--muted); }
.event-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; margin-top: 5px; }
.event-item { display: flex; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.event-item p { font-size: 14px; margin-top: 4px; }
.event-item .small { font-size: 12px; }
.soft-card { padding: 16px; background: #fffaf4a8; border: 1px solid #ffffffcf; border-radius: 12px; }
.dress-card { margin-top: 9px; }
.dress-card p + p { margin-top: 5px; font-size: 15px; }
.family-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: left; margin-top: 4px; padding: 7px 0 3px; border-top: 1px solid var(--line); }
.family-intro { font: normal 17px/1.2 Georgia, serif; color: var(--rose); margin-bottom: 5px; }
.family-details [data-text] { font-size: clamp(13px, 3.5cqw, 14px); line-height: 1.35; text-wrap: pretty; }
.location-detail { text-align: left; margin: 9px 0; }
.location-detail h3 { color: var(--rose); font-size: 20px; margin-bottom: 5px; }
.location-detail p + p { margin-top: 4px; }
.location-detail .text-button { text-align: left; font-size: 13px; justify-content: flex-start; margin-top: 3px; }
.reception-detail { border-top: 1px solid var(--line); padding-top: 8px; }
.map-preview { height: clamp(90px, 24cqw, 112px); overflow: hidden; position: relative; border: 1px solid var(--line); border-radius: 7px; background: #f5e9dc80; margin-bottom: 7px; }
.map-cover { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 14px; }
.map-cover > .icon { width: 25px; height: 25px; color: var(--rose); }
.map-cover .text-button { margin: 0; font-size: 13px; }
.map-preview iframe { width: 100%; height: 100%; display: block; border: none; }
.section-icon { color: var(--rose); width: 25px; height: 25px; margin-bottom: 5px; }
.rsvp-form { display: grid; gap: 5px; text-align: left; margin: 10px 0 9px; }
.rsvp-form label, .field-label { display: block; font-size: 13px; line-height: 1.5; font-weight: 600; }
input, select { width: 100%; min-width: 0; min-height: 45px; border: 1px solid #98786580; border-radius: 6px; color: var(--ink); background: #fff8f0ad; padding: 10px 12px; font-size: 16px; }
input::placeholder { color: #806b5c; font-size: 13px; }
.rsvp-form select { margin-bottom: 4px; }
.rsvp-form label:not(:first-child) { margin-top: 3px; }
.countdown-section, .share-section { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; width: 100%; margin: 13px 0 9px; }
.countdown > div { min-width: 0; padding: 12px 2px; background: rgba(255,250,244,.68); border: 1px solid rgba(157,121,84,.23); border-radius: 10px; }
.countdown span:first-child { font: clamp(27px, 7.7vw, 37px)/1 Georgia, serif; color: var(--rose); display: block; font-variant-numeric: tabular-nums; }
.countdown span:last-child { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; }
.countdown-message { font: normal 19px/1.4 Georgia, serif; color: var(--rose); }
.countdown-message:empty { display: none; }
.summary-name { color: var(--rose); margin: 2px 0; font: normal 21px/1.1 Georgia, serif; }
.summary-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; text-align: left; margin: 0; }
.summary-list > div { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-top: 1px solid var(--line); }
.summary-list dt { color: var(--muted); font-size: 12px; padding-top: 2px; }
.summary-list dd { margin: 0; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.summary-list dd a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-underline-offset: 3px; }
.quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 5px; width: min(236px, 100%); }
.quick-links button { background: #fff7eee3; border: 1px solid var(--line); color: var(--rose); min-height: 46px; border-radius: 8px; font-size: 12px; padding: 6px 2px; }
.signature { font-size: 29px; color: var(--rose); font-style: normal; margin-top: 12px; line-height: 1.2; }
.share-section .text-button { font-size: 13px; margin-top: 8px; }
.share-section .section-intro { margin-bottom: 8px; }
.goodbye-screen { padding: 8%; align-items: start; }
.goodbye-screen > div { margin-top: 5%; }
.goodbye-screen h2 { margin-top: 10px; }
.goodbye-screen .button { margin-top: 22px; }
.bottom-nav { position: fixed; z-index: 5; left: 50%; bottom: max(14px, calc((100dvh - min(100dvh, 177.7778vw)) / 2 + 14px), calc(env(safe-area-inset-bottom) + 8px)); transform: translateX(-50%); display: grid; grid-template-columns: 46px minmax(118px, 142px) 46px; gap: 8px; width: min(250px, calc(100vw - 28px)); color: var(--rose); }
.bottom-nav button { display: flex; justify-content: center; align-items: center; gap: 8px; color: inherit; background: #fbf0e6ee; border: 1px solid #843b534d; border-radius: 50%; min-width: 44px; min-height: 46px; box-shadow: 0 3px 12px #59312716; }
.bottom-nav button:hover { background: #fff8f1; }
.bottom-nav button:focus-visible { outline-color: var(--rose); outline-offset: 3px; }
.bottom-nav button:disabled { opacity: .5; cursor: default; }
#sections-button { color: #fff9f4; background: var(--rose); border-color: var(--rose); border-radius: 30px; font-size: 12px; letter-spacing: .03em; }
#sections-button:hover { background: var(--rose-hover); }
.demo-label { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9px; letter-spacing: .04em; color: #634636; background: #f8ece0c4; border-radius: 20px; padding: 5px 11px; }
.dialog { color: var(--ink); background: #f7eee5; border: 1px solid #d3bca7; border-radius: 15px; width: min(430px, calc(100% - 32px)); max-height: calc(100dvh - 36px); padding: 25px; box-shadow: 0 16px 80px #42251e33; overflow-y: auto; }
.dialog::backdrop { background: #35251d6b; backdrop-filter: blur(4px); }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.dialog-heading h2 { font-size: 29px; margin-top: 7px; }
.icon-button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--line); color: var(--rose); background: #fffbf557; border-radius: 50%; }
.section-links { display: grid; margin: 8px 0 15px; }
.section-links button { display: flex; align-items: center; text-align: left; gap: 13px; padding: 13px 3px; background: none; border: 0; border-top: 1px solid var(--line); min-height: 48px; font-size: 13px; }
.section-links button > span:last-child { margin-left: auto; color: var(--rose); }
.section-links button[aria-current="page"] { color: var(--rose); font-weight: 600; }
.photo-dialog { padding: 10px; }
.photo-dialog img { width: 100%; max-height: 73dvh; object-fit: contain; display: block; }
.photo-dialog p { padding: 12px; text-align: center; }
.photo-close { position: absolute; top: 18px; right: 18px; background: #fff4e9ee; }
#copy-dialog > p { font-size: 13px; margin-bottom: 15px; }
#copy-dialog input { margin: 6px 0 15px; }
.toast { position: fixed; z-index: 20; bottom: max(88px, calc(env(safe-area-inset-bottom) + 76px)); left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 17px; color: #fff8f2; background: #573c32; border-radius: 9px; font-size: 12px; text-align: center; box-shadow: 0 4px 17px #573c3233; }
.noscript { position: fixed; inset: 25% 10%; padding: 30px; background: var(--paper); text-align: center; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes leave { from { opacity: 1; } to { opacity: 0; } }
@media (min-width: 600px) {
  .envelope { box-shadow: 0 0 70px #70503a14; }
}
@media (max-width: 350px) {
  .baby-name { font-size: 37px; }
  .demo-label { left: 12px; transform: none; font-size: 8px; }
  .summary-list > div { grid-template-columns: 1fr; gap: 3px; }
  .opening-action { width: 73%; margin-right: 4%; }
}
/* En horizontal se conserva el sobre completo y se desplaza solo su contenido. */
@media (orientation: landscape) and (max-height: 600px) {
  .section-heading { padding-bottom: 7px; }
  .baby-name { font-size: 32px; }
  .section h2 { font-size: 24px; }
  .summary-list > div { grid-template-columns: 1fr; gap: 2px; }
  .countdown { grid-template-columns: 1fr 1fr; }
  .countdown span:first-child { font-size: 27px; }
  .countdown span:last-child { font-size: 10px; }
  .date-signature { gap: 6px; }
  .date-main { padding-inline: 6px; }
  .opening-copy { grid-template-rows: 25% 1fr 18% 5%; }
  .opening-heading { width: 79%; margin-left: 4%; }
  .opening-copy .eyebrow, .opening-subtitle { display: none; }
  .opening-copy h1 { font-size: 22px; }
  .opening-action { width: 88%; justify-self: center; margin: 0; }
  .opening-action .button { font-size: 12px; padding: 8px; }
  .opening-action .small { display: none; }
}

/* El velo se disuelve hacia los bordes: aclara el papel sin formar un panel. */
.invitation .section-scroll:focus-visible { outline-offset: -3px; border-radius: 7px; }
.event-item > div { flex: 1; min-width: 0; }
.event-item h3 { color: #613e40; }
.hero .text-button { margin-top: 10px; }
@media (max-height: 650px) {
  .section-heading { padding-bottom: 7px; }
  .section > .eyebrow { margin-top: 2px; }
}

/* Refinamiento interior: las zonas seguras y el encuadre permanecen intactos. */
.section > h2, .section > .eyebrow, .section > .section-intro { width: 100%; margin-left: auto; margin-right: auto; text-align: center; }
.section > .section-icon { margin-left: 0; }
.section-heading { padding-bottom: 5px; }
.hero { justify-content: flex-start; padding-top: 8px; }
.hero h2 { font-size: clamp(32px, 8.8cqw, 44px); }
.hero .baby-name { font-size: clamp(43px, 12.1cqw, 62px); margin-top: 5px; }
.hero-message { font-size: clamp(16px, 4.1cqw, 18px); line-height: 1.42; }
.hero .fine-rule { margin-block: 13px; }
.hero .date-signature { margin-top: 17px; }
.hero .date-main { font-size: clamp(50px, 14cqw, 64px); }
.hero > .small { font-size: 13px; }
.bottom-nav > button:not(#sections-button) { background: var(--rose); color: #fff9f4; border-color: var(--rose); }
.bottom-nav > button:not(#sections-button):hover { background: var(--rose-hover); }
.bottom-nav .icon { display: block; margin: 0; }
#sections-button { background: #fbf0e6; color: var(--rose); border-color: #843b534d; }
#sections-button:hover { background: #fff8f1; }
.family-section { padding-top: 6px; }
.family-details { display: grid; grid-template-columns: 1fr; border: 0; text-align: center; gap: clamp(18px, 5cqw, 26px); margin: 18px 0 0; padding: 0; }
.family-details > div { padding-block: 5px; }
.family-details > div + div { border-top: 1px solid var(--line); padding-top: 20px; }
.family-intro { font-size: clamp(20px, 5.5cqw, 25px); line-height: 1.2; margin-bottom: 10px; }
.family-details [data-text] { font: 400 clamp(18px, 5cqw, 23px)/1.35 Georgia, serif; color: var(--ink); margin: 4px 0; }
#galeria > .section-intro { margin-block: 7px 9px; font-size: 14px; }
.gallery { display: block; overflow: hidden; margin: 0; touch-action: pan-y; }
.gallery-track { display: flex; width: 100%; transition: transform 450ms var(--transition-ease); }
.gallery .photo-tile { flex: 0 0 100%; width: 100%; padding: 0; min-width: 0; }
.gallery .photo-button, .gallery .photo-placeholder { aspect-ratio: 3/2; max-height: none; }
.gallery .photo-placeholder { min-height: 180px; gap: 13px; font-size: 14px; }
.gallery .photo-tile figcaption { font: normal 16px/1.25 Georgia, serif; padding: 7px 3px 2px; min-height: 29px; text-align: center; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 23px; margin-top: 5px; }
.gallery-controls .icon-button { width: 44px; height: 44px; background: #fbf0e6c9; }
.gallery-controls button:disabled { opacity: .45; }
#gallery-hint { font-size: 11px; margin-top: 4px; }
#ubicacion { display: flex; flex-direction: column; gap: 7px; }
#ubicacion > .eyebrow { margin-bottom: 0; }
#ubicacion > h2 { margin-bottom: 3px; }
#ubicacion .location-card { display: block; text-align: left; margin: 0; padding: 8px 12px 3px; border: 1px solid #fff5e96b; border-radius: 11px; background: #fff6ec6b; }
.location-card h3 { font-size: 20px; line-height: 1.1; margin-bottom: 3px; color: var(--rose); }
.location-card .place-name { font-size: 15px; line-height: 1.25; font-weight: 600; }
.location-card .place-time { font-size: 12px; line-height: 1.35; margin-top: 2px; }
.location-card .small { font-size: 12px; line-height: 1.3; margin-top: 3px; }
.location-card .text-button { margin: 0; padding-block: 5px; font-size: 12px; min-height: 44px; justify-content: flex-start; }
.location-actions { display: flex; justify-content: space-between; gap: 10px; }
#confirmacion { padding-top: 5px; }
#confirmacion > .section-icon { display: block; margin: 0 auto 4px; }
#confirmacion > .section-intro { margin-block: 8px 10px; }
.rsvp-form { margin-block: 8px; gap: 5px; }
.countdown-section { justify-content: flex-start; padding-top: 9px; }
.countdown-section > h2 { font-size: clamp(30px, 8.2cqw, 40px); line-height: 1.08; }
.countdown-section > .eyebrow { margin-bottom: 6px; }
.countdown { margin: 16px 0 8px; }
.countdown > div { padding: 16px 2px 12px; }
.countdown span:first-child { font-size: clamp(34px, 9.5cqw, 48px); }
.summary-name { margin: 5px 0 9px; font-size: clamp(18px, 4.7cqw, 23px); line-height: 1.16; }
.summary-list { display: grid; grid-template-columns: 1fr; gap: 7px; }
.summary-list > div { display: block; grid-area: auto; padding: 7px 11px; border: 1px solid #fff4e85e; border-radius: 10px; background: #fff6ec65; }
.summary-list dt { padding: 0; font-size: 11px; line-height: 1.3; letter-spacing: .05em; color: var(--rose); }
.summary-list dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; font-size: 14px; line-height: 1.3; }
.summary-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary-info .small { font-size: 11px; line-height: 1.3; }
.summary-list dd > a { flex: 0 0 95px; min-width: 44px; min-height: 44px; justify-content: flex-end; font-size: 12px; text-align: right; }
#resumen .quick-links { margin-top: 8px; width: 100%; }
.share-section { justify-content: flex-start; padding-top: 7px; }
.share-section > .section-icon { width: 23px; height: 23px; margin: 0 0 3px; }
.share-section > .eyebrow { margin-bottom: 5px; }
.share-section > .section-intro { margin-block: 8px; font-size: 14px; line-height: 1.4; }
.share-section > h2 { font-size: clamp(27px, 7.3cqw, 36px); }
.share-section .button-stack { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: none; gap: 7px; margin-top: 5px; }
.share-section .button { width: max-content; max-width: 100%; min-height: 44px; font-size: 13px; padding: 11px 12px; }
.share-section .signature { margin-top: 13px; font-size: 31px; }
.share-section .text-button { margin-top: 4px; }
@media (min-width: 600px) and (min-height: 700px) {
  .hero { padding-top: 16px; }
  .family-details { margin-top: 32px; gap: 30px; }
  .gallery .photo-button, .gallery .photo-placeholder { aspect-ratio: 3/2; }
  .share-section { padding-top: 18px; }
}

/* Pulido upright: jerarquía con tamaño, trazo y color; zonas seguras intactas. */
h1,h2,h3,p,span,a,button,label,input,select,dt,dd,figcaption { font-style: normal; }
h1,h2,h3,.baby-name,.signature,.date-main { font-family: Georgia, "Times New Roman", serif; }
.button { width: fit-content; min-height: 44px; border-radius: 30px; padding: 7px 15px; font-weight: 600; letter-spacing: .015em; box-shadow: none; }
.button-primary { background: var(--rose); border: 1px solid var(--rose); box-shadow: inset 0 0 0 3px #fff6ed1c; }
.button-outline { background: #fff6ed24; border: 1px solid #843b5380; }
.button:active { transform: none; }
.text-button { border-radius: 24px; padding-inline: 12px; }
.bottom-nav > button, .bottom-nav > button:not(#sections-button), #sections-button { color: var(--rose); background: transparent; border: 2px solid var(--rose); box-shadow: none; }
.bottom-nav > button:hover, .bottom-nav > button:not(#sections-button):hover, #sections-button:hover { color: var(--rose); background: #fff6ed36; }
.bottom-nav button:disabled { opacity: .55; }
.bottom-nav .icon { stroke-width: 2; }
.opening-heading { width: 200px; margin: 0; align-self: safe center; justify-self: center; text-align: center; position: relative; left: var(--hero-top-offset-x); }
.opening-action { align-self: start; justify-self: center; width: 84%; margin: -8px 0 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.opening-action .button { width: fit-content; max-width: none; padding-inline: 19px; }
.hero, .family-section, #galeria { padding-top: clamp(34px, 10cqw, 48px); }
.hero { padding-top: calc(clamp(34px, 10cqw, 48px) - 20px); }
#ubicacion { padding-top: 30px; }
.hero h2, .final-event { font-size: clamp(30px, 9.4cqw, 42px); line-height: 1.08; }
.hero .baby-name, .final-name { margin-top: 9px; font-size: clamp(32px, 10.5cqw, 48px); line-height: 1.08; letter-spacing: .005em; }
.baby-name > span { display: block; }
.baby-name .baby-surname { font-size: .56em; letter-spacing: .12em; margin-top: 6px; }
.hero .fine-rule { margin-block: 12px; }
.hero-message { font-size: clamp(15px, 4cqw, 17px); }
.hero .date-signature { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(285px,100%); gap: 9px; margin-block: 14px 7px; }
.date-signature > span:not(.date-main) { max-width: none; line-height: 1.35; font-size: 12px; font-weight: 700; }
.hero .date-main { font-size: 55px; line-height: 1; }
.hero > .small { font-size: 15px; font-weight: 700; color: var(--rose); text-transform: uppercase; }
.family-section > .eyebrow, #galeria > .eyebrow { line-height: 1.35; letter-spacing: .15em; }
.family-details { margin-top: 15px; gap: 15px; }
.family-intro { font-size: clamp(19px,5.3cqw,24px); }
#galeria > .section-intro { font-size: clamp(10px,2.9cqw,12px); line-height: 1.3; white-space: nowrap; margin-block: 5px 8px; max-width: none; }
.gallery .photo-button,.gallery .photo-placeholder { aspect-ratio: 3/2; border-radius: 10px; background: #fff6ed40; border-color: #fff6ed80; }
.gallery .photo-tile figcaption { font-size: 14px; line-height: 1.3; }
.gallery-viewer { position: relative; }
.gallery-controls { position: absolute; inset: 0 8px 29px; margin: 0; display: flex; justify-content: space-between; gap: 0; pointer-events: none; }
.gallery-controls .icon-button { pointer-events: auto; border-color: #843b5380; background: #fff6ede0; box-shadow: 0 2px 9px #513b3214; }
.gallery-controls .icon-button:disabled { opacity: .55; }
#photo-position { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 14px; color: var(--rose); background: #fff6edbd; font-size: 11px; }
#ubicacion .location-card { text-align: center; padding: 7px 10px 5px; background: #fff6ec40; border-color: #fff6eda6; border-radius: 15px; }
#ubicacion .location-card .text-button { justify-content: center; border: 1px solid #843b5366; min-height: 44px; margin-top: 5px; padding: 5px 12px; border-radius: 24px; font-size: 12px; }
.location-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.location-card-header h3 { text-align: left; margin: 0; }
.location-card-header .place-time { margin: 0; max-width: 115px; text-align: right; color: var(--rose); font-size: 12px; font-weight: 700; }
#ubicacion .location-card { padding: 10px 12px 8px; }
.location-card .place-name { margin-top: 7px; }
.location-actions { justify-content: center; gap: 7px; }
.location-card h3 { font-size: 19px; font-weight: 500; }
.location-card .place-name { font-size: 14px; }
.location-card .small { font-size: 12px; }
.rsvp-form { width: min(285px,100%); margin-inline: auto; gap: 5px; }
.rsvp-form input,.rsvp-form select { border-radius: 13px; background: #fff8f04d; padding-inline: 13px; }
.rsvp-form .button { justify-self: center; width: max-content; max-width: 100%; padding-inline: 17px; font-size: 13px; }
.rsvp-form label { text-align: center; }
.rsvp-form input { text-align: center; }
.rsvp-form select { width: 145px; justify-self: center; text-align: center; padding: 7px 12px; }
.rsvp-form .button, .share-section .button { min-height: 44px; padding: 7px 14px; }
.countdown-date { margin-top: 10px; color: var(--rose); font-size: 14px; font-weight: 600; line-height: 1.4; }
.countdown-date p + p { margin-top: 2px; }
.countdown-section .countdown { margin-top: 14px; }
.summary-list { margin-top: 9px; gap: 6px; }
#resumen { display: flow-root; }
.summary-list > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 6px; align-items: center; padding: 6px 8px; background: #fff6ec40; border-radius: 14px; }
.summary-list dt { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 0; }
.summary-list dt > span { min-width: 0; text-align: center; }
.summary-list dt .icon { width: 16px; height: 16px; }
.summary-list dd { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; gap: 2px; text-align: center; font-weight: 700; font-size: 13px; }
.summary-list .summary-info { align-items: center; }
.summary-list .summary-info .small { font-weight: 700; font-size: 11px; }
.summary-list dd > a { flex: 0 0 auto; position: relative; isolation: isolate; min-height: 44px; justify-content: center; border: 0; padding: 5px 10px; text-decoration: none; font-weight: 700; background: none; }
/* Contorno de 32 px dentro de un área táctil de 44 px. */
.summary-list dd > a::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border: 1px solid #843b5370; border-radius: 18px; background: #fff6ed20; }
.final-section { display: flex; flex-direction: column; align-items: center; height: 100%; padding-top: clamp(34px, 10cqw, 48px); justify-content: flex-start; gap: 22px; }
.final-top { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.final-top .section-icon { width: 28px; height: 28px; margin-bottom: 0; }
.final-top h2 { font-size: clamp(27px,7.5cqw,36px); line-height: 1.1; letter-spacing: .025em; }
.final-event { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0; color: var(--ink); }
.final-identity { width: 100%; }
.final-bottom { text-align: center; padding-bottom: 4px; }
.final-section .section-intro { font-size: 13px; line-height: 1.4; margin: 0 auto 10px; max-width: 35ch; }
.final-section .button { width: fit-content; margin-inline: auto; font-size: 13px; }
.final-top { width: 100%; }
.sections-dialog { width: min(310px, calc(100% - 40px)); padding: 16px; text-align: center; }
.sections-dialog .dialog-heading { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 42px; margin-bottom: 10px; gap: 0; }
.sections-dialog .dialog-heading > .icon-button { position: absolute; top: -5px; right: -5px; }
.sections-dialog .dialog-heading h2 { font-size: 22px; line-height: 1.1; }
.sections-dialog .section-links { margin-block: 8px 12px; }
.sections-dialog .section-links button { justify-content: center; text-align: center; min-height: 44px; padding: 10px 3px; font-size: 14px; font-weight: 700; }
.sections-dialog .section-links button > span:last-child { margin-left: 0; }
/* Conserva la posición aprobada del contenido al retirar el indicador superior. */
.section-scroll { margin-top: 17.5px; }
.guest-picker { justify-self: center; width: 145px; }
.guest-count-trigger { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 44px; padding: 7px 12px; border: 1px solid #98786580; border-radius: 13px; background: #fff8f04d; color: var(--ink); font: inherit; }
.guest-count-trigger .icon { width: 15px; height: 15px; transition: transform 180ms; }
.guest-count-trigger[aria-expanded="true"] { border-color: var(--rose); background: #fff6edb3; }
.guest-count-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.guest-count-options { position: fixed; z-index: 25; width: 170px; padding: 6px; color: var(--ink); background: #f8eee4; border: 1px solid #b68b83; border-radius: 15px; box-shadow: 0 8px 26px #513b3226; max-height: calc(100dvh - 16px); overflow-y: auto; }
.guest-count-option { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 10px; border-radius: 10px; font-size: 15px; line-height: 1.3; cursor: pointer; }
.guest-count-option[aria-selected="true"] { color: var(--rose); background: #843b5310; font-weight: 600; }
.guest-count-option.is-active { outline: 1px solid #843b5366; outline-offset: -1px; background: #843b531c; }
#resumen > h2 { font-size: clamp(23px, 6.5cqw, 30px); }
#confirmacion > .section-intro { max-width: none; font-size: 14px; line-height: 1.3; }
#rsvp-note { font-size: 11px; line-height: 1.3; }
@media (max-width: 330px) and (max-height: 600px) {
  #confirmacion > .section-intro { margin-block: 5px; font-size: 13px; line-height: 1.25; }
  #confirmacion .rsvp-form { margin-block: 4px; gap: 2px; }
  #confirmacion .rsvp-form label { font-size: 12px; }
  #confirmacion .rsvp-form label:not(:first-child) { margin-top: 0; }
  #confirmacion > .section-icon { margin-bottom: 2px; }
  #confirmacion #rsvp-note { font-size: 10.5px; line-height: 1.25; }
}

/* Adornos originales de portada; el recorte CSS elimina solo el aire transparente. */
.opening-screen.is-preparing { visibility: hidden; }
.opening-copy { grid-template-rows: 31% 1fr 17% 7%; }
.opening-heading { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.opening-heading .eyebrow { white-space: nowrap; font-size: clamp(8px,2.35cqw,11px); letter-spacing: .1em; }
.opening-copy h1 { margin: 1px 0; font-size: clamp(22px,6.7cqw,28px); line-height: 1.08; }
.opening-copy h1 span { font-size: 1.05em; margin-top: 4px; letter-spacing: -.025em; }
.opening-copy h1 .opening-surname { font-size: .58em; letter-spacing: .1em; margin-top: 4px; }
.opening-subtitle { font-size: clamp(9px,2.65cqw,12px); line-height: 1.3; text-transform: uppercase; white-space: nowrap; }
.opening-ornament { position: relative; width: 185px; height: 13px; flex: none; overflow: hidden; pointer-events: none; }
.opening-ornament img { position: absolute; width: 100%; height: auto; left: 0; top: 50%; transform: translateY(-50%); }
.opening-ornament-main { width: 200px; height: 29px; }
.opening-ornament-floral { width: 200px; height: 27px; }
.opening-ornament-heart { width: 185px; height: 18px; }
.opening-action { gap: 2px; }
.opening-action .small { margin: 0; font-size: clamp(9px,2.65cqw,12px); line-height: 1.3; text-transform: uppercase; }
.opening-asset-button { position: relative; width: min(290px,82cqw); height: min(77px,22cqw); min-height: 44px; padding: 0; border: 0; background: transparent; color: #fff1dc; border-radius: 40px; }
.opening-asset-button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.opening-button-label { position: relative; display: block; padding-right: 11%; font-size: clamp(10px,3cqw,14px); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 1px 2px #42232e80; }

/* Composición proporcional de la referencia, sobre el mismo sobre original. */
.opening-heading { --hero-top-offset-x: 0px; position: absolute; inset: 0; left: var(--hero-top-offset-x); width: 100%; height: 100%; margin: 0; display: block; }
.opening-heading > *, .opening-action > * { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
.opening-heading .opening-ornament-main { top: 1.5%; width: 56.5cqw; height: 5.2%; }
.opening-heading .eyebrow { top: 6.7%; font-size: 2.35cqw; line-height: 1.3; letter-spacing: .21em; font-weight: 500; }
.opening-heading > :nth-child(3) { top: 9.2%; width: 28cqw; height: 1.6%; }
.opening-copy h1 { top: 10.8%; width: 90%; font-size: 9.2cqw; line-height: 1; letter-spacing: -.035em; text-shadow: 0 .12cqw .18cqw #fff0dc88; }
.opening-copy h1 span { font-size: 1.4565em; line-height: 1; margin-top: .4cqw; letter-spacing: -.045em; white-space: nowrap; text-shadow: 0 .16cqw .2cqw #4c263526; }
.opening-copy h1 .opening-surname { font-size: .45em; line-height: 1.1; letter-spacing: .12em; margin-top: 1cqw; }
.opening-heading .opening-ornament-floral { top: 27.5%; width: 35cqw; height: 3.3%; }
.opening-heading .opening-subtitle { top: 30.8%; font: 400 4cqw/1.2 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; text-transform: none; }
.opening-heading > :nth-child(7) { top: 34%; width: 40cqw; height: 1.6%; }
.opening-ornament { overflow: visible; }
.opening-ornament img { filter: drop-shadow(0 0 12cqw rgb(var(--cover-halo) / .65)); }
.opening-action { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; display: block; transform: translateY(-2%); }
.opening-asset-button { top: 74.5%; width: 59cqw; height: 16cqw; min-height: 44px; display: grid; place-items: center; border-radius: 10cqw; }
.opening-asset-button img { object-fit: contain; filter: drop-shadow(0 0 11.2cqw rgb(var(--cover-halo) / .65)); }
.opening-button-label { position: absolute; left: 20%; right: 25%; top: 50%; transform: translateY(-50%); padding: 0; text-align: center; white-space: nowrap; font: 400 3.8cqw/1.1 Georgia, 'Times New Roman', serif; letter-spacing: 0; text-transform: none; text-shadow: 0 0 6cqw #e6b8a699; }
.opening-action .opening-ornament-heart { top: 84.9%; width: 28.5cqw; height: 2.2%; }
.opening-action .small { top: 87.4%; width: 90%; font: 400 3.2cqw/1.2 Georgia, 'Times New Roman', serif; text-transform: none; }
.opening-action > :last-child { top: 89.8%; width: 31.6cqw; height: 2.1%; }
/* Tono cálido del papel: menos capas de blur, sin el tinte rosado anterior. */
.opening-heading .eyebrow, .opening-copy h1, .opening-copy h1 span, .opening-heading .opening-subtitle, .opening-action .small { text-shadow: 0 0 8cqw rgb(var(--cover-halo) / .7), 0 0 20cqw rgb(var(--cover-halo) / .8), 0 0 10cqw rgb(var(--cover-halo) / .9); }

.opening-heading .eyebrow, .opening-heading .opening-surname { font-weight: 700; }

/* Referencia aprobada: capturas del 18/10/2026, sobre de 340 px.
   Conservar estas proporciones; no reutilizar esta escala para la portada. */
.invitation { --reading-unit: max(1px, .29411765cqw); }
.invitation .section { font-size: calc(15 * var(--reading-unit)); }
.invitation .eyebrow { font-size: calc(10 * var(--reading-unit)); }
.invitation h2 { font-size: calc(27 * var(--reading-unit)); }
.invitation .hero h2, .invitation .final-event { font-size: calc(32 * var(--reading-unit)); }
.invitation .hero .baby-name, .invitation .final-name { font-size: calc(35.7 * var(--reading-unit)); }
.invitation .hero-message, .invitation .section-intro { font-size: calc(15 * var(--reading-unit)); }
.invitation .hero > .small { font-size: calc(15 * var(--reading-unit)); }
.invitation .date-signature { width: min(calc(285 * var(--reading-unit)), 100%); }
.invitation .date-signature > span:not(.date-main) { font-size: calc(12 * var(--reading-unit)); }
.invitation .hero .date-main { font-size: calc(55 * var(--reading-unit)); }
.invitation .text-button { font-size: calc(14 * var(--reading-unit)); }
.invitation .family-section > .eyebrow { font-size: calc(11 * var(--reading-unit)); }
.invitation .family-intro { font-size: calc(20 * var(--reading-unit)); }
.invitation .family-details [data-text] { font-size: calc(19 * var(--reading-unit)); }
.invitation #galeria > .section-intro { font-size: calc(10 * var(--reading-unit)); }
.invitation .gallery .photo-tile figcaption, .invitation .gallery .photo-placeholder { font-size: calc(14 * var(--reading-unit)); }
.invitation #photo-position { font-size: calc(11 * var(--reading-unit)); }
.invitation .location-card h3 { font-size: calc(16 * var(--reading-unit)); text-transform: uppercase; }
.invitation .location-card .place-name { font-size: calc(14 * var(--reading-unit)); }
.invitation .location-card .small, .invitation .location-card-header .place-time,
.invitation #ubicacion .location-card .text-button { font-size: calc(12 * var(--reading-unit)); }
.invitation #confirmacion > .section-intro { font-size: calc(14 * var(--reading-unit)); }
.invitation .rsvp-form { width: min(calc(285 * var(--reading-unit)), 100%); }
.invitation .rsvp-form label, .invitation .rsvp-form .button, .invitation input::placeholder { font-size: calc(13 * var(--reading-unit)); }
.invitation .rsvp-form input { font-size: calc(16 * var(--reading-unit)); }
.invitation .guest-picker { width: calc(145 * var(--reading-unit)); }
.invitation #rsvp-note { font-size: calc(11 * var(--reading-unit)); }
.invitation .countdown-section > h2 { font-size: calc(30 * var(--reading-unit)); }
.invitation .countdown-date { font-size: calc(15 * var(--reading-unit)); font-weight: 700; }
.invitation .countdown span:first-child { font-size: calc(34 * var(--reading-unit)); }
.invitation .countdown span:last-child { font-size: calc(10 * var(--reading-unit)); }
.invitation .countdown-message { font-size: calc(19 * var(--reading-unit)); }
.invitation #resumen > h2 { font-size: calc(23 * var(--reading-unit)); }
.invitation .summary-list > div { grid-template-columns: calc(90 * var(--reading-unit)) minmax(0, 1fr); }
.invitation .summary-list dt { font-size: calc(12 * var(--reading-unit)); }
.invitation .summary-list dd, .invitation .summary-list dd > a { font-size: calc(13 * var(--reading-unit)); }
.invitation .summary-list .summary-info .small { font-size: calc(11 * var(--reading-unit)); }
.invitation .final-top h2 { font-size: calc(27 * var(--reading-unit)); }
.invitation .final-section .section-intro { font-size: calc(13 * var(--reading-unit)); }
.invitation .section-scroll { margin-top: calc(17.5 * var(--reading-unit)); }
.invitation .section > .eyebrow { margin-bottom: calc(5 * var(--reading-unit)); }
.invitation .text-button, .invitation .rsvp-form .button, .invitation .guest-count-trigger,
.invitation .rsvp-form input, .invitation .summary-list dd > a { min-height: calc(44 * var(--reading-unit)); }
.invitation .section-intro { margin-block: calc(8 * var(--reading-unit)) calc(10 * var(--reading-unit)); }
.invitation #ubicacion { padding-top: calc(30 * var(--reading-unit)); gap: calc(7 * var(--reading-unit)); }
.invitation #ubicacion > .eyebrow { margin-bottom: 0; }
.invitation #ubicacion .location-card { padding: calc(10 * var(--reading-unit)) calc(12 * var(--reading-unit)) calc(8 * var(--reading-unit)); }
.invitation #ubicacion .location-card + .location-card { margin-top: calc(10 * var(--reading-unit)); }
.invitation .location-card-header .place-time { max-width: calc(115 * var(--reading-unit)); }
.invitation .location-card .place-name { margin-top: calc(7 * var(--reading-unit)); }
.invitation #ubicacion .location-card .text-button { margin-top: calc(5 * var(--reading-unit)); padding-inline: calc(12 * var(--reading-unit)); }
.invitation .summary-list { margin-top: calc(9 * var(--reading-unit)); gap: calc(6 * var(--reading-unit)); }
.invitation .summary-list > div { padding: calc(6 * var(--reading-unit)) calc(8 * var(--reading-unit)); }
.invitation .summary-list dt .icon { width: calc(16 * var(--reading-unit)); height: calc(16 * var(--reading-unit)); }
.invitation .summary-list dd > a::before { inset-block: calc(6 * var(--reading-unit)); }
.invitation .final-section { gap: calc(22 * var(--reading-unit)); }
.invitation .final-section .section-intro { margin: 0 auto calc(10 * var(--reading-unit)); }
/* Separaciones por pantalla, tomadas de las mismas capturas de referencia. */
.invitation .hero { padding-top: calc(20 * var(--reading-unit)); }
.invitation .hero .baby-name { margin-top: calc(5 * var(--reading-unit)); }
.invitation .hero .baby-surname { margin-top: calc(5 * var(--reading-unit)); }
.invitation .hero .fine-rule { margin-block: calc(10 * var(--reading-unit)) calc(9 * var(--reading-unit)); }
.invitation .hero .date-signature { margin-block: calc(11 * var(--reading-unit)) calc(5 * var(--reading-unit)); }
.invitation .hero [data-text="dateMonthYear"] { letter-spacing: .04em; }
.invitation .hero .text-button { margin-top: calc(8 * var(--reading-unit)); }
.invitation .family-details { margin-top: calc(12 * var(--reading-unit)); gap: calc(14 * var(--reading-unit)); }
.invitation .family-details > div { padding-block: calc(2 * var(--reading-unit)); }
.invitation .family-details > div + div { padding-top: calc(17 * var(--reading-unit)); }
.invitation .family-intro { margin-bottom: calc(7 * var(--reading-unit)); }
.invitation .family-details [data-text] { margin-block: calc(3 * var(--reading-unit)); }
.invitation #galeria { padding-top: calc(31 * var(--reading-unit)); }
.invitation #galeria > .section-intro { margin-block: calc(3 * var(--reading-unit)) calc(6 * var(--reading-unit)); }
.invitation .gallery .photo-tile figcaption { padding-top: calc(5 * var(--reading-unit)); }
.invitation #confirmacion > .section-icon { width: calc(34 * var(--reading-unit)); height: calc(34 * var(--reading-unit)); margin-bottom: 0; }
.invitation #confirmacion > .section-intro { margin-block: calc(6 * var(--reading-unit)) calc(8 * var(--reading-unit)); }
.invitation .rsvp-form { margin-block: calc(6 * var(--reading-unit)); gap: calc(3 * var(--reading-unit)); }
.invitation .rsvp-form .button { margin-top: calc(8 * var(--reading-unit)); }
.invitation .countdown-section { padding-top: calc(35 * var(--reading-unit)); }
.invitation .countdown-section > .section-intro { margin-top: calc(7 * var(--reading-unit)); }
.invitation .countdown-date { margin-top: calc(7 * var(--reading-unit)); }
.invitation .countdown-section .countdown { margin-top: calc(10 * var(--reading-unit)); }
.invitation .countdown > div { padding-block: calc(12 * var(--reading-unit)) calc(9 * var(--reading-unit)); }
.invitation .countdown span:last-child { margin-top: calc(6 * var(--reading-unit)); }
.invitation .countdown-section .text-button { margin-top: calc(2 * var(--reading-unit)); }
.invitation #resumen { position: relative; top: calc(-2 * var(--reading-unit)); padding-top: calc(30 * var(--reading-unit)); }
.invitation .final-top { gap: 0; }
.invitation .final-top h2 { margin-top: calc(3 * var(--reading-unit)); }
.invitation .final-identity { margin-top: calc(27 * var(--reading-unit)); }
.invitation .final-name { margin-top: calc(6 * var(--reading-unit)); }
.invitation .final-section { gap: calc(27 * var(--reading-unit)); }
@media (orientation: landscape) and (max-height: 600px) {
  /* El panel de escritorio sigue mostrando un sobre vertical. */
  .invitation .countdown { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Los halos comparten una capa inferior; ninguna sombra cubre las letras. */
.opening-screen { isolation: isolate; }
.opening-foreground, .opening-shadow-layer { display: block; }
.opening-foreground { position: relative; z-index: 1; }
.opening-shadow-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; }
.opening-shadow-layer .opening-item, .opening-shadow-layer .opening-item span { color: transparent; }
.opening-foreground .opening-item, .opening-foreground .opening-item span { text-shadow: none; }
.opening-foreground img { filter: none; }
.opening-button-label { font-weight: 700; }
.opening-shadow-layer .opening-button-label { text-shadow: 0 0 6cqw rgb(var(--cover-halo) / .7); }
.opening-shadow-layer .opening-subtitle::before { content: ""; position: absolute; inset: -2cqw 0; z-index: -1; background: radial-gradient(ellipse, rgb(var(--cover-halo) / .9) 0%, rgb(var(--cover-halo) / .65) 45%, transparent 75%); }
.utility-controls { position: fixed; z-index: 7; top: max(8px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 6px; }
.utility-controls .icon-button { width: 44px; height: 44px; color: var(--rose); background: #f6ede4ed; border-color: #843b5370; }
.utility-controls .icon { width: 20px; height: 20px; }
.utility-controls [aria-disabled="true"] { opacity: .65; }
.gallery-types { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.gallery-types button { position: relative; isolation: isolate; min-width: 44px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 24px; background: none; color: var(--rose); font-size: calc(13 * var(--reading-unit)); font-weight: 600; line-height: 1.2; }
/* Contorno compacto de 32 px dentro de una zona táctil de 44 px. */
.gallery-types button::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border: 1px solid #843b5366; border-radius: 20px; background: #fff6ed80; }
.gallery-types button[aria-pressed="true"] { color: #fff8f1; }
.gallery-types button[aria-pressed="true"]::before { background: var(--rose); border-color: var(--rose); }
.gallery-viewer .gallery-controls { bottom: 0; }
#lightbox-caption:empty { display: none; }
.gallery .photo-button img { object-fit: contain; }
.video-button { position: relative; }
.video-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #fff6edb3; border-radius: 50%; background: #843b53d9; color: #fff8f1; pointer-events: none; }
.video-play .icon { width: 26px; height: 26px; }
.video-dialog { width: min(640px, calc(100% - 24px)); padding: 12px; }
.video-dialog video { display: block; width: 100%; max-height: 68dvh; object-fit: contain; border-radius: 8px; background: #2f2620; }
.video-dialog > p { margin-top: 10px; text-align: center; }
.video-dialog .photo-close { z-index: 1; }
@media (max-width: 600px) and (orientation: portrait) {
  /* El fondo llega al borde disponible, también al cambiar las barras del navegador. */
  html, body { width: 100%; height: 100%; overflow: hidden; }
  .experience { position: fixed; inset: 0; height: auto; min-height: 0; }
  .envelope { width: 100%; height: 100%; aspect-ratio: auto; }
  .envelope-video, .envelope-poster { object-fit: cover; }
  .bottom-nav { left: 50%; bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); }
}
@media (max-width: 600px) and (orientation: portrait) and (max-height: 740px) {
  .utility-controls:not(.has-navigation) { top: max(0px, env(safe-area-inset-top)); }
  .utility-controls:not(.has-navigation) .icon-button { position: relative; isolation: isolate; background: none; border: 0; }
  .utility-controls:not(.has-navigation) .icon-button::before { content: ""; position: absolute; inset: 6px; z-index: -1; border: 1px solid #843b5370; border-radius: 50%; background: #f6ede4ed; }
}
@media (max-width: 330px) and (orientation: portrait) {
  .invitation #rsvp-note { width: calc(100% - 48px); margin-right: 48px; }
}

/* Vista ligera del sobre mientras llega la imagen prioritaria. */
.envelope { background: #e5d2c1 url(data:image/webp;base64,UklGRqYAAABXRUJQVlA4IJoAAADwBACdASoSACAAPsFQoUqnpKMhsAgA8BgJZQCw7CG7xh9CuVtTRYmHZ8vT7ACTpngA/up05+mFjv/lPC6SVdcVTByIMTFyZAQCgl7ziyDeG1kzw2Lva4cGxCC2UAxjXnJLDfGwStQhXGClgNjP43oWjIisoV4w7/UmaumOTKts97EPmVwZMAozQBqG4c/9bmmpjJnGl+LQkAAA) center / cover no-repeat; }