:root{
  --papel:#F4F1EC;
  --cartao:rgba(255,255,255,.74);
  --vinho:#6A0E10;
  --marsala:#7A2E39;
  --marsala-esc:#5A1F28;
  --flor:#964850;
  --rosa:#E4BFC0;
  --ouro:#B08D57;
  --texto:#4A3437;
  --suave:#7D6568;
  --linha:#DCCFCB;
  --display:"Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --corpo:"Lora", Georgia, "Times New Roman", serif;
  --suave-in:cubic-bezier(.22,1,.36,1);
  --mola:cubic-bezier(.34,1.56,.64,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0; color:var(--texto); font:400 17px/1.6 var(--corpo); font-variant-numeric:lining-nums;
  background:var(--papel) url(papel.webp) center top / 1400px auto repeat;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
body.travado{overflow:hidden}
img{max-width:100%; height:auto}
a{color:var(--vinho)}
:focus-visible{outline:2px solid var(--flor); outline-offset:4px; border-radius:6px}
[hidden]{display:none !important}
input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none; display:none}
.visualmente-oculto{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ================= CANVAS E PROGRESSO ================= */
#petalas,#festa{position:fixed; inset:0; width:100%; height:100%; pointer-events:none}
#petalas{z-index:0}
#festa{z-index:110}
.progresso{position:fixed; top:0; left:0; right:0; height:3px; z-index:80; transform-origin:0 50%; transform:scaleX(var(--p,0)); background:linear-gradient(90deg,var(--flor),var(--marsala),var(--ouro))}
.capa,main,.rodape{position:relative; z-index:1}

/* ================= ABERTURA (ENVELOPE) ================= */
.intro{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1.5rem;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.7), transparent 60%), var(--papel) url(papel.webp) center / 1400px auto;
  transition:opacity .9s ease, transform 1.1s var(--suave-in), filter .9s ease}
.intro.sumindo{opacity:0; transform:scale(1.12); filter:blur(6px); pointer-events:none}
.intro-palco{display:grid; justify-items:center; gap:1.6rem; perspective:1400px}
.intro-sobre{font:italic 500 clamp(1.3rem,4vw,1.7rem) var(--display); letter-spacing:.12em; color:var(--vinho); margin:0; animation:subir 1.2s var(--suave-in) both .2s}
.intro-dica{font:400 .95rem var(--corpo); letter-spacing:.14em; text-transform:uppercase; color:var(--suave); margin:0; animation:subir 1.2s var(--suave-in) both .8s, piscar 2.4s ease-in-out infinite 2s}
.intro-pular{position:absolute; right:1.2rem; bottom:calc(1.2rem + env(safe-area-inset-bottom,0px)); font:500 .9rem var(--corpo); color:var(--suave); background:none; border:0; cursor:pointer; padding:.6rem .8rem; text-decoration:underline; text-underline-offset:3px}

.envelope{position:relative; width:min(86vw,500px); aspect-ratio:1.45; animation:flutuar 4s ease-in-out infinite, entrar-env 1.3s var(--mola) both .3s; transform-style:preserve-3d}
.env-costas,.env-frente,.env-aba{position:absolute; inset:0; border-radius:6px}
.env-costas{background:var(--marsala-esc); box-shadow:0 30px 60px -20px rgba(74,20,28,.55), 0 8px 18px rgba(74,20,28,.25)}
.env-carta{position:absolute; left:6%; right:6%; top:6%; height:88%; border-radius:4px; z-index:2;
  background:#FFFDF9 url(papel.webp) center / 700px auto; box-shadow:0 4px 14px rgba(0,0,0,.12);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; justify-items:center; align-content:start; padding:9% 8% 0; row-gap:.4rem;
  transition:transform 1.1s var(--suave-in)}
.env-carta img{width:100%; max-width:130px}
.carta-e{font:italic 500 1.3rem var(--display); color:var(--flor)}
.carta-data{grid-column:1/-1; font:600 .95rem var(--display); letter-spacing:.3em; color:var(--vinho)}
.env-frente{z-index:3; clip-path:polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
  background:linear-gradient(160deg,#8A3743,var(--marsala) 45%,#6B2632)}
.env-frente::after{content:""; position:absolute; inset:0; background:linear-gradient(to top right, transparent 49.6%, rgba(0,0,0,.12) 50%, transparent 50.4%), linear-gradient(to top left, transparent 49.6%, rgba(0,0,0,.12) 50%, transparent 50.4%)}
.env-aba{z-index:4; clip-path:polygon(0 0,100% 0,50% 60%); transform-origin:50% 0; transition:transform .9s var(--suave-in);
  background:linear-gradient(180deg,#8E3A46,#7A2E39); filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.env-aba::after{content:""; position:absolute; inset:0; clip-path:inherit; background:linear-gradient(180deg,transparent 60%,rgba(176,141,87,.25))}
.selo{position:absolute; z-index:5; left:50%; top:60%; width:96px; height:96px; margin:-48px 0 0 -48px; border:0; cursor:pointer; border-radius:50%;
  display:grid; place-content:center; gap:0; color:#E8CFA0; font:600 1.05rem/1.05 var(--display); letter-spacing:.06em;
  background:radial-gradient(circle at 35% 30%, #9E3B49, #6A1E2A 60%, #4E1520);
  box-shadow:0 0 0 5px rgba(106,30,42,.55), 0 0 0 7px rgba(176,141,87,.5), 0 10px 22px rgba(40,8,12,.45), inset 0 -6px 12px rgba(0,0,0,.3), inset 0 4px 8px rgba(255,255,255,.15);
  transition:transform .5s var(--mola), opacity .5s ease; animation:pulsar 2.2s ease-in-out infinite 1.8s}
.selo i{font-style:italic; color:#D9B3AE; padding:0 .08em}
.selo:hover{transform:scale(1.07) rotate(-4deg)}
.envelope.abrindo .selo{transform:scale(1.6) rotate(25deg); opacity:0; animation:none}
.envelope.abrindo .env-aba{transform:rotateX(180deg)}
.envelope.aba-atras .env-aba{z-index:1}
.envelope.carta-fora .env-carta{transform:translateY(-58%) scale(1.04)}
.envelope.abrindo{animation:none}

@keyframes flutuar{50%{translate:0 -8px}}
@keyframes entrar-env{from{opacity:0; transform:translateY(40px) rotateX(25deg) scale(.9)}}
@keyframes pulsar{50%{box-shadow:0 0 0 5px rgba(106,30,42,.55), 0 0 0 12px rgba(176,141,87,.18), 0 10px 22px rgba(40,8,12,.45), inset 0 -6px 12px rgba(0,0,0,.3), inset 0 4px 8px rgba(255,255,255,.15)}}
@keyframes subir{from{opacity:0; transform:translateY(16px)}}
@keyframes piscar{50%{opacity:.45}}

/* ================= CAPA ================= */
.capa{min-height:100svh; display:grid; place-items:center; padding:clamp(3rem,8vw,5rem) 1.25rem; overflow:hidden; text-align:center}
.flor{position:absolute; pointer-events:none; user-select:none}
.flor-se{top:0; left:0; width:clamp(110px,19vw,250px); transform-origin:0 0}
.flor-sd{top:0; right:0; width:clamp(150px,26vw,340px); transform-origin:100% 0}
.flor-ie{bottom:0; left:0; width:clamp(120px,19vw,250px); transform-origin:0 100%}
.flor-id{bottom:0; right:0; width:clamp(100px,16vw,210px); transform-origin:100% 100%}
.capa-conteudo{position:relative; z-index:1; max-width:52rem; width:100%}

.casal{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(1rem,4vw,2.6rem)}
.nome{font:500 clamp(1.7rem,3.6vw,2.6rem)/1 var(--display); letter-spacing:.32em; text-transform:uppercase; color:var(--vinho)}
.casal .nome:first-child{text-align:right}
.casal .nome:last-child{text-align:left; margin-right:-.32em}
.letra{display:inline-block}
.iniciais{width:clamp(120px,15vw,170px)}
.italico{font:italic 500 clamp(1.05rem,1.7vw,1.2rem)/1.4 var(--corpo); letter-spacing:.12em; color:var(--vinho); margin:.4rem 0}
.convidam{margin-top:clamp(1.8rem,4vw,2.6rem)}
.data{font:600 clamp(1.05rem,2vw,1.35rem)/1.4 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--vinho); margin:1.6rem 0}
.data span{color:var(--flor); font-weight:500; padding:0 .35em}
.local,.traje{font:italic 400 1.05rem/1.7 var(--corpo); letter-spacing:.04em; margin:0}
.traje{margin-top:.9rem}

.atalhos{display:grid; grid-template-columns:repeat(4, minmax(0,8.5rem)); justify-content:center; gap:clamp(.5rem,3vw,2.2rem); margin-top:clamp(2rem,5vw,3rem)}
.atalhos a{position:relative; display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:.8rem .3rem; border-radius:16px; text-decoration:none; color:var(--vinho); font:500 .95rem/1.25 var(--corpo); transition:background .3s, transform .4s var(--mola)}
.atalhos img{width:clamp(56px,7vw,78px); height:clamp(56px,7vw,72px); object-fit:contain; transition:transform .5s var(--mola)}
.atalhos a::after{content:""; position:absolute; left:30%; right:30%; bottom:.35rem; height:1px; background:var(--flor); transform:scaleX(0); transition:transform .4s var(--suave-in)}
.atalhos a:hover{background:rgba(255,255,255,.5); transform:translateY(-4px)}
.atalhos a:hover img{transform:scale(1.12) rotate(-6deg)}
.atalhos a:hover::after{transform:scaleX(1)}

.rolar{position:absolute; left:50%; bottom:calc(1.4rem + env(safe-area-inset-bottom,0px)); width:26px; height:42px; margin-left:-13px; border:1.5px solid var(--flor); border-radius:14px; z-index:2}
.rolar span{position:absolute; left:50%; top:8px; width:4px; height:8px; margin-left:-2px; border-radius:2px; background:var(--flor); animation:rolar 1.8s ease-in-out infinite}
@keyframes rolar{0%{opacity:0; transform:translateY(0)}30%{opacity:1}100%{opacity:0; transform:translateY(14px)}}

/* Estados de entrada (só com JS) */
.js .flor{opacity:0; scale:.35; filter:blur(8px)}
.js .nome .letra{opacity:0; transform:translateY(.6em) rotate(8deg); filter:blur(6px)}
.js .iniciais{opacity:0; -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%); mask-image:linear-gradient(90deg,#000 40%,transparent 60%); -webkit-mask-size:260% 100%; mask-size:260% 100%; -webkit-mask-position:100% 0; mask-position:100% 0}
.js .juntamente,.js .convidam,.js .local,.js .traje{opacity:0; transform:translateY(12px)}
.js .data{opacity:0; letter-spacing:.7em}
.js .atalhos a{opacity:0; transform:translateY(24px) scale(.8)}
.js .rolar{opacity:0}

.iniciado .flor{animation:brotar 2.2s var(--suave-in) forwards, balancar 7s ease-in-out infinite alternate 2.2s}
.iniciado .flor-sd{animation-delay:.15s, 2.4s; animation-duration:2.2s, 8s}
.iniciado .flor-ie{animation-delay:.3s, 2.5s; animation-duration:2.2s, 9s}
.iniciado .flor-id{animation-delay:.45s, 2.6s; animation-duration:2.2s, 7.5s}
.iniciado .nome .letra{animation:letra .9s var(--suave-in) forwards; animation-delay:calc(.5s + var(--i) * 55ms)}
.iniciado .c2 .nome .letra{animation-delay:calc(1.5s + var(--i) * 55ms)}
.iniciado .c1 .iniciais{animation:escrever 1.6s ease-out forwards .8s}
.iniciado .c2 .iniciais{animation:escrever 1.6s ease-out forwards 1.8s}
.iniciado .juntamente{animation:aparecer 1s var(--suave-in) forwards 1.3s}
.iniciado .convidam{animation:aparecer 1s var(--suave-in) forwards 2.5s}
.iniciado .data{animation:abrir-espaco 1.6s var(--suave-in) forwards 2.8s}
.iniciado .local{animation:aparecer 1s var(--suave-in) forwards 3.3s}
.iniciado .traje{animation:aparecer 1s var(--suave-in) forwards 3.5s}
.iniciado .atalhos a{animation:pular 1s var(--mola) forwards; animation-delay:calc(3.8s + var(--d) * 120ms)}
.iniciado .atalhos a img{animation:boiar 3.6s ease-in-out infinite; animation-delay:calc(5s + var(--d) * .4s)}
.iniciado .rolar{animation:aparecer 1s ease forwards 4.8s}

@keyframes brotar{to{opacity:.95; scale:1; filter:blur(0)}}
@keyframes balancar{from{rotate:-1.2deg}to{rotate:1.4deg}}
@keyframes letra{to{opacity:1; transform:none; filter:blur(0)}}
@keyframes escrever{0%{opacity:1; -webkit-mask-position:100% 0; mask-position:100% 0}100%{opacity:1; -webkit-mask-position:0 0; mask-position:0 0}}
@keyframes aparecer{to{opacity:1; transform:none}}
@keyframes abrir-espaco{to{opacity:1; letter-spacing:.14em}}
@keyframes pular{to{opacity:1; transform:none}}
@keyframes boiar{50%{translate:0 -5px}}

/* ================= BLOCOS ================= */
.bloco{text-align:center; padding:clamp(4rem,10vw,6.5rem) 1.25rem; position:relative}
.bloco::before{content:""; position:absolute; top:0; left:50%; width:min(70%,34rem); height:1px; translate:-50% 0; background:linear-gradient(90deg,transparent,var(--linha),transparent)}
.conteudo{max-width:40rem; margin:0 auto}
.conteudo.largo{max-width:82rem}
.bloco-icone{width:66px; height:62px; object-fit:contain; margin-bottom:.6rem}
h2{font:500 clamp(1.8rem,5vw,2.4rem)/1.15 var(--display); letter-spacing:.24em; text-transform:uppercase; color:var(--vinho); margin:0 0 1rem}
.bloco-lead{max-width:33rem; margin:0 auto 2rem}

/* Revelação ao rolar */
.js [data-revela]{opacity:0; transform:translateY(28px); transition:opacity 1s var(--suave-in), transform 1s var(--suave-in), letter-spacing 1.2s var(--suave-in); transition-delay:var(--atraso,0s)}
.js h2[data-revela]{letter-spacing:.6em}
.js [data-revela="selo"]{transform:scale(.3) rotate(-30deg); transition-timing-function:var(--mola)}
.js [data-revela].visivel{opacity:1; transform:none}
.js h2[data-revela].visivel{letter-spacing:.24em}

/* Botões */
.botao{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.75rem 1.6rem; border-radius:999px; font:500 1rem var(--corpo); letter-spacing:.03em; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:background .3s, color .3s, border-color .3s, transform .35s var(--mola), box-shadow .3s}
.botao:hover{transform:translateY(-2px)}
.botao:active{transform:scale(.97)}
.botao-principal{background:var(--marsala); color:#FFF8F5; box-shadow:0 8px 20px -8px rgba(122,46,57,.6)}
.botao-principal::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); animation:brilho 3.8s ease-in-out infinite}
.botao-principal:hover{background:var(--vinho)}
.botao-principal:disabled{opacity:.65; cursor:progress}
.botao-linha{background:rgba(255,255,255,.35); border-color:var(--flor); color:var(--vinho)}
.botao-linha:hover{background:var(--marsala); color:#FFF8F5; border-color:var(--marsala)}
.acoes{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem}
.acoes.centro{justify-content:center}
.acoes.coluna{flex-direction:column}
@keyframes brilho{0%,60%{left:-60%}100%{left:130%}}

/* ================= CONTAGEM ================= */
.relogio{display:flex; justify-content:center; gap:clamp(.5rem,3vw,1.4rem); margin:0 0 2rem}
.unidade{display:grid; gap:.4rem; justify-items:center; perspective:400px}
.num{display:block; min-width:clamp(3.6rem,15vw,5.6rem); padding:.6rem .3rem .5rem; border-radius:12px; background:var(--marsala); color:#FFF3EE;
  font:600 clamp(2rem,8vw,3.2rem)/1 var(--display); box-shadow:0 10px 24px -12px rgba(90,31,40,.8), inset 0 -2px 0 rgba(0,0,0,.2); position:relative}
.num::after{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.18)}
.num.virou{animation:virar .6s var(--suave-in)}
.unidade small{font:500 .78rem var(--corpo); letter-spacing:.2em; text-transform:uppercase; color:var(--suave)}
.contagem-fim{font:italic 500 1.5rem var(--display); color:var(--vinho); margin:0 0 1.6rem}
@keyframes virar{0%{transform:rotateX(-95deg); opacity:.2}100%{transform:none; opacity:1}}

/* ================= CONFIRMAÇÃO ================= */
.rotulo{display:block; text-align:left; font-size:.92rem; color:var(--suave); margin:0 0 .35rem}
.rotulo span{font-style:italic}
.campo{width:100%; font:inherit; color:var(--texto); background:var(--cartao); border:1px solid var(--linha); border-radius:14px; padding:.95rem 1rem; transition:border-color .3s, box-shadow .3s}
.campo:focus{border-color:var(--flor); outline:none; box-shadow:0 0 0 4px rgba(150,72,80,.14)}
.campo-busca{position:relative}
.campo-busca .campo{padding-right:3rem; font-size:1.08rem}
.campo-busca svg{position:absolute; right:1rem; top:50%; width:22px; height:22px; translate:0 -50%; fill:none; stroke:var(--flor); stroke-width:1.8; stroke-linecap:round; pointer-events:none}
textarea.campo{resize:vertical; min-height:5rem}
.resultados{list-style:none; margin:.8rem 0 0; padding:0; display:grid; gap:.5rem; text-align:left}
.resultados li{animation:entrar-item .5s var(--suave-in) both; animation-delay:calc(var(--i,0) * 60ms)}
.resultados button{width:100%; font:inherit; text-align:left; color:var(--texto); background:var(--cartao); border:1px solid var(--linha); border-radius:14px; padding:.85rem 1rem; cursor:pointer; transition:border-color .25s, transform .35s var(--mola), box-shadow .3s}
.resultados button:hover{border-color:var(--flor); transform:translateX(6px); box-shadow:0 8px 20px -14px rgba(90,31,40,.6)}
.resultados b{display:block; font:600 1.15rem var(--display); letter-spacing:.04em; color:var(--vinho)}
.resultados small{font-size:.92rem; color:var(--suave)}
.resultados .vazio{color:var(--suave); font-style:italic; padding:.4rem .2rem}
.resultados mark{background:rgba(228,191,192,.6); color:inherit; border-radius:3px; padding:0 .1em}
.ajuda{font-size:.95rem; color:var(--suave); margin:1rem 0 0}
@keyframes entrar-item{from{opacity:0; transform:translateY(10px)}}

.cartao{background:var(--cartao); border:1px solid var(--linha); border-radius:20px; padding:1.6rem 1.35rem; text-align:left; backdrop-filter:blur(3px); box-shadow:0 20px 50px -30px rgba(90,31,40,.45); animation:entrar-cartao .7s var(--suave-in)}
.cartao[hidden]{display:none}
.cartao-sobre{font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--suave); margin:0}
.cartao h3{font:600 1.75rem/1.2 var(--display); color:var(--vinho); margin:.1rem 0 .6rem}
.instrucao{font-size:.95rem; color:var(--suave); margin:0 0 .6rem}
.aviso{font-size:.93rem; background:rgba(150,72,80,.08); border-left:3px solid var(--flor); border-radius:8px; padding:.6rem .8rem; margin:0 0 .8rem}
.pessoas{list-style:none; margin:0 0 1.4rem; padding:0}
.pessoas li{animation:entrar-item .5s var(--suave-in) both; animation-delay:calc(var(--i,0) * 70ms + .15s)}
.pessoas label{display:flex; align-items:center; gap:.9rem; padding:.75rem .1rem; border-bottom:1px solid var(--linha); cursor:pointer; font-size:1.08rem}
.pessoas li:last-child label{border-bottom:0}
.pessoas input{appearance:none; -webkit-appearance:none; flex:none; width:1.5rem; height:1.5rem; margin:0; border:1.5px solid var(--flor); border-radius:7px; display:grid; place-content:center; cursor:pointer; background:#fff; transition:background .25s, border-color .25s, transform .35s var(--mola)}
.pessoas input::after{content:""; width:.74rem; height:.4rem; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px) scale(0); transition:transform .35s var(--mola)}
.pessoas input:checked{background:var(--marsala); border-color:var(--marsala); transform:scale(1.08)}
.pessoas input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.pessoas span{position:relative; transition:color .3s}
.pessoas span::after{content:""; position:absolute; left:0; right:0; top:55%; height:1.5px; background:var(--suave); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s var(--suave-in)}
.pessoas .fora{color:var(--suave)}
.pessoas .fora::after{transform:scaleX(1)}
.resumo{font-size:.95rem; color:var(--suave); margin:1rem 0 0}
.erro{color:#9B1C1C; font-size:.95rem; margin:.6rem 0 0; animation:tremer .4s}
.armadilha{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.ok{text-align:center}
.ok p{margin:0 auto; max-width:28rem}
.ok-check{width:84px; height:84px; fill:none; stroke:var(--marsala); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.ok-check circle{stroke-dasharray:214; stroke-dashoffset:214; animation:tracar .9s var(--suave-in) forwards .1s}
.ok-check path{stroke-dasharray:50; stroke-dashoffset:50; animation:tracar .5s var(--suave-in) forwards .8s}
@keyframes tracar{to{stroke-dashoffset:0}}
@keyframes entrar-cartao{from{opacity:0; transform:translateY(20px) scale(.97)}}
@keyframes tremer{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* ================= O GRANDE DIA ================= */
.trilha{position:relative; display:grid; gap:3.4rem; padding:1rem 0}
.trilha-linha{position:absolute; left:50%; top:3rem; bottom:3rem; width:2px; translate:-50% 0; background:repeating-linear-gradient(to bottom, var(--linha) 0 6px, transparent 6px 12px)}
.trilha-cheia{position:absolute; inset:0 0 auto 0; height:100%; background:linear-gradient(var(--flor),var(--marsala)); transform-origin:50% 0; transform:scaleY(var(--t,0))}
.trilha-coracao{position:absolute; left:50%; top:calc(var(--t,0) * 100%); translate:-50% -50%; color:var(--marsala); font-size:1.3rem; line-height:1; text-shadow:0 0 0 var(--papel), 0 0 10px var(--papel); animation:bater 1.2s ease-in-out infinite}
.parada{position:relative; background:var(--cartao); backdrop-filter:blur(3px); border:1px solid var(--linha); border-radius:22px; padding:2rem 1.4rem 1.8rem; box-shadow:0 24px 60px -36px rgba(90,31,40,.55)}
.parada-icone{width:70px; height:64px; object-fit:contain; margin:0 auto .4rem; display:block}
svg.parada-icone{fill:none; stroke:var(--icone,#4A2328); stroke-width:3; stroke-linejoin:round; stroke-linecap:round}
.parada h3{font:500 1.9rem/1.1 var(--display); letter-spacing:.2em; text-transform:uppercase; color:var(--vinho); margin:.2rem 0 1rem}
.hora{font:italic 500 1.15rem var(--corpo); color:var(--flor); margin:0}
.endereco{margin:0 0 1.4rem; line-height:1.75}
.endereco strong{font:600 1.35rem var(--display); letter-spacing:.06em; color:var(--vinho)}
.nota{font-size:.93rem; color:var(--suave); margin:1.2rem 0 0}
.traje-parada .endereco{margin-bottom:0}
@keyframes bater{0%,100%{scale:1}15%{scale:1.3}30%{scale:1}45%{scale:1.2}}

/* ================= PRESENTES ================= */
.filtros{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:0 0 2rem}
.chip{font:500 .92rem var(--corpo); color:var(--vinho); background:rgba(255,255,255,.5); border:1px solid var(--linha); border-radius:999px; padding:.5rem 1rem; cursor:pointer; transition:all .3s var(--suave-in)}
.chip:hover{border-color:var(--flor)}
.chip.ativo{background:var(--marsala); border-color:var(--marsala); color:#FFF8F5; transform:scale(1.05)}

.presentes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1.1rem; text-align:left}
.presentes li{animation:entrar-presente .7s var(--suave-in) both; animation-delay:calc(var(--i,0) * 45ms)}
.presentes li.escondido{display:none}
.presente{--rx:0deg; --ry:0deg; --mx:50%; --my:50%; position:relative; width:100%; height:100%; font:inherit; color:var(--texto); background:#FFFDFB; border:1px solid var(--linha); border-radius:18px; padding:0; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; text-align:left;
  transform:perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .5s var(--suave-in), box-shadow .4s, border-color .3s; box-shadow:0 10px 30px -22px rgba(90,31,40,.6)}
.presente:hover{border-color:var(--flor); box-shadow:0 26px 50px -26px rgba(90,31,40,.7)}
.presente::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.45), transparent 45%); opacity:0; transition:opacity .3s}
.presente:hover::after{opacity:1}
.p-foto{position:relative; aspect-ratio:4/3; overflow:hidden; background:#EDE4E1}
.p-foto img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s var(--suave-in), filter .6s; filter:saturate(.92)}
.presente:hover .p-foto img{transform:scale(1.09); filter:saturate(1.05)}
.p-foto::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(74,20,28,.35), transparent 45%)}
.p-valor{position:absolute; left:.8rem; bottom:.7rem; z-index:1; font:600 1.15rem var(--display); letter-spacing:.03em; color:var(--vinho); background:rgba(255,253,251,.92); border-radius:999px; padding:.2rem .8rem; box-shadow:0 4px 12px rgba(0,0,0,.15)}
.p-texto{padding:.95rem 1.05rem 1.1rem; display:grid; gap:.3rem; flex:1; align-content:start}
.p-nome{font:600 1.24rem/1.2 var(--display); color:var(--vinho)}
.p-nota{font-size:.9rem; line-height:1.45; color:var(--suave)}
.p-cta{margin-top:.4rem; font-size:.85rem; font-weight:500; color:var(--marsala); letter-spacing:.04em; opacity:0; transform:translateX(-6px); transition:all .4s var(--suave-in)}
.presente:hover .p-cta,.presente:focus-visible .p-cta{opacity:1; transform:none}
.presente.livre{border-style:dashed; border-color:var(--flor); background:rgba(255,255,255,.55)}
.presente.livre .p-foto{display:grid; place-items:center; background:radial-gradient(circle at 50% 45%, #F8EDEA, #EAD7D3)}
.presente.livre .p-foto::after{display:none}
.presente.livre .p-foto span{font:italic 500 4rem var(--display); color:var(--flor); animation:bater 1.6s ease-in-out infinite}
@keyframes entrar-presente{from{opacity:0; transform:translateY(24px) scale(.96)}}

/* ================= MODAL PIX ================= */
dialog{border:0; padding:0; border-radius:24px; width:min(26rem, calc(100% - 2rem)); max-height:calc(100% - 2rem); overflow:auto; color:var(--texto); background:var(--papel) url(papel.webp) center / 900px auto; box-shadow:0 40px 90px -30px rgba(40,8,12,.6)}
dialog[open]{animation:abrir-modal .6s var(--mola)}
dialog::backdrop{background:rgba(58,24,28,.5); backdrop-filter:blur(5px); animation:fundo .4s ease}
.pix-foto{aspect-ratio:16/9; overflow:hidden}
.pix-foto img{width:100%; height:100%; object-fit:cover; display:block; animation:zoom-lento 8s ease-out both}
.pix-corpo{padding:1.4rem 1.4rem 1.4rem; text-align:center}
.pix-casal{font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--suave); margin:0}
.pix-corpo h3{font:600 1.6rem/1.2 var(--display); color:var(--vinho); margin:.2rem 0}
.pix-valor{font:600 2rem var(--display); color:var(--marsala); margin:0 0 1rem}
.pix-qr{display:flex; justify-content:center; background:#fff; border-radius:14px; padding:12px; width:max-content; margin:0 auto 1rem; box-shadow:0 8px 20px -12px rgba(0,0,0,.3)}
.pix-qr img,.pix-qr canvas{display:block}
.pix-codigo{width:100%; font:.8rem/1.4 ui-monospace, Menlo, Consolas, monospace; color:var(--texto); background:#fff; border:1px solid var(--linha); border-radius:10px; padding:.7rem; resize:none}
.pix-vazio{background:rgba(150,72,80,.08); border-radius:12px; padding:1rem; margin:0 0 1rem}
.pix-toast{font-size:.92rem; color:var(--marsala); min-height:1.4rem; margin:.7rem 0 0}
@keyframes abrir-modal{from{opacity:0; transform:translateY(40px) scale(.92)}}
@keyframes fundo{from{opacity:0}}
@keyframes zoom-lento{from{transform:scale(1.15)}}

/* ================= RODAPÉ ================= */
.rodape{text-align:center; padding:4.5rem 1.25rem 3.5rem}
.rodape-ini{display:flex; justify-content:center; gap:.5rem}
.rodape-ini img{width:96px; animation:boiar 4s ease-in-out infinite}
.rodape-ini img+img{animation-delay:-2s}
.rodape p{font:italic 1.1rem/1.7 var(--corpo); color:var(--vinho); margin:1rem 0 1.4rem}
.voltar{font-size:.95rem; color:var(--suave)}

/* ================= RESPONSIVO ================= */
@media (min-width:760px){
  .trilha{grid-template-columns:1fr 1fr; column-gap:4rem; row-gap:2rem}
  .trilha-linha{display:none}
  .traje-parada{grid-column:1/-1; max-width:28rem; justify-self:center}
}
@media (max-width:899px){
  .presentes{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr)); gap:.75rem}
}
@media (max-width:640px){
  .capa{padding-top:5.5rem; padding-bottom:6rem}
  .casal{grid-template-columns:auto auto; justify-content:center; column-gap:.45rem; row-gap:.5rem}
  .casal .iniciais{grid-column:1 / -1; grid-row:1; justify-self:center; width:128px}
  .casal .nome{grid-row:2; text-align:center !important; margin-right:0 !important; font-size:1.32rem; letter-spacing:.2em}
  .casal .nome:first-child::after{content:"\00a0&"; letter-spacing:0; color:var(--flor)}
  .local br{display:none}
  .data span{display:block; height:.15rem; overflow:hidden; color:transparent}
  .atalhos{grid-template-columns:repeat(2, minmax(0,9rem)); row-gap:.4rem}
  .flor-se{width:95px}.flor-sd{width:150px}.flor-ie{width:105px}.flor-id{width:95px}
  .selo{width:84px; height:84px; margin:-42px 0 0 -42px; font-size:.95rem}
  .p-texto{padding:.75rem .8rem .9rem}
  .p-nome{font-size:1.08rem}
  .p-nota{font-size:.82rem}
  .p-valor{font-size:1rem; left:.55rem; bottom:.5rem}
}

/* ================= MENOS MOVIMENTO ================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js .flor,.js .nome .letra,.js .iniciais,.js .juntamente,.js .convidam,.js .local,.js .traje,.js .data,.js .atalhos a,.js .rolar,.js [data-revela]{opacity:1 !important; transform:none !important; filter:none !important; scale:1 !important; -webkit-mask-image:none !important; mask-image:none !important; letter-spacing:revert}
}