/* =========================================================
   CriAromas — Radar Olfativo
   Depende de tokens.css, site.css e projetos.css
   ========================================================= */

/* ---------- topo ---------- */
.hero-radar{background:var(--color-brand-deep);color:var(--color-cream-on-dark);
   padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.hero-radar .interno{max-width:var(--container);margin:0 auto;
   padding:clamp(4.5rem,9vw,6.5rem) clamp(1.25rem,4vw,3rem) 0;text-align:center}
.hero-radar h1{color:#fff;font-size:var(--text-display);text-wrap:normal;margin-top:.8rem}
.hero-radar h1 em{color:#d9e2c2;font-style:italic}
.hero-radar p{color:var(--color-cream-on-dark);max-width:60ch;margin:1.2rem auto 0}
.hero-radar .eyebrow{color:#cfd7bb}

/* Barra de navegação nas páginas de artigo, que não têm foto de capa.
   O .nav é absoluto por padrão (fica sobre o hero); aqui ele volta ao
   fluxo para que a faixa oliva ganhe a altura dele. */
.nav-escura{background:var(--color-brand-deep);position:relative;min-height:104px}

/* ---------- filtros por categoria ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
   max-width:var(--container);margin:0 auto var(--space-md);padding:0 clamp(1.25rem,4vw,3rem)}
.filtros button{font-family:var(--font-interface);font-size:.82rem;letter-spacing:.02em;
   padding:.55rem 1.1rem;border-radius:var(--radius-pill);border:1px solid var(--color-border);
   background:transparent;color:var(--color-text-soft);cursor:pointer;
   transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}
.filtros button:hover{border-color:var(--color-brand)}
.filtros button.ativo{background:var(--color-brand-deep);border-color:var(--color-brand-deep);color:#fff}

/* A grade de artigos mora no site.css: a home usa a mesma. */

/* ---------- assinatura ---------- */
.assina{display:flex;align-items:center;gap:.75rem;margin-top:1.3rem;padding-top:1.1rem;
   border-top:1px solid var(--color-border)}
.assina img{width:40px;height:40px;border-radius:var(--radius-pill);object-fit:cover;flex:none}
.assina strong{display:block;font-family:var(--font-interface);font-size:.88rem;font-weight:600;
   color:var(--color-text)}
.assina span{display:block;font-family:var(--font-interface);font-size:.75rem;color:var(--color-text-muted);
   margin-top:.1rem}
.assina.grande{justify-content:center;border-top:none;padding-top:0;margin-top:1.8rem}
.assina.grande img{width:48px;height:48px}
.assina.grande div{text-align:left}

/* ---------- página do artigo ---------- */
.artigo{padding-bottom:clamp(3rem,6vw,4.5rem)}
.topo-art{max-width:760px;margin:0 auto;padding:clamp(3.2rem,6vw,4.6rem) clamp(1.25rem,4vw,3rem) 0;
   text-align:center}
.topo-art h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.14;margin-top:.9rem;text-wrap:balance}
.topo-art .linha-fina{margin-top:1.2rem;font-size:1.08rem;line-height:1.65;color:var(--color-text-soft)}

.capa-art{max-width:1040px;margin:clamp(2.4rem,5vw,3.6rem) auto 0;padding:0 clamp(1.25rem,4vw,3rem)}
.capa-art img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-md);display:block}

.corpo-art{max-width:680px;margin:clamp(2.4rem,5vw,3.4rem) auto 0;padding:0 clamp(1.25rem,4vw,3rem)}
.corpo-art p{font-size:1.06rem;line-height:1.78;color:var(--color-text-soft)}
.corpo-art p + p{margin-top:1.25rem}
.corpo-art h2{font-size:1.6rem;line-height:1.25;margin-top:2.6rem;text-wrap:balance}
.corpo-art h2 + p{margin-top:.9rem}
.corpo-art blockquote{margin:2.2rem 0;padding-left:1.6rem;border-left:2px solid var(--color-brand);
   font-family:var(--font-display-italic);font-style:italic;font-size:1.4rem;line-height:1.45;
   color:var(--color-text)}
.corpo-art ul{margin:1.3rem 0 0;padding-left:1.2rem}
.corpo-art li{font-size:1.02rem;line-height:1.7;color:var(--color-text-soft);margin-top:.55rem}
.corpo-art li::marker{color:var(--color-brand)}
.corpo-art figure{margin:2.4rem 0 0}
.corpo-art figure img{width:100%;border-radius:var(--radius-md);display:block}
.corpo-art figcaption{margin-top:.7rem;font-family:var(--font-interface);font-size:.82rem;
   line-height:1.55;color:var(--color-text-muted)}

.rodape-art{max-width:680px;margin:clamp(2.6rem,5vw,3.6rem) auto 0;
   padding:1.8rem clamp(1.25rem,4vw,3rem) 0;border-top:1px solid var(--color-border);text-align:center}
.rodape-art strong{display:block;font-family:var(--font-display);font-size:1.25rem;margin-top:.7rem}
.rodape-art .cargo{display:block;font-family:var(--font-interface);font-size:.85rem;
   color:var(--color-text-muted);margin-top:.25rem}
.rodape-art p{margin-top:.9rem;font-size:.95rem;line-height:1.65;color:var(--color-text-soft);
   max-width:52ch;margin-left:auto;margin-right:auto}