/* ============================================================================
   FAIRCO · sistema de desenho — O CONVITE GRAVADO
   O salão é verde-garrafa; o convite é champanhe com filete duplo de ouro.
   A marca principal é a DISCRIÇÃO: a agenda não se publica, os nomes não
   circulam, e o site inteiro fala na voz de quem convida — nunca de quem
   anuncia. Régua da casa: corpo justificado, títulos com balance, 390 primeiro.
   Faces: Libre Caslon (a gravura), Karla (a conversa).
   ========================================================================== */

:root{
  --salao:#0E231A;          /* o verde-garrafa do salão */
  --salao-2:#08170F;
  --salao-linha:rgba(242,238,229,.14);
  --champanhe:#F2EFE6;
  --champanhe-2:#EAE5D6;
  --champanhe-dim:#B9C6BB;
  --tinta:#152019;
  --tinta-fraca:#5C6B60;
  --linha:rgba(21,32,25,.16);
  --linha-forte:rgba(21,32,25,.34);
  --ouro:#C9A75B;
  --ouro-2:#A9863F;
  --ff-d:"Libre Caslon Display",Georgia,serif;
  --ff-t:"Libre Caslon Text",Georgia,serif;
  --ff-s:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mx:clamp(20px,5.4vw,84px);
  --max:1240px;
  --ease:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--ff-s);background:var(--champanhe);color:var(--tinta);
  font-size:15.5px;line-height:1.7;overflow-x:clip;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--ouro);color:var(--salao)}
h1,h2,h3,h4{font-family:var(--ff-d);font-weight:400;line-height:1.08;
  letter-spacing:.004em;text-wrap:balance}
p{text-align:justify;hyphens:auto}
em{font-family:var(--ff-t);font-style:italic}
:focus-visible{outline:2px solid var(--ouro-2);outline-offset:3px}

.kick{font-family:var(--ff-s);font-weight:700;font-size:10.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ouro-2);display:flex;align-items:center;gap:14px;
  text-align:left;hyphens:none}
.kick::after{content:"";height:1px;width:52px;background:var(--linha-forte)}
.dark .kick{color:var(--ouro)}
.dark .kick::after{background:var(--salao-linha)}

.miolo{max-width:var(--max);margin:0 auto;padding:0 var(--mx)}
section{position:relative;padding:clamp(72px,9vw,132px) 0}
section.dark{background:linear-gradient(178deg,var(--salao),var(--salao-2));color:var(--champanhe)}
section.dark p{color:var(--champanhe-dim)}
.sec-cab{display:flex;flex-direction:column;gap:18px;max-width:740px;margin-bottom:clamp(36px,4.6vw,64px)}
.sec-cab h2{font-size:clamp(30px,4vw,50px)}
.sec-cab .sub{font-size:clamp(15px,1.35vw,17px);color:var(--tinta-fraca);max-width:62ch}
section.dark .sec-cab .sub{color:var(--champanhe-dim)}

/* o filete do convite: moldura dupla */
.filete{position:relative;border:1px solid rgba(201,167,91,.55);padding:3px}
.filete>.dentro{border:1px solid rgba(201,167,91,.35);padding:clamp(26px,4.5vw,64px)}

/* ── topo ─────────────────────────────────────────────────────────────── */
header{position:fixed;inset:0 0 auto;z-index:60;padding:0 var(--mx);
  display:flex;align-items:center;justify-content:space-between;height:76px;
  transition:background .4s var(--ease),box-shadow .4s,height .4s}
header.stuck{background:rgba(14,35,26,.92);backdrop-filter:blur(14px);height:62px;
  box-shadow:0 1px 0 var(--salao-linha)}
.marca{font-family:var(--ff-d);font-size:22px;color:var(--champanhe);letter-spacing:.02em}
.marca i{font-style:normal;color:var(--ouro)}
nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
nav a{font-family:var(--ff-s);font-weight:700;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--champanhe-dim);transition:color .3s}
nav a:hover{color:var(--ouro)}
.bt{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-s);font-weight:700;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--salao);
  background:linear-gradient(135deg,#E2C078,#C9A25A 55%,#A87F35);
  padding:13px 22px;border-radius:2px;border:0;cursor:pointer;
  transition:transform .3s,filter .3s;white-space:nowrap}
.bt:hover{transform:translateY(-1px);filter:brightness(1.06)}
.bt.fantasma{background:none;color:var(--champanhe);
  box-shadow:inset 0 0 0 1px var(--salao-linha)}
.bt.fantasma:hover{filter:none;box-shadow:inset 0 0 0 1px var(--ouro)}
@media (prefers-reduced-motion:no-preference){
  .bt.respira{animation:btRespira 3.8s ease-in-out infinite}}
@keyframes btRespira{0%,100%{box-shadow:0 0 0 0 rgba(201,162,90,0)}
  50%{box-shadow:0 0 24px 2px rgba(201,162,90,.28)}}

#abreMenu{display:none;background:none;border:0;cursor:pointer;padding:10px;margin-right:-10px}
#abreMenu i,#abreMenu i::before,#abreMenu i::after{display:block;width:22px;height:1.6px;
  background:var(--champanhe);position:relative;content:"";transition:background .3s}
#abreMenu i::before{position:absolute;top:-7px}#abreMenu i::after{position:absolute;top:7px}
@media (max-width:920px){
  nav{position:fixed;inset:0;background:var(--salao);flex-direction:column;
    justify-content:center;gap:26px;transform:translateY(-102%);transition:transform .5s var(--ease)}
  nav.aberto{transform:none}
  nav a{font-size:13px;color:var(--champanhe)}
  nav .bt{margin-top:8px}
  #abreMenu{display:block;z-index:70;position:relative}
  #abreMenu.aberto i{background:transparent!important}
  #abreMenu.aberto i::before{transform:rotate(45deg);top:0}
  #abreMenu.aberto i::after{transform:rotate(-45deg);top:0}
}

/* ── revelações ───────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px)}
.rv.on{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.d1.on{transition-delay:.12s}.rv.d2.on{transition-delay:.24s}.rv.d3.on{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ── rodapé ───────────────────────────────────────────────────────────── */
footer{background:var(--salao-2);color:#8FA396;padding:clamp(60px,7vw,96px) var(--mx) 36px;
  font-size:13px}
footer a{transition:color .3s}
footer a:hover{color:var(--ouro)}
.fgrade{max-width:var(--max);margin:0 auto;display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,64px)}
@media (max-width:880px){.fgrade{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.fgrade{grid-template-columns:1fr}}
.fmarca{font-family:var(--ff-d);font-size:24px;color:var(--champanhe)}
.fmarca i{font-style:normal;color:var(--ouro)}
.fcol .ft{font-family:var(--ff-s);font-weight:700;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#5E7566;margin-bottom:16px}
.fcol .fl{display:grid;gap:9px;font-size:12.5px}
.fbase{max-width:var(--max);margin:clamp(40px,5vw,64px) auto 0;padding-top:22px;
  border-top:1px solid var(--salao-linha);display:flex;justify-content:space-between;
  align-items:flex-end;gap:24px;flex-wrap:wrap}
.fbase .mini{font-size:11.5px;color:#5E7566;display:grid;gap:6px}
.fbase .mini p{text-align:left;hyphens:none}
.lockup{text-align:right;line-height:1.9}
.lockup .l1{font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:#5E7566}
.lockup .l2{font-family:var(--ff-d);font-size:16px;letter-spacing:.42em;color:#C9BFA8}

/* ── cursor da casa (so ponteiro fino) ────────────────────────────────── */
@media (pointer:fine){
  #cursor{position:fixed;left:0;top:0;z-index:999;pointer-events:none;width:34px;height:34px;
    margin:-17px 0 0 -17px;border-radius:50%;border:1px solid rgba(201,167,91,.75);
    transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),
      border-color .3s,background .3s;mix-blend-mode:difference;will-change:transform}
  #cursor i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;
    border-radius:50%;background:var(--ouro)}
  #cursor.sobre{width:54px;height:54px;margin:-27px 0 0 -27px;border-color:var(--ouro);
    background:rgba(201,167,91,.12)}
  #cursor.oculto{opacity:0}
}
@media (pointer:coarse),(prefers-reduced-motion:reduce){#cursor{display:none}}

/* ── parallax: quem carrega data-parallax ganha transform por rolagem ── */
[data-parallax]{will-change:transform}
@media (prefers-reduced-motion:reduce){[data-parallax]{transform:none!important}}
