/* ============================================================================
   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}
}

/* ============================================================================
   MEGA OFERTAS — o que só existe na página de cupons
   ----------------------------------------------------------------------------
   Mesmo sistema, mesmas regras: neutro carrega, laranja acentua. A diferença é
   que aqui o conteúdo é uma LISTA que muda sozinha, e lista pede tratamento
   próprio: a marca da loja tem que ser reconhecível em meio segundo, e o
   código do cupom tem que ser a coisa mais fácil de achar no cartão.
   ============================================================================ */

.filtros{display:flex;gap:9px;overflow-x:auto;padding:6px 0 10px;margin-top:36px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros a{flex:0 0 auto;padding:10px 17px;border-radius:999px;font-size:14.5px;font-weight:600;
  text-decoration:none;color:var(--dim);border:1px solid var(--fio);white-space:nowrap;
  transition:border-color .18s ease,color .18s ease}
.filtros a:hover{color:var(--tinta);border-color:var(--fio-forte)}
.filtros a.on{background:var(--laranja);color:var(--sobre-laranja);border-color:transparent;font-weight:800}
.filtros a small{opacity:.7;margin-left:6px}

.cupons{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));margin-top:28px;
  align-items:start}
.cupom{display:flex;flex-direction:column;padding:26px 24px;border-radius:22px;border:1px solid var(--fio);
  background:var(--superficie);transition:border-color .2s ease,transform .2s ease,background .2s ease}
.cupom:hover{border-color:var(--fio-forte);transform:translateY(-4px);background:var(--elevado)}

.marca-loja{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.marca-loja .selo-loja{width:48px;height:48px;flex:0 0 auto;border-radius:13px;background:#fff;
  display:grid;place-items:center;overflow:hidden;padding:6px}
.marca-loja .selo-loja img{max-width:100%;max-height:100%;object-fit:contain}
.marca-loja .selo-loja.vazio{background:var(--elevado);border:1px solid var(--fio-forte);
  color:var(--laranja-claro);font-family:var(--display);font-weight:800;font-size:19px}
.marca-loja b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.marca-loja span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dimmer);font-weight:700;margin-top:2px}

.cupom h3{font-size:21px;line-height:1.2}
.cupom .detalhe{margin-top:10px;font-size:15px;color:var(--dim);line-height:1.55}
.marcas{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.marcas span{padding:6px 11px;border-radius:9px;border:1px solid var(--fio);font-size:12.5px;
  color:var(--dim)}
.marcas .prazo{border-color:var(--laranja);color:var(--laranja-claro);font-weight:700}

/* O CÓDIGO É O PRODUTO. Contorno tracejado, monoespaçado, corpo grande: tem
   que ser a coisa mais fácil de achar dentro do cartão. */
.codigo{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;
  padding-top:20px}
.codigo .valor{flex:1 1 auto;padding:13px 15px;border:1px dashed var(--fio-forte);border-radius:13px}
.codigo .valor em{font-style:normal;display:block;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dimmer);font-weight:700}
.codigo .valor b{font-family:ui-monospace,Menlo,monospace;font-size:18px;letter-spacing:.1em;
  word-break:break-all}
.regras{margin-top:14px;font-size:12.5px;color:var(--dimmer);line-height:1.5}

/* ---- o vazio: ele é a página, enquanto não houver cupom ------------------ */
.aguardando{margin-top:44px;padding:44px;border-radius:26px;border:1px solid var(--fio);
  background:var(--superficie);max-width:78ch}
.aguardando h2{font-size:var(--t2);margin-bottom:18px}
.aguardando p{color:var(--dim);font-size:17px;margin-bottom:14px;max-width:66ch}
.lojas-fila{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.lojas-fila span{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 9px;
  border-radius:13px;border:1px solid var(--fio);font-size:14.5px;font-weight:600;color:var(--dim)}
.lojas-fila i{font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--elevado);color:var(--laranja-claro);font-family:var(--display);font-weight:800;
  font-size:13.5px}
.lojas-fila em{font-style:normal;font-size:12px;color:var(--dimmer)}
.passos{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--fio)}
.passos div{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:20px 0;
  border-bottom:1px solid var(--fio);align-items:start}
.passos i{font-style:normal;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--elevado);border:1px solid var(--fio);color:var(--laranja-claro);
  font-family:var(--display);font-weight:800;font-size:15px}
.passos b{display:block;font-size:16px;margin-bottom:3px}
.passos p{color:var(--dim);font-size:15.5px;max-width:60ch}

/* ---- aviso de afiliado: obrigação, não rodapé escondido ----------------- */
.aviso-afiliado{margin-top:34px;padding:22px 26px;border-radius:18px;border:1px solid var(--fio);
  color:var(--dim);font-size:15px;line-height:1.6;max-width:78ch}
.aviso-afiliado strong{color:var(--tinta)}

/* ---- a luz de fibra e o mascote na pagina de ofertas -------------------- */
.heroi{position:relative;overflow:hidden}
.heroi .dentro{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:40px;align-items:end}
.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:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 30%,#000 70%);
  mask-image:linear-gradient(90deg,transparent 0%,transparent 30%,#000 70%);
}
.mascote-heroi{width:auto;height:400px;align-self:end;margin-bottom:-104px;position:relative;z-index:1;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.75))}

@media(max-width:980px){
  .heroi .dentro{grid-template-columns:1fr}
  /* Sai no celular pelo mesmo motivo do site principal: o que converte fica na
     primeira dobra, o que enfeita sai. */
  .mascote-heroi{display:none}
  .fibra-heroi{background-image:url('fibra-celular.jpg');opacity:.36;
    -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
   Mesma correção e mesmos ajustes do site principal. O defeito da grade com
   três filhos e duas colunas estava aqui também, na seção "como funciona": o
   texto de cada passo caía na coluna do ícone e quebrava uma palavra por linha.
   ============================================================================ */

.item p{grid-column:2}

@media(max-width:899px){
  .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}
}

section{padding-block:clamp(56px,7.5vw,104px)}
.faixa-marca{padding-block:clamp(52px,7vw,96px)}
.heroi{padding-top:clamp(36px,4.5vw,76px)}

@media(max-width:900px){
  h1{max-width:none}
  h2{max-width:22ch}
  .texto{font-size:16.5px}
  .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}
  .provas{gap:18px 26px;margin-top:28px;padding-top:22px}
  .prova b{font-size:26px}
  .fibra-heroi{opacity:.18;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 62%);
    mask-image:linear-gradient(180deg,#000 0%,transparent 62%)}
  .aguardando{padding:28px 22px;margin-top:30px}
  .aguardando h2{font-size:clamp(24px,6.6vw,32px)}
  .aguardando p{font-size:16px}
  .cupons{grid-template-columns:1fr;gap:14px}
  .cupom{padding:22px 20px}
  .codigo{flex-wrap:wrap}
  .codigo .valor{flex:1 1 100%}
  .codigo .botao{width:100%}
  .lojas-fila{gap:8px}
  .passos div{grid-template-columns:30px 1fr;gap:13px;padding:17px 0}
}

@media(max-width:560px){
  h1{font-size:clamp(31px,8.6vw,40px)}
  h2{font-size:clamp(24px,6.6vw,32px);max-width:none}
  body{font-size:16px}
  .olho{font-size:11px;letter-spacing:.16em;margin-bottom:14px}
  .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}
  .marca-loja .selo-loja{width:42px;height:42px}
  .cupom h3{font-size:19px}
}

/* ============================================================================
   O QUE VEIO DO PROMOBIT E DO PECHINCHOU — 24/08/2026
   ----------------------------------------------------------------------------
   Três recursos, e um de fora.

   Os três que entram: a fileira de marcas no alto (antes de ler, a pessoa quer
   saber com quem você trabalha), o "há 3 h" em cada cupom (é o que faz a lista
   parecer viva, e o dado já estava guardado sem ninguém mostrar) e a navegação
   por categoria.

   O que fica de fora, de propósito: os votos e comentários da comunidade, que
   são o coração do Promobit. Aquilo exige gente participando e alguém
   moderando; sem usuários vira uma tela cheia de zeros, que é pior que não ter.
   ============================================================================ */

.marcas-fila{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:22px 0;border-top:1px solid var(--fio);border-bottom:1px solid var(--fio)}
.marca-chip{background:#fff;border-radius:11px;padding:9px 13px;display:inline-flex;
  align-items:center;justify-content:center;height:52px;min-width:86px}
.marca-chip img{max-height:34px;max-width:110px;width:auto;height:auto;object-fit:contain}

.marcas .quando{border-color:transparent;background:rgba(255,255,255,.05);color:var(--dimmer)}

/* ---- o convite do grupo ------------------------------------------------- */
.convite-grupo{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  padding:26px 28px;border-radius:22px;border:1px solid var(--laranja);text-decoration:none;
  background:rgba(255,102,0,.07);transition:background .2s ease}
.convite-grupo:hover{background:rgba(255,102,0,.13)}
.convite-texto strong{display:block;font-family:var(--display);font-size:21px;font-weight:800;
  letter-spacing:-.025em;color:var(--tinta)}
.convite-texto span{display:block;margin-top:6px;font-size:15.5px;color:var(--dim);max-width:52ch}
.convite-grupo .botao{flex:0 0 auto}

@media(max-width:900px){
  .marcas-fila{gap:8px;padding:18px 0}
  .marca-chip{height:44px;min-width:72px;padding:7px 10px}
  .marca-chip img{max-height:28px;max-width:92px}
  .convite-grupo{padding:22px 20px;gap:16px}
  .convite-texto strong{font-size:19px}
  .convite-texto span{font-size:15px}
  .convite-grupo .botao{width:100%}
}

/* ESPACO DE PUBLICIDADE (3.56.0)
   Rotulado sempre. Anuncio que se disfarca de cupom nosso engana a pessoa uma
   vez e a perde para sempre — e e o que o proprio Google proibe. */
.faixa-publicidade{padding-block:clamp(18px,4vw,34px)}
.publicidade{max-width:970px;margin-inline:auto;padding:14px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:var(--superficie)}
.publicidade-selo{display:block;margin-bottom:9px;color:var(--dimmer);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.publicidade .adsbygoogle{display:block;min-height:90px}