/* =================================================================
   MeLeva — página pública
   =================================================================

   ESTRUTURA AQUI, CONTEÚDO NO BANCO.

   Este arquivo é a aparência. O texto vem de settings/landingContent
   (campos nomeados, editáveis pelo painel) e as imagens são arquivos
   em /images/site/, também trocáveis pelo painel.

   Antes, tudo isto — CSS, marcação e texto — vivia dentro de um único
   campo de 24 kB no Firestore, editado por um WYSIWYG que reescrevia a
   marcação a cada gravação. Uma correção de vírgula podia derrubar o
   layout inteiro.

   As variáveis abaixo eram declaradas no cabeçalho (outro blob no
   banco). Ficam aqui para a página se sustentar sozinha: se o cabeçalho
   falhar ao carregar, o corpo continua com as cores certas.
   ================================================================= */

:root{
  --amarelo:#FFCC00;
  --amarelo-esc:#E6B800;
  --preto:#0B0B0D;
  --grafite:#15161A;
  --linha:rgba(255,204,0,.18);
}

/* -----------------------------------------------------------------
   CAMADA DE IMAGEM

   Toda imagem da página passa por aqui. Regras que valem para todas:

   - proporção reservada ANTES do carregamento. Sem isso a página salta
     quando a imagem chega e quem estava lendo perde a linha.
   - preenchimento sem distorcer: a arte cobre a área e o excesso é
     cortado, em vez de esticar rostos.
   - moldura escura, que evita a borda branca quando a arte tem fundo
     claro.

   Seção sem imagem cadastrada não renderiza nada — nem moldura vazia,
   nem espaço reservado. É isso que permite publicar antes de a arte
   ficar pronta.
   ----------------------------------------------------------------- */
.ml-img{position:relative;border-radius:18px;overflow:hidden;line-height:0;
  background:var(--grafite);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.ml-img img{width:100%;height:100%;display:block;object-fit:cover}
.ml-img-larga{aspect-ratio:16/9}
.ml-img-alta{aspect-ratio:3/4}

/* Faixa de imagem no topo, largura total e sem moldura.

   A PROPORCAO ACOMPANHA A ARTE, nao o contrario. Ela ja esteve em 16:7 e
   depois em 4:3 no celular; nos dois casos a foto era 3:2 e o excesso saia
   pelas laterais, levando junto a moto e o carro da esquerda. Com 3:2 aqui, o
   `cover` nao tem nada para cortar — a imagem aparece inteira em qualquer
   largura de tela. */
.ml-faixa{display:block;background:var(--preto);line-height:0}
.ml-faixa .ml-img{border-radius:0;border:0;box-shadow:none;aspect-ratio:3/2}
/* A FAIXA DO TOPO MANTEM A PROPORCAO DA ARTE EM QUALQUER TELA.
   Havia aqui um 4/3 para o celular, escrito quando ainda nao existia imagem —
   a ideia era que faixa larga fica baixa demais no telefone. Com foto de
   verdade isso destroi a composicao: a arte e 16:7, e o recorte 4:3 come 42%
   da largura, levando junto a moto e o carro da esquerda. Faixa baixa e
   melhor que faixa mutilada. */

/* Imagem que acompanha uma seção, abaixo do texto. */
.ml-sec .ml-img{margin-top:44px}

/* -----------------------------------------------------------------
   SELOS DAS LOJAS

   Somem por inteiro enquanto `lojasVisiveis` for falso. Anunciar
   download de um aplicativo que ainda não está publicado é promessa
   quebrada no primeiro toque — e a página perde a credibilidade
   justamente com quem clicou.
   ----------------------------------------------------------------- */
.ml-lojas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.ml-lojas a{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;
  border:1px solid var(--linha);border-radius:12px;color:#fff;text-decoration:none;
  font-weight:600;font-size:14px;background:rgba(255,255,255,.03);transition:.18s}
.ml-lojas a:hover{border-color:var(--amarelo);background:rgba(255,204,0,.08)}
.ml-lojas svg{width:20px;height:20px;color:var(--amarelo);flex:0 0 auto}


/* ---------------------------------------------------------------
   Icones: SVG proprio, grade 24x24, traco 1.8, cantos arredondados.
   A versao anterior usava emoji do sistema — cada aparelho desenhava
   de um jeito, nenhum respeitava o amarelo da marca, e ao lado das
   pecas da campanha parecia improviso.
   --------------------------------------------------------------- */
.ml-svg{width:34px;height:34px;color:var(--amarelo);flex:0 0 auto}
.ml-svg-p{width:26px;height:26px}

.ml-sec{padding:82px 0;position:relative}
.ml-sec+.ml-sec{border-top:1px solid rgba(255,255,255,.06)}
.ml-cab{max-width:660px;margin:0 0 46px}
.ml-cab h2{font-size:clamp(28px,4.6vw,42px);font-weight:900;line-height:1.08;
  margin:0 0 14px;letter-spacing:-.025em}
.ml-cab p{color:#a9aab0;font-size:16.5px;margin:0;line-height:1.65}
.ml-am{color:var(--amarelo)}
.ml-risco{display:block;width:56px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--amarelo),transparent);margin-bottom:18px}

/* ------------------------------------------------------------- topo */
.ml-hero{position:relative;padding:90px 0 84px;overflow:hidden}
.ml-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(880px 420px at 76% -10%,rgba(255,204,0,.20),transparent 60%),
             radial-gradient(600px 300px at 8% 110%,rgba(255,204,0,.07),transparent 62%);
  pointer-events:none}
/* riscos diagonais, como nas pecas da campanha */
.ml-hero::after{content:"";position:absolute;top:8%;left:-4%;width:150px;height:5px;
  background:var(--amarelo);border-radius:5px;transform:rotate(-38deg);opacity:.5;
  box-shadow:26px 40px 0 -1px var(--amarelo),52px 80px 0 -2px rgba(255,204,0,.55)}
.ml-hero-grid{position:relative;display:grid;grid-template-columns:1.12fr .88fr;
  gap:56px;align-items:center}
.ml-selo{display:inline-flex;align-items:center;gap:9px;background:rgba(255,204,0,.11);
  border:1px solid var(--linha);color:var(--amarelo);font-weight:700;font-size:12.5px;
  letter-spacing:.07em;text-transform:uppercase;padding:8px 16px;border-radius:30px;
  margin-bottom:24px}
.ml-selo svg{width:15px;height:15px}
.ml-hero h1{font-size:clamp(38px,6.8vw,68px);font-weight:900;line-height:1;
  margin:0 0 22px;letter-spacing:-.035em}
.ml-hero h1 em{font-style:normal;color:var(--amarelo);
  text-shadow:0 0 44px rgba(255,204,0,.34)}
.ml-lead{font-size:18px;color:#c5c6ca;line-height:1.62;margin:0 0 32px;max-width:520px}
.ml-acoes{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:30px}
.ml-acoes .ml-btn{padding:16px 30px;font-size:15px}
.ml-confia{display:flex;gap:14px;flex-wrap:wrap}
.ml-confia span{display:inline-flex;align-items:center;gap:8px;color:#9a9ba1;
  font-size:13.5px;font-weight:600;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);padding:8px 14px;border-radius:24px}
.ml-confia svg{width:15px;height:15px;color:var(--amarelo)}

/* celular */
.ml-fone{justify-self:center;width:282px;background:#000;border:10px solid #212228;
  border-radius:38px;padding:18px 16px 24px;position:relative;
  box-shadow:0 28px 70px rgba(0,0,0,.7),0 0 0 1px rgba(255,204,0,.16),
             0 0 90px rgba(255,204,0,.10)}
.ml-fone-topo{width:78px;height:5px;background:#3a3b42;border-radius:5px;margin:0 auto 18px}
.ml-fone h4{margin:0 0 3px;font-size:14.5px;font-weight:800}
.ml-peq{color:#84858c;font-size:11.5px;margin:0 0 14px}
.ml-campo{background:#141519;border:1px solid #26272d;border-radius:12px;
  padding:11px 13px;margin-bottom:9px;font-size:11px;color:#84858c;
  display:flex;align-items:center;gap:10px}
.ml-campo b{display:block;color:#fff;font-size:12.5px;font-weight:700;margin-bottom:1px}
.ml-ponto{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ml-ponto.o{background:#fff}
.ml-ponto.d{background:var(--amarelo)}
.ml-oferta{background:linear-gradient(180deg,rgba(255,204,0,.16),rgba(255,204,0,.06));
  border:1.5px solid var(--amarelo);border-radius:14px;padding:14px;
  text-align:center;margin:13px 0}
.ml-oferta small{display:block;color:#b6b7bd;font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:6px}
.ml-oferta strong{font-size:31px;font-weight:900;color:var(--amarelo);line-height:1;
  text-shadow:0 0 26px rgba(255,204,0,.4)}
.ml-cat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:13px 0}
.ml-cat div{background:#141519;border:1px solid #26272d;border-radius:10px;
  padding:9px 2px 7px;text-align:center;font-size:9px;color:#b6b7bd;font-weight:700}
.ml-cat div.on{border-color:var(--amarelo);background:rgba(255,204,0,.1);color:var(--amarelo)}
.ml-cat svg{width:19px;height:19px;margin:0 auto 3px;display:block}
.ml-fone .ml-cta{background:var(--amarelo);color:#0B0B0D;text-align:center;
  font-weight:900;padding:13px;border-radius:12px;font-size:13px;margin-top:5px;
  box-shadow:0 8px 24px rgba(255,204,0,.28)}

/* -------------------------------------------------- como funciona */
.ml-passos{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:p}
.ml-passo{background:linear-gradient(165deg,#1a1b20,#121317);
  border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:30px 24px 26px;
  position:relative;transition:border-color .2s ease,transform .2s ease}
.ml-passo:hover{border-color:var(--linha);transform:translateY(-3px)}
.ml-passo::before{counter-increment:p;content:"0" counter(p);position:absolute;
  top:-13px;left:24px;background:var(--amarelo);color:#0B0B0D;border-radius:8px;
  padding:4px 10px;font-weight:900;font-size:13px;letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(255,204,0,.3)}
.ml-passo h3{margin:12px 0 8px;font-size:17px;font-weight:800}
.ml-passo p{margin:0;color:#a3a4aa;font-size:14.5px;line-height:1.58}

/* ------------------------------------------------------- servicos */
.ml-servs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ml-serv{background:linear-gradient(165deg,#1a1b20,#121317);
  border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:30px 24px;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.ml-serv:hover{border-color:var(--amarelo);transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.45)}
.ml-serv-ico{width:60px;height:60px;border-radius:16px;
  background:rgba(255,204,0,.1);border:1px solid var(--linha);
  display:grid;place-items:center;margin-bottom:18px}
.ml-serv h3{margin:0 0 8px;font-size:18px;font-weight:800;color:var(--amarelo)}
.ml-serv p{margin:0 0 16px;color:#a3a4aa;font-size:14.5px;line-height:1.55}
.ml-preco{font-size:12.5px;color:#7c7d84;font-weight:700;letter-spacing:.02em;
  border-top:1px solid rgba(255,255,255,.08);padding-top:13px}
.ml-preco b{color:#fff;font-size:15px}

/* ------------------------------------------------------ motorista */
.ml-mot{background:linear-gradient(150deg,#17181d 0%,#0B0B0D 62%);position:relative;
  overflow:hidden}
.ml-mot::before{content:"";position:absolute;top:-15%;right:-8%;width:460px;height:460px;
  background:radial-gradient(circle,rgba(255,204,0,.14),transparent 66%);pointer-events:none}
.ml-mot-grid{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;
  gap:58px;align-items:center}
.ml-taxa{background:linear-gradient(170deg,#0f0f12,#000);border:2px solid var(--amarelo);
  border-radius:24px;padding:38px 32px;text-align:center;
  box-shadow:0 0 60px rgba(255,204,0,.17),inset 0 1px 0 rgba(255,255,255,.06)}
.ml-num{font-size:clamp(72px,14vw,116px);font-weight:900;color:var(--amarelo);
  line-height:.88;letter-spacing:-.05em;text-shadow:0 0 56px rgba(255,204,0,.42)}
.ml-rot{font-size:15px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  margin-top:10px;color:#e8e8ea}
.ml-conta{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;
  margin-top:26px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13)}
.ml-conta small{display:block;color:#84858c;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:6px;line-height:1.3}
.ml-conta b{font-size:22px;font-weight:900}
.ml-seta{color:var(--amarelo);font-size:24px;font-weight:900}
.ml-benef{list-style:none;padding:0;margin:0 0 32px}
.ml-benef li{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;gap:15px;align-items:flex-start}
.ml-benef li:last-child{border-bottom:none}
.ml-bico{flex:0 0 auto;width:30px;height:30px;background:rgba(255,204,0,.13);
  border:1px solid var(--linha);border-radius:9px;display:grid;place-items:center;
  color:var(--amarelo)}
.ml-bico svg{width:16px;height:16px}
.ml-benef b{display:block;font-size:16px;margin-bottom:3px}
.ml-benef span{color:#a3a4aa;font-size:14.5px;line-height:1.5}

/* ------------------------------------------------------ seguranca */
.ml-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ml-segc{background:linear-gradient(165deg,#1a1b20,#121317);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:26px 22px}
.ml-segc .ml-svg{margin-bottom:14px}
.ml-segc h4{margin:0 0 6px;font-size:15px;font-weight:800}
.ml-segc p{margin:0;color:#a3a4aa;font-size:13.5px;line-height:1.55}

/* -------------------------------------------------------- chamada */
.ml-final{background:linear-gradient(135deg,#FFCC00,#FFD84D 55%,#E6B800);
  color:#0B0B0D;text-align:center;padding:72px 0;position:relative;overflow:hidden}
.ml-final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 260px at 50% -30%,rgba(255,255,255,.5),transparent 62%)}
.ml-final>*{position:relative}
.ml-final h2{font-size:clamp(30px,5.4vw,48px);font-weight:900;margin:0 0 14px;
  letter-spacing:-.028em;color:#0B0B0D}
.ml-final p{font-size:17.5px;margin:0 0 30px;font-weight:600;color:rgba(11,11,13,.76)}
.ml-final .ml-btn{background:#0B0B0D;color:var(--amarelo) !important;
  padding:17px 38px;font-size:16px;display:inline-flex;align-items:center;gap:11px}
.ml-final .ml-btn svg{width:20px;height:20px}
.ml-final .ml-btn:hover{box-shadow:0 12px 32px rgba(0,0,0,.4)}
.ml-assina{margin-top:28px;font-size:15.5px;font-weight:800;font-style:italic;
  color:rgba(11,11,13,.72)}

@media(max-width:980px){
  .ml-hero-grid,.ml-mot-grid{grid-template-columns:1fr;gap:44px}
  .ml-passos,.ml-servs,.ml-seg{grid-template-columns:repeat(2,1fr)}
  .ml-fone{order:-1}
  .ml-hero::after{display:none}
}
@media(max-width:560px){
  .ml-passos,.ml-servs,.ml-seg{grid-template-columns:1fr}
  .ml-sec{padding:58px 0}
  .ml-conta{grid-template-columns:1fr;gap:12px}
  .ml-seta{transform:rotate(90deg)}
}

/* -----------------------------------------------------------------
   RECURSOS

   Grade de tres em tela larga, duas em tablet, uma no celular. Cada
   cartao e um recurso que EXISTE — a secao foi criada porque metade
   do que o aplicativo faz nao estava em lugar nenhum do site.
   ----------------------------------------------------------------- */
.ml-recursos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ml-recurso{background:var(--grafite);border:1px solid rgba(255,255,255,.07);
  border-radius:14px;padding:22px 20px}
.ml-recurso h3{font-size:16px;font-weight:700;margin:0 0 8px;color:var(--amarelo)}
.ml-recurso p{margin:0;color:#a9aab0;font-size:14.5px;line-height:1.6}
@media (max-width:980px){.ml-recursos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.ml-recursos{grid-template-columns:1fr}}


/* =================================================================
   CARTAO DE VEICULO — arte a esquerda, texto a direita
   =================================================================

   Antes eram seis cartoes verticais em quatro colunas, com a arte em
   cima. Em coluna estreita o veiculo ficava pequeno demais para se
   reconhecer, que e justamente o trabalho dele: a pessoa bate o olho
   e sabe se aquilo e a 4x4 ou o sedan.

   Deitado, a arte ganha o dobro de largura e o texto para de brigar
   com ela por espaco vertical. Duas colunas de cartao largo em vez de
   quatro estreitas.
   ================================================================= */
.ml-servs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

.ml-serv{display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:center;
  padding:22px 24px}

/* O filete entre a arte e o texto. Um degrade que nasce e morre
   transparente — linha cheia de ponta a ponta pesa e corta o cartao em
   dois; assim ela separa sem dividir. */
.ml-serv-arte{position:relative;display:flex;align-items:center;justify-content:center;
  height:88px}
.ml-serv-arte::after{content:"";position:absolute;right:-9px;top:6%;bottom:6%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,204,0,.28),transparent)}
.ml-serv-arte img{max-height:100%;max-width:100%;width:auto;height:auto;
  object-fit:contain;display:block;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));
  transition:transform .25s ease}
.ml-serv:hover .ml-serv-arte img{transform:translateX(3px) scale(1.05)}

.ml-serv-txt{min-width:0}
.ml-serv-txt h3{margin:0 0 6px;font-size:17px;font-weight:800;color:var(--amarelo)}
.ml-serv-txt p{margin:0 0 12px;color:#a3a4aa;font-size:14px;line-height:1.5}

/* O preco nao precisa mais de linha em cima: o filete ja separa a arte
   do texto, e duas divisorias no mesmo cartao viram grade. */
.ml-serv-txt .ml-preco{border-top:none;padding-top:0;display:block}
.ml-serv-txt .ml-preco small{text-transform:uppercase;letter-spacing:.06em;font-size:10.5px}

/* A PRIMEIRA CATEGORIA GANHA DESTAQUE.
   A Caminhonete 4x4 e o unico diferencial que nenhum concorrente da
   regiao tem. Uma borda amarela discreta guia o olho para ela sem
   precisar escrever "destaque" em lugar nenhum. */
.ml-servs .ml-serv:first-child{border-color:rgba(255,204,0,.42)}
.ml-servs .ml-serv:first-child::before{content:"";position:absolute;left:0;top:16%;
  bottom:16%;width:3px;border-radius:0 3px 3px 0;background:var(--amarelo)}
.ml-serv{position:relative;overflow:hidden}

@media (max-width:980px){
  .ml-servs{grid-template-columns:1fr}
}
@media (max-width:520px){
  .ml-serv{grid-template-columns:92px 1fr;gap:14px;padding:18px 18px}
  .ml-serv-arte{height:72px}
  .ml-serv-arte::after{right:-7px}
}

/* `ml-acoes` era usada na pagina original e nunca teve regra: os botoes
   ficavam colados um no outro. */
.ml-acoes{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}


/* -----------------------------------------------------------------
   FAIXAS ULTRA-LARGAS

   As pecas de campanha tem por volta de 3,5:1. A proporcao fica no
   \`aspect-ratio\` de cada faixa, definido pelo atributo width/height da
   propria imagem — assim a arte manda, nao o CSS. Foi o contrario disso
   que cortou a faixa do topo duas vezes.

   No celular a faixa fica com uns 110 px de altura. Baixa, mas inteira:
   recortar uma peca que tem texto desenhado corta o texto junto.
   ----------------------------------------------------------------- */
.ml-faixa-larga .ml-img{aspect-ratio:auto;border-radius:0;border:0;box-shadow:none}
.ml-faixa-larga .ml-img img{width:100%;height:auto;object-fit:unset}

/* A faixa do motorista tem um botao desenhado; a faixa inteira e o link. */
.ml-faixa-link{display:block;text-decoration:none;transition:filter .2s ease}
.ml-faixa-link:hover{filter:brightness(1.06)}

/* =================================================================
   FECHO — convite de expansao
   =================================================================

   O cartao e ESCURO dentro de uma seccao amarela, entao cada texto
   dele precisa da propria cor declarada. Sem isso o <h3> herda o preto
   que a seccao amarela define e some no fundo escuro — foi o que
   aconteceu na primeira versao.
   ================================================================= */
.ml-final .ml-acoes{justify-content:center;margin:0 0 46px}

.ml-expansao{display:block;text-align:center;max-width:660px;margin:0 auto;
  padding:40px 42px;border-radius:26px;
  background:linear-gradient(165deg,#141519,#0B0B0D);
  border:1px solid rgba(0,0,0,.22);
  box-shadow:0 26px 70px rgba(0,0,0,.32)}

.ml-expansao-rot{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amarelo);margin-bottom:14px}

.ml-expansao h3{margin:0 0 14px;font-size:clamp(21px,3.1vw,27px);font-weight:900;
  line-height:1.15;letter-spacing:-.02em;color:#fff}

.ml-expansao p{margin:0 0 26px;font-size:15.5px;line-height:1.65;font-weight:400;
  color:rgba(255,255,255,.72)}

/* O botao do cartao e amarelo sobre o escuro — o inverso do botao da
   seccao, que e escuro sobre o amarelo. Assim os dois se distinguem em
   vez de disputarem o mesmo clique. */
.ml-btn-amarelo{background:var(--amarelo);color:#0B0B0D !important;
  border:0;padding:15px 32px;font-weight:800}
.ml-btn-amarelo:hover{background:#fff;box-shadow:0 14px 34px rgba(0,0,0,.34)}

@media (max-width:620px){
  .ml-expansao{padding:30px 22px;border-radius:20px}
}


/* Aviso no lugar de um botao sem destino, na seccao escura do motorista. */
.ml-emBreve{display:inline-block;padding:15px 30px;border-radius:99px;
  font-weight:700;font-size:15px;
  border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.03)}

/* =================================================================
   FECHO AMARELO — acabamento
   ================================================================= */

/* RESPIRO. Eram 72 px; o texto quase encostava nas divisoes escuras
   de cima e de baixo, e e essa colagem que da aspecto de rascunho. */
.ml-final{padding:110px 0 96px}

.ml-final h2{font-size:clamp(32px,5.8vw,54px);line-height:1.02;
  letter-spacing:-.035em;margin:0 0 18px}

/* Linha longa demais cansa: o olho perde o comeco da linha seguinte.
   62 caracteres e a faixa confortavel, e e o que este limite produz. */
.ml-final p{max-width:640px;margin:0 auto 34px;font-size:18px;line-height:1.6;
  font-weight:500;color:rgba(11,11,13,.72)}

/* -----------------------------------------------------------------
   SELO DAS LOJAS

   Solido, nao tracejado. O tracejado lia como rascunho — ironico, ja
   que ele existe para dizer "ainda nao". Assim comunica que esta
   chegando sem parecer inacabado, e sem fingir que e clicavel.
   ----------------------------------------------------------------- */
.ml-selo-lojas{display:inline-flex;align-items:center;gap:11px;
  padding:15px 30px;border-radius:99px;
  background:rgba(11,11,13,.9);color:rgba(255,255,255,.92);
  font-weight:700;font-size:15px;letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(11,11,13,.22),
             inset 0 1px 0 rgba(255,255,255,.1)}
.ml-selo-lojas svg{width:17px;height:17px;color:var(--amarelo);flex:0 0 auto}

/* -----------------------------------------------------------------
   CARTAO DE EXPANSAO

   Sombra difusa em vez de dura, e a borda iluminada por dentro: um fio
   branco a 8% no topo e um risco escuro embaixo. E assim que a luz pega
   numa superficie real, e e o que separa um cartao que flutua de um
   retangulo colado no fundo.
   ----------------------------------------------------------------- */
.ml-expansao{max-width:680px;padding:46px 48px;border-radius:28px;
  background:linear-gradient(168deg,#17181d 0%,#0B0B0D 78%);
  border:0;
  box-shadow:0 2px 4px rgba(11,11,13,.10),
             0 12px 28px rgba(11,11,13,.16),
             0 40px 80px rgba(11,11,13,.26),
             inset 0 1px 0 rgba(255,255,255,.08),
             inset 0 -1px 0 rgba(0,0,0,.5);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease}
.ml-expansao:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(11,11,13,.10),
             0 16px 34px rgba(11,11,13,.18),
             0 52px 96px rgba(11,11,13,.3),
             inset 0 1px 0 rgba(255,255,255,.1),
             inset 0 -1px 0 rgba(0,0,0,.5)}

.ml-expansao-rot{font-size:11px;letter-spacing:.2em;margin-bottom:16px}

.ml-expansao h3{font-size:clamp(23px,3.3vw,30px);line-height:1.12;
  letter-spacing:-.022em;margin:0 0 16px;color:#fff}

.ml-expansao p{max-width:none;margin:0 0 30px;font-size:16px;line-height:1.7;
  font-weight:400;color:rgba(255,255,255,.68)}

.ml-expansao .ml-btn-amarelo{gap:9px}
.ml-expansao .ml-btn-amarelo svg{width:17px;height:17px}

/* -----------------------------------------------------------------
   FECHO DO BLOCO

   Pesos diferentes para a assinatura e a regiao. Dois paragrafos
   iguais soltos no fim nao dizem qual e o principal.
   ----------------------------------------------------------------- */
/* .ml-final p tem especificidade 0,1,1 e vence uma classe sozinha (0,1,0).
   Sem o pai no seletor, o tamanho de 18px do paragrafo de apoio sobrescrevia
   estes dois e as tres frases ficavam do mesmo tamanho — que e exatamente a
   falta de hierarquia que este bloco veio resolver. */
.ml-final .ml-assinatura{max-width:none;margin:46px auto 0;font-size:17px;
  font-weight:700;letter-spacing:-.01em;color:rgba(11,11,13,.8)}

.ml-final .ml-regiao{max-width:none;margin:14px auto 0;font-size:11.5px;
  font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(11,11,13,.46)}

@media (max-width:620px){
  .ml-final{padding:78px 0 68px}
  .ml-expansao{padding:34px 24px;border-radius:22px}
  .ml-selo-lojas{padding:14px 22px;font-size:14px}
}

/* =================================================================
   FECHO — redesenho

   O QUE ESTAVA ERRADO

   Tudo empilhado no eixo central: titulo, paragrafo, selo, cartao
   preto, assinatura, regiao. Seis blocos centralizados um debaixo do
   outro sobre um amarelo chapado. Sem eixo de leitura, sem
   profundidade, e o cartao preto boiando no meio sem se relacionar
   com nada em volta.

   O QUE MUDA

   Grade de duas colunas com pesos diferentes (1,05 / 0,95): a esquerda
   e institucional e alinhada a esquerda — so isso ja quebra o efeito
   de "tudo no meio" —, e a direita recebe o convite, que passa a ser
   um painel ancorado na grade em vez de um caixote solto.

   O fundo ganha camadas: dois borroes de amarelo em tons diferentes,
   uma trama diagonal fraca e um mapa desenhado dentro do painel.
   Amarelo chapado nao tem profundidade; amarelo em camadas tem.

   ESTE BLOCO VEM DEPOIS das regras antigas de .ml-final no arquivo, e
   e por isso que ele vence os empates de especificidade sem precisar
   de !important.
   ================================================================= */

.ml-final{padding:104px 0 92px;text-align:left;
  background:linear-gradient(152deg,#FFDD4A 0%,#FFCC00 42%,#F5BE00 100%)}

/* O brilho radial antigo foi substituido pelos borroes, que sao dois e
   ficam nos cantos. Somados, os dois efeitos lavavam o centro. */
.ml-final::before{display:none}

/* --- camada grafica --- */
.ml-final-fundo{position:absolute;inset:0;pointer-events:none;overflow:hidden}

.ml-borrao{position:absolute;border-radius:50%;filter:blur(70px)}
.ml-borrao-a{width:620px;height:620px;top:-280px;left:-120px;
  background:radial-gradient(circle,rgba(255,255,255,.55),transparent 68%)}
.ml-borrao-b{width:560px;height:560px;bottom:-300px;right:-100px;
  background:radial-gradient(circle,rgba(214,158,0,.5),transparent 66%)}

/* Trama diagonal: textura, nao estampa. A 4% ela e lida como
   acabamento; acima disso vira listra e disputa com o texto. */
.ml-trama{position:absolute;inset:0;
  background:repeating-linear-gradient(58deg,
    rgba(11,11,13,.04) 0 1px, transparent 1px 13px)}

.ml-final .ml-final-grid{position:relative;display:grid;
  grid-template-columns:1.05fr .95fr;gap:66px;align-items:center}

/* --- coluna institucional --- */
.ml-final-txt{text-align:left;min-width:0}

.ml-final-rot{display:inline-flex;align-items:center;gap:7px;
  padding:7px 15px 7px 12px;margin:0 0 22px;border-radius:99px;
  background:rgba(11,11,13,.09);border:1px solid rgba(11,11,13,.14);
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(11,11,13,.68)}
.ml-final-rot svg{width:14px;height:14px;flex:0 0 auto}

.ml-final h2{font-size:clamp(34px,4.6vw,56px);font-weight:900;line-height:1.02;
  letter-spacing:-.038em;margin:0 0 20px;color:#0B0B0D}

/* 0,2,0 — vence .ml-final p (0,1,1), que centraliza e limita a 640px. */
.ml-final .ml-final-lead{max-width:480px;margin:0 0 34px;font-size:17.5px;
  line-height:1.62;font-weight:500;color:rgba(11,11,13,.7)}

/* -----------------------------------------------------------------
   SELO DAS LOJAS

   Um bloco so, com os dois simbolos separados do texto por um fio.
   Vira <a> sozinho quando houver link de loja no painel; ate la e uma
   <div>, porque clique que nao leva a lugar nenhum faz a pessoa achar
   que o site quebrou.
   ----------------------------------------------------------------- */
.ml-lojas-selo{display:inline-flex;align-items:center;gap:16px;
  padding:14px 26px 14px 20px;border-radius:18px;text-decoration:none;
  background:linear-gradient(165deg,#1a1b20,#0B0B0D);
  box-shadow:0 2px 4px rgba(11,11,13,.14),0 14px 34px rgba(11,11,13,.26),
             inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease}
a.ml-lojas-selo:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(11,11,13,.14),0 20px 44px rgba(11,11,13,.32),
             inset 0 1px 0 rgba(255,255,255,.12)}

.ml-lojas-icones{display:flex;align-items:center;gap:10px;
  padding-right:16px;border-right:1px solid rgba(255,255,255,.12)}
.ml-ic-play{width:21px;height:21px;flex:0 0 auto}
.ml-ic-apple{width:19px;height:19px;flex:0 0 auto}

.ml-lojas-txt{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.ml-lojas-txt small{font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.45)}
.ml-lojas-txt strong{font-size:15.5px;font-weight:800;color:#fff}

/* --- fecho da coluna --- */
.ml-final .ml-assinatura{max-width:none;margin:38px 0 0;font-size:16.5px;
  font-weight:700;letter-spacing:-.008em;color:rgba(11,11,13,.66);text-align:left}

.ml-final .ml-regiao{max-width:none;margin:10px 0 0;font-size:11.5px;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(11,11,13,.44);text-align:left}

/* -----------------------------------------------------------------
   PAINEL DA EXPANSAO

   Nao e mais um cartao centralizado no meio da seccao: ocupa a coluna
   da direita e se apoia na grade. O mapa desenhado atras do texto poe
   o assunto do painel dentro do proprio painel.

   A sombra e em tres camadas — contato, corpo e ambiente. Uma sombra
   unica e dura cola o retangulo no fundo; tres camadas fazem ele
   flutuar.
   ----------------------------------------------------------------- */
.ml-cidade{position:relative;overflow:hidden;border-radius:26px;
  padding:44px 42px;min-width:0;
  background:linear-gradient(158deg,#1b1c22 0%,#0B0B0D 72%);
  box-shadow:0 2px 4px rgba(11,11,13,.12),0 18px 40px rgba(11,11,13,.2),
             0 48px 90px rgba(11,11,13,.26),
             inset 0 1px 0 rgba(255,255,255,.08)}

.ml-cidade-mapa{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
  /* some no rodape do painel para nao competir com o botao */
  -webkit-mask-image:linear-gradient(200deg,#000 12%,transparent 76%);
  mask-image:linear-gradient(200deg,#000 12%,transparent 76%)}

.ml-cidade-txt{position:relative}

.ml-cidade .ml-expansao-rot{display:block;font-size:11px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amarelo);
  margin:0 0 14px}

.ml-cidade h3{margin:0 0 14px;font-size:clamp(22px,2.6vw,28px);font-weight:900;
  line-height:1.14;letter-spacing:-.024em;color:#fff}

.ml-cidade p{max-width:none;margin:0 0 28px;font-size:15.5px;line-height:1.68;
  font-weight:400;color:rgba(255,255,255,.66);text-align:left}

.ml-final .ml-btn-amarelo{display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:14px;text-decoration:none;
  background:var(--amarelo);color:#0B0B0D !important;
  font-weight:800;font-size:15px;border:0;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.ml-final .ml-btn-amarelo svg{width:16px;height:16px;flex:0 0 auto;
  transition:transform .2s ease}
.ml-final .ml-btn-amarelo:hover{background:#fff;transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.34)}
.ml-final .ml-btn-amarelo:hover svg{transform:translateX(3px)}

.ml-final-arte{position:relative;margin-top:64px}

/* Uma coluna antes de as duas ficarem estreitas demais para o titulo
   grande da esquerda e o paragrafo da direita conviverem. */
@media (max-width:980px){
  .ml-final .ml-final-grid{grid-template-columns:1fr;gap:44px}
  .ml-final .ml-final-lead{max-width:none}
}
@media (max-width:620px){
  .ml-final{padding:74px 0 66px}
  .ml-final h2{letter-spacing:-.03em}
  .ml-cidade{padding:32px 24px;border-radius:20px}
  .ml-lojas-selo{padding:13px 20px 13px 16px;gap:13px}
  .ml-lojas-icones{padding-right:13px}
}