/* ember-site.css — layout de página (Ember não impõe grid). Glue mínimo do site. */
:root { --header-h: 66px; }
/* Cabeçalho: fundo full-bleed, conteúdo alinhado à largura do site (--w-wide) e centralizado. */
.site-header { position: sticky; top: 0; z-index: var(--z-header); padding-inline: max(var(--s-6), calc((100% - var(--w-wide)) / 2)) !important; }
.site-nav a{white-space:nowrap}
@media(min-width:901px) and (max-width:1160px){.site-nav{gap:14px}.site-header .btn-gradient.btn-sm span,.site-header .btn-gradient.btn-sm{font-size:var(--t-xs)}}

/* ---- Artigo ---- */
.article-head { max-width: var(--w-wide); margin: 0 auto; padding: var(--s-7) var(--s-6) 0; }
.article-grid {
  max-width: var(--w-wide); margin: 0 auto; padding: var(--s-7) var(--s-6) var(--s-11);
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; gap: var(--s-8); align-items: start;
}
.article-aside { position: sticky; top: 92px; }
.article-ads .side-card + .side-card { margin-top: var(--s-5); }
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-header); background: transparent; }
.reading-progress i { display: block; height: 100%; width: 0; background: var(--brand-gradient); }
@media (max-width: 1319px) { .article-grid { grid-template-columns: 200px minmax(0,1fr); } .article-ads { display: none; } }
@media (max-width: 1023px) { .article-grid { grid-template-columns: 1fr; } .article-aside { display: none; } }

/* ---- Home / hub ---- */
.page { max-width: var(--w-wide); margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-11); display: grid; gap: var(--s-10); }
.home-cols { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--s-8); align-items: start; }
.home-rail { position: sticky; top: 88px; display: grid; gap: var(--s-5); }
@media (max-width: 1024px) { .home-cols { grid-template-columns: 1fr; } .home-rail { position: static; } }

/* hero de capa da home */
.hero-cover { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; }
.hero-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,14,16,0) 30%, rgba(15,14,16,.55) 60%, rgba(15,14,16,.9) 100%); }
.hero-cover-body { position: relative; z-index: 1; padding: var(--s-9); color: #fff; max-width: 60ch; }
.hero-cover-body .kicker { color: #fff; }
.hero-cover-body h1 { font-size: var(--t-display); font-weight: 800; line-height: 1.05; letter-spacing: var(--tr-tight); margin: var(--s-3) 0; }
.hero-cover-body p { font-size: var(--t-body-lg); opacity: .9; max-width: 52ch; margin-bottom: var(--s-5); }
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* faixa de números (stats) editorial */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.stats-row > div { padding: var(--s-6); border-left: 1px solid var(--line); }
.stats-row > div:first-child { border-left: 0; }
.stats-row .n { font-size: 2rem; font-weight: 800; color: var(--ink-brand); letter-spacing: var(--tr-tight); }
.stats-row .l { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 6px; }
@media (max-width: 720px) { .stats-row { grid-template-columns: repeat(2,1fr); } .stats-row > div:nth-child(3){border-left:0} }

/* modal de aceitação — 18+ e termos (age gate) */
.agegate{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--s-5);background:rgba(15,14,16,.72);backdrop-filter:blur(6px)}
.agegate[hidden]{display:none!important}
.agegate-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--e-4);max-width:480px;width:100%;padding:var(--s-8) var(--s-7);text-align:center}
.agegate-glyph{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--brand-gradient);color:#fff;margin-bottom:var(--s-4)}
.agegate-card h2{font-size:var(--t-h3);font-weight:800;letter-spacing:var(--tr-tight);margin-bottom:var(--s-3)}
.agegate-card p{color:var(--ink-muted);font-size:var(--t-sm);line-height:1.6;margin-bottom:var(--s-5)}
.agegate-card a{color:var(--ink-brand)}
.agegate-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--s-4)}
.agegate-actions .btn{width:100%;justify-content:center}
.agegate-legal{font-size:var(--t-xs)!important;color:var(--ink-subtle)!important;margin:0!important}

/* consentimento (cookies) — estilo Ember */
.consent { position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: var(--z-toast); max-width: 560px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e-3); padding: var(--s-4) var(--s-5); display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.consent p { font-size: var(--t-xs); color: var(--ink-muted); flex: 1; min-width: 220px; line-height: 1.5; }
.consent[hidden]{display:none!important}

/* botão flutuante — rede social sugar */
.ember-float{position:fixed;right:20px;bottom:20px;z-index:var(--z-sticky);display:inline-flex;align-items:center;gap:8px;background:var(--brand-gradient-strong);color:#fff;font-weight:700;font-size:var(--t-sm);padding:13px 22px;border-radius:var(--r-pill);box-shadow:var(--e-brand);text-decoration:none;transition:filter var(--d-fast) var(--ease-out),transform var(--d-instant) var(--ease-out)}
.ember-float:hover{filter:brightness(1.06);animation:none;transform:scale(1.04)}
.ember-float:active{transform:translateY(1px)}
@keyframes emberPulse{0%,100%{box-shadow:var(--e-brand);transform:scale(1)}50%{box-shadow:0 8px 30px rgba(253,41,123,.55),0 0 0 6px rgba(253,41,123,.12);transform:scale(1.045)}}
.ember-float{animation:emberPulse 2.2s var(--ease-in-out) infinite}
@media(prefers-reduced-motion:reduce){.ember-float{animation:none}}
@media(max-width:560px){.ember-float{right:14px;bottom:14px;padding:12px 16px}.ember-float span{display:none}}
/* texto-pilar das categorias (antes/depois do grid) */
.hub-pillar{max-width:var(--w-narrow);font-family:var(--font-read);font-size:var(--t-body-lg);line-height:var(--lh-read);color:var(--ink);margin:0 0 var(--s-8)}
.hub-pillar.after{margin:var(--s-9) 0 0;border-top:1px solid var(--line);padding-top:var(--s-7)}
.hub-pillar h2{font-family:var(--font-ui);font-size:var(--t-h2);font-weight:800;letter-spacing:var(--tr-tight);margin-bottom:var(--s-4)}
.hub-pillar p{margin-bottom:var(--s-4);color:var(--ink-muted)}
.hub-pillar p:first-of-type{color:var(--ink)}

/* ---- Hub: hero cinematográfico como a home; pilar full-width com parágrafo legível ---- */
.hub-hero{min-height:340px;margin-bottom:var(--s-4)}
.hub-hero .crumbs{margin-bottom:12px}
.hub-hero .crumbs a,.hub-hero .crumbs b{color:rgba(255,255,255,.85)}
.page-hub .hub-pillar{max-width:none}
.page-hub .hub-pillar p{max-width:78ch}
.page-hub .hub-pillar .data-table,.page-hub .hub-pillar .dt-wrap,.page-hub .hub-pillar .callout,.page-hub .hub-pillar ol,.page-hub .hub-pillar ul{max-width:none}
/* callout-info (Resposta rápida etc.): branco/neutro com acento da marca, não azul */
.callout.callout-info{background:var(--surface);border-color:var(--line);border-left:3px solid var(--action)}
.callout.callout-info>svg,.callout.callout-info b{color:var(--action)}
.callout.callout-info b{color:var(--ink)}

/* box "O essencial" neutro (branco), não azul */
.essential{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--action);border-radius:var(--r-md);padding:var(--s-5) var(--s-6);display:flex;gap:var(--s-4);align-items:flex-start;margin:0 0 var(--s-7);box-shadow:var(--e-1)}
.essential>svg{color:var(--action);flex:none;margin-top:2px}
.essential b{display:block;font-size:var(--t-h4);margin-bottom:6px}
.essential ul{margin:0;padding-left:20px;display:grid;gap:7px;list-style:disc;color:var(--ink-muted);font-size:var(--t-sm)}
.essential ul li{list-style:disc}

/* ---- Imagem de abertura/corpo: usa cover para nunca esticar (padrão Discover) ---- */
figure.media{aspect-ratio:16/9;overflow:hidden;background:var(--surface-sunk);border-radius:var(--r-lg);margin:0 0 var(--s-6)}
figure.media img{width:100%;height:100%;object-fit:cover}
figure.media figcaption{position:relative;margin-top:8px;font-size:var(--t-xs);color:var(--ink-subtle)}
.prose figure.media{margin:var(--s-6) 0}

.chart-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-6);margin:var(--s-6) 0;overflow-x:auto}

/* performance: renderiza cards/blocos longos sob demanda (CWV) */
.grid-3 .card{content-visibility:auto;contain-intrinsic-size:auto 340px}
.mapa-grid .mapa-card{content-visibility:auto;contain-intrinsic-size:auto 260px}
.hub-pillar.after{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* miniatura do card com proporção fixa (evita CLS) */
.card-thumb{aspect-ratio:1200/630;overflow:hidden;background:var(--surface-sunk)}
.card-thumb img{width:100%;height:100%;object-fit:cover}

/* paginação — botões arredondados, atual preenchido, chevrons */
.pager{gap:8px}
.pager a,.pager span[aria-current]{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-weight:700;font-size:var(--t-sm);text-decoration:none;color:var(--ink);transition:background var(--d-fast)}
.pager a:hover{background:var(--surface-sunk)}
.pager span[aria-current]{background:var(--action-solid);color:var(--on-action);box-shadow:var(--e-brand)}
.pager .pager-nav{color:var(--ink-muted);border:1px solid var(--line)}
.pager .pager-nav:hover{background:var(--surface-sunk);color:var(--ink)}
.pager .gap{min-width:24px;color:var(--ink-subtle);font-weight:700}

/* sumário do artigo (TOC) — card com destaque ativo */
.toc-heading{font-size:var(--t-h4);font-weight:800;letter-spacing:var(--tr-tight);margin-bottom:var(--s-3)}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5) var(--s-5) var(--s-5) var(--s-4);box-shadow:var(--e-1)}
.toc .toc-title{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-subtle);font-weight:700;margin:0 0 10px 12px}
.toc a{display:block;color:var(--ink-muted);text-decoration:none;font-size:var(--t-sm);line-height:1.4;padding:6px 0 6px 12px;border-left:2px solid var(--line);transition:color var(--d-fast),border-color var(--d-fast)}
.toc a:hover{color:var(--ink)}
.toc a.lvl-3{padding-left:26px;font-size:var(--t-xs)}
.toc a.is-current{color:var(--action);font-weight:700;border-left-color:var(--action)}

/* menu hambúrguer / responsivo */
.nav-toggle{display:none;background:transparent;border:0;color:var(--ink);cursor:pointer;padding:8px;border-radius:var(--r-sm);align-items:center}
.nav-toggle:hover{background:var(--surface-sunk)}
@media(max-width:900px){
  .site-nav{position:fixed;top:var(--header-h);left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:var(--s-2) var(--s-4) var(--s-4);box-shadow:var(--e-3);transform:translateY(-150%);transition:transform var(--d-base) var(--ease-out);z-index:var(--z-header);max-height:calc(100vh - var(--header-h));overflow:auto}
  .site-nav.open{transform:translateY(0)}
  .site-nav a{padding:13px 6px;border-bottom:1px solid var(--line)}
  .site-nav a[aria-current="page"]::after{display:none}
  .nav-toggle{display:inline-flex}
  .site-header{gap:var(--s-2);padding:0 var(--s-4)}
  .article-grid{padding:var(--s-6) var(--s-4) var(--s-10)}
  .article-head{padding:var(--s-6) var(--s-4) 0}
  .grid-3{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:901px){.nav-toggle{display:none}}

/* botões dentro do prose/callout: não herdar estilo de link do prose */
.prose a.btn, .callout a.btn, .hub-pillar a.btn { text-decoration: none !important; }
.prose a.btn-primary, .callout a.btn-primary, .hub-pillar a.btn-primary { color: var(--on-action) !important; }
.prose a.btn-primary:hover, .callout a.btn-primary:hover { color: var(--on-action) !important; }
.prose a.btn-gradient, .callout a.btn-gradient { color: var(--on-action) !important; }