:root{--v:#651F35;--vd:#3B0F1E;--c:#FFF8F0;--r:#C77D87;--o:#C6A46A;--m:#392B2B;--s:"Cormorant Garamond",Didot,Georgia,serif}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:#2a0a15}
body{font:400 1.05rem/1.7 Figtree,system-ui,sans-serif;color:var(--c);overflow-x:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(900px 600px at 10% -5%,#7d2a44 0,transparent 60%),radial-gradient(800px 600px at 100% 45%,#5a1a2f 0,transparent 55%),linear-gradient(180deg,#3B0F1E,#2a0a15 60%,#3B0F1E)}
body.trava{overflow:hidden}
h1,h2,h3{font-family:var(--s);font-weight:500;line-height:1.1}
h1{font-size:2.6rem}h2{font-size:2.3rem}h3{font-size:1.5rem}
section{padding:4.5rem max(1.5rem,calc(50% - 20rem));text-align:center}
section>*+*{margin-top:1.2rem}
.nomes{font:italic 1.5rem var(--s);color:var(--o)}
.brilho{background:linear-gradient(90deg,#E8D3A4,#C6A46A,#FFF8F0,#C6A46A,#E8D3A4) 0 0/200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brilho 7s linear infinite}
@keyframes brilho{to{background-position:-200% 0}}
:focus-visible{outline:3px solid var(--o);outline-offset:3px}
.bt{font:600 1rem Figtree,sans-serif;padding:.8rem 1.6rem;min-height:48px;border:0;border-radius:2rem;background:var(--o);color:var(--m);cursor:pointer}
.link{background:none;border:0;font:inherit;color:inherit;text-decoration:underline;min-height:44px;padding:0 .8rem;cursor:pointer}
.glass{background:rgba(255,248,240,.06);border:1px solid rgba(198,164,106,.3);border-radius:1rem;backdrop-filter:blur(8px);box-shadow:0 20px 50px -30px #000}
#petalas{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#petalas span{position:absolute;bottom:-30px;color:var(--r);animation:sobe linear infinite}
@keyframes sobe{0%{transform:translateY(0);opacity:0}10%,85%{opacity:var(--o)}100%{transform:translateY(-110vh) rotate(20deg);opacity:0}}
main,.tela{position:relative;z-index:1}
.tela{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem;background:linear-gradient(180deg,#3B0F1E,#651F35);text-align:center;overflow:auto}
#abertura>div{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:26rem}
#abertura.fora{opacity:0;visibility:hidden;transition:opacity .9s,visibility 0s .9s}
#p2{animation:ent 1s both}@keyframes ent{from{opacity:0}}
.revela{white-space:pre-line;font:italic 1.5rem/1.5 var(--s)}
.arco{position:relative;overflow:hidden;width:min(60vw,14rem);aspect-ratio:3/4;border-radius:999px 999px .4rem .4rem;border:2px solid var(--o);outline:1px solid var(--o);outline-offset:.5rem;background:rgba(255,248,240,.08);margin:.8rem auto;display:grid;place-items:center;font:italic 1.1rem var(--s);color:var(--o);text-align:center}
.arco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.arco.vazio::after{content:"Nossa foto de capa";padding:1rem}
#tempo{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:22rem;margin-inline:auto}
#tempo div{padding:.6rem .3rem}#tempo b{display:block;font:500 2.1rem/1.1 var(--s);color:var(--o)}
#tempo small{display:block;font-size:.78rem;opacity:.8}
#tempo p{grid-column:1/-1}
#linha{text-align:left;margin-top:2.5rem!important}
.mem{padding:1.2rem;margin-bottom:1.2rem}
.mem time{display:block;font-style:italic;color:var(--o)}
.mem .fs{display:grid;gap:.5rem;margin:.8rem 0}
.mem .fs div{position:relative;aspect-ratio:4/5;border-radius:.4rem;overflow:hidden;background:rgba(255,248,240,.06)}
.mem .fs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mem .leg{font:italic 1.3rem/1.4 var(--s)}
.mem small{color:var(--r)}
#grade{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:2rem!important}
.ft{position:relative;aspect-ratio:3/4;border:5px solid var(--c);outline:1px solid var(--o);padding:0;background:rgba(255,248,240,.08);cursor:pointer;color:var(--c);overflow:hidden}
.ft img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ft.vazio::after{content:"Aqui entra uma foto nossa";position:absolute;inset:0;display:grid;place-items:center;padding:.8rem;font:italic 1.05rem var(--s);color:var(--o)}
.fav{grid-column:1/-1;aspect-ratio:4/3}
.papel{background:#FFF8F0;color:var(--m);padding:2rem 1.3rem;text-align:left;box-shadow:0 1rem 3rem rgba(0,0,0,.45);font:1.3rem/1.75 var(--s);white-space:pre-line;opacity:0;transform:translateY(12px);transition:opacity 1s,transform 1s}
.vis.papel{opacity:1;transform:none}
.cordao{width:min(80%,18rem);margin-inline:auto;display:block}
.cordao path{stroke-dasharray:400;stroke-dashoffset:400}
.vis .cordao path{animation:tracar 2.4s ease forwards}@keyframes tracar{to{stroke-dashoffset:0}}
blockquote{font:italic 1.5rem/1.5 var(--s);max-width:28rem;margin-inline:auto}
cite{display:block;font:400 .95rem Figtree,sans-serif;color:var(--o);margin-top:.6rem}
.corpo{white-space:pre-line;font:1.35rem/1.7 var(--s);text-align:left}
dialog{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%}
#lb{background:#1d0a12;color:var(--c)}
#lb[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;padding:1rem}
#lb img{max-width:100%;max-height:72vh;object-fit:contain}
#lc{text-align:center;max-width:30rem}#lc small{display:block;opacity:.8}
#lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,248,240,.2);color:#fff;font-size:1.8rem;cursor:pointer}
#fx{top:1rem;right:1rem}#pv{left:.4rem;top:45%}#pr{right:.4rem;top:45%}
@media(min-width:600px){#tempo{grid-template-columns:repeat(6,1fr);max-width:none}.mem .fs{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.papel{opacity:1;transform:none}.cordao path{stroke-dashoffset:0}.brilho{color:var(--o);background:none}html{scroll-behavior:auto}#petalas{display:none}}