/* ══════════════════════════════════════════════════════════════════════════
   RURÁPIDO — folha de estilo das páginas públicas (conteúdo e erro)
   Unificação r2.15.1 + r2.21: estrutura e acabamento do r2.15.1 sobre a
   base de segurança do r2.21 — arquivo externo, sem CSS inline, para que a
   CSP permaneça sem 'unsafe-inline' de script e com style-src controlado.

   Diretrizes de acabamento aplicadas em todo o arquivo:
   · margens alinhadas: um único contêiner (--wrap) e um único recuo lateral
     (--pad) valem para cabeçalho, conteúdo e rodapé, em qualquer largura;
   · sem quebra de linha indesejada: nada de <br> forçado; títulos usam
     text-wrap:balance e blocos usam overflow-wrap para não estourar;
   · espaçamento previsível: escala única (--sp-*) em vez de valores soltos.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* paleta herdada da plataforma (index.html) para manter identidade única */
  --g0:#00FF7F;--g1:#00C853;--g2:#00832A;--g3:#00521A;
  --s0:#05080A;--s1:#0A0F0C;--s2:#101810;--s3:#162014;
  --t0:#E8F4E8;--t1:#A0C4A0;--t2:#5A8A5A;

  /* estrutura: um contêiner e um recuo para todas as seções */
  --wrap:1040px;
  --pad:clamp(16px,4vw,28px);

  /* escala de espaçamento */
  --sp-1:6px;--sp-2:10px;--sp-3:14px;--sp-4:20px;--sp-5:28px;--sp-6:40px;--sp-7:56px;

  --radius:16px;
  --line:rgba(0,255,127,.14);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--s0);
  color:var(--t0);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* impede rolagem horizontal em qualquer viewport */
  overflow-x:hidden;
}

/* leve brilho de marca ao fundo, sem interferir na leitura */
body::before{
  content:'';
  position:fixed;
  inset:0 0 auto 0;
  height:420px;
  background:radial-gradient(120% 100% at 50% 0,rgba(0,200,83,.10),transparent 70%);
  pointer-events:none;
  z-index:0;
}

a{color:inherit}

/* ── contêiner único: garante margens alinhadas em todas as faixas ── */
.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  /* soma o recuo base às áreas seguras (notch / barra inferior) */
  padding-inline:calc(var(--pad) + env(safe-area-inset-left)) calc(var(--pad) + env(safe-area-inset-right));
  padding-block:var(--sp-4) calc(var(--sp-7) + env(safe-area-inset-bottom));
}

/* ── topo ── */
.top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding-block:var(--sp-2) var(--sp-5);
  border-bottom:1px solid var(--s3);
  margin-bottom:var(--sp-6);
}
.brand{
  font-family:'Syne',system-ui,sans-serif;
  font-weight:800;
  font-size:19px;
  letter-spacing:.4px;
  /* nome da marca nunca se quebra ao meio */
  white-space:nowrap;
}
.brand span{color:var(--g0)}
.back{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-1);
  font-size:13px;
  font-weight:600;
  color:var(--t1);
  text-decoration:none;
  padding:8px 14px;
  border:1px solid var(--s3);
  border-radius:10px;
  white-space:nowrap;
  transition:color .18s,border-color .18s,background .18s;
}
.back:hover,.back:focus-visible{color:var(--g0);border-color:rgba(0,200,83,.35);background:rgba(0,200,83,.07)}

/* ── herói ── */
.hero{padding-block:0 var(--sp-6)}
.eyebrow{
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-weight:800;
  color:var(--g0);
  /* rótulo longo quebra em linhas inteiras, nunca no meio da palavra */
  overflow-wrap:break-word;
}
h1{
  font-family:'Syne',system-ui,sans-serif;
  font-size:clamp(30px,5.2vw,54px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.5px;
  margin:var(--sp-3) 0 var(--sp-4);
  max-width:22ch;
  /* distribui as linhas do título de forma equilibrada */
  text-wrap:balance;
  overflow-wrap:break-word;
}
h2{
  font-family:'Syne',system-ui,sans-serif;
  font-size:clamp(21px,2.6vw,28px);
  line-height:1.22;
  font-weight:800;
  margin:var(--sp-7) 0 var(--sp-3);
  text-wrap:balance;
}
.lead{
  font-size:clamp(16px,1.9vw,19px);
  color:var(--t1);
  max-width:70ch;
  margin:0 0 var(--sp-4);
  text-wrap:pretty;
}
p{max-width:76ch;margin:0 0 var(--sp-3);text-wrap:pretty;overflow-wrap:break-word}

/* ── grade de cartões: min-width:0 impede que o conteúdo estoure a coluna ── */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:var(--sp-3);
  margin:var(--sp-4) 0 var(--sp-5);
}
.card{
  min-width:0;
  background:linear-gradient(180deg,var(--s1),var(--s0));
  border:1px solid var(--s3);
  border-radius:var(--radius);
  padding:var(--sp-4);
  font-size:14px;
  color:var(--t1);
}
.card b{
  display:block;
  margin-bottom:var(--sp-1);
  color:var(--t0);
  font-family:'Syne',system-ui,sans-serif;
  font-size:15px;
  font-weight:800;
}

/* ── chamada para ação ── */
.cta{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-1);
  background:linear-gradient(135deg,var(--g0),var(--g1));
  color:#04110a;
  text-decoration:none;
  font-weight:800;
  font-size:15px;
  border-radius:12px;
  padding:13px 22px;
  margin-top:var(--sp-2);
  box-shadow:0 10px 30px rgba(0,200,83,.18);
  transition:transform .16s,box-shadow .16s;
}
.cta:hover,.cta:focus-visible{transform:translateY(-1px);box-shadow:0 14px 38px rgba(0,200,83,.28)}
.note{font-size:12.5px;color:var(--t2);margin:var(--sp-2) 0 0;max-width:60ch}

/* ── perguntas frequentes ── */
.faq details{
  border-top:1px solid var(--s3);
  padding:var(--sp-3) 0;
}
.faq details:last-of-type{border-bottom:1px solid var(--s3)}
.faq summary{
  font-weight:700;
  cursor:pointer;
  color:var(--t0);
  /* remove o deslocamento do marcador padrão e alinha com o texto */
  list-style:none;
  display:flex;
  gap:var(--sp-2);
  align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--g0);font-weight:800;line-height:1.5;flex:0 0 auto}
.faq details[open] summary::before{content:'–'}
.faq details p{margin:var(--sp-2) 0 0 18px;color:var(--t1);font-size:14px}

/* ── navegação entre as páginas públicas ── */
.more{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:var(--sp-2);
  margin:var(--sp-4) 0 0;
  padding:0;
  list-style:none;
}
.more a{
  display:block;
  min-width:0;
  padding:12px 14px;
  border:1px solid var(--s3);
  border-radius:12px;
  font-size:13.5px;
  font-weight:600;
  color:var(--t1);
  text-decoration:none;
  background:var(--s1);
  transition:color .18s,border-color .18s,background .18s;
}
.more a:hover,.more a:focus-visible{color:var(--g0);border-color:rgba(0,200,83,.32);background:rgba(0,200,83,.06)}
.more a[aria-current="page"]{color:var(--g0);border-color:rgba(0,200,83,.32);background:rgba(0,200,83,.08)}

/* ── rodapé ── */
footer{
  border-top:1px solid var(--s3);
  margin-top:var(--sp-7);
  padding-top:var(--sp-4);
  color:var(--t2);
  font-size:12.5px;
  max-width:82ch;
  text-wrap:pretty;
}

/* ── foco visível e consistente em toda a página ── */
:where(a,summary,button):focus-visible{
  outline:2px solid var(--g0);
  outline-offset:2px;
  border-radius:8px;
}

/* ── acabamento mobile (herdado do r2.15.1): contêiner e recuos mantêm o
   mesmo alinhamento; apenas a escala tipográfica e o espaçamento reduzem ── */
@media (max-width:640px){
  :root{--sp-6:30px;--sp-7:40px}
  body{font-size:14.5px}
  .top{padding-block:var(--sp-1) var(--sp-4);margin-bottom:var(--sp-5)}
  .back{width:auto}
  h1{max-width:100%}
  .card{padding:var(--sp-3)}
  .cta{width:100%;justify-content:center}
  .note{max-width:100%}
}
@media (max-width:380px){
  .top{gap:var(--sp-2)}
  .brand{font-size:17px}
}

/* ── página de erro ── */
.err{
  min-height:100svh;
  display:grid;
  place-content:center;
  text-align:center;
}
.err h1{max-width:100%;margin-inline:auto}
.err .lead{margin-inline:auto}
.err .code{
  font-family:'Space Mono','SFMono-Regular',Consolas,monospace;
  font-size:clamp(56px,16vw,104px);
  line-height:1;
  font-weight:700;
  color:var(--g0);
  letter-spacing:-2px;
}
.err .more{margin-top:var(--sp-5);text-align:left}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .cta:hover,.cta:focus-visible{transform:none}
}