/* ==========================================================================
   TEMA "BRASIL + VERMELHO" — o Bora Virar depois da eleição
   Azul-bandeira (estrutura), verde e amarelo (acentos) e o vermelho do PT
   (ação). Mesma estrutura de navegação; muda cor, hero e movimento.
   Carregado DEPOIS de app.css: só redefine cores e acrescenta acabamento.
   ========================================================================== */

/* ---------- 1) Cores (claro) ---------- */
:root {
  --bg: #f7f6f1; --surface: #ffffff; --ink: #0c1a3d; --muted: #566180; --line: #e6e5dc; --line2: #cfcdbf;
  --red: #e30613; --red-ink: #b8000f; --red-soft: #ffe9eb; --gold: #f5b400;
  --br-green: #009c3b; --br-yellow: #ffdf00; --br-blue: #0a2a6b; --br-blue-deep: #06174a;
  --radius: 22px;
  --shadow: 0 1px 2px rgba(10, 30, 90, .06), 0 14px 34px rgba(10, 30, 90, .11);
  --grad: linear-gradient(135deg, #ff2f3f 0%, #e30613 55%, #c20010 100%);
  --hero-bg: linear-gradient(135deg, #06174a 0%, #0a2a6b 55%, #0d3a8c 100%);
  --hero-ink: #fff; --hero-muted: rgba(255, 255, 255, .9);
  --cry-shadow: #e30613; --cry-accent: #ffdf00;
  --hero-btn-bg: #ffdf00; --hero-btn-ink: #0a2a6b;
  --badge-bg: #e30613; --badge-ring: #fff;
  --logo-bg: #e30613; --logo-ink: #fff; --wm-fill: #e30613; --wm-edge: #ffdf00;
}
/* ---------- 2) Cores (escuro) ---------- */
:root[data-theme="dark"] {
  --bg: #06122e; --surface: #0d1d44; --ink: #eef3ff; --muted: #9fb2dc; --line: #1b3066; --line2: #2a4590;
  --red-soft: #3a1020; --red-ink: #ff6b76;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 38px rgba(0, 0, 0, .5);
  --hero-bg: linear-gradient(135deg, #040e2b 0%, #071a4a 55%, #0a2a6b 100%);
  --logo-bg: #fff; --logo-ink: #e30613; --wm-fill: #ffffff; --wm-edge: #e30613;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #06122e; --surface: #0d1d44; --ink: #eef3ff; --muted: #9fb2dc; --line: #1b3066; --line2: #2a4590;
    --red-soft: #3a1020; --red-ink: #ff6b76;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 38px rgba(0, 0, 0, .5);
    --hero-bg: linear-gradient(135deg, #040e2b 0%, #071a4a 55%, #0a2a6b 100%);
    --logo-bg: #fff; --logo-ink: #e30613; --wm-fill: #ffffff; --wm-edge: #e30613;
  }
}

/* ---------- 3) Cabeçalho: vidro + fio nas cores do Brasil + botão de tema ---------- */
body { background: var(--bg); }
.top { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(18px); border-bottom: 0; box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 80%, transparent); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg, #009c3b 0 25%, #ffdf00 25% 50%, #0a2a6b 50% 75%, #e30613 75% 100%); }
.top-in .top-cta { margin-left: auto; }
.top-in .theme-btn { margin-left: 0; }
.top .theme-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; border: 1.5px solid var(--line2); background: var(--surface); color: var(--ink); transition: transform .25s, border-color .2s, color .2s; }
.top .theme-btn:hover { border-color: var(--red); color: var(--red-ink); transform: rotate(20deg); }
.top .theme-btn .ic { width: 19px; height: 19px; }
.brand .wm { color: var(--wm-fill); -webkit-text-fill-color: var(--wm-fill); background: none; filter: none; text-shadow: 2px 2px 0 var(--wm-edge); }

/* ---------- 4) Logo: a balança vira (azul ↔ vermelho) ---------- */
.face { font-size: 0 !important; color: transparent !important; padding: 0 !important; background-repeat: no-repeat; background-position: center; background-size: 74%; }
.f22 { background-color: #0a2a6b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffdf00' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 10v40M21 52h22M13 19l38 7M13 19l-7 18h14zM51 26l-7 18h14z'/%3E%3C/svg%3E"), linear-gradient(135deg, #0d3a8c, #06174a); background-size: 76%, 100%; }
.f13 { background-color: var(--red); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 10v40M21 52h22M13 26l38-7M13 26l-7 18h14zM51 19l-7 18h14z'/%3E%3C/svg%3E"), var(--grad); background-size: 76%, 100%; }

/* ---------- 5) HERO novo ---------- */
.hero { isolation: isolate; padding: 30px 0 36px; background: var(--hero-bg); }
.hero-tiles { display: none; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(4, 14, 43, .94) 0%, rgba(4, 14, 43, .78) 36%, rgba(4, 14, 43, 0) 66%); }
.hero .wrap { z-index: 2; }
.hero-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-art i { position: absolute; display: block; }
/* faixa verde inclinada */
.hero-art .s1 { left: 38%; top: -40%; width: 38%; height: 190%; background: linear-gradient(165deg, #00b85f 0%, #007f3a 100%); transform: skewX(-17deg); border-radius: 46px; animation: bv-drift 18s ease-in-out infinite alternate; }
/* losango amarelo */
.hero-art .s2 { right: -4%; top: -38%; width: 430px; height: 430px; background: linear-gradient(135deg, #ffe93a, #ffc400); transform: rotate(45deg); border-radius: 46px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); animation: bv-spin 26s ease-in-out infinite alternate; }
/* círculo azul com a faixa branca (a esfera) */
.hero-art .s3 { right: 9%; bottom: -120px; width: 270px; height: 270px; border-radius: 50%; background: radial-gradient(circle at 30% 28%, #1747a8, #0a2a6b 62%); box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .92), 0 24px 60px rgba(0, 0, 0, .4); animation: bv-float 11s ease-in-out infinite alternate; }
/* talho vermelho */
.hero-art .s4 { display: none; }
.hero-art .s4-old { left: 14%; bottom: 8px; width: 78%; height: 46px; background: linear-gradient(90deg, #e30613, #ff3b3b 70%, #e30613); transform: rotate(-4deg); border-radius: 6px; opacity: .96; box-shadow: 0 10px 30px rgba(227, 6, 19, .45); animation: bv-slide 14s ease-in-out infinite alternate; }
/* pontinhos de grade */
.hero-art .s5 { inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .20) 1.3px, transparent 1.6px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 70%); mask-image: linear-gradient(90deg, transparent 20%, #000 70%); }
@keyframes bv-drift { from { transform: skewX(-17deg) translateX(0); } to { transform: skewX(-17deg) translateX(40px); } }
@keyframes bv-spin { from { transform: rotate(45deg) scale(1); } to { transform: rotate(52deg) scale(1.06); } }
@keyframes bv-float { from { transform: translateY(0); } to { transform: translateY(-26px); } }
@keyframes bv-slide { from { transform: rotate(-4deg) translateX(0); } to { transform: rotate(-4deg) translateX(-30px); } }

.eyebrow { background: #ffdf00; color: #0a2a6b; border-color: transparent; font-weight: 850; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.hero-field { border-color: transparent; box-shadow: 0 18px 44px rgba(2, 8, 30, .5), inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.hf-text { color: #0a2a6b; }
.hf-link { color: #009c3b; }
.hf-btn { background: var(--grad); box-shadow: 0 8px 20px rgba(227, 6, 19, .5); }
.hero .lead { text-shadow: 0 1px 14px rgba(4, 14, 43, .9); }
.hero-box { background: linear-gradient(145deg, #0d3a8c, #06174a) !important; color: #fff !important; box-shadow: 0 22px 50px rgba(2, 8, 30, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.hero-box b { color: #fff; }
.hero-box span { opacity: .9; }
.hero-box i { background: #ffdf00; color: #0a2a6b; }
.hero-also small { color: #fff; }
.partner-chip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); backdrop-filter: blur(6px); }


/* ---------- 6) Botões e filtros ---------- */
.btn-primary { background: var(--grad); border-color: transparent; box-shadow: 0 10px 26px rgba(227, 6, 19, .32); }
.btn-primary:hover { background: var(--grad); filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(227, 6, 19, .42); }
.btn-ghost:hover { border-color: var(--br-blue); color: var(--br-blue); }
:root[data-theme="dark"] .btn-ghost:hover { border-color: #fff; color: #fff; }
.chip { transition: all .18s; }
.chip:hover { border-color: var(--br-green); color: #00742c; transform: translateY(-1px); }
.chip.on { background: linear-gradient(135deg, #00b85f, #008a45); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(0, 156, 59, .30); }
.seg { background: color-mix(in srgb, var(--line) 85%, transparent); }
.seg-btn.on { background: linear-gradient(135deg, #0d3a8c, #0a2a6b); color: #fff; box-shadow: 0 8px 20px rgba(10, 42, 107, .35); }

/* ---------- 7) Cartões que flutuam ---------- */
.card { border-color: color-mix(in srgb, var(--line) 85%, transparent); transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s, border-color .35s; }
.card:hover { transform: translateY(-7px); box-shadow: 0 26px 56px rgba(8, 30, 100, .22); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); }
.badge { background: rgba(4, 14, 43, .66); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .16); }
.title { font-weight: 780; letter-spacing: -.01em; }
.cat { background: #e8f0ff; color: #0a2a6b; }
:root[data-theme="dark"] .cat { background: #16295a; color: #b6caff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cat { background: #16295a; color: #b6caff; } }
.card-more { background: var(--hero-bg); }
.cm-ic, .cm-b { color: #0a2a6b; }

/* ---------- 8) Faixa de chamada e rodapé ---------- */
.cta-band { background: var(--hero-bg); overflow: hidden; }
.cta-band::before { content: "" !important; width: 360px; height: 360px; right: -60px; bottom: -150px; background: linear-gradient(135deg, #ffe93a, #ffc400); border-radius: 46px; transform: rotate(45deg); opacity: .9; font: inherit; }
.cta-band .cta-kicker { color: #ffdf00; }
.btn-cta { background: var(--grad); color: #fff; box-shadow: 0 14px 34px rgba(227, 6, 19, .45); }
.partner-band { background: var(--surface); }

/* ---------- 9) Movimento respeita quem prefere menos animação ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-art i { animation: none !important; }
  .card:hover { transform: none; }
}

/* ---------- 10) Celular ---------- */
@media (max-width: 760px) {
  .hero { padding-bottom: 30px; }
  .hero::before { background: linear-gradient(90deg, rgba(4, 14, 43, .86) 0%, rgba(4, 14, 43, .5) 58%, rgba(4, 14, 43, .12) 100%); }
  .hero-art .s1 { left: 48%; width: 60%; }
  .hero-art .s2 { right: -22%; top: -22%; width: 300px; height: 300px; }
  .hero-art .s3 { right: -8%; bottom: -110px; width: 200px; height: 200px; }
  .hero-art .s4 { left: 6%; width: 92%; }
  .top .theme-btn { width: 38px; height: 38px; }
}

/* ---------- 11) Modo escuro: cabeçalho no azul (e não no vermelho do tema antigo) ---------- */
:root[data-theme="dark"] .top { background: color-mix(in srgb, var(--bg) 84%, transparent); }
:root[data-theme="dark"] .top .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 26px rgba(227, 6, 19, .38); }
:root[data-theme="dark"] .top .btn-primary:hover { background: var(--grad); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .top { background: color-mix(in srgb, var(--bg) 84%, transparent); }
  :root:not([data-theme="light"]) .top .btn-primary { background: var(--grad); color: #fff; box-shadow: 0 10px 26px rgba(227, 6, 19, .38); }
  :root:not([data-theme="light"]) .top .btn-primary:hover { background: var(--grad); }
}

/* ---------- 12) Título em destaque vermelho ---------- */
.hero .cry, .hero .cry .v { color: #ff2f3f; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 6px 6px 0 #04102f, 0 14px 40px rgba(227, 6, 19, .55); }
@media (max-width: 760px) { .hero .cry, .hero .cry .v { -webkit-text-stroke: 2px #fff; text-shadow: 4px 4px 0 #04102f; } }

/* ---------- 13) Selo "Campanha 2026" no alto da imagem, à direita ---------- */
.badge-campaign { left: auto; right: 10px; top: 10px; max-width: none; background: #ffdf00; color: #0a2a6b; border: 0; backdrop-filter: none; font-weight: 850; letter-spacing: .02em; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); z-index: 4; }
.item-media .badge-campaign { right: 12px; top: 12px; font-size: .8rem; z-index: 6; }

/* ---------- 14) Nome no cabeçalho só aparece depois de rolar (no alto, o hero já mostra o BORA VIRAR!) ---------- */
.brand .wm { max-width: 260px; overflow: hidden; white-space: nowrap; transition: opacity .25s, max-width .3s, margin .3s; }
body.has-hero:not(.scrolled) .brand .wm { opacity: 0; max-width: 0; margin-left: -10px; pointer-events: none; }
.brand { gap: 10px; }

/* ---------- 15) Conteúdo do hero centralizado na vertical ---------- */
.hero { padding: 34px 0; }
.hero .wrap { min-height: 250px; display: flex; align-items: center; }
.hero .hero-text { width: 100%; }
@media (max-width: 760px) { .hero { padding: 30px 0; } .hero .wrap { min-height: 0; } }

/* ---------- 16) Claro: nome no cabeçalho com o mesmo vermelho do hero, sem o amarelo ---------- */
:root[data-theme="light"] .brand .wm { color: #ff2f3f; -webkit-text-fill-color: #ff2f3f; text-shadow: 2px 2px 0 #04102f; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .brand .wm { color: #ff2f3f; -webkit-text-fill-color: #ff2f3f; text-shadow: 2px 2px 0 #04102f; } }
/* campo de cadastro agora fica abaixo do texto */
.hero .lead { margin: 14px 0 0; }
.hero .hero-field { margin: 16px 0 0; }