/* Panorama Oeste — folha de estilos do site (mobile primeiro).
   Tokens conforme o projeto visual aprovado (azul-petróleo + âmbar, Source Serif 4 + Inter). */

@font-face { font-family: 'Inter'; src: url('../fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('../fonts/source-serif-4-var.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('../fonts/source-serif-4-var-italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  --brand-900: #082A34; --brand-700: #0E3A47; --brand-600: #14566B; --brand-100: #E3EEF1;
  --accent: #F2A900; --accent-ink: #8A5A00;
  --ink: #14181B; --text-2: #3F4950; --text-3: #5E6870;
  --border-strong: #B8C0C6; --border: #D9DEE2; --surface: #F3F5F6; --white: #FFFFFF;
  --hatch-a: #EEF1F3; --hatch-b: #E6EAED;
  --on-dark: #FFFFFF; --on-dark-2: #C9D8DC; --on-dark-3: #A9C0C7; --on-dark-border: #24505D; --on-dark-outline: #5E8794;
  --up: #1B7A3D; --down: #B3261E; --up-on-dark: #7BD89A; --down-on-dark: #FF9E94;
  --success: #1B7A3D; --success-bg: #E8F3EC; --success-ink: #14532A;
  --warning: #8A5A00; --warning-bg: #FFF4D6; --warning-ink: #6B4600;
  --error: #B3261E; --error-bg: #FBECEB; --error-ink: #8C1D17;
  --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(8, 42, 52, .10); --shadow-md: 0 4px 12px rgba(8, 42, 52, .12); --shadow-lg: 0 12px 32px rgba(8, 42, 52, .18);
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: var(--brand-600); }
a:hover { color: var(--brand-700); }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
main:focus { outline: none; }
.i { flex: none; vertical-align: middle; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--brand-700); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; }
.skip-link:focus { top: 8px; color: #fff; }
.muted { color: var(--text-3); }

.container { width: 100%; max-width: 1344px; margin-inline: auto; padding-inline: var(--gutter); }
.page-stack { display: flex; flex-direction: column; gap: 32px; padding-block: 20px 48px; }
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.main-col { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.aside-col { min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.narrow { max-width: 760px; width: 100%; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid transparent; font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.btn--primary { background: var(--brand-700); color: #fff; }
.btn--primary:hover { background: var(--brand-900); color: #fff; }
.btn--secondary { background: #fff; color: var(--brand-700); border-color: var(--brand-700); }
.btn--secondary:hover { background: var(--brand-100); color: var(--brand-700); }
.btn--outline { background: #fff; color: var(--ink); border-color: var(--border-strong); font-size: 14px; padding: 0 14px; }
.btn--outline:hover { border-color: var(--brand-700); color: var(--brand-700); }
.btn--text { background: none; color: var(--brand-600); text-decoration: underline; padding: 0 8px; }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: #E09D00; color: var(--ink); }
.btn--on-dark { background: transparent; color: #fff; border-color: var(--on-dark-outline); font-size: 14px; padding: 0 14px; }
.btn--on-dark:hover { background: var(--brand-700); color: #fff; }
.btn--block { width: 100%; }
.btn--lg { min-height: 48px; font-size: 16px; }
.icon-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; }
.icon-btn--bordered { width: 48px; height: 48px; border: 1px solid var(--border-strong); background: #fff; }
.link-btn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.link-btn:hover { text-decoration: underline; }

/* ---------- Barra de informações ---------- */
.infobar { background: var(--brand-900); color: var(--on-dark); font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.infobar-inner { display: flex; flex-direction: column; gap: 8px; padding-block: 8px 10px; }
.ib-row--time { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ib-date { font-weight: 500; }
.ib-clock { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ib-row--quotes { display: flex; gap: 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.ib-row--quotes::-webkit-scrollbar { display: none; }
.ib-item { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.ib-label, .ib-muted, .ib-note { color: var(--on-dark-2); }
.ib-note { font-size: 12px; }
.ib-weather-icon { color: var(--accent); }
.q-up { color: var(--up-on-dark); font-weight: 600; }
.q-down { color: var(--down-on-dark); font-weight: 600; }
.q-flat { color: var(--on-dark-2); font-weight: 600; }
.ib-weather-desktop { display: none; }
.ib-toggle { display: none; align-items: center; gap: 6px; background: transparent; color: var(--on-dark); border: 1px solid var(--on-dark-outline); border-radius: var(--radius-pill); padding: 4px 10px; min-height: 32px; font-size: 13px; cursor: pointer; }
.ib-toggle[aria-expanded="true"] .i:last-child { transform: rotate(180deg); }
.infobar--collapsible .ib-toggle { display: inline-flex; }
.infobar--collapsible .ib-row--quotes { display: none; }
.infobar--collapsible.is-open .ib-row--quotes { display: flex; }
.ib-attribution { display: none; font-size: 12px; color: var(--on-dark-3); text-align: right; padding-bottom: 8px; }

/* ---------- Cabeçalho ---------- */
.site-header { background: #fff; border-bottom: 1px solid var(--border); }
.masthead { display: none; }
.mobilebar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 8px; background: #fff; box-shadow: var(--shadow-sm); }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.logo:hover { color: var(--ink); }
.logo-text { display: flex; flex-direction: column; gap: 4px; }
.wordmark { font-family: var(--serif); font-size: 34px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.wordmark b { font-weight: 700; }
.wordmark span { font-weight: 400; }
.wordmark--compact { font-size: 22px; }
.wordmark--negative { font-size: 26px; color: #fff; }
.logo--compact { gap: 8px; }
.logo-tagline { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.logo-img { display: block; height: 56px; width: auto; }
.logo-img--compact { height: 36px; }
.logo-img--negative { height: 44px; }
.sections-nav { display: none; }
.search-form { display: flex; }
.search-form input { width: 260px; min-width: 0; height: 44px; border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: 0 14px; font: 400 15px var(--sans); color: var(--ink); background: #fff; }
.search-form button { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--brand-700); background: var(--brand-700); color: #fff; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; cursor: pointer; }
.search-form--drawer { padding: 16px 16px 8px; }
.search-form--drawer input { flex: 1; width: auto; height: 48px; font-size: 16px; }
.search-form--drawer button { width: 48px; height: 48px; }
.search-form--page { margin-top: 16px; max-width: 640px; }
.search-form--page input { flex: 1; width: auto; height: 48px; font-size: 16px; }
.search-form--page .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; min-height: 48px; }
.preview-banner { background: var(--warning-bg); color: var(--warning-ink); border-bottom: 2px solid var(--accent); padding: 10px 16px; display: flex; gap: 8px; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }

/* ---------- Menu em gaveta ---------- */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer[hidden] { display: none; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(8, 42, 52, .55); }
.drawer-panel { position: relative; width: 326px; max-width: 88vw; height: 100%; background: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow-y: auto; animation: drawer-in .2s ease-out; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border); }
.drawer-sections { list-style: none; padding: 0 16px; }
.drawer-sections a { display: flex; align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 600; }
.drawer-sections a[aria-current] { font-weight: 700; }
.drawer-ico { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--tint); color: var(--sec); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.drawer-foot { margin-top: auto; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.drawer-links { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 14px; }
.drawer-links a { display: inline-flex; align-items: center; min-height: 44px; }
body.no-scroll { overflow: hidden; }

/* ---------- Tipografia de cards ---------- */
.chapeu { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); }
.selo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--sec); padding: 6px 8px; border-radius: var(--radius-xs); align-self: flex-start; }
.selo--sponsored, .tag-sponsored { background: var(--accent); color: var(--ink); }
.tag-sponsored { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 6px; border-radius: var(--radius-xs); }
.card-title { font-family: var(--serif); color: var(--ink); }
.card-title a, a.card-title { color: var(--ink); text-decoration: none; }
.card-title a:hover, a.card-title:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; color: var(--ink); }
.t-17 { font-weight: 600; font-size: 17px; line-height: 1.3; }
.t-19 { font-weight: 600; font-size: 19px; line-height: 1.28; }
.t-20 { font-weight: 600; font-size: 20px; line-height: 1.25; }
.t-22 { font-weight: 600; font-size: 20px; line-height: 1.25; }
.t-24 { font-weight: 700; font-size: 21px; line-height: 1.22; }
.t-34 { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.18; letter-spacing: -.015em; }
.t-34 a { color: var(--ink); text-decoration: none; }
.t-34 a:hover { text-decoration: underline; }
.card-sub { font-size: 16px; line-height: 1.45; color: var(--text-2); }
.card-sub--sm { font-size: 15px; }
.meta-time { font-size: 13px; font-weight: 500; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lead { font-size: 18px; line-height: 1.45; color: var(--text-2); max-width: 820px; }
.credit { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }

/* ---------- Fotos ---------- */
.photo { display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); position: relative; }
.photo picture { display: block; width: 100%; height: 100%; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--tint); color: var(--sec); }
.ph .i { opacity: .55; }

/* ---------- Home ---------- */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "headline" "secondaries" "latest"; gap: 32px; }
.headline { grid-area: headline; display: flex; flex-direction: column; gap: 14px; }
.headline-text { display: flex; flex-direction: column; gap: 10px; }
.headline-media { order: -1; display: flex; flex-direction: column; gap: 6px; margin-inline: calc(var(--gutter) * -1); }
.headline-media .photo { border-radius: 0; }
.headline-media .credit { padding-inline: var(--gutter); }
.headline-title { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.12; letter-spacing: -.015em; }
.headline-title a { color: var(--ink); text-decoration: none; }
.headline-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.secondaries { grid-area: secondaries; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.latest { grid-area: latest; }
.card--secondary { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.card--secondary:first-child { padding-top: 0; }
.card--secondary .photo { grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
.card--secondary .card-title { font-size: 19px; font-weight: 600; line-height: 1.28; }

.box-list { display: flex; flex-direction: column; }
.box-title { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 3px solid var(--brand-700); font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.2; }
.box-title .i { color: var(--brand-600); }
.box-title--sec { border-bottom-color: var(--sec); }
.card--compact { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.compact-hour { font-size: 13px; font-weight: 600; color: var(--brand-600); min-width: 44px; padding-top: 1px; font-variant-numeric: tabular-nums; }
.card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card--compact .card-body { gap: 4px; }
.more-link { margin-top: 14px; font-size: 14px; font-weight: 600; }

.section-block { display: flex; flex-direction: column; gap: 20px; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 4px solid var(--sec); padding-top: 12px; }
.block-head h2 a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--sec); text-decoration: none; }
.block-more { font-size: 14px; font-weight: 600; color: var(--sec); }
.block-more:hover { color: var(--sec); }
.block-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 24px; }
.card--block-main { display: flex; flex-direction: column; gap: 10px; }
.block-list { display: flex; flex-direction: column; }
.card--thumb { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.card--thumb .photo { width: 104px; flex: none; align-self: flex-start; }
.block-list > :first-child { padding-top: 0; }
.block-list > :last-child { border-bottom: 0; padding-bottom: 0; }
.card--text { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--border); }

.mostread { list-style: none; }
.mostread li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.mostread-n { font-family: var(--serif); font-weight: 700; font-size: 36px; line-height: 1; color: var(--brand-600); min-width: 28px; font-variant-numeric: tabular-nums; }
.tip-box { background: var(--brand-100); border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.tip-box h2 { font-family: var(--serif); font-weight: 700; font-size: 22px; color: var(--brand-700); }
.tip-box p { font-size: 15px; }
.empty-state { padding: 48px 24px; text-align: center; background: var(--surface); border-radius: var(--radius-md); }
.empty-state h1 { font-family: var(--serif); font-size: 32px; margin-bottom: 8px; }
.empty-note { color: var(--text-3); padding: 16px 0; }

/* ---------- Publicidade ---------- */
.ad { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ad-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ad-box { width: 100%; max-width: var(--ad-mw, var(--ad-w)); aspect-ratio: var(--ad-mw-r, auto); min-height: var(--ad-mh, var(--ad-h)); background: repeating-linear-gradient(135deg, var(--hatch-a) 0 12px, var(--hatch-b) 12px 24px); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ad-box.is-filled { background: none; border: 0; }
.ad-box a, .ad-box picture { display: block; width: 100%; }
.ad-box img { display: block; width: 100%; height: auto; }
.ad--band { background: var(--surface); padding: 16px 0 24px; }
.ad--inline { background: var(--surface); padding: 14px 0 20px; margin: 8px 0 32px; max-width: 720px; }
.ad--desktop-only { display: none; }
.ad--empty { display: none !important; }

/* ---------- Matéria ---------- */
.article { display: flex; flex-direction: column; gap: 18px; }
.breadcrumb { font-size: 13px; color: var(--text-3); }
.article-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.article-title { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.byline { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 14px 0; }
.byline-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.byline-author { font-size: 15px; font-weight: 600; }
.byline-dates { color: var(--text-3); }
.share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share--outline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.share--outline .btn { min-height: 48px; }
.share--final { background: var(--surface); border-radius: var(--radius-md); padding: 14px 16px; }
.share-label { font-size: 15px; font-weight: 600; margin-right: 8px; width: 100%; }
.article-photo { display: flex; flex-direction: column; gap: 8px; margin-inline: calc(var(--gutter) * -1); }
.article-photo .photo { border-radius: 0; }
.article-photo figcaption { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; padding-inline: var(--gutter); }
.caption { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.article-body { max-width: 720px; font-size: 16px; line-height: 1.6; overflow-wrap: break-word; }
.article-body > * + * { margin-top: 24px; }
.article-body h2 { font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.25; margin-top: 32px; }
.article-body h3 { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.3; margin-top: 28px; }
.article-body h4 { font-size: 18px; font-weight: 700; margin-top: 24px; }
.article-body a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 2px; }
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body li + li { margin-top: 8px; }
.article-body blockquote { margin-block: 32px; padding-top: 20px; border-top: 3px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.4; }
.article-body blockquote p + p { margin-top: 12px; }
.article-body figure { display: flex; flex-direction: column; gap: 8px; }
.article-body figure img, .article-body > p > img, .article-body > img { border-radius: var(--radius-sm); width: 100%; height: auto; display: block; }
.article-body figcaption { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.article-body hr { border: 0; border-top: 1px solid var(--border); }
.article-body pre { background: var(--surface); padding: 16px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 14px; }
.article-body .ql-align-center { text-align: center; }
.article-body .ql-align-right { text-align: right; }
.article-body .ql-align-justify { text-align: justify; }
.table-wrap { overflow-x: auto; }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.45; }
.table-wrap th, .table-wrap td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
.table-wrap th { background: var(--surface); }
.embed { position: relative; aspect-ratio: 16 / 9; background: var(--brand-900); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.embed--tall { aspect-ratio: 4 / 5; max-width: 480px; }
.embed--vertical { aspect-ratio: 9 / 16; width: 100%; max-width: 360px; margin-inline: auto; align-self: center; }
.embed--vertical iframe { background: #000; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-play { width: 72px; height: 72px; border-radius: var(--radius-pill); border: 0; background: var(--accent); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.embed-play-icon { width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--ink); margin-left: 5px; }
.embed-note { position: absolute; left: 12px; bottom: 10px; right: 12px; font-size: 13px; color: var(--on-dark-2); text-align: left; }
.correction { background: var(--warning-bg); color: var(--warning-ink); border-radius: var(--radius-md); padding: 16px; max-width: 720px; display: flex; flex-direction: column; gap: 6px; }
.correction strong { display: inline-flex; gap: 6px; align-items: center; }
.ai-note { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; color: var(--text-3); max-width: 720px; }
.article-end { max-width: 720px; display: flex; flex-direction: column; gap: 20px; border-top: 1px solid var(--border); padding-top: 20px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tags-label { font-size: 13px; font-weight: 600; color: var(--text-2); margin-right: 4px; }
.tag { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 0 14px; }
.tag:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.correction-link { font-size: 14px; }
.related { display: flex; flex-direction: column; gap: 20px; margin-top: 16px; }
.related .box-title { font-size: 24px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px; }
.card--related { display: flex; flex-direction: column; gap: 10px; }
.share-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 12px rgba(8, 42, 52, .12); padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: center; }
.share-bar .btn { flex: 1; min-height: 48px; }
.page-post { padding-bottom: 72px; }
.aside-sticky { position: sticky; top: 16px; }

/* ---------- Seção ---------- */
.section-hero { background: var(--tint); border-top: 4px solid var(--sec); }
.section-hero-inner { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; padding-block: 24px; }
.section-hero-title { display: flex; align-items: center; gap: 16px; }
.section-hero-icon { width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--sec); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.section-hero-icon .i { width: 30px; height: 30px; }
.section-hero h1 { font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.section-hero-tag { font-weight: 400; }
.section-hero p { margin-top: 4px; font-size: 16px; color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--sec); background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.pill:hover { color: var(--ink); background: var(--tint); }
.pill.is-active { background: var(--sec); color: #fff; }
.section-featured { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.section-featured-media { flex: 3 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.section-featured-text { flex: 2 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.list-section { display: flex; flex-direction: column; }
.card--list-large { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.card--list-large .photo { width: 104px; flex: none; align-self: flex-start; }
.card--list-large .card-sub { display: none; }

.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.page-num.is-current { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.pagination-gap { color: var(--text-3); padding: 0 4px; }
.pagination-info { margin-top: 10px; font-size: 14px; color: var(--text-3); }

/* ---------- Páginas, formulários e avisos ---------- */
.page-head { display: flex; flex-direction: column; gap: 8px; }
.page-head h1 { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.page-head p { font-size: 17px; color: var(--text-2); }
.search-count { margin-top: 8px; }
.institutional .article-body h2 { margin-top: 32px; }
.form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 15px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 14px; font: 400 16px var(--sans); color: var(--ink); background: #fff; }
.field textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.req { color: var(--error); }
.hint { font-size: 14px; color: var(--text-3); }
.field-error { font-size: 14px; color: var(--error-ink); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--brand-700); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius-md); margin-top: 16px; }
.notice h2 { font-size: 18px; margin-bottom: 4px; }
.notice p + p { margin-top: 6px; }
.notice--success { background: var(--success-bg); color: var(--success-ink); }
.notice--error { background: var(--error-bg); color: var(--error-ink); }

/* ---------- Rodapé ---------- */
.site-footer { background: var(--brand-900); color: #fff; border-top: 4px solid var(--accent); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; padding-block: 40px 24px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand p { font-size: 14px; color: var(--on-dark-2); }
.logo--negative { color: #fff; }
.logo--negative:hover { color: #fff; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.site-footer .btn--accent { color: var(--ink); margin-top: 14px; }
.site-footer .btn--accent:hover { text-decoration: none; color: var(--ink); }
.footer-contact .muted { color: var(--on-dark-2); font-size: 14px; }
.footer-correction { margin-top: 10px; font-size: 14px; }
.footer-bottom { border-top: 1px solid var(--on-dark-border); padding-block: 16px 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 13px; color: var(--on-dark-2); }
.page-post .site-footer { padding-bottom: 8px; }

/* ---------- Aviso de cookies (LGPD) ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-radius: var(--radius-md) var(--radius-md) 0 0; box-shadow: var(--shadow-lg); padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; max-height: 90vh; overflow-y: auto; }
.cookie-banner[hidden] { display: none; }
.cookie-main { display: flex; gap: 12px; }
.cookie-icon { color: var(--brand-600); flex: none; }
.cookie-banner h2 { font-family: var(--serif); font-size: 20px; margin-bottom: 4px; }
.cookie-banner p { font-size: 15px; line-height: 1.45; }
.cookie-prefs { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface); border-radius: var(--radius-md); }
.cookie-prefs[hidden] { display: none; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cookie-actions [hidden] { display: none; }

/* ---------- Telas maiores ---------- */
@media (min-width: 600px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share--outline { display: flex; }
  .share--outline .btn { min-height: 44px; }
  .share-label { width: auto; }
}


@media (min-width: 768px) {
  :root { --gutter: 24px; }
  .page-stack { gap: 48px; padding-block: 24px 64px; }
  .masthead { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 20px; }
  .masthead-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .mobilebar { display: none; }
  .sections-nav { display: block; margin-top: 14px; }
  .sections-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 6px; }
  .sections-nav a { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
  .sections-nav a:hover { border-bottom-color: var(--border-strong); }
  .sections-nav .nav-icon { color: var(--sec); }
  .sections-nav a.is-active { font-weight: 700; border-bottom-color: var(--sec, var(--accent)); }
  .sections-nav a.nav-home.is-active { border-bottom-color: var(--accent); }
  .ib-attribution { display: block; }
  .headline-media { margin-inline: 0; }
  .headline-media .photo { border-radius: var(--radius-sm); }
  .headline-media .credit { padding-inline: 0; }
  .secondaries { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; border-top: 1px solid var(--border); padding-top: 32px; }
  .card--secondary { display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0; }
  .card--secondary .photo { aspect-ratio: 3 / 2; }
  .card--secondary .card-title { font-size: 24px; font-weight: 700; line-height: 1.2; }
  .card--thumb .photo { width: 128px; }
  .article-photo { margin-inline: 0; }
  .article-photo .photo { border-radius: var(--radius-sm); }
  .article-photo figcaption { padding-inline: 0; }
  .card--list-large { gap: 20px; padding: 20px 0; }
  .card--list-large .photo { width: 200px; }
  .card--list-large .card-sub { display: block; }
  .t-22 { font-size: 22px; }
  .byline { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
  .section-hero-inner { padding-block: 28px; }
  .section-hero-icon { width: 72px; height: 72px; }
  .section-hero-icon .i { width: 38px; height: 38px; }
  .cookie-banner { left: 16px; right: 16px; bottom: 16px; max-width: 760px; margin-inline: auto; border-radius: var(--radius-md); padding: 20px 24px; }
}

@media (min-width: 1024px) {
  .home-top { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "headline latest" "secondaries secondaries"; column-gap: 32px; row-gap: 32px; }
  .headline-media { order: 0; margin-top: 6px; }
  .headline-title { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.02em; }
  .lead { font-size: 20px; }
  .with-aside { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
  .main-col { gap: 48px; }
  .article-wrap { gap: 48px; }
  .ad--desktop-only { display: flex; }
  .ad-box { max-width: var(--ad-w); min-height: var(--ad-h); }
  .aside-col--sticky { position: sticky; top: 16px; }
  .ib-weather-desktop { display: inline-flex; }
  .ib-weather-mobile { display: none; }
  .infobar-inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 28px; padding-block: 10px 4px; }
  .ib-row--time { justify-content: flex-start; gap: 6px 18px; }
  .ib-row--quotes, .infobar--collapsible .ib-row--quotes { display: flex; flex-wrap: wrap; gap: 6px 22px; overflow: visible; margin: 0; padding: 0; }
  .infobar--collapsible .ib-toggle { display: none; }
  .article-title { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.12; }
  .article-body { font-size: 17px; line-height: 1.65; }
  .article-body h2 { font-size: 28px; }
  .article-body h3 { font-size: 22px; }
  .article-body blockquote { font-size: 26px; }
  .block-head h2 a { font-size: 28px; }
  .t-24 { font-size: 24px; line-height: 1.2; }
  .t-34 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; }
  .section-hero h1 { font-size: 48px; line-height: 1.05; }
  .page-head h1 { font-size: 44px; }
  .share-bar { display: none; }
  .page-post { padding-bottom: 0; }
}

@media (min-width: 1200px) {
  :root { --gutter: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .infobar, .site-header, .drawer, .ad, .share, .share-bar, .aside-col, .related, .site-footer, .cookie-banner { display: none !important; }
  .with-aside { display: block; }
  .article-body { font-size: 12pt; }
}

/* ---------- Painel do Oeste (home, ao lado do bloco de Política) ---------- */
.block-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* Painel na lateral (>=1024px, lateral ao lado) ou após Política (empilhado). */
.po-slot--aside { display: none; }
@media (min-width: 1024px) {
  .po-slot--aside { display: block; }
  .po-slot--main { display: none; }
}
.painel-oeste { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border-radius: var(--radius-md); padding: 16px 18px 14px; }
.painel-oeste .box-title { font-size: 20px; padding-bottom: 8px; }
.painel-oeste .box-title .i { color: var(--accent-ink); }
.po-group { display: flex; flex-direction: column; }
.po-head { display: flex; align-items: center; gap: 6px; font: 700 12px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-600); padding-bottom: 4px; }
.po-head .i { color: var(--accent); }
.po-list { list-style: none; }
.po-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; line-height: 1.3; }
.po-row:last-child { border-bottom: 0; }
.po-label { display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
.po-label small { font-size: 12px; color: var(--text-3); }
.po-weather .po-label { flex-direction: row; align-items: center; gap: 8px; }
.po-weather .po-label > span { display: flex; flex-direction: column; }
.po-wicon { color: var(--accent); }
.po-val { display: flex; align-items: baseline; gap: 8px; flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-val strong { font-weight: 700; color: var(--brand-700); }
.po-max { font-weight: 700; color: var(--brand-700); font-size: 16px; }
.po-min { color: var(--text-3); }
.po-chg { font-size: 12px; font-weight: 600; }
.po-up { color: var(--up); } .po-down { color: var(--down); } .po-flat { color: var(--text-3); }
.po-src { font-size: 11px; color: var(--text-3); padding-top: 4px; }

/* ---------- Horóscopo (lateral da home e páginas dos signos) ---------- */
.aside-col--sticky:has(.horoscopo-box) { position: static; }
.horoscopo-box { display: flex; flex-direction: column; gap: 12px; }
.hb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 3px solid var(--brand-700); }
.hb-head .box-title { border-bottom: 0; }
.hb-sub { font-size: 13px; color: var(--text-3); }
.hb-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hb-grid a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: var(--radius-md); text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 600; text-align: center; transition: background-color .15s; }
.hb-grid a:hover, .hb-grid a:focus-visible { background: var(--brand-100); color: var(--brand-700); }
.hb-grid .zodiac { color: var(--accent); }
.hb-grid a:hover .zodiac { color: var(--accent-ink); }
.hb-src { font-size: 11px; color: var(--text-3); text-align: right; }
.hb-src a { color: var(--text-3); }
.hz-head { display: flex; align-items: center; gap: 16px; }
.hz-icon { display: inline-flex; padding: 12px; border-radius: 50%; background: var(--brand-700); color: var(--accent); }
.hz-scores { display: grid; gap: 10px; margin: 0; padding: 16px 18px; background: var(--surface); border-radius: var(--radius-md); }
.hz-scores dt { font-weight: 700; color: var(--brand-700); }
.hz-scores dd { margin: 2px 0 0; font-size: 15px; color: var(--text-2); }
.hz-stars { color: var(--accent); letter-spacing: 1px; margin-left: 4px; }
.hz-off { color: var(--border-strong); }
.hz-src, .hz-empty { font-size: 14px; color: var(--text-3); }
.hz-others { display: flex; flex-direction: column; gap: 12px; }
.hb-grid--wide { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.hz-list { list-style: none; display: flex; flex-direction: column; }
.hz-list li { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.hz-list-sign { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.hz-list-sign .zodiac { color: var(--accent); }
.hz-list-sign span { display: flex; flex-direction: column; }
.hz-list-sign small { color: var(--text-3); font-size: 13px; }
.hz-list p { font-size: 15px; color: var(--text-2); }

/* ---------- Brasileirão Série A (lateral da home, abaixo do Horóscopo) ---------- */
.br-box { display: flex; flex-direction: column; gap: 10px; }
.br-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.br-table th, .br-table td { padding: 5px 3px; text-align: center; border-bottom: 1px solid var(--border); }
.br-table thead th { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.br-table abbr { text-decoration: none; }
.br-table .br-pos { width: 24px; font-weight: 700; color: var(--text-2); box-shadow: inset 3px 0 0 transparent; }
.br-table .br-team { text-align: left; width: 100%; max-width: 0; font-weight: 600; color: var(--ink); }
.br-tn { display: flex; align-items: center; gap: 6px; min-width: 0; }
.br-table .br-team img { flex: none; width: 18px; height: 18px; object-fit: contain; }
.br-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-table .br-pts { font-weight: 700; color: var(--brand-700); }
.br-table tbody tr:last-child > * { border-bottom: 0; }
.br-g4 .br-pos { box-shadow: inset 3px 0 0 var(--up); }
.br-g6 .br-pos { box-shadow: inset 3px 0 0 #7FB98F; }
.br-z4 .br-pos { box-shadow: inset 3px 0 0 var(--down); }
.br-z4 { background: #FDF5F4; }
.br-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11px; color: var(--text-3); }
.br-key { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 4px; }
.br-key:first-child { margin-left: 0; }
.br-key--g4 { background: var(--up); } .br-key--g6 { background: #7FB98F; } .br-key--z4 { background: var(--down); }

/* ---------- Blocos extras da lateral (loterias, indicadores, combustíveis, telefones, editáveis) ---------- */
.lx-box { display: flex; flex-direction: column; gap: 10px; }
.lx-box .box-title { font-size: 20px; }
.lx-lot { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.lx-lot:last-of-type { border-bottom: 0; }
.lx-lot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.lx-lot-head span { font-size: 12px; color: var(--text-3); }
.lx-balls { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.lx-balls li { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-700); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lx-balls--many li { width: 24px; height: 24px; font-size: 11px; background: var(--brand-600); }
.lx-note { font-size: 12px; color: var(--text-2); }
.lx-note strong { color: var(--accent-ink); }
.lx-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.lx-table th, .lx-table td { padding: 6px 4px; border-bottom: 1px solid var(--border); text-align: right; }
.lx-table th[scope="row"], .lx-table thead th:first-child { text-align: left; font-weight: 600; }
.lx-table thead th { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.lx-table td { font-weight: 700; color: var(--brand-700); }
.lx-table tbody tr:last-child > * { border-bottom: 0; }
.lx-list { list-style: none; display: flex; flex-direction: column; }
.lx-list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.lx-list li:last-child { border-bottom: 0; }
.lx-list span { color: var(--text-2); font-size: 13px; }
.lx-tel { font-weight: 700; color: var(--brand-700); white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }
.lx-tel:hover { text-decoration: underline; }