/* ==========================================================================
   LAUDIX · SEÇÕES
   A narrativa de rolagem: Terminal → Papel → Método → Matriz → Simulador
   → Casos → Produto → Inicialização
   ========================================================================== */

/* ==========================================================================
   INVERSÃO DE ATENÇÃO — a seção "papel técnico"
   Redefine os tokens localmente. Todos os componentes abaixo herdam a
   inversão sem precisar de uma única regra extra.
   ========================================================================== */

.paper{
  --lx-base:var(--lx-paper);
  --lx-panel:#FFFDF8;
  --lx-panel-2:var(--lx-paper-2);
  --lx-panel-3:var(--lx-paper-3);
  --lx-line:var(--lx-paper-line);
  --lx-line-2:var(--lx-paper-line-2);
  --lx-line-3:var(--lx-ink);
  --lx-text:var(--lx-ink);
  --lx-text-2:var(--lx-ink-2);
  --lx-text-3:var(--lx-ink-3);
  --lx-text-4:rgba(18,21,26,.30);
  --lx-gold:var(--lx-paper-gold);
  --lx-gold-2:#7A5705;
  --lx-gold-a12:rgba(154,111,8,.10);
  --lx-gold-a24:rgba(154,111,8,.22);
  --lx-gold-a40:rgba(154,111,8,.34);
  --lx-ok:#0F7A52;
  --lx-ok-a12:rgba(15,122,82,.10);
  --lx-ok-a24:rgba(15,122,82,.22);
  --lx-alert:#B3271C;
  --lx-grid-c:rgba(18,21,26,.05);
  --lx-grid-c2:rgba(18,21,26,.085);

  background:var(--lx-paper);
  color:var(--lx-ink);
}
/* Sombra de papel sobre o terminal */
.paper{ box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.06); }
/* Transição de entrada/saída do papel */
.paper-edge{
  position:absolute; left:0; right:0; height:clamp(48px,7vw,96px);
  pointer-events:none; z-index:3;
}
.paper-edge--top{
  top:0;
  background:linear-gradient(180deg, var(--lx-void) 0%, transparent 100%);
}
.paper-edge--bottom{
  bottom:0;
  background:linear-gradient(0deg, var(--lx-void) 0%, transparent 100%);
}

/* ==========================================================================
   1 · HERO — TERMINAL CENTRAL
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:calc(var(--nav-h) + clamp(40px,6vw,80px));
  padding-bottom:clamp(56px,7vw,96px);
  overflow:hidden;
  isolation:isolate;
}
.hero__gl{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  display:block;
}
.hero__fallback{
  position:absolute; inset:0; z-index:0;
  display:none;
}
.no-webgl .hero__gl{ display:none; }
.no-webgl .hero__fallback{ display:block; }

.hero__in{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(0, .88fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:center;
}
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; gap:clamp(32px,6vw,56px); }
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  padding:7px 14px 7px 11px;
  margin-bottom:clamp(20px,2.6vw,30px);
  background:rgba(255,255,255,.03);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero__eyebrow .status{ color:var(--lx-text-2); }

.hero h1{
  font-size:var(--t-4xl);
  line-height:1.02;
  letter-spacing:var(--ls-tighter);
  margin-bottom:clamp(20px,2.4vw,30px);
  max-width:19ch;
}
/* A segunda linha, que carrega a tese */
.hero h1 .l2{
  display:block;
  color:var(--lx-text-3);
  font-weight:600;
}
.hero h1 .l2 b{
  color:var(--lx-gold);
  font-weight:800;
}

.hero__lead{
  font-size:var(--t-lg);
  line-height:var(--lh-relaxed);
  color:var(--lx-text-2);
  max-width:56ch;
  margin-bottom:clamp(28px,3.4vw,40px);
}

.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.hero__scroll{
  display:flex; align-items:center; gap:12px;
  margin-top:clamp(36px,5vw,64px);
  color:var(--lx-text-4);
}
.hero__scroll .bar{
  width:56px; height:1px; background:var(--lx-line-2);
  position:relative; overflow:hidden;
}
.hero__scroll .bar::after{
  content:''; position:absolute; inset:0;
  background:var(--lx-gold);
  transform:translateX(-100%);
  animation:sweep 2.6s var(--e-in-out) infinite;
}
@keyframes sweep{
  0%{ transform:translateX(-100%); }
  55%,100%{ transform:translateX(100%); }
}

/* Painel de diagnóstico à direita */
.hero__panel{
  position:relative;
  background:rgba(16,19,24,.72);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
          backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-3);
}
.hero__panel-hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 15px;
  border-bottom:1px solid var(--lx-line);
  background:rgba(255,255,255,.02);
}
.hero__panel-bd{ padding:var(--sp-5); }
.hero__rows{ display:grid; gap:1px; }
.hero__row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4);
  padding:13px 0;
  border-bottom:1px solid var(--lx-line);
}
.hero__row:last-child{ border-bottom:0; }
.hero__row dt{
  font-size:14px; color:var(--lx-text-2);
  display:flex; align-items:center; gap:10px;
}
.hero__row dd{
  margin:0;
  font-family:var(--f-mono); font-size:var(--t-mono-lg);
  letter-spacing:.03em; color:var(--lx-text);
  text-align:right;
}
.hero__row dd.ok{ color:var(--lx-ok); }
.hero__row dd.gold{ color:var(--lx-gold); }

/* Coordenadas nos cantos do viewport */
.hero__hud{
  position:absolute; z-index:3;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--lx-text-4);
  pointer-events:none;
  display:flex; gap:18px;
}
.hero__hud--tl{ top:calc(var(--nav-h) + 14px); left:var(--gutter); }
.hero__hud--tr{ top:calc(var(--nav-h) + 14px); right:var(--gutter); }
.hero__hud--bl{ bottom:18px; left:var(--gutter); }
.hero__hud--br{ bottom:18px; right:var(--gutter); }
@media (max-width:1080px){ .hero__hud--tr,.hero__hud--bl{ display:none; } }
@media (max-width:680px){ .hero__hud{ display:none; } }

/* ==========================================================================
   2 · FAIXA DE PROVA
   ========================================================================== */

.proof{
  border-block:1px solid var(--lx-line);
  background:var(--lx-void);
  padding-block:clamp(32px,4vw,52px);
}
.proof__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
  gap:clamp(24px,3vw,48px);
}
.proof__item{ display:grid; gap:6px; }
.proof__v{
  font-family:var(--f-display);
  font-size:clamp(24px,2.6vw,36px);
  font-weight:800; letter-spacing:var(--ls-tighter);
  line-height:1; color:var(--lx-text);
  font-variant-numeric:tabular-nums;
}
.proof__v small{ font-size:.5em; color:var(--lx-text-3); font-weight:600; margin-left:.1em; }
.proof__l{ font-size:13px; color:var(--lx-text-3); line-height:1.45; }

/* ==========================================================================
   3 · O PROBLEMA — seção papel
   ========================================================================== */

.problem{ position:relative; padding-block:clamp(80px,9vw,140px); }

.problem__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,80px);
  align-items:start;
}
@media (max-width:980px){ .problem__grid{ grid-template-columns:1fr; } }

/* Lista de documentos que a fiscalização cobra */
.doclist{ display:grid; gap:0; border-top:1px solid var(--lx-line-2); }
.doclist__i{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(14px,2vw,26px);
  align-items:baseline;
  padding:clamp(18px,2vw,26px) 0;
  border-bottom:1px solid var(--lx-line);
  transition:padding-left var(--d-base) var(--e-out);
}
.doclist__i:hover{ padding-left:10px; }
.doclist__n{
  font-family:var(--f-mono); font-size:var(--t-mono-lg);
  color:var(--lx-text-3); letter-spacing:.06em;
  padding-top:.25em;
}
.doclist__i h3{
  font-size:var(--t-lg); margin-bottom:5px;
  letter-spacing:var(--ls-tight);
}
.doclist__i p{ font-size:14.5px; color:var(--lx-text-2); line-height:1.6; max-width:52ch; }
.doclist__tag{
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--lx-alert);
  white-space:nowrap;
}
.doclist__i:hover .doclist__n{ color:var(--lx-gold); }

/* Chamada de risco — bloco lateral */
.risknote{
  border-left:2px solid var(--lx-alert);
  padding:var(--sp-5) 0 var(--sp-5) var(--sp-5);
  background:linear-gradient(90deg, rgba(179,39,28,.05), transparent 70%);
}
.risknote h3{ font-size:var(--t-lg); margin-bottom:var(--sp-3); }
.risknote p{ font-size:15px; color:var(--lx-text-2); line-height:1.66; }

/* ==========================================================================
   4 · MÉTODO — Inteligência Híbrida
   A espinha dorsal do site. A linha desce conforme a rolagem.
   ========================================================================== */

.method{
  position:relative;
  padding-block:clamp(80px,9vw,150px);
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(240,180,41,.045), transparent 70%),
    var(--lx-base);
}

.method__split{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,90px);
  align-items:start;
}
@media (max-width:1000px){ .method__split{ grid-template-columns:1fr; } }

/* Coluna esquerda — fica fixa enquanto as camadas passam */
.method__aside{ position:sticky; top:calc(var(--nav-h) + 40px); }
@media (max-width:1000px){ .method__aside{ position:static; } }

/* Camadas */
.layers{ position:relative; display:grid; gap:clamp(20px,2.4vw,32px); }

/* A linha condutora — "nexo causal" */
.layers__line{
  position:absolute;
  left:-1px; top:0; bottom:0;
  width:1px;
  background:var(--lx-line);
  overflow:hidden;
}
.layers__line i{
  position:absolute; inset:0;
  background:linear-gradient(180deg, var(--lx-gold), var(--lx-ok));
  transform:scaleY(var(--p, 0));
  transform-origin:top;
  box-shadow:0 0 14px var(--lx-gold-a40);
}
@media (max-width:700px){ .layers__line{ display:none; } }

.layer{
  position:relative;
  padding-left:clamp(0px, 3vw, 42px);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(14px,2vw,24px);
  align-items:start;
}
@media (max-width:700px){ .layer{ padding-left:0; } }

.layer__n{
  position:relative;
  width:clamp(38px,4vw,50px); height:clamp(38px,4vw,50px);
  flex:none;
  display:grid; place-items:center;
  background:var(--lx-panel);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-md);
  font-family:var(--f-mono); font-size:var(--t-mono-lg);
  color:var(--lx-text-3);
  transition:all var(--d-slow) var(--e-out);
}
.layer.is-in .layer__n{
  border-color:var(--lx-gold-a40);
  color:var(--lx-gold);
  background:var(--lx-gold-a12);
  box-shadow:0 0 0 4px rgba(240,180,41,.05);
}
.layer--human .layer__n{ border-radius:50%; }
.layer--human.is-in .layer__n{
  border-color:var(--lx-ok-a24);
  color:var(--lx-ok);
  background:var(--lx-ok-a12);
  box-shadow:0 0 0 4px rgba(61,220,151,.05);
}

.layer__bd h3{
  font-size:var(--t-xl);
  margin-bottom:var(--sp-3);
  letter-spacing:var(--ls-tight);
}
.layer__bd p{
  font-size:15px; line-height:1.68; color:var(--lx-text-2);
  max-width:60ch;
}
.layer__bd p + p{ margin-top:var(--sp-3); }
.layer__meta{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:var(--sp-4);
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--lx-text-3);
  background:var(--lx-panel);
  border:1px solid var(--lx-line);
  border-radius:var(--r-xs);
}
.chip--gold{ color:var(--lx-gold); border-color:var(--lx-gold-a24); background:var(--lx-gold-a12); }
.chip--ok{ color:var(--lx-ok); border-color:var(--lx-ok-a24); background:var(--lx-ok-a12); }

/* Divisor entre camada de máquina e camada humana */
.layer__divide{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:14px;
  margin-block:clamp(10px,1.4vw,18px);
  color:var(--lx-text-4);
}
.layer__divide::before,
.layer__divide::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--lx-line-2), transparent);
}
.layer__divide span{
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:var(--ls-wider); text-transform:uppercase;
  white-space:nowrap;
}

/* ==========================================================================
   5 · MATRIZ DE ESCOPO — Bento
   ========================================================================== */

.scope{ padding-block:var(--section-y); background:var(--lx-void); }

/* ==========================================================================
   6 · SIMULADOR
   ========================================================================== */

.sim{
  position:relative;
  padding-block:var(--section-y);
  background:
    radial-gradient(70% 60% at 20% 0%, rgba(90,169,255,.05), transparent 65%),
    var(--lx-base);
}
.sim__panel{
  background:var(--lx-panel);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-3);
}
.sim__hd{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:13px 18px;
  border-bottom:1px solid var(--lx-line);
  background:rgba(255,255,255,.018);
}
.sim__body{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
}
@media (max-width:940px){ .sim__body{ grid-template-columns:1fr; } }

.sim__controls{
  padding:clamp(20px,2.4vw,30px);
  border-right:1px solid var(--lx-line);
  display:grid; gap:var(--sp-6); align-content:start;
}
@media (max-width:940px){
  .sim__controls{ border-right:0; border-bottom:1px solid var(--lx-line); }
}

.sim__field{ display:grid; gap:10px; }
.sim__label{
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--lx-text-3);
}
.sim__label b{ color:var(--lx-gold); font-weight:500; }

/* Opções em botões — rápidas de tocar */
.opts{ display:grid; gap:6px; }
.opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px;
  text-align:left;
  background:var(--lx-void);
  border:1px solid var(--lx-line);
  border-radius:var(--r-sm);
  cursor:pointer;
  font-size:14px; color:var(--lx-text-2);
  transition:all var(--d-fast) var(--e-out);
}
.opt:hover{ border-color:var(--lx-line-3); color:var(--lx-text); }
.opt[aria-pressed="true"]{
  border-color:var(--lx-gold-a40);
  background:var(--lx-gold-a12);
  color:var(--lx-text);
}
.opt__k{
  font-family:var(--f-mono); font-size:10px;
  color:var(--lx-text-4); letter-spacing:.05em;
}
.opt[aria-pressed="true"] .opt__k{ color:var(--lx-gold); }

/* Saída */
.sim__out{
  padding:clamp(20px,2.4vw,30px);
  display:grid; gap:var(--sp-5); align-content:start;
  background:rgba(0,0,0,.14);
}

/* Faixa de classificação do índice */
.sim__band{
  display:inline-block;
  font-family:var(--f-display);
  font-size:clamp(19px,2vw,25px);
  font-weight:800;
  letter-spacing:var(--ls-tight);
  line-height:1.1;
}
.sim__band--ok{ color:var(--lx-ok); }
.sim__band--warn{ color:var(--lx-warn); }
.sim__band--alert{ color:var(--lx-alert); }
.sim__bandnota{
  margin:6px 0 0;
  font-size:13px; line-height:1.5; color:var(--lx-text-3);
}

.sim__mini{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:18px;
}
.sim__deadline{
  font-family:var(--f-mono); font-size:16px !important; font-weight:500;
  letter-spacing:0; line-height:1.35;
}

/* Blocos de saída */
.sim__block{
  border:1px solid var(--lx-line);
  border-radius:var(--r-md);
  background:var(--lx-void);
  overflow:hidden;
}
.sim__block--cat{ border-color:rgba(255,90,77,.26); }
.sim__block-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,.018);
  flex-wrap:wrap;
}
.sim__block--cat .sim__block-hd{ background:rgba(255,90,77,.05); }

.sim__lossval{
  font-family:var(--f-display);
  font-size:clamp(17px,1.9vw,23px);
  font-weight:800;
  letter-spacing:var(--ls-tight);
  color:var(--lx-alert);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Linhas de composição da perda */
.lossrows{ padding:6px 15px; }
.lossrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--lx-line);
}
.lossrow:last-child{ border-bottom:0; }
.lossrow__l{ font-size:13.5px; color:var(--lx-text-3); }
.lossrow__v{
  font-family:var(--f-mono); font-size:12.5px; color:var(--lx-text-2);
  white-space:nowrap; letter-spacing:.01em;
}

/* Cenários catastróficos */
#simCat{ padding:4px 15px 8px; }
.catrow{
  padding:13px 0;
  border-bottom:1px solid var(--lx-line);
}
.catrow:last-child{ border-bottom:0; }
.catrow__hd{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:6px;
}
.catrow__hd b{
  font-size:14.5px; font-weight:600; color:var(--lx-text);
  line-height:1.4; flex:1; min-width:180px;
}
.catrow__v{
  font-family:var(--f-mono); font-size:12.5px;
  color:var(--lx-alert); white-space:nowrap;
}
.catrow p{
  margin:0; font-size:13.5px; line-height:1.58; color:var(--lx-text-3);
}

/* Meta das normas: esforço · prazo · custo */
.nrrow__meta{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:6px;
}
.esf{
  font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:2px 6px; border-radius:3px;
}
.esf--ok{    color:var(--lx-ok);    background:var(--lx-ok-a12);    border:1px solid var(--lx-ok-a24); }
.esf--gold{  color:var(--lx-gold);  background:var(--lx-gold-a12);  border:1px solid var(--lx-gold-a24); }
.esf--alert{ color:var(--lx-alert); background:var(--lx-alert-a12); border:1px solid rgba(255,90,77,.26); }
.nrrow__pz,.nrrow__cz{
  font-family:var(--f-mono); font-size:10.5px;
  color:var(--lx-text-4); letter-spacing:.02em;
}
.nrrow__cz::before{ content:'· '; }

/* Nota de metodologia — contraste ≥ 4.5:1 (WCAG AA em texto pequeno) */
.sim__src{
  margin:0; padding:12px 15px 14px;
  font-size:12.5px; line-height:1.66; color:var(--lx-text-3);
  border-top:1px solid var(--lx-line);
}
.sim__src--fontes{ border-top:0; padding-top:0; }
.sim__src b{ color:var(--lx-text-2); font-weight:600; }

.sim__score{
  display:flex; align-items:flex-end; gap:var(--sp-5);
  flex-wrap:wrap;
}
.sim__gauge{
  position:relative;
  width:132px; height:132px; flex:none;
}
.sim__gauge svg{ transform:rotate(-90deg); }
.sim__gauge circle{
  fill:none; stroke-width:6; stroke-linecap:round;
}
.sim__gauge .trk{ stroke:var(--lx-line); }
.sim__gauge .val{
  stroke:var(--lx-gold);
  transition:stroke-dashoffset 900ms var(--e-out), stroke var(--d-slow) var(--e-out);
}
.sim__gauge--alert .val{ stroke:var(--lx-alert); }
.sim__gauge--warn .val{ stroke:var(--lx-warn); }
.sim__gauge--ok .val{ stroke:var(--lx-ok); }
.sim__gauge-txt{
  position:absolute; inset:0;
  display:grid; place-content:center; text-align:center;
}
.sim__gauge-txt b{
  font-family:var(--f-display); font-size:30px; font-weight:800;
  line-height:1; letter-spacing:var(--ls-tighter);
  font-variant-numeric:tabular-nums;
}
.sim__gauge-txt span{
  font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:var(--ls-wide); text-transform:uppercase;
  color:var(--lx-text-3); margin-top:5px;
}

/* Lista de NRs críticas */
.nrlist{ display:grid; gap:1px; }
.nrrow{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center;
  padding:11px 0;
  border-bottom:1px solid var(--lx-line);
}
.nrrow:last-child{ border-bottom:0; }
.nrrow__c{
  font-family:var(--f-mono); font-size:var(--t-mono-lg);
  font-weight:500; color:var(--lx-gold);
  letter-spacing:.02em; min-width:52px;
}
.nrrow__t{ font-size:14px; color:var(--lx-text-2); }
.nrrow__b{
  width:88px; height:4px;
  background:var(--lx-line);
  overflow:hidden; border-radius:99px;
}
.nrrow__b i{
  display:block; height:100%; width:0%;
  background:var(--lx-gold);
  border-radius:99px;
  transition:width 800ms var(--e-out), background var(--d-slow) var(--e-out);
}
.nrrow[data-lvl="crit"] .nrrow__b i{ background:var(--lx-alert); }
.nrrow[data-lvl="warn"] .nrrow__b i{ background:var(--lx-warn); }

.sim__alert{
  padding:14px 16px;
  background:var(--lx-void);
  border:1px solid var(--lx-line-2);
  border-left:2px solid var(--lx-gold);
  border-radius:var(--r-sm);
  font-family:var(--f-mono); font-size:var(--t-mono-lg);
  line-height:1.72; color:var(--lx-text-2);
}
.sim__alert b{ color:var(--lx-gold); font-weight:500; }

/* ==========================================================================
   7 · CASOS — tabela técnica + painel lateral
   ========================================================================== */

.cases{ padding-block:var(--section-y); background:var(--lx-void); }

.ctable{ width:100%; border-collapse:collapse; }
.ctable caption{
  text-align:left; padding-bottom:var(--sp-4);
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:var(--ls-wider); text-transform:uppercase;
  color:var(--lx-text-4);
}
.ctable thead th{
  padding:11px 14px;
  text-align:left;
  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-4);
  border-bottom:1px solid var(--lx-line-2);
  white-space:nowrap;
}
.ctable tbody tr{
  border-bottom:1px solid var(--lx-line);
  cursor:pointer;
  transition:background var(--d-fast) var(--e-out);
}
.ctable tbody tr:hover,
.ctable tbody tr[aria-expanded="true"]{ background:var(--lx-panel); }
.ctable tbody td{
  padding:16px 14px;
  font-size:14.5px; color:var(--lx-text-2);
  vertical-align:middle;
}
.ctable .c-proj{ color:var(--lx-text); font-weight:600; }
.ctable .c-set{ font-family:var(--f-mono); font-size:var(--t-mono); color:var(--lx-text-3); letter-spacing:.03em; }
.ctable .c-res{ color:var(--lx-ok); font-weight:600; }
.ctable .c-go{
  text-align:right;
  font-family:var(--f-mono); font-size:var(--t-mono);
  color:var(--lx-text-4);
}
.ctable tbody tr:hover .c-go{ color:var(--lx-gold); }
@media (max-width:820px){
  .ctable thead{ display:none; }
  .ctable tbody tr{ display:grid; gap:6px; padding:16px 0; }
  .ctable tbody td{ padding:0; border:0; }
  .ctable tbody td::before{
    content:attr(data-l) ' ';
    font-family:var(--f-mono); font-size:10px;
    text-transform:uppercase; letter-spacing:.06em;
    color:var(--lx-text-4);
  }
}

/* Painel lateral retrátil do caso */
.case-panel{
  position:fixed; top:0; right:0; bottom:0;
  overscroll-behavior:contain;
  width:min(460px, 100vw);
  z-index:var(--z-panel);
  background:var(--lx-panel);
  border-left:1px solid var(--lx-line-2);
  box-shadow:var(--shadow-3);
  transform:translateX(100%);
  transition:transform var(--d-slow) var(--e-out);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.case-panel.is-open{ transform:none; }
.case-panel__hd{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-5);
  border-bottom:1px solid var(--lx-line);
}
.case-panel__bd{
  padding:var(--sp-5);
  overflow-y:auto;
  overscroll-behavior:contain;   /* o scroll não escapa para a página atrás */
  -webkit-overflow-scrolling:touch;
  display:grid; gap:var(--sp-5);
}
.case-panel__close{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  background:var(--lx-void);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-sm);
  cursor:pointer; color:var(--lx-text-3);
}
.case-panel__close:hover{ color:var(--lx-text); border-color:var(--lx-line-3); }
.case-panel__scrim{
  position:fixed; inset:0; z-index:calc(var(--z-panel) - 1);
  background:rgba(7,8,11,.6);
  opacity:0; visibility:hidden;
  transition:opacity var(--d-base) var(--e-out), visibility var(--d-base);
}
.case-panel__scrim.is-open{ opacity:1; visibility:visible; }

/* ==========================================================================
   8 · CANTEIRO PRIME
   ========================================================================== */

.product{
  position:relative;
  padding-block:var(--section-y);
  overflow:hidden;
}
.product__card{
  position:relative;
  border:1px solid var(--lx-gold-a24);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:
    radial-gradient(90% 120% at 88% 8%, rgba(240,180,41,.10), transparent 58%),
    radial-gradient(70% 100% at 0% 100%, rgba(61,220,151,.06), transparent 60%),
    var(--lx-panel);
}
.product__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4.5vw,72px);
  padding:clamp(28px,4vw,60px);
  align-items:center;
}
@media (max-width:980px){ .product__in{ grid-template-columns:1fr; } }

.product__feats{ display:grid; gap:1px; margin-top:var(--sp-6); }
.product__feat{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  align-items:start;
  padding:15px 0;
  border-bottom:1px solid var(--lx-line);
}
.product__feat:last-child{ border-bottom:0; }
.product__feat svg{ width:17px; height:17px; color:var(--lx-ok); margin-top:3px; }
.product__feat b{ display:block; font-size:14.5px; color:var(--lx-text); margin-bottom:2px; font-weight:600; }
.product__feat span{ font-size:13.5px; color:var(--lx-text-3); line-height:1.5; }

/* Mock de interface do produto */
.mock{
  position:relative;
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--lx-void);
  box-shadow:var(--shadow-3);
}
.mock__bar{
  display:flex; align-items:center; gap:7px;
  padding:10px 12px;
  border-bottom:1px solid var(--lx-line);
  background:var(--lx-panel);
}
.mock__dot{ width:8px; height:8px; border-radius:50%; background:var(--lx-line-3); }
.mock__url{
  margin-left:8px;
  font-family:var(--f-mono); font-size:10px;
  color:var(--lx-text-4); letter-spacing:.03em;
}
.mock__body{ padding:16px; display:grid; gap:10px; }
.mock__row{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:12px; align-items:center;
  padding:10px 12px;
  background:var(--lx-panel);
  border:1px solid var(--lx-line);
  border-radius:var(--r-sm);
  font-size:13px;
}
.mock__row b{ font-weight:600; color:var(--lx-text); }
.mock__row span{ color:var(--lx-text-3); font-size:12px; }
.mock__badge{
  font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.05em; text-transform:uppercase;
  padding:3px 7px; border-radius:var(--r-xs);
}
.mock__badge--ok{ color:var(--lx-ok); background:var(--lx-ok-a12); border:1px solid var(--lx-ok-a24); }
.mock__badge--wait{ color:var(--lx-warn); background:rgba(255,165,61,.1); border:1px solid rgba(255,165,61,.22); }
.mock__ico{
  width:28px; height:28px; flex:none;
  display:grid; place-items:center;
  border-radius:var(--r-xs);
  background:var(--lx-panel-2);
  border:1px solid var(--lx-line);
  color:var(--lx-text-3);
}
.mock__ico svg{ width:14px; height:14px; }

/* ==========================================================================
   8b · VALIDADOR eSOCIAL — produto open source
   Estética de terminal: é software livre, e o bloco deve parecer software.
   ========================================================================== */

.oss{
  position:relative;
  padding-block:var(--section-y);
  background:var(--lx-void);
  overflow:hidden;
}
.oss__card{
  position:relative;
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:
    radial-gradient(80% 110% at 8% 0%, rgba(90,169,255,.07), transparent 58%),
    var(--lx-panel);
}
.oss__in{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,64px);
  padding:clamp(26px,3.6vw,56px);
  align-items:center;
}
@media (max-width:980px){ .oss__in{ grid-template-columns:1fr; } }

/* Selos de licença */
.oss__badges{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:var(--sp-5);
}
.badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px;
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:.05em; text-transform:uppercase;
  border-radius:var(--r-xs);
  border:1px solid var(--lx-line-2);
  background:var(--lx-void);
  color:var(--lx-text-3);
}
.badge svg{ width:12px; height:12px; }
.badge--mit{ color:var(--lx-ok); border-color:var(--lx-ok-a24); background:var(--lx-ok-a12); }
.badge--foss{ color:var(--lx-info); border-color:rgba(90,169,255,.24); background:var(--lx-info-a12); }
.badge--free{ color:var(--lx-gold); border-color:var(--lx-gold-a24); background:var(--lx-gold-a12); }

/* Lista de recursos do validador */
.oss__feats{ display:grid; gap:1px; margin-top:var(--sp-6); }
.oss__feat{
  display:grid; grid-template-columns:auto 1fr; gap:13px;
  align-items:start;
  padding:13px 0;
  border-bottom:1px solid var(--lx-line);
}
.oss__feat:last-child{ border-bottom:0; }
.oss__feat svg{ width:16px; height:16px; color:var(--lx-info); margin-top:3px; flex:none; }
.oss__feat b{ display:block; font-size:14.5px; color:var(--lx-text); font-weight:600; margin-bottom:2px; }
.oss__feat span{ font-size:13.5px; color:var(--lx-text-3); line-height:1.52; }

/* Bloco de terminal */
.code{
  position:relative;
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--lx-void);
  box-shadow:var(--shadow-3);
}
.code__bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 13px;
  border-bottom:1px solid var(--lx-line);
  background:var(--lx-panel);
}
.code__bar span{
  font-family:var(--f-mono); font-size:10px;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--lx-text-4);
}
.code__dots{ display:flex; gap:6px; margin-right:4px; }
.code__dots i{ width:8px; height:8px; border-radius:50%; background:var(--lx-line-3); }
.code__bd{
  padding:16px 18px;
  font-family:var(--f-mono);
  font-size:12.5px;
  line-height:1.85;
  color:var(--lx-text-3);
  overflow-x:auto;
  white-space:pre;
}
.code__bd .c-dim{ color:var(--lx-text-4); }
.code__bd .c-key{ color:var(--lx-info); }
.code__bd .c-ok{ color:var(--lx-ok); }
.code__bd .c-str{ color:var(--lx-gold); }
.code__bd .c-prompt{ color:var(--lx-gold); user-select:none; }

/* ==========================================================================
   9 · INICIALIZAÇÃO DE PROJETO
   ========================================================================== */

.start{
  padding-block:var(--section-y);
  background:
    radial-gradient(60% 60% at 50% 100%, rgba(240,180,41,.05), transparent 70%),
    var(--lx-base);
}
.start__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,80px);
  align-items:start;
}
@media (max-width:1000px){ .start__grid{ grid-template-columns:1fr; } }

.start__form{
  background:var(--lx-panel);
  border:1px solid var(--lx-line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-3);
}
.start__form-hd{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:13px 18px;
  border-bottom:1px solid var(--lx-line);
  background:rgba(255,255,255,.018);
}
.start__form-bd{ padding:clamp(20px,2.6vw,32px); }

/* Contatos alternativos */
.altcontact{ display:grid; gap:1px; margin-top:var(--sp-6); }
.altcontact a,
.altcontact div{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--lx-line);
}
.altcontact svg{ width:17px; height:17px; color:var(--lx-gold); }
.altcontact b{ display:block; font-size:14.5px; color:var(--lx-text); font-weight:600; }
.altcontact span{ font-size:13px; color:var(--lx-text-3); }

/* ==========================================================================
   UTILITÁRIOS DE SEÇÃO
   ========================================================================== */

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:var(--sp-5);
  font-family:var(--f-mono); font-size:var(--t-mono);
  letter-spacing:var(--ls-wider); text-transform:uppercase;
  color:var(--lx-text-3);
}
.eyebrow::before{
  content:''; width:22px; height:1px; background:var(--lx-gold);
}
.eyebrow--plain::before{ display:none; }

.center{ text-align:center; }
.center .lead{ margin-inline:auto; }
.center .sec-head{ grid-template-columns:1fr; text-align:center; justify-items:center; }
.center .sec-head h2{ max-width:24ch; }