/* Convite: uma coluna estreita (convite de papel) sobre um mar ao entardecer; borboletas e brilho são a magia.
   Cada tema do painel redefine só os tokens de cor. */
:root {
  --abismo: #0A2230;   /* fundo */
  --mar: #113A4C;      /* superfícies */
  --mar-claro: #1B5266;/* bordas */
  --morpho: #3BA7E8;   /* cor viva */
  --brilho: #A6E9F2;   /* reflexo, brilhos */
  --perola: #EEF4F2;   /* texto */
  --nevoa: #9DB7BF;    /* texto secundário */
  --sol: #F2C14E;      /* ação principal e o "15" */
  --tinta: #0A2230;    /* texto sobre --sol */
  --asa-1: #A6E9F2; --asa-2: #3BA7E8; --asa-3: #1A4F9C; --asa-4: #0B1E3A;
  --f-display: "Lora", Georgia, "Times New Roman", serif;   /* textos e títulos: traço firme, boa leitura */
  --f-nome: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; /* só o nome, com o brilho */
  --f-texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --coluna: 34rem;
  color-scheme: dark;
}
:root[data-tema="lavanda"] {
  --abismo: #1C1630; --mar: #2B2249; --mar-claro: #46386F; --morpho: #A98BEB; --brilho: #E3D6FF;
  --perola: #F4F0FA; --nevoa: #B9AFCF; --sol: #F6CF73; --tinta: #1C1630;
  --asa-1: #F1E8FF; --asa-2: #A98BEB; --asa-3: #5E3FA8; --asa-4: #24164A;
}
:root[data-tema="rosa"] {
  /* Fundo rosa médio, caixas num rosa mais forte, textos em dourado escuro (contraste 6 a 7,6) */
  --abismo: #F9D6E4; --mar: #F3B6CE; --mar-claro: #E68FB2; --morpho: #D23D78; --brilho: #7A5412;
  --perola: #5A3B08; --nevoa: #5F410D; --sol: #A01654; --tinta: #FFF7E6;
  --asa-1: #FFE6F0; --asa-2: #F7A1C4; --asa-3: #E0558E; --asa-4: #9C1C55;
  color-scheme: light;
}
:root[data-tema="dourado"] {
  --abismo: #17150F; --mar: #27231A; --mar-claro: #443B29; --morpho: #D8AE5A; --brilho: #F6E4B2;
  --perola: #F7F2E7; --nevoa: #BDB39D; --sol: #E9C46A; --tinta: #17150F;
  --asa-1: #FFF1C9; --asa-2: #D8AE5A; --asa-3: #8A6420; --asa-4: #2E220A;
}
html { background: var(--abismo); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
body {
  background:
    radial-gradient(120% 60% at 50% 0%, var(--mar) 0%, transparent 70%),
    var(--abismo);
  color: var(--perola);
  font: 400 1.0625rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .6s ease;
}
* { box-sizing: border-box; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; border-radius: 4px; }

/* Brilhos (canvas único, atrás de tudo) */
#brilhos { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ---------- Borboleta (SVG gerado em JS) ---------- */
.bf { position: absolute; width: var(--s, 56px); aspect-ratio: 5 / 4; pointer-events: none; }
.bf svg { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.bf .asa { animation: bater var(--v, 1.6s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes bater { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.28); } }
.st1 { stop-color: var(--asa-1); } .st2 { stop-color: var(--asa-2); } .st3 { stop-color: var(--asa-3); } .st4 { stop-color: var(--asa-4); }

/* ---------- Abertura ---------- */
.abertura {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background:
    radial-gradient(70% 50% at 50% 42%, var(--mar-claro) 0%, transparent 75%),
    var(--abismo);
  padding: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  transition: opacity .9s ease .9s, visibility 0s linear 1.8s;
}
.abertura.aberta { opacity: 0; visibility: hidden; }
.abertura__nuvem { position: absolute; inset: 0; overflow: hidden; }
.abertura .bf { transition: transform 1.8s cubic-bezier(.45, .05, .3, 1), opacity 1.6s ease; }
.abertura.aberta .bf { --v: .35s; opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); }
.abertura__miolo { position: relative; text-align: center; display: grid; gap: 1.25rem; justify-items: center; max-width: 22rem; transition: opacity .6s ease, transform .9s ease; }
.abertura.aberta .abertura__miolo { opacity: 0; transform: scale(.96); }
.abertura__para { color: var(--nevoa); font-size: 1rem; margin: 0; }
.abertura__para strong { color: var(--perola); font-weight: 500; }
.abertura__nome { font: italic 400 clamp(4.5rem, 22vw, 7rem)/.9 var(--f-nome); margin: 0; letter-spacing: -.01em; }
.abertura__idade { font: 500 1.0625rem/1 var(--f-display); color: var(--sol); margin: -.5rem 0 0; }
.cintila { background: linear-gradient(100deg, var(--perola) 35%, var(--brilho) 48%, #fff 50%, var(--brilho) 52%, var(--perola) 65%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: cintilar 4.5s ease-in-out infinite; }
@keyframes cintilar { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
.botao {
  appearance: none; border: 0; cursor: pointer;
  font: 600 1rem/1 var(--f-texto);
  padding: 1rem 1.6rem; border-radius: 999px;
  background: var(--sol); color: var(--tinta);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--sol) 60%, transparent);
  transition: transform .15s ease, box-shadow .2s ease;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.botao:hover { transform: translateY(-1px); }
.botao:active { transform: translateY(1px); }
.botao--linha { background: transparent; color: var(--perola); border: 1px solid var(--mar-claro); box-shadow: none; font-weight: 500; }
.botao--linha:hover { border-color: var(--morpho); }
.abertura__dica { font-size: .8125rem; color: var(--nevoa); margin: 0; }

/* ---------- Página ---------- */
.pagina {
  position: relative; z-index: 1;
  max-width: var(--coluna); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  padding-block: 0 6rem;
  display: grid; gap: 5.5rem;
}
section { display: grid; gap: 1.25rem; }
h2 { font: italic 500 clamp(1.9rem, 7.5vw, 2.4rem)/1.1 var(--f-display); margin: 0; text-wrap: balance; }
.sub { color: var(--nevoa); margin: -.5rem 0 0; }
p { margin: 0; }

/* Capa */
.capa { position: relative; padding-top: 1rem; gap: 0; }
.capa__moldura {
  position: relative; width: min(100%, 22rem); margin: 0 auto;
  aspect-ratio: 3 / 4; max-width: 100%;
  border-radius: 11rem 11rem 1.25rem 1.25rem; overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brilho) 30%, transparent), 0 0 0 10px var(--abismo), 0 0 0 11px color-mix(in srgb, var(--brilho) 20%, transparent), 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 90px -20px color-mix(in srgb, var(--morpho) 55%, transparent);
}
.capa__moldura img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.capa__moldura::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--abismo) 2%, transparent 45%); }
.capa__pousada { --s: 64px; right: max(-6px, calc(50% - 13rem)); top: 2.7rem; transform: rotate(18deg); z-index: 2; }
.capa__titulo { position: relative; margin: -4.6rem auto 0; text-align: center; z-index: 1; }
.capa__nome { display: block; font: italic 400 clamp(5rem, 26vw, 8rem)/.85 var(--f-nome); letter-spacing: -.02em; padding-inline: .1em; }
.capa__quinze { display: flex; align-items: baseline; justify-content: center; gap: .35em; margin-top: .75rem; font: italic 500 2rem/1 var(--f-display); color: var(--sol); letter-spacing: .01em; }
.capa__quinze b, .capa__quinze span { font: inherit; color: inherit; }
.capa__data { text-align: center; margin-top: 1.5rem; font-size: 1.0625rem; }
.capa__data small { display: block; color: var(--nevoa); font-size: .9375rem; }

/* Contagem */
.contagem { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; text-align: center; }
.contagem div { display: grid; gap: .25rem; padding-block: 1rem; border-top: 1px solid var(--mar-claro); }
.contagem b { font: 600 clamp(2rem, 9vw, 2.6rem)/1 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; }
.contagem span { font-size: .8125rem; color: var(--nevoa); }

/* Mensagem */
.carta p { font: italic 400 1.1875rem/1.6 var(--f-display); }
.carta .assinatura { font: 400 1rem/1 var(--f-texto); color: var(--brilho); font-style: normal; }

/* Galeria */
.galeria { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.galeria::-webkit-scrollbar { display: none; }
.galeria figure { margin: 0; scroll-snap-align: center; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--mar); }
.galeria figure:nth-child(even) { margin-top: 2rem; }
.galeria img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dica { font-size: .8125rem; color: var(--nevoa); }

/* Festa */
.festa dl { margin: 0; display: grid; gap: 1.25rem; }
.festa dl > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: baseline; padding-bottom: 1.25rem; border-bottom: 1px solid var(--mar); }
.festa dt { color: var(--nevoa); font-size: .9375rem; }
.festa dd { margin: 0; min-width: 0; }
.festa dd small { display: block; color: var(--nevoa); font-size: .9375rem; }
.paleta { display: flex; gap: .4rem; margin-top: .5rem; }
.paleta i { width: 1.6rem; height: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.acoes { display: flex; flex-wrap: wrap; gap: .6rem; }
.acoes .botao { padding: .85rem 1.15rem; font-size: .9375rem; }

/* Caixas (RSVP e Desafios) */
.caixa { background: var(--mar); border-radius: 1.5rem; padding: 1.75rem 1.25rem; position: relative; overflow: hidden; }
.rsvp__reserva { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: var(--abismo); border-radius: 12px; }
.rsvp__reserva b { font: 700 2.25rem/1 var(--f-texto); color: var(--sol); font-variant-numeric: tabular-nums lining-nums; min-width: 1.4ch; text-align: center; }
.rsvp__reserva span { font-weight: 500; line-height: 1.35; }
form { display: grid; gap: 1.25rem; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; min-width: 0; }
legend, label { font-weight: 500; font-size: .9375rem; padding: 0; }
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha label { display: grid; place-items: center; padding: 1rem; border-radius: 12px; border: 1px solid var(--mar-claro); cursor: pointer; font-weight: 500; transition: background .2s, border-color .2s, color .2s; }
.escolha input:checked + label { background: var(--perola); color: var(--tinta); border-color: var(--perola); }
.escolha input:focus-visible + label { outline: 2px solid var(--sol); outline-offset: 2px; }
.contador { display: flex; align-items: center; gap: 1rem; }
.contador button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--mar-claro); background: transparent; color: var(--perola); font-size: 1.25rem; cursor: pointer; }
.contador button:disabled { opacity: .35; cursor: default; }
.contador output { font: 700 2rem/1 var(--f-texto); min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.campo { display: grid; gap: .4rem; }
input[type=text], textarea {
  width: 100%; font: inherit; color: var(--perola);
  background: var(--abismo); border: 1px solid var(--mar-claro); border-radius: 12px;
  padding: .85rem 1rem;
}
textarea { resize: vertical; min-height: 6rem; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--nevoa) 70%, var(--abismo)); }
input:focus, textarea:focus { outline: none; border-color: var(--morpho); box-shadow: 0 0 0 3px color-mix(in srgb, var(--morpho) 30%, transparent); }
.ok { display: grid; gap: .75rem; text-align: center; justify-items: center; padding-block: 1rem; }
.ok h3 { font: italic 400 2rem/1.1 var(--f-display); margin: 0; }

/* ---------- Pote dos desafios ---------- */
.pote-palco { position: relative; display: grid; justify-items: center; gap: 1rem; padding-top: .5rem; }
.pote-palco::before { content: ""; position: absolute; top: 8%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brilho) 40%, transparent), transparent 65%); filter: blur(10px); animation: pulsar 3.5s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
.pote { position: relative; width: 11.5rem; max-width: 70%; cursor: pointer; background: none; border: 0; padding: 0; transform-origin: 50% 90%; }
.pote svg { width: 100%; height: auto; display: block; overflow: visible; }
.pote.sacudir { animation: sacudir .7s ease-in-out; }
@keyframes sacudir { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
.pote .papeis rect { transition: transform .4s; }
.cadeado { text-align: center; color: var(--nevoa); font-size: .9375rem; }
.cadeado b { display: block; color: var(--perola); font: italic 400 1.5rem/1.2 var(--f-display); }

.bilhete-voo { position: absolute; left: 50%; top: 30%; width: 2.2rem; height: 1.2rem; margin-left: -1.1rem; background: var(--perola); border-radius: 3px; box-shadow: 0 0 20px var(--brilho); animation: voar .7s cubic-bezier(.3, .7, .4, 1) forwards; z-index: 3; }
@keyframes voar { 0% { transform: translateY(0) rotate(-10deg) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-9rem) rotate(8deg) scale(1.4); opacity: 0; } }
.bilhete {
  width: 100%; background: var(--perola); color: var(--tinta);
  border-radius: 6px; padding: 1.4rem 1.25rem 1.25rem; text-align: center;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6), 0 0 40px -10px var(--brilho);
  background-image: repeating-linear-gradient(transparent 0 1.9rem, color-mix(in srgb, var(--morpho) 18%, transparent) 1.9rem calc(1.9rem + 1px));
  transform-origin: 50% 0; animation: desdobrar .7s cubic-bezier(.2, .8, .3, 1.2) both;
  display: grid; gap: .9rem;
}
@keyframes desdobrar { 0% { transform: perspective(600px) rotateX(-85deg); opacity: 0; } 100% { transform: perspective(600px) rotateX(0); opacity: 1; } }
.bilhete small { color: color-mix(in srgb, var(--tinta) 60%, transparent); font-size: .8125rem; }
.bilhete p { font: italic 500 1.4rem/1.3 var(--f-display); text-wrap: balance; }
.bilhete .acoes { justify-content: center; }
.bilhete .botao--linha { color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 25%, transparent); }
.bilhete .botao { background: var(--tinta); color: var(--perola); box-shadow: none; }
.bilhete .botao--linha { background: transparent; color: var(--tinta); }
.arquivo { position: absolute; width: 1px; height: 1px; opacity: 0; }

.progresso { display: grid; gap: .5rem; }
.progresso__pontos { display: flex; flex-wrap: wrap; gap: .35rem; }
.progresso__pontos i { width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid var(--mar-claro); transition: background .4s, box-shadow .4s, border-color .4s; }
.progresso__pontos i.feito { background: var(--sol); border-color: var(--sol); box-shadow: 0 0 10px var(--sol); }

.mural { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mural figure { margin: 0; border-radius: 12px; overflow: hidden; background: var(--abismo); display: grid; align-content: start; animation: chegar .6s cubic-bezier(.2, .8, .3, 1.1) both; }

.mural img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.mural figcaption { padding: .55rem .65rem .65rem; display: grid; gap: .15rem; font-size: .8125rem; line-height: 1.35; }
.mural figcaption b { font-weight: 500; }
.mural figcaption span { color: var(--nevoa); }
@keyframes chegar { from { transform: scale(.85); opacity: 0; } }

/* Recados */
.recados { display: grid; gap: 1rem; }
.recado { border-left: 2px solid var(--morpho); padding: .25rem 0 .25rem 1rem; display: grid; gap: .35rem; }
.recado p { font: italic 400 1.0625rem/1.5 var(--f-display); }
.recado span { font-size: .875rem; color: var(--nevoa); }

/* Presente */
.pix { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; background: var(--mar); border-radius: 14px; padding: 1rem 1.1rem; }
.pix code { font: 500 1rem/1.3 var(--f-texto); user-select: all; flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }

footer { text-align: center; color: var(--nevoa); font-size: .875rem; display: grid; gap: .5rem; justify-items: center; }
footer .bf { position: relative; --s: 36px; }

/* Música */
.musica {
  position: fixed; z-index: 40;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: 1px solid var(--mar-claro); background: color-mix(in srgb, var(--mar) 85%, transparent); backdrop-filter: blur(8px);
  color: var(--perola); cursor: pointer; display: grid; place-items: center;
}
.musica svg { width: 1.25rem; height: 1.25rem; }
.musica .barras rect { transform-origin: bottom; transform-box: fill-box; }
.musica[aria-pressed="true"] .barras rect { animation: eq 1s ease-in-out infinite; }
.musica .barras rect:nth-child(2) { animation-delay: -.3s; }
.musica .barras rect:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); background: var(--perola); color: var(--tinta); padding: .65rem 1rem; border-radius: 10px; font-size: .875rem; opacity: 0; transition: opacity .25s, transform .25s; z-index: 60; max-width: calc(100% - 32px); text-align: center; pointer-events: none; }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }

/* Revoada ao confirmar / postar */
.revoada { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.revoada .bf { left: 50%; top: 60%; animation: subir 2.4s cubic-bezier(.3, .1, .3, 1) forwards; animation-delay: var(--atraso); opacity: 0; }
@keyframes subir {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--fx)), -75vh) rotate(var(--fr)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bf .asa, .musica .barras rect, .cintila, .pote-palco::before { animation: none !important; }
  .cintila { color: var(--perola); background: none; }
  .abertura, .abertura .bf, .abertura__miolo { transition-duration: .01s !important; transition-delay: 0s !important; }
  .revoada, #brilhos { display: none; }
  .bilhete, .mural figure, .pote.sacudir { animation: none; }
}

/* ---------- Site real: estados do pote, envio, mural, visor ---------- */
.pote-sec:not([data-estado="aberto"]) .so-aberto { display: none !important; }
.pote:disabled { cursor: default; filter: saturate(.6); }
.cadeado { line-height: 1.5; }
.pote-sec[data-estado="aberto"] .pote-palco::after { content: ""; position: absolute; inset: auto 0 2.5rem; margin: auto; width: 8rem; height: 1rem; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brilho) 30%, transparent), transparent); pointer-events: none; }
.bilhete-area { width: 100%; display: grid; }
.bilhete__campo { display: grid; gap: .35rem; text-align: left; }
.bilhete__campo label { font-size: .875rem; font-weight: 500; }
.bilhete__campo input { background: #fff; color: var(--tinta); border-color: color-mix(in srgb, var(--tinta) 20%, transparent); }
.bilhete__previa { position: relative; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--tinta) 8%, transparent); }
.bilhete__previa img { display: block; width: 100%; max-height: 22rem; object-fit: contain; }
.bilhete__barra { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--morpho); transition: width .2s; }
.bilhete .botao:disabled { opacity: .6; cursor: progress; }
.bilhete--feito p { font-size: 1.2rem; }
.link { appearance: none; background: none; border: 0; padding: .25rem 0; color: var(--brilho); font: 500 .9375rem/1.4 var(--f-texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.progresso { justify-items: start; }

.mural-sec { display: grid; gap: .9rem; }
.mural-sec h3 { font: italic 400 1.6rem/1.1 var(--f-display); margin: .5rem 0 0; }
.mural button { all: unset; cursor: zoom-in; display: block; }
.mural button:focus-visible { outline: 2px solid var(--sol); outline-offset: -2px; }
.mural figure.minha { box-shadow: 0 0 0 2px var(--sol); }
.mural .selo { font-size: .75rem; color: var(--sol); }
#mais-fotos { justify-self: center; }

.visor { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: rgba(4, 12, 18, .94); color: var(--perola); }
.visor[open] { display: grid; place-items: center; }
.visor::backdrop { background: rgba(4, 12, 18, .94); }
.visor figure { margin: 0; display: grid; gap: .75rem; justify-items: center; max-width: min(100%, 60rem); padding: 4rem max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.visor img { max-width: 100%; max-height: calc(100vh - 11rem); object-fit: contain; border-radius: 10px; }
.visor figcaption { text-align: center; display: grid; gap: .2rem; }
.visor figcaption b { font: italic 500 1.3rem/1.3 var(--f-display); }
.visor figcaption span { color: var(--nevoa); font-size: .9375rem; }
.visor__btn { position: fixed; appearance: none; border: 1px solid var(--mar-claro); background: color-mix(in srgb, var(--mar) 80%, transparent); color: var(--perola); width: 2.75rem; height: 2.75rem; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.visor__fechar { top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); }
.visor__ant, .visor__prox { top: 50%; transform: translateY(-50%); }
.visor__ant { left: max(10px, env(safe-area-inset-left, 0px)); }
.visor__prox { right: max(10px, env(safe-area-inset-right, 0px)); }

.rsvp__resumo { display: grid; gap: 1rem; }
.rsvp__resumo h3 { font: italic 400 1.75rem/1.1 var(--f-display); margin: 0; }
.rsvp__resumo dl { margin: 0; display: grid; gap: .3rem; font-size: .9375rem; }
.rsvp__resumo dt { color: var(--nevoa); }
.rsvp__resumo dd { margin: 0 0 .4rem; }
.erro-campo { color: #FFB4B4; font-size: .875rem; }
.recado--meu { border-left-color: var(--sol); }

.modo-pote .pagina { gap: 3rem; }
.modo-pote .capa__moldura { width: min(62%, 14rem); }
.modo-pote .capa__titulo { margin-top: -3.2rem; }
.modo-pote .capa__nome { font-size: clamp(3.5rem, 18vw, 5rem); }
.modo-pote .capa__pousada { --s: 48px; right: max(4px, calc(50% - 9.5rem)); top: 1.6rem; }
.voltar { text-align: center; }
.voltar a { color: var(--brilho); }

/* ---------- Traje ilustrado, cores a evitar, presentes ---------- */
.paleta { flex-wrap: wrap; }
.paleta i.evitar { position: relative; }
.paleta i.evitar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2.5px; margin-left: -1.25px; background: var(--perola); border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 0 1px var(--abismo); }
.festa .proibido { margin-top: .6rem; color: var(--perola); }

.traje { display: grid; gap: .9rem; padding: 1.1rem 1rem 1rem; border-radius: 16px; background: var(--abismo); border: 1px solid var(--mar-claro); }
.traje__titulo { display: grid; gap: .15rem; font-size: .9375rem; color: var(--nevoa); }
.traje__titulo b { display: inline; font: italic 500 1.5rem/1.15 var(--f-display); color: var(--perola); }
.traje__titulo span { font-size: .9375rem; }
.traje__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem .35rem; }
.traje__lista li { display: grid; justify-items: center; gap: .35rem; text-align: center; font-size: .8125rem; line-height: 1.25; color: var(--nevoa); }
.traje__lista svg { width: 3rem; height: 3rem; color: var(--brilho); }
.traje__lista li.nao svg { color: var(--nevoa); opacity: .75; }
.traje__risco { position: relative; display: block; }
.traje__risco::before { content: ""; position: absolute; inset: -2px; border: 2.5px solid #FF8A9A; border-radius: 50%; }
.traje__risco::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2.5px; margin-left: -1.25px; background: #FF8A9A; transform: rotate(45deg); border-radius: 2px; }
.traje__lista li.nao span:last-child { color: #FFB4BE; font-weight: 500; }
.traje__aviso { font-size: .875rem; color: var(--perola); border-top: 1px solid var(--mar-claro); padding-top: .75rem; }

.presentes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.presente { background: var(--mar); border-radius: 14px; padding: .9rem 1rem; display: grid; gap: .25rem; align-content: start; }
.presente span { color: var(--nevoa); font-size: .875rem; line-height: 1.3; }
.presente b { font: 600 1.35rem/1.2 var(--f-texto); color: var(--perola); }
.presente--so { align-content: center; }
.presente--so span { color: var(--perola); font-size: 1rem; font-weight: 600; }

/* ---------- Frase da abertura: surge palavra por palavra, depois revela o nome ---------- */
.abertura__frase { display: grid; gap: .85rem; max-width: 21rem; transition: transform 2.4s cubic-bezier(.3, .7, .2, 1); transform-origin: 50% 100%; }
.abertura__frase p { font: italic 500 clamp(1.25rem, 5.4vw, 1.5rem)/1.5 var(--f-display); color: var(--perola); text-wrap: balance; margin: 0; }
.abertura__frase .abertura__frase-fim { color: var(--brilho); }
.abertura__frase span { display: inline-block; opacity: 0; filter: blur(4px); transform: translateY(.12em);
  animation: surgir 2.6s cubic-bezier(.25, .1, .25, 1) forwards; animation-delay: calc(var(--i) * .24s + .8s); }
@keyframes surgir {
  0% { opacity: 0; filter: blur(4px); transform: translateY(.12em); }
  45% { opacity: .55; filter: blur(1.5px); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
.abertura__frase.pular span { animation: none; opacity: 1; filter: none; transform: none; }
.abertura.revelada .abertura__frase { transform: scale(.86); }
.abertura__resto { display: grid; gap: 1.25rem; justify-items: center; max-height: 0; opacity: 0; overflow: hidden; padding-bottom: 0;
  transition: max-height 2.4s cubic-bezier(.3, .7, .2, 1), opacity 2s ease .8s, padding-bottom 2.4s ease; }
.abertura.revelada .abertura__resto { max-height: 34rem; opacity: 1; padding-bottom: 1.75rem; }
@media (prefers-reduced-motion: reduce) {
  .abertura__frase span { animation: none; opacity: 1; filter: none; transform: none; }
  .abertura__resto { transition: none; }
}

/* ---------- Ajustes do tema Rosa (fundo claro) ---------- */
:root[data-tema="rosa"] .bf svg { filter: drop-shadow(0 6px 12px rgba(156, 28, 85, .22)); }
:root[data-tema="rosa"] .capa__moldura { box-shadow: 0 0 0 1px rgba(194, 38, 106, .25), 0 0 0 10px var(--abismo), 0 0 0 11px rgba(160, 115, 42, .35), 0 40px 80px -30px rgba(156, 28, 85, .35), 0 0 90px -20px rgba(224, 85, 142, .45); }
:root[data-tema="rosa"] .bilhete { background-color: #FFFDF8; color: var(--perola); }
:root[data-tema="rosa"] .bilhete small { color: var(--nevoa); }
:root[data-tema="rosa"] .bilhete .botao { background: var(--sol); color: var(--tinta); }
:root[data-tema="rosa"] .bilhete .botao--linha { background: transparent; color: var(--perola); border-color: var(--mar-claro); }
:root[data-tema="rosa"] .traje__risco::before { border-color: var(--sol); }
:root[data-tema="rosa"] .traje__risco::after { background: var(--sol); }
:root[data-tema="rosa"] .traje__lista li.nao span:last-child { color: var(--sol); }
:root[data-tema="rosa"] .erro-campo { color: var(--sol); }
:root[data-tema="rosa"] .botao { box-shadow: 0 10px 30px -12px rgba(194, 38, 106, .55); }
:root[data-tema="rosa"] .botao--linha { box-shadow: none; }
:root[data-tema="rosa"] .mural figure, :root[data-tema="rosa"] .presente { box-shadow: 0 8px 24px -16px rgba(156, 28, 85, .35); }

/* O nome mantém o brilho dourado reluzente no tema Rosa */
:root[data-tema="rosa"] .cintila { background-image: linear-gradient(100deg, #6B4A10 30%, #C9972E 45%, #FFE7A8 50%, #C9972E 55%, #6B4A10 70%); }