:root{
  --olive:#636b2f; --olive-deep:#4a5122; --olive-soft:#8b9356; --olive-pale:#e8ebd6;
  --ivory:#f8f4ea; --paper:#fffdf8; --blush:#ead9cf; --gold:#b79f68;
  --ink:#3a3d2c; --muted:#757a63; --line:#d8d5bf;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
  /* compat com o portal */
  --sage:var(--olive); --sage-deep:var(--olive-deep); --sage-pale:var(--olive-pale); --cream:var(--ivory);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .39  0 0 0 0 .42  0 0 0 0 .18  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.22'/></svg>");
  --wash:radial-gradient(70% 45% at 8% 4%,rgba(99,107,47,.09),transparent 70%),
         radial-gradient(60% 40% at 100% 100%,rgba(226,190,168,.30),transparent 70%),
         radial-gradient(50% 30% at 100% 0%,rgba(183,159,104,.12),transparent 70%);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#e6e4d2;color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
strong,b,output,li{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
body.locked{overflow:hidden;height:100dvh}
img,svg{display:block}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}

.mono-img{height:70px;width:auto;display:block}
.mono-light{filter:brightness(0) invert(1) sepia(.15);opacity:.95}
.paper{background:var(--wash),var(--grain),var(--ivory)}


/* ---------- ENVELOPE ---------- */
.intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:38px;overflow:hidden;
  background:var(--wash),var(--grain),radial-gradient(120% 90% at 50% 40%,#fffdf6 0%,#f6f1e3 70%,#ebe5d0 100%);
  transition:opacity 1s ease,visibility 1s}
.intro.gone{opacity:0;visibility:hidden}
.flora{position:absolute;pointer-events:none;isolation:isolate}
.flora img{width:100%;height:auto;display:block}
.intro .i1{width:290px;left:-34px;top:6px;transform:rotate(-6deg);opacity:.95}
.intro .i2{width:330px;right:-40px;bottom:-12px;transform:rotate(172deg);opacity:.95}
.intro-hint{font-family:var(--serif);font-style:italic;font-size:1.45rem;letter-spacing:.08em;color:var(--olive-deep);animation:pulse 2.4s ease-in-out infinite;transition:opacity .4s;text-align:center;line-height:1.2}
.intro-hint::after{content:"";display:block;width:34px;height:1px;background:var(--gold);margin:10px auto 0}
.intro.opening .intro-hint{opacity:0;animation:none}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

.envelope{position:relative;width:min(86vw,370px);aspect-ratio:1.45/1;background:none;border:0;perspective:1400px;-webkit-tap-highlight-color:transparent;z-index:2;
  filter:drop-shadow(0 26px 30px rgba(60,55,20,.25));animation:float 5s ease-in-out infinite}
.envelope.open{animation:none}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.envelope>span{position:absolute;display:block}
.env-back{inset:0;background:#e9e3cf;border-radius:4px}
.envelope>.env-card{display:flex;left:5%;right:5%;top:6%;bottom:6%;background:var(--paper);border-radius:2px;z-index:2;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 6px rgba(99,107,47,.3);transition:transform 1.1s cubic-bezier(.5,0,.2,1) .7s}
.env-card .mono-img{height:58%}
.env-card-names{font-family:var(--script);font-size:1.25rem;color:var(--olive-deep);line-height:1}
.env-front{inset:0;z-index:3}
.f-l{clip-path:polygon(0 0,52% 52%,0 100%);background:linear-gradient(90deg,#efe9d6,#f7f2e4)}
.f-r{clip-path:polygon(100% 0,48% 52%,100% 100%);background:linear-gradient(270deg,#efe9d6,#f7f2e4)}
.f-b{clip-path:polygon(0 100%,50% 44%,100% 100%);background:linear-gradient(0deg,#f3eedd,#fbf8ee);border-radius:0 0 4px 4px}
.env-flap{left:0;top:0;width:100%;height:58%;z-index:4;transform-origin:top center;clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg,#fbf8ee,#eee7d3);transition:transform .9s cubic-bezier(.5,0,.2,1),z-index 0s .35s}
.env-seal{left:50%;top:58%;width:74px;height:74px;margin:-37px 0 0 -37px;z-index:5;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8c9553,var(--olive) 55%,var(--olive-deep));
  box-shadow:0 3px 9px rgba(40,45,15,.45),inset 0 0 0 3px rgba(255,255,255,.12),inset 0 -3px 6px rgba(0,0,0,.2);
  display:flex!important;align-items:center;justify-content:center;transition:transform .5s ease,opacity .4s ease}
.env-seal .mono-img{height:52px}
.envelope:hover .env-seal{transform:scale(1.06)}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:1}
.envelope.open .env-seal{transform:scale(.4);opacity:0}
.envelope.open .env-card{transform:translateY(-62%) scale(1.04)}
.envelope.open{transition:transform 1s ease 1.6s,opacity .7s ease 1.9s;transform:translateY(-30px) scale(1.15);opacity:0}

/* ---------- compartilhado ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;border:1.5px solid var(--olive);font-family:var(--sans);font-size:1.1rem;font-weight:400;text-decoration:none;color:var(--olive-deep);background:transparent;transition:background .25s,color .25s,transform .15s}
.btn:hover{background:var(--olive-pale)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--olive-deep);color:#fff;border-color:var(--olive-deep);width:100%;box-shadow:0 8px 18px -8px rgba(74,81,34,.7)}
.btn.solid:hover{background:var(--olive)}
.btn[disabled]{opacity:.6;pointer-events:none}
.link{background:none;border:0;font-size:1rem;color:var(--olive-deep);text-decoration:underline;text-underline-offset:4px;padding:12px}
.sub{font-size:1rem;color:var(--muted)}
.error{color:#a14a3b;font-size:1rem;margin:0 0 14px}
.pwd,input[type=text]{width:100%;border:0;border-bottom:1.5px solid var(--line);background:transparent;padding:12px 2px;font:400 1.2rem var(--sans);color:var(--ink);border-radius:0}
input:focus{outline:none;border-color:var(--olive)}
.eyebrow{font-weight:400;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--olive)}

/* ---------- CONVITE (tela única) ---------- */
.page{max-width:520px;height:100dvh;margin:0 auto;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:max(20px,env(safe-area-inset-top)) 28px max(22px,env(safe-area-inset-bottom));
  background:var(--wash),var(--grain),var(--ivory);box-shadow:0 0 60px rgba(60,55,20,.18);
  opacity:0;transition:opacity 1.2s ease .2s}
.page.in{opacity:1}
.page::before{content:"";position:absolute;inset:9px;border:1px solid rgba(99,107,47,.3);border-radius:22px;pointer-events:none;z-index:3}
.page::after{content:"";position:absolute;inset:13px;border:1px solid rgba(183,159,104,.35);border-radius:19px;pointer-events:none;z-index:3}
.page>*{position:relative;z-index:1}
.hero-mono{height:clamp(56px,10.5dvh,92px);flex:none;margin-top:4px}

.arch-wrap{flex:1 1 0;min-height:0;width:100%;display:flex;justify-content:center;margin-top:14px;padding:8px 0 16px}
.arch{position:relative;height:100%;aspect-ratio:2/3;max-width:100%}
.arch::before{content:"";position:absolute;inset:-8px;border:1px solid var(--olive);border-radius:999px 999px 6px 6px;opacity:.7}
.arch>img{width:100%;height:100%;object-fit:cover;object-position:center bottom;border-radius:999px 999px 3px 3px;box-shadow:0 18px 34px -14px rgba(60,55,20,.45)}
.arch .flora{z-index:2}
.arch .f-top{width:58%;left:42%;top:-6%}
.arch .f-base{width:70%;left:-22%;bottom:-6%}

.names{flex:none;margin-top:14px;font-family:var(--script);font-weight:400;color:var(--olive-deep);line-height:1.1;font-size:clamp(2.1rem,9.6vw,2.9rem);white-space:nowrap}
.names .amp{font-family:var(--serif);font-style:italic;font-size:.55em;color:var(--gold);padding:0 .1em}
.orn{flex:none;display:flex;align-items:center;gap:10px;margin:6px 0 4px;color:var(--gold)}
.orn::before,.orn::after{content:"";width:44px;height:1px;background:currentColor;opacity:.7}
.orn i{width:6px;height:6px;background:currentColor;transform:rotate(45deg)}
.when{flex:none;font-family:var(--serif);color:var(--ink);line-height:1.2}
.when .dow{display:block;font-family:var(--sans);font-size:.82rem;letter-spacing:.32em;text-transform:uppercase;color:var(--olive);margin-bottom:2px}
.when .dt{display:block;font-size:clamp(1.5rem,6.8vw,1.9rem);font-weight:500;color:var(--olive-deep)}
.when .hr{display:block;font-size:1.25rem;font-style:italic;color:var(--ink)}
.verse{flex:none;margin-top:10px;max-width:30ch;font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.3;color:var(--muted)}
.verse cite{display:block;font-style:normal;font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--olive);margin-top:3px}
.actions{flex:none;width:100%;margin-top:14px;display:grid;gap:10px}
.big{min-height:60px;width:100%;border-radius:16px;font-size:1.25rem;font-weight:500;justify-content:flex-start;padding:0 20px;text-align:left;background:rgba(255,253,248,.6)}
.big svg{width:28px;height:28px;flex:none}
.big small{display:block;font-size:.85rem;font-weight:300;opacity:.85;line-height:1.1}
.big span{line-height:1.15}
.btn.solid.big{background:var(--olive-deep)}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;background:rgba(44,48,22,.5);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal.open{opacity:1;visibility:visible}
.sheet{position:relative;width:min(520px,100%);background:var(--wash),var(--grain),var(--paper);border-radius:26px 26px 0 0;padding:26px 24px max(28px,env(safe-area-inset-bottom));transform:translateY(40px);transition:transform .35s ease;text-align:center;max-height:92dvh;overflow:auto}
.modal.open .sheet{transform:none}
.close{position:absolute;right:10px;top:10px;width:52px;height:52px;border:0;background:none;font-size:2rem;line-height:1;color:var(--muted)}
.sheet .s-top{width:150px;left:-14px;top:-6px;opacity:.55}
.sheet .mono-img{height:76px;margin:0 auto 6px}
.sheet h2{font-family:var(--serif);font-weight:500;font-size:2rem;color:var(--olive-deep);line-height:1.1;margin:4px 0 6px}
.sheet .addr{font-size:1.15rem;color:var(--ink);margin:6px auto 22px;max-width:28ch}
.sheet .stack{display:grid;gap:10px}
.sheet label.f{display:block;text-align:left;font-size:1.05rem;color:var(--muted);margin:18px 0 4px}
.sug{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;text-align:left}
.sug button{width:100%;min-height:58px;padding:10px 18px;text-align:left;border:1.5px solid var(--olive);border-radius:14px;background:rgba(255,255,255,.7);color:var(--olive-deep);font:500 1.35rem var(--serif);display:flex;align-items:center;justify-content:space-between;gap:10px}
.sug button::after{content:"Este sou eu";font:400 .8rem var(--sans);letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.sug button:active{background:var(--olive);color:#fff}
.sug button:active::after{color:#fff}
.sheet .hint{font-size:1rem;color:var(--muted);margin-top:4px}
.sheet .btn.solid{margin-top:20px;min-height:62px;font-size:1.2rem}
.sheet .stack .btn.solid{margin-top:0}
.check{width:72px;height:72px;margin:6px auto 0;fill:none;stroke:var(--olive);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.check circle{stroke-dasharray:152;stroke-dashoffset:152;animation:draw .9s ease forwards}
.check path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s ease .6s forwards;stroke:var(--olive-deep)}
@keyframes draw{to{stroke-dashoffset:0}}
.done p{font-size:1.2rem;color:var(--ink);margin:6px auto 4px;max-width:26ch}

@media (min-width:700px){.page{height:min(100dvh,900px);margin:max(0px,calc((100dvh - 900px)/2)) auto;border-radius:10px}.modal{align-items:center}.sheet{border-radius:26px}}
@media (max-height:700px){.hero-mono{height:48px}.when .hr{font-size:1.1rem}.big{min-height:52px}.verse{font-size:.92rem;margin-top:6px}.actions{margin-top:10px}.names{margin-top:10px}.arch-wrap{margin-top:8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}.page{opacity:1}}