/* =========================================================
   Mauro Eduardo 13100 — folha de estilo
   Layout de referência: 1440px (desktop) e 440px (mobile)
   ========================================================= */

:root{
  /* Cores da campanha */
  --vermelho:        #DA0022;
  --vermelho-escuro: #C31C2E;
  --amarelo:         #F4DA33;
  --amarelo-claro:   #F6E259;
  --creme:           #FCFAE5;
  --azul:            #293C85;
  --azul-social:     #487FD2;
  --ciano:           #71C6D6;
  --branco:          #FFFFFF;

  /* Medidas do layout */
  --largura-conteudo: 1296px;
  --largura-rodape:   1070px;
  --largura-coluna:   410px;
  --painel-hero:      592px;
  --altura-hero:      912px;

  --raio-botao: 26px;
  --raio-card:  12px;

  --fonte: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------- base ---------------- */

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--branco);
  color:var(--azul);
  font-family:var(--fonte);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,p,ul,figure{ margin:0; }
ul{ list-style:none; padding:0; }
img{ display:block; max-width:100%; }
a{ color:inherit; }

.sr-apenas{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

.pular-para-conteudo{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--vermelho); color:var(--branco);
  padding:12px 20px; border-radius:0 0 12px 12px;
  font-weight:700; text-decoration:none;
  transition:top .18s ease;
}
.pular-para-conteudo:focus{ top:0; }

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

/* ---------------- botões ---------------- */

.botao{
  display:inline-flex; align-items:center; gap:18px;
  height:52px; padding:0 17px;
  border-radius:var(--raio-botao);
  font-size:16px; font-weight:700; line-height:1;
  color:var(--vermelho); text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.botao--amarelo{ background:var(--amarelo); }
.botao--creme{   background:var(--creme); }
.botao--largo{   height:53px; padding:0 18px; font-size:20px; }
.botao__seta{ flex:none; width:20px; height:15px; }

.botao:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.16); }
.botao:active{ transform:translateY(0); box-shadow:none; }

/* ---------------- menu ---------------- */

.topo{
  position:absolute; top:0; left:0; right:0; z-index:30;
  padding:48px 0 0;
}
.menu{ max-width:1440px; margin:0 auto; padding:0 117px; }

.menu__barra{
  display:flex; align-items:center;
  width:fit-content; height:52px;
  padding:0 20px 0 14px;
  background:var(--amarelo);
  border-radius:var(--raio-botao);
}

.menu__lista{ display:flex; align-items:center; flex-wrap:nowrap; gap:32px; }
.menu__lista a{
  white-space:nowrap;
  font-size:16px; font-weight:700; color:var(--vermelho-escuro);
  text-decoration:none;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
}
.menu__lista a:hover,
.menu__lista a:focus-visible{ text-decoration:underline; }

.menu__atalho,
.menu__botao{ display:none; }

/* ---------------- hero ---------------- */

.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr var(--painel-hero);
  min-height:var(--altura-hero);
  background:var(--branco);
  overflow:hidden;
}

.hero__conteudo{
  grid-column:1; grid-row:1;
  min-width:0;
  padding:255px 0 0 225px;
}
.hero__logo{ width:435px; height:auto; }
.hero__numero{ width:430px; height:auto; margin:26px 0 0 3px; }
.hero__marca-empilhada{ display:none; }

.hero__acoes{ display:flex; gap:15px; margin:61px 0 0 3px; }

.hero__painel{
  position:relative;
  grid-column:2; grid-row:1;
  background:var(--vermelho-escuro);
  overflow:hidden;
}
.hero__canto{
  position:absolute; top:0; left:0;
  width:310px; height:auto;
}
.hero__estrela{
  position:absolute; top:110px; right:51px;
  width:65px; height:auto;
}
/* A foto extrapola o painel dos dois lados e é cortada por ele, como no layout. */
.hero__foto{
  position:absolute; bottom:-60px; left:-90px;
  width:800px; max-width:none; height:auto;
}

/* ---------------- faixa de ícones ---------------- */

.faixa-icones{
  height:227px;
  background:url("../img/faixa-icones.png") repeat-x center / auto 100%;
}

/* ---------------- faixa vote certo ---------------- */

.faixa-vote{
  position:relative;
  display:flex; align-items:center;
  height:149px;
  background:url("../img/barra-vote.jpg") no-repeat center / cover;
}
.faixa-vote__quadro{
  flex:none;
  width:153px; align-self:stretch;
  background:url("../img/quadrado-cores.png") no-repeat center / 100% 100%;
}
/* Assinatura "Vote certo!": o "certo!" é a arte oficial da campanha e o
   "Vote" é composto em condensada leve para casar com ela. */
.faixa-vote__frase{
  position:absolute; top:47px; left:50%; transform:translateX(-50%);
  width:331px; height:60px;
}
.faixa-vote__palavra{
  position:absolute; left:-1px; bottom:11px;
  font-family:"Barlow Condensed", var(--fonte);
  font-size:64px; font-weight:300; line-height:1;
  color:var(--branco);
}
.faixa-vote__certo{
  position:absolute; left:0; bottom:0;
  width:331px; height:auto;
}

/* ---------------- quem é mauro ---------------- */

.bio{ padding:77px 20px 113px; }

.bio__titulo{ width:var(--largura-coluna); margin:0 auto; }
.bio__titulo img{ width:100%; height:auto; }

.bio__bloco{ width:var(--largura-coluna); margin:51px auto 0; }
.bio__bloco + .bio__bloco{ margin-top:75px; }

.bio__foto{ width:100%; height:auto; border-radius:12px; margin-bottom:20px; }

.bio p{ font-size:16px; line-height:24px; color:var(--azul); }
.bio p + p{ margin-top:12px; }

/* ---------------- trajetória / galeria ---------------- */

.marca{
  display:flex; align-items:center; justify-content:center; gap:15px;
  height:362px;
  background:var(--creme);
  padding:0 20px;
}
.marca__logo{   width:325px; height:auto; }
.marca__numero{ width:349px; height:auto; }
.marca__empilhada,
.rodape__empilhada{ display:none; }

.galeria img{ width:100%; height:auto; aspect-ratio:1440/410; }

.blocos{ display:grid; grid-template-columns:repeat(3,1fr); }
.blocos img{ width:100%; height:auto; aspect-ratio:48/23; object-fit:cover; }

/* ---------------- propostas ---------------- */

.propostas{ padding:38px 20px 0; }

.propostas__faixa-titulo{ display:flex; justify-content:center; }

.propostas__titulo{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  font-size:32px; font-weight:700; line-height:30px;
}
/* Cada bloco carrega o degradê usado no material da campanha.
   O bloco central é propositalmente maior e mais alto, como no layout. */
.propostas__linha{ padding:9px 11px; }
.propostas__linha--amarela{
  background:linear-gradient(90deg,#F5E258,#F2C550);
  color:var(--vermelho);
}
.propostas__linha--vermelha{
  background:linear-gradient(90deg,#DA0022,#E0332D);
  color:var(--amarelo);
  font-size:42px;
  padding-top:14px; padding-bottom:14px;
}
.propostas__linha--azul{
  background:linear-gradient(90deg,#70C6D7,#477FD4);
  color:var(--branco);
}

.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:38px; align-items:start;
  max-width:var(--largura-conteudo); margin:60px auto 0;
}

.card{
  background:var(--creme);
  border-radius:var(--raio-card);
  padding:28px 35px 33px;
}
.card__cabecalho{ display:flex; align-items:center; gap:17px; }
.card__icone{ flex:none; width:auto; height:64px; }
.card__titulo{
  font-size:24px; font-weight:700; line-height:30px; color:var(--azul);
  overflow-wrap:break-word; min-width:0;
}

.card__itens{ margin-top:35px; }
.card__itens li{ font-size:16px; font-weight:700; line-height:24px; color:var(--azul); }
.card__itens li + li{ margin-top:15px; }

/* ---------------- chamada ---------------- */

.chamada{ padding:60px 20px 99px; }

.chamada__painel{
  display:flex; align-items:stretch;
  width:631px; min-height:239px;
  margin:0 auto;
  background:var(--vermelho);
  border-radius:16px;
  overflow:hidden;
}
.chamada__quadrantes{
  flex:none; width:220px;
  background:url("../img/quadrantes.png") no-repeat center / cover;
}
.chamada__texto{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:23px; padding:0 30px 0 31px;
}
.chamada__titulo{
  font-size:32px; font-weight:700; line-height:38px;
  color:var(--branco);
}

/* ---------------- rodapé ---------------- */

.rodape{ background:var(--creme); padding-top:49px; }

.rodape__social,
.rodape__miolo{
  max-width:calc(var(--largura-rodape) + 40px); margin:0 auto; padding:0 20px;
}

.rodape__social{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-bottom:45px;
}
.rodape__social-titulo{
  font-size:24px; font-weight:700; color:var(--vermelho);
}
.redes{ display:flex; align-items:center; gap:48px; }
.redes a{
  display:block; color:var(--azul-social);
  transition:transform .18s ease;
}
.redes svg{ width:30px; height:30px; display:block; }
.redes a:hover{ transform:translateY(-3px); }

.rodape__faixa{
  height:107px;
  background:url("../img/faixa-rodape.png") repeat-x center / auto 100%;
}

.rodape__miolo{
  display:flex; align-items:flex-start; gap:120px;
  padding-top:58px;
}
.rodape__marca{ display:flex; align-items:center; gap:13px; }
.rodape__logo{   width:244px; height:auto; }
.rodape__numero{ width:262px; height:auto; }

.rodape__navegacao{ padding-top:4px; }
.rodape__navegacao li{ line-height:21px; }
.rodape__navegacao li + li{ margin-top:10px; }
.rodape__navegacao a{
  font-size:16px; font-weight:700; color:var(--azul);
  text-decoration:none; text-underline-offset:4px;
}
.rodape__navegacao a:hover,
.rodape__navegacao a:focus-visible{ text-decoration:underline; }

.rodape__legal{
  margin:30px auto 0;
  padding:0 20px 44px;
  max-width:calc(var(--largura-rodape) + 40px);
  font-size:12px; line-height:19px; text-align:center; color:var(--azul);
}

.rodape__barra{
  height:24px;
  background:url("../img/barra-final.png") no-repeat center / cover;
}

/* =========================================================
   Telas intermediárias — o layout de 1440px encolhe junto
   ========================================================= */

@media (max-width:1439px){
  .menu{ padding:0 max(20px, 8vw); }
  .menu__barra{ width:auto; }

  .hero__conteudo{ padding-left:max(20px, 8vw); padding-right:24px; }
  .hero__logo,
  .hero__numero{ width:min(435px, 100%); }
}

@media (max-width:1200px){
  :root{ --painel-hero:44vw; --altura-hero:800px; }

  .hero__conteudo{ padding-top:210px; }
  .hero__foto{ width:auto; height:82%; left:50%; transform:translateX(-46%); }
  .hero__canto{ width:52%; }
  .hero__estrela{ right:24px; top:96px; width:56px; }

  .faixa-icones{ height:170px; }
  .faixa-vote{ height:120px; }
  .faixa-vote__quadro{ width:120px; }

  .marca{ height:280px; }
  .marca__logo{ width:250px; }
  .marca__numero{ width:268px; }

  .cards{ gap:24px; }
  .card{ padding:24px 26px 28px; }
  .card__titulo{ font-size:20px; line-height:27px; }

  .rodape__miolo{ gap:60px; }
}

/* =========================================================
   Mobile — layout de 440px
   ========================================================= */

@media (max-width:767px){
  :root{
    --altura-hero:auto;
    --raio-botao:24px;
  }

  body{ font-size:15px; }

  /* -------- menu -------- */
  .topo{ padding-top:25px; }
  .menu{ padding:0 16px; }

  .menu__barra{
    position:relative;
    width:100%; height:45px;
    padding:0 16px 0 20px;
    justify-content:space-between;
  }

  .menu__atalho{
    display:block;
    font-size:14px; font-weight:700; color:var(--vermelho-escuro);
    text-decoration:none;
  }

  .menu__botao{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px; padding:0 3px;
    background:none; border:0; cursor:pointer;
  }
  .menu__traco{
    display:block; height:2.5px; border-radius:2px;
    background:var(--vermelho-escuro);
    transition:transform .2s ease, opacity .2s ease;
  }
  .menu__botao[aria-expanded="true"] .menu__traco:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .menu__botao[aria-expanded="true"] .menu__traco:nth-child(2){ opacity:0; }
  .menu__botao[aria-expanded="true"] .menu__traco:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  .menu__lista{
    position:absolute; top:calc(100% + 8px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 0;
    background:var(--amarelo);
    border-radius:18px;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
    display:none;
  }
  .menu__lista[data-aberto]{ display:flex; }
  .menu__lista a{ display:block; padding:11px 20px; font-size:15px; }

  /* -------- hero -------- */
  .hero{ grid-template-columns:1fr; min-height:0; }

  .hero__painel{
    grid-column:1; grid-row:1;
    height:552px;
  }
  .hero__canto{ width:64%; }
  .hero__estrela{ top:auto; bottom:150px; right:44px; width:60px; }
  .hero__foto{
    left:50%; transform:translateX(-50%);
    width:auto; height:100%;
  }

  .hero__conteudo{
    grid-column:1; grid-row:2;
    position:relative; z-index:2;
    display:flex; flex-direction:column; align-items:center;
    padding:0 20px 0;
    margin-top:-42px;
  }
  .hero__logo,
  .hero__numero{ display:none; }
  .hero__marca-empilhada{ display:block; width:min(354px, 89%); height:auto; }

  .hero__acoes{
    flex-direction:column; align-items:stretch;
    gap:14px; margin:47px 0 0;
    width:min(308px, 100%);
  }
  .botao{ justify-content:center; height:50px; font-size:15px; }

  /* -------- faixas -------- */
  .faixa-icones{ height:113px; margin-top:56px; }

  .faixa-vote{ height:113px; }
  .faixa-vote__quadro{ width:110px; }
  .faixa-vote__frase{
    width:243px; height:44px;
    top:auto; bottom:26px; left:auto; right:14px; transform:none;
  }
  .faixa-vote__palavra{ font-size:47px; bottom:8px; }
  .faixa-vote__certo{ width:243px; }

  /* -------- bio -------- */
  .bio{ padding:56px 13px 43px; }
  .bio__titulo,
  .bio__bloco{ width:100%; }
  .bio__bloco{ margin-top:49px; }
  .bio__bloco + .bio__bloco{ margin-top:62px; }
  .bio__foto{ margin-bottom:25px; }
  .bio p + p{ margin-top:15px; }

  /* -------- trajetória -------- */
  .marca{ height:auto; padding:48px 20px 116px; }
  .marca__logo,
  .marca__numero{ display:none; }
  .marca__empilhada{ display:block; width:min(299px,68%); height:auto; }

  .blocos{ grid-template-columns:1fr; }
  .blocos__lateral{ display:none; }
  .blocos img.blocos__meio{ aspect-ratio:44/27; }

  /* -------- propostas -------- */
  .propostas{ padding:0; }

  .propostas__faixa-titulo{
    justify-content:flex-start;
    padding:42px 0 63px;
    background:url("../img/quadrantes.png") no-repeat center / cover;
  }
  .propostas__titulo{
    display:flex; flex-direction:column; align-items:flex-start;
    justify-content:flex-start; flex-wrap:nowrap;
    padding-left:20%;
    font-size:28px;
  }
  .propostas__linha{ padding:11px 14px; }
  .propostas__linha--vermelha{ font-size:28px; padding:11px 14px; }

  .cards{
    grid-template-columns:1fr; gap:16px;
    margin-top:31px; padding:0 20px;
  }
  .card{ padding:30px 28px 34px; }
  .card__cabecalho{ gap:22px; }
  .card__titulo{ font-size:22px; line-height:29px; }

  /* -------- chamada -------- */
  .chamada{ padding:59px 15px 91px; }
  .chamada__painel{
    flex-direction:column; width:100%; min-height:0;
    border-radius:18px;
  }
  .chamada__quadrantes{
    order:2; width:100%; height:126px;
    background-size:cover;
  }
  .chamada__texto{
    order:1; align-items:center; text-align:center;
    gap:26px; padding:40px 24px 44px;
  }
  .chamada__titulo{ font-size:27px; line-height:37px; }

  /* -------- rodapé -------- */
  .rodape{ padding-top:44px; }
  .rodape__social{
    flex-direction:column; align-items:flex-start; gap:26px;
    padding-bottom:64px;
  }
  .redes{ gap:0; justify-content:space-between; width:100%; }
  .redes svg{ width:34px; height:34px; }

  .rodape__faixa{ height:107px; }

  .rodape__miolo{
    flex-direction:column; align-items:center; gap:48px;
    padding-top:59px;
  }
  .rodape__marca{ justify-content:center; }
  .rodape__logo,
  .rodape__numero{ display:none; }
  .rodape__empilhada{ display:block; width:min(284px,65%); height:auto; }

  .rodape__navegacao{ text-align:center; padding-top:0; }
  .rodape__navegacao li{ line-height:24px; }
  .rodape__navegacao li + li{ margin-top:7px; }

  .rodape__legal{ margin-top:63px; padding-bottom:72px; }
}

/* A galeria vertical (4 fotos empilhadas) só entra junto com a arte de celular. */
@media (max-width:560px){
  .galeria img{ aspect-ratio:440/820; }
}

/* =========================================================
   Preferências do usuário
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}