/* Data Openly: estilos do envelope, layout "Observatório" (escuro), seguindo o Manual de Marca v1.0.
   Os dashboards em iframe mantêm o próprio CSS e ficam sobre um fundo claro ("palco"). */
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url(../fonts/montserrat-500.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url(../fonts/montserrat-600.woff2) format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url(../fonts/montserrat-700.woff2) format("woff2"); }

:root {
  /* Paleta oficial (manual, página 06) */
  --azul-profundo: #062C55;
  --azul-data: #0E4F96;
  --azul-ceu: #1E86D2;
  --ciano-onda: #47C3EE;
  --grafite: #1B2E45;
  --ardosia: #55606A;
  --azul-interface: #1A5FB4;
  --nevoa: #F6F8FA;
  --gradiente: linear-gradient(45deg, var(--azul-profundo) 0%, var(--azul-data) 55%, var(--azul-ceu) 100%);

  /* Tema Observatório: fundo derivado do Azul Profundo */
  --noite: #04203F;          /* fundo da página */
  --noite-funda: #021831;    /* rodapé */
  --bloco: #0A2E57;          /* superfícies (blocos, menus) */
  --linha: rgba(71, 195, 238, .16);
  --linha-suave: rgba(255, 255, 255, .1);
  --texto: #C9DCEE;
  --texto-forte: #ffffff;
  --texto-suave: #9FBBD6;
  --texto-fraco: #7FA3C6;
  --link: var(--ciano-onda);
  --raio: 16px;
  --fonte-titulo: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--fonte); font-size: 17px; line-height: 1.6; color: var(--texto); background: var(--noite); }
h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 700; color: var(--texto-forte); letter-spacing: -.005em; text-wrap: balance; }
a { color: var(--link); }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--ciano-onda); outline-offset: 2px; }
img, svg, iframe { max-width: 100%; }
.container { width: 100%; max-width: 860px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.container--largo { max-width: 1240px; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 16px; top: 8px; background: #fff; color: var(--grafite); padding: 8px 12px; z-index: 30; }

/* topo: assinatura branca sobre fundo escuro (manual, página 04) */
.topo { background: rgba(4, 32, 63, .94); border-bottom: 1px solid var(--linha-suave); position: sticky; top: 0; z-index: 15; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.topo .container { max-width: 1240px; }
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.marca { display: flex; align-items: center; text-decoration: none; padding: 6px 0; }
.marca img { display: block; height: 34px; width: auto; }
.navegacao { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.menu { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.menu__link, .secmenu summary { font-family: var(--fonte-titulo); font-size: .88rem; font-weight: 600; color: #D6E8F7; text-decoration: none; padding: 7px 11px; border-radius: 8px; cursor: pointer; }
.menu__link:hover, .secmenu summary:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.secmenu summary { list-style: none; display: flex; align-items: center; gap: 6px; }
.secmenu summary::-webkit-details-marker { display: none; }
.secmenu summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid var(--ciano-onda); border-bottom: 2px solid var(--ciano-onda); transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.secmenu[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.secmenu[open] summary, .secmenu--atual summary { background: rgba(71, 195, 238, .12); color: #fff; }
.submenu { position: absolute; left: 0; right: 0; top: 100%; background: var(--azul-profundo); border-top: 1px solid var(--linha-suave); border-bottom: 1px solid rgba(71, 195, 238, .3); box-shadow: 0 18px 30px rgba(0, 0, 0, .35); }
.submenu__grade { max-width: 1240px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px 28px; padding-block: 22px 24px; align-items: start; }
.submenu__titulo { font-family: var(--fonte-titulo); font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ciano-onda); margin: 0 0 8px; }
.submenu__grupo a { display: block; color: #fff; text-decoration: none; font-size: .95rem; padding: 5px 0; }
.submenu__grupo a:hover { color: var(--ciano-onda); }
.submenu__vazio { margin: 0; color: var(--texto-fraco); font-size: .9rem; max-width: 36ch; }
.submenu__todos { align-self: end; justify-self: start; font-family: var(--fonte-titulo); font-size: .85rem; font-weight: 600; text-decoration: none; }
.idiomas { display: flex; gap: 2px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 2px; }
.idiomas a { font-family: var(--fonte-titulo); font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: #B9D3EA; text-decoration: none; padding: 3px 9px; border-radius: 999px; }
.idiomas a[aria-current] { background: var(--ciano-onda); color: var(--azul-profundo); }
.idiomas a:not([aria-current]):hover { color: #fff; }

/* home: topo com o anel em onda */
.hero { position: relative; overflow: hidden; }
.hero__ondas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; pointer-events: none; }
.hero .container { position: relative; max-width: 1240px; padding-block: 64px 48px; }
.hero__rotulo { font-family: var(--fonte-titulo); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ciano-onda); margin: 0; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); line-height: 1.04; font-weight: 700; margin: 12px 0 16px; max-width: 15ch; }
.hero__texto { max-width: 56ch; color: #B9D3EA; margin: 0; font-size: 1.04rem; }

/* faixa de números em movimento */
.faixa { border-block: 1px solid var(--linha-suave); background: rgba(6, 44, 85, .7); overflow: hidden; }
.faixa__trilho { display: flex; width: max-content; animation: faixa 50s linear infinite; }
.faixa:hover .faixa__trilho, .faixa:focus-within .faixa__trilho { animation-play-state: paused; }
.faixa__grupo { display: flex; gap: 44px; padding: 13px 22px; }
.faixa__item { white-space: nowrap; font-size: .9rem; color: #B9D3EA; text-decoration: none; }
.faixa__item b { font-family: var(--fonte-titulo); font-weight: 700; color: #fff; margin-right: 4px; font-variant-numeric: tabular-nums; }
.faixa__item i { font-style: normal; color: var(--ciano-onda); font-weight: 600; font-size: .78rem; margin-left: 6px; }
.faixa__item:hover b { color: var(--ciano-onda); }
@keyframes faixa { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .faixa { overflow-x: auto; }
  .faixa__trilho { animation: none; }
  .faixa__grupo[aria-hidden] { display: none; }
}

/* seções (Brasil, Mundo...) */
.secao.container { max-width: 1240px; padding-block: 36px 12px; }
.secao__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.secao__nome { font-size: 1.6rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.secao__conta { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ciano-onda); border: 1px solid rgba(71, 195, 238, .35); border-radius: 999px; padding: 3px 10px; }
.secao__vazia { color: var(--texto-fraco); border: 1px dashed rgba(127, 163, 198, .35); border-radius: var(--raio); padding: 28px 20px; margin: 0; text-align: center; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro { font: inherit; font-size: .84rem; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: #B9D3EA; padding: 4px 13px; border-radius: 999px; cursor: pointer; }
.filtro:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.filtro.ativo { background: #fff; color: var(--azul-profundo); border-color: #fff; }

/* blocos de dashboards: grade de 12 colunas, larguras alternadas */
.blocos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bloco { grid-column: span 4; background: var(--bloco); border: 1px solid var(--linha); border-radius: var(--raio); transition: border-color .15s, transform .15s; min-width: 0; }
.bloco--7 { grid-column: span 7; } .bloco--5 { grid-column: span 5; } .bloco--12 { grid-column: span 12; }
.bloco:hover { border-color: rgba(71, 195, 238, .5); transform: translateY(-2px); }
.bloco__link { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 20px; color: inherit; text-decoration: none; }
.bloco__categoria { align-self: flex-start; font-family: var(--fonte-titulo); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ciano-onda); background: rgba(71, 195, 238, .14); padding: 4px 10px; border-radius: 999px; }
.bloco__titulo { font-size: 1.3rem; line-height: 1.25; margin: 2px 0 0; }
.bloco__numero { margin: 0; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.bloco__numero b { font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bloco__numero span { color: var(--texto-suave); font-size: .9rem; max-width: 30ch; }
.bloco__capa { display: block; border-radius: 10px; overflow: hidden; background: var(--nevoa); aspect-ratio: 16 / 9; max-width: 100%; }
.bloco__capa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.bloco__resumo { margin: 0; color: var(--texto-suave); font-size: .92rem; flex: 1; }
.bloco__rodape { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--texto-fraco); border-top: 1px solid var(--linha-suave); padding-top: 12px; }
.bloco__abrir { font-family: var(--fonte-titulo); font-weight: 600; color: var(--ciano-onda); }
.bloco--12 .bloco__link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto 1fr auto; column-gap: 28px; }
.bloco--12 .bloco__capa { grid-column: 2; grid-row: 1 / span 5; align-self: start; }
.bloco--12 .bloco__link > :not(.bloco__capa) { grid-column: 1; }
@media (max-width: 900px) {
  .bloco, .bloco--7, .bloco--5 { grid-column: span 6; }
  .bloco--12 { grid-column: span 12; }
}
@media (max-width: 640px) {
  .blocos > .bloco { grid-column: 1 / -1; }
  .bloco--12 .bloco__link { display: flex; }
}

/* página do dashboard */
.dash__cabecalho { border-bottom: 1px solid var(--linha-suave); background: linear-gradient(180deg, rgba(6, 44, 85, .9), rgba(4, 32, 63, 0)); }
.dash__cabecalho .container { max-width: 1240px; padding-block: 30px 0; }
.trilha { font-size: .85rem; color: var(--texto-fraco); }
.trilha a { color: var(--texto-suave); text-decoration: none; }
.trilha a:hover { color: #fff; }
.dash__linha { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 28px; flex-wrap: wrap; }
.dash__titulos { min-width: 0; flex: 1 1 520px; }
.dash h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.1; margin: 8px 0 10px; }
.dash__resumo { font-size: 1.06rem; color: #B9D3EA; margin: 0; max-width: 70ch; }
.dash__meta { margin: 0; font-size: .84rem; color: var(--texto-suave); text-align: right; }
.dash__numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 24px; }
.dash__numero { background: var(--bloco); border: 1px solid var(--linha); border-radius: 12px; padding: 14px 16px; }
.dash__numero b { display: block; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.dash__numero span { font-size: .84rem; color: var(--texto-suave); }
.abas { display: flex; gap: 4px; margin-top: 22px; overflow-x: auto; }
.abas a { padding: 11px 14px; font-family: var(--fonte-titulo); font-size: .84rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; }
.abas a:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--ciano-onda); }
.abas a:first-child { color: #fff; box-shadow: inset 0 -2px 0 var(--ciano-onda); }
.painel { margin: 24px 0; background: var(--nevoa); border-radius: var(--raio); overflow: hidden; color: var(--grafite); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.painel__frame { display: block; width: 100%; height: 900px; border: 0; background: var(--nevoa); }
.painel__abrir { margin: 0; padding: 10px 16px; border-top: 1px solid #E3E7EC; font-size: .9rem; text-align: right; background: #fff; }
.painel__abrir a { color: var(--azul-interface); }
.painel__idioma { margin: 0; padding: 10px 16px; border-bottom: 1px solid #E3E7EC; font-size: .88rem; color: var(--azul-data); background: #E8F0FB; }
.painel--inline { padding: 16px; }

/* texto editorial */
.texto { max-width: 720px; }
.texto h2 { font-size: 1.45rem; line-height: 1.3; margin: 40px 0 12px; }
.texto h3 { font-size: 1.12rem; margin: 24px 0 8px; }
.texto p, .texto li { margin: 0 0 14px; }
.texto ul, .texto ol { padding-left: 22px; }
.texto li::marker { color: var(--ciano-onda); }
.texto strong { color: #fff; }
.fontes { border-top: 1px solid var(--linha-suave); margin-top: 40px; }
.fonte__licenca { font-size: .9rem; color: var(--texto-suave); }
.citacao { background: var(--bloco); border: 1px solid var(--linha); border-left: 4px solid var(--ciano-onda); border-radius: 8px; padding: 12px 14px; font-size: .92rem; }
.institucional { padding: 40px 0 64px; }
.institucional h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 18px; }

/* anúncios: o AdSense entra num cartão claro para não brigar com o fundo escuro */
.anuncio { margin: 28px 0; text-align: center; min-height: 90px; }
.anuncio__rotulo { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 4px; }
.anuncio ins { background: transparent; }
.anuncio--reserva { display: none; }
body[data-previa] .anuncio--reserva { display: flex; align-items: center; justify-content: center; border: 1.5px dashed rgba(255, 255, 255, .22); border-radius: 10px; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, .03) 10px 20px); }

/* rodapé */
.rodape { background: var(--noite-funda); color: #B9D3EA; padding: 40px 0 20px; margin-top: 40px; font-size: .92rem; border-top: 1px solid var(--linha-suave); }
.rodape .container { max-width: 1240px; }
.rodape a { color: #B9D3EA; text-decoration: none; }
.rodape a:hover { color: #fff; }
.rodape__grade { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rodape__grade nav { display: flex; flex-direction: column; gap: 6px; }
.rodape__logo { display: block; height: 32px; width: auto; margin: 0 0 12px; }
.rodape__grade p { margin: 0; max-width: 420px; }
.rodape__base { border-top: 1px solid var(--linha-suave); margin-top: 28px; padding-top: 16px; font-size: .82rem; color: var(--texto-fraco); }

/* banner de cookies */
.cookies { position: fixed; inset: auto 0 0 0; z-index: 20; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.cookies__caixa { max-width: 860px; margin: 0 auto; background: var(--bloco); color: var(--texto); border: 1px solid rgba(71, 195, 238, .3); border-top: 3px solid var(--ciano-onda); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); padding: 18px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cookies__caixa p { margin: 0; flex: 1 1 380px; font-size: .92rem; }
.cookies__caixa strong { color: #fff; }
.cookies__botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.botao { font: inherit; font-size: .92rem; font-weight: 600; background: var(--ciano-onda); color: var(--azul-profundo); border: 1px solid var(--ciano-onda); border-radius: 8px; padding: 9px 16px; cursor: pointer; }
.botao:hover { background: #7AD5F3; }
.botao--secundario { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.botao--secundario:hover { background: rgba(255, 255, 255, .08); }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .hero .container { padding-block: 40px 32px; }
  .marca img { height: 28px; }
  .topo__linha { justify-content: center; }
  .navegacao { justify-content: center; }
  .dash__meta { text-align: left; }
  .painel__frame { height: 1100px; }
  .container--largo { padding: 0; }
  .painel { border-radius: 0; }
}

/* Manchete da home (campo "manchete" no cadastro) */
.manchete { max-width: 1240px; margin-top: -24px; position: relative; z-index: 2; margin-bottom: 28px; }
.bloco--manchete { border-color: rgba(71, 195, 238, .45); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.bloco--manchete .bloco__titulo { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.bloco--manchete .bloco__link { padding: 26px; }
.bloco--manchete .bloco__link > .bloco__selo { grid-column: 1; }
.bloco--manchete .bloco__categoria { justify-self: start; }
.bloco__selo { align-self: flex-start; justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--fonte-titulo); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: #d6453d; padding: 5px 12px; border-radius: 999px; }
.bloco__selo i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: selo-pulso 1.4s infinite; }
@keyframes selo-pulso { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .bloco__selo i { animation: none; } }

/* botão de tela cheia em destaque no cabeçalho do dashboard */
.dash__barra { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-top: 22px; }
.dash__barra .abas { margin-top: 0; min-width: 0; }
.botao-tela { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--fonte-titulo); font-size: .86rem; font-weight: 600; color: var(--azul-profundo); background: var(--ciano-onda); border-radius: 999px; padding: 9px 16px; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(71, 195, 238, .25); }
.botao-tela:hover { background: #7AD5F3; color: var(--azul-profundo); }
.botao-tela--voltar { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .3); box-shadow: none; margin-bottom: 0; }
.botao-tela--voltar:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* página de tela cheia: topo e rodapé do portal, painel em largura total */
.tela { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.tela__barra { max-width: 1800px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-block: 16px 4px; }
.tela__titulos { min-width: 0; }
.tela__barra h1 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.15; margin: 4px 0 0; }
.painel--tela { max-width: 1800px; margin: 14px auto 0; }
.painel--tela .painel__frame { min-height: calc(100vh - 150px); }
@media (max-width: 600px) {
  .tela { padding-left: 0; padding-right: 0; }
  .tela__barra { padding-left: 16px; padding-right: 16px; }
  .botao-tela { margin-bottom: 4px; }
}