/* ==========================================================================
   Formatura Dra. Luiza Bitencourt Schlichting · Medicina 2026
   Identidade: paleta e famílias tipográficas da folha de identidade e do convite.
   ========================================================================== */

@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-opsz-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Gilda Display";src:url(../fonts/gilda-display-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Ms Madi";src:url(../fonts/ms-madi-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/eb-garamond-latin-wght-normal.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/eb-garamond-latin-wght-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

:root{
  /* paleta amostrada da folha de identidade */
  --papel:#f5efe8; --papel-frio:#f1ecee; --creme:#e3d5ba;
  --ouro:#c8ae7d; --ouro-2:#a07e4e; --marrom:#71512b;
  --oliva:#565946; --floresta:#24483c; --malva:#837880;
  --vinho:#6b405b; --roxo:#654380; --lilas:#c9b3e1; --noite:#211726;

  --bg:var(--papel); --fg:#412b39; --suave:#7d6672;
  --acento:var(--vinho); --destaque:var(--ouro-2);
  --linha:rgba(107,64,91,.26);

  --f-display:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --f-caps:"Gilda Display","Cormorant Garamond",Georgia,serif;
  --f-script:"Ms Madi","Snell Roundhand","Apple Chancery",cursive;
  --f-texto:"EB Garamond",Georgia,"Times New Roman",serif;

  --gutter:clamp(20px,5vw,84px);
  --nav-h:72px;
}

/* temas por dia */
body[data-tema="missa"]{--bg:#f8f1e3; --fg:#33382b; --suave:#6f705c; --acento:var(--oliva); --destaque:var(--ouro-2); --linha:rgba(86,89,70,.3)}
body[data-tema="colacao"]{--bg:var(--papel-frio); --fg:#452a3b; --suave:#7d6672; --acento:var(--vinho); --destaque:var(--ouro-2); --linha:rgba(107,64,91,.28)}
body[data-tema="baile"]{--bg:var(--noite); --fg:#f1e6d8; --suave:#bfaec0; --acento:var(--lilas); --destaque:var(--ouro); --linha:rgba(201,179,225,.28)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
h1,h2,.display{text-wrap:balance}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-texto); font-size:clamp(18px,1.05vw + 14px,21px); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
img,svg,canvas{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--destaque); outline-offset:4px; border-radius:4px}
::selection{background:var(--lilas); color:#2a1830}
[hidden]{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* textura de papel, como no convite */
.papel{position:relative}
.papel::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .42  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.papel > *{position:relative}

/* ---------- tipografia ---------- */
.caps{font-family:var(--f-caps); text-transform:uppercase; letter-spacing:.16em; font-size:.78em; line-height:1.5}
.script{font-family:var(--f-script); font-weight:400; line-height:1}
.display{font-family:var(--f-display); font-weight:400; line-height:1.04; letter-spacing:-.012em; font-optical-sizing:auto}
.display i,.display em{font-style:italic}
.lede{font-size:1.14em; line-height:1.55; max-width:34em}
.medida{max-width:36em}

/* ---------- monograma ---------- */
.ls{width:1em; height:2.035em; fill:currentColor}

/* ---------- botões ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:48px; padding:.7em 1.7em; border:1px solid currentColor; border-radius:999px; background:none; color:inherit; font-family:var(--f-caps); font-size:.74em; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background-color .25s,color .25s,border-color .25s}
.btn:hover{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn--cheio{background:var(--acento); border-color:var(--acento); color:var(--bg)}
.btn--cheio:hover{background:var(--fg); border-color:var(--fg); color:var(--bg)}
.btn--ouro{background:var(--ouro); border-color:var(--ouro); color:#2a1c2b}
.btn--ouro:hover{background:#f1e6d8; border-color:#f1e6d8; color:#2a1c2b}
.link{font-family:var(--f-caps); font-size:.76em; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; padding-bottom:.35em; border-bottom:1px solid currentColor}
.link:hover{border-bottom-color:transparent}

/* ---------- navegação ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 var(--gutter); color:var(--nav-fg,var(--fg)); opacity:var(--nav-op,1)}
.nav::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--nav-bg,var(--bg)); opacity:0; transition:opacity .35s; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.nav.rolou::before{opacity:.86}
.nav-marca{display:flex; align-items:center; gap:14px; text-decoration:none}
.nav-marca .ls{font-size:19px}
.nav-marca span{font-family:var(--f-caps); font-size:13px; letter-spacing:.2em; text-transform:uppercase}
.nav-links{display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); list-style:none; margin:0; padding:0}
.nav-links a{font-family:var(--f-caps); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; padding:8px 0; border-bottom:1px solid transparent; transition:border-color .35s}
.nav-links a:hover,.nav-links a[aria-current="page"]{border-bottom-color:currentColor}
.nav-acoes{display:flex; align-items:center; gap:12px}
.nav .btn{min-height:40px; padding:.55em 1.3em; font-size:11.5px}
.nav .btn:hover{background:var(--nav-fg,var(--fg)); border-color:var(--nav-fg,var(--fg)); color:var(--nav-bg,var(--bg))}
.menu-btn{display:none}
@media (max-width:900px){
  :root{--nav-h:62px}
  .nav-marca span{display:none}
  .menu-btn{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border:0; background:none; color:inherit; cursor:pointer; padding:0}
  .menu-btn i{position:relative; width:22px; height:1px; background:currentColor; display:block}
  .menu-btn i::before,.menu-btn i::after{content:""; position:absolute; left:0; width:22px; height:1px; background:currentColor; transition:transform .25s}
  .menu-btn i::before{top:-7px} .menu-btn i::after{top:7px}
  .nav.aberto .menu-btn i{background:transparent}
  .nav.aberto .menu-btn i::before{transform:translateY(7px) rotate(45deg)}
  .nav.aberto .menu-btn i::after{transform:translateY(-7px) rotate(-45deg)}
  .nav-links{position:fixed; inset:0; z-index:-2; flex-direction:column; justify-content:center; gap:26px; background:var(--noite); color:#f1e6d8; opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s}
  .nav-links a{font-size:15px; letter-spacing:.22em}
  .nav.aberto .nav-links{opacity:1; visibility:visible}
  .nav.aberto{color:#f1e6d8; opacity:1}
  .nav.aberto::before{opacity:0}
}

/* ---------- capa: o camafeu que cresce ---------- */
.h-stage{position:relative; height:700vh}
.h-pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--papel); color:#412b39;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; column-gap:clamp(40px,5.4vw,104px); padding:calc(var(--nav-h) + 8px) clamp(20px,4vw,64px) 16px}
.h-flor{position:absolute; pointer-events:none; will-change:transform; z-index:0; width:auto; height:auto; max-width:none}
.h-flor--a{right:0; top:50%; height:min(88svh,1000px); width:auto; max-width:none; transform:translate(calc(46% + var(--abre,0) * 20%),-50%)}
.h-flor--b{display:none; left:0; top:0; height:min(46svh,520px); width:auto; max-width:none; transform:translate(calc(-8% - var(--abre,0) * 30%),calc(-6% - var(--abre,0) * 26%))}
.h-flor--c{left:0; bottom:0; width:min(22vw,320px); transform:translate(calc(-18% - var(--abre,0) * 40%),calc(var(--abre,0) * 46%))}

.h-falas{position:relative; z-index:2; display:grid; justify-self:end; max-width:26rem; width:100%}
.h-fala{grid-area:1/1; align-self:center; opacity:0; will-change:opacity,transform,filter}
.h-fala .script{font-size:clamp(46px,4.6vw,78px); color:var(--h-acento,var(--vinho)); margin-bottom:.1em}
.h-fala .display{font-size:clamp(34px,3.5vw,60px); margin-top:.25em}
.h-fala p:not(.display):not(.script){margin-top:1.1em; max-width:22em; text-wrap:pretty}
.h-fala .display{text-wrap:balance}
.h-fala .caps{display:block; margin-bottom:1.4em; color:var(--h-acento,var(--vinho))}
.h-fala--nome .display{font-size:clamp(36px,3.9vw,66px)}
.h-fala .btn{margin-top:1.8em}

.cameo{position:relative; z-index:2; height:min(72svh,860px); aspect-ratio:3/4; justify-self:center}
.cameo canvas,.cameo .cameo-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-clip-path:ellipse(50% 50% at 50% 50%); clip-path:ellipse(50% 50% at 50% 50%)}
.cameo canvas{opacity:0; transition:opacity .4s}
.cameo.pronto canvas{opacity:1}
.cameo-anel{position:absolute; left:-10%; top:-7.5%; width:120%; height:115%; max-width:none; overflow:visible; pointer-events:none; color:var(--h-acento,var(--vinho)); opacity:var(--h-op,1)}
/* halo: a cor da foto vaza de leve para o fundo, para o camafeu não ficar recortado */
.h-aura{position:absolute; left:50%; top:50%; width:230%; height:190%; transform:translate(-50%,-50%); z-index:-1; pointer-events:none; border-radius:50%;
  background:radial-gradient(closest-side,rgb(var(--aura,233 194 180) / .42) 0,rgb(var(--aura,233 194 180) / .2) 38%,rgb(var(--aura,233 194 180) / .06) 68%,rgb(var(--aura,233 194 180) / 0) 100%)}
.cameo-anel ellipse{fill:none; stroke:currentColor; stroke-width:.6; vector-effect:non-scaling-stroke}
.cameo-anel text{font-family:var(--f-caps); font-size:10.4px; letter-spacing:.2em; fill:currentColor}

.h-tempos{position:relative; z-index:2; justify-self:start; list-style:none; margin:0; padding:0 0 0 22px; display:grid; gap:34px; border-left:1px solid color-mix(in srgb,currentColor 22%,transparent); opacity:var(--h-op,1)}
.h-tempos::after{content:""; position:absolute; left:-1px; top:0; width:1px; height:100%; background:currentColor; transform-origin:top; transform:scaleY(var(--p,0))}
.h-tempos li{position:relative; font-family:var(--f-caps); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.36}
.h-tempos li::before{content:""; position:absolute; left:-26.5px; top:.55em; width:8px; height:8px; border-radius:50%; background:currentColor; transform:scale(calc(.45 + .55 * var(--w,0)))}
.h-tempos li:first-child{opacity:1; --w:1}
.h-role{display:block; width:1px; height:44px; margin-top:26px; background:currentColor; transform-origin:top; animation:role 2.2s ease-in-out infinite}
@keyframes role{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1); opacity:0}}
.h-carga{position:absolute; left:0; bottom:0; z-index:4; height:3px; width:100%; background:var(--ouro); transform-origin:left; transform:scaleX(0); transition:transform .3s,opacity .6s}

@media (max-width:900px){
  .h-stage{height:620vh}
  .h-pin{grid-template-columns:1fr; grid-template-rows:auto 1fr; row-gap:0; padding:calc(var(--nav-h) + 4.5svh) 22px 0; align-items:start}
  .cameo{grid-row:1; height:auto; width:min(74vw,46svh * .75); justify-self:center}
  .h-falas{grid-row:2; justify-self:center; text-align:center; max-width:23rem; align-self:start; margin-top:6.2svh}
  .h-fala{align-self:start}
  .h-fala .script{font-size:clamp(40px,12vw,56px)}
  .h-fala .display{font-size:clamp(28px,7.6vw,38px)}
  .h-fala--nome .display{font-size:clamp(29px,7.9vw,40px)}
  .h-fala p:not(.display):not(.script){margin:.8em auto 0; font-size:17px; line-height:1.5}
  .h-fala .caps{margin-bottom:.9em; font-size:11.5px}
  .h-fala .btn{margin-top:1.1em}
  .h-tempos{display:none}
  .h-flor--a{height:54svh; top:0; transform:translate(calc(58% + var(--abre,0) * 22%),calc(-12% - var(--abre,0) * 12%))}
  .h-flor--b{height:26svh; transform:translate(calc(-22% - var(--abre,0) * 34%),calc(-10% - var(--abre,0) * 30%))}
  .h-flor--c{display:none}
  .h-role{margin:16px auto 0; height:30px}
}
@media (max-width:900px) and (max-height:700px){
  .cameo{width:min(64vw,40svh * .75)}
  .h-falas{margin-top:4.6svh}
  .h-fala p:not(.display):not(.script){font-size:16px}
}

/* sem movimento: três tempos lado a lado */
.h-estatico{display:none}
.reduzido .h-stage{height:auto}
.reduzido .h-pin{position:relative; height:auto; display:block; padding:calc(var(--nav-h) + 40px) var(--gutter) 64px}
.reduzido .h-pin > :not(.h-estatico){display:none}
.reduzido .h-estatico{display:block; text-align:center}
.reduzido .h-estatico ol{list-style:none; margin:40px auto 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,220px)); gap:24px; justify-content:center}
.reduzido .h-estatico img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; -webkit-clip-path:ellipse(50% 50% at 50% 50%); clip-path:ellipse(50% 50% at 50% 50%); margin-bottom:14px}
@media (max-width:700px){ .reduzido .h-estatico ol{grid-template-columns:minmax(0,240px)} }

/* ---------- seções ---------- */
.sec{position:relative; padding:clamp(88px,13vh,168px) var(--gutter); overflow:hidden}
.sec--noite{background:var(--noite); color:#f1e6d8; --fg:#f1e6d8; --bg:var(--noite); --acento:var(--lilas); --suave:#bfaec0; --linha:rgba(201,179,225,.28)}
.sec--floresta{background:#1f3d33; color:#f1e8d8; --fg:#f1e8d8; --bg:#1f3d33; --acento:var(--ouro); --suave:#b9c4b4; --linha:rgba(200,174,125,.32)}
.sec--papel{background:var(--papel); color:#412b39; --fg:#412b39; --bg:var(--papel); --acento:var(--vinho)}
.centro{max-width:46rem; margin-inline:auto; text-align:center}
.centro .lede,.centro .medida{margin-inline:auto}
.sec h2.display{font-size:clamp(34px,4.4vw,68px)}
.sec .script.titulo{font-size:clamp(64px,8.5vw,136px); color:var(--acento); margin-bottom:.12em}
.flor{position:absolute; pointer-events:none; max-width:none; width:auto; height:auto}

/* convite */
.convite .emblema{width:clamp(92px,9vw,128px); margin:0 auto 34px; color:var(--ouro)}
.convite .para{font-family:var(--f-script); font-size:clamp(40px,4.4vw,64px); color:var(--ouro); line-height:1.1; margin-bottom:.35em}
.convite .display{font-size:clamp(28px,3.3vw,50px); line-height:1.16}
.convite .datas{margin-top:2.4em; color:var(--ouro); font-size:.86em; display:grid; gap:.5em}
.convite .flor--1{right:0; top:50%; height:min(96%,760px); transform:translate(40%,-50%)}
.convite .flor--2{left:0; top:50%; height:min(96%,760px); transform:translate(-40%,-50%) scaleX(-1)}
@media (max-width:900px){
  .convite{padding-top:120px; padding-bottom:150px}
  .convite .flor--1{top:auto; bottom:0; height:300px; transform:translate(44%,36%)}
  .convite .flor--2{top:0; height:300px; transform:translate(-44%,-38%) scaleX(-1)}
}

/* três dias */
.dias-cab{max-width:44rem; margin:0 auto clamp(48px,7vh,88px); text-align:center}
.portas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,44px); max-width:1320px; margin-inline:auto; align-items:end}
.porta{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; text-decoration:none; min-height:clamp(520px,66vh,700px); padding:clamp(72px,9vh,112px) clamp(22px,2.4vw,40px) 44px; border-radius:1000px 1000px 0 0; overflow:hidden; isolation:isolate; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.porta:hover{transform:translateY(-10px)}
.porta-dia{font-family:var(--f-caps); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase}
.porta-num{font-family:var(--f-display); font-size:clamp(84px,8.4vw,136px); line-height:.95; margin-top:.12em}
.porta-mes{font-family:var(--f-caps); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase}
.porta-nome{font-family:var(--f-script); font-size:clamp(46px,4.4vw,70px); line-height:1.05; margin-top:.42em}
.porta-desc{margin-top:.9em; max-width:17em; font-size:.95em; line-height:1.5}
.porta-ir{margin-top:auto; padding-top:28px; text-decoration:none; color:inherit}
.porta-ir span{font-family:var(--f-caps); font-size:12px; letter-spacing:.2em; text-transform:uppercase; padding-bottom:.4em; border-bottom:1px solid currentColor}
.porta .flor{z-index:-1; transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.porta--missa{background:#ece3cf; color:#33382b}
.porta--missa .porta-nome{color:var(--ouro-2)}
.porta--missa .flor{left:0; bottom:0; width:60%; transform:translate(-10%,26%)}
.porta--missa:hover .flor{transform:translate(-6%,20%)}
.porta--colacao{background:var(--vinho); color:#f6ebe2; min-height:clamp(560px,72vh,760px)}
.porta--colacao .porta-nome{color:var(--creme)}
.porta--colacao .flor{right:0; bottom:0; height:46%; transform:translate(52%,40%)}
.porta--colacao:hover .flor{transform:translate(48%,35%)}
.porta--baile{background:var(--noite); color:#f1e6d8}
.porta--baile .porta-nome{color:var(--ouro)}
.porta--baile .flor{right:0; bottom:0; width:60%; transform:translate(10%,26%) scaleX(-1)}
.porta--baile:hover .flor{transform:translate(6%,20%) scaleX(-1)}
@media (max-width:900px){
  .portas{grid-template-columns:1fr; max-width:420px; gap:26px}
  .porta,.porta--colacao{min-height:540px}
}

/* presença + contagem */
.contagem{display:flex; justify-content:center; align-items:baseline; gap:.3em; font-family:var(--f-display); line-height:.9}
.contagem b{font-weight:400; font-size:clamp(96px,15vw,236px); color:var(--acento); font-variant-numeric:lining-nums}
.contagem span{font-family:var(--f-script); font-size:clamp(44px,5vw,78px)}
.presenca .display{margin-top:.5em}
.presenca .lede{margin-top:1.1em}
.presenca .btn{margin-top:2em}
.presenca .flor--1{left:0; bottom:0; width:min(44vw,620px); transform:translate(-14%,22%)}
.presenca .flor--2{right:0; top:0; height:min(70%,560px); transform:translate(18%,-12%) scaleX(-1)}
@media (max-width:900px){ .presenca{padding-bottom:210px} .presenca .flor--1{width:88vw; transform:translate(-14%,6%)} .presenca .flor--2{height:230px; transform:translate(34%,-30%) scaleX(-1)} .presenca{padding-top:150px} }

/* ---------- páginas dos dias ---------- */
.d-hero{position:relative; min-height:100vh; min-height:100svh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(28px,5vw,96px); padding:calc(var(--nav-h) + 40px) var(--gutter) 72px; overflow:hidden}
.d-hero-txt{position:relative; z-index:2; max-width:38rem; justify-self:end; width:100%}
.d-hero .caps{color:var(--acento)}
.d-hero .script{font-size:clamp(84px,11.5vw,196px); color:var(--acento); margin:.16em 0 0 -.04em; padding-right:.2em}
.d-hero h1 .display{display:block; font-size:clamp(30px,3.6vw,58px); margin-top:.1em}
.d-hero .lede{margin-top:1.5em}
.d-hero-acoes{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; margin-top:2.2em}
.d-falta{font-family:var(--f-caps); font-size:.74em; letter-spacing:.16em; text-transform:uppercase; color:var(--suave)}
.d-arco{position:relative; z-index:1; justify-self:start; width:min(100%,460px); aspect-ratio:3/4.3; border-radius:1000px 1000px 0 0; overflow:hidden; isolation:isolate}
.d-arco img.foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 18%}
.d-arco-borda{position:absolute; z-index:0; justify-self:start; pointer-events:none}
.d-hero .flor{z-index:0}
@media (max-width:900px){
  .d-hero{grid-template-columns:1fr; padding-top:calc(var(--nav-h) + 26px); gap:38px; align-items:start}
  .d-hero-txt{justify-self:start; order:2}
  .d-arco{order:1; justify-self:center; width:min(66vw,300px)}
  .d-hero .script{font-size:clamp(74px,23vw,112px)}
}

/* ficha do evento */
.ficha{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha); max-width:1240px; margin-inline:auto}
.ficha > div{padding:34px clamp(16px,2vw,34px); border-left:1px solid var(--linha)}
.ficha > div:first-child{border-left:0; padding-left:0}
.ficha dt{font-family:var(--f-caps); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--suave); margin-bottom:.9em}
.ficha dd{margin:0; font-family:var(--f-display); font-size:clamp(21px,1.7vw,28px); line-height:1.25}
.ficha dd small{display:block; font-family:var(--f-texto); font-size:16px; line-height:1.45; margin-top:.5em; color:var(--suave)}
.ficha dd.pendente{font-style:italic; color:var(--suave)}
.ficha-acoes{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:44px}
@media (max-width:900px){
  .ficha{grid-template-columns:1fr 1fr}
  .ficha > div{padding:24px 14px; border-left:0; border-top:1px solid var(--linha)}
  .ficha > div:nth-child(-n+2){border-top:0}
  .ficha > div:nth-child(even){border-left:1px solid var(--linha); padding-left:18px}
  .ficha > div:nth-child(odd){padding-left:0}
}

/* texto + imagem */
.duo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,120px); align-items:center; max-width:1240px; margin-inline:auto}
.duo h2.display{font-size:clamp(32px,3.8vw,60px)}
.duo p + p{margin-top:1em}
.duo .lede{margin-top:1.2em}
@media (max-width:900px){ .duo{grid-template-columns:1fr} }

/* dois atos (sexta) */
.atos{display:grid; grid-template-columns:1fr 1fr; max-width:1240px; margin:clamp(40px,6vh,72px) auto 0; border-top:1px solid var(--linha)}
.ato{padding:44px clamp(20px,3.4vw,60px) 12px 0}
.ato + .ato{padding-left:clamp(20px,3.4vw,60px); padding-right:0; border-left:1px solid var(--linha)}
.ato .caps{color:var(--suave)}
.ato h3{font-family:var(--f-script); font-weight:400; font-size:clamp(50px,5vw,82px); line-height:1.05; color:var(--acento); margin:.18em 0 .3em}
.ato dl{margin:1.6em 0 0; display:grid; gap:1em}
.ato dt{font-family:var(--f-caps); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--suave)}
.ato dd{margin:.2em 0 0; font-family:var(--f-display); font-size:clamp(20px,1.5vw,25px); line-height:1.3}
.ato dd small{display:block; font-family:var(--f-texto); font-size:16px; color:var(--suave); margin-top:.35em}
.ato dd.pendente{font-style:italic; color:var(--suave)}
.ato .ficha-acoes{justify-content:flex-start; margin-top:30px}
@media (max-width:900px){ .atos{grid-template-columns:1fr} .ato,.ato + .ato{padding:36px 0 8px; border-left:0} .ato + .ato{border-top:1px solid var(--linha); margin-top:28px} }

/* recado → WhatsApp */
.recado{max-width:38rem; margin:clamp(30px,5vh,52px) auto 0; text-align:left}
.recado label{display:block; font-family:var(--f-caps); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--suave); margin:22px 0 8px}
.recado input,.recado textarea{width:100%; font:inherit; color:inherit; background:transparent; border:0; border-bottom:1px solid var(--linha); padding:10px 0 12px; border-radius:0; resize:vertical; transition:border-color .35s}
.recado input::placeholder,.recado textarea::placeholder{color:var(--suave); opacity:.75; font-style:italic}
.recado input:focus,.recado textarea:focus{outline:0; border-bottom-color:var(--destaque)}
.recado .btn{margin-top:30px}
.recado-ok{margin-top:18px; font-style:italic; color:var(--suave); min-height:1.6em}
.recado-ok:not(:empty){animation:acende .7s ease-out}

/* velas (missa) */
/* o espaço das velas abre aos poucos quando a primeira acende, sem empurrar o formulário de uma vez */
.velas{display:flex; flex-wrap:wrap; justify-content:center; gap:18px 22px; margin:0 auto; max-width:34rem; max-height:0; list-style:none; padding:0; transition:max-height .8s cubic-bezier(.2,.7,.2,1),margin-top .8s cubic-bezier(.2,.7,.2,1)}
.velas.tem{max-height:220px; margin-top:44px}
.velas.ja{transition:none}
.vela{position:relative; width:14px; height:64px; margin-top:22px; border-radius:3px 3px 2px 2px; background:linear-gradient(90deg,#efe4cf,#fbf6ea 45%,#e0d2b6)}
.vela::before{content:""; position:absolute; left:50%; top:-20px; width:10px; height:18px; margin-left:-5px; border-radius:50% 50% 50% 50%/62% 62% 38% 38%; background:radial-gradient(ellipse at 50% 78%,#fff6cf 0 22%,#f3b952 55%,#d98324 100%); transform-origin:50% 100%; animation:chama 2.6s ease-in-out infinite}
.vela::after{content:""; position:absolute; left:50%; top:-34px; width:54px; height:54px; margin-left:-27px; border-radius:50%; background:radial-gradient(closest-side,rgba(243,185,82,.34),transparent); pointer-events:none}
.vela:nth-child(2n)::before{animation-delay:-.9s} .vela:nth-child(3n)::before{animation-delay:-1.7s}
.vela.nova{animation:acende .9s ease-out}
@keyframes chama{0%,100%{transform:scale(1) rotate(-2deg)}35%{transform:scale(1.06,1.14) rotate(2deg)}70%{transform:scale(.96,.94) rotate(-1deg)}}
@keyframes acende{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* pedidos (baile) */
.pedidos{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.pedidos li{border:1px solid var(--linha); border-radius:999px; padding:.3em 1em; font-size:.92em; font-style:italic; animation:acende .7s ease-out}

/* troca de dia */
.troca{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--linha)}
.troca a{display:block; padding:clamp(40px,7vh,84px) var(--gutter); text-decoration:none; transition:background-color .35s}
.troca a:hover{background:color-mix(in srgb,var(--acento) 10%,transparent)}
.troca a + a{border-left:1px solid var(--linha); text-align:right}
.troca .caps{color:var(--suave); display:block; margin-bottom:.6em}
.troca .script{font-size:clamp(46px,5.4vw,90px); color:var(--acento)}
@media (max-width:700px){ .troca{grid-template-columns:1fr} .troca a + a{border-left:0; border-top:1px solid var(--linha); text-align:left} }

/* rodapé */
.rodape{background:var(--noite); color:#e9dccd; padding:72px var(--gutter) 40px; text-align:center}
.rodape .ls{font-size:30px; margin:0 auto 22px; color:var(--ouro)}
.rodape .nome{font-family:var(--f-display); font-size:clamp(22px,2vw,30px)}
.rodape .caps{margin-top:.8em; color:var(--ouro)}
.rodape ul{list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px; margin:38px 0 0; padding:0}
.rodape ul a{font-family:var(--f-caps); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; padding-bottom:.3em; border-bottom:1px solid transparent; transition:border-color .35s}
.rodape ul a:hover{border-bottom-color:currentColor}
.rodape small{display:block; margin-top:44px; font-size:14px; color:#a593a8}

/* diálogo de presença */
dialog.rsvp{width:min(92vw,520px); border:0; padding:0; border-radius:260px 260px 6px 6px; background:var(--papel); color:#412b39; --fg:#412b39; --bg:var(--papel); --acento:var(--vinho); --suave:#7d6672; --linha:rgba(107,64,91,.28); --destaque:var(--ouro-2)}
dialog.rsvp::backdrop{background:rgba(26,16,30,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.rsvp form{padding:86px clamp(26px,6vw,52px) 40px}
.rsvp .script{font-size:60px; text-align:center; color:var(--vinho)}
.rsvp p.sub{text-align:center; margin-top:.4em; color:var(--suave); font-size:17px}
.rsvp fieldset{border:0; margin:26px 0 0; padding:0; display:grid; gap:2px}
.rsvp legend{font-family:var(--f-caps); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--suave); margin-bottom:10px; padding:0}
.rsvp .op{display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--linha); cursor:pointer}
.rsvp .op input{appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0; border:1px solid var(--vinho); border-radius:50%; flex:none; cursor:pointer; transition:background-color .2s,box-shadow .2s}
.rsvp .op input:checked{background:var(--vinho); box-shadow:inset 0 0 0 4px var(--papel)}
.rsvp .op b{font-family:var(--f-display); font-weight:400; font-size:21px}
.rsvp .op small{margin-left:auto; font-family:var(--f-caps); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--suave)}
.rsvp .recado{margin-top:6px}
.rsvp .linha2{display:grid; grid-template-columns:1fr 110px; gap:18px}
.rsvp-acoes{display:flex; gap:12px; justify-content:space-between; align-items:center; margin-top:30px}
@media (max-width:520px){ .rsvp-acoes{flex-direction:column-reverse; align-items:stretch; gap:6px} .rsvp-fechar{text-align:center} }
.rsvp-fechar{background:none; border:0; color:var(--suave); font:inherit; font-style:italic; cursor:pointer; padding:10px 0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .vela::before,.h-role{animation:none}
  .porta,.porta .flor{transition:none}
}

/* ---------- complementos das páginas dos dias ---------- */
.sec--vinho{background:#5a3350; color:#f6ebe2; --fg:#f6ebe2; --bg:#5a3350; --acento:var(--creme); --suave:#d9c3cf; --linha:rgba(246,235,226,.3); --destaque:var(--ouro)}
.sec--faixa{background:color-mix(in srgb,var(--acento) 9%,var(--bg))}
.flor--lado{right:0; top:50%; height:min(120%,900px); transform:translate(56%,-50%)}
@media (max-width:900px){ .flor--lado{top:auto; bottom:0; height:250px; transform:translate(46%,34%)} .d-hero .caps{font-size:12px; letter-spacing:.12em} }
.d-arco--marca{background:color-mix(in srgb,var(--acento) 13%,var(--bg)); display:grid; place-items:center}
.d-arco--marca .ls{font-size:clamp(96px,11vw,150px); color:var(--acento); margin-top:14%}
.d-arco--marca .flor{position:absolute}
.d-arco--marca .caps{position:absolute; left:0; right:0; bottom:8%; text-align:center; color:var(--acento)}
body[data-tema="missa"] .d-arco--marca .flor--1{right:0; top:0; width:74%; transform:translate(24%,-8%)}
body[data-tema="missa"] .d-arco--marca .flor--2{left:0; bottom:0; width:120%; transform:translate(-34%,52%)}
body[data-tema="baile"] .d-arco--marca{background:#2c1f33; box-shadow:inset 0 0 0 1px rgba(200,174,125,.5)}
body[data-tema="baile"] .d-arco--marca .ls,body[data-tema="baile"] .d-arco--marca .caps{color:var(--ouro)}
body[data-tema="baile"] .d-arco--marca .flor--1{right:0; bottom:0; height:76%; transform:translate(52%,22%)}
body[data-tema="baile"] .d-arco--marca .flor--2{left:0; top:0; width:70%; transform:translate(-30%,-12%)}
body[data-tema="baile"] .d-hero .script{color:var(--ouro)}
.d-hero .flor--canto{right:0; bottom:0; width:min(30vw,420px); transform:translate(30%,14%) scaleX(-1)}
.d-hero .flor--topo{left:0; top:0; height:min(40vh,420px); transform:translate(-48%,-8%)}
@media (max-width:900px){ .d-hero .flor--canto,.d-hero .flor--topo{display:none} }
.sec--buque{min-height:min(86vh,760px); display:grid; align-items:center}
.sec--buque .txt{max-width:min(36rem,56%); margin-left:max(0px,calc((100% - 1240px) / 2))}
.sec--buque h2.display{font-size:clamp(32px,3.8vw,60px)}
.sec--buque .flor{right:0; top:50%; height:min(118%,900px); transform:translate(26%,-50%)}
@media (max-width:900px){ .sec--buque{padding-bottom:300px} .sec--buque .txt{max-width:none} .sec--buque .flor{top:auto; bottom:0; height:360px; transform:translate(34%,30%)} }
.traje{max-width:1240px; margin:36px auto 0; display:flex; gap:1.2em; align-items:baseline; padding-top:26px; border-top:1px solid var(--linha)}
.traje dt{font-family:var(--f-caps); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--suave)}
.traje dd{margin:0; font-family:var(--f-display); font-size:clamp(20px,1.5vw,25px)}
.traje dd.pendente{font-style:italic; color:var(--suave)}
.sec > .cab{max-width:1240px; margin-inline:auto}
.so-pc{display:inline}
@media (max-width:520px){ .so-pc{display:none} }

/* ==========================================================================
   CONTINUIDADE
   Um fundo só (na raiz), cuja cor o fusao.js mistura conforme a rolagem.
   As seções ficam transparentes; sem JS ou com "reduzir movimento" valem
   as faixas de cor definidas acima.
   ========================================================================== */
html{background:var(--bg-pagina,#f5efe8)}
html.fusao{background:rgb(var(--f))}
.fusao body{background:transparent}
.fusao [data-cena],.fusao .sec,.fusao .d-hero,.fusao .rodape,.fusao .h-pin{background:transparent}
/* flores podem passar de uma cena para a outra na vertical, mas nunca alargar a página */
.fusao .sec,.fusao .d-hero{overflow:hidden}
@supports (overflow:clip){ .fusao .sec,.fusao .d-hero{overflow-x:clip; overflow-y:visible} body{overflow-x:clip} }
.fusao .papel::before{display:none}
.fusao .nav::before{display:none}
/* textura de papel: aparece nos tons claros e some nos escuros */
.fusao body::before{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:var(--tx,0); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .38  0 0 0 0 .42  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
/* véu do topo: o que sobe se dissolve na cor do fundo antes de chegar ao menu */
.fusao body::after{content:""; position:fixed; inset:0 0 auto 0; height:calc(var(--nav-h) + 58px); z-index:50; pointer-events:none; opacity:var(--veu,1);
  background:linear-gradient(to bottom,rgb(var(--fv,var(--f))) 0,rgb(var(--fv,var(--f))) 40%,rgb(var(--fv,var(--f)) / .9) 55%,rgb(var(--fv,var(--f)) / .62) 70%,rgb(var(--fv,var(--f)) / .28) 85%,rgb(var(--fv,var(--f)) / 0) 100%)}
/* cada detalhe: opacidade e deslocamento vêm da rolagem */
[data-v]{opacity:var(--v,1); translate:0 var(--y,0px)}

/* cenas que cruzam claro/escuro ocupam a tela inteira, para a cor ter onde repousar entre uma fusão e outra */
.fusao .convite,.fusao .presenca,.fusao .sec--buque,.fusao .sec--floresta,.fusao .sec--vinho{min-height:100vh; min-height:100svh; display:grid; align-items:center}
.fusao .convite > .centro,.fusao .presenca > .centro,.fusao .sec--floresta > .centro,.fusao .sec--vinho > .centro{width:100%; justify-self:center}

/* flores: borda de recorte esfumada, nunca uma linha reta */
.f-topo{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%); mask-image:linear-gradient(to bottom,transparent 0,#000 20%)}
.f-base{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 18%); mask-image:linear-gradient(to top,transparent 0,#000 18%)}
.porta .flor,.d-arco .flor{-webkit-mask-image:none; mask-image:none}

/* fecho: troca de dia + rodapé, uma cena só */
.fecho{background:var(--noite); color:#f1e6d8; --fg:#f1e6d8; --bg:var(--noite); --acento:var(--ouro); --suave:#bfaec0; --linha:rgba(201,179,225,.22)}
.fecho .troca{border-top-color:var(--linha)}
.fecho .troca a:hover{background:rgba(201,179,225,.07)}
.fecho .rodape{background:transparent}

/* diálogo de presença abre e fecha sem estalo */
dialog.rsvp[open]{animation:dlg-abre .5s cubic-bezier(.2,.7,.2,1)}
dialog.rsvp[open]::backdrop{animation:fundo-abre .5s ease}
dialog.rsvp.fechando{animation:dlg-fecha .26s ease forwards}
dialog.rsvp.fechando::backdrop{animation:fundo-fecha .26s ease forwards}
@keyframes dlg-abre{from{opacity:0; transform:translateY(26px) scale(.97)}}
@keyframes dlg-fecha{to{opacity:0; transform:translateY(14px) scale(.985)}}
@keyframes fundo-abre{from{opacity:0}}
@keyframes fundo-fecha{to{opacity:0}}

/* troca de página: fusão entre documentos onde o navegador oferece; nos demais, a página se apaga e a nova surge */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.6s; animation-timing-function:ease}
body{animation:pagina-entra .9s ease backwards}
.vt body{animation:none}
.saindo body{opacity:0; transition:opacity .28s ease}
@keyframes pagina-entra{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  body,dialog.rsvp[open],dialog.rsvp[open]::backdrop{animation:none}
  @view-transition{navigation:none}
}

/* ---- colação: o bolo da aprovação ---- */
.sec--bolo .memoria{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,110px); align-items:center; max-width:1240px; margin-inline:auto; position:relative; z-index:1}
.sec--bolo .txt{max-width:none; margin-left:0}
.sec--bolo .memoria-foto{position:relative; justify-self:center; width:min(100%,520px); border-radius:1000px 1000px 0 0; overflow:hidden; box-shadow:0 0 0 1px color-mix(in srgb,var(--destaque) 70%,transparent), 0 30px 60px -30px rgb(0 0 0 / .35)}
.sec--bolo .memoria-foto::before{content:""; position:absolute; inset:10px; z-index:2; border-radius:1000px 1000px 0 0; border:1px solid var(--destaque); opacity:.9; pointer-events:none}
.sec--bolo .memoria-foto img{width:100%; height:auto; aspect-ratio:920/640; object-fit:cover; display:block}
.sec--bolo .flor{left:0; right:auto; top:auto; bottom:0; height:auto; width:min(44%,520px); transform:translate(-40%,38%)}
@media (max-width:900px){ .sec--bolo .memoria{grid-template-columns:1fr} .sec--bolo{padding-bottom:220px} .sec--bolo .flor{width:300px; transform:translate(-34%,30%)} }

/* ---- baile: o vestido é a imagem da página ---- */
body[data-tema="baile"]{--acento:var(--ouro)}
.d-arco--vestido{box-shadow:inset 0 0 0 1px rgba(200,174,125,.55)}
.d-arco--vestido img.foto{object-position:50% 50%}
.d-arco--vestido::after{content:""; position:absolute; inset:10px; border-radius:1000px 1000px 0 0; border:1px solid rgba(200,174,125,.7); pointer-events:none}
.d-arco--vestido::before{content:""; position:absolute; left:0; right:0; bottom:0; height:34%; z-index:1; pointer-events:none; background:linear-gradient(to bottom, transparent, rgb(var(--f,47 26 11)))}   /* a foto se dissolve na cor viva da página */
/* o "carregando" do vestido: anel de pontos que gira, reticências que acendem, ornamento */
.carrega{position:absolute; left:0; right:0; top:59%; z-index:2; display:grid; justify-items:center; gap:clamp(14px,2.6vw,22px); color:#efe3c9; pointer-events:none; transform:translateY(-50%)}
.carrega-anel{position:relative; width:64px; height:64px; animation:carrega-gira 1.6s steps(12,end) infinite}
.carrega-anel i{position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px; border-radius:50%; background:#e8cf9a; transform:rotate(calc(var(--k) * 30deg)) translateY(-26px); opacity:calc(1 - var(--k) * .074)}
@keyframes carrega-gira{to{transform:rotate(360deg)}}
.carrega-txt{font-size:clamp(13px,1.25vw,17px); letter-spacing:.36em; margin-left:.36em; color:#efe3c9; text-shadow:0 1px 10px rgba(0,0,0,.45)}
.carrega-pontos i{font-style:normal; opacity:0; animation:carrega-ponto 1.8s infinite}
.carrega-pontos i:nth-child(2){animation-delay:.3s} .carrega-pontos i:nth-child(3){animation-delay:.6s}
@keyframes carrega-ponto{0%{opacity:0}30%,80%{opacity:1}100%{opacity:0}}
.carrega-orn{display:flex; align-items:center; gap:12px; color:#d9bf8c}
.carrega-orn::before,.carrega-orn::after{content:""; width:clamp(48px,6vw,72px); height:1px; background:linear-gradient(to right, transparent, #d9bf8c)}
.carrega-orn::after{background:linear-gradient(to left, transparent, #d9bf8c)}
.carrega-orn i{font-style:normal; font-size:12px; line-height:1}
.reduzido .carrega-anel,.reduzido .carrega-pontos i{animation:none} .reduzido .carrega-pontos i{opacity:1}

/* carregamento da capa: a página só rola quando todos os quadros estão prontos, para o giro nunca picotar */
html.h-trava{overflow:hidden; touch-action:none}
.h-veu{position:absolute; left:0; right:0; bottom:16px; z-index:5; text-align:center; font-family:var(--f-caps); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--h-acento,var(--vinho)); opacity:.85; transition:opacity .6s; pointer-events:none}
.h-veu b{font-weight:400; margin-left:.7em; font-variant-numeric:tabular-nums}
.h-stage.carregado .h-veu{opacity:0}
.reduzido .h-veu,.reduzido .h-carga{display:none}

/* ---------- prévia: lacres ---------- */
.sec--vinho{background:#5a3350; color:#f6ebe2; --fg:#f6ebe2; --bg:#5a3350; --acento:var(--ouro); --suave:#d9c4d0; --linha:rgba(200,174,125,.32)}
.convite .datas-dica{display:block; margin-top:1.1em; color:var(--lilas); opacity:.85; font-size:.9em}
/* lacre: o conteúdo de cada ato fica velado até o toque */
.porta-segredo{display:flex; flex-direction:column; align-items:center; flex:1; width:100%}
.js .porta:not(.aberta) .porta-segredo{opacity:0; filter:blur(12px); transform:translateY(12px); pointer-events:none}
.porta-segredo{transition:opacity .9s cubic-bezier(.2,.7,.2,1) .15s, filter .9s cubic-bezier(.2,.7,.2,1) .15s, transform .9s cubic-bezier(.2,.7,.2,1) .15s}
.lacre{position:absolute; left:50%; top:60%; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:14px; padding:0; background:none; border:0; color:inherit; cursor:pointer; font:inherit; transition:opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1)}
.lacre .caps{font-size:11.5px; letter-spacing:.22em}
.lacre-selo{width:clamp(84px,8vw,104px); height:auto; border-radius:50%; background:rgba(255,255,255,.07); box-shadow:0 0 0 8px rgba(255,255,255,.05); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.lacre:hover .lacre-selo,.lacre:focus-visible .lacre-selo{transform:scale(1.06)}
.lacre:focus-visible{outline:1px solid currentColor; outline-offset:10px; border-radius:12px}
.porta.aberta .lacre{opacity:0; transform:translate(-50%,-50%) scale(.6); pointer-events:none}
.js .porta:not(.aberta){cursor:pointer}
.porta--missa .lacre-selo{background:rgba(51,56,43,.06); box-shadow:0 0 0 8px rgba(51,56,43,.05)}
.reduzido .porta-segredo,.reduzido .lacre{transition:none}

/* ---------- entrada por nome e sobrenome ---------- */
[data-so="sem-nome"]{display:none} .sem-nome [data-so="sem-nome"]{display:inline}
[data-so="com-nome"]{display:none} .com-nome [data-so="com-nome"]{display:inline}
.entrada{max-width:34rem; margin:clamp(34px,5vh,52px) auto 0; text-align:center}
.entrada-titulo{color:var(--ouro); margin-bottom:18px}
.entrada-campos{display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; text-align:left; margin-bottom:26px}
.entrada-campos label{display:block}
.entrada-campos span{display:block; font-family:var(--f-caps); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--suave); margin-bottom:8px}
.entrada-campos input{width:100%; font:inherit; font-size:1.1em; color:inherit; background:transparent; border:0; border-bottom:1px solid var(--linha); padding:10px 0 12px; border-radius:0; transition:border-color .35s}
.entrada-campos input:focus{outline:none; border-bottom-color:var(--ouro)}
.entrada-erro{margin-top:20px; color:var(--lilas); font-size:.95em}
.entrada.treme{animation:treme .5s}
@keyframes treme{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.entrada-ok{margin-top:clamp(34px,5vh,52px)}
.entrada-ok .script{font-size:clamp(44px,5vw,68px); color:var(--ouro)}
.entrada-ok .display{font-size:clamp(22px,2.4vw,32px); margin-top:.3em}
.entrada-links{margin-top:1.8em; display:flex; justify-content:center; gap:1.6em; flex-wrap:wrap}
.entrada-links a{color:inherit; text-decoration:none; padding-bottom:.35em; border-bottom:1px solid currentColor}
button.link{background:none; border:0; padding:0; color:inherit; font:inherit; cursor:pointer; opacity:.75; padding-bottom:.35em; border-bottom:1px solid transparent}
button.link:hover{opacity:1; border-bottom-color:currentColor}
.convite .datas-dica{margin-top:3em; color:var(--lilas); opacity:.8; font-size:.9em}
.rodape-nome{margin-top:22px; font-size:.9em; color:var(--suave)} .rodape-nome b{font-weight:400; color:inherit} .rodape-nome .link{margin-left:1em; font-family:var(--f-caps); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase}
@media (max-width:640px){ .entrada-campos{grid-template-columns:1fr} }
/* portão das páginas de cada noite: a página só aparece para quem está na lista daquela noite */
.portao{display:none}
.trancado .portao{display:grid; place-items:center; position:relative; min-height:100vh; min-height:100svh; padding:120px var(--gutter) 80px; background:var(--noite); color:#f1e6d8; --fg:#f1e6d8; --bg:var(--noite); --acento:var(--lilas); --suave:#bfaec0; --linha:rgba(201,179,225,.28); overflow:hidden; isolation:isolate}
.trancado main,.trancado .fecho{display:none}
.trancado{--f:33 23 38}
.portao .flor{position:absolute; z-index:-1; pointer-events:none}
.portao .flor--1{right:0; top:0; height:min(70%,560px); transform:translate(22%,-10%) scaleX(-1)}
.portao .flor--2{left:0; bottom:0; width:min(44vw,620px); transform:translate(-14%,22%)}
.portao-centro{text-align:center; max-width:40rem}
.portao-centro > svg{width:52px; height:auto; color:var(--ouro); margin-bottom:22px}
.portao-centro > .caps{color:var(--ouro)}
.portao .display{font-size:clamp(28px,3.4vw,46px); margin-top:.5em}
.portao .lede{margin:1em auto 0}
.portao .entrada{margin-top:30px}
.sem-nome .portao-entrar{display:block} 

/* ---------- primeira dobra: o convite fechado ----------
   Duas folhas de papel com as flores dos cantos; no meio, o convite com o nome e
   sobrenome como senha. Ao acertar, as folhas se abrem para fora e revelam a capa. */
.env{display:none; position:fixed; inset:0; z-index:80; perspective:2400px; perspective-origin:50% 50%; overflow:hidden; color:#412b39; --fg:#412b39; --suave:#7d6672; --linha:rgba(107,64,91,.3)}
html.env-fechado .env{display:block}
html.env-fechado{overflow:hidden; touch-action:none}
html.env-fechado .nav{opacity:0; pointer-events:none}
.env-asa{position:absolute; top:0; bottom:0; width:50%; background:var(--papel); overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform}
.env-asa--e{left:0; transform-origin:left center; box-shadow:inset -1px 0 0 rgba(107,64,91,.10), inset -52px 0 70px -52px rgba(107,64,91,.14)}
.env-asa--d{right:0; transform-origin:right center; box-shadow:inset 1px 0 0 rgba(107,64,91,.10), inset 52px 0 70px -52px rgba(107,64,91,.14)}
.env-asa::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity 2s ease .3s; background:linear-gradient(to right, rgba(33,23,38,0) 30%, rgba(33,23,38,.42))}
.env-asa--d::after{background:linear-gradient(to left, rgba(33,23,38,0) 30%, rgba(33,23,38,.42))}
.env-asa .env-flor{position:absolute; z-index:1; pointer-events:none; max-width:none; width:auto; height:auto}
.env-flor--tl{left:0; top:0; height:min(60vh,640px); transform:translate(-14%,-12%)}
.env-flor--bl{left:0; bottom:0; width:min(40vw,600px); transform:translate(-8%,16%)}
.env-flor--tr{right:0; top:0; height:min(72vh,780px); transform:translate(32%,-8%)}
.env-flor--br{right:0; bottom:0; height:min(44vh,460px); transform:translate(22%,10%)}
.env-meio::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse 34% 60% at 50% 50%, rgba(245,239,232,.9) 30%, rgba(245,239,232,0) 70%)}
.env-meio{position:absolute; inset:0; z-index:3; display:grid; place-items:center; padding:clamp(28px,5vh,60px) var(--gutter); overflow:auto; -webkit-overflow-scrolling:touch; transition:opacity .5s, transform .5s}
.env-carta{position:relative; z-index:1; max-width:34rem; width:100%; text-align:center}
.env .emblema{width:clamp(80px,7.5vw,108px); margin:0 auto 18px; color:var(--ouro-2)}
.env-caps{color:var(--ouro-2)}
.env-nome{font-size:clamp(88px,11vw,152px); color:var(--vinho); margin-top:.04em}
.env-sobrenome{font-size:clamp(21px,2.5vw,32px); letter-spacing:.03em; margin-top:-.08em}
.env-convida{max-width:26em; margin:.9em auto 0; font-size:clamp(15px,1.05vw,18px); line-height:1.5; color:var(--suave)}
.env-datas{margin-top:1.1em; color:var(--ouro-2)}
.env-datas::before{content:""; display:block; width:54px; height:1px; background:var(--ouro); margin:0 auto 1.1em}
.env .entrada{margin-top:clamp(22px,3.6vh,36px)}
.env .entrada-titulo{color:var(--suave); margin-bottom:14px}
.env .entrada-campos{gap:12px 26px; margin-bottom:22px}
.env .entrada-campos input{border-bottom-color:rgba(107,64,91,.34); padding:4px 0 8px} .env .entrada-campos input:focus{border-bottom-color:var(--vinho)}
.env .entrada-erro{color:var(--vinho)}
.env-dica{margin-top:1.4em; color:var(--suave); opacity:.75; font-size:.72em}
.btn--vinho{background:var(--vinho); border-color:var(--vinho); color:#f5efe8; min-width:15em}
.btn--vinho:hover{background:var(--noite); border-color:var(--noite); color:#f5efe8}
.env-ok .script{font-size:clamp(50px,6vw,78px); color:var(--vinho)}
.env-ok .display{font-size:clamp(20px,2.2vw,28px); margin:.35em auto 0; max-width:22em}
.env-acoes{margin-top:1.4em}
.env .entrada-links{margin-top:1.2em}
.env.auto [data-env-abrir]{display:none}
.env-carga{position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--ouro); transform-origin:left; transform:scaleX(0); transition:transform .3s linear, opacity .6s}
/* a abertura: o convite some, as folhas giram para fora e a capa fica à vista */
.env.abrindo{pointer-events:none}
.env.abrindo .env-meio{opacity:0; transform:scale(.97)}
.env.abrindo .env-asa--e{transform:rotateY(-100deg); transition:transform 2.4s cubic-bezier(.6,.05,.3,1) .3s}
.env.abrindo .env-asa--d{transform:rotateY(100deg); transition:transform 2.4s cubic-bezier(.6,.05,.3,1) .3s}
.env.abrindo .env-asa::after{opacity:1}
.reduzido .env.abrindo .env-asa{transform:none !important; opacity:0; transition:opacity .5s}
@media (max-width:900px){
  .env-flor--tl{height:min(27vh,280px); transform:translate(-40%,-34%)}
  .env-flor--bl{width:min(46vw,300px); transform:translate(-36%,42%)}
  .env-flor--tr{height:min(35vh,380px); transform:translate(52%,-26%)}
  .env-flor--br{height:min(22vh,220px); transform:translate(40%,32%)}
  .env-meio::before{background:radial-gradient(ellipse 58% 62% at 50% 50%, rgba(245,239,232,.94) 38%, rgba(245,239,232,0) 72%)}
  .env-meio{padding:28px 22px 32px}
  .env .emblema{width:72px; margin-bottom:12px}
  .env-nome{font-size:clamp(72px,22vw,96px)}
  .env .entrada-campos{grid-template-columns:1fr 1fr; gap:10px 18px}
}
@media (max-width:1180px) and (min-width:901px){ .env-flor--tl{height:40vh; transform:translate(-24%,-14%)} .env-flor--tr{height:50vh; transform:translate(44%,-12%)} .env-flor--bl{width:30vw; transform:translate(-14%,20%)} .env-flor--br{height:32vh; transform:translate(30%,14%)} }
@media (max-height:620px){ .env .emblema{display:none} .env-nome{font-size:64px} .env-datas{margin-top:.6em} .env-convida{display:none} }
.nav{transition:opacity .7s ease}

/* confirmação de presença: estado e agradecimento (nada sai do site) */
.rsvp-estado{margin:.8em 0 0; min-height:1.4em; text-align:center; font-style:italic; color:var(--suave)}
.rsvp-feito{display:none; text-align:center; padding:26px 0 10px}
.rsvp-feito .script{font-size:clamp(54px,7vw,76px); color:var(--acento); line-height:1}
dialog.rsvp.feito form > :not(.rsvp-feito){display:none}
dialog.rsvp.feito .rsvp-feito{display:block}