:root{
--color-red-50:#fff0f0;--color-red-100:#ffe1e1;--color-red-300:#ff8c8c;--color-red-600:#ff3131;--color-red-700:#e01f1f;--color-red-750:#c81818;--color-red-800:#b91515;
--color-blue-400:#73c7e3;--color-blue-500:#4db2ec;--color-blue-700:#1f6f9e;
--color-ink-900:#0b0e23;--color-ink-800:#14183c;--color-ink-600:#444444;--color-ink-500:#666666;--color-ink-400:#777777;--color-ink-300:#969696;--color-ink-200:#dddddd;
--color-paper-0:#ffffff;--color-paper-50:#fafafa;--color-paper-100:#fcfcfc;--color-paper-200:#f2f2f2;
--color-border:#ededed;--color-border-strong:#e1e1e1;
--brand-primary:var(--color-red-600);--brand-primary-hover:var(--color-red-700);--brand-primary-tint:var(--color-red-50);
--accent-link:var(--color-blue-500);--accent-link-hover:var(--color-ink-800);
--text-primary:var(--color-ink-900);--text-secondary:var(--color-ink-500);--text-muted:var(--color-ink-300);--text-on-brand:var(--color-paper-0);
--surface-page:var(--color-paper-0);--surface-sunken:var(--color-paper-200);--surface-card:var(--color-paper-0);--surface-inverse:var(--color-ink-800);
--border-default:var(--color-border);--border-input:var(--color-border-strong);
--font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;--font-serif:'Zilla Slab',Georgia,serif;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;
--radius-none:0px;--radius-sm:3px;--radius-md:6px;--radius-pill:999px;
/* Proporção das capas de artigo — igual ao recorte do ImageUploader (1200×628,
   padrão Open Graph). Um lugar só para mudar em todo o site. */
--cover-ratio:1200 / 628;
}
/* Moldura de proporção fixa para capas. aspect-ratio direto no <img> estoura
   o layout dentro de grid/flex (a largura mínima passa a ser altura-natural ×
   proporção); por isso a proporção fica no wrapper e a imagem só preenche. */
.cover-frame{ display:block; width:100%; aspect-ratio:var(--cover-ratio); overflow:hidden; }
.cover-frame > img{ width:100%; height:100%; object-fit:cover; display:block; }
.cover-frame > .img-placeholder{ width:100%; height:100%; }
html[data-theme="dark"]{
--surface-page:#0b0e23;--surface-card:#131639;--surface-sunken:#181b42;
--text-primary:#f4f5fb;--text-secondary:#b9bcd6;--text-muted:#9296ba;
--border-default:#262b52;--border-input:#333a66;--color-ink-200:#3a4172;
}
.site-logo-wrap{ display:flex; align-items:center; }
.site-logo{ height:44px; width:auto; display:block; }
.site-logo--dark{ display:none; }
html[data-theme="dark"] .site-logo--light{ display:none; }
html[data-theme="dark"] .site-logo--dark{ display:block; }
* { box-sizing: border-box; }
body{margin:0;background:var(--surface-page);color:var(--text-primary);}
a{color:var(--accent-link);}
a:hover{color:var(--accent-link-hover);}
::selection{background:var(--brand-primary-tint);color:var(--brand-primary);}

.img-placeholder{
  background:var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--border-input);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.3px;
  overflow:hidden; padding:8px;
}

.btn{ font-family:var(--font-body); font-weight:600; border:none; border-radius:var(--radius-none);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:background-color .2s ease-in-out, color .2s ease-in-out; }
.btn--md{ padding:9px 18px; font-size:14px; line-height:20px; }
.btn--lg{ padding:13px 26px; font-size:15px; line-height:22px; }
.btn--outline{ background:transparent; color:var(--text-primary); box-shadow:inset 0 0 0 1px var(--border-input); }
.btn--outline:hover, .btn--outline:focus-visible{ background:var(--surface-sunken); color:var(--text-primary); }
.btn--dark{ background:var(--color-ink-800); color:var(--text-on-brand); }
.btn--dark:hover, .btn--dark:focus-visible{ background:var(--brand-primary); color:var(--text-on-brand); }
.btn--primary{ background:var(--color-red-750); color:var(--text-on-brand); font-weight:700; }
.btn--primary:hover, .btn--primary:focus-visible{ background:var(--color-red-800); color:var(--text-on-brand); }

.cta-card{ height:100%; box-sizing:border-box; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:30px 24px 34px; }
.cta-card__title{ font-weight:600; margin-bottom:10px; color:#fff; font-family:var(--font-body); font-size:16px; }
.cta-card__desc{ font-size:14px; line-height:21px; color:#9e9e9e; margin-bottom:16px; }

.newsletter__row{ display:flex; }
.newsletter__input{ flex:1; min-height:42px; padding:0 12px; border:1px solid var(--border-input); background:#333; color:#fff; font-size:12px; font-family:var(--font-body); }
.newsletter__submit{ min-width:100px; min-height:42px; border:none; color:#fff; background:var(--color-blue-700); font-size:12px; font-weight:600; cursor:pointer; transition:background-color .2s ease-in-out; font-family:var(--font-body); }
.newsletter__submit:hover{ background:var(--color-ink-800); }
.newsletter__consent{ display:flex; gap:8px; align-items:center; margin-top:10px; cursor:pointer; font-size:11px; color:#9e9e9e; }

.tag{ font-family:var(--font-body); font-size:11px; color:var(--text-secondary); border:1px solid var(--border-default); padding:4px 10px; display:inline-block; text-decoration:none; border-radius:5px; }
.tag:hover{ background:var(--surface-sunken); color:var(--text-primary); border-color:var(--border-input); text-decoration:none; }

.article-body p{ margin:0 0 20px; }
.article-body h2{ font-family:var(--font-display); font-weight:400; font-size:24px; line-height:32px; margin:36px 0 16px; color:var(--text-primary); }
.article-body h3{ font-family:var(--font-display); font-weight:400; font-size:20px; line-height:28px; margin:28px 0 14px; color:var(--text-primary); }
.article-body blockquote{ border-left:3px solid var(--brand-primary); margin:32px 0; padding:4px 0 4px 24px; font-family:var(--font-serif); font-size:22px; line-height:32px; color:var(--text-primary); font-style:italic; }
.article-body img{ max-width:100%; height:auto; }
.article-body a{ color:var(--accent-link); }
.article-body ul, .article-body ol{ margin:0 0 20px; padding-left:24px; color:var(--text-secondary); font-size:16px; line-height:28px; }

.audio-player{ background:transparent; margin-bottom:32px; }
.audio-player__head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-left:4px; }
.audio-player__dot{ width:8px; height:8px; border-radius:50%; background:var(--brand-primary); display:inline-block; flex-shrink:0; }
.audio-player__label{ font-family:var(--font-body); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); }

/* Barra em pílula, cantos totalmente arredondados, fundo levemente elevado
   (não transparente de verdade — precisa contraste pra acessibilidade — mas
   sutil, com sombra suave, adaptando ao tema claro/escuro). */
.audio-player__bar{
  display:flex; align-items:center; gap:12px;
  background:var(--surface-sunken);
  border:1px solid var(--border-default);
  border-radius:var(--radius-pill);
  padding:8px 18px 8px 8px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
html[data-theme="dark"] .audio-player__bar{ box-shadow:0 2px 14px rgba(0,0,0,.35); }

.audio-player__transport{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.audio-player__btn{ width:32px; height:32px; padding:0; border-radius:50%; border:none; background:transparent; color:var(--text-secondary); cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; line-height:0; transition:background-color .15s ease-in-out, color .15s ease-in-out, opacity .15s ease-in-out; }
.audio-player__btn svg{ display:block; width:14px; height:14px; }
.audio-player__btn:hover:not(:disabled){ background:var(--border-default); color:var(--text-primary); }
.audio-player__btn:disabled{ opacity:.35; cursor:default; }
.audio-player__btn--play{ background:var(--brand-primary); color:#fff; }
.audio-player__btn--play svg{ margin-left:1.5px; }
.audio-player__btn--play:hover:not(:disabled){ background:var(--brand-primary-hover); color:#fff; }
.audio-player__btn--play:disabled{ background:var(--brand-primary); }
.audio-player__btn--stop svg{ width:12px; height:12px; }

.audio-player__track{ flex:1; height:4px; background:var(--border-default); position:relative; cursor:pointer; border-radius:2px; }
.audio-player__track:hover{ height:6px; }
.audio-player__progress{ position:absolute; left:0; top:0; bottom:0; background:var(--brand-primary); width:0%; border-radius:2px; pointer-events:none; }
.audio-player__time{ font-family:var(--font-body); font-size:11px; color:var(--text-muted); white-space:nowrap; min-width:84px; text-align:right; }
.audio-player__speed{ flex-shrink:0; min-width:38px; padding:5px 10px; border-radius:999px; border:1px solid var(--border-input); background:transparent; color:var(--text-secondary); font-family:var(--font-body); font-size:11px; font-weight:700; cursor:pointer; transition:background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out; }
.audio-player__speed:hover, .audio-player__speed:focus-visible{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }

.share-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--border-input); color:var(--text-primary); font-family:var(--font-body); font-size:14px; font-weight:700; text-decoration:none; transition:background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out; }
.share-btn:hover, .share-btn:focus-visible{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }

.vote-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--border-input); background:var(--surface-page); color:var(--text-primary); font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer; border-radius:999px; transition:background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out; }
.vote-btn:hover:not(:disabled){ background:var(--surface-sunken); }
.vote-btn.is-active{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }

.tooltip{ position:relative; cursor:pointer; display:inline-block; }
.tooltiptext{ display:none; background-color:rgba(51,51,51,.9); color:#fff; padding:20px; border-radius:8px; z-index:1000; max-width:500px; min-width:300px; width:auto; overflow-y:auto; transition:opacity .3s ease; }
@media (min-width:769px){
  .tooltiptext{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); box-shadow:0 0 10px rgba(0,0,0,.5); }
  .tooltip:hover .tooltiptext{ display:block; }
}
@media (max-width:768px){
  .tooltiptext{ position:fixed !important; top:50% !important; left:50% !important; transform:translate(-50%,-50%) !important; width:95vw !important; height:90vh !important; padding:20px !important; box-sizing:border-box; border-radius:8px !important; overflow-y:auto !important; background-color:rgba(51,51,51,.9) !important; }
  .tooltiptext.show{ display:block !important; }
  .tooltiptext .close-tooltip{ display:block; font-size:28px; text-align:center; cursor:pointer; margin-bottom:10px; color:#fff; }
  .tooltiptext > span:first-of-type{ margin-bottom:12px; display:block; }
}

/* ---- Frontpage layout utilities ---- */
.container{ width:100%; max-width:1280px; margin:0 auto; padding-left:clamp(16px,5vw,40px); padding-right:clamp(16px,5vw,40px); }
.section--hero{ padding-top:clamp(16px,5vw,40px); padding-bottom:clamp(16px,5vw,40px); display:flex; gap:32px; flex-wrap:wrap; }
.section--chips{ padding-top:8px; padding-bottom:40px; }
.section--grid{ padding-top:0; padding-bottom:56px; }
.hero-featured{ flex:1 1 620px; min-width:320px; }
.hero-side{ flex:1 1 340px; min-width:300px; display:flex; flex-direction:column; gap:24px; }
.hero-img{ margin-bottom:20px; }
.article-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:32px 28px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.category-chip{ display:inline-block; padding:8px 16px; border:1px solid var(--border-input); background:var(--surface-page); color:var(--text-primary); text-decoration:none; font-family:var(--font-body); font-size:13px; font-weight:600; transition:background-color .2s ease-in-out, border-color .2s ease-in-out, color .2s ease-in-out; }
.category-chip:hover, .category-chip:focus-visible{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }
/* Selo de categoria: escurece a cor cadastrada (--cat) em 20% para garantir
   contraste AA do texto branco, seja qual for a cor da categoria. */
.cat-badge{ background:color-mix(in oklab, var(--cat, var(--brand-primary)), #000 20%); color:#fff; }
.most-read{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:28px; }
.most-read__item{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; min-width:0; }
.most-read__num{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--brand-primary); line-height:1; }
.most-read__thumb{ display:block; aspect-ratio:var(--cover-ratio); width:100%; overflow:hidden; border-radius:var(--radius-sm); }
.most-read__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.most-read__title{ font-size:15px; line-height:22px; color:var(--text-primary); font-weight:600; }
.img-placeholder--sm{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:var(--surface-sunken); box-shadow:inset 0 0 0 1px var(--border-input); color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.3px; }

/* ---- Editorial: section heads & ticker ---- */
.block-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; border-bottom:2px solid var(--border-default); padding-bottom:10px; }
.block-head__title{ font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.2; text-transform:uppercase; letter-spacing:.5px; color:var(--text-primary); margin:0; position:relative; padding-left:14px; }
.block-head__title::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brand-primary); }
.block-head__link{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; color:var(--accent-link); text-decoration:none; white-space:nowrap; }
.block-head__link:hover{ color:var(--accent-link-hover); }
.block-head--center{ justify-content:center; }
.ticker{ background:var(--color-ink-900); color:#cfd2ea; border-bottom:1px solid var(--border-input); }
.ticker__inner{ display:flex; align-items:center; gap:16px; padding-top:8px; padding-bottom:8px; }
.ticker__label{ flex-shrink:0; display:inline-flex; align-items:center; background:var(--color-red-800); color:#fff; font-family:var(--font-display); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:6px 12px; }
.ticker__display-area{ flex:1; min-width:0; position:relative; height:26px; overflow:hidden; }
.ticker__post{ position:absolute; top:0; left:0; right:0; height:26px; line-height:26px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#d7daf0; font-size:14px; text-decoration:none; opacity:0; transform:translateX(12px); transition:opacity .45s ease, transform .45s ease; }
.ticker__post:hover{ color:#fff; }
.ticker__post.is-active{ opacity:1; transform:translateX(0); }
.ticker__nav{ display:flex; gap:4px; margin-left:auto; flex-shrink:0; }
.ticker__nav-btn{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border-input); background:transparent; color:#cfd2ea; cursor:pointer; font-size:15px; line-height:1; }
.ticker__nav-btn:hover, .ticker__nav-btn:focus-visible{ background:var(--brand-primary); border-color:var(--brand-primary); color:#fff; }
@media (max-width:767px){
  .ticker__nav{ display:none; }
  .topbar-slogan{ text-align:center; }
}

/* ---- Header / responsive nav ---- */
.header-inner{ display:flex; align-items:center; min-height:60px; gap:14px; flex-wrap:wrap; row-gap:8px; padding-top:12px; padding-bottom:12px; }
.nav-toggle{ display:none; width:40px; height:40px; border:1px solid var(--border-input); background:var(--surface-page); color:var(--text-primary); cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; }
.site-nav{ display:flex; gap:4px; margin-left:6px; flex-wrap:wrap; }
.nav-link{ display:inline-block; padding:0 9px; line-height:48px; font-size:12px; font-weight:700; text-transform:uppercase; color:var(--text-primary); text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap; }
.nav-link:hover{ color:var(--text-primary); }
.nav-link.is-active{ border-bottom-color:var(--brand-primary); }
@media (max-width:1199px){
  .nav-toggle{ display:inline-flex; }
  .site-nav{ display:none; width:100%; flex-direction:column; margin-left:0; gap:0; }
  .header-inner.is-open .site-nav{ display:flex; }
  .nav-link{ display:block; white-space:normal; line-height:1.4; padding:12px 0; border-bottom:1px solid var(--border-default); font-size:14px; }
  .nav-link.is-active{ border-bottom-color:var(--brand-primary); }
}

/* ---- Botão flutuante do WhatsApp ---- */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:60;
  width:58px; height:58px; border-radius:16px;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  transition:transform .2s ease-in-out, background-color .2s ease-in-out;
}
.whatsapp-float svg{ width:36px; height:36px; }
.whatsapp-float:hover, .whatsapp-float:focus-visible{ background:#1ebe5b; color:#fff; transform:scale(1.08); }
@media (max-width:480px){
  .whatsapp-float{ right:16px; bottom:16px; width:52px; height:52px; border-radius:14px; }
  .whatsapp-float svg{ width:32px; height:32px; }
}