/* estilo.css  -  Claritatis : sistema visual compartilhado (regras identicas em todo o site).
   Artigos, cards do blog, rodape, menu, banner LGPD, botao WhatsApp, acessibilidade.
   Tokens de base (:root, cabecalho, botoes) seguem em cada pagina por ora. */

.nav-links a:hover{ color:var(--azul); }
.nav-links a:hover::after{ width:100%; }
.menu-btn span{ display:block; width:26px; height:2px; background:var(--azul); transition:all var(--t-suave); margin:0 auto; }
.menu-btn.aberto span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn.aberto span:nth-child(2){ opacity:0; }
.menu-btn.aberto span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.menu-overlay{ position:fixed; inset:0; background:rgba(22,32,47,.45); opacity:0; pointer-events:none; transition:opacity var(--t-suave); z-index:64; }
.menu-overlay.aberto{ opacity:1; pointer-events:all; }
.menu-mobile.aberto{ transform:none; }
.menu-mobile a:last-child{ border-bottom:none; }
.menu-fechar{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:34px; line-height:1; color:var(--cinza); cursor:pointer; }
footer{ background:var(--azul-escuro); color:rgba(250,248,243,.8); padding:var(--s7) 0 var(--s5); }
footer .marca .nome{ color:var(--marfim); font-size:28px; }
footer .grade{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s5); margin-top:var(--s5); }
footer .fcol{ font-family:var(--serif-corpo); font-weight:500; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ouro-claro); margin-bottom:var(--s3); }
footer a{ color:rgba(250,248,243,.8); text-decoration:none; display:block; margin-bottom:10px; transition:color var(--t-rapido); }
footer a:hover{ color:var(--marfim); }
footer .base{ margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid rgba(250,248,243,.15); font-size:14px; color:rgba(250,248,243,.55); }
.pular-conteudo{position:absolute;left:-9999px;top:auto;background:#1C2E4A;color:#FAF8F3;padding:10px 16px;z-index:300;text-decoration:none}
.pular-conteudo:focus{left:8px;top:8px}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible, .resp:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:2px solid var(--azul); outline-offset:2px; }
.ck-banner{position:fixed;left:0;right:0;bottom:0;z-index:400;background:#16202F;color:#FAF8F3;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;justify-content:center;padding:18px 24px;box-shadow:0 -8px 28px -12px rgba(0,0,0,.5);font-family:"Spectral",Georgia,serif}
.ck-banner[hidden]{display:none}
.ck-texto{font-size:14.5px;line-height:1.55;max-width:760px;color:rgba(250,248,243,.86)}
.ck-texto strong{color:#fff}
.ck-texto a{color:#D9BE84;text-decoration:underline}
.ck-acoes{display:flex;gap:10px;flex-shrink:0}
.ck-btn{font-family:inherit;font-size:14px;letter-spacing:.04em;padding:11px 22px;cursor:pointer;border:1px solid #D9BE84;background:transparent;color:#FAF8F3;transition:background .2s,color .2s}
.ck-recusar:hover{background:rgba(217,190,132,.14)}
.ck-aceitar{background:#B0853C;border-color:#B0853C;color:#16202F}
.ck-aceitar:hover{background:#D9BE84;border-color:#D9BE84}
@media(max-width:640px){.ck-banner{flex-direction:column;align-items:stretch;text-align:left;gap:14px;padding:16px 18px}.ck-acoes{justify-content:flex-end}}
.zap-flutua{position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;background:#157A43;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.45);z-index:300;transition:transform .2s,box-shadow .2s}
.zap-flutua:hover{transform:scale(1.07);box-shadow:0 14px 30px -8px rgba(0,0,0,.5)}
.zap-flutua svg{width:32px;height:32px;color:#fff}
.zap-flutua:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.artigo{ max-width:760px; margin:0 auto; padding:var(--s7) var(--s4) var(--s5); }
.artigo .marca-tema{ width:76px; color:var(--ouro); margin-bottom:var(--s4); }
.artigo .marca-tema svg{ width:100%; height:auto; display:block; }
.artigo h1{ font-size:clamp(40px,6.2vw,66px); color:var(--azul); margin:var(--s3) 0 var(--s3); }
.artigo h1 em{ font-style:italic; color:var(--ouro); }
.artigo .lede{ font-size:21px; color:var(--tinta-suave); max-width:56ch; margin-bottom:var(--s6); font-style:italic; }
.artigo h2{ font-size:clamp(27px,3.2vw,38px); color:var(--azul); margin:var(--s6) 0 var(--s3); }
.artigo p{ margin-bottom:var(--s3); color:var(--tinta-suave); max-width:64ch; }
.artigo .lead-p::first-letter{ font-family:var(--serif-display); font-weight:600; color:var(--ouro); float:left; font-size:78px; line-height:.66; padding:10px 14px 0 0; }
.artigo strong{ color:var(--tinta); font-weight:600; }
.canone{ margin:var(--s4) 0; padding:var(--s3) var(--s4); background:var(--marfim-2); border-left:2px solid var(--azul); max-width:64ch; }
.canone p{ font-family:var(--serif-display); font-style:italic; font-size:21px; color:var(--azul); line-height:1.45; margin:0 0 var(--s2); max-width:none; }
.exemplo{ margin:var(--s4) 0; padding:var(--s3) var(--s4); border-left:2px solid var(--ouro); max-width:64ch; }
.exemplo p{ margin:0; color:var(--tinta-suave); }
.cta-artigo{ text-align:center; padding:var(--s6) var(--s4) var(--s8); max-width:760px; margin:0 auto; }
.cta-artigo .estrela-cta{ width:60px; color:var(--ouro); margin:0 auto var(--s3); }
.cta-artigo .estrela-cta svg{ width:100%; height:100%; }
.cta-artigo blockquote em{ font-style:italic; color:var(--ouro); }
.cta-artigo p{ color:var(--tinta-suave); max-width:52ch; margin:0 auto var(--s4); font-size:18px; }
.escritura{ margin:var(--s5) 0; padding:var(--s1) 0 var(--s1) var(--s4); border-left:2px solid var(--ouro); max-width:64ch; }
.escritura .latim{ font-family:var(--serif-display); font-style:italic; font-size:20px; color:var(--ouro); margin:0 0 var(--s1); line-height:1.42; }
.escritura .pt{ font-family:var(--serif-display); font-style:italic; font-size:clamp(23px,3vw,30px); color:var(--azul); line-height:1.3; margin:0 0 var(--s2); max-width:none; }
.nota-canonica{ margin:var(--s5) 0; padding:var(--s4); background:var(--marfim-2); max-width:64ch; }
.nota-canonica p{ margin:0; color:var(--tinta-suave); }
.nota-canonica strong{ color:var(--azul); }
.blog-hero{ max-width:var(--largura); margin:0 auto; padding:var(--s7) var(--s4) var(--s5); }
.blog-hero h1{ font-size:clamp(40px,6vw,74px); color:var(--azul); margin:var(--s3) 0 var(--s2); }
.blog-hero h1 em{ font-style:italic; color:var(--ouro); }
.blog-hero p{ font-size:20px; color:var(--tinta-suave); max-width:54ch; }
.grade-posts{ max-width:var(--largura); margin:0 auto; padding:0 var(--s4) var(--s8); display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); }
.card-post{ display:block; text-decoration:none; background:var(--marfim); border:1px solid var(--linha); padding:var(--s5); transition:border-color var(--t-suave), transform var(--t-suave), box-shadow var(--t-suave); }
.card-post:hover{ border-color:var(--ouro); transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(28,46,74,.5); }
.card-post .cat{ font-family:var(--serif-corpo); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ouro); }
.card-post h2{ font-family:var(--serif-display); font-size:30px; color:var(--azul); line-height:1.12; margin:var(--s2) 0 var(--s2); }
.card-post .ler{ display:inline-block; margin-top:var(--s3); color:var(--azul); font-size:15px; letter-spacing:.02em; border-bottom:1px solid var(--ouro); padding-bottom:2px; }
