/* ==========================================================================
   [CP] CarroPago — Sistema v2: topo · rodapé · botões · widget Soro
   --------------------------------------------------------------------------
   Extraído do <style> inline de index.html, que já roda o sistema novo.
   Fonte da decisão: claude/sistema-cores-grupo-bandeira-3008.md
     · painel na cor da marca (#012169), texto gelo #F2F4F7
     · wordmark em TEXTO, âmbar #F5A623, tracking −50% (nada de fullmark SVG)
     · regra 2  — âmbar nunca carrega texto: botão âmbar = texto grafite
     · regra 10 — ação reta (3px) · conteúdo suave (10–16px)
     · regra 3  — nenhum verde em superfície CP

   CARREGAR SEMPRE DEPOIS de styles.css: as regras abaixo sobrescrevem o topo
   branco / botão arredondado do sistema antigo. Seletores foram escritos com
   a mesma especificidade (ou maior) que os de styles.css.
   ========================================================================== */

:root{
  /* tokens que o index usa e que tokens.css ainda não tinha */
  --font-text:system-ui,-apple-system,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --container:1120px;
  --r-acao:3px;          /* regra 10 — botões e selos */
  --r-conteudo:12px;     /* regra 10 — cards e fotos */
  --r-foto:16px;
}

/* ---- wordmark ------------------------------------------------------------ */
.wordmark{font-family:var(--font-sans);font-weight:600;letter-spacing:var(--wordmark-tracking,-.045em);text-transform:lowercase}

/* ---- topo: painel da marca ----------------------------------------------- */
.site-header{
  background:var(--cp-azul);
  border-bottom:1px solid rgba(242,244,247,.16);
  position:sticky;top:0;z-index:60;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;
}
.site-header[data-scrolled="true"]{box-shadow:none}
.site-header__inner{
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;gap:16px;
  padding:14px 24px;
}
.site-header__brand{
  font-family:var(--font-sans);font-weight:600;letter-spacing:var(--wordmark-tracking,-.045em);
  text-transform:lowercase;font-size:1.35rem;line-height:1;
  color:var(--ambar);text-decoration:none;flex-shrink:0;
}
.site-header__brand:hover{color:var(--ambar);filter:brightness(1.06)}
.site-header__nav{
  margin-left:auto;display:flex;align-items:center;gap:22px;
  font-family:var(--font-sans);font-size:.92rem;
}
.site-header__nav a{color:var(--gelo);text-decoration:none;font-weight:500}
.site-header__nav a:hover{color:var(--white)}
/* página atual: sublinhado âmbar (âmbar como elemento gráfico, não texto) */
.site-header__nav a[aria-current="page"]{color:var(--white);box-shadow:inset 0 -2px 0 var(--ambar)}
.site-header__nav a.btn[aria-current="page"]{box-shadow:none}
/* burger do enhance.js precisa aparecer sobre o painel escuro */
.mobile-menu-toggle{color:var(--gelo);border-radius:var(--r-acao)}

/* ---- botões: ação reta --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:600;font-size:.95rem;line-height:1.2;
  border:0;border-radius:var(--r-acao);padding:13px 24px;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:filter .15s ease,transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:15px 28px;font-size:1rem}
/* âmbar + grafite (regra 2). btn--wa herda o mesmo par: sem verde de canal */
.btn.btn--primary,.btn.btn--wa,.btn.btn--ambar{background:var(--ambar);color:var(--grafite);border:0}
.btn.btn--primary:hover,.btn.btn--wa:hover,.btn.btn--ambar:hover{background:var(--ambar);color:var(--grafite);filter:brightness(.96)}
.btn.btn--brand{background:var(--cp-azul);color:var(--gelo);border:0}
.btn.btn--brand:hover{background:var(--cp-azul-darker)}
.btn.btn--secondary{background:var(--white);color:var(--grafite);border:1px solid var(--line)}
.btn.btn--secondary:hover{border-color:var(--muted)}
.btn.btn--ghost{background:transparent;color:var(--grafite-soft);border:0}
.btn.btn--ghost:hover{color:var(--cp-azul)}
.site-header .btn{padding:11px 18px;font-size:.9rem}

/* selo reto (regra 10) */
.pill{border-radius:var(--r-acao)}

/* faixa CTA na cor da marca */
.cta-band{background:var(--cp-azul);color:var(--gelo)}
.cta-band h2{color:var(--gelo)}
.cta-band p{color:rgba(242,244,247,.82)}
.cta-band .btn.btn--primary{background:var(--ambar);color:var(--grafite)}
.cta-band .btn.btn--primary:hover{background:var(--ambar);color:var(--grafite);filter:brightness(.96)}

/* ---- rodapé: painel da marca, igual ao do index -------------------------- */
.site-footer{background:var(--cp-azul);color:var(--gelo);padding:56px 0 32px;font-size:.92rem}
.site-footer .container{max-width:var(--container);padding:0 24px}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:0}
.site-footer .wordmark{display:inline-block;font-size:1.4rem;line-height:1;color:var(--ambar);margin-bottom:12px}
.site-footer__fullmark{margin-bottom:0}
.site-footer h4{font-family:var(--font-sans);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ambar);margin:0 0 12px}
.site-footer ul{list-style:none;margin:0;padding:0;display:block}
.site-footer li{margin-bottom:9px}
.site-footer a{color:rgba(242,244,247,.85);text-decoration:none;font-size:.92rem}
.site-footer a:hover{color:var(--gelo)}
.site-footer__desc{color:rgba(242,244,247,.64);font-size:.875rem;margin:0;max-width:340px}
.site-footer__meta{
  margin-top:36px;padding-top:20px;
  border-top:1px solid rgba(242,244,247,.18);
  display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 28px;
  font-size:.8rem;color:rgba(242,244,247,.6);
}
@media (max-width:860px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:24px}
  .site-footer__grid>div:first-child{grid-column:1/-1}
}
@media (max-width:720px){
  .site-header__inner{padding:12px 20px}
  .site-header{border-bottom:none}
  .site-footer{padding:44px 0 28px}
}

/* foco visível: âmbar sobre painel, cor da marca sobre branco */
:focus-visible{outline:2px solid var(--cp-azul);outline-offset:2px}
.site-header :focus-visible,.site-footer :focus-visible,.cta-band :focus-visible{outline-color:var(--ambar)}

/* ---- ajustes vindos da QA visual (12/09) --------------------------------- */
/* 1. o widget faz container.scrollIntoView({block:'start'}) ao abrir o artigo;
      sem isto o topo sticky come o titulo. Só CSS, o JS do Soro segue intacto. */
#soro-blog,#artigos{scroll-margin-top:76px}
/* 2. botao secundario dentro do painel da marca: virava um chip branco solido.
      Passa ao tratamento ghost do index (transparente + borda gelo). */
.site-header .btn.btn--secondary{background:transparent;color:var(--gelo);border:1.5px solid rgba(242,244,247,.55)}
.site-header .btn.btn--secondary:hover{background:transparent;color:var(--white);border-color:var(--gelo)}
/* 3. a lista do Soro herdava `section{padding:6rem 0}` e abria um vao de ~96px
      entre a intro e o primeiro card. */
#artigos{padding:8px 0 0}

/* o enhance.js poe [data-reveal]{opacity:0} e so revela no IntersectionObserver.
   Em tela ha fallback (sem IO) e prefers-reduced-motion; na impressao nao havia,
   entao o que estivesse abaixo da dobra sairia em branco. */
@media print{[data-reveal]{opacity:1!important;transform:none!important}}

/* ==========================================================================
   Widget Soro (#soro-blog)
   --------------------------------------------------------------------------
   O embed injeta o próprio <style id="soro-blog-styles-light"> no <head> em
   runtime — ou seja, DEPOIS deste arquivo. Por isso todo seletor daqui leva
   o id #soro-blog: (1,1,0) ganha de (0,1,0) independentemente da ordem.
   Estrutura gerada: #soro-blog > .soro-blog > (.soro-blog-header,
   .soro-blog-content > .soro-blog-list > a.soro-blog-card | .soro-blog-article)
   Nada aqui toca o JS do widget.
   ========================================================================== */
#soro-blog .soro-blog{font-family:var(--font-text);color:var(--grafite-soft);max-width:none}
#soro-blog .soro-blog a{color:inherit}

/* lista */
#soro-blog .soro-blog-list{gap:20px}
#soro-blog .soro-blog-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-conteudo);
  padding:20px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
#soro-blog .soro-blog-card:hover{border-color:var(--cp-azul);box-shadow:var(--shadow-md)}
#soro-blog .soro-blog-card-image{border-radius:10px}
#soro-blog .soro-blog-card-title,#soro-blog h2.soro-blog-card-title{
  font-family:var(--font-sans);font-weight:600;font-size:1.1rem;
  letter-spacing:-.012em;color:var(--grafite);
}
#soro-blog .soro-blog-card:hover .soro-blog-card-title{color:var(--cp-azul)}
#soro-blog .soro-blog-card-excerpt{color:var(--grafite-soft);font-size:.92rem;line-height:1.55}
#soro-blog .soro-blog-card-date{color:var(--muted);font-family:var(--font-text);font-size:var(--fs-sm)}

/* artigo aberto via ?post=<slug> */
#soro-blog .soro-blog-article-title{
  font-family:var(--font-sans);font-weight:700;letter-spacing:-.02em;color:var(--grafite);
}
#soro-blog .soro-blog-article-date{color:var(--muted);font-family:var(--font-text);font-size:var(--fs-sm)}
#soro-blog .soro-blog-article-image{border-radius:var(--r-foto)}
#soro-blog .soro-blog-article-content{color:var(--grafite-soft);font-size:1.02rem;line-height:1.7}
#soro-blog .soro-blog-article-content h1,
#soro-blog .soro-blog-article-content h2,
#soro-blog .soro-blog-article-content h3{
  font-family:var(--font-sans);color:var(--grafite);letter-spacing:-.015em;
}
#soro-blog .soro-blog-article-content strong{color:var(--grafite)}
#soro-blog .soro-blog-article-content a{color:var(--cp-azul);text-decoration:underline;text-underline-offset:2px}
#soro-blog .soro-blog-article-content a:hover{color:var(--cp-azul-darker)}
#soro-blog .soro-blog-article-content img{border-radius:var(--r-conteudo)}
#soro-blog .soro-blog-article-content blockquote{
  margin:0 0 16px;padding:4px 0 4px 18px;
  border-left:3px solid var(--ambar);color:var(--grafite-soft);
}
#soro-blog .soro-blog-article-content table{border-collapse:collapse;width:100%}
#soro-blog .soro-blog-article-content th,
#soro-blog .soro-blog-article-content td{border:1px solid var(--line);padding:8px 10px;text-align:left}

/* botões/CTAs internos do widget — ação reta */
#soro-blog .soro-blog-back{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-acao);
  font-family:var(--font-sans);font-weight:600;font-size:.85rem;color:var(--cp-azul);
}
#soro-blog .soro-blog-back:hover{background:var(--papel);border-color:var(--cp-azul)}
#soro-blog .soro-blog-article-content .btn,
#soro-blog .soro-blog-article-content a.button{border-radius:var(--r-acao)}
#soro-blog .soro-blog-spinner{border-color:var(--line);border-top-color:var(--cp-azul)}
#soro-blog .soro-blog-empty,#soro-blog .soro-blog-loading{color:var(--muted)}
#soro-blog .soro-blog-error{color:var(--erro)}

/* -- Aviso de atualizacao legal (topo de Termos/Privacidade) ---------------
   Bloco discreto: fundo neutro, borda esquerda na cor da marca, 0.95rem.
   Escrito como .legal-page .legal-update para vencer .legal-page p de
   styles.css sem precisar de !important. */
.legal-page .legal-update{
  display:block;
  margin:0 0 var(--sp-5);
  padding:12px 16px;
  background:var(--papel);
  border-left:3px solid var(--cp-azul);
  border-radius:var(--r-conteudo);
  font-size:.95rem;
  line-height:1.55;
  color:var(--grafite-soft);
}
.legal-page .legal-update strong{color:var(--grafite)}