@charset "UTF-8";
:root {
    --ivory:#faf7f2;
    --paper:#fffdf9;
    --ink:#514b46;
    --muted:#6e675f;
    --pink:#915769;
    --blue:#4c6f83;
    --gold:#ae9060;
    --line:#ddd3c5;
    --serif:Georgia,"Times New Roman",serif;
    --sans:"Segoe UI",Arial,sans-serif;
}

*,:before,:after {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:5rem;
}

body {
    margin:0;
    background:var(--ivory);
    color:var(--ink);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

body:has(.welcome:not([hidden])) {
    overflow:hidden;
}

[hidden] {
    display:none!important;
}

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

button {
    font:inherit;
    cursor:pointer;
}

a {
    color:inherit;
}

button:focus-visible,a:focus-visible {
    outline:2px solid var(--blue);
    outline-offset:6px;
}

button:disabled {
    cursor:wait;
}

h1,h2,h3,p {
    margin:0;
}

h1,h2,h3 {
    font-family:var(--serif);
    font-weight:400;
    line-height:1.18;
}

h2 {
    font-size:clamp(2rem,5vw,3.35rem);
    letter-spacing:-.045em;
    text-wrap:balance;
}

h2 em {
    font-weight:400;
}

svg {
    width:24px;
    height:24px;
}

.icon-library {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.eyebrow {
    text-transform:uppercase;
    font-size:.68rem;
    font-weight:500;
    letter-spacing:.22em;
    line-height:1.8;
}

.signature {
    font-family:var(--serif);
    font-size:clamp(2.3rem,6vw,3.5rem);
    font-style:italic;
    letter-spacing:-.045em;
    line-height:1.3;
}

.date-stamp {
    font-size:.7rem;
    letter-spacing:.3em;
    margin-top:1rem;
}

.fine-rule {
    display:block;
    width:42px;
    height:1px;
    background:var(--line);
    margin:1.2rem auto;
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:1.6rem;
    min-height:52px;
    padding:1rem 1.5rem;
    border:1px solid transparent;
    border-radius:3px;
    text-transform:uppercase;
    text-decoration:none;
    font-size:.7rem;
    letter-spacing:.17em;
    font-weight:600;
    line-height:1.5;
    transition:background .25s,transform .25s,box-shadow .25s;
}

.button span[aria-hidden] {
    font-size:1.1rem;
    line-height:1;
}

.button:hover {
    transform:translateY(-2px);
}

.button-primary {
    background:var(--ink);
    color:var(--paper);
    box-shadow:0 5px 15px #514b460a;
}

.button-primary:hover {
    background:#37332f;
}

.button-outline {
    background:transparent;
    border-color:#bfb1a0;
    color:var(--ink);
}

.button-outline:hover {
    background:#f2ece3;
}

.section-space {
    position:relative;
    padding:5rem 1.4rem;
    text-align:center;
}

.section-space>* {
    position:relative;
    z-index:2;
}

.section-copy {
    max-width:420px;
    margin:1.4rem auto 0;
    font-size:.9rem;
    color:var(--muted);
    line-height:1.95;
    text-wrap:pretty;
}

.small-note {
    font-size:.69rem;
    line-height:1.8;
    color:var(--muted);
    max-width:370px;
    margin:.8rem auto 0;
}

.section-icon {
    width:26px;
    height:26px;
    fill:none;
    stroke:var(--gold);
    stroke-width:1;
    margin-bottom:1.3rem;
}

.heart-icon {
    stroke-width:1.15;
}

.section-heading>.eyebrow,.section-space .eyebrow+h2 {
    margin-bottom:1.15rem;
}

.skip-link {
    position:fixed;
    top:10px;
    left:10px;
    transform:translateY(-200%);
    z-index:50;
    padding:10px;
    background:white;
}

.skip-link:focus {
    transform:none;
}

/* Tarjeta de entrada; el audio espera la interacción del usuario. */
.welcome {
    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:safe center;
    min-height:100svh;
    height:100dvh;
    overflow:auto;
    padding:1.5rem 1.2rem;
    text-align:center;
    background:radial-gradient(ellipse at 15% 25%,#f0dfe357,transparent 55%),radial-gradient(ellipse at 90% 75%,#dce9f370,transparent 55%),var(--ivory);
    transition:opacity .45s ease .15s,transform .6s ease;
}

.welcome-halo {
    position:absolute;
    width:min(85vw,660px);
    aspect-ratio:1;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border:1px solid #bba47729;
    border-radius:50%;
    z-index:-1;
}

.welcome-halo:after {
    content:"";
    position:absolute;
    inset:20px;
    border:1px solid #bba4771a;
    border-radius:50%;
}

.welcome-eyebrow {
    margin-bottom:1.5rem;
    color:var(--muted);
}

.envelope {
    position:relative;
    width:min(100%,440px);
    padding:0 12px 42px;
    filter:drop-shadow(0 14px 22px #695a4410);
    flex-shrink:0;
    transition:transform .6s ease;
}

.envelope-card {
    position:relative;
    z-index:1;
    background:var(--paper);
    padding:1.25rem 1rem 6.75rem;
    border:1px solid #e4dace;
    outline:1px solid #e4dace;
    outline-offset:-10px;
}

.tiny-star {
    font-size:1.65rem;
    color:var(--gold);
    line-height:1;
    display:block;
    margin-bottom:.7rem;
}

.envelope-card .eyebrow {
    font-size:.6rem;
    letter-spacing:.15em;
}

.envelope-card h1 {
    font-size:clamp(1.4rem,4.8vw,2rem);
    line-height:1.4;
    margin:.9rem 0 .8rem;
    letter-spacing:-.025em;
}

.envelope-card .signature {
    font-size:clamp(2rem,6vw,2.8rem);
}

.envelope-card .date-stamp {
    font-size:.6rem;
    margin-top:.6rem;
}

.section-copy,
.hero-description,
.closing-quote,
.closing-thanks {
    white-space: pre-line;
}

.envelope-card .fine-rule {
    margin:.65rem auto;
}

.welcome-recipient {
    margin:0 auto 1rem;
    max-width:100%;
    color:var(--muted);
}

.recipient-label {
    font-size:.67rem;
    letter-spacing:.07em;
}

.recipient-name {
    max-width:26ch;
    margin:.25rem auto 0;
    font:1.15rem/1.35 var(--serif);
    overflow-wrap:anywhere;
    text-wrap:balance;
}

.envelope-fold {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:145px;
    z-index:2;
    background:linear-gradient(148deg,#eee5d9 49.5%,transparent 50%) left/50.2% 100% no-repeat,linear-gradient(-148deg,#f0e8de 49.5%,transparent 50%) right/50.2% 100% no-repeat;
    filter:drop-shadow(0 -1px 0 #ddcdbc);
}

.envelope-fold:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(165deg,#f6efe4,#e9dfd1);
    clip-path:polygon(0 100%,0 92%,50% 28%,100% 92%,100% 100%);
}

.wax-seal {
    position:absolute;
    bottom:48px;
    left:calc(50% - 25px);
    width:50px;
    height:50px;
    z-index:3;
    border-radius:48% 52% 46% 54%;
    background:linear-gradient(135deg,#e6d5b3,#cab182);
    display:grid;
    place-items:center;
    border:3px double #b89d6e;
    box-shadow:0 3px 6px #6650321a;
}

.wax-seal svg {
    width:22px;
    fill:none;
    stroke:#8d744a;
    stroke-width:1.1;
}

.open-button {
    margin-top:1.3rem;
    flex-shrink:0;
}

.welcome-footnote {
    font-family:var(--serif);
    font-size:.85rem;
    font-style:italic;
    color:var(--muted);
    margin-top:.8rem;
}

.welcome.is-opening {
    opacity:0;
    transform:translateY(-8px);
}

.welcome.is-opening .envelope {
    transform:scale(.985);
}

.welcome.is-opening .envelope-card {
    transform:translateY(-14px);
    transition:transform .55s ease;
}

/* Decoración propia en CSS, con movimiento únicamente después de abrir. */
.invitation-header {
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.1rem 1.2rem;
}

.wordmark {
    font-family:var(--serif);
    font-style:italic;
    font-size:.9rem;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:.55rem;
    min-height:44px;
}

.wordmark span {
    color:var(--gold);
    font-style:normal;
}

.music-toggle {
    display:flex;
    align-items:center;
    gap:.4rem;
    min-height:44px;
    padding:.35rem .55rem;
    background:#fffdf9ed;
    border:1px solid #ded5c8;
    border-radius:30px;
    color:var(--ink);
    font-size:.65rem;
    letter-spacing:.025em;
}

.sound-control {
    position:fixed;
    right:1rem;
    top:1rem;
    z-index:6;
}

.sound-bars {
    display:flex;
    align-items:center;
    gap:2px;
    height:14px;
}

.sound-bars i {
    width:2px;
    height:4px;
    background:var(--muted);
    transform-origin:center;
}

.music-toggle[aria-pressed=true] .sound-bars i {
    animation:sound-wave 1s ease-in-out infinite alternate;
}

.sound-bars i:nth-child(2) {
    animation-delay:.3s!important;
}

.sound-bars i:nth-child(3) {
    animation-delay:.6s!important;
}

.hero {
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:8rem 1.3rem 7rem;
    overflow:hidden;
    outline:none;
}

.hero-content {
    position:relative;
    z-index:2;
    width:100%;
    max-width:720px;
}

.hero-kicker {
    margin-bottom:1.8rem;
    color:var(--muted);
    font-size:.61rem;
    letter-spacing:.22em;
}

.overline {
    font-family:var(--serif);
    font-style:italic;
    font-size:.85rem;
    color:var(--muted);
    margin-bottom:.8rem;
}

.hero h1 {
    font-size:clamp(2.4rem,9.3vw,6.9rem);
    letter-spacing:-.065em;
    white-space:nowrap;
    line-height:1.2;
}

.pink-word {
    color:var(--pink);
}

.blue-word {
    color:var(--blue);
}

.hero h1 em {
    font-size:.65em;
    color:#8a7a65;
    font-weight:400;
    margin:0 .04em;
}

.ornament {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    margin:1.5rem auto;
}

.ornament span {
    height:1px;
    width:45px;
    background:var(--line);
}

.ornament svg {
    width:15px;
    height:15px;
    fill:var(--gold);
}

.hero-quote {
    font-family:var(--serif);
    font-size:clamp(1.25rem,3vw,1.7rem);
    line-height:1.45;
    max-width:460px;
    margin:0 auto;
    text-wrap:balance;
}

.hero-description {
    max-width:415px;
    font-size:.875rem;
    line-height:1.95;
    margin:1.3rem auto 0;
    color:var(--muted);
}

.hero-emphasis {
    font-family:var(--serif);
    font-style:italic;
    font-size:1.08rem;
    margin:1.25rem 0 1.6rem;
}

.hero .signature {
    font-size:clamp(2rem,5vw,3rem);
}

.hero .date-stamp {
    margin-top:.6rem;
}

.scroll-cue {
    position:absolute;
    bottom:1.5rem;
    left:50%;
    transform:translateX(-50%);
    text-decoration:none;
    font-size:.53rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.45rem;
    z-index:3;
    min-height:44px;
}

.scroll-cue span {
    font-size:1.25rem;
    font-weight:300;
    color:var(--gold);
}

.balloon-decor {
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}

.balloon-viewport {
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
}

.ambient-glow {
    position:absolute;
    width:420px;
    height:560px;
    filter:blur(45px);
    opacity:.35;
    border-radius:50%;
}

.glow-pink {
    background:radial-gradient(ellipse,#edcedb,transparent 70%);
    left:-270px;
    top:5%;
}

.glow-blue {
    background:radial-gradient(ellipse,#c1dbea,transparent 70%);
    right:-270px;
    top:15%;
}

.balloon-cluster {
    position:fixed;
    width:160px;
    height:300px;
    animation:float 10s ease-in-out infinite alternate;
    animation-play-state:paused;
}

.cluster-left {
    left:-92px;
    top:14%;
    transform:rotate(-12deg);
}

.cluster-right {
    right:-90px;
    top:38%;
    animation-delay:-5s;
    transform:rotate(12deg);
}

.balloon {
    position:absolute;
    width:100px;
    height:127px;
    border-radius:49% 51% 48% 48%;
    box-shadow:inset -10px -8px 22px #76604f14,inset 4px 4px 14px #ffffffa6,0 5px 12px #75655507;
    transform:rotate(-10deg);
}

.balloon:before {
    content:"";
    position:absolute;
    left:20%;
    top:13%;
    width:23%;
    height:35%;
    border-radius:50%;
    background:linear-gradient(140deg,#ffffffe0,#ffffff14);
    filter:blur(3px);
    transform:rotate(25deg);
}

.balloon:after {
    content:"";
    position:absolute;
    top:98%;
    left:calc(50% - 5px);
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:7px solid var(--balloon-knot,#d6c9bb);
}

.balloon span {
    position:absolute;
    top:calc(100% + 6px);
    left:50%;
    height:140px;
    width:24px;
    border-left:1px solid #b3a48b70;
    border-radius:50%;
    transform:rotate(-8deg);
    transform-origin:top;
}

.balloon-pink {
    background:radial-gradient(circle at 30% 25%,#fff4f5,#eacbd4 60%,#dab3c0);
    --balloon-knot:#dcb9c5;
}

.balloon-blue {
    background:radial-gradient(circle at 30% 25%,#f2f9ff,#cbdfea 60%,#b3cedf);
    --balloon-knot:#b9d1df;
}

.balloon-pearl {
    background:radial-gradient(circle at 30% 25%,#fff,#f0eade 60%,#ded7c9);
}

.balloon-back {
    top:-35px;
    left:12px;
    transform:rotate(-20deg);
    width:90px;
    height:115px;
}

.balloon-front {
    top:35px;
    left:42px;
}

.balloon-small {
    top:112px;
    left:0;
    width:78px;
    height:101px;
    transform:rotate(13deg);
}

.cluster-right .balloon-front {
    left:10px;
    transform:rotate(12deg);
}

.cluster-right .balloon-back {
    left:65px;
    transform:rotate(20deg);
}

.cluster-right .balloon-small {
    left:75px;
    transform:rotate(-13deg);
}

.floating-star {
    position:absolute;
    color:#b89b66;
    animation:twinkle 6s ease-in-out infinite alternate;
    animation-play-state:paused;
}

.star-one {
    left:11%;
    top:15%;
    font-size:22px;
}

.star-two {
    right:12%;
    top:21%;
    font-size:30px;
    animation-delay:-2s;
}

.star-three {
    left:13%;
    bottom:18%;
    font-size:10px;
}

.star-four {
    right:12%;
    bottom:11%;
    font-size:22px;
    animation-delay:-4s;
}

.confetti {
    position:absolute;
    width:3px;
    height:7px;
    border-radius:2px;
    background:#c6ac7e66;
    transform:rotate(25deg);
}

.confetti-one {
    left:8%;
    top:44%;
}

.confetti-two {
    right:9%;
    top:10%;
}

.confetti-three {
    left:22%;
    bottom:11%;
    background:#d7b3c580;
}

.confetti-four {
    right:22%;
    bottom:27%;
    background:#b2cede80;
}

.cloud {
    position:absolute;
    width:200px;
    height:60px;
    bottom:-20px;
    border-radius:50%;
    background:#fff;
    filter:blur(20px);
    opacity:.8;
}

.cloud-left {
    left:-30px;
}

.cloud-right {
    right:-30px;
}

.invitation-open .balloon-cluster,.invitation-open .floating-star {
    animation-play-state:running;
}

.invitation-open .hero-content {
    animation:arrive 1.3s both;
}

/* Secciones editoriales, sin tarjetas genéricas. */
.countdown-section {
    background:linear-gradient(105deg,#f4e7e966,#f9f7f4 50%,#e6eef366);
    border-block:1px solid #e4dbcf88;
    padding-top:3.8rem;
    padding-bottom:3.8rem;
}

.countdown-section h2 {
    font-size:2.3rem;
}

.countdown {
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:.45rem;
    margin:2rem auto 0;
    font-variant-numeric:tabular-nums;
}

.countdown>div {
    min-width:49px;
    display:flex;
    flex-direction:column;
    gap:.5rem;
}

.countdown span {
    font-family:var(--serif);
    font-size:2.4rem;
    line-height:1.1;
    font-weight:400;
    letter-spacing:-.04em;
}

.countdown small {
    font-size:.6rem;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.countdown b {
    font-size:1.4rem;
    font-family:var(--serif);
    font-weight:400;
    color:#b3a187;
    line-height:1.65;
}

.schedule {
    font-size:.72rem;
    color:var(--muted);
}

.schedule-lines p {
    margin:.2rem 0;
}

.event-section {
    max-width:1080px;
    margin:auto;
}

.event-composition {
    margin:3rem auto 0;
    max-width:760px;
}

.calendar-date {
    display:flex;
    flex-direction:column;
    align-items:center;
}

.calendar-day {
    font-family:var(--serif);
    font-size:7rem;
    line-height:1.2;
    font-weight:400;
    letter-spacing:-.08em;
    margin-left:-.06em;
}

.calendar-month {
    text-transform:uppercase;
    font-size:.85rem;
    letter-spacing:.25em;
}

.calendar-year {
    font-family:var(--serif);
    font-size:1.4rem;
    letter-spacing:.12em;
    margin-top:.4rem;
    color:#8e734c;
}

.calendar-date .fine-rule {
    margin:1rem auto;
}

.venue {
    margin:3rem auto 0;
    padding-top:2.5rem;
    border-top:1px solid var(--line);
    max-width:380px;
}

.venue .section-icon {
    margin-bottom:.8rem;
    width:30px;
    height:30px;
}

.venue h3 {
    font-size:2rem;
    margin:.75rem 0 1rem;
    letter-spacing:-.03em;
}

address {
    font-size:.875rem;
    line-height:1.9;
    font-style:normal;
    color:var(--muted);
}

address span {
    display:block;
}

.venue .button {
    margin-top:1.75rem;
}

.dress-section {
    background:linear-gradient(110deg,#f1e3e650,#f7f3ee 48%,#dfebf250);
    position:relative;
}

.teams {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.7rem;
    margin:2rem auto 1.5rem;
}

.team {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.4rem;
    min-width:90px;
}

.team>span:last-child {
    font-size:.64rem;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.team-pink {
    color:var(--pink);
    --team-light:#fff4f5;
    --team-middle:#eacbd4;
    --team-edge:#dab3c0;
}

.team-blue {
    color:var(--blue);
    --team-light:#f2f9ff;
    --team-middle:#cbdfea;
    --team-edge:#b3cedf;
}

.team-join {
    font:italic 1.6rem var(--serif);
    color:#a99b88;
    margin-top:2rem;
}

.team-balloons {
    position:relative;
    width:90px;
    height:95px;
    display:block;
}

.team-balloons .balloon-pearl {
    width:41px;
    height:52px;
    top:0;
    left:10px;
    transform:rotate(-14deg);
}

.team-balloon {
    width:49px;
    height:62px;
    top:10px;
    left:35px;
    transform:rotate(12deg);
    background:radial-gradient(circle at 30% 25%,var(--team-light),var(--team-middle) 60%,var(--team-edge));
    --balloon-knot:var(--team-edge);
}

.team-balloons .balloon span {
    height:22px;
    width:10px;
}

.team-balloons .balloon:after {
    border-left-width:3px;
    border-right-width:3px;
    border-bottom-width:5px;
    left:calc(50% - 3px);
}

.team-blue .team-balloons {
    transform:scaleX(-1);
}

.gift-section {
    max-width:650px;
    margin:auto;
    padding-top:5.5rem;
    padding-bottom:5.5rem;
}

.gift-section h2 {
    font-size:2.2rem;
}

.prediction-section {
    border-block:1px solid #e4dbcf88;
    background:radial-gradient(ellipse at 15% 65%,#f0dfe350,transparent 60%),radial-gradient(ellipse at 85% 65%,#dce9f350,transparent 60%);
}

.prediction-options {
    display:flex;
    justify-content:center;
    gap:1rem;
    margin:2rem auto 1.2rem;
}

.prediction-choice {
    position:relative;
    width:125px;
    min-height:151px;
    border:1px solid var(--choice-line);
    border-radius:80px 80px 8px 8px;
    background:var(--choice-bg);
    color:var(--choice-ink);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    transition:transform .3s,box-shadow .3s,border-color .3s;
}

.choice-pink {
    --choice-bg:#f4e6e9;
    --choice-line:#dfbec9;
    --choice-ink:#915769;
}

.choice-blue {
    --choice-bg:#e5eef3;
    --choice-line:#b8d2e0;
    --choice-ink:#466b7f;
}

.prediction-choice svg {
    fill:none;
    stroke:currentColor;
    stroke-width:1;
    width:26px;
    height:26px;
}

.prediction-choice>span {
    font-family:var(--serif);
    font-size:1.8rem;
}

.prediction-choice small {
    text-transform:uppercase;
    font-size:.62rem;
    letter-spacing:.12em;
}

.prediction-choice:hover {
    transform:translateY(-4px);
}

.prediction-choice[aria-pressed=true] {
    border:2px solid var(--choice-ink);
    box-shadow:0 0 0 4px var(--paper);
    transform:translateY(-4px);
}

.prediction-choice[aria-pressed=true] svg {
    fill:currentColor;
    animation:heart-beat .55s ease;
}

.prediction-response {
    max-width:400px;
    min-height:3.3rem;
    margin:auto;
    font-family:var(--serif);
    font-size:1.05rem;
    font-style:italic;
    line-height:1.6;
}

.prediction-followup {
    display:block;
    margin-top:.35rem;
    font:normal .8rem/1.6 var(--sans);
    color:var(--muted);
}

.guest-capacity {
    margin:1.4rem auto 0;
    font-size:.8rem;
    color:var(--muted);
}

.guest-capacity span {
    display:block;
    margin-top:.25rem;
    font:1.65rem/1.3 var(--serif);
    color:var(--ink);
}

.rsvp-section .button {
    margin-top:1.5rem;
}

.rsvp-section {
    padding-block:4rem;
}

.dress-section {
    padding-block:4.5rem;
}

.closing {
    position:relative;
    border-top:1px solid #e4dbcf88;
    background:radial-gradient(ellipse at 0% 100%,#ead3de66,transparent 60%),radial-gradient(ellipse at 100% 100%,#d6e6ef88,transparent 60%);
    padding-top:4rem;
    padding-bottom:3rem;
}

.closing-stars {
    display:flex;
    justify-content:center;
    gap:2.5rem;
    color:var(--gold);
    font-size:1.2rem;
    margin-bottom:2rem;
    align-items:center;
}

.closing-stars span {
    font-size:2rem;
}

.closing-quote {
    font:1.45rem/1.55 var(--serif);
    letter-spacing:-.02em;
    max-width:540px;
    margin:auto;
    text-wrap:balance;
}

.closing-thanks {
    font-size:.8rem;
    margin:1.5rem auto 2rem;
    color:var(--muted);
}

.parents {
    font-size:.66rem;
    letter-spacing:.04em;
    color:var(--muted);
    margin:.7rem 0;
}

.parents span {
    padding:0 .4rem;
}

.closing .section-icon {
    display:block;
    margin:2.5rem auto 1rem;
    width:19px;
    height:19px;
}

.closing-caption {
    font-size:.5rem;
}

.rsvp-dialog {
    width:calc(100% - 2rem);
    max-width:450px;
    padding:3rem 1.5rem 2rem;
    border:1px solid var(--line);
    border-radius:120px 120px 6px 6px;
    background:var(--paper);
    color:var(--ink);
    text-align:center;
    box-shadow:0 20px 80px #332b2420;
}

.rsvp-dialog::backdrop {
    background:#39332c66;
    backdrop-filter:blur(6px);
}

.rsvp-dialog h2 {
    font-size:2rem;
    margin:1rem 0;
}

.rsvp-dialog>p:not(.eyebrow):not(.small-note) {
    font-size:.9rem;
}

.rsvp-dialog .button {
    margin-top:1.8rem;
}

.dialog-capacity {
    margin-bottom:1rem;
    color:var(--muted);
}

.rsvp-current-summary {
    min-height:1.5rem;
    margin:1rem auto 0;
    color:var(--muted);
    font-size:.82rem;
}

.rsvp-options {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.7rem;
    margin:1.4rem auto 1rem;
}

.rsvp-choice {
    min-height:2.8rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--paper);
    color:var(--ink);
    font:600 .82rem var(--sans);
}

.rsvp-choice[aria-pressed=true] {
    border-color:var(--pink);
    background:#f4e6e9;
    color:var(--pink);
    box-shadow:0 0 0 3px #f4e6e980;
}

.rsvp-quantity {
    margin:1.25rem auto;
    color:var(--muted);
    font-size:.8rem;
}

.quantity-control {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.2rem;
    margin:.7rem auto .35rem;
}

.quantity-control button {
    width:2.6rem;
    height:2.6rem;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--paper);
    color:var(--ink);
    font-size:1.25rem;
}

.quantity-control output {
    min-width:2rem;
    font:2rem/1 var(--serif);
}

.rsvp-submit {
    width:100%;
    margin-top:1rem;
}

.rsvp-feedback {
    min-height:3rem;
    margin:1rem 0 0;
    color:var(--muted);
    font-size:.8rem;
}

.dialog-close {
    position:absolute;
    top:18px;
    right:35px;
    width:44px;
    height:44px;
    background:transparent;
    border:0;
    font-size:1.7rem;
    color:var(--ink);
}

.motion-ready .reveal {
    opacity:0;
    transform:translateY(22px);
    transition:opacity .85s ease,transform .85s ease;
}

.motion-ready .reveal.is-visible {
    opacity:1;
    transform:none;
}

@keyframes float {
    from {
        translate:0 -7px;
        rotate:-2deg;
    }
    to {
        translate:0 9px;
        rotate:2deg;
    }
}

@keyframes twinkle {
    from {
        opacity:.3;
    }
    to {
        opacity:.8;
    }
}

@keyframes arrive {
    from {
        opacity:0;
        transform:translateY(18px);
    }
    to {
        opacity:1;
        transform:none;
    }
}

@keyframes sound-wave {
    from {
        height:4px;
    }
    to {
        height:13px;
    }
}

@keyframes heart-beat {
    50% {
        transform:scale(1.2);
    }
}

@media(min-width:375px) {
    .hero {
        padding-inline:2rem;
    }
    .countdown {
        gap:.7rem;
    }
    .countdown>div {
        min-width:56px;
    }
    .countdown span {
        font-size:2.8rem;
    }
    .prediction-choice {
        width:138px;
        min-height:165px;
    }
}

@media(min-width:768px) {
    .section-space {
        padding:6rem 3rem;
    }
    .invitation-header {
        padding:1.8rem 3rem;
    }
    .wordmark {
        font-size:1.1rem;
    }
    .sound-control {
        top:1.7rem;
        right:2.5rem;
    }
    .music-toggle {
        padding:.5rem 1rem;
    }
    .hero {
        min-height:900px;
        min-height:max(850px,100svh);
        padding:8rem 3rem 7rem;
    }
    .hero-kicker {
        font-size:.7rem;
        margin-bottom:2rem;
    }
    .mobile-break {
        display:none;
    }
    .hero-description {
        font-size:.88rem;
    }
    .hero-emphasis {
        margin:1.5rem 0 1.8rem;
    }
    .balloon-cluster {
        scale:1.5;
    }
    .cluster-left {
        left:-12px;
        top:25%;
    }
    .cluster-right {
        right:-12px;
        top:34%;
    }
    .glow-pink {
        left:-100px;
    }
    .glow-blue {
        right:-100px;
    }
    .countdown-section {
        padding-block:4.2rem;
    }
    .countdown {
        gap:1.2rem;
    }
    .countdown>div {
        min-width:75px;
    }
    .countdown span {
        font-size:3.5rem;
    }
    .countdown small {
        font-size:.56rem;
    }
    .countdown b {
        line-height:2.3;
    }
    .event-composition {
        display:grid;
        grid-template-columns:1fr 1.3fr;
        align-items:center;
        margin-top:3.8rem;
    }
    .venue {
        margin:0;
        padding:1rem 0 1rem 3rem;
        border-top:0;
        border-left:1px solid var(--line);
        width:100%;
    }
    .calendar-date {
        padding-right:2rem;
    }
    .teams {
        gap:3.5rem;
    }
    .team {
        gap:1.8rem;
    }
    .team>span:last-child {
        font-size:.7rem;
    }
    .gift-section {
        padding-block:6.5rem;
    }
    .gift-section h2 {
        font-size:2.8rem;
    }
    .prediction-options {
        gap:1.5rem;
    }
    .prediction-choice {
        width:160px;
        min-height:185px;
    }
    .closing {
        padding-block:4.5rem 3rem;
    }
}

@media(min-width:1200px) {
    .cluster-left {
        left:7%;
        top:22%;
        scale:1.9;
    }
    .cluster-right {
        right:7%;
        top:32%;
        scale:1.9;
    }
    .hero-kicker {
        margin-bottom:2.3rem;
    }
    .glow-pink {
        left:0;
    }
    .glow-blue {
        right:0;
    }
    .hero .star-one {
        left:25%;
    }
    .hero .star-two {
        right:25%;
    }
    .hero-description {
        max-width:440px;
    }
}

@media(max-height:720px) and (max-width:767px) {
    .welcome {
        padding-block:1rem;
        justify-content:safe center;
    }
    .welcome-eyebrow {
        margin-bottom:1rem;
    }
    .envelope-card {
        padding-top:.8rem;
        padding-bottom:6.5rem;
    }
    .envelope-card h1 {
        margin:.7rem 0;
    }
    .tiny-star {
        margin-bottom:.5rem;
    }
    .open-button {
        margin-top:1rem;
    }
    .welcome-footnote {
        margin-top:.7rem;
    }
}

@media(max-width:360px), (max-height:650px) and (max-width:767px) {
    .welcome {
        padding:1rem .85rem;
    }
    .welcome-eyebrow {
        margin-bottom:.65rem;
        font-size:.59rem;
        letter-spacing:.13em;
    }
    .envelope {
        padding-inline:8px;
        padding-bottom:32px;
    }
    .envelope-card {
        padding:.7rem .9rem 5.8rem;
    }
    .envelope-card h1 {
        font-size:1.18rem;
        line-height:1.3;
        margin:.6rem 0;
    }
    .envelope-card .eyebrow {
        font-size:.55rem;
        letter-spacing:.08em;
    }
    .envelope-card .signature {
        font-size:1.85rem;
    }
    .tiny-star {
        font-size:1.3rem;
        margin-bottom:.4rem;
    }
    .welcome-recipient {
        margin-bottom:.65rem;
    }
    .recipient-name {
        font-size:1.05rem;
    }
    .envelope-fold {
        height:118px;
    }
    .wax-seal {
        bottom:35px;
    }
    .open-button {
        margin-top:.8rem;
    }
    .welcome-footnote {
        margin-top:.5rem;
        font-size:.75rem;
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important;
    }
    .motion-ready .reveal {
        opacity:1;
        transform:none;
    }
    .welcome.is-opening {
        transform:none;
    }
    .welcome.is-opening .envelope,
    .welcome.is-opening .envelope-card {
        transform:none;
    }
}
/* Acceso raíz neutral: no carga ni revela contenido de una invitación. */
.private-access {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
    background:
        radial-gradient(circle at 18% 18%, rgba(236, 209, 218, .42), transparent 34%),
        radial-gradient(circle at 82% 82%, rgba(203, 220, 231, .45), transparent 36%),
        #faf7f2;
}

.private-access-card {
    width: min(100%, 34rem);
    padding: clamp(2.5rem, 8vw, 4.5rem) clamp(1.5rem, 7vw, 3.5rem);
    text-align: center;
    background: rgba(255, 253, 249, .92);
    border: 1px solid rgba(153, 130, 116, .2);
    box-shadow: 0 1.5rem 4rem rgba(91, 70, 61, .12);
}

.private-access-mark {
    display: block;
    margin-bottom: 1rem;
    color: #aa8c7b;
    font-size: 1.5rem;
}

.private-access-card h1 {
    margin: .35rem 0 1rem;
    font-size: clamp(2.25rem, 10vw, 4rem);
}

.private-access-card > p:last-child {
    max-width: 28rem;
    margin: 0 auto;
    color: #695b53;
    line-height: 1.7;
}