/* site.css — design system da versão 1.1.0 (ivory + ouro; Geist + Instrument Serif)
   Mudanças vs 1.0.16: fonte padrão Geist (do modelo da nova abertura), abertura
   com escultura de partículas, fundo de fitas de metal líquido, botões dourados
   chapados, menu lateral sólido (sem blur), correções de mobile (alvos de toque,
   zoom de input no iOS, dvh no modal, Escape no drawer, safe-areas). */

:root{
  --gold:#C8A24A;
  --gold-hi:#DDBB63;   /* realce de ouro (superfícies, hovers suaves) */
  --gold-d:#7E5F0E;
  --ink:#1E1A12;
  --mute:#5E574A;
  --text-2:#3A342A;
  --line:#E6DCC3;
  --paper:#FFFFFF;
  --paper-soft:#FBF6E8;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font-body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-accent:"Instrument Serif",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
body{margin:0;background:#FDFCF8;color:var(--ink);font:400 16px/1.62 var(--font-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;letter-spacing:-.025em;line-height:1.08}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:#F1E3B8}

/* ===== fundo: fitas de metal líquido (WebGL1; sem suporte fica o ivory do body) ===== */
#metal{position:fixed;inset:0;width:100%;height:100%;z-index:-1;opacity:.5;pointer-events:none}

/* ================================================================
   ABERTURA — escultura de partículas (adaptado do Sculpture Hero)
   ================================================================ */
#intro{position:fixed;inset:0;z-index:100;overflow:hidden;isolation:isolate;container-type:size;
  display:flex;flex-direction:column;background:#FDFCF8;color:var(--ink);font-family:var(--font-body);
  touch-action:pan-y;clip-path:inset(0);transition:clip-path 1.1s var(--ease)}
#intro.out{clip-path:inset(0 0 100% 0)}
#intro *{box-sizing:border-box}

.sh-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.sh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease}
.sh-fallback{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none;opacity:1;transition:opacity .5s ease}
#intro[data-gl="on"] .sh-canvas{opacity:1}
#intro[data-gl="on"] .sh-fallback{opacity:0}

.sh-backdrop{position:absolute;left:50%;z-index:0;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;user-select:none;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.06em;line-height:.8;color:color-mix(in srgb,var(--ink) 5%,transparent)}

.sh-hint{position:absolute;z-index:1;transform:translate(-50%,0);display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.5;pointer-events:none;transition:opacity .8s ease}
.sh-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:sh-pulse 2.4s ease-in-out infinite}
#intro[data-touched="1"] .sh-hint{opacity:0}
@keyframes sh-pulse{0%,100%{transform:scale(.6);opacity:.45}50%{transform:scale(1);opacity:1}}

.sh-spacer{flex:1 1 auto;min-height:0}
.sh-content{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:end;
  gap:clamp(24px,4cqw,72px);padding:0 clamp(20px,3.2cqw,48px) clamp(28px,3.4cqw,52px)}
.sh-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.62;margin:0 0 clamp(14px,1.6cqw,22px);
  display:flex;align-items:center;gap:12px}
.sh-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.sh-h1{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,min(6.6cqw,11.5cqh),124px);line-height:.92;letter-spacing:-.045em;margin:0}
.sh-h1 .sh-line{display:block}
.sh-accent{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:-.02em}
.sh-aside{max-width:400px;justify-self:end;padding-bottom:.6em}
.sh-body{font-size:clamp(15px,1.1cqw,17px);line-height:1.5;letter-spacing:-.01em;margin:0 0 26px;opacity:.78}
.sh-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:22px}

/* entrada em cascata do copy da abertura */
.sh-eyebrow{opacity:0;animation:sh-rise .9s var(--ease) .5s forwards}
.sh-eyebrow::before{opacity:0;animation:sh-rise .9s var(--ease) .5s forwards}
.sh-h1{opacity:0;animation:sh-rise 1s var(--ease) .7s forwards}
.sh-aside{opacity:0;animation:sh-rise 1s var(--ease) .95s forwards}
@keyframes sh-rise{to{opacity:1;transform:none}from{opacity:0;transform:translateY(14px)}}

@container (max-width:1023px){
  .sh-content{grid-template-columns:1fr;gap:28px}
  .sh-aside{justify-self:start;max-width:520px;padding-bottom:0}
  .sh-h1{font-size:clamp(38px,min(9.5cqw,9cqh),96px)}
}
@container (max-width:639px){
  .sh-h1{font-size:clamp(34px,min(11cqw,7cqh),60px);line-height:.94}
  .sh-body{font-size:15px;margin-bottom:20px}
  .sh-eyebrow{font-size:11px}
  .sh-ctas{gap:16px}
  .sh-content{padding-bottom:40px}
}

/* ===== botões ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:0;border-radius:999px;
  font:600 15px var(--font-body);color:var(--ink);text-decoration:none;cursor:pointer;background:var(--gold);
  transition:transform .3s var(--ease),background .25s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
@media(hover:hover){
  .btn:hover{background:#B98F2F;transform:translateY(-2px)}
}
.lnk{display:inline-flex;align-items:center;min-height:52px;font-weight:600;color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--gold);text-underline-offset:7px;text-decoration-thickness:2px;cursor:pointer;background:none;border:0;padding:0;font-family:inherit;font-size:15px}
@media(hover:hover){
  .lnk:hover{text-decoration-color:var(--gold-d)}
}

/* ===== menu lateral ===== */
#side{position:fixed;top:0;left:0;bottom:0;width:260px;z-index:40;padding:28px 18px 20px;display:flex;flex-direction:column;gap:22px;
  background:var(--paper-soft);border-right:1px solid var(--line);transition:transform .5s var(--ease);
  padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.logo{display:block;text-decoration:none}
.logo .limg{display:block;height:53px;width:auto;margin-bottom:10px}
.logo small{display:block;font:400 13px var(--font-body);color:var(--mute)}
#nav{position:relative;display:flex;flex-direction:column;flex-grow:1;overflow-y:auto;min-height:0;overscroll-behavior:contain}
#nav a{position:relative;z-index:1;display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;text-decoration:none;
  color:var(--mute);font-size:14.5px;font-weight:500;transition:color .3s;flex-shrink:0}
#nav a:active{color:var(--ink)}
@media(hover:hover){
  #nav a:hover{color:var(--ink);background:rgba(255,255,255,.5)}
}
#nav a[aria-current]{color:var(--ink)}
#ind{position:absolute;left:0;right:0;top:0;height:44px;border-radius:10px;background:rgba(200,162,74,.16);transition:transform .55s cubic-bezier(.3,1.25,.5,1);pointer-events:none}
#ind::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--gold)}
#side .btn{width:100%;padding:0 16px}

/* redes oficiais no menu */
.socials{display:flex;gap:10px;align-items:center}
.socials .sbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
  color:var(--gold-d);background:rgba(255,255,255,.6);transition:transform .3s var(--ease),border-color .3s,background .3s}
.socials .sbtn:active{transform:scale(.94)}
@media(hover:hover){
  .socials .sbtn:hover{transform:translateY(-2px);border-color:var(--gold);background:#fff}
}
.socials span{font-size:13px;color:var(--mute)}

/* botão do menu: no mobile (drawer) sempre visível; no desktop só quando recolhido */
#burger{display:none;align-items:center;justify-content:center;position:fixed;top:12px;left:12px;z-index:50;width:44px;height:44px;
  border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.96);color:var(--gold-d);cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(90,64,6,.35);transition:transform .35s var(--ease),box-shadow .3s}
#burger.bk-hide{transform:translateY(-140%)}
#burger:active{transform:scale(.94)}
@media(hover:hover){
  #burger:hover{box-shadow:0 10px 22px -8px rgba(90,64,6,.4)}
}
#burger[aria-expanded="true"] svg{transform:rotate(90deg)}
#burger svg{transition:transform .4s var(--ease)}

/* aba de recolher o menu (desktop) */
#sideToggle{display:none;position:absolute;right:-17px;top:104px;z-index:2;width:34px;height:60px;border:1px solid var(--line);border-left:0;
  border-radius:0 12px 12px 0;background:var(--paper-soft);color:var(--gold-d);cursor:pointer;align-items:center;justify-content:center;
  transition:background .25s,color .25s}
@media(hover:hover){
  #sideToggle:hover{background:var(--gold);color:#fff}
}
@media(min-width:1025px){
  #sideToggle{display:flex}
  body.side-hidden #burger{display:flex}
}
@media(max-width:1024px){
  #burger{display:flex}
}
#scrim{position:fixed;inset:0;z-index:35;background:rgba(30,26,18,.35);opacity:0;pointer-events:none;transition:opacity .4s}
#bar{position:fixed;top:0;left:260px;right:0;height:3px;z-index:30;background:linear-gradient(90deg,#DDBB63,#B98F2F);transform:scaleX(0);transform-origin:left;transition:left .5s var(--ease)}

/* menu retrátil no desktop */
main{transition:margin-left .5s var(--ease)}
body.side-hidden #side{transform:translateX(-100%)}
body.side-hidden main{margin-left:0}
body.side-hidden #bar{left:0}

/* ===== conteúdo ===== */
main{margin-left:260px;min-height:100vh;padding:clamp(56px,7vw,96px) clamp(20px,5vw,72px) 40px}
#view{max-width:960px;transition:opacity .25s,transform .25s}
#view.swap{opacity:0;transform:translateY(8px)}
.eb{margin:0 0 14px;color:var(--gold-d);font-weight:600;font-size:14px;letter-spacing:.01em}
.h1{font-size:clamp(38px,5.2vw,72px);margin-bottom:24px;max-width:18ch;line-height:1.04}
.h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em}
.h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%);animation:up .9s var(--ease) forwards;animation-delay:calc(var(--i)*70ms)}
@keyframes up{to{transform:none}}
.lead{max-width:62ch;color:var(--text-2);font-size:17px}
.lead.b{font-weight:600;color:var(--ink)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:32px}
.sec{margin-top:clamp(72px,9vw,120px)}
.sec>h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:10px;max-width:24ch}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));column-gap:44px}
.it{padding:22px 0 18px;position:relative}
.it h3{font-size:23px;margin-bottom:8px}
.it p{margin:0;color:var(--mute);font-size:15px}
.it .sub{margin-top:12px;font-size:14px;color:var(--gold-d);font-weight:500}
.ln{height:2px;background:linear-gradient(90deg,var(--gold),rgba(200,162,74,.15));transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease);transition-delay:calc(var(--i,0)*120ms)}
.ln.on{transform:none}
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.rv.on{opacity:1;transform:none}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px 28px}
.panel ul{margin:10px 0 0;padding-left:20px;color:var(--text-2)}
.panel li{margin:4px 0}
.panel li::marker{color:var(--gold)}
.bq{margin:24px 0 8px;padding:4px 0 4px 20px;border-left:3px solid var(--gold);font-family:var(--font-accent);font-style:italic;
  font-size:clamp(22px,2.8vw,30px);line-height:1.3;letter-spacing:0;color:var(--ink);max-width:26ch}
.att{margin-top:48px}
.att p{margin:6px 0 0;color:var(--text-2)}
.step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0}
.step b{font:600 40px var(--font-display);color:var(--gold);letter-spacing:-.03em}
.note{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);color:var(--mute);font-size:13px;line-height:1.6;max-width:72ch}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:14px 0;cursor:pointer;
  font:500 20px var(--font-display);list-style:none;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;font-weight:400;color:var(--gold-d);line-height:1;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:10px 0 18px;color:var(--mute);font-size:15px}

/* ===== formulário (aba contato) ===== */
.field{margin-bottom:16px}
.field label,.field .lbl{display:block;font-weight:600;font-size:15px;margin-bottom:4px}
.field .hint{display:block;font-size:13px;color:var(--mute);margin-bottom:8px}
.field .opt-tag{font-weight:400;font-size:12px;color:var(--mute)}
.field input,.field select,.field textarea{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;font:400 16px var(--font-body);color:var(--ink);transition:border-color .25s}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.segopt{position:relative;cursor:pointer}
.segopt input{position:absolute;opacity:0;pointer-events:none}
.segopt span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;
  font:500 14.5px var(--font-body);color:var(--mute);background:#fff;transition:border-color .25s,background .25s,color .25s}
.segopt input:checked+span{border-color:var(--gold);background:var(--paper-soft);color:var(--ink)}
.segopt input:focus-visible+span{outline:2px solid var(--gold);outline-offset:3px}
.form-err{margin:14px 0 0;padding:12px 16px;border:1px solid #E7B4A6;background:#FDF3F0;border-radius:12px;color:#8C3B26;font-size:14px}
.ok h3{font-size:28px;margin-bottom:10px}
.ok p{color:var(--mute);max-width:56ch}
.ok .btn{margin-top:18px}
.fine{margin-top:18px;font-size:12px;color:var(--mute);line-height:1.5}

/* ===== modal do quiz ===== */
#modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(30,26,18,.45)}
#modal.open{display:flex;animation:fade .3s}
@keyframes fade{from{opacity:0}}
#dlg{position:relative;width:min(720px,96vw);height:min(86vh,880px);height:min(86dvh,880px);display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(90,64,6,.5);
  animation:pop .55s cubic-bezier(.2,1.1,.3,1)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.96)}}
.dhead{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--paper-soft)}
.dhead .dt{display:flex;flex-direction:column;font:600 15px var(--font-body);color:var(--ink);line-height:1.25}
.dhead .dt small{font:400 12.5px var(--font-body);color:var(--mute)}
#qx{margin-left:auto;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:50%;font-size:22px;color:var(--mute);cursor:pointer;flex-shrink:0;transition:background .25s,color .25s}
@media(hover:hover){
  #qx:hover{background:#F6F0E0;color:var(--ink)}
}
#qframe{flex:1;width:100%;border:0;background:#FDFCF8}
@media(max-width:640px){.dhead .dt small{display:none}}

/* ===== responsivo: abaixo de 1024px o menu vira drawer ===== */
@media(max-width:1024px){
  #side{transform:translateX(-100%);width:min(300px,86vw)}
  #side.open{transform:none}
  #scrim.on{opacity:1;pointer-events:auto}
  main{margin-left:0;padding-top:84px}
  #bar{left:0}
  .step{grid-template-columns:48px 1fr}
  .lead{font-size:16px}
}

/* ===== movimento reduzido ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rv,.ln,.sh-eyebrow,.sh-h1,.sh-aside{opacity:1;transform:none}
  .sh-hint::before{animation:none}
  .sh-canvas,.sh-fallback{transition:none;opacity:1}
}