html[data-xv-theme="bella-y-bestia"] {
    --night: #0b1428;
    --blue: #142641;
    --champagne: #f0d7a4;
    --paper: #f8f7f2;
    --rose: #842c40;
    --rule: #bd955e;
    --color-primary: var(--rose);
    --color-secondary: var(--champagne);
    --color-text: var(--paper);
    --page-width: 520px;
    --bella-damask: url('./images/tema/damasco-azul.webp');
    scrollbar-gutter: auto;
    scrollbar-width: none;
    background: var(--night);
}

body {
    background: radial-gradient(ellipse at top, var(--blue), var(--night) 68%);
    font-family: system-ui, sans-serif;
    color: var(--color-text);
}

html[data-bella-personalized] #main-content [hidden] { display: none !important; }

button, a, [role="button"], input[type="range"] {
    -webkit-tap-highlight-color: transparent;
}

:where(button, a, [role="button"], input):focus-visible {
    outline: 2px solid var(--rule);
    outline-offset: 4px;
}

#interactive-seal {
    inset: 0 auto auto 50%;
    width: min(100%, var(--page-width));
    height: 100dvh;
    transform: translateX(-50%);
    isolation: isolate;
    perspective: 1000px;
    background: var(--night);
    box-shadow: 0 0 72px #050812;
}

#interactive-seal::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 7px;
    border: 1px solid #f0d7a478;
    pointer-events: none;
    transition: opacity .4s ease;
}

#interactive-seal.opening::after { opacity: 0; }

#left-door, #right-door {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    transform: none;
    filter: none;
    z-index: 1;
    pointer-events: none;
    backface-visibility: hidden;
    will-change: transform;
}

#left-door { left: 0; transform-origin: left center; }
#right-door { left: 50%; transform-origin: right center; }
#left-door.slide-out-left-animation { animation: bella-open-left 1s cubic-bezier(.52,.02,.18,1) both; }
#right-door.slide-out-right-animation { animation: bella-open-right 1s cubic-bezier(.52,.02,.18,1) both; }
@keyframes bella-open-left { to { transform: translateX(-85%) rotateY(-65deg); opacity: .2; } }
@keyframes bella-open-right { to { transform: translateX(85%) rotateY(65deg); opacity: .2; } }

#center-wrapper {
    top: 54%;
    left: 50%;
    z-index: 4;
    border-radius: 50%;
    cursor: pointer;
}

#center-wrapper img {
    display: block;
    width: clamp(106px, 31vw, 148px);
    height: auto;
    filter: drop-shadow(0 4px 8px #03050c);
}

#open-text {
    cursor: pointer;
    min-height: 44px;
    font-weight: 600;
}

.opening #center-wrapper, .opening #open-text { animation-duration: .42s; }

#main-content {
    width: min(100%, var(--page-width));
    margin-inline: auto;
    background-color: var(--night) !important;
    color: var(--paper);
    box-shadow: 0 0 60px #050812aa;
}

#main-content > nav {
    left: max(0px, calc((100% - var(--page-width)) / 2));
    right: max(0px, calc((100% - var(--page-width)) / 2));
    background-color: #0b1428f5 !important;
    border-bottom: 1px solid var(--rule);
    padding: 7px 8px;
}

#main-content > nav .container {
    justify-content: space-evenly;
    gap: 4px;
}

#main-content > nav button {
    margin: 0;
    padding: 5px 7px;
    min-height: 31px;
    color: var(--champagne) !important;
    font-size: clamp(.78rem, 3.7vw, .95rem);
    letter-spacing: .055em;
}

#main-content > main {
    padding-top: 0;
    background: var(--night) var(--bella-damask) center top / 100% auto repeat-y;
}
#main-content section { scroll-margin-top: 46px; }

.bella-opening-chapter {
    background: var(--night) var(--bella-damask) center / 100% 100% no-repeat;
}

#hero-section {
    --hero-top-space: 48px;
    --hero-bottom-space: clamp(62px, 8svh, 76px);
    --hero-countdown-height: clamp(52px, 8svh, 74px);
    --hero-name-size: clamp(3.3rem, min(17vw, 8.6svh), 5rem);
    display: grid;
    grid-template-rows: auto minmax(0, calc(min(100vw, var(--page-width)) * 463 / 371)) auto;
    align-content: start;
    padding-top: var(--hero-top-space);
    padding-bottom: var(--hero-bottom-space);
    /* Reserve room for the browser bars inside the 100vh cover. */
    padding-bottom: calc(var(--hero-bottom-space) + 100vh - 100svh);
}

.bella-hero-content {
    position: relative;
    z-index: 10;
    display: grid;
    justify-items: center;
    gap: 8px;
    /* Only the name overlaps the faded base of the illustration. */
    margin-top: calc(-6px - var(--hero-name-size));
    text-align: center;
}

.bella-hero-art {
    position: relative;
    z-index: 2;
    min-height: 0;
}

.bella-hero-art > svg {
    display: block;
    width: 100%;
    height: 100%;
    mask-image: linear-gradient(#000 84%, #000c 92%, transparent);
}

.bella-hero-corner-rose,
.bella-hero-corner-gold {
    position: absolute;
    top: var(--hero-top-space);
    z-index: 3;
    height: auto;
    pointer-events: none;
}

.bella-hero-corner-rose {
    left: 0;
    width: min(46%, 188px);
}

.bella-hero-corner-gold {
    right: 0;
    width: 100%;
    transform: scaleX(-1);
    filter: url(#bella-gold-cutout);
    mask-image: linear-gradient(90deg, #000 18%, transparent 24%);
}

.bella-hero-closing-roses,
.bella-hero-closing-detail {
    position: absolute;
    z-index: 4;
    height: auto;
    pointer-events: none;
}

.bella-hero-closing-roses {
    inset: auto 0 0;
    width: 100%;
    filter: url(#bella-floral-cutout);
    mask-image: linear-gradient(90deg, #000 24%, transparent 35% 65%, #000 77%);
}

.bella-hero-closing-detail {
    bottom: calc(var(--hero-bottom-space) - 20px);
    left: 50%;
    width: clamp(80px, 25vw, 105px);
    transform: translateX(-50%);
    filter: url(#bella-gold-cutout);
}

#hero-section[data-xv-hero-style] #xv-hero-title {
    position: relative;
    z-index: 5;
    padding-block: clamp(18px, 5.5vw, 24px) 2px;
    padding-inline-start: .17em;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1rem, 5.25vw, 1.65rem);
    letter-spacing: .17em;
    color: var(--champagne) !important;
    text-shadow: 0 2px 8px var(--night);
}

#hero-section[data-xv-hero-style] #xv-hero-name {
    font-size: var(--hero-name-size);
    margin: 0;
    transform: none;
    color: var(--champagne) !important;
    text-shadow: 0 3px 15px var(--night);
}

#hero-section[data-xv-hero-style] #xv-hero-date-block {
    color: var(--champagne) !important;
    text-shadow: 0 2px 8px #03050c;
}

#xv-hero-date-block p {
    font: 700 clamp(.78rem, 4vw, 1rem)/1.4 'Cormorant Garamond', Georgia, serif;
    letter-spacing: .12em;
}

#xv-hero-date-block > div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-block: 3px;
}
#xv-hero-date-block > div > div { border-color: #f0d7a480; }
#xv-hero-date-block .bella-date-number {
    font: 700 clamp(1.125rem, 5vw, 1.35rem)/1 'Cormorant Garamond', Georgia, serif;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: .04em;
}
#xv-hero-date-block .bella-date-day { font-size: clamp(1.6rem, 8vw, 2rem); }
#xv-hero-countdown-wrap { width: min(calc(100% - 32px), 365px); }
#countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(4px, 2vw, 10px);
    margin: 0;
}
#countdown > div { width: 100%; height: var(--hero-countdown-height); }
#countdown > div > span:first-child { font-size: clamp(1.32rem, 6.8vw, 1.9rem); line-height: 1.1; }
#countdown > div > span:last-child { font-size: clamp(.54rem, 2.6vw, .7rem); line-height: 1.2; }
.xv-scroll-cue span { border-color: var(--champagne); }
.sparkle {
    max-width: 4px;
    max-height: 4px;
    background: var(--champagne);
    box-shadow: 0 0 4px var(--champagne);
}

#main-content section:not(#hero-section) {
    background: transparent;
}

#main-content section > .container { max-width: 450px; padding-inline: clamp(18px, 6vw, 31px); }
#main-content section:not(#hero-section) h2 {
    color: var(--champagne);
    font-family: 'Great Vibes', cursive;
    font-size: clamp(2.65rem, 12.5vw, 3.55rem);
    line-height: 1.1;
    font-weight: 400;
}

#main-content section:not(#hero-section) h3 { line-height: 1.1; }
#main-content section p { overflow-wrap: anywhere; }
#main-content section#hashtag-section h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2rem, 10vw, 2.8rem);
    font-weight: 600;
}

#event-info-section > .absolute.inset-0 { background: transparent !important; }
#main-content section#parents-section {
    padding-top: clamp(50px, 15vw, 76px);
}
#parents-section :is(h3, #parents-title) { font-size: clamp(2.3rem, 11vw, 3.15rem); margin-block: .3em; }
#parents-section [id^="padrino-"] { margin-block: .4rem; }
#parents-section [id^="padrino-"] p { margin-block: .12rem; }
.bella-family-frame {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    filter: url(#bella-floral-cutout);
    pointer-events: none;
}

/* Keep the painted corners of the proposal clear of its sample text. */
.bella-family-frame--top {
    top: 0;
    clip-path: inset(0 0 0 24%);
    mask-image:
        linear-gradient(#000 31%, transparent 36%),
        linear-gradient(90deg, transparent 74%, #000 81%),
        linear-gradient(#000 90%, transparent);
    mask-composite: add, intersect;
}

.bella-family-joining-gold {
    top: 4px;
    transform: scaleY(-1);
    mask-image: linear-gradient(90deg, #000 24%, transparent 35%);
}

.bella-family-frame--bottom {
    bottom: 0;
    mask-image:
        linear-gradient(to top, #000 10%, transparent 18%),
        linear-gradient(90deg, #000 20%, transparent 27% 74%, #000 84%),
        linear-gradient(to top, #000 86%, transparent);
    mask-composite: add, intersect;
}

.bella-family-divider {
    width: 121px;
    height: auto;
    margin: 9px auto;
    filter: url(#bella-gold-cutout);
}

.bella-invitation-message { display: grid; justify-items: center; gap: 16px; }
.bella-cameo {
    display: block;
    width: clamp(176px, 64vw, 270px);
    height: auto;
    filter: drop-shadow(0 8px 16px #03050c80);
}
#parents-description { max-width: 28ch; margin: 0; }

#chambelan-section { gap: clamp(15px, 6vw, 30px); margin-top: 34px; }
#parents-section #chambelan-section h3 { font-size: clamp(1.9rem, 10vw, 2.75rem); margin: 0; }
#chambelan-section img {
    width: auto;
    height: clamp(215px, 69vw, 268px);
    object-fit: contain;
    flex: 0 0 auto;
}

.section-ornament {
    width: clamp(88px, 32vw, 150px);
    opacity: .68;
}

.ornament-top-left { top: 11px; left: -36px; transform: rotate(-41deg); }
.ornament-top-right { top: 11px; right: -36px; transform: rotate(41deg); }
.ornament-bottom-left { bottom: 11px; left: -36px; transform: rotate(41deg); }
.ornament-bottom-right { bottom: 11px; right: -36px; transform: rotate(-41deg); }
.location-horizontal-ornament { width: 135px; bottom: 18px; }
.location-card-flower { width: 92px; top: -10px; }
.location-card-flower-left { left: -17px; transform: rotate(-27deg); }
.location-card-flower-right { right: -17px; transform: rotate(27deg); }

#main-content :is(#ceremony-container, #reception-container) {
    border: 1px solid var(--rule);
    background: #0b1428d9;
    border-radius: 6px;
    box-shadow: 0 6px 18px #05081285, inset 0 0 0 3px var(--night);
}

#event-info-section :is(#ceremony-container, #reception-container) h3,
#gift-registry-section #gift-bank-container h3,
#dress-code :is(#dress-men-card, #dress-women-card) h3 { color: var(--champagne) !important; }

#event-info-section :is(#ceremony-container, #reception-container) { flex-direction: column; }
#event-info-section :is(#ceremony-container, #reception-container) > img {
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 5;
    object-fit: cover;
    border-bottom: 1px solid var(--rule);
}
#event-info-section :is(#ceremony-container, #reception-container) > div { width: 100%; }

#gallery-section {
    border-block: 1px solid var(--rule);
}

#itinerary-section .container > div > .absolute { background: #bd955e99; width: 1px; }
#itinerary-section [id^="itinerary-"] > .absolute {
    background: var(--rose);
    border-color: var(--champagne);
    border-width: 2px;
    width: 12px;
    height: 12px;
}

.xv-demo-icon { font-style: normal; }
:is(.xv-itinerary-icon, .bella-gift-icon) {
    width: clamp(68px, 20vw, 82px);
    height: clamp(68px, 20vw, 82px);
    object-fit: contain;
}
.xv-itinerary-icon { filter: url(#bella-gold-cutout); }
#itinerary-section [id^="itinerary-"] > .absolute + div { width: calc(50% - 14px); }

#gift-registry-section img, #dress-code :is(#dress-men-card, #dress-women-card) img { object-fit: contain; margin-inline: auto; }
#gift-registry-section .grid { grid-template-columns: 1fr; gap: 1.75rem; }
#dress-code :is(#dress-men-card, #dress-women-card) {
    border: 1px solid var(--rule);
    background: #0b1428d9;
    border-radius: 6px;
    box-shadow: 0 6px 18px #05081285, inset 0 0 0 3px var(--night);
}
#dress-code :is(#dress-men-card, #dress-women-card) > div:first-child { width: 104px; height: 104px; }
#dress-code :is(#dress-men-card, #dress-women-card) img { width: 100%; height: 100%; }
#dress-code .xv-floral-content > .flex { flex-direction: column; gap: 1rem; }
#kids-section { padding-block: 2.2rem; }

#itinerary-section { --bella-section-art: url('./images/tema/esquinas-itinerario.webp'); }
#gift-registry-section { --bella-section-art: url('./images/tema/esquinas-regalos.webp'); }
#dress-code { --bella-section-art: url('./images/tema/esquinas-vestimenta.webp'); }

/* Anchor the painted corners without stretching the artwork as the content grows. */
.bella-floral-transition::before,
.bella-floral-transition::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: min(47vw, 244px, 50%);
    background: var(--bella-section-art) center top / 100% auto no-repeat;
    pointer-events: none;
}

.bella-floral-transition::before {
    top: 0;
    mask-image: linear-gradient(#000 64%, transparent);
}

.bella-floral-transition::after {
    bottom: 0;
    background-position: center bottom;
    mask-image: linear-gradient(to top, #000 64%, transparent);
}

/* Alternate the roses across the boundaries with the adjoining sections. */
#gift-registry-section::before,
#gift-registry-section::after { transform: scaleX(-1); }

.bella-framed-section::before {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid #bd955e65;
    pointer-events: none;
}

.bella-section-edge {
    position: absolute;
    inset-inline: 10px;
    width: calc(100% - 20px);
    height: auto;
    pointer-events: none;
}

.bella-section-edge--top { top: 10px; }
.bella-section-edge--bottom { bottom: 9px; }

#story-section {
    clip-path: none !important;
    min-height: 0;
    display: flex;
    align-items: end;
    /* The title overlaps the lower flourish of the cameo. */
    padding: calc(1.02 * min(100vw, var(--page-width)) - 2.75rem) 0 0;
    border-block: 1px solid var(--rule);
}

#story-music-background {
    animation: none;
    background-position: center top !important;
    background-size: 100% auto;
    mask-image: linear-gradient(#000 61%, transparent 96%);
}
#story-section > .container { min-height: 0; padding: 2rem 1.25rem 2.55rem; }
#story-section > .container > div { margin: 0; width: min(100%, 300px); }
#audio-slider { accent-color: var(--champagne); }
#play-pause-btn, #audio-toggle { border: 1px solid var(--champagne); }
#audio-toggle {
    background: var(--night) !important;
    color: var(--champagne);
    translate: 0 var(--bella-audio-offset, 0px);
    transition-property: background-color, color;
}
#audio-toggle:focus-visible { outline-color: var(--champagne); }

#gallery-section { --color-primary: var(--champagne); padding-bottom: 4rem; }
#gallery-section[hidden] { display: none; }
.gallery-top-ornament { width: 125px; top: 61px; }
.gallery-bottom-ornament { width: 137px; bottom: 10px; opacity: 1; transform: none; }
#gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .62rem; padding-top: 3.3rem; }
#gallery-grid > button, #gallery-grid > div {
    border: 1px solid #bd955ead;
    padding: 3px;
    border-radius: 55% 55% 3px 3px / 20% 20% 3px 3px;
    overflow: hidden;
    background: #18243a;
}
#gallery-grid img { border-radius: inherit; aspect-ratio: 3 / 4; height: auto; }
#gallery-modal, #bank-modal, #save-date-modal { z-index: 100; background: #080d18e8; }
#gallery-modal button, #bank-modal button, #save-date-modal button { min-width: 44px; min-height: 44px; }
#save-date-modal > div, #bank-modal > div {
    background: var(--blue);
    color: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: inset 0 0 0 3px var(--night), 0 18px 46px #050812aa;
}

#save-date-modal h3, #bank-modal h3 {
    color: var(--champagne) !important;
    font: 400 2.65rem/1.12 'Great Vibes', cursive;
}

#save-date-modal p, #bank-modal p > span:first-child { color: var(--paper) !important; }
#save-date-modal button, #bank-modal button { color: var(--champagne); }
#save-date-modal button:hover, #bank-modal button:hover { color: var(--paper); }

#event-info-section :is(#ceremony-map-link, #reception-map-link), #rsvp-demo-button {
    background-color: var(--champagne) !important;
    color: var(--night) !important;
    border: 1px solid var(--champagne);
}
#event-info-section :is(#ceremony-map-link, #reception-map-link) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
}

#event-info-section :is(#ceremony-map-link, #reception-map-link):hover, #rsvp-demo-button:hover {
    background-color: var(--night) !important;
    color: var(--champagne) !important;
}

#gift-registry-section :is(a, button), #save-date-modal a {
    background-color: var(--night) !important;
    color: var(--champagne) !important;
    border: 1px solid var(--rule);
    min-height: 44px;
}

#gift-registry-section :is(a, button):hover, #save-date-modal a:hover {
    background-color: var(--champagne) !important;
    color: var(--night) !important;
}

#hashtag-section { padding-block: 3.25rem; border-bottom: 1px solid #bd955e8a; }
#hashtag-section h2 { overflow-wrap: anywhere; }
.bella-camera { display: block; width: 76px; height: auto; }

#main-content section#rsvp-section {
    padding-top: 4.5rem;
    background: linear-gradient(#0a1327de, #0a1327ed 42%, #0a1327d9),
        url('./images/tema/salon.webp') center / cover no-repeat;
}

#rsvp-section #vibefly-demo-rsvp { width: 100%; margin: 0; }
#rsvp-section button, #gift-registry-section button { min-height: 44px; }
#rsvp-section .pulse-breathing {
    width: 137px;
    height: 137px;
    border: 1px solid var(--rule);
    box-shadow: 0 0 0 3px var(--night), 0 0 0 4px #bd955e70, inset 0 0 0 5px var(--night), inset 0 0 0 6px var(--rule);
    background-color: var(--blue) !important;
    color: var(--champagne) !important;
    animation: none;
}

#rsvp-section .pulse-breathing:hover { background-color: var(--night) !important; }

#main-content footer {
    padding: 5rem 0;
    border-top: 1px solid var(--rule);
}
#main-content footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bella-footer-image, url('./images/tema/salon.webp')) center / cover no-repeat;
}
#main-content footer > .absolute {
    background: linear-gradient(180deg, #0b14288c, #060b147a);
}
#main-content footer h2 { color: var(--champagne); font-size: clamp(2.65rem, 12vw, 3.55rem); }
#main-content footer p { text-shadow: 0 2px 5px #050812; }
#main-content footer .font-great-vibes { color: var(--champagne); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .observe-me { opacity: 1; transform: none; }
    #sparkles-container { display: none; }
}