/* Vitral · convite de Batizado e Primeira Comunhão (nível Cinema). Arte toda em código; sem imagens. */
@font-face { font-family: 'Vitral Serif'; src: url(../fonts/cormorant-garamond-500.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Vitral Serif'; src: url(../fonts/cormorant-garamond-500-italic.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Vitral Sans'; src: url(../fonts/manrope-variable.woff2) format('woff2'); font-weight: 200 800; font-display: swap; }

:root {
  --noite: #0d182c; --noite-2: #14233d; --pedra: #f5f0e6; --pedra-2: #ebe3d3; --tinta: #1c2740; --tinta-2: #4a5468;
  --ouro: #b88a2e; --ouro-claro: #e6c56f; --ouro-luz: #f7e3a4; --ceu: #8cc0e4; --azul: #2c5c94; --rosa: #e3b2a9;
  --serif: 'Vitral Serif', 'Cormorant Garamond', Georgia, serif; --sans: 'Vitral Sans', 'Manrope', system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 72px); --ease: cubic-bezier(.22, .8, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--noite); }
html.travado { overflow: hidden; }
body { margin: 0; font: 400 1rem/1.6 var(--sans); color: var(--tinta); background: var(--pedra); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.04; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: clamp(2.3rem, 7.4vw, 4.6rem); }
h2 em, h1 em { font-style: italic; color: var(--ouro); }
p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pular-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ouro-luz); color: var(--noite); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.pular-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }
.sobretitulo { font: 600 .74rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ouro); margin-bottom: 18px; }
section { position: relative; padding: clamp(88px, 14vw, 160px) var(--gutter); }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font: 700 .9rem/1 var(--sans); letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .3s var(--ease), background .3s, color .3s, box-shadow .3s; position: relative; overflow: hidden; }
.botao:active { transform: scale(.97); }
.botao-ouro { background: linear-gradient(135deg, #f3d98a, #c9993a 60%, #e7c46a); color: #231a08; box-shadow: 0 10px 30px -12px rgba(184, 138, 46, .8), inset 0 1px 0 rgba(255, 255, 255, .5); }
.botao-ouro:hover { box-shadow: 0 16px 36px -12px rgba(184, 138, 46, .95), inset 0 1px 0 rgba(255, 255, 255, .6); }
.botao-linha { border-color: currentColor; background: transparent; color: var(--tinta); }
.botao-linha:hover { background: var(--tinta); color: var(--pedra); }
.largo { width: 100%; }
.link, .link-mapa { background: none; border: 0; padding: 8px 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font-weight: 600; color: var(--ouro); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }
.mapa { margin-top: 18px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(184, 138, 46, .4); }
.mapa iframe { display: block; width: 100%; height: 280px; border: 0; }

/* ---------- abertura ---------- */
.abertura { display: none; }
.js .abertura { display: grid; position: fixed; inset: 0; z-index: 50; place-items: end center; padding: 0 24px max(9vh, 64px); text-align: center; color: var(--pedra); }
.abertura-veu { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 45% at 50% 32%, rgba(13, 24, 44, .25), rgba(13, 24, 44, .86) 70%), linear-gradient(to bottom, rgba(13, 24, 44, .2), rgba(13, 24, 44, .94) 75%); }
.abertura-conteudo { position: relative; z-index: 1; max-width: 30rem; }
.abertura .sobretitulo { color: var(--ouro-claro); }
.abertura-titulo { font-size: clamp(2.4rem, 10vw, 4.2rem); color: #fff8e8; }
.abertura-titulo em { color: var(--ouro-luz); }
.botao-luz { margin-top: 30px; min-height: 58px; padding: 0 34px; background: rgba(247, 227, 164, .1); color: #fff6dc; border-color: rgba(247, 227, 164, .55); backdrop-filter: blur(6px); font-size: 1rem; }
.botao-luz:hover { background: rgba(247, 227, 164, .2); }
.botao-brilho { position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 244, 210, .55) 50%, transparent 70%); background-size: 250% 100%; animation: brilho 3.4s var(--ease) infinite; }
@keyframes brilho { 0%, 30% { background-position: 120% 0; } 80%, 100% { background-position: -40% 0; } }
.abertura-dica { margin-top: 16px; font-size: .82rem; letter-spacing: .08em; color: rgba(245, 240, 230, .66); }
.pular-abertura { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; background: none; border: 0; color: rgba(245, 240, 230, .6); font-size: .8rem; padding: 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.opening .abertura { pointer-events: none; }
.opening .abertura-veu { opacity: 0; transition: opacity 2.4s .2s var(--ease); }
.opening .abertura-conteudo, .opening .pular-abertura { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .8s var(--ease); }

/* ---------- capa ---------- */
.capa { min-height: 100svh; padding: max(20px, env(safe-area-inset-top)) var(--gutter) 40px; background: radial-gradient(90% 60% at 50% 30%, #1d3456 0%, var(--noite) 70%); color: var(--pedra); display: grid; grid-template-rows: auto 1fr auto auto; overflow: hidden; isolation: isolate; }
.capa-topo { display: flex; justify-content: space-between; gap: 12px; font: 600 .68rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ouro-claro); padding-top: 4px; position: relative; z-index: 3; }
.nave { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.arco { position: absolute; left: 50%; bottom: -10%; width: 240%; height: 120svh; translate: -50% 0; border: 1px solid rgba(230, 197, 111, .1); border-radius: 50% 50% 0 0 / 70% 70% 0 0; }
.arco-2 { width: 170%; height: 96svh; border-color: rgba(230, 197, 111, .07); }
.janela { position: relative; width: min(82vw, 56svh, 560px); aspect-ratio: 1; margin: clamp(10px, 4svh, 40px) auto 0; align-self: start; z-index: 1; }
.halo { position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(247, 227, 164, .55), rgba(140, 192, 228, .22) 42%, transparent 68%); filter: blur(8px); }
.rosacea { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 22px rgba(247, 227, 164, .35)); }
.fundo-vidro { fill: #16233b; }
.peca { transform-box: fill-box; transform-origin: center; }
.chumbo { fill: none; stroke: #2a2b33; stroke-width: 1.15; stroke-linejoin: round; }
.moldura { fill: #d9cdb4; stroke: #2a2b33; stroke-width: 1; }
.raios { position: absolute; left: 50%; top: 46%; width: 230%; height: 230%; translate: -50% 0; pointer-events: none; mix-blend-mode: screen; z-index: -1; }
.raios i { position: absolute; left: 50%; top: 0; width: 22%; height: 100%; transform-origin: 50% 0; translate: -50% 0; background: linear-gradient(to bottom, rgba(247, 227, 164, .42), rgba(140, 192, 228, .12) 55%, transparent 85%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); filter: blur(10px); }
.raios i:nth-child(1) { rotate: -26deg; opacity: .55; }
.raios i:nth-child(2) { rotate: -12deg; width: 16%; background: linear-gradient(to bottom, rgba(140, 192, 228, .5), transparent 80%); }
.raios i:nth-child(3) { rotate: 2deg; width: 26%; }
.raios i:nth-child(4) { rotate: 14deg; width: 14%; background: linear-gradient(to bottom, rgba(227, 178, 169, .45), transparent 80%); }
.raios i:nth-child(5) { rotate: 27deg; opacity: .6; }
.raios i:nth-child(6) { rotate: -40deg; width: 12%; opacity: .4; }
.poeira { position: absolute; inset: 20% -20% -80%; pointer-events: none; }
.poeira i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff2c9; box-shadow: 0 0 8px 2px rgba(247, 227, 164, .7); opacity: 0; }
.entered .poeira i { animation: poeira 9s linear 3; }
.aba-oculta .poeira i, .fora .poeira i { animation-play-state: paused; }
.poeira i:nth-child(1) { left: 22%; top: 30%; animation-delay: -1s; } .poeira i:nth-child(2) { left: 38%; top: 55%; animation-delay: -3s; }
.poeira i:nth-child(3) { left: 61%; top: 22%; animation-delay: -5s; } .poeira i:nth-child(4) { left: 74%; top: 48%; animation-delay: -2s; }
.poeira i:nth-child(5) { left: 47%; top: 70%; animation-delay: -6.5s; } .poeira i:nth-child(6) { left: 30%; top: 82%; animation-delay: -4s; }
.poeira i:nth-child(7) { left: 55%; top: 40%; animation-delay: -7.5s; } .poeira i:nth-child(8) { left: 66%; top: 76%; animation-delay: -.5s; }
.poeira i:nth-child(9) { left: 15%; top: 60%; animation-delay: -8s; } .poeira i:nth-child(10) { left: 85%; top: 30%; animation-delay: -2.6s; }
.poeira i:nth-child(11) { left: 42%; top: 12%; animation-delay: -5.6s; } .poeira i:nth-child(12) { left: 79%; top: 64%; animation-delay: -3.6s; }
@keyframes poeira { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 80% { opacity: .7; } 100% { opacity: 0; transform: translate(26px, -90px); } }
.capa-texto { text-align: center; position: relative; z-index: 2; margin-top: clamp(-70px, -6svh, -20px); }
.capa-tipo { font: italic 500 clamp(1.3rem, 5vw, 1.9rem)/1 var(--serif); color: var(--ouro-luz); }
.nome-vidro { font-size: clamp(4.6rem, 25vw, 11.5rem); line-height: .92; margin: 6px 0 14px; outline: none; }
.letras { display: inline-flex; flex-wrap: wrap; justify-content: center; }
.letra { display: inline-block; color: transparent; background: linear-gradient(120deg, #fff4cf 0%, #e6c56f 22%, #fffaf0 40%, #9fd0f0 58%, #e8bcb3 76%, #f4d98d 100%); background-size: 340% 100%; background-position: calc(var(--i) * 22%) 0; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: .6px rgba(255, 243, 210, .55); filter: drop-shadow(0 0 18px rgba(247, 227, 164, .38)); padding: 0 .02em; }
.espaco { width: .25em; }
.capa-data { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px; font: 500 .95rem/1.4 var(--sans); letter-spacing: .04em; color: rgba(245, 240, 230, .9); }
.capa-data .ponto { color: var(--ouro-claro); }
.capa-pais { margin-top: 8px; font: italic 500 1.25rem/1.3 var(--serif); color: rgba(245, 240, 230, .78); }
.rolar { justify-self: center; margin-top: 26px; display: grid; justify-items: center; gap: 10px; text-decoration: none; font: 600 .66rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(245, 240, 230, .6); position: relative; z-index: 2; }
.rolar i { width: 1px; height: 38px; background: linear-gradient(var(--ouro-claro), transparent); }

/* ---------- a luz ---------- */
.luz { background: var(--pedra); overflow: clip; padding: 0; }
.anima .luz { height: 250svh; }
.anima .luz-palco { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; padding-block: 60px; }
.luz-palco { min-height: 100svh; display: grid; align-content: center; justify-items: center; text-align: center; padding: 96px var(--gutter); position: relative; isolation: isolate; }
.manchas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.manchas i { position: absolute; width: 46vmax; height: 30vmax; border-radius: 40%; filter: blur(40px); mix-blend-mode: multiply; opacity: .55; left: 30%; top: 30%; }
.m-ceu { background: #a8d3f0; translate: -40% -30%; rotate: -18deg; }
.m-ouro { background: #f3d68c; translate: 10% 10%; rotate: 12deg; }
.m-rosa { background: #efc3ba; translate: 40% -20%; rotate: -8deg; }
.m-azul { background: #9db8de; translate: -10% 40%; rotate: 22deg; opacity: .4; }
.m-perola { background: #fff; translate: 0 0; mix-blend-mode: normal; opacity: .5; }
.frase-luz { font-size: clamp(2.6rem, 10vw, 6.4rem); line-height: 1; max-width: 13ch; color: var(--tinta); }
.frase-luz .palavra { display: inline-block; }
.luz-texto { max-width: 34rem; margin-top: 34px; font-size: 1.08rem; color: var(--tinta-2); }
.luz-assinatura { margin-top: 26px; font: italic 500 1.3rem/1.35 var(--serif); color: var(--ouro); max-width: 26rem; }

/* ---------- celebração (pomba) ---------- */
.cerimonia { background: linear-gradient(var(--pedra), var(--pedra-2)); overflow: hidden; }
.pomba { position: absolute; width: clamp(130px, 26vw, 260px); left: 0; top: 0; z-index: 2; pointer-events: none; transform: translate(calc(100vw - 100% - var(--gutter)), 60px); }
.traco { fill: rgba(255, 255, 255, .92); stroke: var(--ouro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ramo { fill: #8fa86b; stroke: #6d8a4b; stroke-width: 1.2; }
.olho { fill: var(--tinta); }
.pena { position: absolute; width: 14px; height: 30px; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #fff, #e9e1cf); box-shadow: 0 2px 6px rgba(28, 39, 64, .12); opacity: 0; pointer-events: none; }
.pena-1 { left: 22%; top: 18%; } .pena-2 { left: 64%; top: 26%; } .pena-3 { left: 44%; top: 12%; }
.cerimonia-grade { display: grid; gap: 30px; max-width: 1100px; margin: 0 auto; position: relative; }
.data-grande { display: grid; justify-items: start; font-family: var(--serif); line-height: .82; color: var(--tinta); }
.data-grande .dia { font-size: clamp(9rem, 44vw, 19rem); background: linear-gradient(160deg, var(--azul), #6aa3cf 45%, var(--ouro) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.data-grande .mes { font: italic 500 clamp(2.4rem, 11vw, 4.6rem)/1 var(--serif); margin-top: -.08em; }
.data-grande .ano { font: 600 .9rem/1 var(--sans); letter-spacing: .5em; color: var(--ouro); margin-top: 14px; }
.cerimonia-txt h2 { margin-bottom: 14px; }
.cerimonia-quando { font-size: 1.1rem; font-weight: 600; }
.cerimonia-quando::first-letter { text-transform: uppercase; }
.cerimonia-local, .etapa-local { display: grid; gap: 2px; margin-top: 18px; color: var(--tinta-2); }
.cerimonia-local strong, .etapa-local strong { font: 500 1.6rem/1.15 var(--serif); color: var(--tinta); }

/* ---------- padrinhos ---------- */
.padrinhos { background: radial-gradient(80% 60% at 50% 20%, #1d3456, var(--noite) 75%); color: var(--pedra); text-align: center; overflow: hidden; }
.padrinhos .sobretitulo { color: var(--ouro-claro); }
.padrinhos h2 em { color: var(--ouro-luz); }
.lancetas { display: flex; justify-content: center; gap: clamp(18px, 6vw, 80px); margin: 54px auto 40px; max-width: 760px; }
.lanceta-fig { margin: 0; flex: 1 1 0; max-width: 260px; min-width: 0; }
.lanceta { aspect-ratio: 100 / 220; position: relative; filter: drop-shadow(0 0 30px rgba(247, 227, 164, .28)); }
.lanceta svg { width: 100%; height: 100%; }
.lanceta-fundo { fill: #14223a; }
.losangos { fill: none; stroke: #2a2b33; stroke-width: 1.6; }
.lanceta-borda { fill: none; stroke: #d9cdb4; stroke-width: 3; }
.lanceta-fig figcaption { display: grid; gap: 4px; margin-top: 18px; }
.papel { font: 600 .7rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--ouro-claro); }
.lanceta-fig strong { font: 500 clamp(1.4rem, 5.6vw, 2.2rem)/1.1 var(--serif); overflow-wrap: anywhere; }
.padrinhos-pais { font: italic 500 1.35rem/1.3 var(--serif); color: rgba(245, 240, 230, .8); }

/* ---------- contagem ---------- */
.contagem { background: var(--pedra); text-align: center; }
.medalhoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2.6vw, 28px); max-width: 760px; margin: 44px auto 34px; }
.med { position: relative; aspect-ratio: 1; display: grid; place-content: center; border-radius: 50%; isolation: isolate; }
.med-vidro { position: absolute; inset: 0; border-radius: 50%; z-index: -1; background: conic-gradient(from 20deg, #b3d7ef, #e6c56f, #f6dcd5, #86bde3, #ffffff, #cf9f3c, #b3d7ef); box-shadow: inset 0 0 0 3px #2a2b33, inset 0 0 0 6px #d9cdb4, 0 12px 30px -14px rgba(28, 39, 64, .5); }
.med-vidro::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .25)); }
.med strong { font: 500 clamp(1.9rem, 8.6vw, 3.8rem)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--tinta); }
.med span:not(.med-vidro) { font: 700 clamp(.56rem, 2.1vw, .74rem)/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); margin-top: 4px; }
.med.tique strong { animation: tique .6s var(--ease); }
@keyframes tique { from { opacity: .3; transform: translateY(-4px); } }
.hoje { font: italic 500 1.6rem/1.2 var(--serif); color: var(--ouro); margin-bottom: 22px; }

/* ---------- programa ---------- */
.programa { background: linear-gradient(var(--pedra), #f9f6ef); }
.programa-cab { max-width: 760px; margin: 0 auto 50px; text-align: center; }
.traje { margin-top: 20px; color: var(--tinta-2); }
.caminho { position: relative; max-width: 760px; margin: 0 auto; }
.fio { position: absolute; left: 30px; top: 30px; bottom: 30px; width: 20px; height: calc(100% - 60px); translate: -50% 0; }
.fio path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.fio-base { stroke: rgba(28, 39, 64, .14); }
.fio-luz { stroke: var(--ouro); stroke-dasharray: 1000; stroke-dashoffset: 0; }
.etapas { list-style: none; padding: 0; margin: 0; display: grid; gap: 46px; }
.etapa { display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: start; }
.medalhao { width: 60px; height: 60px; border-radius: 50%; background: var(--pedra); box-shadow: 0 0 0 1px rgba(28, 39, 64, .18); padding: 2px; position: relative; z-index: 1; transition: box-shadow .6s, transform .6s var(--ease); }
.medalhao svg { width: 100%; height: 100%; transition: filter .6s, opacity .6s; }
.js .etapa:not(.acesa) .medalhao svg { filter: grayscale(1) brightness(1.15); opacity: .45; }
.etapa.acesa .medalhao { box-shadow: 0 0 0 2px var(--ouro), 0 0 26px rgba(230, 197, 111, .7); transform: scale(1.06); }
.etapa-hora { font: 700 .78rem/1 var(--sans); letter-spacing: .2em; color: var(--ouro); margin: 6px 0 8px; }
.etapa h3 { font-size: clamp(1.8rem, 6vw, 2.5rem); margin-bottom: 6px; }
.etapa-txt > p:not(.etapa-hora):not(.etapa-local) { color: var(--tinta-2); }
.etapa-local { font-size: .92rem; }
.etapa-local strong { font-size: 1.25rem; }
.recepcao-acoes { max-width: 760px; margin: 60px auto 0; padding: 28px; border-radius: 24px; background: #fff; box-shadow: 0 20px 50px -30px rgba(28, 39, 64, .35); }
.recepcao-acoes > p:first-child { font: 600 .74rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); }
.recepcao-acoes .etapa-local { margin-top: 10px; }

/* ---------- confirmar ---------- */
.confirmar { background: radial-gradient(90% 60% at 50% 0%, #1d3456, var(--noite) 70%); color: var(--pedra); display: grid; gap: 40px; justify-items: center; }
.confirmar-intro { text-align: center; max-width: 34rem; }
.confirmar .sobretitulo { color: var(--ouro-claro); }
.confirmar-intro > p:last-child { margin-top: 16px; color: rgba(245, 240, 230, .78); }
.vela { position: relative; width: 26px; height: 120px; margin: 0 auto 26px; }
.cera { position: absolute; bottom: 0; left: 0; width: 26px; height: 84px; border-radius: 6px 6px 3px 3px; background: linear-gradient(90deg, #e7dfd0, #fffaf0 40%, #d6ccb8); }
.pavio { position: absolute; bottom: 84px; left: 12px; width: 2px; height: 10px; background: #3a2e22; border-radius: 1px; }
.chama { position: absolute; bottom: 92px; left: 5px; width: 16px; height: 28px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 50% 75%, #fff 0, #ffe9a6 30%, #f2a93b 70%, transparent 72%); box-shadow: 0 0 30px 10px rgba(247, 199, 93, .45); transform-origin: 50% 100%; opacity: .15; transform: scale(.4); transition: opacity .8s, transform 1s var(--ease); }
.vela.acesa .chama { opacity: 1; transform: none; animation: chama 2.4s ease-in-out 5; }
@keyframes chama { 50% { transform: scale(.94, 1.06) rotate(1.5deg); } }
.cartao-rsvp { width: 100%; max-width: 560px; background: var(--pedra); color: var(--tinta); border-radius: 28px; padding: clamp(24px, 6vw, 44px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(230, 197, 111, .35); }
form { display: grid; gap: 18px; }
.escolha { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.escolha legend { font: 500 1.7rem/1.1 var(--serif); margin-bottom: 10px; }
.escolha label { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(28, 39, 64, .16); cursor: pointer; font-weight: 600; transition: border-color .3s, background .3s; }
.escolha label:has(input:checked) { border-color: var(--ouro); background: rgba(230, 197, 111, .14); }
.escolha input, .marcar input { accent-color: var(--ouro); width: 18px; height: 18px; margin: 0; flex: none; }
.campo { display: grid; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--tinta-2); }
.campo[hidden] { display: none; }
.campo input, .campo textarea { width: 100%; min-height: 50px; border-radius: 14px; border: 1px solid rgba(28, 39, 64, .2); background: #fff; padding: 12px 14px; font-size: 1rem; font-weight: 500; color: var(--tinta); }
.campo textarea { resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--ouro); outline: none; box-shadow: 0 0 0 3px rgba(230, 197, 111, .3); }
.passos { display: grid; grid-template-columns: 50px minmax(0, 90px) 50px; gap: 8px; }
.passos button { height: 50px; border-radius: 14px; border: 1px solid rgba(28, 39, 64, .2); background: #fff; font-size: 1.4rem; cursor: pointer; }
.passos button:disabled { opacity: .35; cursor: default; }
.passos input { text-align: center; -moz-appearance: textfield; }
.passos input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ajuda { font-weight: 500; font-size: .82rem; color: var(--tinta-2); }
.marcar { display: flex; gap: 10px; align-items: center; font-size: .9rem; }
.privacidade { font-size: .8rem; color: var(--tinta-2); }
.status { min-height: 1.4em; font-weight: 600; color: #a2402f; }
.confirmado { text-align: center; display: grid; gap: 14px; justify-items: center; }
.confirmado h3 { font-size: 2.4rem; }
.done-nome { font: italic 500 1.4rem/1.2 var(--serif); color: var(--ouro); }

/* ---------- mural ---------- */
.mural { background: var(--pedra); text-align: center; }
.recados { display: grid; gap: 18px; max-width: 1100px; margin: 46px auto 0; text-align: left; }
.recado { margin: 0; padding: 26px 24px 22px; border-radius: 20px 20px 20px 4px; background: #fff; position: relative; box-shadow: 0 18px 40px -28px rgba(28, 39, 64, .4); border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--ceu), var(--ouro-claro), var(--rosa)) 1; }
.recado p { font: italic 500 1.35rem/1.3 var(--serif); color: var(--tinta); }
.recado cite { display: block; margin-top: 12px; font: 700 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--ouro); }
.presentes { max-width: 760px; margin: 70px auto 0; }
.presentes h3 { font-size: 2rem; }
.total { margin: 6px 0 20px; color: var(--tinta-2); }
.lista { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lista li { padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(28, 39, 64, .1); font-weight: 600; font-size: .92rem; }
.g-mais { margin-left: 6px; color: var(--ouro); font-weight: 700; }
.vazio { color: var(--tinta-2); }

/* ---------- rodapé, música, ingresso ---------- */
.rodape { background: var(--noite); color: var(--pedra); text-align: center; padding: 80px var(--gutter) calc(110px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 18px; }
.rodape-rosa { width: 120px; height: 120px; filter: drop-shadow(0 0 24px rgba(247, 227, 164, .35)); }
.rodape-frase { font: italic 500 1.5rem/1.2 var(--serif); }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-size: .86rem; }
.rodape-links a { color: var(--ouro-claro); text-underline-offset: 4px; }
.musica { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(247, 227, 164, .5); background: rgba(13, 24, 44, .82); backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
.musica-ondas { display: flex; gap: 3px; align-items: end; height: 18px; }
.musica-ondas i { width: 3px; height: 6px; background: var(--ouro-luz); border-radius: 2px; transition: height .3s; }
.musica.tocando .musica-ondas i { animation: onda 1.1s ease-in-out infinite; }
.musica.tocando .musica-ondas i:nth-child(2) { animation-delay: -.4s; } .musica.tocando .musica-ondas i:nth-child(3) { animation-delay: -.7s; }
@keyframes onda { 50% { height: 18px; } }
.travado .musica { opacity: 0; pointer-events: none; }
.ingresso { border: 0; padding: 18px; background: transparent; max-width: min(94vw, 460px); width: 100%; }
.ingresso::backdrop { background: rgba(8, 14, 26, .86); backdrop-filter: blur(6px); }
.ingresso canvas { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.ingresso-acoes { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.ingresso .botao-linha { color: var(--pedra); }
.semjs { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; padding: 12px 16px; border-radius: 14px; background: var(--ouro-luz); color: var(--noite); font-weight: 600; text-align: center; }

/* ---------- telas largas ---------- */
@media (min-width: 900px) {
  .capa { grid-template-columns: 1.05fr 1fr; grid-template-rows: auto 1fr auto; column-gap: 4vw; align-items: center; }
  .capa-topo { grid-column: 1 / -1; }
  .janela { width: min(44vw, 74svh, 680px); margin: 0; justify-self: end; align-self: center; }
  .capa-texto { text-align: left; margin: 0; }
  .letras { justify-content: flex-start; }
  .capa-data { justify-content: flex-start; }
  .nome-vidro { font-size: clamp(6rem, 13vw, 13rem); }
  .rolar { grid-column: 1 / -1; }
  .raios { top: 40%; rotate: -22deg; }
  .cerimonia-grade { grid-template-columns: 1fr 1fr; align-items: end; gap: 6vw; }
  .recados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .confirmar { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); align-items: center; justify-content: center; column-gap: 6vw; }
  .confirmar-intro { text-align: left; }
  .vela { margin-left: 0; }
}
@media (min-width: 600px) and (max-width: 899px) { .recados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
/* vitral apagado à espera do toque: só o desenho do chumbo, em ouro fraco */
.chumbo { transition: stroke 1.8s .4s; }
.travado:not(.opening) .chumbo { stroke: rgba(230, 197, 111, .42); }
.travado:not(.opening) .moldura { fill: #3a3d48; }
.moldura { transition: fill 1.6s; }