/* REFRAME · Blog — mesmo sistema visual dos sites da Mentoria e do Mapa */
:root{
  --oliva:#4B4E2F; --oliva-m:#74795A; --salvia:#A9AC8B; --marfim:#F5F0E6;
  --areia:#D8C9B3; --dourado:#B89A5E; --grafite:#2C2923; --linha:rgba(44,41,35,.16);
  --texto-2:#5b564c;
  --serif:"EB Garamond", Garamond, "Times New Roman", serif;
  --sans:Montserrat, "Helvetica Neue", Arial, sans-serif;
  --wrap:1120px; --leitura:680px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--marfim);color:var(--grafite);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--dourado);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--grafite);color:var(--marfim);padding:8px 14px;z-index:20}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;margin:0;letter-spacing:-.01em}
p{margin:0 0 1.1em}

/* topo */
.topo{border-bottom:1px solid var(--linha);padding:18px 0;padding-top:calc(18px + env(safe-area-inset-top,0px))}
.topo .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topo .marca{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.topo .marca img{width:132px}
.topo .marca span{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--oliva-m)}
.topo nav{display:flex;gap:22px;font-size:.88rem}
.topo nav a{text-decoration:none;color:var(--texto-2)}
.topo nav a:hover{color:var(--oliva)}
.topo nav .cta-topo{color:var(--oliva);font-weight:600;border-bottom:1px solid var(--dourado);padding-bottom:2px}
@media (max-width:640px){.topo nav a:not(.cta-topo){display:none}.topo .marca img{width:112px}}

/* capa do blog */
.capa{padding:88px 0 56px}
.kicker{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--oliva-m);margin-bottom:14px;display:block}
.capa h1{font-size:clamp(2.4rem,6vw,4.2rem);max-width:18ch;line-height:1.05}
.capa h1 em{font-style:italic;color:var(--oliva-m)}
.capa p{max-width:56ch;font-size:1.08rem;margin-top:22px;color:var(--texto-2)}

/* lista de artigos */
.lista{padding:8px 0 104px}
.artigo-card{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:40px;align-items:start;padding:40px 0;border-top:1px solid var(--linha);text-decoration:none}
.artigo-card:last-child{border-bottom:1px solid var(--linha)}
.artigo-card .num{display:block;font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--dourado);margin-bottom:12px}
.artigo-card .mini{width:100%;aspect-ratio:4/3;object-fit:cover;transition:opacity .2s}
.artigo-card:hover .mini{opacity:.9}
.artigo-card .meta{font-size:.82rem;color:var(--texto-2);letter-spacing:.02em;margin-bottom:10px}
.artigo-card h2{font-size:clamp(1.7rem,3.4vw,2.4rem);max-width:28ch;margin-bottom:12px}
.artigo-card p{max-width:60ch;color:var(--texto-2);margin:0}
.artigo-card .ler{display:inline-block;margin-top:16px;font-weight:600;font-size:.92rem;color:var(--oliva);border-bottom:1px solid var(--dourado);padding-bottom:2px}
.artigo-card:hover h2{color:var(--oliva)}
@media (max-width:760px){.artigo-card{grid-template-columns:1fr;gap:20px}}

/* artigo */
.artigo-topo{padding:72px 0 40px}
.artigo-topo .wrap{max-width:calc(var(--leitura) + 48px)}
.voltar{font-size:.85rem;color:var(--texto-2);text-decoration:none;display:inline-block;margin-bottom:28px}
.voltar:hover{color:var(--oliva)}
.artigo-topo h1{font-size:clamp(2.2rem,5.4vw,3.5rem);line-height:1.08}
.artigo-topo .linha-fina{font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.4;color:var(--oliva-m);margin-top:20px}
.artigo-topo .meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.84rem;color:var(--texto-2);margin-top:28px;padding-top:18px;border-top:1px solid var(--linha)}
.corpo{padding:0 0 40px}
.corpo .wrap{max-width:calc(var(--leitura) + 48px)}
.corpo p,.corpo li{font-size:1.06rem}
.corpo h2{font-size:clamp(1.75rem,3.6vw,2.25rem);margin:56px 0 18px}
.corpo h3{font-size:1.45rem;margin:36px 0 10px}
.corpo ul,.corpo ol{padding-left:22px;margin:0 0 1.2em}
.corpo li{margin-bottom:8px}
.corpo a{text-underline-offset:3px;text-decoration-color:var(--dourado)}
.corpo strong{font-weight:600}

.dado{margin:40px 0;padding:32px 0;border-top:2px solid var(--oliva);border-bottom:1px solid var(--linha);display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.dado .n{font-family:var(--serif);font-size:clamp(3.6rem,9vw,5.4rem);line-height:.9;color:var(--oliva)}
.dado p{margin:0;font-size:1rem}
.dado small{display:block;margin-top:8px;font-size:.8rem;color:var(--texto-2)}
@media (max-width:560px){.dado{grid-template-columns:1fr;gap:12px}}

.citacao{margin:36px 0;padding-left:22px;border-left:2px solid var(--dourado);font-family:var(--serif);font-size:1.45rem;line-height:1.4;color:var(--oliva)}

.passo{counter-increment:passo;position:relative;padding-left:56px;margin-top:40px}
.passos{counter-reset:passo}
.passo::before{content:counter(passo,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:var(--serif);font-size:1.6rem;color:var(--dourado)}
.passo h3{margin-top:0}

.antes-depois{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0}
.antes-depois div{padding:22px 22px 18px;background:#fbf8f2;border:1px solid var(--linha)}
.antes-depois div:last-child{border-color:var(--dourado);background:#fff}
.antes-depois span{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);margin-bottom:8px}
.antes-depois p{font-family:var(--serif);font-size:1.25rem;line-height:1.4;margin:0}
@media (max-width:640px){.antes-depois{grid-template-columns:1fr}}

/* chamada para o Diagnóstico */
.chamada{background:var(--oliva);color:var(--marfim);padding:64px 0;margin-top:24px}
.chamada .wrap{max-width:calc(var(--leitura) + 48px);position:relative}
.chamada .kicker{color:var(--salvia)}
.chamada h2{font-size:clamp(1.9rem,4.2vw,2.6rem);max-width:20ch}
.chamada p{color:rgba(245,240,230,.86);max-width:52ch;margin-top:16px}
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:.98rem;text-decoration:none;padding:16px 28px;border-radius:2px;margin-top:12px}
.btn-claro{background:var(--marfim);color:var(--oliva)}
.btn-claro:hover{background:#fff}
.chamada .nota{font-size:.85rem;color:var(--salvia);margin-top:14px}

/* autora e fontes */
.autora{padding:56px 0 24px}
.autora .wrap{max-width:calc(var(--leitura) + 48px)}
.autora-box{display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start;padding-top:28px;border-top:1px solid var(--linha)}
.autora-box img{width:96px;height:96px;object-fit:cover;object-position:top;border-radius:50%}
.autora-box h3{font-size:1.4rem}
.autora-box .cargo{font-family:var(--serif);font-style:italic;color:var(--oliva-m);margin:2px 0 10px;font-size:1.1rem}
.autora-box p{font-size:.95rem;color:var(--texto-2);margin-bottom:8px}
@media (max-width:520px){.autora-box{grid-template-columns:1fr}}
.fontes{padding:8px 0 88px}
.fontes .wrap{max-width:calc(var(--leitura) + 48px)}
.fontes h2{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);margin:32px 0 12px}
.fontes ol{padding-left:20px;font-size:.88rem;color:var(--texto-2)}
.fontes li{margin-bottom:6px}

/* rodapé */
footer{background:var(--grafite);color:rgba(245,240,230,.75);padding:44px 0 calc(44px + env(safe-area-inset-bottom,0px));font-size:.88rem}
.rodape-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-start}
footer img{width:120px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer nav a{color:rgba(245,240,230,.85)}
footer .aviso{margin-top:22px;max-width:80ch;font-size:.82rem;color:rgba(245,240,230,.6)}

/* cookies */
#cookie{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;background:var(--grafite);color:var(--marfim);padding:18px 20px;font-size:.88rem;display:none;gap:14px;align-items:center;z-index:30;box-shadow:0 8px 30px rgba(0,0,0,.25)}
#cookie.show{display:flex;flex-wrap:wrap}
#cookie p{margin:0;flex:1 1 260px}
#cookie button{font:inherit;font-weight:600;padding:9px 16px;border:1px solid var(--marfim);background:transparent;color:var(--marfim);cursor:pointer}
#cookie button[data-consent=yes]{background:var(--marfim);color:var(--grafite)}
.nw{white-space:nowrap}

/* foto de capa do artigo */
.capa-artigo{max-width:calc(920px + 48px);margin:0 auto 48px;padding:0 24px}
.capa-artigo img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (max-width:640px){.capa-artigo{padding:0;margin-bottom:36px}.capa-artigo img{aspect-ratio:4/3;object-position:35% 50%}}