/* Blog do site: identidade v2 (base creme, blocos cacau e areia, um tangerina por tela) */
:root {
  --creme: #FBF6EE; --areia: #E8DCC8; --cacau: #3E2A21; --nogueira: #8A6246; --seixo: #A8A29A;
  --tangerina-escura: #C4490F; --tangerina-clara: #F07A3D; --cacau-elevado: #4F372C;
  --fundo: var(--creme); --fundo-suave: var(--areia); --texto: var(--cacau); --texto-suave: var(--nogueira);
  --destaque: var(--tangerina-escura); --sobre-destaque: var(--creme); --linha: #D8C9AF; --madeira: var(--nogueira);
  --noite: var(--cacau); --noite-suave: var(--cacau-elevado); --sobre-noite: var(--areia); --sobre-noite-suave: var(--seixo); --destaque-noite: var(--tangerina-clara);
  --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px;
  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* sobre areia, nogueira pequena não passa no contraste: o apoio vira cacau */
.pilar, .fases div { --texto-suave: var(--cacau); --madeira: var(--cacau); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.65; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
b, strong { font-weight: 500; }
h1, h2, h3 { font-weight: 300; line-height: 1.1; letter-spacing: -.015em; margin: 0; text-wrap: balance; text-transform: lowercase; }
h1 { font-size: clamp(36px, 5.6vw, 60px); }
h2 { font-size: clamp(28px, 3.6vw, 36px); line-height: 1.18; }
h3 { font-size: 24px; line-height: 1.2; font-weight: 400; }
:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; border-radius: 4px; }
.cta :focus-visible { outline-color: var(--sobre-noite); }
.ponto { color: var(--destaque); }
.etiqueta { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--madeira); font-weight: 500; }
.miolo { max-width: 1160px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

.botao { display: inline-flex; align-items: center; justify-content: center; background: var(--destaque); color: var(--sobre-destaque); border-radius: var(--radius-pill); padding: 14px 28px; font-weight: 500; font-size: 16px; letter-spacing: .03em; text-transform: lowercase; text-decoration: none; min-height: 52px; transition: filter .15s; }
.botao:hover { filter: brightness(1.07); }
.botao.peq { padding: 10px 18px; min-height: 44px; font-size: 15px; }
.botao.sec { background: transparent; color: var(--texto); border: 1.5px solid var(--texto); }
.setinha { text-decoration: none; font-weight: 500; color: var(--texto); display: inline-flex; gap: 8px; align-items: center; }
.setinha::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url(../assets/marca/icone-seta.svg) center / contain no-repeat; mask: url(../assets/marca/icone-seta.svg) center / contain no-repeat; transition: transform .2s; }
.setinha:hover::after { transform: translateX(4px); }

/* topo, igual ao da landing */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--fundo); border-bottom: 1px solid var(--linha); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 41; background: var(--fundo); }
.topo .miolo { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--texto); }
.marca .logo { height: 46px; width: auto; display: block; }
.marca span { font-weight: 300; font-size: 21px; white-space: nowrap; }
.marca span i { font-style: normal; color: var(--destaque); }
.topo nav { display: none; gap: 30px; font-size: 16px; }
.topo nav a { text-decoration: none; color: var(--texto-suave); }
.topo nav a:hover, .topo nav a[aria-current] { color: var(--texto); }
.topo nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--destaque); }
@media (min-width: 900px) { .topo nav { display: flex; } }
@media (max-width: 420px) { .marca .logo { height: 44px; } .botao.peq { padding: 10px 14px; } }

/* lista do blog */
.abre { padding-block: clamp(48px, 8vw, 96px) 40px; display: grid; gap: 22px; max-width: 46em; }
.abre p { font-size: clamp(19px, 2vw, 21px); color: var(--texto-suave); max-width: 36em; }
.pilar { display: grid; gap: 28px; background: var(--fundo-suave); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 48px); text-decoration: none; }
@media (min-width: 860px) { .pilar { grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; } }
.pilar .txt { display: grid; gap: 14px; min-width: 0; }
.pilar p { color: var(--texto-suave); }
.pilar:hover h2 { text-decoration: underline; text-decoration-color: var(--destaque); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.pilar ul, .topicos { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 17px; }
.pilar li, .topicos li { padding-left: 22px; position: relative; }
.pilar li::before, .topicos li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--nogueira); }
.lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 0 48px; padding-block: 40px clamp(64px, 10vw, 112px); }
.item { display: grid; gap: 10px; padding-block: 28px; border-top: 1px solid var(--linha); text-decoration: none; align-content: start; }
.item p { color: var(--texto-suave); font-size: 16px; }
.item:hover h3 { color: var(--destaque); }

/* artigo */
.artigo { max-width: 700px; margin: 0 auto; padding-block: clamp(40px, 7vw, 80px) clamp(64px, 10vw, 112px); }
.artigo > header { display: grid; gap: 18px; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--linha); }
.artigo > header p { font-size: clamp(19px, 2vw, 21px); color: var(--texto-suave); }
.assina { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--texto-suave); }
.assina img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.voltar { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--texto-suave); }
.voltar:hover { color: var(--destaque); }
.corpo { display: grid; gap: 22px; }
.corpo ul, .corpo ol { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.corpo li::marker { color: var(--nogueira); font-weight: 500; }
.corpo h2 { margin-top: 22px; }
.corpo a { text-decoration-color: var(--nogueira); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.corpo strong { font-weight: 500; }
.citacao { font-size: clamp(28px, 3vw, 32px); line-height: 1.25; font-weight: 300; letter-spacing: -.01em; padding-block: 10px; }
.fases { display: grid; gap: 12px; }
@media (min-width: 640px) { .fases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fases div { background: var(--fundo-suave); border-radius: var(--radius-md); padding: 18px; display: grid; gap: 6px; align-content: start; font-size: 16px; line-height: 1.5; }
.fases b { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--madeira); }
.foto-artigo { border-radius: var(--radius-lg); aspect-ratio: 16 / 10; width: 100%; object-fit: cover; object-position: 50% 30%; }
.leia { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--linha); display: grid; gap: 14px; }
.leia ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.leia a { text-decoration: none; font-weight: 500; }
.leia a:hover { color: var(--destaque); }
.leia a { display: inline-flex; gap: 8px; align-items: baseline; }
.leia a::before { content: ""; flex: none; width: 16px; height: 16px; align-self: center; background: var(--texto); -webkit-mask: url(../assets/marca/icone-seta.svg) center / contain no-repeat; mask: url(../assets/marca/icone-seta.svg) center / contain no-repeat; }
.cta { margin-top: 48px; background: var(--noite); color: var(--sobre-noite); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px); display: grid; gap: 18px; justify-items: start; }
.cta h2 { color: var(--sobre-noite); }
.cta p { color: var(--sobre-noite-suave); }
.cta .botao { background: var(--destaque-noite); color: var(--noite); }
.cta .setinha { color: var(--sobre-noite); }
.cta .acoes { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.autora { margin-top: 48px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; font-size: 16px; color: var(--texto-suave); }
.autora img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.autora b { color: var(--texto); font-weight: 500; display: block; font-size: 18px; }

.rodape { border-top: 1px solid var(--linha); padding-block: 40px 56px; }
.rodape .divisor { width: 240px; height: auto; flex-basis: 100%; }
.rodape .miolo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; font-size: 15px; color: var(--texto-suave); }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--destaque); }
@media (prefers-reduced-motion: reduce) { .setinha::after, .botao { transition: none; } }

/* seção para empresas (Studio Combinado) */
.empresas { border-top: 1.5px solid var(--linha); padding-block: clamp(48px, 7vw, 80px) 0; margin-bottom: clamp(48px, 8vw, 96px); display: grid; gap: 8px; }
.empresas .txt { display: grid; gap: 16px; max-width: 40em; }
.empresas .txt p { color: var(--texto-suave); font-size: 19px; }
.empresas .lista { padding-block: 24px 0; }

/* temas: os 5 pontos do teste e da Jornada */
.temas { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 4px; font-size: 16px; color: var(--texto-suave); }
.temas a { text-decoration: none; color: var(--texto); font-weight: 500; }
.temas a:hover { color: var(--destaque); }
.tema { padding-top: clamp(40px, 6vw, 64px); display: grid; gap: 4px; }
.tema .txt { display: grid; gap: 12px; }
.tema .lista { padding-block: 16px 0; }

/* menu no celular: os links descem para uma segunda linha */
@media (max-width: 899px) {
  .topo .miolo { height: auto; flex-wrap: wrap; padding-top: 12px; row-gap: 6px; }
  .topo nav { display: flex; flex-wrap: wrap; order: 3; width: 100%; gap: 4px 18px; white-space: nowrap; font-size: 15px; padding-bottom: 12px; scrollbar-width: none; }
  .topo nav::-webkit-scrollbar { display: none; }
}