/* Layout: papelaria de casamento em linho — coluna central estreita, seções separadas por traços de pincel dourados, uma faixa verde-mar para a programação */
:root{
  --linen:#ece5da;      /* fundo, tirado do convite */
  --linen-2:#e3dacb;    /* faixas e campos */
  --paper:#f4efe7;      /* cartões */
  --pine:#3c5249;       /* verde do monograma */
  --pine-deep:#2c3d36;
  --gold:#c39a5e;       /* dourado da moldura */
  --ink:#33413b;
  --muted:#6d7a72;
  --script:"Allison", "Snell Roundhand", cursive;
  --display:"Gilda Display", "Didot", Georgia, serif;
  --body:"Figtree", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  background:var(--linen);
  background-image:repeating-linear-gradient(0deg, rgba(120,100,70,.035) 0 1px, transparent 1px 4px),
                   repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 5px);
  color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.65;
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--linen)}
a{color:var(--pine)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--linen) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.mono{font-family:var(--script);font-size:2.4rem;line-height:1;color:var(--pine);text-decoration:none}
.mono span{color:var(--gold);font-size:1.5rem}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;overflow-x:auto}
.nav ul a{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.nav ul a:hover{color:var(--gold)}
@media (max-width:760px){.nav ul li:not(.keep){display:none}}

/* hero */
.hero{text-align:center;padding-block:40px 56px}
.hero img{width:min(460px,100%);height:auto;display:block;margin:0 auto}
.eyebrow{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4vw,2.3rem);color:var(--pine);margin:18px 0 6px;text-wrap:balance}
.hero .place{font-size:1rem;color:var(--muted);margin:0}
.btn{display:inline-block;margin-top:26px;padding:13px 30px;border:1px solid var(--pine);border-radius:999px;color:var(--pine);text-decoration:none;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;background:transparent;font-family:var(--body);cursor:pointer;transition:background .25s,color .25s}
.btn:hover,.btn.solid{background:var(--pine);color:var(--paper)}
.btn.solid:hover{background:var(--pine-deep)}

.count{display:flex;justify-content:center;gap:clamp(16px,5vw,48px);margin-top:36px;font-variant-numeric:tabular-nums}
.count div{display:grid;gap:2px}
.count b{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,5vw,2.6rem);color:var(--pine);line-height:1}
.count small{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* sections */
section{padding-block:72px;scroll-margin-top:calc(env(safe-area-inset-top,0px) + 56px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.stroke{display:block;width:120px;height:14px;margin:0 auto 18px}
.head{text-align:center;margin-bottom:40px}
.head .script{font-family:var(--script);font-size:clamp(2.8rem,7vw,4rem);line-height:1;color:var(--gold);margin:0}
.head h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.4vw,2rem);color:var(--pine);margin:4px 0 0;text-wrap:balance}
.lede{max-width:62ch;margin:0 auto;text-align:center;color:var(--ink)}
.note{font-size:.78rem;color:var(--muted);text-align:center;margin-top:14px;font-style:italic}

/* story */
.story{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.story article{min-width:0;text-align:center;padding-inline:8px}
.story .yr{font-family:var(--display);font-size:1.6rem;color:var(--gold)}
.story h3{font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--pine);margin:4px 0 6px}
.story p{margin:0;font-size:.94rem;color:var(--muted)}

/* ceremony */
.duo{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.duo>*{min-width:0}
.facts{display:grid;gap:0;border-top:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.facts div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding-block:16px;border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.facts dt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.facts dd{margin:0;font-family:var(--display);font-size:1.08rem;color:var(--pine)}
.facts dd small{display:block;font-family:var(--body);font-size:.86rem;color:var(--muted)}
.card{background:var(--paper);border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:4px;padding:28px}
.card h3{font-family:var(--display);font-weight:400;color:var(--pine);font-size:1.25rem;margin:0 0 8px}
.card p{margin:0 0 10px;font-size:.95rem}
.card ul{margin:0;padding-left:18px;font-size:.92rem;color:var(--muted)}

/* timeline band */
.band{background:var(--pine);color:var(--paper)}
.band .head .script{color:var(--gold)}
.band .head h2{color:var(--paper)}
.timeline{list-style:none;margin:0 auto;padding:0;max-width:720px;display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:0;position:relative}
.timeline::before{content:"";position:absolute;top:9px;left:12.5%;right:12.5%;height:1px;background:color-mix(in srgb,var(--gold) 70%,transparent)}
.timeline li{text-align:center;position:relative;padding-inline:6px;min-width:0}
.timeline li::before{content:"";display:block;width:19px;height:19px;margin:0 auto 14px;border-radius:50%;background:var(--pine);border:1px solid var(--gold);box-shadow:inset 0 0 0 4px var(--pine),inset 0 0 0 10px var(--gold)}
.timeline time{font-family:var(--display);font-size:1.5rem;display:block;font-variant-numeric:tabular-nums}
.timeline span{font-size:.82rem;letter-spacing:.06em;color:color-mix(in srgb,var(--paper) 78%,transparent)}
.band .note{color:color-mix(in srgb,var(--paper) 70%,transparent)}

/* place */
.map{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:4px;overflow:hidden;background:linear-gradient(180deg,#d9cfbf 0 46%,#b7c6bf 46% 100%)}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.routes{display:grid;gap:12px;margin:18px 0 22px}
.routes div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted color-mix(in srgb,var(--gold) 60%,transparent);padding-bottom:8px;font-size:.94rem}
.routes b{font-weight:500;color:var(--pine);font-variant-numeric:tabular-nums;white-space:nowrap}

/* stay */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid3>*{min-width:0}
.tag{display:inline-block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}

/* gifts */
.gifts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gift{background:var(--paper);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:4px;padding:22px 18px;text-align:center;display:grid;gap:6px;min-width:0}
.gift h3{font-family:var(--display);font-weight:400;font-size:1.05rem;color:var(--pine);margin:0}
.gift p{margin:0;font-size:.84rem;color:var(--muted);flex:1}
.gift{display:flex;flex-direction:column;align-items:center}
.pix code{display:inline-block;word-break:break-all}
.gift .price{font-family:var(--display);font-size:1.3rem;color:var(--gold);font-variant-numeric:tabular-nums}
.gift button{margin-top:6px;justify-self:center;padding:9px 18px;font-size:.66rem}
.pix{margin:28px auto 0;max-width:520px;text-align:center;font-size:.92rem}
.pix code{background:var(--linen-2);padding:4px 10px;border-radius:3px;font-size:.9rem;user-select:all}

/* rsvp */
.rsvp{max-width:620px;margin:0 auto}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.full{grid-column:1/-1}
label{display:grid;gap:6px;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-radius:3px;padding:11px 12px;width:100%}
textarea{min-height:96px;resize:vertical}
.choice{display:flex;gap:12px;flex-wrap:wrap}
.choice label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:.98rem;color:var(--ink);background:var(--paper);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-radius:999px;padding:9px 18px;cursor:pointer}
.choice input{width:auto;accent-color:var(--pine)}
.done{text-align:center;padding:28px;background:var(--paper);border:1px solid var(--gold);border-radius:4px}
.done p:first-child{font-family:var(--script);font-size:3rem;line-height:1;color:var(--pine);margin:0 0 6px}

footer{text-align:center;padding-block:56px 64px;border-top:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
footer .mono{font-size:3.4rem}
footer p{margin:6px 0 0;font-size:.82rem;color:var(--muted);letter-spacing:.08em}

/* abertura */
body.locked{overflow:hidden}
.intro{position:fixed;inset:0;z-index:50;background:var(--linen);background-image:inherit;display:grid;place-items:center;align-content:center;gap:10px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left,0px));
  transition:transform .95s cubic-bezier(.7,0,.2,1),opacity .95s ease;box-shadow:0 18px 40px rgba(44,61,54,.18)}
.intro.dragging{transition:none}
.intro.gone{transform:translateY(-105%)}
.intro.hidden-done{display:none}
.intro picture,.intro img{display:block;max-width:100%}
.intro img{width:min(620px,92vw);height:auto;max-height:70vh;object-fit:contain;animation:introIn 1.6s ease both}
.hint{display:grid;justify-items:center;gap:6px;color:var(--pine);animation:introIn 1s ease 1.2s both}
.hint svg{width:22px;height:22px;animation:bob 1.8s ease-in-out infinite}
.hint span{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase}
.hint small{font-family:var(--script);font-size:1.9rem;line-height:1;color:var(--gold);letter-spacing:0;text-transform:none}
@keyframes introIn{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.intro.gone{transform:none;opacity:0}}

/* fotos */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;grid-auto-flow:dense;gap:12px}
.ph{position:relative;margin:0;min-width:0;border-radius:3px;overflow:hidden;background:var(--linen-2);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);display:grid;place-items:center;color:var(--muted)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph .ic{display:grid;justify-items:center;gap:6px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:8px}
.ph .ic svg{width:28px;height:28px;stroke:var(--gold);fill:none;stroke-width:1.4}
.ph.tall{grid-row:span 2}
.ph.wide{grid-column:span 2}

/* vídeo */
.video{position:relative;aspect-ratio:16/9;max-width:880px;width:100%;margin:0 auto;border-radius:4px;overflow:hidden;background:var(--pine-deep);display:grid;place-items:center;border:1px solid var(--gold)}
.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video .poster{display:grid;justify-items:center;gap:14px;color:var(--paper);text-align:center;padding:16px}
.video .play{width:78px;height:78px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;background:transparent;cursor:pointer;transition:background .25s}
.video .play:hover{background:color-mix(in srgb,var(--gold) 25%,transparent)}
.video .play svg{width:26px;height:26px;fill:var(--gold);margin-left:4px}
.video .poster p{margin:0;font-family:var(--script);font-size:clamp(2.2rem,6vw,3.2rem);line-height:1;color:var(--gold)}
.video .poster small{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--paper) 75%,transparent)}

@media (max-width:820px){
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .duo{grid-template-columns:1fr}
  .gifts{grid-template-columns:repeat(2,1fr)}
  .grid3,.story{grid-template-columns:1fr}
}
@media (max-width:560px){
  section{padding-block:52px}
  .timeline{grid-template-columns:1fr;gap:22px;max-width:260px}
  .timeline::before{display:none}
  form{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr;gap:2px}
  .gifts{gap:10px}
  .gift{padding:18px 10px}
  .gift button{padding:9px 14px;letter-spacing:.14em}
  .gallery{gap:8px;grid-auto-rows:clamp(120px,36vw,160px)}
  .hero{padding-block:24px 44px}
  .card{padding:22px}
}

footer .credito{margin-top:22px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
footer .credito a{color:var(--pine);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--gold) 60%,transparent);padding-bottom:1px}
footer .credito a:hover{color:var(--gold)}

/* consulta e cartão do convite (/convite) */
.convite{max-width:560px;padding-top:max(28px,env(safe-area-inset-top,0px));padding-bottom:48px}
.convite-logo{display:block;width:150px;margin:0 auto 22px}
.convite-logo img{width:100%;height:auto;display:block}
.convite .head{margin-bottom:28px}
.consulta{grid-template-columns:1fr}
.consulta .btn{margin-top:4px}
.consulta-msg{text-align:center;margin:0 0 22px;font-size:.95rem}
.consulta-msg.erro{color:#a2412f}
.consulta-lista{display:grid;gap:14px;margin-bottom:28px}
.consulta-item{background:var(--paper);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-radius:4px;padding:20px 22px;text-align:center}
.consulta-item p{margin:0}
.consulta-item .consulta-nome{font-family:var(--display);font-size:1.25rem;color:var(--pine);margin-bottom:6px}
.consulta-item .btn{margin-top:14px}
.cartao{position:relative;background:var(--paper);border:1px solid var(--gold);border-radius:6px;padding:30px 24px 26px;text-align:center;box-shadow:0 18px 40px -26px rgba(44,61,54,.45)}
.cartao::before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:3px;pointer-events:none}
.cartao-script{font-family:var(--script);font-size:clamp(2.8rem,11vw,3.6rem);line-height:1;color:var(--gold);margin:0}
.cartao h1{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,6vw,1.9rem);color:var(--pine);margin:10px 0 2px;text-wrap:balance}
.cartao-acomp{margin:0;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cartao-codigo{margin:24px auto 0;padding:16px 10px;border-block:1px solid color-mix(in srgb,var(--gold) 55%,transparent)}
.cartao-codigo span{display:block;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.cartao-codigo strong{display:block;margin-top:6px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:500;font-size:clamp(1.9rem,9vw,2.5rem);letter-spacing:.14em;color:var(--pine)}
.cartao-qr{width:150px;margin:20px auto 0;padding:8px;background:#fff;border-radius:4px}
.cartao-qr svg{display:block;width:100%;height:auto}
.cartao-qr path{fill:var(--pine-deep)}
.cartao-ev{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 0}
.cartao-ev dt{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.cartao-ev dd{margin:4px 0 0;font-size:.88rem;line-height:1.4}
.cartao-nota{margin:20px 0 0;font-size:.8rem;font-style:italic;color:var(--muted)}
.convite-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
@media (max-width:420px){.cartao-ev{grid-template-columns:1fr}.cartao{padding-inline:18px}}
.rsvp-consulta{margin-top:22px;font-style:normal;font-size:.86rem}
/* aviso para quem está logado (portaria) ao ler o QR */
.portaria-qr{background:#eef4ec;border:1px solid #b9d0b8;border-radius:6px;padding:16px 18px;margin:0 0 18px;text-align:center}
.portaria-qr.ja{background:#fbf1de;border-color:#e6c98f}
.portaria-qr p{margin:0 0 8px}
.portaria-qr-status{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#3f6b4f}
.portaria-qr.ja .portaria-qr-status{color:#94641c}
.portaria-qr .btn{margin:4px 0 10px}
.portaria-qr a:not(.btn){font-size:.85rem}

/* envie suas fotos (/envie) */
.envie-lede{text-align:center;margin:0 auto 26px;max-width:40ch}
.envie-form{grid-template-columns:1fr;gap:16px}
.envie-form label small{letter-spacing:.1em;text-transform:none;font-size:.72rem;opacity:.8}
.envie-escolher{position:relative;display:grid;justify-items:center;gap:6px;padding:28px 18px;background:var(--paper);border:1.5px dashed color-mix(in srgb,var(--gold) 70%,transparent);border-radius:8px;text-align:center;cursor:pointer;transition:background .2s,border-color .2s}
.envie-escolher:hover,.envie-escolher:focus-within{background:#fbf7f0;border-color:var(--gold)}
.envie-escolher svg{width:40px;height:40px;color:var(--gold)}
.envie-escolher strong{font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:0;text-transform:none;color:var(--pine)}
.envie-escolher span{font-size:.72rem;letter-spacing:.12em}
.envie-escolher input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.envie-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.envie-lista:empty{display:none}
.envie-item{position:relative;margin:0;aspect-ratio:1;border-radius:4px;overflow:hidden;background:var(--linen-2);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.envie-item img{width:100%;height:100%;object-fit:cover;display:block}
.envie-item::after{position:absolute;inset:0;display:grid;place-items:center;font-size:1.4rem;color:#fff}
.envie-item.enviando::after,.envie-item.ok::after,.envie-item.erro::after{content:""}
.envie-item.enviando::after{background:rgba(44,61,54,.45)}
.envie-item.enviando::before{content:"";position:absolute;z-index:1;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:envie-gira .8s linear infinite}
.envie-item.ok::after{content:"✓";background:rgba(63,107,79,.55)}
.envie-item.erro{border-color:#a2412f;cursor:pointer}
.envie-item.erro::after{content:"!";background:rgba(162,65,47,.55);font-weight:600}
@keyframes envie-gira{to{transform:rotate(360deg)}}
.envie-rm{position:absolute;top:4px;right:4px;z-index:1;width:26px;height:26px;border-radius:50%;border:0;background:rgba(44,61,54,.75);color:#fff;font-size:1.05rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.envie-rm[hidden]{display:none}
.envie-progresso .barra{height:6px;border-radius:999px;background:var(--linen-2);overflow:hidden}
.envie-progresso i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.envie-progresso p{margin:8px 0 0;text-align:center;font-size:.85rem;color:var(--muted)}
.envie-msg{margin:0;text-align:center;font-size:.9rem;color:#a2412f}
.envie-msg:empty{display:none}
.envie-acoes{text-align:center}
.envie-acoes .btn{margin-top:0;width:100%;max-width:340px}
.envie-acoes .btn:disabled{opacity:.45;cursor:default;background:var(--pine)}
.envie-ok{text-align:center;background:var(--paper);border:1px solid var(--gold);border-radius:6px;padding:28px 22px}
.envie-ok p{margin:0 0 6px}
.envie-ok-num{font-family:var(--display);font-size:1.3rem;color:var(--pine)}
.envie-ok .btn{margin-top:16px}
.envie-links{margin-top:30px}
.envie-links .btn{margin-top:0}

/* álbum da festa (/album e prévia no site) */
.album-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.album-grade a{display:block;aspect-ratio:1;border-radius:3px;overflow:hidden;background:var(--linen-2);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.album-grade img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.album-grade a:hover img{transform:scale(1.04)}
.pg-album .convite{max-width:1100px}
.album-vazio{text-align:center;color:var(--muted)}
.album-acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.album-acoes .btn{margin-top:0}
@media (max-width:560px){.album-grade{grid-template-columns:repeat(3,1fr);gap:4px}}