/* ============================================================
   CONSTRU OS · Atração de Profissionais — folha de estilo do site
   Derivada de _fonte/guia.css (a mesma identidade dos PDFs dos guias).
   Mobile-first. Ponto de virada em 720px.
   ============================================================ */

@font-face{font-family:'Barlow Condensed';src:url('fonts/BarlowCondensed-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/BarlowCondensed-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Variable.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}

:root{
  --amber:#ff9a1f;
  --amber-deep:#d97a06;
  --amber-wash:#fff6e9;
  --ink:#16181c;
  --ink-2:#3d434d;
  --ink-3:#6b7280;
  --ink-4:#9aa1ab;
  --rule:#e3e6ea;
  --paper:#ffffff;
  --paper-2:#fafbfc;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
a{color:var(--amber-deep)}

/* ---------- estrutura ---------- */
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
.band{padding:52px 0}
.band--tight{padding:38px 0}
.band--dark{background:var(--ink);color:#d8dbe0}
.band--wash{background:var(--amber-wash)}
.band--paper2{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band--dark a{color:var(--amber)}
/* ATENCAO: ".band--dark a" pesa mais que ".btn" na conta de especificidade do
   CSS e pintava o texto do botao de AMBAR SOBRE AMBAR — o botao principal da
   primeira dobra ficava sem texto. Achado no iPhone do Yudi em 08/09; nenhuma
   captura de desktop pegou, porque em todas elas o aviso de cookies tapava
   justamente esse botao, e o que aparecia embaixo era a barra fixa, com texto. */
.band--dark a.btn{color:var(--ink)}

/* ---------- marca ----------
   Wordmark em CSS puro, na mesma fonte que a tela já carrega: sem arquivo de
   imagem, sem requisição extra, nítido em qualquer tela e recolorível por
   contexto. A barrinha âmbar é o mesmo elemento da capa dos PDFs dos guias. */
.topo{padding:20px 0 0}
.marca{
  display:inline-block;position:relative;padding-top:11px;
  font-family:var(--display);font-weight:800;font-size:26px;line-height:1;
  letter-spacing:.012em;color:var(--ink);white-space:nowrap;
}
.marca::before{content:"";position:absolute;top:0;left:0;width:22px;height:4.5px;background:var(--amber)}
.marca b{color:var(--amber);font-weight:800}
.band--dark .marca,.rodape .marca{color:#fff}
.rodape .marca{font-size:22px;padding-top:9px;margin-bottom:16px}
.rodape .marca::before{width:18px;height:4px}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0 0 14px;letter-spacing:.005em}
h1{font-weight:800;font-size:clamp(35px,9.6vw,58px);line-height:.98}
h2{font-weight:800;font-size:clamp(28px,7.6vw,42px);line-height:1.04;margin-top:0}
h3{font-weight:700;font-size:clamp(21px,5.6vw,27px);line-height:1.16;margin-bottom:10px}
.band--dark h1,.band--dark h2,.band--dark h3{color:#fff}
p{margin:0 0 17px}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:650}
.band--dark strong{color:#fff}
.lede{font-size:19.5px;line-height:1.55}
.kicker{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-deep);margin:0 0 12px;
}
.band--dark .kicker{color:var(--amber)}
.rule-amber{width:56px;height:5px;background:var(--amber);margin:0 0 22px;border-radius:1px}

ul{margin:0 0 17px;padding-left:22px}
li{margin-bottom:9px}
li::marker{color:var(--amber);font-weight:700}

/* ---------- botão ---------- */
.btn{
  display:block;width:100%;box-sizing:border-box;
  background:var(--amber);color:var(--ink);
  font-family:var(--body);font-weight:700;font-size:19px;line-height:1.25;
  text-align:center;text-decoration:none;
  padding:19px 18px;border:0;border-radius:10px;cursor:pointer;
  box-shadow:0 2px 0 var(--amber-deep);
  transition:transform .06s ease;
}
.btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--amber-deep)}
.micro{font-size:14.5px;line-height:1.45;color:var(--ink-3);text-align:center;margin:12px 0 0}
.band--dark .micro{color:var(--ink-4)}
.cta-bloco{margin-top:30px}

/* ---------- caixas ---------- */
.box{border:1px solid var(--rule);border-radius:10px;padding:20px 22px;margin:0 0 18px;background:var(--paper)}
.box:last-child{margin-bottom:0}
.box .lbl{
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber-deep);margin:0 0 10px;
}
.box--warn{background:#fffaf3;border-color:#f2ddbc}
.box--dark{background:var(--ink);border-color:var(--ink);color:#d8dbe0}
.box--dark .lbl{color:var(--amber)}
.box--dark strong{color:#fff}

.dado{
  border-left:4px solid var(--amber);background:var(--amber-wash);
  padding:16px 18px;border-radius:0 8px 8px 0;font-size:16px;margin:0;
}
.dado .fonte{display:block;margin-top:7px;font-size:13px;color:var(--ink-3)}

.frase{
  font-family:var(--display);font-weight:700;font-size:clamp(23px,6.2vw,31px);line-height:1.14;
  color:var(--ink);border-left:5px solid var(--amber);padding:4px 0 4px 18px;margin:26px 0;
}

/* ---------- pilares ---------- */
.pilar{border:1px solid var(--rule);border-radius:12px;padding:24px 22px;margin:0 0 16px;background:var(--paper)}
.pilar .n{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-deep);margin:0 0 6px}
.dono{
  display:block;background:var(--amber-wash);border-left:4px solid var(--amber);
  color:var(--ink);font-size:16px;font-weight:700;line-height:1.4;
  padding:10px 14px;border-radius:0 7px 7px 0;margin:0 0 16px;
}

/* ---------- listas de recebe / para quem ---------- */
.item{border-top:1px solid var(--rule);padding:18px 0}
.item:first-of-type{border-top:0;padding-top:0}
.item h4{font-family:var(--body);font-size:17px;font-weight:700;color:var(--ink);margin:0 0 6px}
.item p{margin:0;font-size:16.5px}

.situacao{border:1px solid var(--rule);border-left:5px solid var(--amber);border-radius:0 10px 10px 0;padding:18px 20px;margin:0 0 14px;background:var(--paper)}
.situacao h4{font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);margin:0 0 6px;line-height:1.15}

.nao{border:1px solid var(--rule);border-radius:10px;padding:18px 20px;background:var(--paper-2)}
.nao li{margin-bottom:11px}
.nao li:last-child{margin-bottom:0}
.nao li::marker{color:var(--ink-4)}

/* ---------- blindagem ---------- */
.blindagem{border-top:1px solid #2b3038;padding:22px 0}
.blindagem:first-of-type{border-top:0}
.blindagem h4{font-family:var(--body);font-size:17.5px;font-weight:700;color:#fff;margin:0 0 8px;line-height:1.35}
.blindagem .porque{font-size:16px;color:var(--ink-4);margin:0}
.blindagem .porque b{color:var(--amber);font-weight:600}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:21px;line-height:1.2;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:26px;
  width:11px;height:11px;border-right:2.5px solid var(--amber);border-bottom:2.5px solid var(--amber);
  transform:rotate(45deg);transition:transform .18s ease;
}
.faq[open] summary::after{transform:rotate(-135deg);top:30px}
.faq .resposta{padding:0 0 20px}
.faq .resposta p{font-size:16.5px}

/* ---------- formulário embutido ---------- */
.embed{
  border:1px solid var(--rule);border-radius:12px;background:var(--paper);
  overflow:hidden;margin-top:24px;
}
.embed iframe{display:block;width:100%;border:0;min-height:560px}
.embed--limpo{border:0;border-radius:0;background:transparent}
.saida{margin-top:16px;padding:18px 20px;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.saida p{font-size:16px;color:var(--ink-3);margin:0 0 14px}

/* ---------- rodapé ---------- */
.rodape{background:var(--ink);color:var(--ink-4);padding:38px 0 34px;font-size:14.5px;line-height:1.6}
.rodape p{margin:0 0 10px}
.rodape a{color:var(--ink-4);text-decoration:underline}
.rodape .legal{margin-top:18px;padding-top:16px;border-top:1px solid #2b3038;font-size:13px;color:#5d646f}

/* ---------- barra fixa de chamada ---------- */
.fixa{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(22,24,28,.97);backdrop-filter:blur(6px);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  border-top:1px solid #2b3038;
  transform:translateY(110%);transition:transform .22s ease;
}
.fixa.mostra{transform:translateY(0)}
/* aviso de cookies aberto tapa a barra fixa: dois blocos empilhados no rodapé
   do celular escondem o botão principal — o defeito flagrado no print de 03/09 */
body.com-aviso .fixa{transform:translateY(110%)}
.fixa .btn{font-size:17.5px;padding:15px 16px}
body.tem-fixa{padding-bottom:82px}
@media(min-width:720px){
  .fixa{display:none}
  body.tem-fixa{padding-bottom:0}
}

/* ---------- aviso de cookies ---------- */
.lgpd{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:#fff;border-top:2px solid var(--amber);
  box-shadow:0 -10px 30px rgba(22,24,28,.16);
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  display:none;
}
.lgpd.abre{display:block}
.lgpd .interno{max-width:680px;margin:0 auto}
.lgpd p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0 0 14px}
.lgpd .acoes{display:flex;gap:10px}
.lgpd button{
  flex:1;font-family:var(--body);font-size:16px;font-weight:700;
  padding:14px 12px;border-radius:9px;cursor:pointer;border:1.5px solid var(--ink);
}
.lgpd .aceitar{background:var(--amber);border-color:var(--amber-deep);color:var(--ink)}
.lgpd .recusar{background:#fff;color:var(--ink)}

/* ---------- utilidades ---------- */
.centro{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fim{margin-top:26px;padding-top:18px;border-top:2px solid var(--amber);font-size:16px;color:var(--ink-3)}

@media(min-width:720px){
  body{font-size:18px}
  .band{padding:76px 0}
  .btn{display:inline-block;width:auto;min-width:340px;padding:20px 44px}
  .cta-bloco{text-align:center}
  .micro{text-align:center}
}