/* Home pública. Nada de style="" no template: a CSP (style-src 'self') o descarta. */

:root{
  --vd-azul:#1351B4;
  --vd-azul-escuro:#0F3F91;
  --vd-tinta:#131A22;
  --vd-cinza:#55606E;
  --vd-borda:#DCE3ED;
  --vd-fundo-alt:#F4F6FA;
  --bs-primary:#1351B4;
  --bs-primary-rgb:19,81,180;
}

body{ font-family:'Fira Sans',system-ui,sans-serif; }

/* A home não carrega mais o Bootstrap (60 KB para usar .container): a caixa
   responsiva é esta, com as mesmas larguras do .container que ela substitui. */
.landing-container{ width:100%; max-width:1320px; margin:0 auto; padding:0 16px; box-sizing:border-box; }
@media (max-width:1399.98px){ .landing-container{ max-width:1140px; } }
@media (max-width:1199.98px){ .landing-container{ max-width:960px; } }
/* ---------- vídeo "como funciona" ---------- */
.landing-video{ max-width:960px; margin:36px auto 0; }
.landing-video__title{ font-size:17px; font-weight:700; margin:0 0 12px; color:var(--vd-tinta); }
.landing-video__player{
  display:block; width:100%; height:auto; aspect-ratio:16/9; background:var(--vd-tinta);
  border:1px solid var(--vd-borda); border-radius:14px; box-shadow:0 .5rem 1rem rgba(19,81,180,.12);
}
.landing-video__player:focus-visible{ outline:3px solid var(--vd-azul); outline-offset:3px; }
.landing-video figcaption{ font-size:13px; color:var(--vd-cinza); margin-top:10px; }
.landing-video__transcricao{ margin-top:10px; font-size:14px; color:var(--vd-tinta); }
.landing-video__transcricao summary{ cursor:pointer; font-weight:600; color:var(--vd-azul); }
.landing-video__transcricao summary:focus-visible{ outline:3px solid var(--vd-azul); outline-offset:3px; }
.landing-video__transcricao p{ margin:8px 0 0; line-height:1.5; color:var(--vd-cinza); }
.landing-video__acao{ margin:16px 0 0; }

@media (max-width:991.98px){ .landing-container{ max-width:720px; } }
@media (max-width:767.98px){ .landing-container{ max-width:none; } }
.landing-main{ display:block; }

/* ---------- botões ---------- */
.landing-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 22px; border-radius:9px;
  font-size:15.5px; font-weight:600; text-decoration:none;
  border:1.5px solid transparent; transition:background-color .15s, color .15s;
}
.landing-btn:hover,.landing-btn:focus-visible{ text-decoration:none; }
.landing-btn--light{ background:#fff; color:var(--vd-azul); }
.landing-btn--light:hover{ background:#E8EFFB; color:var(--vd-azul-escuro); }
.landing-btn--ghost{ border-color:#fff; color:#fff; }
.landing-btn--ghost:hover{ background:rgba(255,255,255,.14); color:#fff; }
.landing-btn--primary{ background:var(--vd-azul); color:#fff; }
.landing-btn--primary:hover{ background:var(--vd-azul-escuro); color:#fff; }
.landing-btn--outline{ border-color:var(--vd-azul); color:var(--vd-azul); }
.landing-btn--outline:hover{ background:var(--vd-azul); color:#fff; }
.landing-btn:focus-visible{ outline:3px solid var(--vd-azul); outline-offset:3px; }
/* botão de volta à área logada: escondido sem sessão, vira o primeiro CTA com ela */
.landing-btn--logado{ display:none; }
body.vd-authenticated .landing-btn--logado{ display:inline-flex; }
.landing-btn--light:focus-visible,.landing-btn--ghost:focus-visible{ outline-color:#fff; }

/* ---------- hero ---------- */
.landing-hero{ background:var(--vd-azul); color:#fff; padding:56px 0; }
.landing-hero__inner{ display:flex; align-items:center; gap:56px; }
.landing-hero__text{ flex:1 1 auto; min-width:0; }
.landing-hero__badge{
  display:inline-flex; align-items:center; gap:7px; background:#fff; color:var(--vd-azul);
  font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; margin-bottom:18px;
}
.landing-hero__title{ font-size:44px; line-height:1.1; font-weight:700; letter-spacing:-.8px; margin:0 0 16px; }
.landing-hero__lead{ font-size:17.5px; line-height:1.5; color:#E4EDFB; max-width:560px; margin:0 0 24px; }
.landing-hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }
.landing-hero__logo{ width:178px; height:178px; object-fit:contain; flex:0 0 auto; }

/* ---------- panorama ---------- */
.landing-panorama{ background:#fff; border-bottom:1px solid var(--vd-borda); padding:28px 0; }
.landing-panorama__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:8px; margin-bottom:16px;
}
.landing-panorama__title{ font-size:17px; font-weight:700; margin:0; color:var(--vd-tinta); }
.landing-panorama__meta{ font-size:13px; color:var(--vd-cinza); margin:0; }
.landing-panorama__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }

.landing-stat{
  display:flex; flex-direction:column; justify-content:space-between; gap:10px;
  border:1px solid var(--vd-borda); border-radius:12px; padding:16px 18px; min-height:134px;
}
.landing-stat--vazio{ border-style:dashed; background:#FAFBFD; }
.landing-stat__label{ font-size:13px; font-weight:600; color:var(--vd-cinza); }
.landing-stat__value{ font-size:38px; font-weight:700; line-height:1; color:var(--vd-tinta); }
.landing-stat--vazio .landing-stat__value{ color:#8A93A0; }
.landing-stat__note{ font-size:12.5px; color:var(--vd-cinza); }
.landing-stat__aviso{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  background:#FDF3D8; color:#7A4A05; font-size:12px; font-weight:600;
  padding:4px 9px; border-radius:6px;
}
.landing-stat--link{
  border-color:var(--vd-azul); background:#F2F6FD; text-decoration:none; color:var(--vd-tinta);
}
.landing-stat--link:hover,.landing-stat--link:focus-visible{ background:#E8EFFB; text-decoration:none; }
.landing-stat--link .landing-stat__label{ color:var(--vd-azul); }
.landing-stat__cta-text{ font-size:16.5px; font-weight:600; line-height:1.35; }
.landing-stat__cta{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--vd-azul); }
.landing-stat--link:focus-visible{ outline:3px solid var(--vd-azul); outline-offset:3px; }

/* ---------- seções ---------- */
.landing-section{ padding:44px 0; }
.landing-section--alt{ background:var(--vd-fundo-alt); border-top:1px solid var(--vd-borda); border-bottom:1px solid var(--vd-borda); }
.landing-section__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:22px;
}
.landing-section__title{ font-size:26px; font-weight:700; letter-spacing:-.4px; margin:0 0 6px; color:var(--vd-tinta); }
.landing-section__title--sm{ font-size:22px; margin-bottom:22px; }
.landing-section__sub{ font-size:14.5px; color:var(--vd-cinza); margin:0; }

/* ---------- ferramentas ---------- */
.landing-tools{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.landing-tool{
  display:flex; flex-direction:column; gap:10px;
  background:#fff; border:1px solid var(--vd-borda); border-radius:14px; padding:22px;
  text-decoration:none; color:var(--vd-tinta);
  transition:transform .18s, box-shadow .18s;
}
a.landing-tool:hover{ transform:translateY(-3px); box-shadow:0 .5rem 1rem rgba(19,81,180,.12); text-decoration:none; color:var(--vd-tinta); }
a.landing-tool:focus-visible{ outline:3px solid var(--vd-azul); outline-offset:3px; }
.landing-tool__icon{ font-size:28px; line-height:1; color:var(--vd-azul); }
.landing-tool__title{ font-size:17px; font-weight:700; margin:0; }
.landing-tool__text{ font-size:13.5px; line-height:1.5; color:var(--vd-cinza); margin:0; flex-grow:1; }
.landing-tool--breve{ background:#FAFBFD; border-style:dashed; }
.landing-tool--breve .landing-tool__icon{ color:#8A93A0; }
.landing-tool--breve .landing-tool__title{ color:var(--vd-cinza); }

.landing-badge{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:12px; font-weight:600; padding:5px 10px; border-radius:6px;
}
.landing-badge--livre{ background:#E7F3EC; color:#15653C; }
.landing-badge--restrito{ background:#EEF1F6; color:#3D4855; }
.landing-badge--breve{ background:#FDF3D8; color:#7A4A05; }

/* ---------- municípios ---------- */
.landing-municipios{ display:flex; align-items:flex-start; gap:40px; }
.landing-municipios__main{ flex:1 1 auto; min-width:0; }
.landing-muni-list{ display:flex; flex-direction:column; gap:12px; margin:22px 0 16px; max-width:560px; }
.landing-muni-card{
  display:flex; align-items:center; gap:14px;
  border:1px solid var(--vd-borda); border-radius:11px; padding:14px 18px;
  text-decoration:none; color:var(--vd-tinta); background:#fff;
  transition:transform .18s, box-shadow .18s;
}
.landing-muni-card:hover{ transform:translateY(-2px); box-shadow:0 .4rem .8rem rgba(19,81,180,.1); color:var(--vd-tinta); text-decoration:none; }
.landing-muni-card:focus-visible{ outline:3px solid var(--vd-azul); outline-offset:3px; }
.landing-muni-card__icon{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:40px; height:40px; border-radius:9px; background:#F2F6FD; color:var(--vd-azul); font-size:20px;
}
.landing-muni-card__body{ flex:1 1 auto; min-width:0; }
.landing-muni-name{ display:block; font-size:16px; font-weight:600; }
.landing-muni-slug{ display:block; font-size:12.5px; color:var(--vd-cinza); overflow-wrap:anywhere; }
.landing-muni-badge{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font-size:12px; font-weight:600; color:#3D4855; background:#EEF1F6;
  padding:5px 10px; border-radius:6px;
}
.landing-muni-vazio{ font-size:14.5px; color:var(--vd-cinza); margin:0; }
.landing-link-todos{ display:inline-flex; align-items:center; gap:7px; min-height:44px; font-size:14.5px; font-weight:600; }

.landing-cta-card{
  flex:0 0 360px; max-width:360px;
  background:var(--vd-fundo-alt); border:1px solid var(--vd-borda); border-radius:14px; padding:24px;
  display:flex; flex-direction:column; gap:12px;
}
.landing-cta-card__title{ font-size:17px; font-weight:700; margin:0; }
.landing-cta-card__text{ font-size:13.5px; line-height:1.55; color:var(--vd-cinza); margin:0; }

/* ---------- como funciona ---------- */
.landing-passos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; list-style:none; margin:0; padding:0; }
.landing-passo{ display:flex; gap:14px; }
.landing-passo__num{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:999px; background:var(--vd-azul); color:#fff;
  font-size:15px; font-weight:700;
}
.landing-passo__title{ font-size:15.5px; font-weight:700; margin:0 0 6px; }
.landing-passo__text{ font-size:13.5px; line-height:1.55; color:var(--vd-cinza); margin:0; }

/* ---------- telas estreitas ---------- */
@media (max-width:991.98px){
  .landing-panorama__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .landing-tools{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .landing-municipios{ flex-direction:column; }
  .landing-cta-card{ flex-basis:auto; max-width:none; width:100%; }
  .landing-passos{ grid-template-columns:1fr; gap:20px; }
}

@media (max-width:767.98px){
  .landing-hero{ padding:32px 0; }
  .landing-hero__inner{ flex-direction:column-reverse; gap:24px; text-align:left; align-items:stretch; }
  .landing-hero__title{ font-size:30px; letter-spacing:-.6px; }
  .landing-hero__lead{ font-size:15px; }
  .landing-hero__actions{ flex-direction:column; align-items:stretch; }
  .landing-hero__logo{ width:120px; height:120px; align-self:center; }
  .landing-tools{ grid-template-columns:1fr; }
  .landing-section{ padding:32px 0; }
  .landing-section__title{ font-size:22px; }
  .landing-stat__value{ font-size:32px; }
}

@media (prefers-reduced-motion:reduce){
  .landing-tool,.landing-muni-card,.landing-btn{ transition:none; }
  a.landing-tool:hover,.landing-muni-card:hover{ transform:none; }
}