:root{
  --papel:#F7F6F2;
  --papel-2:#FFFEFB;
  --tinta:#16211F;
  --tinta-2:#4A5654;
  --linha:#E2DFD6;
  --acento:#0B5F66;
  --acento-fraco:#E6EFEE;
  --ok:#1F6B4E;
  --nao:#8A4B36;
  --display:"Schibsted Grotesk",Georgia,serif;
  --corpo:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --medida:66ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.65;
  font-synthesis-weight:none;
}
img{max-width:100%;height:auto}

.wrap{width:min(1080px,100% - 2.5rem);margin-inline:auto}

.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;z-index:10;background:var(--acento);color:var(--papel);padding:.6rem 1rem;border-radius:6px}

a{color:var(--acento);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:3px}

/* ---------- topo ---------- */
.topo{border-bottom:1px solid var(--linha);background:var(--papel-2)}
.topo-in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between;padding:1.1rem 0}
.marca{display:flex;align-items:baseline;gap:.55rem;text-decoration:none;color:inherit}
.marca-nome{font-family:var(--display);font-weight:700;letter-spacing:.055em;font-size:1.02rem}
.marca-sec{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:var(--acento)}
.topo nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.topo nav a{font-size:.94rem;text-decoration:none;color:var(--tinta-2)}
.topo nav a:hover{color:var(--acento);text-decoration:underline}

/* ---------- tipografia ---------- */
.rotulo{
  font-family:var(--mono);font-size:.73rem;text-transform:uppercase;
  letter-spacing:.17em;color:var(--acento);margin:0 0 .9rem;max-width:none
}
h1{
  font-family:var(--display);font-weight:700;letter-spacing:-.018em;
  font-size:clamp(2rem,1.25rem + 3.1vw,3.35rem);line-height:1.12;
  margin:0 0 1.3rem;text-wrap:balance;max-width:19ch
}
h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.012em;
  font-size:clamp(1.45rem,1.16rem + 1.2vw,2rem);line-height:1.2;margin:0 0 1.1rem;text-wrap:balance
}
h3{font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.32;margin:0 0 .5rem;text-wrap:balance}
p{max-width:var(--medida)}
.lead{font-size:clamp(1.03rem,.98rem + .3vw,1.2rem);color:var(--tinta-2);max-width:60ch}

/* ---------- hero ---------- */
.hero{padding:clamp(3.2rem,8vw,6rem) 0 clamp(2.6rem,6vw,4.2rem);border-bottom:1px solid var(--linha)}
.estado{
  margin-top:2rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  font-size:.9rem;color:var(--tinta-2);max-width:62ch
}
.pill{
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;
  background:var(--acento-fraco);color:var(--acento);border:1px solid #CFE0DE;
  padding:.3rem .65rem;border-radius:999px;white-space:nowrap
}

/* ---------- faixas ---------- */
.faixa{padding:clamp(2.8rem,6vw,4.4rem) 0;border-bottom:1px solid var(--linha)}
.faixa-alt{background:var(--papel-2)}

.grade{display:grid;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:10px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.card{background:var(--papel-2);padding:1.6rem 1.5rem}
.card p{max-width:none}
.num{font-family:var(--mono);font-size:.78rem;color:var(--acento);margin:0 0 .8rem;letter-spacing:.1em}
.card h3+p{color:var(--tinta-2);font-size:.95rem;margin:0}

.duas{display:grid;gap:clamp(1.8rem,4vw,3.2rem);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
.duas p{max-width:52ch}

.escopo{background:var(--papel);border:1px solid var(--linha);border-radius:10px;padding:1.5rem}
.escopo h3{margin-bottom:.9rem}
.escopo ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.93rem}
.escopo ul+ul{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--linha)}
.escopo li{padding-left:1.5rem;position:relative;color:var(--tinta-2)}
.escopo li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-weight:500}
.sim li::before{content:"+";color:var(--ok)}
.nao li::before{content:"\2212";color:var(--nao)}

.lista{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linha);border-block:1px solid var(--linha)}
.lista li{background:var(--papel);padding:1.35rem 0 1.4rem}
.lista .rotulo{margin-bottom:.45rem}
.item{font-family:var(--display);font-size:1.03rem;line-height:1.35;margin:0 0 .3rem;max-width:58ch}
.meta{font-size:.9rem;color:var(--tinta-2);margin:0;max-width:58ch}

.link-seta{font-weight:500;text-decoration:none}
.link-seta::after{content:" \2192";font-family:var(--mono)}
.link-seta:hover{text-decoration:underline}

/* ---------- conteúdo técnico (NeuroLab) ---------- */
.prosa h2{margin-top:2.6rem}
.prosa h2:first-child{margin-top:0}
.prosa ul{padding-left:1.15rem;max-width:var(--medida)}
.prosa li{margin-bottom:.45rem}
.prosa li::marker{color:var(--acento)}
.nota{
  border-left:3px solid var(--acento);background:var(--acento-fraco);
  padding:1rem 1.2rem;border-radius:0 8px 8px 0;margin:2rem 0;font-size:.95rem
}
.nota p{margin:0;max-width:58ch}
.voltar{display:inline-block;margin-bottom:1.6rem;font-family:var(--mono);font-size:.8rem;text-decoration:none;letter-spacing:.06em}
.voltar::before{content:"\2190 ";}
.voltar:hover{text-decoration:underline}

.tabela{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.93rem}
.tabela th,.tabela td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--linha);vertical-align:top}
.tabela th{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;color:var(--acento);font-weight:500}
.rolagem{overflow-x:auto}

/* ---------- rodapé ---------- */
.rodape{padding:2.4rem 0;background:var(--papel-2);font-size:.88rem;color:var(--tinta-2)}
.rodape-in{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between}
.rodape p{margin:0;max-width:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===================================================================
   Hero com sinal medido + micro-interações (direção "claro com
   movimento contido", 18/09/2026). Tudo carrega em estado visível:
   nada depende de scroll para aparecer.
   =================================================================== */

:root{ --ambar:#C8873B; --ambar-fraco:#F5EADC; }

.hero{position:relative;overflow:hidden}

.hero-grade{
  display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:920px){
  .hero-grade{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
}

/* painel do sinal */
.painel{
  position:relative;border:1px solid var(--linha);border-radius:12px;
  background:linear-gradient(180deg,var(--papel-2),#FBFAF6);
  padding:1rem 1rem .85rem;
  box-shadow:0 1px 2px rgba(22,33,31,.04),0 12px 28px -18px rgba(22,33,31,.28);
}
.painel-topo{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;
  justify-content:space-between;margin-bottom:.7rem
}
.painel-nome{
  font-family:var(--mono);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--tinta-2);margin:0
}
.painel-tag{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  color:var(--acento);background:var(--acento-fraco);
  border:1px solid #CFE0DE;border-radius:999px;padding:.18rem .5rem
}
#sinal{display:block;width:100%;height:210px}
@media (min-width:920px){ #sinal{height:250px} }

.painel-legenda{
  display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:.6rem 0 0;
  font-size:.78rem;color:var(--tinta-2);max-width:none
}
.painel-legenda span{display:inline-flex;align-items:center;gap:.4rem}
.chave{width:11px;height:2px;border-radius:2px;flex:0 0 auto}
.chave-ok{background:var(--acento)}
.chave-fora{background:var(--ambar)}
.painel-nota{
  margin:.75rem 0 0;padding-top:.7rem;border-top:1px solid var(--linha);
  font-size:.8rem;color:var(--tinta-2);max-width:none
}

/* micro-interações — só transformam o que já está visível */
.card{transition:background .18s ease,transform .18s ease}
.card:hover{background:var(--papel);transform:translateY(-2px)}
.lista li{transition:background .18s ease}
.lista li:hover{background:var(--papel-2)}
.link-seta::after{display:inline-block;transition:transform .18s ease}
.link-seta:hover::after{transform:translateX(3px)}
.topo nav a{transition:color .15s ease}
.pill{transition:transform .18s ease}
.hero:hover .pill{transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .card,.card:hover,.link-seta::after,.pill{transition:none;transform:none}
}

.painel-largo{margin:2.4rem 0 0;max-width:640px}