/* ============================================================
   Yandra Moura 4444 — Site de campanha
   Layout "Impacto". CSS compartilhado por todas as páginas.

   >>> PARA TROCAR A PALETA: mexa apenas no bloco :root abaixo.
       Todas as cores do site saem dessas variáveis.
   ============================================================ */

/* ---------- Fontes ---------- */
@font-face{font-family:'Scandia';src:url('../fonts/Scandia-Light.woff') format('woff');font-weight:300;font-display:swap}
@font-face{font-family:'Scandia';src:url('../fonts/Scandia-Regular.woff2') format('woff2'),url('../fonts/Scandia-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Scandia';src:url('../fonts/Scandia-Medium.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'Scandia';src:url('../fonts/Scandia-Bold.woff') format('woff');font-weight:700;font-display:swap}

/* ---------- Paleta ----------
   Amostrada direto do santinho oficial (Artes/Santinho_completo.png), que é o
   que vai para a rua e para as redes. O roxo do fundo é #64139E e o 4444 é um
   degradê laranja→âmbar (#F18803 → #F8AE01).

   Nota: o CORES_YM.pdf rotula o roxo como #8600FA, um violeta bem mais elétrico
   que o da arte. Segui a arte. Se o certo for o PDF, troque --roxo aqui.

   Tons "derivado" não existem nem na arte nem no PDF — precisei deles para
   escurecer cabeçalho e rodapé e para sinalização.
   ------------------------------------------------------------------- */
:root{
  --roxo:#64139E;           /* santinho — roxo de fundo */
  --laranja:#F18803;        /* santinho — topo do degradê do 4444 */
  --ambar:#F8AE01;          /* santinho — base do degradê do 4444 */
  --amarelo:#EDC016;        /* CORES_YM.pdf */
  --creme:#F3F0E0;          /* CORES_YM.pdf */

  --roxo-profundo:#4A0E75;  /* derivado */
  --roxo-escuro:#2E0850;    /* derivado — cabeçalho, rodapé, fundos escuros */
  --roxo-claro:#9B45D6;     /* derivado — realces sobre fundo escuro */
  --verde:#127A5E;          /* derivado — apenas sinalização de "aprovado" */
  --erro:#C42A4E;           /* derivado — apenas mensagens de erro */

  --texto:#4A4550;
  --claro:var(--creme);
  --branco:#FFF;
  --borda:rgba(100,19,158,.18);

  --sombra:0 4px 24px rgba(46,8,80,.12);
  --sombra-forte:0 12px 40px rgba(46,8,80,.20);
  --raio:16px;
  --max:1200px;
  --cabecalho:76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--cabecalho) + 16px)}
body{
  margin:0;background:var(--branco);color:var(--texto);
  font-family:'Scandia',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
/* o tema antigo zerava a margem de todo <p>. aqui não. */
p{margin:0 0 1.5em}
p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--roxo-escuro);line-height:1.15;font-weight:700}
a{color:var(--roxo);text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}

/* foco visível para navegação por teclado */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--amarelo);outline-offset:3px;border-radius:4px;
}

.pular-para-conteudo{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--amarelo);color:var(--roxo-escuro);
  padding:12px 20px;font-weight:700;border-radius:0 0 10px 0;
}
.pular-para-conteudo:focus{left:0}

/* ---------- Proporção das imagens ----------
   Fotos horizontais: 5:2 (1200×480). Retrato do hero: 2:3 (800×1200).
   A proporção está travada no CSS com aspect-ratio + object-fit:cover, então
   uma foto de proporção diferente é recortada, nunca esticada.
   ------------------------------------------- */

/* ---------- Utilitários ---------- */
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.secao{padding:84px 0}
.secao-titulo{font-size:clamp(28px,4.2vw,44px);margin-bottom:6px}
.secao-linha{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:38px}
.secao-sub{color:var(--roxo);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 6px}
.fundo-claro{background:var(--claro)}
.logo-branca{filter:brightness(0) invert(1)}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:999px;
  font-weight:700;font-size:15px;border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primario{background:var(--roxo);color:#fff;box-shadow:0 6px 18px rgba(100,19,158,.32)}
.btn-primario:hover{background:var(--roxo-profundo)}
.btn-amarelo{background:var(--amarelo);color:var(--roxo-escuro)}
.btn-amarelo:hover{background:#F8AE01}
.btn-claro{background:#fff;color:var(--roxo-escuro)}
.btn-contorno{border-color:var(--roxo);color:var(--roxo)}
.btn-contorno:hover{background:var(--roxo);color:#fff}
.btn-pequeno{padding:10px 20px;font-size:13.5px}

/* ---------- Cabeçalho ---------- */
.cabecalho{
  position:sticky;top:0;z-index:200;
  background:rgba(46,8,80,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.cabecalho .container{display:flex;align-items:center;gap:22px;height:var(--cabecalho)}
.cabecalho .marca img{height:30px;width:auto}
.cabecalho .federacao{height:22px;width:auto;opacity:.85;flex:none}
.menu{margin-left:auto;display:flex;gap:24px}
.menu a{color:rgba(255,255,255,.86);font-weight:500;font-size:14.5px;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--amarelo);border-color:var(--amarelo)}
/* selo do número no cabeçalho: agora é a arte oficial, não texto */
.selo-numero{display:block;flex:none}
.selo-numero img{height:30px;width:auto}
.abre-menu{
  display:none;background:none;border:2px solid rgba(255,255,255,.4);
  color:#fff;width:44px;height:44px;border-radius:10px;cursor:pointer;
  align-items:center;justify-content:center;font-size:20px;line-height:1;
}
.menu-mobile{
  display:none;position:fixed;inset:var(--cabecalho) 0 0;z-index:190;
  background:var(--roxo-escuro);padding:28px 24px;overflow-y:auto;
}
.menu-mobile.aberto{display:block}
.menu-mobile a{
  display:block;color:#fff;font-size:21px;font-weight:700;
  padding:17px 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.menu-mobile a:hover{color:var(--amarelo)}
body.trava-rolagem{overflow:hidden}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,var(--roxo-escuro) 0%,var(--roxo-profundo) 45%,var(--roxo) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 78% 18%,rgba(248,174,1,.22),transparent 44%),
    radial-gradient(circle at 12% 88%,rgba(155,69,214,.30),transparent 46%);
}
/* seta oficial da campanha, como marca d'água no hero */
.hero .seta{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:52%;max-width:640px;opacity:.28;pointer-events:none;
  filter:brightness(1.5) saturate(1.2);
}
.hero .container{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;padding-top:68px}
.hero h1{color:#fff;font-size:clamp(40px,6.4vw,76px);line-height:1;letter-spacing:-.035em;margin-bottom:24px;text-transform:uppercase}
.hero h1 span{display:block;color:var(--ambar)}
.hero-lead{font-size:19px;color:rgba(255,255,255,.9);max-width:44ch;margin-bottom:30px}
/* número: arte oficial em PNG, com a assinatura logo abaixo */
.hero-numero{margin:0 0 14px;max-width:520px}
.hero-numero img{width:100%;height:auto;filter:drop-shadow(0 12px 34px rgba(0,0,0,.32))}
.hero-marca{margin:0 0 34px;max-width:320px}
.hero-marca img{width:100%;height:auto}
.hero-acoes{display:flex;gap:14px;flex-wrap:wrap;padding-bottom:68px}
.hero-foto{align-self:end;position:relative}
.hero-foto img{width:100%;height:auto;filter:drop-shadow(0 -6px 40px rgba(0,0,0,.22))}

/* topo simples para páginas internas */
.topo-pagina{
  background:linear-gradient(135deg,var(--roxo-escuro),var(--roxo));
  color:#fff;padding:56px 0 48px;
}
.topo-pagina h1{color:#fff;font-size:clamp(32px,5vw,52px);margin-bottom:10px}
.topo-pagina p{color:rgba(255,255,255,.88);font-size:17px;max-width:56ch;margin:0}
.migalhas{font-size:13.5px;color:rgba(255,255,255,.66);margin-bottom:14px}
.migalhas a{color:rgba(255,255,255,.86)}

/* ---------- Faixa corrida ---------- */
.faixa{
  background:var(--amarelo);color:var(--roxo-escuro);
  padding:14px 0;overflow:hidden;white-space:nowrap;
  font-weight:700;font-size:16px;letter-spacing:.18em;text-transform:uppercase;
}
.faixa-conteudo{display:inline-flex;animation:desliza 32s linear infinite}
.faixa-conteudo span{padding:0 24px}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .faixa-conteudo{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Notícias ---------- */
.trilho{display:flex;gap:22px;overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory}
.trilho::-webkit-scrollbar{height:8px}
.trilho::-webkit-scrollbar-track{background:var(--claro);border-radius:8px}
.trilho::-webkit-scrollbar-thumb{background:var(--borda);border-radius:8px}
.card-noticia{flex:0 0 330px;scroll-snap-align:start;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--sombra);transition:transform .2s ease}
.card-noticia:hover{transform:translateY(-5px)}
.card-noticia img{aspect-ratio:5/2;width:100%;height:auto;object-fit:cover;background:var(--creme)}
.card-noticia .corpo{padding:22px}
.card-noticia h3{font-size:18px;line-height:1.3;margin-bottom:6px}
.meta{font-size:12px;color:var(--roxo);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px}

.grade-noticias{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grade-noticias .card-noticia{flex:none}

/* ---------- Destaques do mandato ---------- */
.blocos{display:grid;grid-template-columns:repeat(4,1fr);border-radius:20px;overflow:hidden}
.bloco{padding:42px 28px;color:#fff}
.bloco:nth-child(1){background:var(--roxo)}
.bloco:nth-child(2){background:var(--roxo-profundo)}
.bloco:nth-child(3){background:var(--roxo)}
.bloco:nth-child(4){background:var(--amarelo);color:var(--roxo-escuro)}
.bloco:nth-child(4) p{color:rgba(47,23,80,.86)}
.bloco .valor{font-size:42px;font-weight:700;line-height:1;margin-bottom:10px}
.bloco p{font-size:14.5px;color:rgba(255,255,255,.92);margin:0}

/* ---------- Projetos ---------- */
.projetos-grade{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.projeto-card{
  border-left:6px solid var(--roxo);background:var(--claro);
  border-radius:0 var(--raio) var(--raio) 0;padding:28px 30px;
}
.projeto-card .codigo{font-weight:700;color:var(--roxo);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase}
.projeto-card h3{font-size:21px;margin:8px 0}
.projeto-card p{font-size:15px;margin:0}
.projeto-card[data-status="aprovado"]{border-left-color:var(--verde)}
.projeto-card[data-status="tramitando"]{border-left-color:var(--roxo)}
.projeto-card[data-status="apresentado"]{border-left-color:var(--texto)}

/* ---------- Agenda ---------- */
.agenda{display:grid;gap:12px}
.compromisso{
  display:grid;grid-template-columns:88px 1fr auto;gap:22px;align-items:center;
  background:#fff;border:1px solid var(--borda);border-radius:var(--raio);
  padding:20px 24px;transition:border-color .18s ease,transform .18s ease;
}
.compromisso:hover{border-color:var(--roxo);transform:translateX(3px)}
.compromisso .data{
  background:var(--roxo);color:#fff;border-radius:12px;
  padding:12px 8px;text-align:center;line-height:1;
}
.compromisso .data .dia{display:block;font-size:28px;font-weight:700}
.compromisso .data .mes{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:5px;font-weight:500}
.compromisso h3{font-size:18.5px;margin:0 0 5px}
.compromisso .onde{font-size:14.5px;margin:0;display:flex;gap:16px;flex-wrap:wrap}
.compromisso .onde span{display:inline-flex;align-items:center;gap:6px}
.compromisso .marcador{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;background:var(--creme);color:var(--roxo-profundo);
  white-space:nowrap;
}
.compromisso[data-quando="hoje"] .data{background:var(--amarelo);color:var(--roxo-escuro)}
.compromisso[data-quando="hoje"]{border-color:var(--amarelo);border-width:2px}
.compromisso[data-quando="hoje"] .marcador{background:var(--amarelo);color:var(--roxo-escuro)}
.compromisso[data-passado]{opacity:.5}
.compromisso[data-passado] .data{background:var(--texto)}

.agenda-aviso{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  background:var(--roxo-escuro);color:#fff;border-radius:var(--raio);
  padding:22px 26px;margin-top:22px;
}
.agenda-aviso p{margin:0;color:rgba(255,255,255,.88);font-size:15px;flex:1;min-width:220px}
.agenda-aviso strong{color:var(--amarelo)}

/* mês como separador na página cheia */
.mes-separador{
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--roxo);padding:26px 0 10px;border-bottom:2px solid var(--borda);margin-bottom:14px;
}

/* ---------- Sobre ---------- */
.sobre{background:linear-gradient(160deg,var(--roxo-escuro),var(--roxo-profundo));color:#fff}
.sobre h2{color:#fff}
.sobre .secao-sub{color:var(--amarelo)}
.sobre .container{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.sobre img{border-radius:20px;aspect-ratio:5/2;width:100%;height:auto;object-fit:cover}
.sobre p{color:rgba(255,255,255,.88);font-size:17px}
.credenciais{display:grid;gap:12px;margin-top:26px}
.credenciais li{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:15px 20px;font-size:15px}

/* ---------- Material de campanha ---------- */
.material{background:var(--amarelo)}
.material h2{color:var(--roxo-escuro)}
.material .secao-sub{color:var(--roxo-escuro);opacity:.7}
.mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ladrilho{
  border-radius:20px;padding:32px 28px;color:#fff;min-height:206px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .2s ease,box-shadow .2s ease;
}
.ladrilho:hover{transform:scale(1.02);box-shadow:var(--sombra-forte)}
.ladrilho .icone{font-size:32px}
.ladrilho h3{color:#fff;font-size:22px;margin:14px 0 6px}
.ladrilho p{font-size:14.5px;color:rgba(255,255,255,.9);margin:0 0 12px}
.ladrilho .acao{font-weight:700;font-size:14px;color:#fff}
.ladrilho.duplo{grid-column:span 2}
.cor-1{background:var(--roxo)}
.cor-2{background:var(--roxo-profundo)}
.cor-3{background:var(--amarelo)}
.cor-3 h3,.cor-3 .acao{color:var(--roxo-escuro)}
.cor-3 p{color:rgba(47,23,80,.82)}
.cor-4{background:var(--roxo-profundo)}
.cor-5{background:var(--verde)}
.cor-6{background:var(--roxo-escuro)}

/* filtros da página de material */
.filtros{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.filtro{
  padding:10px 20px;border-radius:999px;font-size:14px;font-weight:500;
  border:2px solid var(--borda);background:#fff;color:var(--texto);cursor:pointer;
  transition:all .16s ease;
}
.filtro:hover{border-color:var(--roxo);color:var(--roxo)}
.filtro[aria-pressed="true"]{background:var(--roxo);border-color:var(--roxo);color:#fff;font-weight:700}

.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.peca{
  border:1px solid var(--borda);border-radius:14px;overflow:hidden;background:#fff;
  transition:transform .18s ease,box-shadow .18s ease;
}
.peca:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.peca .visual{
  aspect-ratio:1/1;display:grid;place-items:center;font-size:40px;color:#fff;
  background:linear-gradient(135deg,var(--roxo-profundo),var(--roxo));position:relative;
}
.peca img.visual{object-fit:cover;font-size:0}
.peca .info{padding:14px 16px;display:flex;align-items:center;gap:10px}
.peca h3{font-size:14.5px;margin:0 0 2px;line-height:1.3}
.peca span{font-size:12.5px;color:var(--texto)}
.peca .baixar{margin-left:auto;flex:none;font-size:19px;color:var(--roxo)}
.peca[hidden]{display:none}

.vazio{
  border:2px dashed var(--borda);border-radius:var(--raio);
  padding:44px 30px;text-align:center;color:var(--texto);background:var(--claro);
}
.vazio strong{display:block;color:var(--roxo-escuro);font-size:18px;margin-bottom:6px}

/* player de jingle */
.player{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--roxo-escuro);border-radius:var(--raio);padding:20px 24px;color:#fff;
}
.player .tocar{
  width:52px;height:52px;border-radius:50%;flex:none;border:none;cursor:pointer;
  background:var(--amarelo);color:var(--roxo-escuro);font-size:19px;
  display:grid;place-items:center;
}
.player .faixa{flex:1;min-width:180px}
.player h3{color:#fff;margin:0 0 9px;font-size:16px}
.player .barra{height:7px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden;cursor:pointer}
.player .barra i{display:block;height:100%;width:0;background:var(--amarelo);border-radius:999px;transition:width .1s linear}
.player .tempo{font-size:13px;color:rgba(255,255,255,.72);flex:none;font-variant-numeric:tabular-nums}

/* ---------- Contato ---------- */
.contato .container{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.campo{margin-bottom:15px}
.campo label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--roxo-escuro)}
.campo input,.campo textarea{
  width:100%;padding:14px 16px;border-radius:12px;
  border:2px solid var(--borda);background:var(--claro);
  font-family:inherit;font-size:15px;color:var(--roxo-escuro);
}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--roxo);background:#fff}
.campo .erro{color:var(--erro);font-size:13px;font-weight:500;margin-top:5px;display:none}
.campo.invalido input,.campo.invalido textarea{border-color:var(--erro)}
.campo.invalido .erro{display:block}
.aviso-form{
  padding:14px 18px;border-radius:12px;margin-top:16px;font-size:14.5px;font-weight:500;display:none;
}
.aviso-form.ok{display:block;background:rgba(18,138,114,.12);color:var(--verde)}

.caixa-apoio{background:linear-gradient(140deg,var(--roxo-profundo),var(--roxo));border-radius:20px;padding:36px;color:#fff}
.caixa-apoio h2,.caixa-apoio h3{color:#fff}
.caixa-apoio p{color:rgba(255,255,255,.9)}
.linha-contato{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.26);font-size:15px}
.linha-contato:last-child{border:none}
.linha-contato strong{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--amarelo);margin-bottom:2px}

/* ---------- Rodapé ---------- */
.rodape{background:var(--roxo-escuro);color:rgba(255,255,255,.72);padding:52px 0 34px;text-align:center}
.rodape .marca-rodape{height:36px;width:auto;margin:0 auto 20px}
.rodape .numero{margin:0 auto 14px;max-width:260px}
.rodape .numero img{width:100%;height:auto}
.rodape .federacao-rodape{height:26px;width:auto;margin:22px auto 0;opacity:.8}
.rodape-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:20px 0}
.rodape-links a{color:rgba(255,255,255,.8);font-size:14.5px}
.rodape-links a:hover{color:var(--amarelo)}
.rodape-legal{
  margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.6;
}

/* ---------- Barra fixa no celular ---------- */
.barra-mobile{display:none}

/* ---------- Responsivo ---------- */
@media (max-width:1024px){
  .galeria{grid-template-columns:repeat(3,1fr)}
  .grade-noticias{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero .container,.sobre .container,.contato .container{grid-template-columns:1fr}
  .hero-acoes{padding-bottom:40px}
  .blocos{grid-template-columns:repeat(2,1fr)}
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .projetos-grade{grid-template-columns:1fr}
  .menu{display:none}
  .abre-menu{display:flex;margin-left:auto}
  .selo-numero{font-size:17px;padding:5px 13px}
}
@media (max-width:640px){
  .secao{padding:54px 0}
  .container{padding:0 18px}
  .compromisso{grid-template-columns:64px 1fr;gap:16px;padding:16px 18px}
  .compromisso .data .dia{font-size:22px}
  .compromisso .marcador{grid-column:1/-1;justify-self:start}
  .blocos,.mosaico{grid-template-columns:1fr}
  .ladrilho.duplo{grid-column:span 1}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .grade-noticias{grid-template-columns:1fr}
  .card-noticia{flex:0 0 80vw}
  body{padding-bottom:76px}
  .barra-mobile{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:180;
    background:var(--amarelo);padding:12px 16px;gap:12px;align-items:center;
    box-shadow:0 -6px 24px rgba(0,0,0,.22);
  }
  .barra-mobile .numero{flex:none;margin:0}
  .barra-mobile .numero img{height:28px;width:auto}
  .barra-mobile .btn{flex:1;padding:12px 16px;font-size:14px}
  .hero .seta{display:none}
  .hero-numero{max-width:340px}
  .hero-marca{max-width:240px}
}