/* ============================================================
   Meridiano Consultoria de Gestão — dossiê executivo instrumentado
   Paradigma: FOLHA DE RELATÓRIO com MEDIANIZ (rule vertical 1px)
   + ÍNDICE NUMERADO STICKY. Um único acento: âmbar-latão.
   ============================================================ */

:root{
  --papel:#F4F1EA;
  --grafite:#1C2024;
  --marinho:#1B2A4A;
  --ardosia:#5B6472;
  --ambar:#A9772F;
  --linha:#D8D2C4;
  --papel-2:#EDE9DF;
}

*{ box-sizing:border-box; }
html,body{ overflow-x:hidden; }
html{ scroll-behavior:smooth; }
body{
  background:var(--papel);
  color:var(--grafite);
  font-family:'Newsreader','Georgia',serif;
  font-size:16.5px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (max-width:768px){ body{ font-size:16px; } }

/* ---- Tipografia utilitária ---- */
.font-display{ font-family:'Fraunces','Georgia',serif; font-optical-sizing:auto; }
.font-body{ font-family:'Newsreader','Georgia',serif; }
.font-mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }

.versalete{
  font-family:'Newsreader',serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.68rem;
  font-weight:500;
  color:var(--ardosia);
}
.mono-tab{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }

/* ---- A FOLHA: shell do dossiê ---- */
.folha{
  width:min(92vw,1720px);
  margin-inline:auto;
}
@media (min-width:1920px){ .folha{ width:min(88vw,1840px); } }

/* Grade dossiê: coluna índice estreita + medianiz + corpo largo */
.dossie{
  display:grid;
  grid-template-columns:clamp(220px,20vw,300px) 1fr;
  column-gap:0;
  align-items:start;
  position:relative;
}
/* MEDIANIZ VIVA: rule vertical de 1px em ardósia que percorre a folha */
.dossie::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:clamp(220px,20vw,300px);
  width:1px;
  background:var(--ardosia);
  opacity:.55;
}
@media (max-width:1023px){
  .dossie{ grid-template-columns:1fr; }
  .dossie::before{ display:none; }
}

/* Coluna do índice */
.indice-col{ padding:2.4rem 2.2rem 2.4rem 0; }
.indice-sticky{ position:sticky; top:5.2rem; }
@media (max-width:1023px){ .indice-col{ display:none; } }

/* Corpo (direita da medianiz) */
.corpo-col{ padding:2.4rem 0 2.4rem clamp(2rem,3.4vw,4rem); min-width:0; }
@media (max-width:1023px){ .corpo-col{ padding:1.6rem 0; } }

/* ---- Índice numerado ---- */
.idx-item{
  display:grid;
  grid-template-columns:2.6rem 1fr;
  align-items:baseline;
  gap:.5rem;
  padding:.55rem 0;
  border-top:1px solid var(--linha);
  color:var(--ardosia);
  transition:color .2s ease;
}
.idx-item:last-child{ border-bottom:1px solid var(--linha); }
.idx-item .num{ font-family:'IBM Plex Mono',monospace; font-size:.82rem; color:var(--ambar); font-variant-numeric:tabular-nums; }
.idx-item .rot{ font-family:'Newsreader',serif; font-size:1rem; color:var(--grafite); }
.idx-item:hover .rot{ color:var(--marinho); }
.idx-item.is-active .rot{ color:var(--marinho); font-weight:600; }
.idx-item.is-active .num::after{ content:""; }
.idx-anexo{ background:rgba(169,119,47,.06); }
.idx-anexo .rot{ color:var(--marinho); }

/* ---- MARCADOR da medianiz (assinatura) ---- */
.marcador{
  position:relative;
  padding-left:0;
}
.sec-head{
  display:flex; align-items:center; gap:.9rem;
  margin-bottom:1.1rem;
}
.sec-mark{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  color:var(--papel);
  background:var(--ambar);
  padding:.18rem .5rem;
  letter-spacing:.05em;
  border-radius:1px;
}

/* ---- Hairlines ---- */
.hairline{ height:1px; background:var(--linha); border:0; }
.cornija{ border-top:1px solid var(--linha); }
.rodape-linha{ border-bottom:1px solid var(--linha); }

/* ---- Títulos ---- */
h1,h2,h3{ font-family:'Fraunces',serif; color:var(--marinho); font-weight:500; line-height:1.14; letter-spacing:-.01em; }
.t-hero{ font-size:clamp(2.4rem,5vw,4.4rem); }
.t-sec{ font-size:clamp(1.7rem,3vw,2.5rem); }
.t-sub{ font-size:clamp(1.2rem,2vw,1.55rem); }

/* ---- Links âncora âmbar underline ---- */
.anchor-amber{
  color:var(--marinho);
  text-decoration:none;
  border-bottom:1px solid var(--ambar);
  padding-bottom:1px;
  transition:color .2s;
}
.anchor-amber:hover{ color:var(--ambar); }

/* ---- Botões ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:46px; padding:.7rem 1.5rem;
  font-family:'Newsreader',serif; font-size:1rem; letter-spacing:.01em;
  cursor:pointer; border:1px solid transparent; border-radius:2px;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
  text-decoration:none;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--marinho); color:var(--papel); border-color:var(--marinho); }
.btn-primary:hover{ background:#152036; }
.btn-amber{ background:transparent; color:var(--marinho); border-color:var(--ambar); }
.btn-amber:hover{ background:var(--ambar); color:var(--papel); }
.btn-ghost{ background:transparent; color:var(--papel); border-color:rgba(244,241,234,.4); }
.btn-ghost:hover{ border-color:var(--papel); }

/* ---- Header ---- */
.mheader{
  position:sticky; top:0; z-index:50;
  background:rgba(244,241,234,.92);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--linha);
}
.navlink{ color:var(--ardosia); text-decoration:none; font-size:.95rem; letter-spacing:.01em; transition:color .2s; position:relative; }
.navlink:hover,.navlink[aria-current="page"]{ color:var(--marinho); }
.navlink[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--ambar);
}

/* ---- Logo marca ---- */
.logo-mono{ font-family:'Fraunces',serif; font-weight:500; }

/* ---- Cartões / placas ---- */
.placa{
  background:#fff;
  border:1px solid var(--linha);
  border-radius:2px;
}
.placa-papel{ background:var(--papel-2); border:1px solid var(--linha); border-radius:2px; }

/* ---- Faixas full-bleed ---- */
.faixa-marinho{ background:var(--marinho); color:var(--papel); }
.faixa-marinho h2,.faixa-marinho h3{ color:var(--papel); }
.faixa-grafite{ background:var(--grafite); color:var(--papel); }

/* ---- Hero capa ---- */
.hero-capa{ position:relative; overflow:hidden; background:var(--grafite); }
.hero-capa img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,24,28,.94) 0%, rgba(20,24,28,.8) 42%, rgba(20,24,28,.42) 100%);
}
@media (max-width:768px){
  .hero-scrim{ background:linear-gradient(180deg, rgba(20,24,28,.72) 0%, rgba(20,24,28,.9) 100%); }
}

/* ---- Reveal (fail-safe) ---- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
.no-js .reveal, .reveal.force-in{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   DIAGNÓSTICO — instrumento
   ============================================================ */
.diag-shell{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:1100px){ .diag-shell{ grid-template-columns:1.05fr .95fr; gap:2.4rem; } }

.progress-track{ height:3px; background:var(--linha); border-radius:2px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--ambar); width:0; transition:width .35s ease; }

.diag-pergunta{ transition:opacity .25s ease; }

/* radio-group níveis */
.nivel-group{ display:grid; gap:.5rem; }
.nivel{
  display:flex; align-items:flex-start; gap:.85rem;
  min-height:46px; padding:.7rem .95rem;
  border:1px solid var(--linha); border-radius:2px; background:#fff;
  cursor:pointer; transition:border-color .18s, background .18s;
}
.nivel:hover{ border-color:var(--ardosia); }
.nivel:focus-within{ outline:2px solid var(--ambar); outline-offset:2px; }
.nivel input{ position:absolute; opacity:0; width:1px; height:1px; }
.nivel .dot{
  margin-top:.2rem; flex:0 0 auto;
  width:16px; height:16px; border:1.5px solid var(--ardosia); border-radius:50%;
  display:grid; place-items:center; transition:border-color .18s;
}
.nivel .dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:transparent; transition:background .18s; }
.nivel[data-checked="true"]{ border-color:var(--ambar); background:rgba(169,119,47,.05); }
.nivel[data-checked="true"] .dot{ border-color:var(--ambar); }
.nivel[data-checked="true"] .dot::after{ background:var(--ambar); }
.nivel .lvl-num{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--ambar); }
.nivel .lvl-rot{ font-family:'Newsreader',serif; }
.nivel .lvl-desc{ font-size:.82rem; color:var(--ardosia); line-height:1.4; }

/* barras por eixo */
.eixo-row{ display:grid; grid-template-columns:1fr; gap:.35rem; margin-bottom:.9rem; }
.eixo-top{ display:flex; justify-content:space-between; align-items:baseline; }
.eixo-nome{ font-family:'Newsreader',serif; font-size:.95rem; color:var(--grafite); }
.eixo-val{ font-family:'IBM Plex Mono',monospace; font-size:.85rem; font-variant-numeric:tabular-nums; color:var(--marinho); }
.eixo-bar{ position:relative; height:9px; background:var(--papel-2); border:1px solid var(--linha); border-radius:2px; overflow:hidden; }
.eixo-fill{ height:100%; background:var(--marinho); width:0; transition:width .45s ease, background .3s; }
.eixo-ticks{ position:absolute; inset:0; pointer-events:none; }
.eixo-ticks span{ position:absolute; top:0; bottom:0; width:1px; background:rgba(169,119,47,.45); }

/* placa do laudo */
.laudo-placa{
  border:1px solid var(--ardosia);
  background:var(--papel-2);
  border-radius:2px;
  padding:1.2rem 1.4rem;
  position:relative;
}
.laudo-placa::before{
  content:""; position:absolute; left:0; top:1.2rem; bottom:1.2rem; width:3px; background:var(--ambar);
}
.laudo-cod{ font-family:'IBM Plex Mono',monospace; font-size:1.5rem; letter-spacing:.04em; color:var(--marinho); }

/* selo demonstração */
.selo-demo{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'IBM Plex Mono',monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ardosia); border:1px solid var(--linha); border-radius:2px;
  padding:.25rem .55rem; background:var(--papel);
}

/* faixas de nível — cores de estado derivadas da paleta */
.nvl-inicial{ color:var(--ardosia); }
.nvl-evolucao{ color:var(--marinho); }
.nvl-maduro{ color:var(--ambar); }
.chip-nivel{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:.2rem .5rem; border-radius:2px; border:1px solid currentColor; }

/* radar svg */
.radar-wrap{ display:grid; place-items:center; }

/* recomendações */
.rec-bloco{ border-top:1px solid var(--linha); padding-top:.9rem; margin-top:.9rem; }
.rec-bloco:first-child{ border-top:0; padding-top:0; margin-top:0; }

/* WhatsApp float */
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:52px; height:52px; border-radius:50%;
  background:#1f7a53; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  text-decoration:none; transition:transform .15s;
}
.wa-float:hover{ transform:scale(1.05); }

/* mobile menu */
.mobile-panel{ transition:opacity .2s ease; }
[inert]{ pointer-events:none; }

/* utilidades de âncora com offset do header sticky */
.anchor-target{ scroll-margin-top:5.5rem; }

/* tabela ficha técnica */
.ficha{ width:100%; border-collapse:collapse; }
.ficha td{ padding:.6rem 0; border-top:1px solid var(--linha); vertical-align:top; }
.ficha td:first-child{ width:38%; color:var(--ardosia); font-size:.9rem; padding-right:1rem; }
.ficha .mono-tab{ color:var(--marinho); }