/* ===== Design tokens (paleta da logo) ===== */
:root{
  --bg:#2E44A7;
  --surface:#223892;
  --surface-2:#1B2F86;

  --text:#FFFFFF;
  --muted:#D9E0FF;

  --brand:#FFE81A;
  --brand-2:#FFFFFF;

  --border:rgba(255,255,255,.15);
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 8px 24px rgba(0,0,0,.35);

  --focus-ring: 0 0 0 3px rgba(255,232,26,.35);
}

/* Tema claro */
:root.theme-light{
  --bg:#F3F6FF;
  --surface:#FFFFFF;
  --surface-2:#ECF0FF;

  --text:#0C1A6B;
  --muted:#4B5BB7;

  --brand:#2E44A7;
  --brand-2:#0C1A6B;

  --border:#DBE3FF;
  --shadow:0 6px 18px rgba(46,68,167,.18);

  --focus-ring: 0 0 0 3px rgba(46,68,167,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;max-width:100%;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--text);
  font:500 16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}
img{max-width:100%;height:auto;display:block}

:focus-visible{outline:none; box-shadow: var(--focus-ring); border-radius:10px}

/* util */
.pad{ padding:18px; }
@media (min-width:720px){ .pad{ padding:22px; } }

/* container usa vw para evitar overflow em mobile */
.container{ width:min(1200px, 92vw); margin-inline:auto; }

/* ===== Topbar ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--surface);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.4) blur(8px);
}
.topbar__row{display:flex; align-items:center; gap:16px; padding:12px 0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--brand-2)}
.brand img{height:42px; width:auto; filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}
.brand span{font-weight:700; letter-spacing:.2px}
.brand strong{color:var(--brand)}

.nav{display:flex; gap:18px; margin-left:12px}
.nav a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px}
.nav a:hover, .nav a:focus{background:var(--surface-2); color:var(--brand-2)}
.only-mobile{display:none}

.topbar__tools{margin-left:auto; display:flex; align-items:center; gap:10px}
.search{position:relative; display:flex; gap:8px; align-items:center}
.search input{
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px; padding:10px 12px; width:230px;
}

/* ===== Botões ===== */
.btn{
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active{ transform: translateY(0); }
.btn--icon{width:42px; height:42px; font-size:18px; padding:0}

.btn--brand{
  background:linear-gradient(180deg, #FFE81A, #F6D600);
  color:#0C1A6B; font-weight:900; letter-spacing:.2px;
  border:1px solid rgba(0,0,0,.08);
}
.btn--brand:hover{ filter:brightness(1.05); }

.btn--primary{ background: var(--brand); color:#0C1A6B; font-weight:800; border:1px solid rgba(0,0,0,.06); }
.btn--outline{ background:transparent; color:var(--brand-2); border:1px solid var(--brand-2); }
.btn--sm{ padding:6px 10px; border-radius:10px; font-size:.92rem }

/* Botões de redes (circulares) */
.btn--circle{
  width:42px; height:42px; border-radius:999px; padding:0;
  background:var(--surface);
  color:var(--brand-2);
  border:1px solid var(--border);
  font-weight:800;
  display:grid; place-items:center;
}
.btn--circle:hover{ background:var(--surface-2); }
:root.theme-light .btn--circle{ background:#fff; }

/* ===== Ticker ===== */
.ticker{border-bottom:1px solid var(--border); background:var(--surface-2)}
.ticker .container{display:flex; gap:14px; align-items:center; overflow:hidden}
.ticker__label{ background:var(--brand); color:var(--surface-2); font-weight:800; padding:6px 10px; border-radius:999px; margin:8px 0; z-index: 40; }
.ticker__list{display:flex; gap:24px; list-style:none; padding:0; margin:0; animation:marquee 30s linear infinite; will-change:transform}
.ticker__list li{white-space:nowrap; opacity:.95}
.ticker__list a{color:var(--brand-2); text-decoration:none}
.ticker__list a:hover{ text-decoration:underline }
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}


/* ===== Banners ===== */
.banner{ display:block; margin:16px 0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--surface) }
.banner img{display:block; width:100%; height:auto}
.banner--principal{ margin-top:12px }
.banner--spaced{ margin:22px 0 }
.banners-lateral .banner{ margin:0 0 16px 0 }
.banners-rodape{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width: 980px){ .banners-rodape{ grid-template-columns:1fr } }

/* ===== Hero / Manchete ===== */
.hero{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:22px;
  margin:22px 0;
}

/* Manchete */
.hero__main{
  position: relative;
  min-height: 470px; /* altura um pouco maior p/ alinhar com destaques */
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.hero__link{ position:absolute; inset:0; display:block; text-decoration:none; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__shade{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.65) 100%); }
.hero__content{ position:absolute; left:0; right:0; bottom:0; padding:22px 22px 20px; }
.hero__content .badge{ position: static; background: var(--brand); color:#0C1A6B; margin-bottom: 10px; }
.hero__title{ margin:0 0 8px 0; font-size:clamp(1.4rem, 2.2vw + .6rem, 2.1rem); font-weight:900; line-height:1.2; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45) }
.hero__title a{ color:#fff; text-decoration:none }
.hero__title a:hover{ color:var(--brand) }
.hero__subtitle{ margin:0 0 12px 0; color:#e8ecff; text-shadow:0 1px 6px rgba(0,0,0,.35) }

/* Card de redes (2ª linha, col 1) */
.social-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
  min-height:150px;
}
.social-card h3{ margin:0 0 6px 0; font-size:1rem; color:var(--brand-2) }
.social-card p{ margin:0 0 10px 0; color:var(--muted) }
.social__actions{ display:flex; gap:10px; flex-wrap:wrap }
.social__actions .btn--circle svg{ width:20px; height:20px; display:block }
.social__actions .btn--circle{ gap:0 }

/* Hovers com cores oficiais */
.social__actions .btn--circle[data-net="fb"]:hover{ background:#1877F2; border-color:#1877F2; color:#fff }
.social__actions .btn--circle[data-net="ig"]:hover{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); border-color:transparent; color:#fff }
.social__actions .btn--circle[data-net="wa"]:hover{ background:#25D366; border-color:#25D366; color:#fff }
.social__actions .btn--circle[data-net="yt"]:hover{ background:#FF0000; border-color:#FF0000; color:#fff }
:root.theme-light .social__actions .btn--circle{ background:#fff; color:var(--brand-2) }

/* Card auxiliar (2ª linha, col 2) */
.promo-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 16px;
  min-height:150px; /* mesma do social-card */
  display:flex; align-items:center;
}
.promo{ display:flex; align-items:center; gap:12px; }
.promo__text{ line-height:1.2 }

/* Coluna de destaques (direita) */
.hero__side{display:grid; gap:16px}
.hero__side article{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.hero__side .card__media{ display:block; position:relative }
.hero__side .card__media img{ width:100%; height:160px; object-fit:cover; display:block }
.hero__side .pad{ padding:14px }
.hero__side h4{ margin:0 0 6px 0 }
.hero__side h4 a{ color:var(--brand-2); text-decoration:none; font-weight:800 }
.hero__side h4 a:hover{ color:var(--brand); text-decoration:underline }
:root.theme-light .hero__side h4 a{ color:var(--brand-2) }

/* ===== Sections ===== */
.section{margin:28px 0}
.section__title{margin:0 0 12px 0; font-size:1.3rem}
.grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease }
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.card__media{display:block; position:relative}
.card__media img{width:100%; height:160px; object-fit:cover; display:block}
.badge{ position:absolute; top:10px; left:10px; background:var(--brand); color:var(--surface-2); font-weight:900; padding:6px 10px; border-radius:999px; font-size:.8rem }
.card__body{padding:12px 14px}
.card__title{font-weight:800; font-size:1rem; color:var(--brand-2); text-decoration:none; display:inline-block; margin-bottom:6px}
.card__title:hover{text-decoration:underline; color:var(--brand)}
.card__desc{color:var(--muted); margin:0 0 10px 0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card__meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.chip{font-size:.78rem; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); padding:4px 8px; border-radius:999px}
.link{text-decoration:none}

/* ===== Footer ===== */
.footer{margin-top:40px; border-top:1px solid var(--border); background:var(--surface)}
.footer__row{display:flex; gap:16px; align-items:center; justify-content:space-between; padding:18px 0}
.footer__link{color:var(--muted); text-decoration:none}
.footer__link:hover{text-decoration:underline; color:#fff}

/* ===== Responsivo ===== */
@media (max-width: 1100px){
  .hero__main{ min-height: 450px; }
}
@media (max-width: 980px){
  .grid{grid-template-columns: repeat(3, 1fr)}
  .hero{ grid-template-columns:1fr }
  .hero__main{ min-height: 420px; }
  .hero__side{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 720px){
  .grid{grid-template-columns: repeat(2, 1fr)}
  .only-mobile{display:inline-grid}

  /* menu mobile em overlay, largura da viewport */
  .nav{
    position:fixed; top:60px; left:0; right:0;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:12px 4%;
    display:none; gap:12px; flex-wrap:wrap;
    width:100vw;
  }
  .nav.show{display:flex}
  .nav a{padding:12px}

  .search input{width:160px}

  .hero__main{ min-height: 380px; }
  .hero__side .card__media img{ height:130px; }

  .banners-rodape{ grid-template-columns:1fr } /* banner de rodapé 100% */
}
@media (max-width: 480px){
  .grid{grid-template-columns: 1fr}
  .hero__side{grid-template-columns: 1fr}
}

/* ===========================
   FORM / FIELDS / ALERTS
   =========================== */

/* container genérico do formulário */
.form{
  display: grid;
  gap: 12px;
}

/* rótulos */
.form label{
  color: var(--brand-2);
  font-weight: 700;
  display: block;
  line-height: 1.2;
  margin-bottom: 2px;
}

/* garante espaço entre texto do label e o campo mesmo com <br> */
.form label > .field,
.form label > input.field,
.form label > textarea.field,
.form label > select.field{ display:block; margin-top:6px; }

/* dica/ajuda abaixo dos campos (opcional) */
.form .hint{
  color: var(--muted);
  font-size: .88rem;
  margin-top: 4px;
}

/* campo padrão (input, select, textarea) */
.field{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  appearance: none;
}

/* foco acessível e elegante */
.field:focus{
  border-color: transparent;
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

/* placeholder com bom contraste */
.field::placeholder{
  color: var(--muted);
  opacity: .9;
}

/* textarea */
textarea.field{
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

/* select com setinha embutida */
select.field{
  padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='%23AFC2FF'><path d='M5.5 7.5l4.5 4.5 4.5-4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

/* desabilitado */
.field:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* estado inválido (aplique .invalid via JS se quiser) */
.field.invalid,
.field:invalid:focus{
  border-color: #ff4d4d;
  box-shadow: 0 0 0 3px rgba(255,77,77,.25);
}

/* barra/linha com campos lado a lado */
.toolbar{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.toolbar .field{
  flex: 1 1 260px;
}

/* mensagens */
.alert{
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
}
.alert.success{
  background: rgba(37,211,102,.14);
  border-color: rgba(37,211,102,.35);
  color: #d1ffe3;
}
:root.theme-light .alert.success{
  background: #E9FBF0;
  border-color: #BFEBD0;
  color: #0C6B2E;
}
.alert.error{
  background: rgba(255,0,0,.12);
  border-color: rgba(255,0,0,.35);
  color: #ffd4d4;
}
:root.theme-light .alert.error{
  background: #FCE8E8;
  border-color: #F4C7C7;
  color: #8A1C1C;
}

/* corrige autofill amarelo do Chrome no tema escuro/claro */
input.field:-webkit-autofill,
textarea.field:-webkit-autofill,
select.field:-webkit-autofill{
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ações do form (opcional) */
.form__actions{ display:flex; gap:8px; justify-content:flex-end; }

/* responsivo: quebra a primeira linha (grid 2 colunas) para 1 coluna no mobile */
@media (max-width: 720px){
  .form > div{
    grid-template-columns: 1fr !important;
  }
  .form__actions{ flex-direction:column; align-items:stretch; }
}

/* ===== Links dentro do texto do artigo (CKEditor) ===== */
.article-body { color: var(--text); }

.article-body a{
  color:#AFC2FF;                 /* azul claro visível no dark */
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
.article-body a:hover,
.article-body a:focus{
  color:#FFE81A;                 /* amarelo da marca no hover/focus */
  outline: none;
}
.article-body a:visited{
  color:#D7CCFF;                 /* variação para links já visitados no dark */
}

/* no tema claro, usa a paleta azul */
:root.theme-light .article-body a{
  color:#2E44A7;
}
:root.theme-light .article-body a:hover,
:root.theme-light .article-body a:focus{
  color:#0C1A6B;
}

/* Mobile: esconde o campo de busca e mantém só a lupa */
@media (max-width: 720px){
  .topbar__tools .search input{
    display: none !important;
  }
}