/* ============================================================
   OSMAR TEIXEIRA 20106
   Bases da identidade visual (manual da IdV):
   azul 2879c5, amarelo ffd200, títulos Boldonse, texto Inter.
   Decisão de layout: azul domina, amarelo é destaque.
   ============================================================ */
:root{
  --blue:#2879c5;
  --blue-deep:#1f5f9e;
  --blue-ink:#123f6d;
  --yellow:#ffd200;
  --yellow-deep:#e0b800;
  --paper:#fbf8ef;
  --ink:#12243a;
  --ink-soft:#4a5f78;
  --white:#ffffff;
  --max:1240px;      /* seções internas */
  --max-home:1200px; /* hero e menu, mais fechados */
  --nav-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ---------- tipografia ---------- */
.display{
  font-family:'Boldonse',system-ui,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.035em;   /* Boldonse é muito fechada, precisa de ar entre as letras */
  line-height:1.42;        /* e de respiro entre as linhas, senão as caixas se tocam */
  word-spacing:.06em;
}
.label{
  font-family:'Inter',sans-serif;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.28em;
}

/* ---------- botão único, reaproveitado ----------
   Sombra dura deslocada para a direita e para baixo, estilo quadrinho.
   No hover o botão "afunda" na direção da sombra, que encolhe junto.
------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:15px;
  padding:15px 28px;border-radius:4px;
  border:2px solid var(--blue-ink);
  transition:transform .13s ease, box-shadow .13s ease, background .15s ease;
  cursor:pointer;
}
.btn .ico-zap{width:17px !important;height:17px !important;fill:currentColor !important}
.btn-solid{
  background:var(--yellow);color:var(--blue-ink);
  box-shadow:5px 5px 0 var(--blue-ink);
}
.btn-solid:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--blue-ink)}
.btn-solid:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--blue-ink)}

.btn-ghost{
  background:transparent;color:var(--yellow);
  border-color:var(--yellow);
  box-shadow:5px 5px 0 rgba(255,210,0,.42);
}
.btn-ghost:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(255,210,0,.42);background:rgba(255,210,0,.10)}
.btn-ghost:active{transform:translate(5px,5px);box-shadow:0 0 0 rgba(255,210,0,.42)}

.btn-sm{padding:11px 22px;font-size:14px;box-shadow:4px 4px 0 var(--blue-ink)}
.btn-sm:hover{box-shadow:2px 2px 0 var(--blue-ink)}

/* ============ BLOCO 01 · TOPO ============ */
/* barra branca flutuando dentro do container, acompanha a rolagem */
.nav{
  position:fixed;top:16px;left:0;right:0;z-index:60;
  transition:top .25s ease;
}
.nav .wrap{padding:0 24px;max-width:var(--max-home)}
.nav-bar{
  height:var(--nav-h);
  background:#fff;
  border-radius:8px;
  box-shadow:0 8px 26px rgba(18,36,58,.16);
  display:flex;align-items:center;gap:28px;
  padding:0 20px 0 22px;
  transition:box-shadow .25s ease;
}
.nav.scrolled{top:10px}
.nav.scrolled .nav-bar{box-shadow:0 10px 34px rgba(18,36,58,.24)}

/* logotipo só tipográfico: duas linhas, nome empilhado.
   Boldonse é alta e fechada, então em caixa dupla o entrelinha
   precisa de folga para as duas palavras não se tocarem. */
.brand{display:block;flex-shrink:0;line-height:1.28}
.brand span{
  font-family:'Boldonse',sans-serif;font-size:15px;
  text-transform:uppercase;letter-spacing:.10em;
  color:var(--blue);display:block;
}

.menu{display:flex;align-items:center;gap:26px;margin-left:auto}
.menu a{
  font-size:14.5px;font-weight:500;color:var(--ink);
  position:relative;padding:6px 0;
}
.menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--blue);transition:right .22s ease;
}
.menu a:hover{color:var(--blue)}
.menu a:hover::after{right:0}
/* o seletor .menu a é mais específico que .btn e comia o padding do botão */
.menu a.btn{padding:11px 22px;color:var(--blue-ink)}
.menu a.btn::after{display:none}

.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--blue);margin:5px 0;border-radius:2px;transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:1040px){
  .nav-toggle{display:block;margin-left:auto;order:3}
  .nav-bar{gap:12px;position:relative}
  .menu{
    position:absolute;top:calc(var(--nav-h) + 8px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-radius:8px;
    box-shadow:0 10px 30px rgba(18,36,58,.18);
    padding:0 20px;
    margin-left:0;
    max-height:0;overflow:hidden;
    transition:max-height .3s ease, padding .3s ease;
  }
  .menu.open{max-height:80vh;padding:8px 20px 22px}
  .menu a{padding:15px 0;border-bottom:1px solid rgba(18,36,58,.10);font-size:16px}
  .menu a::after{display:none}
  .menu .btn{margin-top:18px;justify-content:center;border-bottom:0}
  .nav-cta-desk{display:none}
}
.nav-cta-mob{display:none}
@media(max-width:1040px){.nav-cta-mob{display:inline-flex}}
/* FIM DO BLOCO 01 */

/* ============ BLOCO 02 · HERO ============ */
.hero{
  position:relative;
  background:var(--blue);
  color:#fff;
  padding-top:0;   /* o menu flutua por cima, a hero fecha exatos 900px */
  overflow:hidden;
}
/* ---------- fundo da hero ----------
   Arte: imagem/Osmar-banner.webp. A estampa da IdV já vem embutida
   na base dela, por isso a faixa que existia aqui em CSS foi removida.
------------------------------------------------------------------- */
.hero-bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-bg .art{
  position:absolute;inset:0;
  background-image:url('../images/Osmar-banner.webp');
  background-size:cover;
  /* ancorado embaixo e ao centro. Testei preso à direita para não
     cortar o terceiro da foto, mas aí o grupo avança sobre o texto
     e a hero perde a leitura. Centralizado é o melhor equilíbrio. */
  background-position:center bottom;
  background-repeat:no-repeat;
}
/* véu leve, só para segurar o texto se a arte mudar.
   A esquerda da arte já é azul chapado, então quase não precisa. */
.hero-bg .veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,63,109,.34) 0%,rgba(18,63,109,.10) 48%,rgba(18,63,109,0) 72%);
}

/* ---------- conteúdo alinhado à esquerda ---------- */
.hero-inner{
  max-width:var(--max-home);
  position:relative;z-index:2;
  height:900px;
  /* o menu flutua por cima, então o conteúdo começa depois dele */
  padding-top:calc(var(--nav-h) + 32px);
  display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;
  text-align:left;
}
.hero-copy{max-width:700px}
.hero-copy .label{color:var(--yellow);display:block;margin-bottom:24px}

.hero-h1{
  font-size:clamp(30px,4.4vw,56px);
  margin:0 0 26px;
  color:#fff;
  max-width:13ch;   /* a quebra vem daqui, não de <br> */
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(18,63,109,.35);
}
.hero-h1 .hl{color:var(--yellow)}
.hero-lead{
  font-size:clamp(17px,1.4vw,21px);
  font-weight:500;
  color:rgba(255,255,255,.94);
  max-width:38ch;margin:0;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:30px}

/* número em destaque, logo abaixo do título: é a informação que
   precisa ser decorada, então vem antes de qualquer explicação */
.hero-num{display:block;margin:0 0 30px}
.hero-num-k{
  display:block;
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin-bottom:8px;
}
.hero-num-v{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-family:'Boldonse',sans-serif;
  font-size:clamp(19px,2.1vw,27px);
  letter-spacing:.04em;line-height:1.2;
  text-transform:uppercase;color:#fff;
}
.hero-num-v em{
  font-style:normal;
  font-size:clamp(30px,4vw,52px);
  color:var(--yellow);
  transform:skewX(-9deg);display:inline-block;
  text-shadow:0 2px 18px rgba(18,63,109,.4);
}
.hero-expert{display:none}

/* ---------- faixa da IdV, correndo devagar para o lado ----------
   A arte tem 1890px de largura. A animação desloca exatamente essa
   distância e reinicia, então o loop é imperceptível: enquanto uma
   repetição sai pela esquerda, a seguinte já entrou pela direita.
   1890px em 150s dá uns 12px por segundo, quase um deslizar.
------------------------------------------------------------------- */
.faixa{
  position:relative;z-index:3;
  height:64px;
  background-image:url('../images/faixa-osmar.png');
  background-repeat:repeat-x;
  background-size:1890px 64px;
  animation:faixa-desliza 150s linear infinite;
  will-change:background-position;
}
@keyframes faixa-desliza{
  from{background-position:0 0}
  to{background-position:-1890px 0}
}
@media(prefers-reduced-motion:reduce){.faixa{animation:none}}

/* versão menor, usada para emoldurar a agenda em cima e embaixo.
   A distância da animação muda junto com a largura da arte, senão
   o loop deixa de fechar e aparece um salto. */
.faixa--sm{
  height:46px;
  background-size:1360px 46px;
  animation-name:faixa-desliza-sm;
}
@keyframes faixa-desliza-sm{
  from{background-position:0 0}
  to{background-position:-1360px 0}
}
@media(max-width:640px){
  .faixa{height:44px;background-size:1300px 44px}
  @keyframes faixa-desliza{from{background-position:0 0}to{background-position:-1300px 0}}
}

/* ---------- hero no mobile ----------
   Troca a arte pelo banner vertical, o texto sobe para o topo e o
   recorte dele fecha a seção encostado na base, sem respiro embaixo.
------------------------------------------------------------------- */
@media(max-width:860px){
  .hero{padding-bottom:0}
  .hero-bg .art{
    background-image:url('../images/banner-mobile.png');
    background-position:center top;
  }
  .hero-bg .veil{
    background:linear-gradient(180deg,rgba(18,63,109,.42) 0%,rgba(18,63,109,.12) 52%,rgba(18,63,109,0) 100%);
  }
  .hero-inner{
    height:auto;min-height:0;
    /* respiro lateral do conteúdo. A imagem abaixo cancela isso
       com margem negativa, porque ela pode encostar nas bordas */
    padding:calc(var(--nav-h) + 40px) 20px 0;
    justify-content:flex-start;
  }
  /* tudo centralizado no mobile */
  .hero-inner{align-items:center;text-align:center}
  .hero-copy{max-width:none}
  /* corpo menor para o título fechar em duas linhas */
  .hero-h1{max-width:none;font-size:clamp(23px,6.4vw,30px);margin-bottom:18px}
  .hero-lead{max-width:38ch;margin-left:auto;margin-right:auto;
             font-size:15.5px;line-height:1.5;margin-bottom:26px}
  .hero-copy .label{margin-bottom:18px;font-size:10px;letter-spacing:.22em}
  .hero-actions{justify-content:center;margin-bottom:24px}
  .hero-num{margin-bottom:24px}
  .hero-num-v{justify-content:center}
  .hero-lead{margin-left:auto;margin-right:auto}
  /* o recorte fecha a hero, na largura inteira da tela.
     flex:0 0 auto impede o container em coluna de esticar a imagem,
     e as margens negativas cancelam o padding lateral de 20px para
     ela ir de borda a borda. height:auto trava a proporção. */
  .hero-expert{
    display:block;
    flex:0 0 auto;
    width:calc(100% + 40px);
    max-width:none;
    height:auto;
    margin:26px -20px 0;
    position:relative;z-index:2;
  }
  .hero-copy{padding:0}
}
@media(max-width:520px){
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-expert{margin-top:20px}
}

/* FIM DO BLOCO 02 */

/* ============ BLOCO 03 · COMO COMEÇOU ============
   Fundo claro logo depois do azul da hero: a alternância é o que
   impede a página de virar um bloco só. Aqui ele fala em primeira
   pessoa, então o texto tem corpo maior e medida mais curta.
--------------------------------------------------------------- */
.hist{position:relative;background:var(--paper);padding:110px 0 0;overflow:hidden}
.hist .label{color:var(--blue);display:block;margin-bottom:18px}
.hist-h2{
  font-size:clamp(24px,2.7vw,35px);
  color:var(--ink);margin:0 0 34px;max-width:15ch;
}
.hist-h2 .hl{color:var(--blue)}

.hist-grid{display:grid;grid-template-columns:1fr 460px;gap:64px;align-items:start}
/* a foto não cabe inteira na altura da tela junto com o texto,
   então ela gruda e acompanha a rolagem enquanto a narrativa passa.
   Para no fim do grid, sem invadir a linha do tempo. */
.hist-media{position:sticky;top:calc(var(--nav-h) + 40px)}
.hist-text p{font-size:18.5px;color:var(--ink-soft);margin:0 0 22px;max-width:52ch}
.hist-text p:first-of-type::first-letter{
  /* capitular: sinaliza que aqui começa uma narrativa, não uma lista */
  font-family:'Boldonse',sans-serif;
  font-size:52px;line-height:.9;
  float:left;margin:6px 12px 0 0;color:var(--blue);
}
.hist-text strong{color:var(--ink);font-weight:600}

/* citação puxada, quebra o texto corrido no meio */
.hist-quote{
  border-left:5px solid var(--yellow);
  padding:6px 0 6px 22px;margin:34px 0;
  font-size:21px;line-height:1.45;font-weight:500;color:var(--ink);
  max-width:46ch;
}

/* foto em moldura de quadrinho, mesma linguagem do botão */
.hist-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hist-photo{
  position:relative;
  border:2px solid var(--blue-ink);border-radius:6px;
  box-shadow:9px 9px 0 var(--blue-ink);
  background:#e9eef4;
  aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* PLACEHOLDER: trocar por <img src="imagem/osmar-radio-arquivo.jpg" alt="..."> */
.hist-photo .ph{
  background:repeating-linear-gradient(45deg,#dde5ee,#dde5ee 10px,#e9eef4 10px,#e9eef4 20px);
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:13px;font-weight:600;color:var(--ink-soft);padding:24px;letter-spacing:.03em;
}
.hist-cap{
  margin-top:16px;font-size:14px;color:var(--ink-soft);
  border-left:3px solid var(--yellow);padding-left:12px;max-width:38ch;
}

/* linha do tempo, quatro marcos, encostada na base da seção */
.tl{margin-top:86px;border-top:2px solid rgba(18,63,109,.16)}
.tl-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.tl-item{position:relative;padding:34px 22px 74px 0}
.tl-item::before{
  content:"";position:absolute;left:0;top:-9px;
  width:16px;height:16px;border-radius:50%;
  background:var(--yellow);border:2px solid var(--blue-ink);
}
.tl-item:last-child::before{background:var(--blue);border-color:var(--blue-ink)}
.tl-yr{font-family:'Boldonse',sans-serif;font-size:clamp(15px,1.5vw,19px);line-height:1.25;color:var(--blue);margin-bottom:10px;letter-spacing:.03em}
.tl-item:last-child .tl-yr{color:var(--blue-ink)}
.tl-d{font-size:15px;color:var(--ink-soft);max-width:24ch}

.hist-cta{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  padding:0 0 100px;
}
/* botão de contorno, versão do botão para fundo claro */
.btn-outline{
  background:transparent;color:var(--blue-ink);
  border-color:var(--blue-ink);
  box-shadow:5px 5px 0 rgba(18,63,109,.24);
}
.btn-outline:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(18,63,109,.24);background:rgba(18,63,109,.05)}
.btn-outline:active{transform:translate(5px,5px);box-shadow:0 0 0 rgba(18,63,109,.24)}

@media(max-width:960px){
  .hist{padding-top:74px}
  .hist-grid{grid-template-columns:1fr;gap:40px}
  .hist-media{position:static}   /* em coluna única, grudar não faz sentido */
  /* mais alta e presa pelo topo: em 4:3 o corte pegava a cabeça */
  .hist-photo{aspect-ratio:4/4.2;max-width:520px}
  .hist-photo img{object-position:top center}
  .tl-grid{grid-template-columns:1fr 1fr}
  .tl-item{padding:30px 20px 46px 0}
  .tl{margin-top:60px}
  .hist-cta{padding-bottom:70px}
}
@media(max-width:560px){
  /* em coluna única a linha do tempo vira vertical: o filete passa
     a correr na lateral e as bolinhas se penduram nele */
  .tl{border-top:0;margin-top:48px}
  .tl-grid{grid-template-columns:1fr}
  .tl-item{
    padding:0 0 30px 28px;
    border-left:2px solid rgba(18,63,109,.16);
  }
  .tl-item:last-child{border-left-color:transparent;padding-bottom:0}
  .tl-item::before{left:-9px;top:4px}
  .hist-cta .btn{width:100%;justify-content:center}
}
/* FIM DO BLOCO 03 */

/* ============ BLOCO 04 · PROPOSTAS ============
   Formato de aba. Cinco eixos ocupam uma linha de botões e o conteúdo
   troca no mesmo lugar, sem a página crescer. Cada eixo mantém a
   estrutura problema / proposta / como cobrar, que é o que separa
   proposta de promessa, e ganha espaço fixo para uma foto.
--------------------------------------------------------------- */
.prop{background:#fff;padding:110px 0;border-top:1px solid rgba(18,63,109,.10)}
.prop .label{color:var(--blue);display:block;margin-bottom:18px}
.prop-head{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:end;margin-bottom:44px}
.prop-h2{font-size:clamp(26px,3.1vw,40px);color:var(--ink);margin:0;max-width:21ch}
.prop-h2 .hl{color:var(--blue)}
.prop-intro{font-size:17px;color:var(--ink-soft);margin:0;text-align:right}

/* ---------- barra de abas ---------- */
.tabs{
  display:flex;gap:12px;flex-wrap:wrap;
  margin-bottom:-2px;position:relative;z-index:2;
}
.tab{
  display:flex;align-items:center;gap:11px;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:600;
  color:var(--ink);background:#fff;
  border:2px solid var(--blue-ink);border-radius:6px 6px 0 0;
  padding:14px 20px;cursor:pointer;text-align:left;
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.tab:hover{background:var(--paper)}
.tab .tn{
  font-family:'Boldonse',sans-serif;font-size:13px;letter-spacing:.03em;
  color:var(--blue);
}
.tab[aria-selected="true"]{
  background:var(--yellow);border-bottom-color:var(--yellow);
  color:var(--blue-ink);
}
.tab[aria-selected="true"] .tn{color:var(--blue-ink)}
.tab .tt{max-width:20ch;line-height:1.25}

/* ---------- painel ---------- */
.panel{
  border:2px solid var(--blue-ink);border-radius:0 6px 6px 6px;
  box-shadow:8px 8px 0 rgba(18,63,109,.18);
  background:#fff;overflow:hidden;
}
.panel[hidden]{display:none}
.panel-grid{display:grid;grid-template-columns:.85fr 1.15fr;min-height:420px}

.panel-media{position:relative;background:#e9eef4;border-right:2px solid var(--blue-ink)}
.panel-media img{width:100%;height:100%;object-fit:cover;display:block}
/* PLACEHOLDER: trocar por <img> do tema.
   Sugestão: 01 fila de posto, 02 rua de bairro, 03 porto,
   04 creche, 05 quadra ou praça. */
.panel-media .ph{
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,#dde5ee,#dde5ee 10px,#e9eef4 10px,#e9eef4 20px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:22px;letter-spacing:.03em;
}
.panel-body{padding:34px 38px 36px}
.panel-ttl{font-size:clamp(20px,2.1vw,27px);font-weight:700;line-height:1.3;color:var(--ink);margin:0 0 20px;max-width:22ch}
.panel-prob{font-size:18px;color:var(--ink-soft);margin:0 0 26px;max-width:48ch}
.panel-acts{margin:0;padding:0;list-style:none}
.panel-acts li{position:relative;padding-left:24px;margin-bottom:14px;font-size:16px;line-height:1.55;color:var(--ink-soft);max-width:52ch}
.panel-acts li b{color:var(--ink);font-weight:700}
.panel-acts li::before{
  content:"";position:absolute;left:0;top:8px;
  width:11px;height:11px;background:var(--yellow);
  border:2px solid var(--blue-ink);border-radius:2px;
}


@media(max-width:1040px){
  .panel-grid{grid-template-columns:1fr}
  .panel-media{aspect-ratio:16/9;border-right:0;border-bottom:2px solid var(--blue-ink)}
  /* aqui as abas deixam de ser pasta de arquivo e viram botões
     soltos, que quebram linha. Rolagem lateral não se anuncia
     sozinha e a pessoa não descobre que existe mais conteúdo. */
  .tabs{flex-wrap:wrap;gap:10px;margin-bottom:20px}
  .tab{
    flex:0 0 auto;padding:11px 16px;font-size:14px;
    border-radius:4px;
  }
  .tab[aria-selected="true"]{
    border-color:var(--blue-ink);
    box-shadow:4px 4px 0 var(--blue-ink);
  }
  .tab .tt{max-width:none;white-space:nowrap}
  .panel{border-radius:6px}
}
@media(max-width:760px){
  .prop{padding:74px 0}
  .prop-head{grid-template-columns:1fr;gap:18px;align-items:start;text-align:center}
  .prop-h2,.prop-intro{max-width:none;margin-left:auto;margin-right:auto;text-align:center}
  .panel-body{padding:26px 22px}
  .panel{border-radius:6px}
}
/* FIM DO BLOCO 04 */

/* ============ BLOCO 05 · AGENDA ============
   Sendo campanha de rua, a agenda é uma das poucas razões reais de
   alguém voltar ao site. Por isso ela tem filtro por tipo e cada item
   termina em uma ação, não só em informação.
--------------------------------------------------------------- */
/* fundo azul: a agenda é o bloco de ação da página, então ela corta
   a sequência de fundos claros e puxa o olho de volta */
.ag{background:var(--blue);padding:92px 0}
.ag .label{color:var(--yellow);display:block;margin-bottom:18px}
.ag-head{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:end;margin-bottom:38px}
.ag-h2{font-size:clamp(26px,3.1vw,40px);color:#fff;margin:0;max-width:14ch}
.ag-h2 .hl{color:var(--yellow)}
.ag-intro{font-size:17px;color:rgba(255,255,255,.9);margin:0}

.ag-filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.filtro{
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  color:var(--ink);background:#fff;
  border:2px solid var(--blue-ink);border-radius:4px;
  padding:10px 18px;cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.filtro:hover{background:#fff8d9}
.filtro[aria-pressed="true"]{background:var(--yellow);color:var(--blue-ink)}

.ag-lista{display:flex;flex-direction:column;gap:14px}
.ag-item{
  display:grid;grid-template-columns:96px 1fr auto;gap:24px;align-items:center;
  background:#fff;border:2px solid var(--blue-ink);border-radius:6px;
  box-shadow:5px 5px 0 rgba(18,63,109,.16);
  padding:18px 22px;
  transition:transform .16s ease, box-shadow .16s ease;
}
.ag-item:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue-ink)}
.ag-item{box-shadow:5px 5px 0 var(--blue-ink)}
.ag-item[hidden]{display:none}

.ag-data{
  border:2px solid var(--blue-ink);border-radius:4px;
  background:var(--yellow);text-align:center;padding:10px 6px;
}
.ag-data .d{font-family:'Boldonse',sans-serif;font-size:21px;line-height:1;color:var(--blue-ink)}
.ag-data .m{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink);margin-top:6px}

.ag-tipo{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);
  border:1.5px solid rgba(40,121,197,.4);border-radius:3px;
  padding:3px 9px;margin-bottom:9px;
}
.ag-ttl{font-size:19px;font-weight:700;color:var(--ink);margin:0 0 6px;line-height:1.3}
.ag-loc{font-size:15px;color:var(--ink-soft);margin:0}
.ag-loc b{color:var(--ink);font-weight:600}

.ag-vazio{
  background:rgba(255,255,255,.08);border:2px dashed rgba(255,255,255,.45);
  border-radius:6px;
  padding:34px;text-align:center;color:rgba(255,255,255,.9);font-size:16px;
}
.ag-vazio[hidden]{display:none}


@media(max-width:880px){
  .ag{padding:74px 0}
  .ag-head{grid-template-columns:1fr;gap:22px;align-items:start}
  .ag-item{grid-template-columns:76px 1fr;gap:16px}
  .ag-item .btn{grid-column:1 / -1;width:100%;justify-content:center;margin-top:6px}
}
/* FIM DO BLOCO 05 */

/* ============ BLOCO 06 · MATERIAIS ============
   O bloco mais forte da página e o que a referência não tem.
   Jingle toca aqui mesmo, sem download obrigatório, porque o
   posicionamento é rádio e som precisa ser ouvido de imediato.
--------------------------------------------------------------- */
.mat{background:var(--paper);padding:110px 0;border-top:1px solid rgba(18,63,109,.10)}
.mat .label{color:var(--blue);display:block;margin-bottom:18px}
.mat-head{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:end;margin-bottom:40px}
.mat-h2{font-size:clamp(26px,3.1vw,40px);color:var(--ink);margin:0;max-width:16ch}
.mat-h2 .hl{color:var(--blue)}
.mat-intro{font-size:17px;color:var(--ink-soft);margin:0;text-align:right}

/* ---------- player do jingle ---------- */
.player{
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  background:var(--blue);border:2px solid var(--blue-ink);border-radius:6px;
  box-shadow:7px 7px 0 var(--blue-ink);
  padding:22px 26px;margin-bottom:26px;
}
.play{
  width:62px;height:62px;flex-shrink:0;
  border-radius:50%;border:2px solid var(--blue-ink);
  background:var(--yellow);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .14s ease;
}
.play:hover{transform:scale(1.06)}
.play svg{width:20px;height:20px;fill:var(--blue-ink);margin-left:3px}
.play.tocando svg{margin-left:0}

.player-info{min-width:0}
.player-ttl{font-size:18px;font-weight:700;color:#fff;margin:0 0 3px}
.player-sub{font-size:14px;color:rgba(255,255,255,.78);margin:0 0 12px}
.barra{
  height:8px;border-radius:4px;background:rgba(255,255,255,.24);
  cursor:pointer;position:relative;overflow:hidden;
}
.barra .preenche{position:absolute;inset:0;right:100%;background:var(--yellow);transition:right .1s linear}
.player-tempo{
  font-family:'Boldonse',sans-serif;font-size:14px;color:var(--yellow);
  letter-spacing:.03em;white-space:nowrap;
}

/* ---------- grade de downloads ---------- */
.mat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mcard{
  background:#fff;border:2px solid var(--blue-ink);border-radius:6px;
  box-shadow:5px 5px 0 rgba(18,63,109,.18);
  padding:26px 26px 24px;
  display:flex;flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease;
}
.mcard:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue-ink)}
.mcard-ico{
  width:46px;height:46px;border-radius:5px;
  border:2px solid var(--blue-ink);background:var(--yellow);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.mcard-ico svg{width:22px;height:22px;fill:none;stroke:var(--blue-ink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.mcard h3{font-size:18px;margin:0 0 8px;color:var(--ink)}
.mcard p{font-size:15.5px;color:var(--ink-soft);margin:0 0 20px;max-width:30ch}
.mcard .btn{margin-top:auto;align-self:flex-start}


@media(max-width:1100px){
  .mat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  .mat{padding:74px 0}
  .mat-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .mat-intro{text-align:left}
  .mat-grid{grid-template-columns:1fr}
  .player{grid-template-columns:auto 1fr;gap:18px;padding:20px}
  .player-tempo{grid-column:1 / -1;text-align:right}
  .mcard .btn{width:100%;justify-content:center}
}
/* FIM DO BLOCO 06 */

/* ============ BLOCO 07 · MOLDURA DE PERFIL ============
   O apoiador sobe a própria foto, ela entra no miolo do sticker e ele
   baixa pronto para usar como foto de perfil. Tudo acontece no
   navegador dele: a imagem nunca sai do aparelho, não sobe para
   servidor nenhum, o que evita qualquer questão de dado pessoal.
   O miolo transparente do PNG é um círculo de raio 0,4504 da largura,
   medido no próprio arquivo. É esse número que recorta a foto.
--------------------------------------------------------------- */
/* a moldura vive dentro do bloco de materiais, separada só por um
   filete: é material de campanha como os outros, não outra seção */
.mold{margin-top:76px;padding-top:64px;border-top:2px solid rgba(18,63,109,.14)}
.mold .label{color:var(--blue);display:block;margin-bottom:18px}
.mold-head{text-align:center;margin-bottom:40px}
.mold-h2{
  font-size:clamp(26px,3.1vw,40px);color:var(--ink);
  margin:0 auto;max-width:18ch;
}
.mold-h2 .hl{color:var(--blue)}

/* a ferramenta fica centralizada no bloco, com a prévia e os
   controles lado a lado e largura própria, não colada nas bordas */
.mold-grid{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,380px);
  gap:56px;align-items:center;justify-content:center;
}

/* área de pré-visualização */
.palco{
  position:relative;width:100%;aspect-ratio:1;
  border:2px dashed rgba(18,63,109,.35);border-radius:8px;
  background:var(--paper);
  overflow:hidden;
}
.palco.tem-foto{border-style:solid;border-color:var(--blue-ink);box-shadow:7px 7px 0 var(--blue-ink)}
.palco.arrastando{border-color:var(--blue);background:#eef5fd}
#telaMoldura{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#telaMoldura.pegando{cursor:grabbing}

/* convite para subir a foto, some quando a foto entra */
.solte{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:24px;
  background:transparent;border:0;cursor:pointer;
  font-family:'Inter',sans-serif;
}
.palco.tem-foto .solte{display:none}
.solte-cx{
  background:#fff;border:2px solid var(--blue-ink);border-radius:6px;
  box-shadow:5px 5px 0 var(--blue-ink);
  padding:22px 26px;
}
.solte svg{width:26px;height:26px;fill:none;stroke:var(--blue-ink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 10px}
.solte b{display:block;font-size:16px;color:var(--ink);margin-bottom:3px}
.solte span{font-size:13px;color:var(--ink-soft)}

/* controles */
.mold-ctrl{display:flex;flex-direction:column;gap:20px;max-width:420px}
.mold-acoes{display:flex;flex-direction:column;gap:12px}
.mold-acoes .btn{width:100%;justify-content:center}
.btn[disabled]{opacity:.42;pointer-events:none}

.zoom{opacity:.4;pointer-events:none;transition:opacity .2s ease}
.zoom.ativo{opacity:1;pointer-events:auto}
.zoom-topo{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink);
}
.zoom-topo em{font-style:normal;font-family:'Boldonse',sans-serif;font-size:13px;color:var(--blue);letter-spacing:.03em}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:10px;
  background:var(--paper);border:2px solid var(--blue-ink);border-radius:6px;outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:4px;
  background:var(--yellow);border:2px solid var(--blue-ink);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:4px;
  background:var(--yellow);border:2px solid var(--blue-ink);cursor:pointer;
}

.mold-dica{
  font-size:14.5px;color:var(--ink-soft);
  border-left:3px solid var(--yellow);padding-left:14px;
}
.mold-dica b{color:var(--ink)}

@media(max-width:900px){
  .mold{margin-top:52px;padding-top:44px}
  .mold-grid{grid-template-columns:1fr;gap:32px;max-width:460px;margin:0 auto}
  .mold-ctrl{max-width:none}
}
/* FIM DO BLOCO 07 */

/* ============ BLOCO 08 · NOTÍCIAS ============
   Três cards, sempre. Com dois a seção parece abandonada, que é o
   que acontece na referência. O veículo aparece junto da data porque
   matéria de imprensa vale mais que post próprio.
--------------------------------------------------------------- */
.news{background:#fff;padding:110px 0;border-top:1px solid rgba(18,63,109,.10)}
.news .label{color:var(--blue);display:block;margin-bottom:18px}
.news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:40px}
.news-h2{font-size:clamp(26px,3.1vw,40px);color:var(--ink);margin:0;max-width:16ch}
.news-h2 .hl{color:var(--blue)}

.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ncard{
  display:flex;flex-direction:column;
  background:#fff;border:2px solid var(--blue-ink);border-radius:6px;
  box-shadow:5px 5px 0 rgba(18,63,109,.18);
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease;
}
.ncard:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue-ink)}
.ncard-media{position:relative;aspect-ratio:16/10;background:#e9eef4;border-bottom:2px solid var(--blue-ink)}
/* PLACEHOLDER: trocar por <img> da matéria */
.ncard-media .ph{
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,#dde5ee,#dde5ee 10px,#e9eef4 10px,#e9eef4 20px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:12px;font-weight:600;color:var(--ink-soft);padding:16px;letter-spacing:.03em;
}
.ncard-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.ncard-meta{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin-bottom:10px;
}
.ncard-meta b{color:var(--ink-soft);font-weight:700}
.ncard h3{font-size:18px;line-height:1.35;color:var(--ink);margin:0 0 10px}
.ncard p{font-size:15px;color:var(--ink-soft);margin:0 0 18px}
.ncard-link{
  margin-top:auto;font-size:14px;font-weight:700;color:var(--blue-ink);
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:2px solid var(--yellow);align-self:flex-start;padding-bottom:2px;
}
.ncard-link:hover{color:var(--blue)}

@media(max-width:880px){
  .news{padding:74px 0}
  .news-grid{grid-template-columns:1fr}
  .news-head .btn{width:100%;justify-content:center}
}
/* FIM DO BLOCO 07 */

/* ============ BLOCO 08 · CONTATO ============
   Sem formulário. Campanha responde no WhatsApp e no direct, não em
   caixa de e-mail, e formulário sem destino definido é promessa que
   a página não cumpre. O grupo vem em destaque porque é o único
   canal aqui que a pessoa entra e fica.
--------------------------------------------------------------- */
.cont{background:#fff;padding:110px 0;border-top:1px solid rgba(18,63,109,.10)}
.cont .label{color:var(--blue);display:block;margin-bottom:18px}
.cont-head{margin-bottom:44px;max-width:640px}
.cont-h2{font-size:clamp(26px,3.1vw,40px);color:var(--ink);margin:0 0 18px;max-width:16ch}
.cont-h2 .hl{color:var(--blue)}
.cont-lead{font-size:17.5px;color:var(--ink-soft);margin:0;max-width:52ch}

.cont-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}
.canal{
  display:flex;flex-direction:column;
  border:2px solid var(--blue-ink);border-radius:6px;
  background:#fff;padding:28px 28px 26px;
  box-shadow:5px 5px 0 rgba(18,63,109,.18);
  transition:transform .16s ease, box-shadow .16s ease;
}
.canal:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue-ink)}
/* o grupo é o canal principal, então é o único amarelo */
.canal--destaque{background:var(--yellow);box-shadow:6px 6px 0 var(--blue-ink)}

.canal-ico{
  width:46px;height:46px;border-radius:5px;
  border:2px solid var(--blue-ink);background:var(--yellow);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.canal--destaque .canal-ico{background:#fff}
.canal-ico svg{width:22px;height:22px;fill:none;stroke:var(--blue-ink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* o glifo do WhatsApp é uma silhueta preenchida, não um traçado */
.ico-zap{fill:var(--blue-ink) !important;stroke:none !important;width:23px !important;height:23px !important}

.canal h3{font-size:19px;margin:0 0 8px;color:var(--ink)}
.canal--destaque h3{font-size:22px;color:var(--blue-ink)}
.canal p{font-size:15.5px;color:var(--ink-soft);margin:0 0 22px;max-width:32ch}
.canal--destaque p{color:rgba(18,63,109,.82)}
/* o e-mail aparece escrito, para quem prefere copiar em vez de
   abrir o cliente de e-mail do navegador */
.canal-email{
  display:block;font-size:15px;font-weight:600;color:var(--blue-ink);
  word-break:break-all;line-height:1.45;
  border-bottom:2px solid var(--yellow);
  align-self:flex-start;margin:-8px 0 22px;padding-bottom:3px;
}
.canal-email:hover{color:var(--blue)}
.canal .btn{margin-top:auto;align-self:flex-start}
.canal--destaque .btn{background:var(--blue-ink);color:#fff;border-color:var(--blue-ink);box-shadow:5px 5px 0 rgba(18,63,109,.35)}
.canal--destaque .btn:hover{box-shadow:3px 3px 0 rgba(18,63,109,.35)}

.cont-nota{
  margin-top:30px;font-size:15px;color:var(--ink-soft);
  border-left:3px solid var(--yellow);padding-left:16px;max-width:56ch;
}

@media(max-width:880px){
  .cont{padding:74px 0}
  .cont-grid{grid-template-columns:1fr}
  .canal p{max-width:none}
  .canal .btn{width:100%;justify-content:center}
}
/* FIM DO BLOCO 08 */

/* ============ BLOCO 09 · CTA FINAL ============
   Único bloco escuro da página inteira, e é isso que faz o olho
   parar nele. O número aparece em dígitos separados, do jeito que
   se digita na urna, porque é o que a pessoa precisa decorar.
--------------------------------------------------------------- */
.cta{background:var(--blue-ink);color:#fff;padding:64px 0 0;overflow:hidden}
.cta-grid{
  display:grid;grid-template-columns:1fr minmax(0,760px);
  gap:16px;align-items:end;
}
.cta-txt{padding-bottom:96px;padding-top:32px}
/* a foto encosta na base do bloco, como na hero, e estoura um pouco
   a coluna para ganhar presença sem empurrar o texto */
.cta-foto{
  width:calc(100% + 110px);max-width:none;height:auto;
  display:block;align-self:end;margin-right:-110px;
}
.cta .label{color:var(--yellow);display:block;margin-bottom:22px}
.cta h2{
  font-size:clamp(24px,2.9vw,38px);color:#fff;margin:0 0 30px;max-width:17ch;
}
.urna{
  display:inline-flex;gap:12px;margin-bottom:30px;
}
.urna span{
  font-family:'Boldonse',sans-serif;
  font-size:clamp(30px,5vw,58px);line-height:1;
  color:var(--blue-ink);background:var(--yellow);
  border:2px solid #fff;border-radius:6px;
  padding:16px 8px;min-width:clamp(52px,7vw,86px);
  box-shadow:5px 5px 0 rgba(0,0,0,.35);
  /* flex centraliza de verdade: com text-align o "1" fica torto,
     porque a Boldonse dá ao dígito uma lateral maior que a outra */
  display:flex;align-items:center;justify-content:center;
  text-indent:.04em;
}
.cta p{font-size:17.5px;color:rgba(255,255,255,.82);margin:0 0 30px;max-width:40ch}
.cta-acoes{display:flex;gap:16px;flex-wrap:wrap}

/* ============ BLOCO 10 · RODAPÉ ============ */
.foot{background:var(--blue);color:#fff;padding:64px 0 0}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;padding-bottom:48px}
.foot-brand{margin-bottom:18px;line-height:1.28}
.foot-brand span{
  font-family:'Boldonse',sans-serif;font-size:20px;
  text-transform:uppercase;letter-spacing:.10em;
  color:var(--yellow);display:block;
}
.foot p{font-size:15px;color:rgba(255,255,255,.82);margin:0 0 8px;max-width:34ch}
.foot h3{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);margin:0 0 14px;
}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot li a,.foot .lk{font-size:15px;color:rgba(255,255,255,.85)}
.foot li a:hover,.foot .lk:hover{color:var(--yellow)}

.legal{
  border-top:1px solid rgba(255,255,255,.22);
  padding:22px 0 26px;
  font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.7);
}
.legal b{color:rgba(255,255,255,.9);font-weight:600}

@media(max-width:880px){
  .cta{padding:70px 0 0}
  .cta-grid{grid-template-columns:1fr;gap:34px}
  .cta-txt{padding-bottom:0}
  .cta-foto{width:calc(100% + 40px);max-width:none;margin:0 -20px}
  .cta-acoes .btn{width:100%;justify-content:center}
  .urna{gap:7px}
  .foot-grid{grid-template-columns:1fr;gap:34px}
}
/* FIM DO BLOCO 10 */