/* ==========================================================================
   Componentes — só papéis, nunca cor bruta
   ========================================================================== */

/* ---------- Marca ---------- */
.logo{display:inline-flex;align-items:center;gap:.85rem;line-height:1;color:var(--fg)}
.logo__mono{width:36px;height:auto;aspect-ratio:754/694;flex:none;color:var(--accent);transition:color .9s var(--ease-io)}
.hd.on-dark .logo__mono{color:var(--fa-gold)}
.logo__txt{display:grid;gap:.36rem}
.logo__name{font-family:var(--f-mark);font-weight:500;font-size:1.28rem;letter-spacing:.12em;text-transform:uppercase}
.logo__sub{font-size:.58rem;font-weight:500;letter-spacing:.52em;text-transform:uppercase;color:var(--fg-2);margin-right:-.52em}

/* ---------- Texto que rola no hover (a cópia é aria-hidden no HTML) ---------- */
.roll{display:inline-grid;overflow:hidden;line-height:1.25;vertical-align:top}
.roll > span{grid-area:1/1;transition:transform .55s var(--ease-out)}
.roll > span + span{transform:translate3d(0,108%,0)}
@media (hover:hover) and (pointer:fine){
  a:hover .roll > span:first-child,button:hover .roll > span:first-child{transform:translate3d(0,-108%,0)}
  a:hover .roll > span + span,button:hover .roll > span + span{transform:none}
}
a:focus-visible .roll > span:first-child,button:focus-visible .roll > span:first-child{transform:translate3d(0,-108%,0)}
a:focus-visible .roll > span + span,button:focus-visible .roll > span + span{transform:none}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  min-height:56px;padding:0 1.65rem 0 1.4rem;
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:600;font-size:.93rem;letter-spacing:.015em;white-space:nowrap;
  transition:transform .16s var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn--sm{min-height:44px;padding:0 1.1rem 0 1rem;font-size:.86rem}
.btn--line{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover) and (pointer:fine){.btn--line:hover{box-shadow:inset 0 0 0 1px var(--fg)}}

/* link com sublinhado que desenha e seta que avança */
.lnk{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:var(--t-sm);letter-spacing:.01em;color:var(--fg)}
.lnk span{background:linear-gradient(currentColor,currentColor) no-repeat 100% 100%/0 1px;padding-bottom:2px;transition:background-size .5s var(--ease-out)}
.lnk svg{width:16px;height:16px;flex:none;color:var(--accent);transition:transform .5s var(--ease-out)}
.lnk:hover span,.lnk:focus-visible span{background-position:0 100%;background-size:100% 1px}
.lnk:hover svg,.lnk:focus-visible svg{transform:translate3d(4px,0,0)}

/* ---------- Cabeçalho ---------- */
.hd{
  position:absolute;inset:0 0 auto;z-index:100;height:var(--hd-h);color:var(--fg);
  transition:height .5s var(--ease-out),background-color .5s var(--ease-out),box-shadow .5s var(--ease-out),transform .6s var(--ease-out);
}
.js .hd{position:fixed}
.hd__in{height:100%;display:flex;align-items:center;gap:2rem;padding-inline:var(--side)}
.hd .logo{margin-right:auto}
.hd__list{display:flex;align-items:center;gap:clamp(1.1rem,.2rem + 1.7vw,2.4rem)}
.hd__list a{position:relative;display:inline-block;font-size:.9rem;font-weight:500;letter-spacing:.01em;color:var(--fg-2);padding:.4rem 0;transition:color .3s ease}
.hd__list a:hover,.hd__list a.is-here{color:var(--fg)}
.hd__list a::after{content:"";position:absolute;left:50%;bottom:-2px;width:4px;height:4px;margin-left:-2px;background:var(--accent);transform:scale(0) rotate(45deg);transition:transform .45s var(--ease-out)}
.hd__list a.is-here::after{transform:scale(1) rotate(45deg)}
.hd__extra{display:none}
.hd.is-solid{--hd-h:66px;background:var(--bg);box-shadow:0 1px 0 var(--line)}
.hd.is-hidden{transform:translate3d(0,-101%,0)}
.hd__burger{display:none;align-items:center;gap:.75rem;height:44px;padding:0 0 0 .5rem;font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.hd__burger i{position:relative;width:22px;height:10px}
.hd__burger i::before,.hd__burger i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--ease-out),top .5s var(--ease-out)}
.hd__burger i::before{top:0}
.hd__burger i::after{top:8.5px}
.hd[data-open] .hd__burger i::before{top:4.25px;transform:rotate(45deg)}
.hd[data-open] .hd__burger i::after{top:4.25px;transform:rotate(-45deg)}

@media (max-width:1080px){
  :root{--hd-h:68px}
  .hd.is-solid{--hd-h:60px}
  .hd__cta{display:none}
  .hd__burger{display:inline-flex}
  .hd__nav{
    position:fixed;inset:0;z-index:-1;display:flex;flex-direction:column;justify-content:space-between;
    padding:calc(var(--hd-h) + 2.2rem) var(--gutter) 2.2rem;
    background:var(--char-0);color:var(--paper-1);
    clip-path:inset(0 0 100% 0);visibility:hidden;
    transition:clip-path .45s var(--ease-io),visibility 0s linear .45s;
  }
  .hd[data-open] .hd__nav{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s var(--ease-io),visibility 0s}
  .hd__list{flex-direction:column;align-items:flex-start;gap:.15rem}
  .hd__list li{overflow:hidden}
  .hd__list a{font-family:var(--f-display);font-weight:300;font-size:clamp(2.3rem,9.5vw,3.4rem);line-height:1.12;letter-spacing:-.02em;color:var(--paper-1);padding:.1rem 0;transform:translate3d(0,105%,0);transition:transform .7s var(--ease-out) calc(.18s + var(--i,0) * .05s)}
  .hd[data-open] .hd__list a{transform:none}
  .hd__list a::after{display:none}
  .hd__extra{display:grid;gap:1.1rem;opacity:0;transition:opacity .6s ease .45s}
  .hd[data-open] .hd__extra{opacity:1}
  .hd__extra p{font-size:var(--t-sm);color:var(--paper-2)}
  .hd__extra .btn{background:var(--ivory-1);color:var(--char-1);width:100%}
  /* menu aberto: o cabeçalho veste o escuro e não esconde */
  .hd[data-open]{background:transparent;box-shadow:none;transform:none;color:var(--paper-1)}
  .hd[data-open] .logo{color:var(--paper-1)}
  .hd[data-open] .logo__sub{color:var(--paper-2)}
  .hd[data-open] .logo__mono{color:var(--fa-gold)}
}
html.menu-on{overflow:hidden}

/* ---------- Formulário ---------- */
.field{display:grid;gap:.5rem}
.field label{font-size:var(--t-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:.65rem 0;font-size:var(--t-md);color:var(--fg);outline:none;transition:border-color .3s ease;
}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:1.8rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23B49B76' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right .2rem center/12px 8px no-repeat}
.field select option{color:var(--ink-1);background:var(--ivory-0)}
.field textarea{resize:vertical;min-height:120px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-3);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--fg)}
.field .is-bad{border-color:#E28C74}
.check{display:flex;align-items:flex-start;gap:.8rem;font-size:var(--t-sm);line-height:1.45;color:var(--fg-2);cursor:pointer;min-height:44px;padding-top:.2rem}
.check input{width:20px;height:20px;margin:0;accent-color:var(--metal);flex:none}
.form-err{font-size:var(--t-sm);color:#EBA690}

/* ---------- Acordeão de dúvidas (details nativo; o JS só anima a altura) ---------- */
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem;padding:1.55rem 0;cursor:pointer;font-family:var(--f-display);font-weight:400;font-size:var(--t-h3);line-height:1.18;letter-spacing:-.012em;color:var(--fg)}
.qa summary::-webkit-details-marker{display:none}
.qa__ic{position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s ease,transform .5s var(--ease-out)}
.qa__ic::before,.qa__ic::after{content:"";position:absolute;left:11px;right:11px;top:50%;height:1.2px;margin-top:-.6px;background:var(--fg);transition:transform .5s var(--ease-out)}
.qa__ic::after{transform:rotate(90deg)}
.qa[open] .qa__ic::after{transform:rotate(0)}
.qa[open] .qa__ic{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.qa summary:hover .qa__ic{box-shadow:inset 0 0 0 1px var(--fg)}}
.qa__body{overflow:hidden}
.qa__a{padding:0 4.5rem 1.8rem 0;color:var(--fg-2);max-width:62ch}
