/* =========================================================================
   CARLOS GEILSON 1050 — Deputado Federal / Bahia 2026
   Folha de estilo principal
   Paleta extraída da arte oficial de campanha.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Cores de campanha */
  --azul:        #365FAE;
  --azul-600:    #2A50A2;
  --azul-700:    #23458F;
  --azul-800:    #17357A;
  --azul-900:    #102555;
  --azul-950:    #0A1938;
  --ciano:       #18C8F7;
  --amarelo:     #FDE32E;

  /* Neutros */
  --branco:  #FFFFFF;
  --nuvem:   #F2F6FD;
  --nuvem-2: #E6EDFA;
  --linha:   #D9E2F2;
  --cinza:   #57647F;
  --grafite: #15223D;

  /* Tipografia */
  --f-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-texto:   'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Métrica */
  --raio-sm: 10px;
  --raio:    14px;
  --raio-md: 20px;
  --raio-lg: 28px;
  --header-h: 74px;
  --pad: 24px;

  /* Sombras */
  --sombra:    0 14px 40px -18px rgba(16,37,85,.28);
  --sombra-lg: 0 40px 90px -30px rgba(10,25,56,.55);

  /* Textura geométrica (motivo de setas da arte oficial) */
  --chevrons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2'%3E%3Cpath d='M0 44 L40 4 L80 44'/%3E%3Cpath d='M80 124 L120 84 L160 124'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 18px);
}

body{
  margin:0;
  -webkit-tap-highlight-color:rgba(54,95,174,.18);
  font-family:var(--f-texto);
  font-size:17px;
  line-height:1.7;
  color:var(--grafite);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.022em;
  margin:0 0 .6em;
  text-wrap:balance;
}
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

::selection{ background:var(--amarelo); color:var(--azul-900); }

:focus-visible{
  outline:3px solid var(--ciano);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- 3. Utilitários ---------- */
.container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--pad);
}
.container--estreito{ max-width:900px; }

.section{
  position:relative;
  padding:clamp(76px,9vw,124px) 0;
}
.section--nuvem{ background:var(--nuvem); }
.section--dark{ background:var(--azul-900); color:#fff; }
.section--dark h2,.section--dark h3{ color:#fff; }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-display);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--azul);
  margin:0 0 18px;
}
.eyebrow::before{
  content:"";
  width:26px; height:3px;
  border-radius:2px;
  background:var(--amarelo);
}
.section--dark .eyebrow,
.hero .eyebrow{ color:var(--ciano); }

.section__head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.section__head--centro{ margin-inline:auto; text-align:center; }
.section__head--centro .eyebrow{ justify-content:center; }
.section__head h2{ font-size:clamp(1.95rem,3.5vw,3rem); margin-bottom:.45em; }
.section__head p{ font-size:1.075rem; color:var(--cinza); }
.section--dark .section__head p{ color:rgba(255,255,255,.78); }
.defender .section__head p{ color:rgba(255,255,255,.9); }

.lead{ font-size:1.1rem; line-height:1.72; }
.hl{ color:var(--amarelo); }
.txt-azul{ color:var(--azul); }

/* Faixa de destaque (frase-síntese) */
.pull{
  margin-top:clamp(40px,5vw,60px);
  padding:30px clamp(24px,4vw,44px);
  border-left:5px solid var(--amarelo);
  border-radius:var(--raio) var(--raio-md) var(--raio-md) var(--raio);
  background:rgba(255,255,255,.06);
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  line-height:1.35;
  letter-spacing:-.015em;
}
.pull--claro{
  background:var(--branco);
  box-shadow:var(--sombra);
  color:var(--azul-800);
}

/* ---------- 4. Botões ---------- */
.btn{
  --btn-bg:var(--amarelo);
  --btn-fg:var(--azul-900);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 30px;
  border:2px solid transparent;
  border-radius:var(--raio);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--f-display);
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(10,25,56,.5); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:19px; height:19px; flex:none; }

.btn--amarelo{ --btn-bg:var(--amarelo); --btn-fg:var(--azul-900); }
.btn--amarelo:hover{ background:#FFEC5C; }
.btn--azul{ --btn-bg:var(--azul); --btn-fg:#fff; }
.btn--azul:hover{ background:var(--azul-600); }
.btn--ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.4);
}
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--sm{ padding:11px 20px; font-size:.85rem; }
.btn--bloco{ width:100%; }

.acoes{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* Link de texto com seta */
.link-seta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-family:var(--f-display);
  font-size:.87rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--azul);
  text-decoration:none;
  transition:gap .22s ease, color .22s ease;
}
.link-seta svg{ width:16px; height:16px; transition:transform .22s ease; }
.link-seta:hover{ gap:12px; color:var(--azul-600); }
.link-seta:hover svg{ transform:translateX(3px); }

/* ---------- 5. Cabeçalho ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  background:rgba(16,37,85,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-stuck{
  background:rgba(11,26,58,.96);
  box-shadow:0 10px 34px -20px rgba(0,0,0,.8);
}
.header__inner{
  display:flex;
  align-items:center;
  gap:20px;
  height:var(--header-h);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  text-decoration:none;
  color:#fff;
  margin-right:auto;
}
.brand__name{
  font-family:var(--f-display);
  font-size:1.02rem;
  font-weight:500;
  letter-spacing:.005em;
  line-height:1;
  white-space:nowrap;
}
.brand__name strong{ font-weight:800; }
.brand__num{
  font-family:var(--f-display);
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
  padding:7px 10px 6px;
  border-radius:8px;
  background:var(--amarelo);
  color:var(--azul-900);
}

.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
  position:relative;
  padding:9px 14px;
  border-radius:9px;
  font-size:.9rem;
  font-weight:500;
  color:rgba(255,255,255,.82);
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease, background-color .2s ease;
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.nav a.is-active{ color:#fff; }
.nav a.is-active::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:2px;
  height:2px; border-radius:2px;
  background:var(--amarelo);
}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:11px;
  background:transparent;
  cursor:pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  display:block;
  width:19px; height:2px;
  margin-inline:auto;
  border-radius:2px;
  background:#fff;
  transition:transform .28s ease, opacity .2s ease;
}
.nav-toggle span{ position:relative; }
.nav-toggle span::before,
.nav-toggle span::after{ content:""; position:absolute; left:0; }
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{  top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{  transform:translateY(-6px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  isolation:isolate;
  padding:calc(var(--header-h) + clamp(30px,5vw,58px)) 0 clamp(84px,9vw,120px);
  background:
    radial-gradient(1100px 620px at 78% -10%, rgba(24,200,247,.28), transparent 62%),
    radial-gradient(760px 520px at 4% 108%, rgba(253,227,46,.16), transparent 64%),
    linear-gradient(168deg, var(--azul) 0%, var(--azul-700) 46%, var(--azul-900) 100%);
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--chevrons);
  opacity:.85;
  z-index:-1;
}
.hero::after{
  content:"";
  position:absolute;
  left:-9%; bottom:-32%;
  width:min(560px,58vw); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 34% 34%, rgba(24,200,247,.5), rgba(24,200,247,0) 68%);
  z-index:-1;
}

/* Peça principal da campanha */
.billboard{
  margin:0 0 clamp(40px,5vw,62px);
  border-radius:var(--raio-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:var(--sombra-lg);
  background:var(--azul-600);
}
.billboard img{ width:100%; }

.hero__grid{
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(30px,5vw,64px);
  align-items:start;
}
.hero h1{
  font-size:clamp(2.05rem,4.5vw,3.55rem);
  font-weight:800;
  letter-spacing:-.03em;
  margin:0;
}
.hero__aside{ padding-top:6px; }
.hero__id{
  font-family:var(--f-display);
  font-size:1.22rem;
  font-weight:700;
  letter-spacing:-.015em;
  margin:0 0 4px;
}
.hero__id + p{
  color:rgba(255,255,255,.72);
  font-size:.98rem;
  margin-bottom:20px;
}
.hero__aside .lead{ color:rgba(255,255,255,.9); }
.hero__aside .lead strong{ color:#fff; font-weight:600; }

/* Faixa de credenciais */
.credenciais{
  position:relative;
  z-index:2;
  margin-top:clamp(-70px,-5vw,-52px);
}
.credenciais__inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--linha);
  border-radius:var(--raio-md);
  overflow:hidden;
  box-shadow:var(--sombra);
}
.credencial{
  background:var(--branco);
  padding:26px 24px;
}
.credencial dt{
  font-family:var(--f-display);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--azul);
  margin-bottom:6px;
}
.credencial dd{
  margin:0;
  font-family:var(--f-display);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.3;
  color:var(--grafite);
}

/* ---------- 7. Quem sou ---------- */
.quem{
  display:grid;
  grid-template-columns:minmax(280px,.78fr) 1fr;
  gap:clamp(36px,5.5vw,76px);
  align-items:center;
}
.retrato{
  position:relative;
  margin:0;
}
.retrato__img{
  position:relative;
  z-index:1;
  border-radius:var(--raio-lg);
  overflow:hidden;
  box-shadow:var(--sombra);
}
.retrato__img img{ width:100%; }
.retrato::before{
  content:"";
  position:absolute;
  inset:22px -20px -22px 22px;
  border:2px solid var(--linha);
  border-radius:var(--raio-lg);
  z-index:0;
}
.retrato__selo{
  position:absolute;
  z-index:2;
  right:-16px; bottom:26px;
  padding:16px 20px;
  border-radius:var(--raio);
  background:var(--amarelo);
  color:var(--azul-900);
  box-shadow:var(--sombra);
}
.retrato__selo b{
  display:block;
  font-family:var(--f-display);
  font-size:1.45rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
}
.retrato__selo span{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.quem__texto h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); }
.quem__texto p{ color:var(--cinza); }
.quem__texto strong{ color:var(--grafite); font-weight:600; }
.quem__abre{ font-size:1.12rem; color:var(--grafite) !important; }

/* ---------- 8. Pilares (fundo fotográfico escurecido) ---------- */
.defender{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background:var(--azul-950);
}
.defender__bg{
  position:absolute; inset:0;
  z-index:-2;
  background-image:
    linear-gradient(172deg, rgba(8,20,48,.96) 0%, rgba(18,45,104,.90) 46%, rgba(8,20,48,.975) 100%),
    url("../img/geilson-trio.jpg");
  background-size:cover;
  background-position:center 20%;
  filter:saturate(.82) blur(1.5px);
  transform:scale(1.03);
}
/* No celular a imagem ja vem desfocada do arquivo (22 KB em vez de 103 KB),
   evitando filter:blur() e a camada composta extra que ele cria. */
@media (max-width:860px){
  .defender__bg{
    background-image:
      linear-gradient(172deg, rgba(8,20,48,.96) 0%, rgba(18,45,104,.90) 46%, rgba(8,20,48,.975) 100%),
      url("../img/geilson-trio-mob.jpg");
    filter:saturate(.82);
    transform:none;
  }
}
.defender::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background-image:var(--chevrons);
  opacity:.7;
}
.pilares{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.pilar{
  padding:34px 30px 32px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--raio-md);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.pilar:hover{
  transform:translateY(-5px);
  border-color:rgba(253,227,46,.55);
  background:rgba(255,255,255,.1);
}
.pilar__icone{
  display:grid;
  place-items:center;
  width:52px; height:52px;
  margin-bottom:22px;
  border-radius:var(--raio-sm);
  background:var(--amarelo);
  color:var(--azul-900);
}
.pilar__icone svg{ width:26px; height:26px; }
.pilar h3{
  font-size:1.2rem;
  margin-bottom:.5em;
}
.pilar p{
  font-size:.985rem;
  color:rgba(255,255,255,.78);
  margin:0;
}

/* ---------- 9. Propostas ---------- */
.proposta-destaque{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(24px,3.5vw,48px);
  align-items:center;
  padding:clamp(30px,4vw,46px);
  margin-bottom:22px;
  border-radius:var(--raio-lg);
  background:linear-gradient(135deg, var(--azul) 0%, var(--azul-800) 100%);
  color:#fff;
  box-shadow:var(--sombra);
  overflow:hidden;
  position:relative;
}
.proposta-destaque::after{
  content:"";
  position:absolute;
  right:-70px; top:-70px;
  width:280px; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(24,200,247,.4), transparent 68%);
}
.proposta-destaque > *{ position:relative; z-index:1; }
.proposta-destaque .num{
  align-self:start;
  margin:0;
  font-family:var(--f-display);
  font-size:clamp(3rem,6vw,4.6rem);
  font-weight:800;
  line-height:.85;
  letter-spacing:-.05em;
  color:rgba(255,255,255,.22);
}
.proposta-destaque h3{ font-size:clamp(1.3rem,2.4vw,1.85rem); margin-bottom:.5em; }
.proposta-destaque p{ color:rgba(255,255,255,.85); font-size:1rem; margin-bottom:0; }
.proposta-destaque p + p{ margin-top:.9em; }
.proposta-destaque strong{ color:#fff; font-weight:600; }
.proposta-destaque .btn{ white-space:nowrap; }

.propostas-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.proposta{
  display:flex;
  flex-direction:column;
  padding:32px 28px;
  border:1px solid var(--linha);
  border-radius:var(--raio-md);
  background:var(--branco);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.proposta:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:var(--sombra);
}
.proposta__topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.proposta__icone{
  display:grid;
  place-items:center;
  width:46px; height:46px;
  border-radius:var(--raio-sm);
  background:var(--nuvem);
  color:var(--azul);
}
.proposta__icone svg{ width:23px; height:23px; }
.proposta .num{
  font-family:var(--f-display);
  font-size:2.1rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--nuvem-2);
}
.proposta h3{
  font-size:1.13rem;
  line-height:1.28;
  margin-bottom:.65em;
}
.proposta p{
  font-size:.965rem;
  color:var(--cinza);
  margin-bottom:1em;
}
.proposta strong{ color:var(--grafite); font-weight:600; }
.proposta .link-seta{ margin-top:auto; padding-top:8px; }

/* Recolher/expandir propostas (so no celular; ver bloco 17 e o main.js).
   O estado inicial e expandido: se o JS falhar, todo o texto continua na
   pagina em vez de sumir. */
.proposta__toggle{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:44px;
  margin:2px 0 0;
  padding:8px 0;
  border:0;
  background:none;
  font-family:var(--f-display);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--azul);
  text-align:left;
  cursor:pointer;
}
.proposta__toggle svg{
  width:18px; height:18px;
  flex:none;
  transition:transform .28s ease;
}
.proposta__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

.proposta__corpo{
  display:grid;
  grid-template-rows:1fr;
  transition:grid-template-rows .32s ease;
}
.proposta__corpo > div{ overflow:hidden; }
.proposta.is-recolhida .proposta__corpo{ grid-template-rows:0fr; }

/* ---------- 10. Como vou atuar ---------- */
.atuacao{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) 1fr;
  gap:clamp(36px,5vw,72px);
  align-items:start;
}
.atuacao__intro{ position:sticky; top:calc(var(--header-h) + 40px); }
.atuacao__intro h2{ font-size:clamp(1.85rem,3.1vw,2.6rem); }
.atuacao__intro p{ color:var(--cinza); }

.passos{ list-style:none; margin:0; padding:0; }
.passo{
  position:relative;
  padding:0 0 40px 66px;
}
.passo:last-child{ padding-bottom:0; }
.passo::before{
  content:"";
  position:absolute;
  left:22px; top:46px; bottom:6px;
  width:2px;
  background:linear-gradient(var(--linha), rgba(217,226,242,0));
}
.passo:last-child::before{ display:none; }
.passo__num{
  position:absolute;
  left:0; top:0;
  display:grid;
  place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--azul);
  color:#fff;
  font-family:var(--f-display);
  font-size:.92rem;
  font-weight:700;
}
.passo h3{ font-size:1.22rem; padding-top:9px; margin-bottom:.5em; }
.passo p{ color:var(--cinza); font-size:1rem; }
.passo strong{ color:var(--grafite); font-weight:600; }

/* ---------- 11. Transparência ---------- */
.transparencia::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--chevrons);
  opacity:.8;
}
.transparencia > .container{ position:relative; z-index:1; }

.painel{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(28px,4vw,52px);
  align-items:start;
}
.itens{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  border-radius:var(--raio-md);
  overflow:hidden;
  background:rgba(255,255,255,.12);
}
.item{
  padding:26px 24px;
  background:var(--azul-900);
  transition:background-color .3s ease;
}
.item:hover{ background:var(--azul-800); }
.item svg{ width:24px; height:24px; color:var(--ciano); margin-bottom:14px; }
.item h3{ font-size:1.03rem; margin-bottom:.35em; }
.item p{ font-size:.92rem; color:rgba(255,255,255,.7); margin:0; }
.item--largo{ grid-column:1 / -1; }

.relatorio{
  padding:clamp(28px,3.5vw,40px);
  border-radius:var(--raio-md);
  background:linear-gradient(160deg, rgba(24,200,247,.16), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.18);
}
.relatorio h3{ font-size:1.25rem; margin-bottom:.5em; }
.relatorio > p{ color:rgba(255,255,255,.76); font-size:.98rem; }
.checklist{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:11px;
}
.checklist li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-family:var(--f-display);
  font-size:1rem;
  font-weight:500;
  line-height:1.4;
}
.checklist svg{
  width:19px; height:19px;
  flex:none;
  margin-top:3px;
  color:var(--amarelo);
}

/* ---------- 12. Participe ---------- */
.participe{
  display:grid;
  grid-template-columns:1fr minmax(340px,.82fr);
  gap:clamp(36px,5vw,68px);
  align-items:start;
}
.participe__texto h2{ font-size:clamp(1.85rem,3.1vw,2.6rem); }
.participe__texto p{ color:var(--cinza); }
.opcoes{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  gap:12px;
  max-width:420px;
}
.opcoes li{
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 20px;
  border:1px solid var(--linha);
  border-radius:var(--raio);
  background:var(--branco);
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.02rem;
  color:var(--azul-800);
}
.opcoes svg{ width:20px; height:20px; color:var(--azul); flex:none; }

.form-card{
  padding:clamp(28px,3.5vw,40px);
  border-radius:var(--raio-lg);
  background:var(--branco);
  border:1px solid var(--linha);
  box-shadow:var(--sombra);
}
.form-card h3{ font-size:1.3rem; margin-bottom:.35em; }
.form-card > p{ font-size:.95rem; color:var(--cinza); margin-bottom:26px; }
.campos{ display:grid; gap:16px; }
.campo{ display:grid; gap:7px; }
.campo--duplo{ grid-template-columns:1fr 1fr; gap:16px; }
.campo label{
  font-family:var(--f-display);
  font-size:.79rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--azul-800);
}
.campo input,
.campo select{
  width:100%;
  padding:14px 16px;
  font-family:var(--f-texto);
  font-size:1rem;
  color:var(--grafite);
  background:var(--nuvem);
  border:1.5px solid transparent;
  border-radius:var(--raio-sm);
  transition:border-color .2s ease, background-color .2s ease;
}
.campo input::placeholder{ color:#9AA6BF; }
.campo input:focus,
.campo select:focus{
  outline:none;
  background:var(--branco);
  border-color:var(--azul);
}
.campo select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2357647F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:44px;
}
.form-card .btn{ margin-top:26px; }
.form-nota{
  margin:16px 0 0;
  font-size:.82rem;
  line-height:1.55;
  color:var(--cinza);
}
.form-status{
  margin:16px 0 0;
  padding:13px 16px;
  border-radius:var(--raio-sm);
  background:var(--nuvem);
  border-left:3px solid var(--azul);
  font-size:.9rem;
  color:var(--azul-800);
}
.form-status:empty{ display:none; }

/* ---------- 12b. Redes sociais ---------- */
.redes{ background:var(--branco); }

.perfil{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.5vw,26px);
  max-width:820px;
  margin:0 auto clamp(34px,4vw,48px);
  padding:22px clamp(22px,3vw,30px);
  border:1px solid var(--linha);
  border-radius:var(--raio-md);
  background:var(--nuvem);
}
.perfil__glifo{
  display:grid;
  place-items:center;
  width:56px; height:56px;
  flex:none;
  border-radius:var(--raio);
  background:linear-gradient(140deg, var(--azul) 0%, var(--azul-800) 100%);
  color:#fff;
}
.perfil__glifo svg{ width:28px; height:28px; }
.perfil__dados{ margin-right:auto; min-width:0; }
.perfil__nome{
  font-family:var(--f-display);
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--azul-800);
  margin:0 0 3px;
}
.perfil__bio{
  margin:0;
  font-size:.9rem;
  line-height:1.5;
  color:var(--cinza);
}
.perfil .btn{ flex:none; }

.feed{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:start;
}

/* O embed.js do Instagram substitui o blockquote pelo iframe do post.
   Enquanto isso nao acontece — ou se o script for bloqueado — o card
   abaixo aparece no lugar, mantendo a dobra apresentavel. */
/* O embed.js reaproveita a classe .instagram-media no iframe que ele injeta.
   Sem width explicito o iframe cai no padrao de 300px, entao forcamos a
   largura da coluna e alinhamos borda e raio ao restante da pagina. */
.feed .instagram-media{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  border-color:var(--linha) !important;
  border-radius:var(--raio-sm) !important;
}
.post__fallback{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:26px;
  min-height:340px;
  padding:28px;
  border:1px solid var(--linha);
  border-radius:var(--raio-md);
  background:
    radial-gradient(420px 220px at 88% -8%, rgba(24,200,247,.1), transparent 66%),
    var(--nuvem);
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.post__fallback:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:var(--sombra);
}
.post__glifo{
  display:grid;
  place-items:center;
  width:48px; height:48px;
  border-radius:var(--raio-sm);
  background:var(--branco);
  border:1px solid var(--linha);
  color:var(--azul);
}
.post__glifo svg{ width:24px; height:24px; }
.post__rot{
  font-family:var(--f-display);
  font-size:1.02rem;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.015em;
  color:var(--grafite);
}
.post__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-display);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--azul);
}
.post__cta svg{ width:16px; height:16px; transition:transform .22s ease; }
.post__fallback:hover .post__cta svg{ transform:translateX(3px); }

.feed__nota{
  margin:clamp(28px,3.5vw,40px) 0 0;
  text-align:center;
}

/* ---------- 13. Bloco final ---------- */
.final{
  position:relative;
  isolation:isolate;
  padding:clamp(80px,9vw,124px) 0;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(760px 460px at 50% 0%, rgba(24,200,247,.3), transparent 66%),
    linear-gradient(160deg, var(--azul-700) 0%, var(--azul) 52%, var(--azul-800) 100%);
  overflow:hidden;
}
.final::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background-image:var(--chevrons);
  opacity:.8;
}
.final h2{ font-size:clamp(1.95rem,3.8vw,3.05rem); margin-bottom:.5em; }
.final p{ color:rgba(255,255,255,.86); }
.final__nomes{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin:clamp(38px,5vw,54px) 0 10px;
}
.final__nome{
  font-family:var(--f-display);
  font-size:clamp(1.8rem,4vw,2.7rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
}
.final__nome span{
  padding:2px 12px 3px;
  margin-left:6px;
  border-radius:10px;
  background:var(--amarelo);
  color:var(--azul-900);
}
.final__cargo{
  font-family:var(--f-display);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.final__mote{
  max-width:720px;
  margin:22px auto 0;
  font-family:var(--f-display);
  font-size:clamp(1.02rem,1.9vw,1.28rem);
  font-weight:600;
  line-height:1.45;
  color:var(--amarelo);
}
.final .acoes{ justify-content:center; }
.final .lead{ max-width:680px; margin-inline:auto; }
.final__sem{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 14px;
  margin:30px 0 0;
  padding:0;
  list-style:none;
}
.final__sem li{
  padding:9px 20px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  font-family:var(--f-display);
  font-size:.9rem;
  font-weight:600;
}

/* ---------- 14. Rodapé ---------- */
.rodape{
  padding:clamp(56px,6vw,80px) 0 34px;
  background:var(--azul-950);
  color:rgba(255,255,255,.66);
  font-size:.92rem;
}
.rodape__topo{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(30px,4vw,56px);
  padding-bottom:38px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.rodape__marca .brand{ margin:0 0 16px; }
.rodape__marca p{ max-width:340px; margin:0; }
.rodape h4{
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:16px;
}
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rodape a{ text-decoration:none; transition:color .2s ease; }
.rodape a:hover{ color:var(--amarelo); }
.rodape__legal{
  display:grid;
  gap:14px;
  padding-top:28px;
  font-size:.83rem;
  line-height:1.6;
}
.rodape__dados{
  display:flex;
  flex-wrap:wrap;
  gap:6px 28px;
}
.rodape__dados b{ color:rgba(255,255,255,.86); font-weight:600; }
.rodape__aviso{
  margin:0;
  color:rgba(255,255,255,.46);
  font-style:italic;
}

/* ---------- 15. Revelação ao rolar ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.22,.7,.3,1);
}
.js [data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- 16. Responsivo ---------- */
@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; gap:26px; }
  .pilares{ grid-template-columns:1fr; }
  .propostas-grid{ grid-template-columns:repeat(2,1fr); }
  .feed{ grid-template-columns:repeat(2,1fr); }
  .painel{ grid-template-columns:1fr; }
  .atuacao{ grid-template-columns:1fr; }
  .atuacao__intro{ position:static; }
  .participe{ grid-template-columns:1fr; }
  .quem{ grid-template-columns:1fr; gap:44px; }
  .retrato{ max-width:380px; }
  .credenciais__inner{ grid-template-columns:repeat(2,1fr); }
  .rodape__topo{ grid-template-columns:1fr 1fr; }
  .rodape__marca{ grid-column:1 / -1; }
}

@media (max-width:860px){
  body{ font-size:16px; }
  .nav{
    position:fixed;
    inset:var(--header-h) 0 auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:14px 24px 24px;
    background:rgba(11,26,58,.985);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.12);
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav.is-open{ transform:none; opacity:1; visibility:visible; }
  .nav a{ padding:14px 4px; font-size:1rem; border-radius:0; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav a.is-active::after{ left:4px; right:auto; width:22px; bottom:8px; }
  .nav-toggle{ display:block; }
  .header__cta{ display:none; }

  .proposta-destaque{ grid-template-columns:1fr; gap:20px; }
  .proposta-destaque .btn{ justify-self:start; }
  .propostas-grid{ grid-template-columns:1fr; }
  /* Empilhados, os 6 embeds somavam ~4.600px de rolagem. Viram carrossel
     horizontal com encaixe; o card seguinte aparece pela metade e sinaliza
     que da para arrastar. 326px e a largura minima que o embed do
     Instagram aceita sem se espremer. */
  .feed{
    display:flex;
    grid-template-columns:none;
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);
    padding:0 var(--pad) 6px;
  }
  .feed::-webkit-scrollbar{ display:none; }
  .post{ flex:0 0 clamp(326px, 84%, 360px); scroll-snap-align:start; }
  .perfil{ flex-wrap:wrap; }
  .perfil__dados{ margin-right:0; }
  .perfil .btn{ width:100%; }
  .itens{ grid-template-columns:1fr; }
  .campo--duplo{ grid-template-columns:1fr; }
  .credenciais{ margin-top:-40px; }
  .retrato{ margin-inline:auto; }
  .retrato__selo{ right:0; }
  .retrato::before{ inset:18px -12px -18px 18px; }
}

@media (max-width:560px){
  .credenciais__inner{ grid-template-columns:1fr; }
  .acoes .btn{ width:100%; }
  .rodape__topo{ grid-template-columns:1fr; }
  .billboard{ border-radius:var(--raio-md); }
}

/* ---------- 17. Ajuste fino para celular ---------- */
@media (max-width:640px){

  /* Respiro vertical: 76px acima e abaixo de 10 dobras somavam ~1.500px
     de rolagem so em espaco vazio. */
  .section{ padding:56px 0; }
  .hero{ padding-bottom:64px; }
  .final{ padding:64px 0; }
  .rodape{ padding-top:48px; }

  /* A arte oficial e horizontal: sangrando ate a borda ela ganha os 40px
     de respiro lateral, que num banner 2,17:1 viram altura visivel. */
  .billboard{
    margin-inline:calc(var(--pad) * -1);
    border-radius:0;
    border-inline:0;
  }

  /* Cabia em duas linhas com a segunda orfa */
  .eyebrow{ font-size:.68rem; letter-spacing:.1em; }
  .eyebrow::before{ width:18px; }

  .section__head{ margin-bottom:32px; }
  .hero__grid{ gap:20px; }
  .hero__aside .lead{ font-size:1.04rem; }

  .credencial{ padding:16px 20px; }
  .credencial dd{ font-size:.98rem; }

  /* 654px so de retrato empurrava o texto para fora da primeira tela */
  .retrato{ max-width:300px; }
  .quem{ gap:32px; }

  .pilar{ padding:26px 22px; }
  .pilar p, .item p, .proposta p{ font-size:1rem; }
  .pull{ padding:22px 24px; }

  .proposta, .proposta-destaque{ padding:24px 20px; }
  .proposta__toggle{ display:flex; }
  .proposta.is-recolhida .link-seta{ display:none; }
  .proposta__topo{ margin-bottom:14px; }
  .propostas-grid, .pilares{ gap:14px; }

  .passo{ padding:0 0 30px 54px; }
  .passo__num{ width:40px; height:40px; font-size:.85rem; }
  .passo::before{ left:19px; top:40px; }
  .passo h3{ padding-top:6px; }

  .item{ padding:20px; }
  .relatorio{ padding:26px 22px; }
  .form-card{ padding:26px 20px; }
  .campos{ gap:13px; }

  .final__sem li{ padding:8px 16px; font-size:.85rem; }

  /* "Quero participar do mandato" nao cabia em uma linha com 30px de folga */
  .btn{ padding:16px 20px; }

  .rodape__topo{ padding-bottom:28px; }
}

/* Telas bem estreitas (iPhone SE e similares) */
@media (max-width:380px){
  .section{ padding:48px 0; }
  :root{ --pad:18px; }
  .hero h1{ font-size:1.9rem; }
  .brand__name{ font-size:.94rem; }
  .brand__num{ font-size:.85rem; padding:6px 8px 5px; }
}

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