/* ============================================================================
   obs-sistema.css · sistema visual v10 do Observatório da China (9/10/2026)

   Camada final do site. Organiza hierarquia, espaços e barras sem mexer no
   texto. Regras da casa seguidas aqui (PADRAO-VISUAL.md, raiz do repositório):
   duas famílias (Fraunces para títulos, Work Sans para texto), paleta de doze
   cores, piso de 11px, coluna de texto até 760px, tabela e gráfico na grade.

   A barra preta do topo é a .rpt-nav de /report-nav.css, o mesmo arquivo da
   raiz de observatórios. Este arquivo só posiciona a barra do observatório
   abaixo dela.

   Escala interna (páginas que não são capa de report):
     h1  clamp(36px, 4.2vw, 60px)   peso 300
     h2  clamp(26px, 2.6vw, 36px)   peso 300
     h3  clamp(19px, 1.6vw, 22px)   peso 400
     gravata (deck) clamp(18px, 1.45vw, 21px) serifada
     texto 17px (artigo 18px), apoio 15px, legenda 13px, rótulo 12px

   O carregamento dinâmico de CSS (observatorio-medicao.js) entra depois deste
   arquivo, por isso as regras usam html[data-modelo] como prefixo.
   ========================================================================== */

:root{
  --obs-bar:52px;
  --t-h1:clamp(36px,4.2vw,60px);
  --t-h1-home:clamp(44px,5.4vw,78px);
  --t-h1-capa:clamp(40px,5vw,72px);
  --t-h2:clamp(26px,2.6vw,36px);
  --t-h3:clamp(19px,1.6vw,22px);
  --t-deck:clamp(18px,1.45vw,21px);
  --t-body:17px;
  --sec:clamp(56px,6vw,88px);
  --sec-1:clamp(28px,3.4vw,48px);
  --coluna:760px;
  --header-h:var(--obs-bar);
  --header-h-scrolled:var(--obs-bar);
}
@media(max-width:720px){:root{--obs-bar:50px;--t-body:16.5px}}

/* ------------------------------------------------------------------ barras */
html[data-modelo] body{padding-top:var(--h-site,64px)}
html[data-modelo]{scroll-padding-top:calc(var(--h-site,64px) + var(--obs-bar) + 60px)}
html[data-modelo] .skip{position:absolute;left:-9999px;top:0;z-index:1300;background:var(--preto,#1A1A1A);color:var(--creme,#F6F3E9);padding:10px 14px}
html[data-modelo] .skip:focus{left:12px;top:12px}
html[data-modelo] .rpt-nav{z-index:1100}

html[data-modelo] header.top{position:sticky!important;top:var(--h-site,64px)!important;z-index:1000!important;
  background:rgba(246,243,233,.97)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(26,26,26,.12)!important;box-shadow:none!important;display:block!important;height:auto!important}
html[data-modelo] header.top .topin{height:var(--obs-bar)!important;max-width:var(--largura,1560px)!important;width:100%!important;
  margin:0 auto!important;padding:0 var(--recuo,24px)!important;display:flex!important;align-items:center!important;gap:20px!important;border:0!important}
html[data-modelo] header.top .brand{display:flex!important;align-items:baseline;gap:8px;white-space:nowrap;font-family:var(--serif);flex:0 0 auto}
html[data-modelo] header.top .brand a{text-decoration:none;color:var(--preto,#1A1A1A);min-height:24px;display:inline-flex;align-items:center}
html[data-modelo] header.top .ob-todos{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#61574D!important}
html[data-modelo] header.top .ob-todos:hover{color:var(--bronze,#734F2F)!important}
html[data-modelo] header.top .ob-sep{color:#61574D;font-size:13px}
html[data-modelo] header.top .ob-nome{font-size:19px;font-weight:400;letter-spacing:-.01em}
html[data-modelo] nav.principal{flex:1 1 auto;display:flex!important;justify-content:flex-end;gap:0;min-width:0}
html[data-modelo] nav.principal>.item>button{font-size:11.5px!important;letter-spacing:.12em!important;padding:8px 12px!important;min-height:32px}
html[data-modelo] header.top .util{display:flex!important;align-items:center;gap:6px;flex:0 0 auto}
html[data-modelo] header.top .util button{font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid rgba(26,26,26,.18);color:var(--preto,#1A1A1A);padding:7px 12px;min-height:32px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;border-radius:2px}
html[data-modelo] header.top .util button svg{width:13px;height:13px}
html[data-modelo] #btn-menu{display:none!important}
html[data-modelo] .mega2{top:100%!important}
html[data-modelo] .mega2 .mcol h4{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze,#734F2F);margin:0 0 8px}
html[data-modelo] .subnav{top:calc(var(--h-site,64px) + var(--obs-bar))!important;z-index:900!important}
html[data-modelo] header.top.rolou~.subnav{top:calc(var(--h-site,64px) + var(--obs-bar))!important}
html[data-modelo] .busca-painel,html[data-modelo] .menu-mobile{z-index:1250!important}

@media(max-width:1080px){
  html[data-modelo] nav.principal{display:none!important}
  html[data-modelo] #btn-menu{display:inline-flex!important}
  html[data-modelo] header.top .brand{flex:1 1 auto}
}
@media(max-width:560px){
  html[data-modelo] header.top .ob-todos,html[data-modelo] header.top .ob-sep{display:none}
  html[data-modelo] header.top .ob-nome{font-size:17px}
  html[data-modelo] header.top .util .busca-btn{font-size:0;gap:0;padding:7px 9px}
  html[data-modelo] header.top .util .busca-btn svg{width:15px;height:15px}
  html[data-modelo] header.top .topin{padding:0 16px!important;gap:10px!important}
}

/* menu do celular, em grupos que abrem */
html[data-modelo] .menu-mobile .mm-top{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(26,26,26,.12)}
html[data-modelo] .menu-mobile .mm-marca{font-family:var(--serif);font-size:20px;color:var(--preto,#1A1A1A);text-decoration:none}
html[data-modelo] .menu-mobile .mm-grupo{border-bottom:1px solid rgba(26,26,26,.1)}
html[data-modelo] .menu-mobile .mm-grupo summary{font-family:var(--serif);font-size:22px;padding:14px 0;cursor:pointer;list-style:none;min-height:24px}
html[data-modelo] .menu-mobile .mm-grupo summary::-webkit-details-marker{display:none}
html[data-modelo] .menu-mobile .mm-grupo summary::after{content:"+";float:right;font-family:var(--sans);color:var(--bronze,#734F2F)}
html[data-modelo] .menu-mobile .mm-grupo[open] summary::after{content:"−"}
html[data-modelo] .menu-mobile .mm-links{padding:0 0 14px}
html[data-modelo] .menu-mobile .mm-sub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#61574D;margin:12px 0 4px}
html[data-modelo] .menu-mobile .mm-links a{display:block;padding:7px 0;font-size:16px;color:var(--preto,#1A1A1A);text-decoration:none;min-height:24px}
html[data-modelo] .menu-mobile .mm-pe{display:flex;flex-direction:column;gap:10px;margin:20px 0 32px;font-size:13px}
html[data-modelo] .menu-mobile .mm-pe a{color:#61574D}

/* ---------------------------------------------------------------- rodapé */
html[data-modelo] footer.pe-site{background:var(--preto,#1A1A1A);color:#CFC8BA;padding:clamp(48px,6vw,80px) 0 32px;margin-top:0}
html[data-modelo] footer.pe-site a{color:#E7E3DF}
html[data-modelo] footer.pe-site h4{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C4A67C;margin:0 0 12px;font-weight:500}
html[data-modelo] footer.pe-site .foot-mapa .cols6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px}
html[data-modelo] footer.pe-site .foot-mapa ul{list-style:none;margin:0;padding:0}
html[data-modelo] footer.pe-site .foot-mapa li{margin:0 0 6px;font-size:13px;line-height:1.4}
html[data-modelo] footer.pe-site .foot-mapa a{text-decoration:none}
html[data-modelo] footer.pe-site .foot-mapa a:hover{color:#C4A67C}
html[data-modelo] footer.pe-site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;margin-top:0;padding-top:8px;border-top:0}
html[data-modelo] footer.pe-site .cols li{font-size:13px;color:#9A9083}
html[data-modelo] .pe-logo{width:92px;height:auto;fill:var(--creme,#F6F3E9);display:block}
html[data-modelo] .pe-marca p{font-size:13px;color:#9A9083;max-width:38ch;margin:14px 0 0;line-height:1.55}
html[data-modelo] .pe-marca .pe-links{display:flex;gap:18px;flex-wrap:wrap}
html[data-modelo] .pe-marca .pe-links a{font-size:12px;letter-spacing:.08em;text-transform:lowercase;color:#E7E3DF}
html[data-modelo] footer.pe-site .foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:18px;
  border-top:1px solid rgba(246,243,233,.14);font-size:12px;color:#9A9083}
@media(max-width:900px){html[data-modelo] footer.pe-site .foot-mapa .cols6{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-modelo] footer.pe-site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){html[data-modelo] footer.pe-site .foot-mapa .cols6{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-modelo] footer.pe-site .cols{grid-template-columns:1fr}}

/* ------------------------------------------------- hierarquia: todos os modelos */
html[data-modelo] main h1{font-size:var(--t-h1)!important;line-height:1.06!important;letter-spacing:-.022em!important;font-weight:300!important;max-width:22ch}
html[data-modelo] main h2{font-size:var(--t-h2)!important;line-height:1.14!important;letter-spacing:-.016em!important;font-weight:300!important;max-width:30ch}
html[data-modelo] main h3{font-size:var(--t-h3)!important;line-height:1.25!important;letter-spacing:-.005em!important}
html[data-modelo] main .deck,html[data-modelo] main p.subtitle{font-size:var(--t-deck)!important;line-height:1.45!important;max-width:62ch!important}
html[data-modelo] main .eyebrow{margin-bottom:12px!important}
html[data-modelo] main h1+.deck,html[data-modelo] main h2+.deck,html[data-modelo] main h3+.deck,
html[data-modelo] main h1+p,html[data-modelo] main h2+p{margin-top:14px!important}
html[data-modelo] main .eyebrow+h1,html[data-modelo] main .eyebrow+h2,html[data-modelo] main .eyebrow+h3{margin-top:0!important}

/* serifadas grandes soltas no corpo viram gravata, nunca título */
html[data-modelo] main p[style*="font-family:var(--serif)"],
html[data-modelo] main .thesis p:not(.eyebrow),
html[data-modelo] main .rpt-thesis p:not(.label),
html[data-modelo] main .lede{font-size:var(--t-deck)!important;line-height:1.45!important}

/* números de destaque não competem com o h1 */
html[data-modelo] main .kpi b,html[data-modelo] main .v82-number b,html[data-modelo] main .jkpi b{font-size:clamp(30px,3vw,42px)!important;line-height:1!important}

/* espaços: um ritmo só */
html[data-modelo] main .chapter{padding-top:var(--sec)!important;padding-bottom:var(--sec)!important}
html[data-modelo] main .chapter.first{padding-top:var(--sec-1)!important;padding-bottom:var(--sec)!important}
html[data-modelo] main .chapter.dark-chapter{padding-top:var(--sec)!important;padding-bottom:var(--sec)!important}
html[data-modelo] main .chapter-head{margin-bottom:32px!important}
html[data-modelo] main .two-a,html[data-modelo] main .two{margin-top:32px!important}
html[data-modelo] main .chapter-head .two-a,html[data-modelo] main .reading+.two{margin-top:24px!important}
html[data-modelo] main .thesis{margin-top:32px!important}
html[data-modelo] main .rule-block{margin-top:20px!important;padding-top:16px!important}
html[data-modelo] main .rule-block:first-child{margin-top:0!important}
html[data-modelo] .crumb{padding-top:16px!important;padding-bottom:0!important}

/* texto corrido: coluna e medida */
html[data-modelo] main p.body,html[data-modelo] main .reading p,html[data-modelo] main .study-body>section>p,
html[data-modelo] main .report-content>section>p{font-size:var(--t-body)!important;line-height:1.68!important;max-width:68ch}

/* ------------------------------------------------------------- artigo e caso */
html[data-modelo="artigo"] main .study-body>section,html[data-modelo="ficha"] main .study-body>section{padding-top:56px!important;border-top:0!important}
html[data-modelo="artigo"] main .study-body>section:first-child,html[data-modelo="ficha"] main .study-body>section:first-child{padding-top:8px!important}
html[data-modelo="artigo"] main .study-body h2,html[data-modelo="ficha"] main .study-body h2{font-size:clamp(24px,2.2vw,32px)!important}
html[data-modelo="artigo"] main .study-body p.body{font-size:18px!important;line-height:1.72!important}
html[data-modelo="artigo"] main .study-body .eyebrow+h2{margin-top:0!important}
html[data-modelo="artigo"] main .study-body h2+p,html[data-modelo="ficha"] main .study-body h2+p{margin-top:16px!important}
html[data-modelo] main .study{column-gap:clamp(32px,5vw,72px)}
@media(min-width:1000px){html[data-modelo] main aside.toc{position:sticky;top:calc(var(--h-site,64px) + var(--obs-bar) + 24px);align-self:start}}
html[data-modelo] main .study-body .thesis{margin-top:40px!important}
html[data-modelo] main .art-meta{font-size:13px}

/* -------------------------------------------------------------- território */
html[data-modelo="territorio"] main .territory-hero{align-items:start!important;gap:clamp(32px,5vw,72px)!important}
html[data-modelo="territorio"] main .territory-hero h1{max-width:16ch}
html[data-modelo="territorio"] main .lens-head h2,html[data-modelo="territorio"] main .v82-intro h2{max-width:24ch}

/* ------------------------------------------------------------------ report */
html[data-modelo="report"] body.report-shell .rpt-hero{padding-top:clamp(40px,5vw,72px)!important;padding-bottom:clamp(40px,5vw,72px)!important}
html[data-modelo="report"] body.report-shell .rpt-hero h1{font-size:var(--t-h1-capa)!important;line-height:1.02!important}
html[data-modelo="report"] body.report-shell .rpt-hero p.subtitle{font-size:clamp(19px,1.7vw,24px)!important;margin-top:14px}
html[data-modelo="report"] body.report-shell .rpt-thesis{padding:clamp(40px,5vw,64px) 0!important}
html[data-modelo="report"] body.report-shell .rpt-thesis p:not(.label){font-size:clamp(22px,2.1vw,30px)!important;line-height:1.3!important}
html[data-modelo="report"] body.report-shell .report-layout{padding-top:clamp(40px,5vw,64px)!important}
html[data-modelo="report"] body.report-shell .report-content .level2{padding-top:56px!important}
html[data-modelo="report"] body.report-shell .report-content .level2>h2{font-size:var(--t-h2)!important}
html[data-modelo="report"] body.report-shell .report-content h3{font-size:var(--t-h3)!important}
html[data-modelo="report"] body.report-shell .report-content p,html[data-modelo="report"] body.report-shell .report-content li{font-size:var(--t-body)!important;line-height:1.68!important}
@media(min-width:1000px){html[data-modelo="report"] body.report-shell .report-toc{top:calc(var(--h-site,64px) + var(--obs-bar) + 24px)!important}}
html[data-modelo="report"] body.report-shell .rpt-end h2{font-size:var(--t-h2)!important}

/* ------------------------------------------------------------------- home */
html[data-modelo="home"] main #tese h1{font-size:var(--t-h1-home)!important;max-width:18ch}

/* lugares e pessoas: capas antigas com !important próprio */
html[data-modelo] main .places-study-hero h1,html[data-modelo] main .places-hero h1,html[data-modelo] main .people-study-hero h1{
  font-size:var(--t-h1)!important;line-height:1.06!important;margin-bottom:28px!important;max-width:20ch!important}
html[data-modelo] main .study-chapter-head h2,html[data-modelo] main .places-amano-close h2,html[data-modelo] main .people-chapter-head h2,
html[data-modelo] main .amano-view-band h2{font-size:var(--t-h2)!important;line-height:1.14!important}
html[data-modelo] main .place-card--featured h1,html[data-modelo] main .place-card--featured h3{font-size:clamp(32px,3.4vw,48px)!important}
html[data-modelo] main .place-index-card h3,html[data-modelo] main .places-study-arguments h3{font-size:var(--t-h3)!important}

/* ------------------------------------------------------- leitura de tabela */
html[data-modelo] main .leitura-tabela{max-width:var(--coluna);margin:0 0 20px;padding:14px 18px;background:rgba(115,79,47,.06);border-left:2px solid var(--bronze,#734F2F);font-size:15px;line-height:1.6}
html[data-modelo] main .leitura-tabela b:first-child{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze,#734F2F);display:block;margin-bottom:6px;font-weight:600}

/* ------------------------------------------------------------------ celular */
@media(max-width:720px){
  html[data-modelo] main h1{font-size:clamp(32px,8.6vw,40px)!important}
  html[data-modelo="home"] main #tese h1{font-size:clamp(36px,10vw,46px)!important}
  html[data-modelo] main h2{font-size:clamp(24px,6.4vw,28px)!important}
  html[data-modelo] main .deck,html[data-modelo] main p.subtitle{font-size:18px!important}
  html[data-modelo] main .chapter{padding-top:48px!important;padding-bottom:48px!important}
  html[data-modelo] main .chapter.first{padding-top:20px!important}
  html[data-modelo] main .two-a,html[data-modelo] main .two{margin-top:24px!important}
  html[data-modelo="artigo"] main .study-body>section,html[data-modelo="ficha"] main .study-body>section{padding-top:40px!important}
  html[data-modelo="artigo"] main .study-body p.body{font-size:17px!important}
}

/* ajustes de celular nas barras (9/10) */
html[data-modelo] .rn-site a{white-space:nowrap}
@media(max-width:420px){html[data-modelo] .rpt-nav .rn-in{gap:16px}html[data-modelo] .rn-site{gap:14px}}
@media(max-width:560px){html[data-modelo] header.top .brand .ob-todos,html[data-modelo] header.top .brand .ob-sep{display:none!important}}
html[data-modelo] .menu-mobile{position:fixed!important;inset:0!important;overflow-y:auto!important;background:var(--creme,#F6F3E9)!important;padding:0!important}
html[data-modelo] .menu-mobile .wrap{padding-top:4px!important}
html[data-modelo] .menu-mobile .mm-top{margin-bottom:8px!important}
html[data-modelo] #btn-fechar-menu{font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;background:none;border:1px solid rgba(26,26,26,.18);
  color:var(--preto,#1A1A1A);padding:7px 12px;min-height:32px;border-radius:2px;cursor:pointer}

/* piso de 11px (PADRAO-VISUAL.md): rótulos que vinham de camadas antigas em 9,5px e 10px */
html[data-modelo] main .p2-source,html[data-modelo] main .p2-source a,html[data-modelo] main .state,html[data-modelo] main .lbl,
html[data-modelo] main .micro,html[data-modelo] main .eyebrow,html[data-modelo] main th,html[data-modelo] main .ru-stamp,
html[data-modelo] main .kpi .lbl{font-size:max(11px,1em)!important}
html[data-modelo] main th,html[data-modelo] main .state,html[data-modelo] main .p2-source{font-size:11px!important}
/* alvos do rodapé com 24px */
html[data-modelo] footer.pe-site .foot-mapa a,html[data-modelo] .pe-marca .pe-links a{display:inline-flex;align-items:center;min-height:24px}
html[data-modelo] footer.pe-site .foot-mapa li{margin:0 0 2px}
html[data-modelo] main .co-more summary,html[data-modelo] main .company-analysis span{font-size:11px!important}
html[data-modelo] .rpt-nav .rn-site a,html[data-modelo] .rpt-nav .rn-marca{min-height:24px;display:inline-flex;align-items:center}
html[data-modelo] .pe-marca a,html[data-modelo] .pe-marca .pe-links a,html[data-modelo] .menu-mobile .mm-pe a{display:inline-flex!important;align-items:center;min-height:24px!important}
html[data-modelo] footer.pe-site .foot-bot a{display:inline-flex;align-items:center;min-height:24px}
html[data-modelo] main .chapter:not(.dark-chapter) .flow .st .n{color:var(--bronze,#734F2F)!important}
html[data-modelo] footer.pe-site .foot-mapa{padding-bottom:40px;margin-bottom:40px}
html[data-modelo] body main .leitura-tabela,html[data-modelo="report"] body.report-shell .report-content p.leitura-tabela{font-size:15px!important;line-height:1.6!important}

/* capa de cada report no seu card, em /reports/ (9/10) */
html[data-modelo] .report-card{display:grid!important;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;column-gap:16px;align-content:start}
html[data-modelo] .report-card .rc-capa{grid-column:1/-1;display:block;aspect-ratio:3/2;overflow:hidden;margin:0 0 18px;background:#E9E2D2;border-radius:2px}
html[data-modelo] .report-card .rc-capa img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
html[data-modelo] .report-card:hover .rc-capa img{transform:scale(1.03)}

/* ilustração dos artigos (9/10): capa no artigo, miniatura no índice e nos cards */
html[data-modelo] main .art-capa{margin:40px 0 0;aspect-ratio:21/9;overflow:hidden;border-radius:2px;background:#E9E2D2}
html[data-modelo] main .art-capa img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
html[data-modelo] main ul.arts .arts-capa{display:block;aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:#E9E2D2;margin:0 0 14px}
html[data-modelo] main ul.arts li h2{font-size:clamp(20px,1.6vw,24px)!important;line-height:1.2!important}
html[data-modelo] main ul.arts .arts-capa img,html[data-modelo] main .ac-img{display:block;width:100%;height:100%;object-fit:cover}
html[data-modelo] main a>.ac-img{height:auto;aspect-ratio:16/9;margin:0 0 12px;border-radius:2px;background:#E9E2D2}
@media(max-width:700px){
  html[data-modelo] main .art-capa{aspect-ratio:3/2;margin:28px calc(var(--gutter,32px)/-2) 0;border-radius:0}
}