/* QR Code Já — folha única, sem framework e sem webfont bloqueante.
   Paleta: índigo #3730a3 (principal) e âmbar #f59e0b (sinal). */

:root{
  --indigo:#3730a3; --indigo-esc:#2a2480; --indigo-cl:#4f46e5;
  --ambar:#f59e0b; --ambar-esc:#b45309;
  --fundo:#f7f8fd; --papel:#ffffff; --claro:#eef0fb;
  --texto:#1c1e33; --texto2:#4b4f72; --texto3:#71769c;
  --borda:#dcdff2; --borda2:#c7cbf0;
  --ok:#047857; --erro:#b91c1c;
  --raio:12px; --sombra:0 1px 3px rgba(28,30,51,.07), 0 6px 20px rgba(28,30,51,.05);
  --largura:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
img,svg{max-width:100%}
a{color:var(--indigo); text-decoration:none}
a:hover{text-decoration:underline}
code{background:var(--claro); padding:.12em .38em; border-radius:5px; font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; word-break:break-word}
.container{max-width:var(--largura); margin:0 auto; padding:0 18px}
.pular{position:absolute;left:-999px}
.pular:focus{left:8px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:99}

/* ---------- topo ---------- */
.topbar{background:var(--indigo); color:#fff; position:sticky; top:0; z-index:40;
  box-shadow:0 2px 10px rgba(28,30,51,.13)}
.topbar-in{display:flex; align-items:center; gap:18px; min-height:60px; flex-wrap:wrap}
.marca{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; padding:8px 0}
.marca:hover{text-decoration:none}
.marca-logo{display:flex}
.marca-txt b{display:block; font-size:17px; line-height:1.15; letter-spacing:-.2px}
.marca-txt small{display:block; font-size:11.5px; color:#c9c8f2}
.menu{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
.menu a{color:#e6e6fb; font-size:14.5px; padding:7px 11px; border-radius:8px}
.menu a:hover{background:rgba(255,255,255,.14); text-decoration:none}
.menu-toggle,.menu-botao{display:none}

/* ---------- estrutura ---------- */
main{padding:22px 0 40px; min-height:60vh}
h1{font-size:clamp(25px,3.6vw,35px); line-height:1.18; margin:.35em 0 .45em; letter-spacing:-.5px}
h2{font-size:clamp(20px,2.5vw,25px); margin:1.6em 0 .5em; line-height:1.25; letter-spacing:-.3px}
h3{font-size:18px; margin:1.4em 0 .4em}
h4{font-size:15.5px; margin:1.2em 0 .3em}
p{margin:.65em 0}
.lead{font-size:17.5px; color:var(--texto2); max-width:70ch}
.hero{padding:6px 0 4px}
.bloco{background:var(--papel); border:1px solid var(--borda); border-radius:var(--raio);
  padding:20px 22px; margin:20px 0; box-shadow:var(--sombra)}
.bloco > h2:first-child{margin-top:.15em}
.texto{background:var(--papel); border:1px solid var(--borda); border-radius:var(--raio);
  padding:22px 26px; box-shadow:var(--sombra); max-width:78ch}
.texto ul,.texto ol{padding-left:1.3em}
.texto li{margin:.32em 0}

/* ---------- trilha ---------- */
.trilha{font-size:13.5px; color:var(--texto3); margin:2px 0 8px}
.trilha a{color:var(--texto2)}
.trilha i{margin:0 7px; font-style:normal; color:var(--borda2)}

/* ---------- busca ---------- */
.busca{display:flex; gap:8px; margin:14px 0 10px; max-width:640px}
.busca input{flex:1; padding:12px 14px; font-size:15.5px; border:1px solid var(--borda2);
  border-radius:10px; background:#fff; color:var(--texto)}
.busca input:focus{outline:2px solid var(--indigo-cl); outline-offset:1px; border-color:transparent}
.busca button{padding:12px 20px; font-size:15.5px; font-weight:600; border:0; border-radius:10px;
  background:var(--indigo); color:#fff; cursor:pointer}
.busca button:hover{background:var(--indigo-esc)}

/* ---------- gerador ---------- */
.gerador{background:var(--papel); border:1px solid var(--borda); border-radius:var(--raio);
  box-shadow:var(--sombra); margin:16px 0 8px; overflow:hidden}
.abas{display:flex; flex-wrap:wrap; gap:2px; padding:10px 10px 0; background:var(--claro);
  border-bottom:1px solid var(--borda)}
.abas a,.abas button{font:inherit; font-size:13.5px; padding:8px 13px; border:0; cursor:pointer;
  background:transparent; color:var(--texto2); border-radius:9px 9px 0 0}
.abas a:hover,.abas button:hover{background:rgba(55,48,163,.09); text-decoration:none}
.abas .ativa,.abas [aria-selected="true"]{background:var(--papel); color:var(--indigo); font-weight:600;
  box-shadow:0 -2px 0 var(--indigo) inset}
.gerador-corpo{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; padding:20px 22px}
.campos{display:grid; gap:12px; align-content:start}
.campo{display:grid; gap:4px}
.campo label{font-size:13.5px; font-weight:600; color:var(--texto2)}
.campo .ajuda{font-size:12.5px; color:var(--texto3); font-weight:400}
.campo input,.campo select,.campo textarea{padding:10px 12px; font:inherit; font-size:15px;
  border:1px solid var(--borda2); border-radius:9px; background:#fff; color:var(--texto); width:100%}
.campo textarea{min-height:88px; resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--indigo-cl); outline-offset:1px; border-color:transparent}
.campo-linha{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.saida{display:grid; gap:10px; align-content:start; justify-items:center;
  background:var(--claro); border-radius:10px; padding:16px}
.qr-caixa{background:#fff; padding:10px; border-radius:10px; border:1px solid var(--borda);
  width:100%; max-width:270px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center}
.qr-caixa svg{width:100%; height:auto; display:block}
.qr-info{font-size:12.5px; color:var(--texto2); text-align:center; line-height:1.45}
.qr-info b{color:var(--texto)}
.baixar{display:flex; gap:8px; width:100%}
.baixar a,.baixar button{flex:1; text-align:center; padding:10px 12px; border-radius:9px; font-size:14px;
  font-weight:600; border:1px solid var(--indigo); background:var(--indigo); color:#fff; cursor:pointer}
.baixar .sec{background:#fff; color:var(--indigo)}
.baixar a:hover,.baixar button:hover{text-decoration:none; background:var(--indigo-esc); color:#fff}
.baixar .sec:hover{background:var(--claro); color:var(--indigo)}
.opcoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px;
  border-top:1px solid var(--borda); padding:14px 22px 18px; background:#fbfbfe}
.aviso-local{font-size:12.5px; color:var(--texto3); padding:0 22px 16px; background:#fbfbfe; margin:0}

.btn-gerar{margin-top:4px; padding:13px 20px; font:inherit; font-size:16px; font-weight:700;
  border:0; border-radius:10px; background:var(--indigo); color:#fff; cursor:pointer; width:100%;
  box-shadow:0 2px 8px rgba(55,48,163,.28)}
.btn-gerar:hover{background:var(--indigo-esc)}
.btn-gerar:active{transform:translateY(1px)}
.btn-gerar.piscou{animation:pisca .5s ease}
@keyframes pisca{0%{box-shadow:0 0 0 0 rgba(79,70,229,.5)}100%{box-shadow:0 0 0 14px rgba(79,70,229,0)}}
.btn-copiar{width:100%; padding:9px; border-radius:9px; border:1px solid var(--borda2);
  background:#fff; color:var(--indigo); font:inherit; font-size:13.5px; cursor:pointer}
.btn-copiar:hover{background:var(--claro)}
/* Só aparece sem JavaScript: com JS o download é feito no próprio aparelho. */
.baixar-sem-js{font-size:12.5px; color:var(--texto3); text-decoration:underline}

/* ---------- listas e grades ---------- */
.grade{list-style:none; padding:0; margin:12px 0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px}
.grade a{display:block; padding:13px 15px; background:var(--papel); border:1px solid var(--borda);
  border-radius:10px; color:var(--texto); height:100%}
.grade a:hover{border-color:var(--indigo-cl); text-decoration:none; box-shadow:var(--sombra)}
.grade b{display:block; color:var(--indigo); font-size:15px; margin-bottom:3px}
.grade span{display:block; font-size:13.2px; color:var(--texto2); line-height:1.45}
.grid-3{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px; margin:18px 0}
.card{display:block; background:var(--papel); border:1px solid var(--borda); border-radius:var(--raio);
  padding:18px 20px; color:var(--texto); box-shadow:var(--sombra)}
.card:hover{border-color:var(--indigo-cl); text-decoration:none}
.card h3{margin:0 0 .35em; color:var(--indigo)}
.card p{margin:0; font-size:14.2px; color:var(--texto2)}
.chips{list-style:none; padding:0; margin:10px 0; display:flex; flex-wrap:wrap; gap:7px}
.chips a{display:inline-block; padding:6px 12px; background:var(--claro); border:1px solid var(--borda);
  border-radius:999px; font-size:13.5px; color:var(--indigo)}
.chips a:hover{background:#e2e5fa; text-decoration:none}
.bullets{padding-left:1.15em}
.bullets li{margin:.4em 0}
.mais{font-weight:600}

/* ---------- tabelas ---------- */
.tabela-rolagem{overflow-x:auto; margin:12px 0; border:1px solid var(--borda); border-radius:10px}
.tabela{width:100%; border-collapse:collapse; font-size:14.2px; background:var(--papel); min-width:480px}
.tabela th,.tabela td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--borda)}
.tabela th{background:var(--claro); font-size:13px; color:var(--texto2); font-weight:700;
  position:sticky; top:0}
.tabela tr:last-child td{border-bottom:0}
.tabela .num{text-align:right; font-variant-numeric:tabular-nums}
.tabela tbody tr:hover{background:#fafbff}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--borda); border-radius:10px; margin:8px 0; background:var(--papel)}
.faq summary{padding:12px 15px; cursor:pointer; font-weight:600; font-size:15px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+"; color:var(--indigo); font-weight:700; margin-right:9px}
.faq[open] summary::before{content:"–"}
.faq > div{padding:0 15px 13px; color:var(--texto2); font-size:14.8px}
.faq > div p:first-child{margin-top:0}

/* ---------- blocos auxiliares ---------- */
.fonte{font-size:13px; color:var(--texto3); border-top:1px dashed var(--borda2); padding-top:10px; margin-top:16px}
.cross{background:linear-gradient(135deg,#eef0fb,#e6e9fb); border:1px solid var(--borda2);
  border-radius:var(--raio); padding:18px 20px; margin:20px 0}
.cross h3{margin:0 0 .3em; color:var(--indigo-esc)}
.cross p{margin:0 0 .7em; font-size:14.5px; color:var(--texto2)}
.btn{display:inline-block; padding:9px 16px; background:var(--indigo); color:#fff; border-radius:9px;
  font-size:14px; font-weight:600}
.btn:hover{background:var(--indigo-esc); text-decoration:none}
.selos{display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; padding:0; list-style:none}
.selo{display:inline-block; background:var(--claro); border:1px solid var(--borda2); color:var(--texto2);
  border-radius:999px; padding:4px 11px; font-size:12.8px}
.destaque{background:#fff8ec; border:1px solid #f6d99a; border-left:4px solid var(--ambar);
  border-radius:9px; padding:13px 16px; margin:14px 0; font-size:14.8px}
.destaque strong{color:var(--ambar-esc)}
.vazio{background:var(--papel); border:1px solid var(--borda); border-radius:var(--raio);
  padding:28px 24px; text-align:center; box-shadow:var(--sombra)}
.cont-res{color:var(--texto3); font-size:13.5px}
.resultados{list-style:none; padding:0; margin:10px 0; display:grid; gap:8px}
.res a{display:block; padding:12px 15px; background:var(--papel); border:1px solid var(--borda);
  border-radius:10px; color:var(--texto)}
.res a:hover{border-color:var(--indigo-cl); text-decoration:none}
.res b{display:block; color:var(--indigo); font-size:15px}
.res span{font-size:13.4px; color:var(--texto2)}
.tag{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  margin-right:8px; text-transform:uppercase; letter-spacing:.4px}
.tag-tipo{background:#e0e7ff; color:#3730a3}
.tag-segmento{background:#fef3c7; color:#92400e}
.tag-espec{background:#d1fae5; color:#065f46}
.tag-conteudo{background:#fce7f3; color:#9d174d}

/* ---------- feedback ---------- */
.feedback{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:22px 0 0;
  padding:13px 16px; background:var(--claro); border-radius:10px; font-size:14.2px; color:var(--texto2)}
.feedback button{padding:6px 15px; border:1px solid var(--borda2); background:#fff; color:var(--indigo);
  border-radius:8px; cursor:pointer; font:inherit; font-size:14px; font-weight:600}
.feedback button:hover{background:var(--indigo); color:#fff; border-color:var(--indigo)}
.feedback-ok{color:var(--ok); font-weight:600}

/* ---------- artigos ---------- */
.artigo{background:var(--papel); border:1px solid var(--borda); border-radius:var(--raio);
  padding:24px 28px; box-shadow:var(--sombra); max-width:80ch; margin:0 auto}
.artigo img{border-radius:10px; display:block; margin:0 auto}
.artigo figure{margin:22px 0}
.artigo figcaption{font-size:13px; color:var(--texto3); text-align:center; margin-top:7px}
.artigo .fig img{width:100%; height:auto}
.fig figcaption .credito{display:block; margin-top:2px; font-size:12px; opacity:.85}
.fig figcaption .credito a{color:inherit; text-decoration:underline}
.artigo h2{border-bottom:1px solid var(--borda); padding-bottom:.3em}
.meta{font-size:13.2px; color:var(--texto3); margin:0 0 14px}
.tags{display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 0; padding:0; list-style:none}
.tags li{background:var(--claro); border-radius:999px; padding:3px 11px; font-size:12.5px; color:var(--texto2)}
.leia-tambem{background:var(--claro); border-radius:10px; padding:16px 20px; margin:24px 0 0}
.leia-tambem h3{margin:0 0 .4em}
.leia-tambem ul{margin:0; padding-left:1.15em}
.lista-artigos{list-style:none; padding:0; margin:14px 0; display:grid; gap:12px}
.lista-artigos a{display:grid; grid-template-columns:150px 1fr; gap:16px; background:var(--papel);
  border:1px solid var(--borda); border-radius:var(--raio); overflow:hidden; color:var(--texto)}
.lista-artigos a:hover{border-color:var(--indigo-cl); text-decoration:none; box-shadow:var(--sombra)}
.lista-artigos img{width:150px; height:100%; object-fit:cover; display:block}
.lista-artigos div{padding:14px 16px 14px 0}
.lista-artigos b{display:block; color:var(--indigo); font-size:16px; margin-bottom:4px}
.lista-artigos span{font-size:13.8px; color:var(--texto2)}

/* ---------- anúncios: altura reservada, sem CLS ---------- */
.ad-box{min-height:280px; margin:22px 0; display:flex; align-items:center; justify-content:center;
  background:transparent; overflow:hidden}
.ad-box ins{width:100%}

/* ---------- rodapé ---------- */
.rodape{background:#1c1e33; color:#c8cae6; margin-top:36px; padding:32px 0 26px; font-size:14px}
.rodape-cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:22px}
.rodape h4{color:#fff; font-size:14px; margin:0 0 .5em; text-transform:uppercase; letter-spacing:.6px}
.rodape a{display:block; color:#c8cae6; padding:3px 0; font-size:13.6px}
.rodape a:hover{color:#fff}
.aviso-rodape{margin:24px 0 12px; padding-top:18px; border-top:1px solid #34375c; font-size:12.6px;
  color:#9a9dc4; line-height:1.6}
.aviso-rodape strong{color:#c8cae6}
.contador{font-size:13px; color:#9a9dc4; margin:8px 0}
.rodape small{display:block; color:#8a8db4; font-size:12.4px; margin-top:6px}
.rodape small a{display:inline; color:#c8cae6}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .gerador-corpo{grid-template-columns:1fr}
  .saida{order:-1}
  .lista-artigos a{grid-template-columns:110px 1fr}
  .lista-artigos img{width:110px}
  .lista-artigos div{padding:12px 14px 12px 0}
}
@media (max-width:760px){
  .menu-botao{display:block; margin-left:auto; font-size:24px; cursor:pointer; padding:4px 10px;
    color:#fff; line-height:1}
  .menu{display:none; width:100%; flex-direction:column; gap:0; padding-bottom:8px}
  .menu-toggle:checked ~ .menu{display:flex}
  .menu a{padding:10px 4px; border-bottom:1px solid rgba(255,255,255,.12)}
  .campo-linha{grid-template-columns:1fr}
  .bloco,.texto,.artigo{padding:16px 15px}
  .gerador-corpo,.opcoes,.aviso-local{padding-left:15px; padding-right:15px}
}

@media print{
  .topbar,.rodape,.ad-box,.feedback,.busca,.cross{display:none}
  body{background:#fff}
  .bloco,.texto,.artigo{border:0; box-shadow:none; padding:0}
}

/* ---------- banner de cookies (consent.js) ---------- */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; gap:16px;
  align-items:center; justify-content:center; flex-wrap:wrap;
  background:#1c1e33; color:#dcdef0; padding:14px 18px; font-size:13.6px; line-height:1.5;
  box-shadow:0 -3px 16px rgba(0,0,0,.22)}
.cookie-text{max-width:760px}
.cookie-text a{color:#a5b4fc}
.cookie-actions{display:flex; gap:9px}
.cookie-btn{padding:9px 20px; border-radius:9px; border:1px solid var(--indigo-cl);
  background:var(--indigo-cl); color:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer}
.cookie-btn:hover{background:var(--indigo)}
.cookie-btn.alt{background:transparent; color:#c8cae6; border-color:#4b4f72}
.cookie-btn.alt:hover{background:#2a2d4a}
@media (max-width:600px){ .cookie-banner{font-size:13px} .cookie-actions{width:100%} .cookie-btn{flex:1} }