/* Modelo C · Moderno — claro, cartões arredondados, cara de fintech */

:root {
  --cor-fundo: #f5f7fb;
  --cor-superficie: #ffffff;
  --cor-superficie-2: #eef2f8;
  --cor-texto: #0f172a;
  --cor-suave: #5b6b82;
  --cor-borda: #e2e8f0;
  --cor-destaque: #2563eb;
  --cor-sobre-destaque: #fff;
  --cor-link: #1d4ed8;
  --cor-aberto: #10b981;
  --cor-fechado: #cbd5e1;
  --fonte-texto: "Plus Jakarta Sans", system-ui, sans-serif;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

h1, h2, h3 { letter-spacing: -.02em; }

.barra-topo { background: #0b1b4d; color: #b9c6e8; }
.barra-topo .aberto .mercado-nome { color: #fff; }
.barra-link { color: #8fb3ff; }

.topo { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--cor-borda); }
.topo-dentro { padding-top: 12px; padding-bottom: 6px; }
.logo-marca { color: var(--cor-destaque); }
.logo-nome { font-weight: 800; }
.busca { border-radius: 999px; background: var(--cor-superficie-2); border-color: transparent; }
.menu-lista > li > a, .menu-grupo summary { padding: 10px 14px; margin: 4px 0 8px; border-radius: 999px; color: #334155; font-size: 14.5px; }
.menu-lista > li:first-child > a { padding-left: 14px; margin-left: -14px; }
.menu-lista > li > a:hover, .menu-grupo summary:hover { background: var(--cor-superficie-2); }
.menu-lista a[aria-current] { background: #e8efff; color: var(--cor-destaque); }
.menu-destaque a { background: var(--cor-destaque); color: #fff !important; }
.menu-destaque a:hover, .menu-destaque a[aria-current] { background: #1d4ed8 !important; }
.menu-grupo ul { border-radius: 14px; }

/* página inicial */
.hero-grade { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 400px at 85% 10%, rgba(56, 189, 248, .35), transparent 60%), radial-gradient(700px 400px at 10% 100%, rgba(99, 102, 241, .45), transparent 60%), linear-gradient(135deg, #0b1b4d, #1e3a8a 60%, #1d4ed8); }
.hero-grade-dentro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 72px; }
.selo { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font: 600 13px var(--fonte-ui); margin: 0 0 18px; }
.hero-grade h1 { color: #fff; font-size: clamp(34px, 5vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.hero-grade h1 span { background: linear-gradient(90deg, #7dd3fc, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 18px; color: #d5def7; max-width: 560px; }
.hero-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-botoes .botao { background: #fff; color: #0b1b4d; padding: 14px 22px; }
.hero-botoes .botao-secundario { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.hero-painel { padding: 22px 24px 12px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(8px); }
.hero-painel-titulo { display: flex; justify-content: space-between; margin: 0 0 6px; font-weight: 700; }
.hero-painel-titulo span { font-weight: 400; color: #c7d3f3; font-size: 14px; }
.hero-painel-titulo b { font-family: var(--fonte-mono); color: #fff; }
.hero-painel .mercado { border-color: rgba(255, 255, 255, .15); }
.hero-painel .mercado-status, .hero-painel .mercado-tempo { color: #c7d3f3; }
.hero-painel .aberto .mercado-status { color: #6ee7b7; }

.atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -36px; position: relative; }
.atalhos a { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: var(--raio); background: var(--cor-superficie); box-shadow: var(--sombra); text-decoration: none; color: var(--cor-texto); transition: transform .2s, box-shadow .2s; }
.atalhos a:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15, 23, 42, .12); }
.atalhos b::after { content: " →"; color: var(--cor-destaque); }
.atalhos span { font-size: 14px; color: var(--cor-suave); }
.grade-artigos-inicio { padding-top: 56px; }
.grade-artigos-inicio h2 { font-size: 30px; font-weight: 800; }

/* cartões */
.cartao { background: var(--cor-superficie); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; gap: 0; transition: transform .2s, box-shadow .2s; }
.cartao:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(15, 23, 42, .12); }
.cartao-imagem { border-radius: 0; }
.cartao-texto { padding: 18px 20px 22px; }
.cartao h3 { font-size: 19px; font-weight: 700; }
.sem-imagem { background: linear-gradient(135deg, #1e3a8a, #38bdf8); }
.grade-lista .cartao { padding: 0; border: 0; }
.grade-lista .cartao-texto { padding: 20px 24px; }

/* conteúdo */
.miolo { padding-top: 40px; }
.artigo { background: var(--cor-superficie); border-radius: 20px; padding: 40px 44px; box-shadow: var(--sombra); }
.artigo-cabecalho h1, .titulo-inicial { font-weight: 800; }
.texto { color: #263247; }
.texto h2 { font-weight: 800; }
.sobretitulo { display: inline-block; padding: 5px 10px; border-radius: 999px; background: #e8efff; letter-spacing: .06em; }
.lista-cabecalho { margin-bottom: 24px; }

.caixa { background: var(--cor-superficie); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); }
.caixa h2 { color: var(--cor-texto); text-transform: none; letter-spacing: 0; font-size: 16px; }
.lista-numerada li, .lista-simples li { border-color: var(--cor-borda); }
.lista-numerada li:last-child, .lista-simples li:last-child { border: 0; }
.lista-numerada li::before { color: var(--cor-destaque); font-family: var(--fonte-texto); font-weight: 800; }

.relacionados h2, .comentarios > h2 { font-weight: 800; }
.comentarios { border-top: 0; }
.comentario-texto { background: var(--cor-superficie); padding: 14px 18px; border-radius: 4px 16px 16px 16px; box-shadow: var(--sombra); }
.comentarios-lista.respostas { border-left-color: #c7d6fb; }
.form-comentario { background: var(--cor-superficie); box-shadow: var(--sombra); border-radius: 20px; }
.form-comentario input, .form-comentario textarea { background: var(--cor-superficie-2); border-color: transparent; }
.tags a { background: #e8efff; color: var(--cor-destaque); font-weight: 600; }
.relogio-proprio { background: var(--cor-superficie-2); border: 0; }
.mercados-grande .mercado { box-shadow: var(--sombra); border: 0; }

.rodape { background: #0b1b4d; color: #c7d3f3; }
.rodape .logo-nome { color: #fff; }
.rodape .logo-marca { color: #8fb3ff; }

@media (max-width: 960px) {
  .hero-grade-dentro { grid-template-columns: 1fr; gap: 32px; padding-top: 44px; }
  .atalhos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .topo { position: static; }
  .artigo { padding: 24px 18px; border-radius: 16px; }
  .menu-lista > li > a, .menu-grupo summary { margin: 0; }
  .menu-lista > li:first-child > a { margin-left: 0; }
  .atalhos { margin-top: -24px; gap: 10px; }
  .atalhos a { padding: 14px 16px; }
  .comentario-texto { padding: 12px 14px; }
}