/* ============================================================
   Magda Mossoró 11456 — Deputada Estadual
   Paleta amostrada da arte oficial da campanha (magick):
   azul #0644A9 · azul claro #2E8BF5 · rosa #FD197E · branco #F2F3F8
   A faixa azul/branco/rosa é a bandeira do ESPÍRITO SANTO — e é a mesma paleta
   da arte dela: azul e rosa são as cores oficiais do estado desde 1909.
   ============================================================ */

:root{
  --azul:#0644A9;
  --azul-esc:#032F73;
  --azul-prof:#02214F;
  --azul-cl:#2E8BF5;
  --azul-pal:#E7EEFA;
  --rosa:#FD197E;
  --rosa-esc:#D6146A;
  --branco:#F7F9FD;
  --tinta:#10203A;
  --tinta-fr:#4A5B76;
  --zap:#25D366;
  --raio:16px;
  --sombra:0 14px 40px rgba(3,47,115,.16);
  --fonte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--fonte);
  font-size:18px;
  line-height:1.62;
  color:var(--tinta);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1.1; letter-spacing:-.015em}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:min(1180px,92vw); margin-inline:auto}

/* ---------- faixa do estado (bandeira do Espírito Santo) ---------- */
.faixa-estado{display:flex; height:7px; width:100%}
.faixa-estado i{flex:1}
.faixa-estado i:nth-child(1){background:var(--azul-cl)}
.faixa-estado i:nth-child(2){background:#fff}
.faixa-estado i:nth-child(3){background:var(--rosa)}
.faixa-estado--fim i:nth-child(2){background:#F7F9FD}

/* ---------- selos de credencial ---------- */
.selos{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px}
.selos li{
  background:var(--azul); color:#fff; font-weight:800; font-size:.86rem;
  letter-spacing:.02em; padding:8px 16px; border-radius:999px;
}
.selos li:first-child{background:var(--rosa)}

/* ---------- tipografia de apoio ---------- */
.eyebrow{
  font-size:.82rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#BFD6FA; margin:0 0 18px; display:flex; flex-wrap:wrap; gap:6px 14px;
}
.eyebrow span+span::before{content:""}
.hero__h1{margin:0}
.rotulo{
  display:inline-block; font-size:.78rem; font-weight:900; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rosa); margin:0 0 14px;
  padding-bottom:7px; border-bottom:4px solid var(--rosa);
}
.rotulo--claro{color:#FF6FAC; border-color:#FF6FAC}
.h2{
  font-size:clamp(2rem,5.6vw,3.1rem); font-weight:800; color:var(--azul-prof);
  margin:0 0 18px; text-wrap:balance;
}
.h2 b{color:var(--azul); font-weight:900}
.h2--claro{color:#fff}
.h2--claro b{color:#8FC2FF}
.sub{font-size:1.1rem; color:#C9DDF8; max-width:52ch; text-wrap:pretty}
.sub--esc{color:var(--tinta-fr)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:999px; font-weight:800; font-size:1rem;
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn svg{width:22px; height:22px; flex:none}
.btn:hover{transform:translateY(-2px)}
.btn--lg{padding:17px 30px; font-size:1.06rem}
.btn--pink{background:var(--rosa); color:#fff; box-shadow:0 10px 26px rgba(253,25,126,.34)}
.btn--pink:hover{background:var(--rosa-esc)}
.btn--ghost{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.18)}
.btn--ghost-esc{background:#fff; color:var(--azul); border-color:var(--azul)}
.btn--ghost-esc:hover{background:var(--azul-pal)}
.btn--zap{background:var(--zap); color:#04361a; box-shadow:0 10px 26px rgba(37,211,102,.32)}
.btn--zap:hover{background:#1fbb5a}

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); border-bottom:1px solid #DDE7F6;
}
.topo__in{display:flex; align-items:center; gap:20px; min-height:72px}
.topo__logo{flex:none}
.topo__logo img{width:150px; height:auto}
.topo__nav{display:none; gap:26px; margin-left:auto; font-weight:700; font-size:.98rem}
.topo__nav a{text-decoration:none; color:var(--azul-prof); padding:6px 0; border-bottom:3px solid transparent}
.topo__nav a:hover{border-color:var(--rosa)}
.topo__cta{margin-left:auto; padding:11px 20px; font-size:.94rem}

/* ---------- hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(160deg,#0A57C8 0%,var(--azul) 42%,var(--azul-esc) 100%);
  padding:44px 0 0;
}
.hero__glow{
  position:absolute; inset:auto -20% -30% auto; width:78vw; height:78vw; max-width:900px; max-height:900px;
  right:-18%; bottom:-34%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,rgba(253,25,126,.45) 0%,rgba(253,25,126,0) 68%);
}
.hero__in{display:grid; gap:8px}
.hero__logo{width:min(430px,86%); margin:0 0 20px; filter:drop-shadow(0 10px 24px rgba(0,0,0,.28))}
.hero__slogan{
  font-size:clamp(1.5rem,5.2vw,2.15rem); font-weight:900; font-style:italic;
  color:#fff; margin:0 0 14px; letter-spacing:-.02em;
}
.hero__lead{color:#D6E6FD; font-size:1.08rem; max-width:46ch; margin:0 0 26px; text-wrap:pretty}
.hero__acoes{display:flex; flex-wrap:wrap; gap:12px}
.hero__foto{margin:26px auto 0; width:min(430px,84%)}
.hero__foto img{filter:drop-shadow(0 24px 40px rgba(2,33,79,.45))}
.onda{display:block; width:100%; height:70px; margin:-40px 0 -2px; position:relative; z-index:2}

/* ---------- quem sou ---------- */
.comum{background:#fff; padding:56px 0 64px}
.comum__grid{display:grid; gap:30px; margin-top:26px}
.comum__foto{position:relative; display:grid; justify-items:center}
.comum__foto::before{
  content:""; position:absolute; left:50%; bottom:6%; translate:-50% 0;
  width:min(370px,88%); aspect-ratio:1; border-radius:50%; z-index:0;
  background:radial-gradient(circle,#D8E5F9 0%,#D8E5F9 56%,rgba(216,229,249,0) 74%);
}
.comum__foto img{
  position:relative; z-index:1; width:min(380px,86%);
  filter:drop-shadow(0 18px 32px rgba(2,33,79,.22));
}
.comum__txt p{font-size:1.08rem; color:#243553; text-wrap:pretty}
.comum__frase{
  font-size:1.22rem; font-weight:800; color:var(--azul); font-style:italic;
  border-left:6px solid var(--rosa); padding:4px 0 4px 18px; margin:22px 0 26px;
}
.nuncas{display:grid; gap:10px}
.nuncas li{
  display:flex; align-items:baseline; gap:10px; background:var(--azul-pal);
  border-radius:12px; padding:13px 18px; font-weight:700; color:var(--azul-prof); font-size:1.02rem;
}
.nuncas span{font-weight:900; color:var(--rosa); text-transform:uppercase; font-size:.8rem; letter-spacing:.1em}


/* recortes terminam em corte reto: dissolve os últimos pixels */
.comum__foto img,.props__foto img,.contato__foto img{
  -webkit-mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,0) 100%);
}

/* ---------- bandeiras ---------- */
.bandeiras{background:linear-gradient(180deg,var(--azul) 0%,var(--azul-esc) 100%); padding:62px 0 68px}
.bandeiras .sub{margin-bottom:34px}
.cards{display:grid; gap:14px}
.card{
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--raio); padding:22px 20px; display:flex; gap:16px; align-items:flex-start;
  transition:background .2s ease, transform .2s ease;
}
.card:hover{background:rgba(255,255,255,.16); transform:translateY(-3px)}
.card__ic{
  flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--rosa); color:#fff;
}
.card__ic svg{width:25px; height:25px}
.card h3{font-size:1.06rem; font-weight:800; color:#fff; line-height:1.32; text-wrap:pretty}

/* ---------- propostas ---------- */
.props{background:var(--branco); padding:60px 0}
.props__intro{display:grid; gap:26px; margin-bottom:32px}
.props__foto img{width:min(420px,82%); margin-inline:auto; filter:drop-shadow(0 20px 34px rgba(2,33,79,.22))}

.abas{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.aba{
  flex:1 1 auto; min-width:104px; font:inherit; font-weight:800; font-size:1.02rem;
  padding:14px 20px; border-radius:999px; cursor:pointer;
  background:#fff; color:var(--azul); border:2px solid #D5E2F5;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.aba:hover{border-color:var(--azul-cl)}
.aba.is-on{background:var(--azul); color:#fff; border-color:var(--azul)}

.painel{outline:none}
.painel+.painel{margin-top:34px}
.painel[hidden]{display:none}

.eixos{display:grid; gap:16px}
.eixo{
  background:#fff; border:1px solid #DEE8F7; border-radius:var(--raio);
  padding:24px 22px; box-shadow:0 6px 20px rgba(3,47,115,.06);
}
.eixo h3{
  font-size:1.16rem; font-weight:900; color:var(--azul-prof); margin:0 0 12px;
  padding-bottom:12px; border-bottom:3px solid var(--rosa); display:inline-block;
}
.eixo__lead{
  font-style:italic; color:var(--azul); font-weight:700; font-size:1rem;
  margin:0 0 14px; text-wrap:pretty;
}
.eixo>ul{display:grid; gap:13px}
.eixo>ul>li{
  position:relative; padding-left:26px; color:#33455f; font-size:1.02rem;
  line-height:1.55; text-wrap:pretty;
}
.eixo>ul>li::before{
  content:""; position:absolute; left:0; top:.58em;
  width:11px; height:11px; border-radius:50%; background:var(--rosa);
}
.eixo>ul>li b{color:var(--azul-prof); font-weight:900}

.integral{
  margin-top:20px; background:#fff; border:1px solid #DEE8F7; border-radius:var(--raio);
}
.integral summary{
  cursor:pointer; list-style:none; padding:16px 20px;
  font-weight:800; color:var(--azul); font-size:1rem;
  display:flex; align-items:center; gap:10px;
}
.integral summary::-webkit-details-marker{display:none}
.integral summary::before{
  content:"+"; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--azul-pal); color:var(--azul); font-weight:900;
  display:grid; place-items:center; font-size:1.1rem; line-height:1;
}
.integral[open] summary::before{content:"\2212"}
.integral__txt{padding:0 20px 20px; border-top:1px solid #EDF2FA}
.integral__txt p{margin:14px 0 0; color:#45566f; font-size:.99rem; line-height:1.6; text-wrap:pretty}
.integral__txt b{color:var(--azul-prof)}

.props__resto{
  margin:30px 0 0; padding:16px 20px; border-radius:12px;
  background:var(--azul-pal); border-left:5px solid var(--azul-cl);
  color:var(--azul-prof); font-size:.99rem; font-weight:600; text-wrap:pretty;
}

/* ---------- número ---------- */
.numero{
  background:linear-gradient(135deg,var(--azul-prof) 0%,var(--azul) 55%,var(--rosa-esc) 160%);
  padding:56px 0 46px;
}
.numero__in{display:grid; gap:16px; align-items:end}
.numero__big{
  font-size:clamp(4.2rem,20vw,9rem); font-weight:900; font-style:italic; color:#fff;
  line-height:.88; margin:0 0 6px; letter-spacing:-.04em;
  text-shadow:0 6px 0 rgba(0,0,0,.14);
}
.numero__nome{font-size:clamp(1.6rem,6vw,2.4rem); font-weight:900; color:#8FC2FF; margin:0 0 4px}
.numero__cargo{color:#CFE2FB; font-weight:700; margin:0 0 10px; font-size:1rem}
.numero__slog{font-style:italic; font-weight:800; color:var(--rosa); font-size:1.16rem; margin:0 0 30px}
.numero__art{align-self:center}
.numero__art img{width:min(360px,80%); margin-inline:auto; filter:drop-shadow(0 18px 34px rgba(0,0,0,.35))}

/* ---------- contato ---------- */
.contato{background:#fff; padding:60px 0}
.contato__in{display:grid; gap:30px}
.contato__btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.contato__aviso{
  margin:16px 0 0; font-size:.98rem; color:var(--azul-prof); font-weight:600;
  background:var(--azul-pal); border-left:5px solid var(--azul-cl);
  border-radius:10px; padding:12px 16px; display:none;
}
.contato__aviso.is-on{display:block}
.contato__foto img{width:min(360px,72%); margin-inline:auto; filter:drop-shadow(0 20px 34px rgba(2,33,79,.2))}

/* ---------- rodapé ---------- */
.rodape{background:var(--azul-prof); color:#C9DDF8; padding:40px 0 0}
.rodape__in{display:grid; gap:22px; justify-items:start; padding-bottom:34px}
.rodape__logo{width:190px}
.rodape__slog{font-style:italic; font-weight:800; color:#fff; font-size:1.1rem; margin:0 0 8px}
.rodape__meta{font-size:.95rem; line-height:1.7; margin:0; color:#9FC0E8}

/* ---------- botão flutuante ---------- */
.flutua{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--zap); color:#04361a; text-decoration:none; font-weight:800; font-size:.98rem;
  padding:14px 20px; border-radius:999px; box-shadow:0 12px 30px rgba(0,0,0,.28);
  transition:transform .18s ease;
}
.flutua:hover{transform:translateY(-3px)}
.flutua svg{width:24px; height:24px; flex:none}
.flutua span{display:none}

/* ============================================================
   ≥ 720px
   ============================================================ */
@media (min-width:720px){
  body{font-size:19px}
  .eyebrow span+span::before{content:"\00b7"; margin-right:14px; color:#7FA8E0}
  .cards{grid-template-columns:repeat(2,1fr); gap:16px}
  .nuncas{grid-template-columns:repeat(2,1fr)}
  .props__foto img{width:min(380px,70%)}
  .flutua span{display:inline}
  .comum__grid{grid-template-columns:0.85fr 1.15fr; align-items:center; gap:44px}
  .rodape__in{grid-template-columns:auto 1fr; align-items:center; gap:34px}
}

/* ============================================================
   ≥ 980px
   ============================================================ */
@media (min-width:980px){
  .topo__nav{display:flex}
  .topo__cta{margin-left:0}
  .hero{padding:60px 0 0}
  .hero__in{grid-template-columns:1.05fr .95fr; align-items:center; gap:30px}
  .hero__foto{margin:0; width:100%; max-width:470px; justify-self:end; align-self:end}
  .hero__logo{width:min(470px,100%)}
  .onda{height:110px; margin-top:-72px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .eixos{grid-template-columns:repeat(2,1fr); gap:18px}
  .aba{flex:0 0 auto; min-width:160px}
  .card{flex-direction:column; gap:14px}
  .props__intro{grid-template-columns:1.15fr .85fr; align-items:center; gap:50px}
  .numero__in{grid-template-columns:1.1fr .9fr; gap:40px}
  .numero__art img{width:100%; max-width:420px}
  .contato__in{grid-template-columns:1.1fr .9fr; align-items:center; gap:50px}
  .comum,.props,.contato{padding:82px 0}
  .bandeiras{padding:84px 0 90px}
}

/* ---------- acessibilidade / movimento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .btn:hover,.card:hover,.flutua:hover{transform:none}
}
:focus-visible{outline:3px solid var(--rosa); outline-offset:3px; border-radius:6px}