/* ==========================================================================
   LAUDIX · COMPONENTES
   Barra de navegação, botões, cartões, tabelas, formulário, painéis.
   ========================================================================== */

/* ==========================================================================
   NAVEGAÇÃO — orientada ao comprador
   ========================================================================== */

.topbar{
  position:fixed; top:0; left:0; right:0;
  z-index:var(--z-nav);
  height:var(--nav-h);
  display:flex; align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--d-base) var(--e-out),
             border-color var(--d-base) var(--e-out),
             backdrop-filter var(--d-base) var(--e-out);
}
.topbar.is-stuck{
  background:rgba(11,13,17,.82);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
          backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:var(--lx-line);
}
.topbar__in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; gap:var(--sp-5);
}

/* Marca */
.brand{
  display:flex; align-items:center; gap:14px;
  flex:none;
  padding-block:4px;
  min-width:0;
}
.brand__mark{
  height:68px; width:68px;
  flex:none;
  display:block;
  transition:transform var(--d-base) var(--e-out);
}
.brand:hover .brand__mark{ transform:scale(1.04); }
.brand__txt{ display:flex; flex-direction:column; line-height:1; min-width:0; }
.brand__name{
  font-family:var(--f-display); font-weight:800;
  font-size:21px; letter-spacing:-.015em; color:var(--lx-text);
}
.brand__sub{
  font-family:var(--f-mono); font-size:9.5px; font-weight:500;
  letter-spacing:var(--ls-wider); text-transform:uppercase;
  color:var(--lx-text-3); margin-top:5px;
  white-space:nowrap;
}
@media (max-width:1080px){
  .brand__mark{ height:56px; width:56px; }
  .brand__name{ font-size:18px; }
}
@media (max-width:620px){
  .brand{ gap:10px; }
  .brand__mark{ height:48px; width:48px; }
  .brand__name{ font-size:15px; }
  .brand__sub{ display:none; }
  .topbar__actions{ gap:7px; }
  .topbar__actions .btn{ padding:8px 12px; font-size:12.5px; }
}
@media (max-width:430px){
  .brand__mark{ height:44px; width:44px; }
  .brand__name{ font-size:14px; }
  /* O CTA principal vive na gaveta, no hero e no botão flutuante. */
  .topbar__actions .btn{ display:none; }
}

/* Links principais */
.nav{ display:flex; align-items:center; gap:2px; margin-left:auto; }
@media (max-width:1080px){ .nav{ display:none; } }
.nav__item{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px;
  font-size:14px; font-weight:500; color:var(--lx-text-2);
  border-radius:var(--r-sm);
  background:none; border:0; cursor:pointer;
  transition:color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
  white-space:nowrap;
}
.nav__link:hover,
.nav__item:hover > .nav__link,
.nav__link[aria-expanded="true"]{ color:var(--lx-text); background:rgba(255,255,255,.045); }
.nav__link svg{ width:11px; height:11px; opacity:.5; transition:transform var(--d-base) var(--e-out); }
.nav__link[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav__link--new{ color:var(--lx-gold); }
.nav__link--new::after{
  content:'';
  width:5px; height:5px; border-radius:50%;
  background:var(--lx-gold);
  box-shadow:0 0 8px var(--lx-gold);
  animation:pulse 2.4s var(--e-in-out) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.28; } }

/* Mega-menu — "Por risco" */
/* position:fixed ancora ao viewport — com position:absolute o painel era
   centralizado sob o item do menu e vazava para fora da tela à esquerda. */
.mega{
  position:fixed;
  top:calc(var(--nav-h) + 10px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  width:min(880px, calc(100vw - 48px));
  max-height:calc(100vh - var(--nav-h) - 40px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--sp-5);
  background:var(--lx-panel);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out),
             visibility var(--d-base);
  z-index:var(--z-panel);
}
.nav__item.is-open .mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.mega__grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:var(--sp-5); }
.mega__col-title{
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:var(--ls-wider); text-transform:uppercase;
  color:var(--lx-text-4);
  padding-bottom:9px; margin-bottom:9px;
  border-bottom:1px solid var(--lx-line);
}
.mega__list{ display:grid; gap:1px; }
.mega__a{
  display:grid; grid-template-columns:auto 1fr; gap:11px;
  align-items:start;
  padding:9px 10px; border-radius:var(--r-sm);
  transition:background var(--d-fast) var(--e-out);
}
.mega__a:hover{ background:var(--lx-panel-2); }
.mega__a i{
  font-family:var(--f-mono); font-style:normal; font-size:10px;
  color:var(--lx-text-4); padding-top:3px; letter-spacing:.04em;
}
.mega__a b{
  display:block; font-weight:600; font-size:14px;
  color:var(--lx-text); margin-bottom:2px;
}
.mega__a span{ display:block; font-size:12.5px; line-height:1.42; color:var(--lx-text-3); }
.mega__a:hover b{ color:var(--lx-gold); }
.mega__a--feat{
  background:linear-gradient(135deg, var(--lx-gold-a12), transparent 70%);
  border:1px solid var(--lx-gold-a24);
}
.mega__a--feat:hover{ background:linear-gradient(135deg, var(--lx-gold-a24), transparent 70%); }

/* Ações da direita
   Quando o menu desktop some (<=1080px), é este bloco que precisa
   empurrar-se para a direita — antes o margin-left:auto vivia só no .nav. */
.topbar__actions{ display:flex; align-items:center; gap:9px; flex:none; }
@media (max-width:1080px){ .topbar__actions{ margin-left:auto; } }

/* Gatilho do command palette — assinatura de software */
.cmdk-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 9px 7px 12px;
  background:var(--lx-panel);
  border:1px solid var(--lx-line);
  border-radius:var(--r-sm);
  cursor:pointer;
  color:var(--lx-text-3);
  transition:border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.cmdk-btn:hover{ border-color:var(--lx-line-3); color:var(--lx-text-2); }
.cmdk-btn span{ font-size:13px; }
.cmdk-btn kbd{
  font-family:var(--f-mono); font-size:10px; font-weight:500;
  padding:3px 6px; border-radius:var(--r-xs);
  background:var(--lx-panel-3);
  border:1px solid var(--lx-line-2);
  color:var(--lx-text-3);
  letter-spacing:.02em;
}
@media (max-width:1180px){ .cmdk-btn span{ display:none; } }
@media (max-width:640px){ .cmdk-btn{ display:none; } }

/* Menu mobile */
.burger{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  background:var(--lx-panel); border:1px solid var(--lx-line);
  border-radius:var(--r-sm); cursor:pointer;
}
.burger i{
  display:block; width:16px; height:1.5px; background:var(--lx-text);
  position:relative; transition:background var(--d-fast);
}
.burger i::before,.burger i::after{
  content:''; position:absolute; left:0; width:16px; height:1.5px;
  background:var(--lx-text);
  transition:transform var(--d-base) var(--e-out);
}
.burger i::before{ top:-5px; }
.burger i::after{  top:5px; }
.burger[aria-expanded="true"] i{ background:transparent; }
.burger[aria-expanded="true"] i::before{ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i::after{  transform:translateY(-5px) rotate(-45deg); }
@media (max-width:1080px){ .burger{ display:inline-flex; } }

/* Gaveta mobile */
.drawer{
  position:fixed; inset:var(--nav-h) 0 0 0;
  z-index:calc(var(--z-nav) - 1);
  background:var(--lx-base);
  border-top:1px solid var(--lx-line);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--sp-6) var(--gutter) var(--sp-9);
  transform:translateY(-8px);
  opacity:0; visibility:hidden;
  transition:opacity var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out),
             visibility var(--d-base);
}
.drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.drawer__group{ margin-bottom:var(--sp-6); }
.drawer__group h4{
  font-family:var(--f-mono); font-size:var(--t-mono); font-weight:500;
  letter-spacing:var(--ls-wider); text-transform:uppercase;
  color:var(--lx-text-4); margin-bottom:var(--sp-3);
}
.drawer__link{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 0;
  border-bottom:1px solid var(--lx-line);
  font-size:16px; font-weight:500; color:var(--lx-text);
}
.drawer__link i{
  font-family:var(--f-mono); font-style:normal; font-size:11px;
  color:var(--lx-text-4);
}

/* ==========================================================================
   TRILHA LATERAL — coordenadas de seção (navegação espacial)
   ========================================================================== */

.rail{
  position:fixed;
  left:calc(var(--gutter) / 2 - 6px);
  top:50%; transform:translateY(-50%);
  z-index:var(--z-rail);
  display:flex; flex-direction:column; gap:var(--sp-3);
  align-items:center;
}
@media (max-width:1380px){ .rail{ display:none; } }

.rail__dot{
  position:relative;
  width:22px; height:22px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer; padding:0;
}
.rail__dot::before{
  content:'';
  width:5px; height:5px;
  background:var(--lx-text-4);
  transition:all var(--d-base) var(--e-out);
}
.rail__dot:hover::before{ background:var(--lx-text-2); }
.rail__dot[aria-current="true"]::before{
  background:var(--lx-gold);
  box-shadow:0 0 10px var(--lx-gold);
  width:5px; height:14px;
}
.rail__dot span{
  position:absolute; left:calc(100% + 8px);
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--lx-text-3); white-space:nowrap;
  opacity:0; transform:translateX(-5px);
  transition:all var(--d-base) var(--e-out);
  pointer-events:none;
}
.rail__dot:hover span,
.rail__dot:focus-visible span{ opacity:1; transform:none; }

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.btn{
  --btn-bg:transparent;
  --btn-fg:var(--lx-text);
  --btn-bd:var(--lx-line-2);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px;
  font-family:var(--f-body);
  font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:var(--r-sm);
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform var(--d-fast) var(--e-out),
             background var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out),
             color var(--d-fast) var(--e-out),
             box-shadow var(--d-base) var(--e-out);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* Varredura de luz no hover */
.btn::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform 620ms var(--e-out);
  z-index:-1;
}
.btn:hover::after{ transform:translateX(120%); }

/* Primário — âmbar Laudix */
.btn--primary{
  --btn-bg:var(--lx-gold);
  --btn-fg:#0A0B0E;
  --btn-bd:var(--lx-gold);
  font-weight:700;
  box-shadow:0 6px 22px -10px rgba(240,180,41,.65);
}
.btn--primary:hover{
  --btn-bg:var(--lx-gold-2);
  --btn-bd:var(--lx-gold-2);
  box-shadow:0 10px 32px -10px rgba(240,180,41,.85);
}

/* Secundário — contorno */
.btn--ghost:hover{
  --btn-bd:var(--lx-line-3);
  --btn-bg:rgba(255,255,255,.035);
}

/* Terminal — monoespaçado, para ações de sistema */
.btn--term{
  font-family:var(--f-mono);
  font-size:var(--t-mono-lg);
  font-weight:500;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  padding:14px 20px;
}

/* Fantasma em papel (seção clara) */
.btn--on-paper{
  --btn-fg:var(--lx-ink);
  --btn-bd:var(--lx-paper-line-2);
}
.btn--on-paper:hover{ --btn-bg:rgba(18,21,26,.05); --btn-bd:var(--lx-ink); }

.btn--sm{ padding:9px 15px; font-size:13.5px; }
.btn--block{ width:100%; }

/* Link com seta */
.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:600; color:var(--lx-gold);
}
.link-arrow svg{ width:14px; height:14px; transition:transform var(--d-base) var(--e-out); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ==========================================================================
   CARTÕES E PAINÉIS
   ========================================================================== */

.panel{
  position:relative;
  background:var(--lx-panel);
  border:1px solid var(--lx-line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.panel--flush{ padding:0; }
.panel__hd{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:11px 15px;
  border-bottom:1px solid var(--lx-line);
  background:rgba(255,255,255,.014);
}
.panel__bd{ padding:var(--sp-5); }

/* Cantos de prancha — marcas de registro CAD */
.regmarks::before,
.regmarks::after{
  content:'';
  position:absolute;
  width:9px; height:9px;
  border-color:var(--lx-line-3);
  border-style:solid;
  pointer-events:none;
}
.regmarks::before{ top:9px; left:9px; border-width:1px 0 0 1px; }
.regmarks::after{ bottom:9px; right:9px; border-width:0 1px 1px 0; }

/* ==========================================================================
   BENTO GRID — matriz de escopo com isolamento de foco
   ========================================================================== */

.bento{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(10px, 1.1vw, 16px);
}
.bento__cell{ position:relative; }

/* Tamanhos */
.bento__cell--4{ grid-column:span 4; }
.bento__cell--5{ grid-column:span 5; }
.bento__cell--6{ grid-column:span 6; }
.bento__cell--7{ grid-column:span 7; }
.bento__cell--8{ grid-column:span 8; }
.bento__cell--12{ grid-column:span 12; }

@media (max-width:1000px){
  .bento__cell--4,.bento__cell--5,.bento__cell--7,.bento__cell--8{ grid-column:span 6; }
}
@media (max-width:680px){
  .bento{ grid-template-columns:1fr; }
  .bento__cell{ grid-column:span 1 !important; }
}

/* O cartão */
.bcard{
  position:relative;
  height:100%;
  display:flex; flex-direction:column;
  padding:clamp(20px, 2vw, 30px);
  background:var(--lx-panel);
  border:1px solid var(--lx-line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:opacity var(--d-base) var(--e-out),
             filter var(--d-base) var(--e-out),
             border-color var(--d-base) var(--e-out),
             transform var(--d-base) var(--e-out),
             background var(--d-base) var(--e-out);
}
/* Brilho que segue o cursor dentro do cartão */
.bcard::before{
  content:'';
  position:absolute;
  width:340px; height:340px;
  left:var(--cx, 50%); top:var(--cy, 50%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--lx-gold-a12) 0%, transparent 62%);
  opacity:0;
  transition:opacity var(--d-base) var(--e-out);
  pointer-events:none;
}
.bcard:hover::before{ opacity:1; }
.bcard:hover{
  border-color:var(--lx-line-3);
  background:var(--lx-panel-2);
  transform:translateY(-2px);
}

/* Isolamento de foco: o grid inteiro responde ao cartão em hover */
.bento[data-focus="on"] .bcard{ opacity:.34; filter:blur(2.5px); }
.bento[data-focus="on"] .bcard.is-hot{
  opacity:1; filter:none;
  border-color:var(--lx-gold-a40);
  transform:translateY(-3px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
}
.bento[data-focus="on"] .bcard.is-hot::before{ opacity:1; }

/* Conteúdo do cartão */
.bcard__top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-4); margin-bottom:var(--sp-5);
}
.bcard__ico{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
  color:var(--lx-gold);
  transition:all var(--d-base) var(--e-out);
}
.bcard__ico svg{ width:20px; height:20px; }
.bcard:hover .bcard__ico{
  border-color:var(--lx-gold-a40);
  background:var(--lx-gold-a12);
}
.bcard__tag{ text-align:right; }
.bcard h3{
  font-size:var(--t-lg);
  margin-bottom:var(--sp-3);
  letter-spacing:var(--ls-tight);
}
.bcard p{
  font-size:14.5px; line-height:1.62;
  color:var(--lx-text-2);
  margin-bottom:var(--sp-4);
}
.bcard__foot{
  margin-top:auto; padding-top:var(--sp-4);
  border-top:1px solid var(--lx-line);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
}
.bcard__viz{ height:56px; margin-top:auto; }

/* Cartão destaque — o "hub" */
.bcard--hero{
  background:
    radial-gradient(120% 100% at 100% 0%, var(--lx-gold-a12) 0%, transparent 55%),
    var(--lx-panel);
  border-color:var(--lx-gold-a24);
}

/* ==========================================================================
   MÉTRICAS / ODÔMETRO
   ========================================================================== */

.metric{ display:flex; flex-direction:column; gap:5px; }
.metric__v{
  font-family:var(--f-display);
  font-size:clamp(26px, 3.2vw, 44px);
  font-weight:800;
  letter-spacing:var(--ls-tighter);
  line-height:1;
  color:var(--lx-text);
  font-variant-numeric:tabular-nums;
}
.metric__v .u{ font-size:.52em; font-weight:600; color:var(--lx-text-3); margin-left:.08em; }
.metric__v--gold{ color:var(--lx-gold); }
.metric__v--ok{ color:var(--lx-ok); }
.metric__l{ font-size:13px; color:var(--lx-text-3); line-height:1.42; }

.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:var(--sp-6) var(--sp-5);
}

/* Barra de status */
.status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--lx-text-3);
}
.status__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--lx-ok);
  box-shadow:0 0 8px var(--lx-ok);
  flex:none;
}
.status--gold .status__dot{ background:var(--lx-gold); box-shadow:0 0 8px var(--lx-gold); }
.status--alert .status__dot{ background:var(--lx-alert); box-shadow:0 0 8px var(--lx-alert); }
.status--live .status__dot{ animation:pulse 2s var(--e-in-out) infinite; }

/* ==========================================================================
   FORMULÁRIO — "abertura de chamado técnico"
   ========================================================================== */

.field{ display:grid; gap:7px; }
.field label{
  display:flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:var(--t-mono);
  font-weight:500; letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--lx-text-3);
}
.field label .req{ color:var(--lx-gold); }
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  font-family:var(--f-mono);
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
  color:var(--lx-text);
  background:var(--lx-void);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-sm);
  transition:border-color var(--d-fast) var(--e-out),
             box-shadow var(--d-fast) var(--e-out),
             background var(--d-fast) var(--e-out);
}
.field textarea{ resize:vertical; min-height:104px; line-height:1.6; }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.6' fill='none' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
  cursor:pointer;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--lx-text-4); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--lx-gold);
  box-shadow:0 0 0 3px var(--lx-gold-a12);
  background:var(--lx-panel);
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled{ opacity:.5; cursor:not-allowed; }

/* Estados de erro — mensagens de sistema */
.field.is-error input,
.field.is-error select,
.field.is-error textarea{
  border-color:var(--lx-alert);
  box-shadow:0 0 0 3px var(--lx-alert-a12);
}
.field__err{
  display:none;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.02em; color:var(--lx-alert);
  line-height:1.5;
}
.field.is-error .field__err{ display:block; animation:glitch-in 300ms var(--e-out); }
@keyframes glitch-in{
  0%{ transform:translateX(-3px); opacity:0; }
  30%{ transform:translateX(3px); }
  60%{ transform:translateX(-2px); }
  100%{ transform:none; opacity:1; }
}

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.form-grid .span-2{ grid-column:span 2; }
@media (max-width:620px){
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .span-2{ grid-column:span 1; }
}

/* Console de log do formulário */
.console{
  margin-top:var(--sp-5);
  padding:14px 16px;
  background:var(--lx-void);
  border:1px solid var(--lx-line);
  border-radius:var(--r-sm);
  font-family:var(--f-mono); font-size:var(--t-mono-lg);
  line-height:1.9; color:var(--lx-text-3);
  min-height:0;
  display:none;
}
.console.is-on{ display:block; }
.console b{ color:var(--lx-ok); font-weight:500; }
.console .err{ color:var(--lx-alert); }
.console .cur{
  display:inline-block; width:7px; height:1em;
  background:var(--lx-gold); vertical-align:-2px;
  animation:blink 1s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* Barra de progresso do envio */
.sendbar{
  height:2px; background:var(--lx-line);
  overflow:hidden; margin-bottom:var(--sp-4);
  display:none;
}
.sendbar.is-on{ display:block; }
.sendbar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--lx-ok), var(--lx-gold));
  transition:width 300ms linear;
}

/* Tela de sucesso */
.success{
  display:none;
  padding:var(--sp-7) var(--sp-5);
  text-align:center;
  animation:fade-up 520ms var(--e-out);
}
.success.is-on{ display:block; }
@keyframes fade-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.success__ico{
  width:56px; height:56px; margin:0 auto var(--sp-5);
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--lx-ok-a12);
  border:1px solid var(--lx-ok-a24);
  color:var(--lx-ok);
}
.success__ico svg{ width:26px; height:26px; }
.success h3{ margin-bottom:var(--sp-3); }
.success p{ color:var(--lx-text-2); max-width:52ch; margin-inline:auto; }
.success__id{
  display:inline-block; margin-top:var(--sp-5);
  padding:9px 16px;
  background:var(--lx-void);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-sm);
  font-family:var(--f-mono); font-size:var(--t-mono-lg);
  letter-spacing:var(--ls-wide); color:var(--lx-gold);
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */

.foot{
  border-top:1px solid var(--lx-line);
  padding-top:var(--sp-9);
  padding-bottom:calc(var(--sp-6) + 68px);
  background:var(--lx-void);
  position:relative;
}
.foot__grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3, minmax(0,1fr));
  gap:var(--sp-7) var(--sp-6);
  padding-bottom:var(--sp-8);
}
@media (max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot__grid{ grid-template-columns:1fr; } }

.foot__brand .brand__mark{ height:104px; width:104px; margin-bottom:var(--sp-5); }
/* Assinatura vertical do rodapé: marca + nome + posicionamento */
.wm{ display:flex; align-items:center; gap:18px; }
.wm__txt{ display:flex; flex-direction:column; min-width:0; }
.wm__name{
  font-family:var(--f-display); font-weight:800;
  font-size:15px; letter-spacing:-.03em; line-height:1; color:var(--lx-text);
}
.wm__sub{
  display:block; margin-top:7px;
  font-family:var(--f-mono); font-size:9px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--lx-text-4); line-height:1.2;
}
.foot__brand .wm{ margin-bottom:var(--sp-5); gap:20px; }
.foot__brand .wm__name{ font-size:30px; }
.foot__brand .wm__sub{ font-size:10.5px; margin-top:9px; letter-spacing:.26em; }
@media (max-width:620px){
  .foot__brand .brand__mark{ height:80px; width:80px; }
  .foot__brand .wm__name{ font-size:23px; }
  .foot__brand .wm__sub{ font-size:9px; letter-spacing:.2em; }
}
.foot__brand p{ font-size:14px; color:var(--lx-text-3); max-width:34ch; line-height:1.62; }
.foot h4{
  font-family:var(--f-mono); font-size:var(--t-mono); font-weight:500;
  letter-spacing:var(--ls-wider); text-transform:uppercase;
  color:var(--lx-text-4); margin-bottom:var(--sp-4);
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.foot li a{
  font-size:14px; color:var(--lx-text-2);
  transition:color var(--d-fast) var(--e-out);
}
.foot li a:hover{ color:var(--lx-gold); }

.foot__bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap;
  padding-top:var(--sp-5);
  border-top:1px solid var(--lx-line);
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.03em; color:var(--lx-text-4);
}
.foot__bottom a{ color:var(--lx-text-3); }
.foot__bottom a:hover{ color:var(--lx-gold); }
.foot__legal{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }

/* ==========================================================================
   BOTÃO FLUTUANTE WHATSAPP
   ========================================================================== */

.wa{
  position:fixed; right:20px; bottom:20px; z-index:var(--z-panel);
  display:inline-flex; align-items:center; gap:11px;
  padding:12px 16px 12px 13px;
  background:var(--lx-panel);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-3);
  font-size:14px; font-weight:600; color:var(--lx-text);
  transition:transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.wa:hover{ transform:translateY(-2px); border-color:var(--lx-ok-a24); }
.wa__ico{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--lx-ok-a12);
  color:var(--lx-ok);
}
.wa__ico svg{ width:17px; height:17px; }
.wa__txt{ display:flex; flex-direction:column; line-height:1.16; }
.wa__txt b{ font-size:13.5px; font-weight:600; }
.wa__txt span{
  font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--lx-text-3);
}
@media (max-width:560px){
  .wa{ padding:12px; }
  .wa__txt{ display:none; }
}

/* ==========================================================================
   COMMAND PALETTE
   Navegação por intenção: "/" ou Ctrl/⌘+K
   ========================================================================== */

.cmdk{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:grid; align-items:start; justify-items:center;
  padding-top:min(16vh, 140px);
  background:rgba(7,8,11,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity var(--d-base) var(--e-out), visibility 0s linear var(--d-base);
}
.cmdk.is-open{
  opacity:1; visibility:visible;
  transition:opacity var(--d-base) var(--e-out), visibility 0s;
}
.cmdk__box{
  width:min(620px, calc(100vw - 32px));
  background:var(--lx-panel);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-3);
  overflow:hidden;
  transform:translateY(-10px) scale(.99);
  transition:transform var(--d-base) var(--e-out);
}
.cmdk.is-open .cmdk__box{ transform:none; }
.cmdk__input{
  width:100%;
  padding:17px 20px;
  background:transparent; border:0;
  border-bottom:1px solid var(--lx-line);
  font-family:var(--f-body); font-size:16px; color:var(--lx-text);
}
.cmdk__input:focus{ outline:none; }
.cmdk__input::placeholder{ color:var(--lx-text-4); }
.cmdk__list{
  max-height:min(46vh, 380px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:7px;
  margin:0; list-style:none;
}
.cmdk__grp{
  padding:11px 12px 6px;
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:var(--ls-wider); text-transform:uppercase;
  color:var(--lx-text-4);
}
.cmdk__opt{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px;
  border-radius:var(--r-sm);
  cursor:pointer;
  font-size:14.5px;
}
.cmdk__opt i{
  font-family:var(--f-mono); font-style:normal; font-size:10px;
  color:var(--lx-text-4); flex:none;
}
.cmdk__opt b{ font-weight:500; color:var(--lx-text); }
.cmdk__opt span{ margin-left:auto; font-size:12px; color:var(--lx-text-4); }
.cmdk__opt[aria-selected="true"]{ background:var(--lx-panel-2); }
.cmdk__opt[aria-selected="true"] b{ color:var(--lx-gold); }
.cmdk__foot{
  display:flex; align-items:center; gap:var(--sp-4);
  padding:10px 15px;
  border-top:1px solid var(--lx-line);
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:.05em; color:var(--lx-text-4);
}
.cmdk__foot kbd{
  padding:2px 5px; border-radius:3px;
  background:var(--lx-panel-3); border:1px solid var(--lx-line-2);
  font-family:var(--f-mono); font-size:9.5px;
}
.cmdk__empty{ padding:34px 16px; text-align:center; color:var(--lx-text-3); font-size:14px; }