/* =========================================================
   Anderson Salvador 11555 — Deputado Estadual / ES
   CSS próprio, sem CDN e sem dependência externa.

   Paleta tirada do material de campanha (o santinho):
   azul-marinho #002276 · azul-claro #76c9fd · verde #0bb109.
   Trocar as variáveis abaixo muda o site inteiro.
   ========================================================= */

:root{
  --azul:#002276;
  --azul-esc:#001a5c;
  --azul-2:#0b3aa8;
  --azul-cl:#76c9fd;
  --azul-cl-2:#b7e2ff;
  --verde:#0bb109;
  --verde-cl:#2fd42c;
  --gelo:#eef6ff;
  --gelo-2:#dfeeff;
  --branco:#ffffff;
  --texto:#25313f;
  --cinza:#5b6a7b;
  --linha:#dbe6f4;

  --wrap:1180px;
  --r:16px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sombra:0 18px 50px rgba(0,34,118,.15);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  font-size:18px;
  line-height:1.68;
  color:var(--texto);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--verde); color:#fff; padding:12px 18px; font-weight:800;
}
.pular:focus{ left:12px; top:12px; }

/* ---------------- TOPO ---------------- */
.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(0,34,118,.97);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:3px solid var(--verde);
}
.topo__in{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:68px; }

.marca{ display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; }
.marca__mono{
  width:40px; height:40px; flex:0 0 40px; border-radius:10px;
  background:var(--verde); color:#fff; font-weight:900; font-size:.98rem; letter-spacing:.04em;
  display:grid; place-items:center;
}
.marca__txt{ display:flex; flex-direction:column; line-height:1.18; }
.marca__txt b{ font-size:.99rem; font-weight:800; letter-spacing:.005em; }
.marca__txt i{ font-style:normal; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--azul-cl); }

.menu-btn{
  width:44px; height:44px; border:0; border-radius:10px; background:rgba(255,255,255,.14);
  display:grid; place-content:center; gap:5px; cursor:pointer; padding:0;
}
.menu-btn span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .25s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav{
  position:absolute; left:0; right:0; top:100%;
  background:var(--azul); border-bottom:3px solid var(--verde);
  display:grid; padding:8px 22px 18px;
  max-height:0; overflow:hidden; opacity:0; visibility:hidden;
  transition:max-height .3s ease, opacity .2s ease, visibility .2s;
}
.nav.is-open{ max-height:420px; opacity:1; visibility:visible; }
.nav a{
  color:#fff; text-decoration:none; padding:13px 2px; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.14); font-size:1.02rem;
}
.nav a:last-child{ border-bottom:0; }
.nav__num{ color:#8dff8b !important; font-weight:900 !important; letter-spacing:.06em; }

/* ---------------- HERO (capa = arte da campanha) ---------------- */
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.hero{ position:relative; background:var(--branco); }
.hero__capa{ display:block; }
.hero__capa img{ width:100%; height:auto; display:block; }

/* faixa de identificação eleitoral, colada na arte */
.ident{
  margin:0; background:var(--azul); color:#c3daf7; text-align:center;
  font-size:.66rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  line-height:1.45; padding:9px 16px;
}

.hero__acoes{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  padding:22px 22px 26px; background:var(--branco);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 26px; border-radius:999px; text-decoration:none;
  font-weight:800; font-size:1rem; letter-spacing:.01em; border:2px solid transparent;
  transition:transform .18s ease, background .2s ease, color .2s ease;
}
.btn--azul{ background:var(--azul); color:#fff; }
.btn--azul:hover{ background:var(--azul-2); transform:translateY(-2px); }
.btn--verde{ background:var(--verde); color:#fff; }
.btn--verde:hover{ background:var(--verde-cl); transform:translateY(-2px); }
.btn--linha{ border-color:var(--azul); color:var(--azul); }
.btn--linha:hover{ background:var(--azul); color:#fff; transform:translateY(-2px); }
.btn--linha-cl{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn--linha-cl:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn__ic{ width:20px; height:20px; flex:0 0 20px; }

/* ---------------- VALORES (a faixa da arte, em texto de verdade) ---------------- */
.valores{ background:var(--azul); color:#fff; padding:26px 0; }
.valores__in{ display:grid; gap:16px; }
.valor{ display:flex; align-items:center; gap:14px; }
.valor__ic{
  flex:0 0 46px; width:46px; height:46px; border-radius:50%;
  border:2px solid rgba(118,201,253,.65); color:var(--azul-cl);
  display:grid; place-items:center;
}
.valor__ic svg{ width:24px; height:24px; }
.valor p{ margin:0; font-size:1.02rem; font-weight:800; line-height:1.28; }

/* ---------------- CITAÇÃO ---------------- */
.cit{
  margin:22px 0 0; padding:16px 0 16px 20px; border-left:5px solid var(--verde);
  font-size:1.1rem; line-height:1.5; color:var(--azul); font-weight:600;
}
.cit b{ font-weight:900; }

/* ---------------- SEÇÕES ---------------- */
.sec{ padding:62px 0; }
.sec--claro{ background:var(--branco); }
.sec--areia{ background:var(--gelo); }
.sec--escuro{ background:var(--azul); color:#e6efff; }

.olho{
  margin:0 0 10px; font-size:.75rem; font-weight:900; letter-spacing:.18em;
  text-transform:uppercase; color:var(--verde);
}
.olho--claro{ color:var(--azul-cl); }

h2{
  margin:0 0 14px; font-size:clamp(1.75rem,6.6vw,2.5rem); line-height:1.14;
  letter-spacing:-.02em; font-weight:900; color:var(--azul);
}
.h2--claro{ color:#fff; }

.sub{ margin:0 0 32px; font-size:1.06rem; color:#b3caee; max-width:52ch; }
.sub--esc{ color:var(--cinza); }

/* ---------------- QUEM É ---------------- */
.quem{ display:grid; gap:34px; }
.quem__foto{ position:relative; max-width:420px; margin:0 auto 10px; width:100%; }
.quem__foto img{
  position:relative; z-index:1; width:100%; border-radius:var(--r); box-shadow:var(--sombra);
}
.quem__foto::after{
  content:""; position:absolute; left:-12px; bottom:-12px; width:130px; height:130px;
  border-left:6px solid var(--verde); border-bottom:6px solid var(--verde);
  border-radius:0 0 0 var(--r); z-index:0;
}
.quem__selo{
  position:absolute; z-index:2; right:-6px; bottom:18px;
  background:var(--azul); color:#fff; border-radius:12px;
  padding:11px 16px; font-weight:900; font-size:1.02rem; line-height:1.1;
  display:flex; flex-direction:column; gap:3px; box-shadow:var(--sombra);
}
.quem__selo i{ font-style:normal; font-weight:600; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--azul-cl); }

.quem__txt p{ margin:0 0 16px; }
.quem__txt b{ color:var(--azul); font-weight:800; }

.fam{ margin:24px 0 0; }
.fam img{
  width:100%; border-radius:var(--r); box-shadow:0 12px 32px rgba(0,34,118,.14);
}
.fam figcaption{
  margin-top:10px; font-size:.92rem; color:var(--cinza); line-height:1.45;
  padding-left:14px; border-left:3px solid var(--azul-cl);
}
.fam figcaption b{ color:var(--azul); font-weight:800; }

.raizes{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px; }
.raizes li{
  background:var(--gelo); border-left:5px solid var(--azul-cl);
  border-radius:0 12px 12px 0; padding:16px 18px;
}
.raizes__tag{
  display:inline-block; font-size:.68rem; font-weight:900; letter-spacing:.16em;
  text-transform:uppercase; color:var(--verde); margin-bottom:5px;
}
.raizes li b{ display:block; font-size:1.08rem; color:var(--azul); font-weight:900; margin-bottom:4px; }
.raizes li i{ font-style:normal; font-size:.97rem; color:var(--cinza); line-height:1.6; }

/* ---------------- TRAJETÓRIA ---------------- */
.linha{ list-style:none; margin:0; padding:0 0 0 26px; position:relative; display:grid; gap:30px; }
.linha::before{
  content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px;
  background:linear-gradient(180deg,var(--verde),rgba(118,201,253,.25));
}
.linha li{ position:relative; }
.linha__pt{
  position:absolute; left:-26px; top:7px; width:14px; height:14px; border-radius:50%;
  background:var(--verde); box-shadow:0 0 0 5px rgba(11,177,9,.22);
}
.linha h3{
  margin:0 0 6px; font-size:1.16rem; line-height:1.35; color:#fff; font-weight:800;
  letter-spacing:-.01em;
}
.linha p{ margin:0; color:#a9c2ea; font-size:1rem; }

/* ---------------- CARDS ---------------- */
.cards{ display:grid; gap:16px; }
.card{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--r);
  padding:24px 22px; transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--sombra); }
.card__ic{
  display:grid; place-items:center; width:50px; height:50px; border-radius:13px;
  background:var(--azul); color:var(--azul-cl); margin-bottom:15px;
}
.card__ic svg{ width:25px; height:25px; }
.card h3{ margin:0 0 8px; font-size:1.13rem; color:var(--azul); font-weight:900; letter-spacing:-.01em; }
.card p{ margin:0; font-size:1rem; color:var(--cinza); }

/* ---------------- PROPOSTAS ---------------- */
.prop{
  background:var(--branco); border-radius:var(--r); padding:26px 22px 22px;
  border-top:6px solid var(--verde); box-shadow:0 8px 26px rgba(0,34,118,.08);
  margin-bottom:20px;
}
.prop:last-child{ margin-bottom:0; }

.prop__top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.prop__n{
  flex:0 0 auto; background:var(--azul); color:#fff; border-radius:9px;
  font-size:.82rem; font-weight:900; letter-spacing:.06em; padding:6px 11px;
}
.prop__top h3{
  margin:0; font-size:clamp(1.5rem,6vw,1.9rem); color:var(--azul);
  font-weight:900; letter-spacing:-.02em; line-height:1.1;
}

.prop__cit{
  margin:0 0 22px; padding:16px 18px; border-radius:12px;
  background:var(--gelo); border-left:5px solid var(--azul-cl);
  font-size:1.04rem; line-height:1.55; color:var(--texto);
}
.prop__cit b{ color:var(--azul); font-weight:900; }

.prop__rot{
  margin:0 0 12px; font-size:.74rem; font-weight:900; letter-spacing:.16em;
  text-transform:uppercase; color:var(--verde);
}

.band{ list-style:none; counter-reset:b; margin:0 0 20px; padding:0; display:grid; gap:12px; }
.band li{
  counter-increment:b; position:relative; padding-left:44px; min-height:32px;
  display:flex; flex-direction:column; justify-content:center;
}
.band li::before{
  content:counter(b); position:absolute; left:0; top:0;
  width:32px; height:32px; border-radius:50%;
  background:var(--verde); color:#fff;
  font-size:.92rem; font-weight:900; display:grid; place-items:center;
}
.band li b{ font-size:1.06rem; font-weight:800; color:var(--azul); line-height:1.35; }
.band li span{ font-size:.97rem; color:var(--cinza); line-height:1.5; margin-top:2px; }

.det{ border-top:1px solid var(--linha); padding-top:6px; }
.det summary{
  list-style:none; cursor:pointer; padding:12px 2px;
  display:flex; align-items:center; gap:10px;
  font-weight:800; color:var(--azul); font-size:1rem;
}
.det summary::-webkit-details-marker{ display:none; }
.det summary::after{
  content:""; width:9px; height:9px; flex:0 0 9px;
  border-right:2.5px solid var(--verde); border-bottom:2.5px solid var(--verde);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .25s ease;
}
.det[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.det summary:hover{ color:var(--azul-2); }

.det__in{ padding:6px 0 8px; }
.det__in h4{
  margin:22px 0 8px; font-size:1.06rem; color:var(--azul); font-weight:900;
  letter-spacing:-.01em; line-height:1.35;
}
.det__in h4:first-child{ margin-top:8px; }
.det__in p{ margin:0 0 12px; font-size:1rem; line-height:1.66; color:var(--texto); }
.det__in p b{ color:var(--azul); font-weight:800; }
.det__in ul{ margin:0 0 14px; padding:0; list-style:none; display:grid; gap:7px; }
.det__in ul li{
  position:relative; padding-left:20px; font-size:.99rem; line-height:1.55; color:var(--cinza);
}
.det__in ul li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--azul-cl);
}

/* ---------------- NÚMERO / CONTATO ---------------- */
.sec--num{
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(11,58,168,.85) 0%, rgba(0,26,92,0) 62%),
    var(--azul-esc);
  color:#fff; text-align:center;
}
.num__big{ margin:6px 0 4px; line-height:.9; }
.num__big span{
  display:inline-block; font-style:italic;
  font-size:clamp(4.4rem,22vw,9rem); font-weight:900; letter-spacing:-.01em;
  color:var(--verde-cl); transform:rotate(-2deg);
  text-shadow:0 4px 0 #fff, 4px 0 0 #fff, -4px 0 0 #fff, 0 -4px 0 #fff,
              3px 3px 0 #fff, -3px 3px 0 #fff, 0 14px 26px rgba(0,0,0,.3);
}
.num__nome{
  margin:14px 0 12px; font-size:clamp(1.3rem,5.4vw,1.8rem); font-weight:900;
  text-transform:uppercase; letter-spacing:.02em;
}
.num__part{
  margin:0 0 14px; font-size:.76rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul-cl);
}
.num__slogan{ margin:0 auto 28px; max-width:36ch; color:var(--azul-cl-2); font-size:1.04rem; }
.contato{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.contato .btn{ flex:1 1 260px; max-width:340px; }
@media (min-width:700px){ .contato .btn{ flex:0 0 auto; } }

/* ---------------- RODAPÉ ---------------- */
.rodape{ background:#00133f; color:#8fa6cd; padding:26px 0 84px; font-size:.9rem; }
@media (min-width:700px){ .rodape{ padding:26px 0; } }
.rodape__in{ display:grid; gap:12px; text-align:center; }
.rodape__id{ display:grid; gap:4px; }
.rodape__id p:not(:first-child){ font-size:.82rem; color:#6c85b0; }
.rodape p{ margin:0; }
.rodape b{ color:#fff; }
.rodape__mini{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#6c85b0; }
.rodape__mini a{ color:var(--azul-cl); text-decoration:none; font-weight:700; }
.rodape__mini a:hover{ text-decoration:underline; }
.rodape__mini span{ margin:0 8px; }

/* ---------------- BOTÃO FLUTUANTE ---------------- */
.zap{
  position:fixed; right:14px; bottom:14px; z-index:60;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--verde); color:#fff; text-decoration:none;
  padding:12px 18px 12px 14px; border-radius:999px;
  box-shadow:0 10px 28px rgba(11,177,9,.42), 0 2px 8px rgba(0,0,0,.2);
  font-weight:800; font-size:.95rem; line-height:1;
  transition:transform .18s ease, background .2s ease;
}
.zap svg{ width:24px; height:24px; flex:0 0 24px; }
.zap b{ font-weight:800; }
.zap:hover{ background:var(--verde-cl); transform:translateY(-2px); }
.zap:active{ transform:translateY(0); }

@media (max-width:400px){
  .zap{ padding:12px 15px 12px 12px; font-size:.88rem; gap:7px; }
}

/* =========================================================
   TABLET / DESKTOP
   ========================================================= */
@media (min-width:700px){
  .valores__in{ grid-template-columns:1fr 1fr; gap:20px 34px; }
  .band{ grid-template-columns:1fr 1fr; gap:14px 28px; }
  .prop{ padding:30px 28px 24px; }
  .cards{ grid-template-columns:1fr 1fr; }
  .raizes{ grid-template-columns:1fr 1fr; }
  .sec{ padding:82px 0; }
  .rodape__in{ grid-template-columns:1fr auto; text-align:left; align-items:center; }
}

@media (min-width:960px){
  .wrap{ padding:0 32px; }

  .menu-btn{ display:none; }
  .nav{
    position:static; display:flex; align-items:center; gap:28px;
    max-height:none; opacity:1; visibility:visible; overflow:visible;
    background:transparent; border:0; padding:0;
  }
  .nav a{ border:0; padding:6px 0; font-size:.96rem; position:relative; }
  .nav a::after{
    content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
    background:var(--verde); transition:right .25s ease;
  }
  .nav a:hover::after{ right:0; }
  .nav__num{
    border:2px solid var(--verde) !important; border-radius:999px;
    padding:7px 16px !important;
  }
  .nav__num::after{ display:none; }

  .valores{ padding:22px 0; }
  .valores__in{ grid-template-columns:repeat(4,1fr); gap:26px; }
  .valor p{ font-size:.98rem; }
  .hero__acoes{ padding:26px 22px 30px; }
  .ident{ font-size:.72rem; letter-spacing:.12em; padding:10px 16px; }

  .quem{ grid-template-columns:.86fr 1.14fr; gap:56px; align-items:center; }
  .quem__foto{ margin:0; max-width:none; }
  .cards{ grid-template-columns:repeat(4,1fr); }
  .linha{ max-width:760px; gap:36px; }
  .linha h3{ font-size:1.3rem; }
  .num__slogan{ font-size:1.12rem; }
  .prop{ padding:36px 40px 28px; }
  .prop__cit{ font-size:1.1rem; padding:20px 24px; }
  .det__in{ columns:1; max-width:74ch; }
}

/* ---------------- MOVIMENTO ---------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}