/* ============================================================================
   MEGATELECOM · SISTEMA VISUAL v2 — 23/08/2026
   ----------------------------------------------------------------------------
   ESTA VERSÃO CORRIGE UM ERRO MEU, E O ERRO TEM NOME.

   Quando o dono disse "a identidade é laranja", eu pintei tudo de laranja:
   faixa de oferta, cartão em destaque, chamada final. Fui pesquisar como as
   marcas laranja de verdade fazem — Orange, ING, Home Depot, Firefox,
   Nickelodeon, Fanta — e todas fazem o contrário.

   O QUE A PESQUISA MOSTROU, e que governa este arquivo:

   1. LARANJA É OS 10%, NUNCA OS 60%. A regra 60-30-10 diz que a cor dominante
      e a secundária são neutras, e a cor de marca fica reservada para o que
      precisa saltar — em primeiro lugar o botão de ação. Marca laranja que
      pinta a tela inteira de laranja não tem para onde acentuar: quando tudo
      grita, nada é ouvido.

   2. LARANJA NÃO É COR DE TEXTO. Está medido e confirmado pela literatura:
      texto laranja sobre fundo claro reprova na norma de acessibilidade, e
      texto claro sobre superfície laranja também (2,77 para 1 no nosso caso).
      Aqui o laranja é SUPERFÍCIE ou é ACENTO — nunca corpo de texto.

   3. O NEUTRO QUE ACOMPANHA DEFINE O TOM. Laranja com branco fica limpo e
      moderno; com preto fica ousado e de alto contraste; com cinza fica
      corporativo. Escolhemos o preto — mas um preto QUENTE (#0E0B09, com
      vermelho puxando), para o neutro pertencer à família do laranja em vez de
      brigar com ele. Preto azulado ao lado de laranja dá aquela cara de
      "template de tecnologia" que o dono já rejeitou.

   4. UM MOMENTO LARANJA POR PÁGINA. Em vez de laranja em todo bloco, existe
      UMA faixa inteira de laranja — a chamada final. Ela é o único lugar onde
      a marca ocupa a tela toda, e por isso ela funciona.

   Toda combinação de texto e fundo aqui foi medida antes de virar código. O
   pior caso é 5,89 para 1, contra o mínimo de 4,5.
   ============================================================================ */

:root{
  /* ---- os 60%: neutro quente ---- */
  --fundo:#0E0B09;
  --superficie:#17120F;
  --elevado:#211A15;

  /* ---- os 30%: estrutura ---- */
  --fio:rgba(255,220,200,.12);
  --fio-forte:rgba(255,220,200,.26);

  /* ---- os 10%: a marca ---- */
  --laranja:#FF6600;
  --laranja-claro:#FF8A3D;
  --laranja-fundo:#FF6600;
  --sobre-laranja:#1A0800;

  /* ---- tinta ---- */
  --tinta:#FBF7F4;
  --dim:#D6C8BF;
  --dimmer:#A69487;

  --largura:1200px;
  --display:"Sora",system-ui,-apple-system,sans-serif;

  /* Escala tipográfica com salto grande de propósito: é o contraste entre o
     título e o texto que faz uma página parecer desenhada em vez de digitada. */
  --t1:clamp(38px,6.2vw,74px);
  --t2:clamp(27px,3.8vw,46px);
  --t3:20px;
}

*{box-sizing:border-box}
html{background:var(--fundo);scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;color:var(--tinta);background:var(--fundo);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--laranja-claro)}
a:focus-visible,button:focus-visible{outline:2px solid var(--tinta);outline-offset:3px;border-radius:10px}
.pular{position:absolute;left:-9999px}
.pular:focus{left:14px;top:14px;z-index:99;background:var(--laranja);color:var(--sobre-laranja);
  padding:12px 18px;border-radius:10px;font-weight:800;text-decoration:none}

.dentro{width:min(var(--largura),100%);margin-inline:auto;padding-inline:24px}

/* ---- ritmo ---------------------------------------------------------------
   Respiro grande e constante. O site anterior tinha 64px entre seções e o
   conteúdo parecia empilhado; aqui são 104px, e é a maior parte da diferença
   entre "página feita" e "página montada". */
section{padding-block:104px}
section + section{padding-top:0}
.bloco{display:grid;gap:22px}

/* ---- tipografia ---------------------------------------------------------- */
h1,h2,h3,.numero-grande{font-family:var(--display);font-weight:800;letter-spacing:-.04em;
  text-wrap:balance;margin:0;line-height:1.02}
h1{font-size:var(--t1);max-width:16ch}
h2{font-size:var(--t2);max-width:20ch;line-height:1.05}
h3{font-size:var(--t3);letter-spacing:-.02em;line-height:1.25}
.olho{display:inline-flex;align-items:center;gap:9px;font-family:ui-monospace,Menlo,monospace;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dimmer);margin:0 0 20px}
.olho::before{content:"";width:22px;height:2px;background:var(--laranja);border-radius:2px}
.texto{color:var(--dim);font-size:18px;max-width:62ch;margin:0}
.texto strong{color:var(--tinta);font-weight:600}
p{margin:0}

/* ---- botões: o principal lugar onde o laranja vive ----------------------- */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;
  padding:15px 26px;border-radius:14px;font-weight:800;font-size:16.5px;text-decoration:none;border:0;
  cursor:pointer;background:var(--laranja);color:var(--sobre-laranja);
  transition:transform .16s ease,background .16s ease}
.botao:hover{background:var(--laranja-claro);transform:translateY(-2px)}
.botao:active{transform:translateY(1px)}
.botao-linha{background:transparent;color:var(--tinta);border:1px solid var(--fio-forte)}
.botao-linha:hover{background:rgba(255,255,255,.06);border-color:var(--fio-forte)}
.botao-largo{width:100%}
.acoes{display:flex;flex-wrap:wrap;gap:12px}

/* ---- topo ----------------------------------------------------------------- */
.contato-topo{border-bottom:1px solid var(--fio);font-size:14.5px}
.contato-topo .dentro{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
  justify-content:space-between;padding-block:10px}
.contato-topo a{color:var(--dim);text-decoration:none}
.contato-topo a:hover{color:var(--tinta)}
.contato-topo b{color:var(--tinta)}

.topo{position:sticky;top:0;z-index:50;background:rgba(14,11,9,.86);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--fio)}
.topo .dentro{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:76px;padding-block:12px}
.marca{background:#fff;border-radius:11px;padding:8px 13px;display:inline-flex;align-items:center;
  height:48px;flex:0 0 auto}
.marca img{height:30px;width:auto;max-width:none}
.menu{display:flex;gap:2px;flex:1 1 auto;justify-content:center}
.menu a{color:var(--dim);text-decoration:none;font-weight:600;font-size:15.5px;padding:10px 15px;
  border-radius:11px;transition:color .16s ease,background .16s ease}
.menu a:hover{color:var(--tinta);background:rgba(255,255,255,.05)}

/* ---- herói --------------------------------------------------------------- */
.heroi{padding-top:76px}
.heroi .dentro{display:grid;gap:56px;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:center}
.heroi h1 em{font-style:normal;color:var(--laranja-claro)}
.heroi .texto{margin-top:24px}
.provas{display:flex;flex-wrap:wrap;gap:28px;margin-top:36px;padding-top:28px;
  border-top:1px solid var(--fio)}
.prova b{display:block;font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.04em;
  line-height:1}
.prova span{font-size:14px;color:var(--dimmer)}

/* o cartão de cobertura: único elemento com elevação real na primeira tela */
.cobertura{padding:32px;border-radius:24px;background:var(--superficie);border:1px solid var(--fio);
  box-shadow:0 40px 80px -40px #000}
.cobertura h2{font-size:26px;max-width:none;margin-bottom:8px}
.cobertura>p{color:var(--dim);font-size:15.5px;margin-bottom:24px}
.campo{display:block;margin-bottom:16px}
.campo span{display:block;font-size:14px;font-weight:600;color:var(--dim);margin-bottom:8px}
.campo input,.campo select{width:100%;min-height:54px;padding:0 16px;border-radius:14px;
  background:var(--fundo);border:1px solid var(--fio-forte);color:var(--tinta);font-size:16px;
  font-family:inherit}
.campo input::placeholder{color:var(--dimmer)}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--laranja);
  box-shadow:0 0 0 3px rgba(255,102,0,.24)}
.cobertura small{display:block;margin-top:15px;font-size:13.5px;color:var(--dimmer);line-height:1.55}

/* ---- oferta: números grandes, sem caixa laranja -------------------------- */
.oferta{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:44px;
  border:1px solid var(--fio);border-radius:22px;overflow:hidden;background:var(--superficie)}
.oferta>div{padding:32px 28px;border-right:1px solid var(--fio)}
.oferta>div:last-child{border-right:0}
.oferta span{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer);font-weight:700;margin-bottom:12px}
.numero-grande{font-size:clamp(30px,4vw,42px);line-height:1}
.oferta .destaque-cor{color:var(--laranja-claro)}
.oferta small{display:block;margin-top:8px;font-size:14px;color:var(--dim)}

/* ---- perfis --------------------------------------------------------------- */
.perfis{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));margin-top:44px}
.perfil{display:flex;flex-direction:column;padding:30px 26px;border-radius:22px;
  border:1px solid var(--fio);background:var(--superficie);position:relative;
  transition:border-color .2s ease,transform .2s ease,background .2s ease}
.perfil:hover{border-color:var(--fio-forte);transform:translateY(-4px);background:var(--elevado)}
.perfil.principal{border-color:var(--laranja);background:var(--elevado)}
.perfil .selo{position:absolute;top:-11px;left:26px;background:var(--laranja);
  color:var(--sobre-laranja);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;padding:5px 12px;border-radius:7px}
.perfil h3{margin-bottom:10px}
.perfil .quem{font-size:15px;color:var(--tinta);font-weight:600}
.perfil .uso{margin-top:8px;font-size:15px;color:var(--dim);line-height:1.55}
.perfil .botao{margin-top:26px}

.rural{margin-top:20px;padding:28px 30px;border-radius:20px;border:1px solid var(--fio);
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.rural div{max-width:56ch}
.rural p{color:var(--dim);font-size:15.5px;margin-top:6px}

/* ---- lista de benefícios: linhas, não cartões ---------------------------
   Seis cartões lado a lado viram uma parede. Como linhas separadas por fio,
   a lista se lê de cima a baixo e o olho não precisa escolher por onde começar. */
.itens{margin-top:44px;border-top:1px solid var(--fio)}
.item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px;padding:28px 0;
  border-bottom:1px solid var(--fio);align-items:start}
.item .icone{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:var(--elevado);border:1px solid var(--fio)}
.item .icone svg{width:23px;height:23px;stroke:var(--laranja-claro);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.item p{margin-top:7px;color:var(--dim);font-size:16px;max-width:62ch}
@media(min-width:900px){
  .item{grid-template-columns:56px minmax(0,22ch) minmax(0,1fr);align-items:center}
  .item p{margin-top:0}
}

/* ---- aplicativo ----------------------------------------------------------- */
.app{display:grid;gap:64px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.app ul{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.app li{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;color:var(--dim);
  font-size:16.5px}
.app li svg{width:20px;height:20px;stroke:var(--laranja-claro);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.fone{width:250px;border-radius:34px;border:1px solid var(--fio-forte);background:#000;padding:12px;
  box-shadow:0 44px 80px -40px #000}
.tela{border-radius:24px;overflow:hidden;background:var(--superficie);padding:18px 15px;display:grid;
  gap:12px}
.tela .cab{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:800}
.tela .cab span{font-size:10px;color:var(--dimmer);font-weight:600;letter-spacing:.1em}
.tela .destaque{border-radius:16px;padding:17px;background:var(--elevado);border:1px solid var(--fio)}
.tela .destaque em{font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);font-weight:700}
.tela .destaque b{display:block;font-family:var(--display);font-size:21px;letter-spacing:-.03em;
  margin:7px 0 3px}
.tela .destaque small{font-size:11.5px;color:var(--dim)}
.tela .destaque u{text-decoration:none;display:block;margin-top:13px;text-align:center;padding:11px;
  border-radius:11px;background:var(--laranja);color:var(--sobre-laranja);font-weight:800;font-size:13px}
.tela .linha{display:grid;grid-template-columns:30px 1fr auto;gap:11px;align-items:center;padding:11px;
  border-radius:13px;background:var(--elevado);border:1px solid var(--fio)}
.tela .linha i{font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,102,0,.16)}
.tela .linha i svg{width:15px;height:15px;stroke:var(--laranja-claro);fill:none;stroke-width:2}
.tela .linha strong{font-size:12px;font-weight:600;display:block}
.tela .linha small{font-size:10px;color:var(--dimmer)}
.tela .linha var{font-style:normal;color:var(--dimmer);font-size:15px}

/* ---- cidades -------------------------------------------------------------- */
.cidades{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:44px}
.cidade{padding:30px 26px;border-radius:20px;border:1px solid var(--fio);background:var(--superficie);
  transition:border-color .2s ease,transform .2s ease}
.cidade:hover{border-color:var(--fio-forte);transform:translateY(-4px)}
.cidade b{display:block;font-family:var(--display);font-size:24px;letter-spacing:-.03em}
.cidade span{font-size:14px;color:var(--dimmer)}

/* ---- transparência -------------------------------------------------------- */
.transparencia{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:44px}
.transparencia h3{margin-bottom:9px}
.transparencia p{color:var(--dim);font-size:16px}

/* ---- dúvidas -------------------------------------------------------------- */
.faq{margin-top:44px;border-top:1px solid var(--fio)}
.faq details{border-bottom:1px solid var(--fio)}
.faq summary{cursor:pointer;padding:26px 0;font-weight:700;font-size:18px;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--display);
  letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:13px;height:13px;flex:0 0 auto;border-right:2px solid var(--laranja);
  border-bottom:2px solid var(--laranja);transform:rotate(45deg) translateY(-3px);
  transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq p{padding:0 0 26px;color:var(--dim);font-size:16.5px;max-width:68ch}

/* ============================================================================
   O ÚNICO MOMENTO LARANJA DA PÁGINA
   Uma faixa inteira, sangrando de ponta a ponta, no fim. É aqui que a marca
   ocupa a tela — e ela só funciona porque em nenhum outro lugar ela fez isso.
   Texto escuro sobre o laranja, medido em 6,63 para 1.
   ============================================================================ */
.faixa-marca{background:var(--laranja);color:var(--sobre-laranja);padding-block:96px;margin-top:104px}
.faixa-marca h2{color:var(--sobre-laranja);max-width:18ch}
.faixa-marca .texto{color:rgba(26,8,0,.82);margin-top:20px}
.faixa-marca .texto strong{color:var(--sobre-laranja)}
.faixa-marca .olho{color:rgba(26,8,0,.75)}
.faixa-marca .olho::before{background:var(--sobre-laranja)}
.faixa-marca .botao{background:var(--sobre-laranja);color:#FFE2CE}
.faixa-marca .botao:hover{background:#2E1200}
.faixa-marca .botao-linha{background:transparent;color:var(--sobre-laranja);
  border-color:rgba(26,8,0,.42)}
.faixa-marca .botao-linha:hover{background:rgba(26,8,0,.1)}

/* ---- rodapé --------------------------------------------------------------- */
footer{border-top:1px solid var(--fio);padding:64px 0 32px}
.rodape{display:grid;gap:36px;grid-template-columns:1.4fr repeat(auto-fit,minmax(180px,1fr))}
.rodape h4{font-family:var(--display);font-size:15px;margin:0 0 14px;font-weight:700}
.rodape p,.rodape a{color:var(--dimmer);font-size:15px;line-height:1.8;text-decoration:none}
.rodape a{display:block}
.rodape a:hover{color:var(--laranja-claro)}
.legal{margin-top:44px;padding-top:24px;border-top:1px solid var(--fio);color:var(--dimmer);
  font-size:13.5px;line-height:1.75;max-width:100ch}

@media(max-width:980px){
  .heroi .dentro{grid-template-columns:1fr;gap:40px}
  .app{grid-template-columns:1fr;gap:44px;justify-items:start}
  .menu{display:none}
  section{padding-block:76px}
  .faixa-marca{padding-block:72px;margin-top:76px}
  .oferta>div{border-right:0;border-bottom:1px solid var(--fio)}
  .oferta>div:last-child{border-bottom:0}
}
@media(max-width:560px){
  body{font-size:16.5px}
  .dentro{padding-inline:20px}
  .cobertura{padding:24px}
  .provas{gap:20px}
}

/* ============================================================================
   A LUZ DE FIBRA E O MASCOTE — 23/08/2026
   ----------------------------------------------------------------------------
   As duas primeiras imagens de verdade que este site tem. O fundo foi gerado; o
   mascote é o personagem que a MegaTelecom já usa nas redes sociais, recortado
   a partir de uma das artes.

   O FUNDO NÃO É DECORAÇÃO SOLTA. Ele entra atrás do herói, à direita, onde não
   há texto — e some sob um degradê antes de chegar na coluna da esquerda, que é
   onde o título e o formulário vivem. Imagem atrás de texto é o jeito mais fácil
   de tornar um site ilegível, e a regra aqui é: onde há palavra, não há imagem.
   ============================================================================ */

.heroi{position:relative;overflow:hidden}
.fibra-heroi{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url('fibra.jpg');
  background-size:cover;background-position:right center;background-repeat:no-repeat;
  opacity:.55;
  /* O degradê apaga a imagem antes da coluna de texto. Sem ele, os fios de luz
     passariam por trás do título e o contraste medido iria por água abaixo. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 72%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 72%);
}
.heroi .dentro{position:relative;z-index:1}

/* O mascote na faixa laranja: encostado na borda de baixo, à direita, sem
   empurrar o texto. Ele é enfeite de peso — por isso `pointer-events:none`, para
   nunca roubar um clique do botão que está ao lado. */
/* O MASCOTE É COLUNA, NÃO ENFEITE POR CIMA — e isso é a correção de um defeito
   que só apareceu quando o dono imprimiu a página.

   A primeira versão colocava o personagem posicionado por cima da faixa, com a
   largura do texto limitada na mão para "caber ao lado". Não coube: numa tela
   um pouco mais estreita o título passou por baixo dele e ficou lendo
   "Manda o seu endereço. O resto é com a ge…".

   Encaixar largura na mão é sempre isso — funciona na largura em que foi testado
   e quebra em todas as outras. Agora a faixa é uma grade de duas colunas: o
   texto ocupa a que sobra e o personagem tem a sua. Não existe largura em que
   um passe por cima do outro. */
.faixa-marca{position:relative;overflow:hidden;padding-bottom:0}
.faixa-marca .dentro{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.faixa-marca .faixa-texto{padding-bottom:96px}
.faixa-marca .mascote{
  height:340px;width:auto;align-self:end;display:block;
  pointer-events:none;
  filter:drop-shadow(0 24px 40px rgba(26,8,0,.34));
}

@media(max-width:1100px){
  .faixa-marca .mascote{height:290px}
}
@media(max-width:900px){
  /* No celular a faixa é estreita e o personagem empurraria o botão para fora
     da primeira dobra. O que converte fica; o que enfeita sai. */
  .faixa-marca{padding-bottom:72px}
  .faixa-marca .dentro{grid-template-columns:1fr}
  .faixa-marca .faixa-texto{padding-bottom:0}
  .faixa-marca .mascote{display:none}
  .fibra-heroi{background-image:url('fibra-celular.jpg');opacity:.4;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 55%)}
}

/* ============================================================================
   PASSE DE PROPORÇÃO — 24/08/2026
   ----------------------------------------------------------------------------
   Escrito depois de ver as fotos da tela do celular. Duas coisas: um DEFEITO de
   verdade e um ajuste geral de tamanho.

   O DEFEITO, e ele é feio: na lista do "o que vem junto", o texto de cada item
   saía UMA PALAVRA POR LINHA numa coluna de 56 pixels.

   A causa é uma armadilha clássica de grade. Cada item tem TRÊS filhos — o
   ícone, o título e o texto — mas no celular a grade tinha só DUAS colunas.
   O terceiro filho não some nem estica: ele desce para a linha de baixo e cai
   na PRIMEIRA coluna, que é a do ícone, com 56 pixels de largura. O texto
   então quebra em cada palavra.

   A lição vale para todo o projeto: numa grade, conte os filhos. Filho a mais
   que coluna não dá erro em lugar nenhum — ele só vai para um canto errado, e
   você só descobre olhando a tela.
   ============================================================================ */

.item p{grid-column:2}

@media(max-width:899px){
  /* O ícone ocupa as duas linhas à esquerda; título e texto ficam os dois na
     coluna larga, um debaixo do outro. */
  .item{grid-template-columns:56px minmax(0,1fr);gap:16px 20px;padding:24px 0}
  .item .icone{grid-row:1 / span 2}
  .item h3{grid-column:2;align-self:center}
  .item p{grid-column:2;margin-top:0}
}

/* ---- respiro proporcional ao tamanho da tela ---------------------------
   Antes eram três valores fixos que davam saltos: 104px no computador e 76px
   no celular, com o mesmo texto no meio. Agora o respiro acompanha a largura,
   então a página tem o mesmo ritmo em qualquer aparelho. */
section{padding-block:clamp(56px,7.5vw,104px)}
.faixa-marca{padding-block:clamp(52px,7vw,96px);padding-bottom:0}
.heroi{padding-top:clamp(36px,4.5vw,76px)}

@media(max-width:900px){
  /* No celular o título não precisa de limite de largura: a tela já limita, e
     o limite em "ch" fazia ele quebrar antes da hora e ficar com buraco à
     direita. */
  h1{max-width:none}
  h2{max-width:22ch}
  .texto,.linha{font-size:16.5px}

  /* A faixa da oferta vira uma coluna só. Em duas colunas ela deixava o
     terceiro bloco sozinho ocupando a largura inteira, e três informações
     iguais viravam duas grandes e uma esticada. */
  .oferta{grid-template-columns:1fr;margin-top:32px}
  .oferta>div{padding:24px 22px}
  .numero-grande{font-size:clamp(28px,8vw,36px)}

  /* A luz de fibra fica MUITO mais discreta no celular. Ali ela passava por
     trás dos números e do formulário — e número em cima de imagem é a coisa
     mais fácil de tornar ilegível numa tela pequena, no sol. */
  .fibra-heroi{opacity:.20;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 62%);
    mask-image:linear-gradient(180deg,#000 0%,transparent 62%)}

  /* O cabeçalho encolhe: no celular ele fica grudado no topo o tempo todo, e
     cada pixel dele é pixel que o conteúdo não tem. */
  .topo .dentro{min-height:64px;padding-block:9px;gap:12px}
  .marca{height:42px;padding:6px 10px}
  .marca img{height:26px}
  .topo .botao{min-height:46px;padding:12px 18px;font-size:15px}
  .contato-topo{font-size:13.5px}
  .contato-topo .dentro{padding-block:8px;gap:4px 16px}

  .provas{gap:18px 26px;margin-top:28px;padding-top:22px}
  .prova b{font-size:26px}
  .cobertura{padding:24px 20px}
  .perfis,.cidades,.itens{margin-top:30px}
  .transparencia{gap:26px;margin-top:30px}
  .faq{margin-top:30px}
  .faq summary{padding:20px 0;font-size:16.5px}
  .faq p{padding-bottom:20px;font-size:16px}
  .rural{padding:24px 22px}
}

@media(max-width:560px){
  /* Telefone estreito: o herói inteiro precisa caber na primeira olhada, e o
     que importa nele é o título e o formulário — não o tamanho da letra. */
  h1{font-size:clamp(31px,8.6vw,40px)}
  h2{font-size:clamp(24px,6.6vw,32px);max-width:none}
  h3{font-size:18px}
  body{font-size:16px}
  .olho{font-size:11px;letter-spacing:.16em;margin-bottom:14px}
  .botao{min-height:50px;font-size:16px;padding:14px 20px}
  .item{grid-template-columns:44px minmax(0,1fr);gap:14px 16px}
  .item .icone{width:44px;height:44px;border-radius:13px}
  .item .icone svg{width:19px;height:19px}
  .prova b{font-size:23px}
  .provas{gap:16px 22px}
}

/* ============================================================================
   PASSE DE PROPORÇÃO — 24/08/2026
   ----------------------------------------------------------------------------
   Escrito depois de ver as fotos da tela do celular. Duas coisas: um DEFEITO de
   verdade e um ajuste geral de tamanho.

   O DEFEITO, e ele é feio: na lista do "o que vem junto", o texto de cada item
   saía UMA PALAVRA POR LINHA numa coluna de 56 pixels.

   A causa é uma armadilha clássica de grade. Cada item tem TRÊS filhos — o
   ícone, o título e o texto — mas no celular a grade tinha só DUAS colunas.
   O terceiro filho não some nem estica: ele desce para a linha de baixo e cai
   na PRIMEIRA coluna, que é a do ícone, com 56 pixels de largura. O texto
   então quebra em cada palavra.

   A lição vale para todo o projeto: numa grade, conte os filhos. Filho a mais
   que coluna não dá erro em lugar nenhum — ele só vai para um canto errado, e
   você só descobre olhando a tela.
   ============================================================================ */

.item p{grid-column:2}

@media(max-width:899px){
  /* O ícone ocupa as duas linhas à esquerda; título e texto ficam os dois na
     coluna larga, um debaixo do outro. */
  .item{grid-template-columns:56px minmax(0,1fr);gap:16px 20px;padding:24px 0}
  .item .icone{grid-row:1 / span 2}
  .item h3{grid-column:2;align-self:center}
  .item p{grid-column:2;margin-top:0}
}

/* ---- respiro proporcional ao tamanho da tela ---------------------------
   Antes eram três valores fixos que davam saltos: 104px no computador e 76px
   no celular, com o mesmo texto no meio. Agora o respiro acompanha a largura,
   então a página tem o mesmo ritmo em qualquer aparelho. */
section{padding-block:clamp(56px,7.5vw,104px)}
.faixa-marca{padding-block:clamp(52px,7vw,96px);padding-bottom:0}
.heroi{padding-top:clamp(36px,4.5vw,76px)}

@media(max-width:900px){
  /* No celular o título não precisa de limite de largura: a tela já limita, e
     o limite em "ch" fazia ele quebrar antes da hora e ficar com buraco à
     direita. */
  h1{max-width:none}
  h2{max-width:22ch}
  .texto,.linha{font-size:16.5px}

  /* A faixa da oferta vira uma coluna só. Em duas colunas ela deixava o
     terceiro bloco sozinho ocupando a largura inteira, e três informações
     iguais viravam duas grandes e uma esticada. */
  .oferta{grid-template-columns:1fr;margin-top:32px}
  .oferta>div{padding:24px 22px}
  .numero-grande{font-size:clamp(28px,8vw,36px)}

  /* A luz de fibra fica MUITO mais discreta no celular. Ali ela passava por
     trás dos números e do formulário — e número em cima de imagem é a coisa
     mais fácil de tornar ilegível numa tela pequena, no sol. */
  .fibra-heroi{opacity:.20;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 62%);
    mask-image:linear-gradient(180deg,#000 0%,transparent 62%)}

  /* O cabeçalho encolhe: no celular ele fica grudado no topo o tempo todo, e
     cada pixel dele é pixel que o conteúdo não tem. */
  .topo .dentro{min-height:64px;padding-block:9px;gap:12px}
  .marca{height:42px;padding:6px 10px}
  .marca img{height:26px}
  .topo .botao{min-height:46px;padding:12px 18px;font-size:15px}
  .contato-topo{font-size:13.5px}
  .contato-topo .dentro{padding-block:8px;gap:4px 16px}

  .provas{gap:18px 26px;margin-top:28px;padding-top:22px}
  .prova b{font-size:26px}
  .cobertura{padding:24px 20px}
  .perfis,.cidades,.itens{margin-top:30px}
  .transparencia{gap:26px;margin-top:30px}
  .faq{margin-top:30px}
  .faq summary{padding:20px 0;font-size:16.5px}
  .faq p{padding-bottom:20px;font-size:16px}
  .rural{padding:24px 22px}
}

@media(max-width:560px){
  /* Telefone estreito: o herói inteiro precisa caber na primeira olhada, e o
     que importa nele é o título e o formulário — não o tamanho da letra. */
  h1{font-size:clamp(31px,8.6vw,40px)}
  h2{font-size:clamp(24px,6.6vw,32px);max-width:none}
  h3{font-size:18px}
  body{font-size:16px}
  .olho{font-size:11px;letter-spacing:.16em;margin-bottom:14px}
  .botao{min-height:50px;font-size:16px;padding:14px 20px}
  .item{grid-template-columns:44px minmax(0,1fr);gap:14px 16px}
  .item .icone{width:44px;height:44px;border-radius:13px}
  .item .icone svg{width:19px;height:19px}
  .prova b{font-size:23px}
  .provas{gap:16px 22px}
}

/* ---- foto larga (a loja de Braúnas) ------------------------------------
   O degradê no pé não é enfeite: a foto foi tirada num dia de sol forte e a
   base dela é clara. Sem o escurecimento, ela cortaria seco contra o fundo
   quase-preto da página e pareceria colada por cima em vez de fazer parte. */
.foto-larga{margin:38px 0 0;position:relative;border-radius:22px;overflow:hidden;
  border:1px solid var(--fio)}
.foto-larga img{width:100%;height:auto;display:block}
.foto-larga::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;
  pointer-events:none;background:linear-gradient(180deg,transparent,rgba(14,11,9,.92))}
.foto-larga figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:22px 24px;font-size:14.5px;color:var(--dim);font-weight:600}

@media(max-width:900px){
  .foto-larga{margin-top:28px;border-radius:18px}
  .foto-larga figcaption{padding:16px 18px;font-size:13.5px}
}

/* ============================================================================
   AJUSTES DE 24/08/2026, PEDIDOS OLHANDO A TELA DO CELULAR
   ============================================================================ */

/* ---- 1. cobertura: foto e cidades lado a lado -------------------------- */
.cobertura-bloco{display:grid;gap:28px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:start;margin-top:40px}
.cobertura-bloco .cidades{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.foto-loja{margin:0;position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--fio)}
.foto-loja img{width:100%;height:auto;display:block}
/* A foto foi tirada em sol forte e a base dela é clara. Sem escurecer o pé,
   ela cortaria seco contra o fundo quase-preto e pareceria colada por cima. */
.foto-loja::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  pointer-events:none;background:linear-gradient(180deg,transparent,rgba(14,11,9,.9))}
.foto-loja figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px 22px;
  font-size:14.5px;color:var(--tinta);font-weight:600}

/* ---- 2. os três números numa linha só ---------------------------------
   Em `flex` com quebra, o terceiro caía sozinho para a linha de baixo e a
   informação virava "dois em cima, um embaixo" — três fatos do mesmo peso
   parecendo de pesos diferentes. Grade de três colunas resolve: eles ficam
   sempre lado a lado, e o que encolhe é a letra, não a estrutura. */
.provas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;flex-wrap:nowrap}
.prova span{display:block;line-height:1.35}

/* ---- 3. o aplicativo maior --------------------------------------------- */
.fone{width:290px}

@media(max-width:900px){
  .cobertura-bloco{grid-template-columns:1fr;gap:22px;margin-top:30px}
  .cobertura-bloco .cidades{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foto-loja{border-radius:18px}
  .foto-loja figcaption{padding:16px 18px;font-size:13.5px}

  /* No celular o aparelho estava espremido: 250px de largura com o texto
     dentro quebrando em duas linhas a cada frase. Agora ele ocupa quase toda a
     largura disponível e fica centralizado — é a peça que mostra o produto, e
     produto espremido não vende. */
  .app{justify-items:stretch}
  .fone{width:min(340px,88%);margin-inline:auto;padding:13px;border-radius:36px}
  .tela{padding:20px 16px;gap:13px;border-radius:26px}
  .tela .destaque b{font-size:23px}
  .tela .destaque small{font-size:12.5px;line-height:1.45}
  .tela .destaque u{padding:12px;font-size:13.5px}
  .tela .linha{grid-template-columns:32px 1fr auto;gap:12px;padding:12px}
  .tela .linha strong{font-size:13px;line-height:1.3}
  .tela .linha small{font-size:11px;line-height:1.35;display:block;margin-top:2px}
  .tela .cab{font-size:14px}

  .provas{gap:14px}
  .prova b{font-size:clamp(19px,5.6vw,26px)}
  .prova span{font-size:12.5px}
}

@media(max-width:560px){
  .fone{width:min(320px,94%)}
  .prova b{font-size:clamp(18px,5.4vw,23px)}
  .prova span{font-size:11.5px}
  .cobertura-bloco .cidades{gap:12px}
  .cidade{padding:20px 16px}
  .cidade b{font-size:20px}
}