/* =====================================================================
   TIM ULTRACOMBO + TIM CELULAR — estilos das duas landings novas.
   Carrega DEPOIS do style.css: reusa os tokens, os botões, os chips e o
   portão de CEP de lá. Aqui fica só o que é destas páginas.
   ===================================================================== */

/* ---------- a arte do hero ----------
   Full-bleed, sem nada por cima: o recado dela é o recado dela. */
.arte { display: block; width: 100%; height: auto; }
.arte-cel { display: none; }

/* ---------- faixa viva sob a arte ----------
   O que a arte NÃO traz: a conta e a ação. */
/* Sem `background` aqui de proposito: quem pinta e o .fundo-neon do
   style.css quando a secao pede foto. Declarar cor nesta regra venceria
   a utilitaria por ordem de cascata e a foto nunca apareceria. */
.faixa { position: relative; overflow: hidden; padding: 52px 0 60px; }
/* Hero que comeca colado no topo (o header e fixed e transparente la em cima):
   sem isto o conteudo nasce POR BAIXO dele. Mora aqui e nao no style.css de
   proposito: o `padding` shorthand da regra acima venceria um `padding-top`
   declarado antes, e o hero continuaria colado. A landing de combo nao usa --
   la a arte fica embaixo do header de proposito, como o hero da fibra. */
.faixa-hero { padding-top: 132px; }
.faixa::before,
.faixa::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 50%;
}
.faixa::before {
  top: -260px; left: -180px; width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(227, 6, 19, 0.20) 0%, transparent 66%);
}
.faixa::after {
  top: -180px; right: -220px; width: 760px; height: 760px;
  background: radial-gradient(circle, rgba(0, 87, 184, 0.24) 0%, transparent 64%);
}
/* z-index 2: o grao e a vinheta sao camadas 1. Sem isto o ruido pinta
   POR CIMA do texto em vez de por baixo. */
.faixa-in,
.junto > .wrap,
.saidas > .wrap {
  position: relative; z-index: 2;
}
.faixa-in {
  display: flex; align-items: center; gap: 56px; flex-wrap: wrap;
}
.faixa-txt { flex: 1 1 460px; max-width: 620px; }
.faixa-txt h1 {
  font-family: var(--disp); font-weight: 800; font-size: 52px; line-height: 1.04;
  letter-spacing: -0.032em; margin-bottom: 16px; text-wrap: balance;
}
.faixa-txt h1 em { font-style: normal; color: var(--verm-2); }
.faixa-sub { font-size: 18px; line-height: 1.6; color: var(--texto2); margin-bottom: 26px; max-width: 540px; text-wrap: pretty; }
.faixa-acoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.faixa-nota { margin-top: 18px; font-size: 13.5px; color: #8A96B4; }

/* ---------- a conta: separado x junto ----------
   É o argumento inteiro da página, e sai do planos.js. */
.conta {
  flex: 1 1 380px; max-width: 440px;
  border: 1px solid var(--linha); border-radius: 22px; overflow: hidden;
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.conta-lado { padding: 22px 26px; }
.conta-lado + .conta-lado { border-top: 1px solid var(--linha); background: rgba(227, 6, 19, 0.10); }
.conta-rot {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8A96B4; margin-bottom: 8px;
}
.conta-lado + .conta-lado .conta-rot { color: #FF8A92; }
.conta-de {
  font-family: var(--disp); font-weight: 700; font-size: 30px; color: var(--texto2);
  text-decoration: line-through; text-decoration-color: rgba(255, 26, 39, 0.65);
  text-decoration-thickness: 2px;
}
.conta-por { display: flex; align-items: baseline; gap: 3px; }
.conta-rs { font-size: 17px; font-weight: 700; color: var(--verm-2); }
.conta-val { font-family: var(--disp); font-weight: 800; font-size: 46px; line-height: 1; }
.conta-cent { font-family: var(--disp); font-weight: 800; font-size: 23px; }
.conta-mes { font-size: 14px; color: var(--texto2); margin-left: 5px; }
.conta-dacc { font-size: 12.5px; color: #8A96B4; margin-top: 6px; }

/* ---------- cabeçalho de seção ---------- */
.sec { padding: 30px 0 104px; }
.sec-topo { display: flex; align-items: flex-end; gap: 40px; margin-bottom: 46px; }
.sec-topo > div { flex-grow: 1; }
.sec-topo h2 {
  font-family: var(--disp); font-weight: 800; font-size: 47px; line-height: 1.06;
  letter-spacing: -0.028em; max-width: 620px; text-wrap: balance;
}
.sec-lado { max-width: 330px; font-size: 15.5px; color: var(--texto2); line-height: 1.62; padding-bottom: 6px; text-wrap: pretty; }
.sec-lado b { color: var(--tinta); font-weight: 700; }
.sec-pe { margin-top: 24px; font-size: 13px; color: #8A96B4; }

/* ---------- card de combo (elevado: vidro + fio de luz) ---------- */
.grade-combos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.cb {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 24px; padding: 30px 26px 26px;
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.cb:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.20); }
.cb.destaque {
  border-color: rgba(236, 28, 46, 0.60);
  background: linear-gradient(170deg, rgba(227, 6, 19, 0.10) 0%, rgba(255, 255, 255, 0.05) 42%);
  box-shadow: 0 0 0 1px rgba(236, 28, 46, 0.22), 0 28px 70px rgba(227, 6, 19, 0.20),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transform: translateY(-14px);
}
.cb.destaque:hover { transform: translateY(-18px); }
.cb-tag {
  position: absolute; top: 0; right: 0; padding: 8px 17px 9px;
  border-radius: 0 23px 0 16px; font-family: var(--disp); font-weight: 800;
  font-size: 10px; letter-spacing: 0.14em;
}
.cb-tag-top { background: var(--verm); color: #fff; }
.cb-tag-neutra { background: rgba(255, 255, 255, 0.07); color: var(--texto2); }
.cb-tag-familia { background: rgba(0, 87, 184, 0.55); color: #DCE7FF; }
.cb-label {
  font-family: var(--disp); font-weight: 700; font-size: 11.5px; letter-spacing: 0.20em;
  text-transform: uppercase; color: #8A96B4; margin-bottom: 6px;
}
.cb.destaque .cb-label { color: #FF8A92; }
.cb-titulo { font-family: var(--disp); font-weight: 700; font-size: 23px; letter-spacing: -0.015em; margin-bottom: 22px; }
.cb-painel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-bottom: 18px; }
.cb-lado { border: 1px solid var(--linha); border-radius: 16px; padding: 17px 15px; background: rgba(255, 255, 255, 0.03); }
.cb.destaque .cb-lado { border-color: rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.05); }
.cb-ico { display: block; color: var(--verm-2); margin-bottom: 11px; }
.cb-ico svg { width: 18px; height: 18px; }
.cb-num { font-family: var(--disp); font-weight: 800; font-size: 25px; line-height: 1; display: block; }
.cb-num small { font-size: 16px; font-weight: 800; }
.cb-plano { font-size: 11.5px; font-weight: 600; color: var(--texto2); display: block; margin-top: 7px; line-height: 1.35; }
.cb-quem { font-size: 13.5px; font-weight: 600; color: var(--texto2); margin-bottom: 15px; }
.cb-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; }
.cb-extras { font-size: 12.5px; color: #8A96B4; line-height: 1.55; margin-bottom: 22px; }
.cb-preco { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--linha); }
.cb.destaque .cb-preco { border-top-color: rgba(255, 255, 255, 0.14); }
.cb-de { font-size: 13px; color: #8A96B4; margin-bottom: 6px; }
.cb.destaque .cb-de { color: var(--texto2); }
.cb-de s { text-decoration-color: rgba(255, 26, 39, 0.65); }
.cb-por { display: flex; align-items: baseline; gap: 3px; margin-bottom: 3px; }
.cb-rs { font-size: 15px; font-weight: 700; color: var(--verm-2); }
.cb-val { font-family: var(--disp); font-weight: 800; font-size: 44px; line-height: 1; }
.cb-cent { font-family: var(--disp); font-weight: 800; font-size: 21px; }
.cb-mes { font-size: 13.5px; color: var(--texto2); margin-left: 5px; }
.cb-dacc { font-size: 12.5px; color: #8A96B4; margin-bottom: 18px; }
.cb .btn { width: 100%; }

/* ---------- o que vem junto ---------- */
.junto { position: relative; overflow: hidden; padding: 82px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.junto h2 { font-family: var(--disp); font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: -0.026em; margin-bottom: 44px; max-width: 640px; text-wrap: balance; }
.grade-junto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jt { border: 1px solid var(--linha); border-radius: 18px; padding: 24px 22px; background: rgba(255, 255, 255, 0.028); }
.jt svg { width: 22px; height: 22px; color: var(--verm-2); margin-bottom: 14px; }
.jt h3 { font-family: var(--disp); font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.jt p { font-size: 14.5px; color: var(--texto2); line-height: 1.6; }
.conv {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px;
  padding: 20px 24px; border: 1px solid var(--linha); border-radius: 18px;
  background: rgba(0, 87, 184, 0.10);
}
.conv-rot { font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #9FC2FF; }
.conv ul { display: flex; gap: 10px; flex-wrap: wrap; }
.conv li { font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linha); }
.conv li b { color: var(--verm-2); }

/* ---------- as duas saídas ---------- */
.saidas { position: relative; overflow: hidden; padding: 90px 0 84px; }
.saidas-topo { text-align: center; margin-bottom: 44px; }
.saidas-topo h2 { font-family: var(--disp); font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: -0.026em; text-wrap: balance; }
.grade-saidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.sd {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 24px; padding: 34px 32px 30px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.sd:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.22); color: var(--tinta); }
.sd::after {
  content: ""; position: absolute; top: -80px; right: -80px; width: 300px; height: 300px;
  border-radius: 50%; pointer-events: none;
}
.sd-movel { background: linear-gradient(150deg, rgba(0, 87, 184, 0.20) 0%, rgba(255, 255, 255, 0.035) 55%); }
.sd-movel::after { background: radial-gradient(circle, rgba(0, 87, 184, 0.35) 0%, transparent 65%); }
.sd-fibra { background: linear-gradient(150deg, rgba(227, 6, 19, 0.18) 0%, rgba(255, 255, 255, 0.035) 55%); }
.sd-fibra::after { background: radial-gradient(circle, rgba(227, 6, 19, 0.32) 0%, transparent 65%); }
.sd > * { position: relative; }
.sd-ico { display: block; width: 26px; height: 26px; margin-bottom: 20px; }
.sd-movel .sd-ico { color: #9FC2FF; }
.sd-fibra .sd-ico { color: #FF8A92; }
.sd h3 { font-family: var(--disp); font-weight: 800; font-size: 29px; letter-spacing: -0.022em; margin-bottom: 10px; }
.sd p { font-size: 15.5px; color: var(--texto2); line-height: 1.62; margin-bottom: 26px; max-width: 380px; }
.sd-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 26px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--linha); font-weight: 700; font-size: 15px;
}
.sd-btn svg { width: 17px; height: 17px; }
.sd-forte { background: var(--verm); border-color: transparent; color: #fff; }

/* ---------- rodapé ---------- */
.pe { padding: 44px 0 52px; border-top: 1px solid var(--linha); background: #04091A; }
.pe-in { display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.pe-marca { flex-grow: 1; min-width: 300px; }
.pe-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; font-family: var(--disp); font-size: 16px; }
.pe-logo b { font-weight: 800; }
.pe p { font-size: 13.5px; color: #8A96B4; line-height: 1.65; max-width: 520px; }
.pe-notas { font-size: 13.5px; color: #8A96B4; line-height: 1.9; }

/* ---------- landing de celular: cards de plano móvel ---------- */
.grade-movel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.mv-gb { font-family: var(--disp); font-weight: 800; font-size: 62px; line-height: 1; letter-spacing: -0.03em; margin-bottom: 4px; }
.mv-gb small { font-size: 30px; font-weight: 800; }
.mv-bonus { font-size: 13.5px; color: var(--texto2); margin-bottom: 22px; }
.mv-lista { display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; }
.mv-lista li { display: flex; gap: 10px; font-size: 14.5px; color: var(--texto2); }
.mv-lista li::before { content: "+"; color: var(--verm-2); font-weight: 800; }
.mv-preco { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--linha); }
.mv-consulte { font-size: 15px; font-weight: 700; color: var(--tinta); margin-bottom: 4px; }
.mv-consulte-sub { font-size: 12.5px; color: #8A96B4; margin-bottom: 18px; }

/* =====================================================================
   RESPONSIVO
   ===================================================================== */
@media (max-width: 1080px) {
  .grade-combos, .grade-movel { grid-template-columns: 1fr; }
  .cb.destaque, .cb.destaque:hover { transform: none; }
  .grade-combos .destaque { order: -1; }
  .sec-topo { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sec-lado { max-width: none; }
  .grade-junto { grid-template-columns: 1fr; }
  .grade-saidas { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* A arte do desktop tem o texto QUEIMADO no pixel: numa faixa de 2:1 num
     aparelho de 390px o título viraria uma tira de ~7px, ilegível, e nem
     buscador nem leitor de tela leem imagem. Entra o recorte na família e o
     texto volta como texto de verdade, logo abaixo. */
  .arte-desk { display: none; }
  .arte-cel { display: block; }

  .faixa { padding: 30px 0 40px; }
  .faixa-in { gap: 26px; }
  .faixa-txt h1 { font-size: 34px; }
  .faixa-sub { font-size: 16.5px; }
  .faixa-acoes .btn { width: 100%; }
  .conta { max-width: none; }
  .conta-val { font-size: 38px; }

  .sec { padding: 10px 0 56px; }
  .sec-topo h2, .junto h2, .saidas-topo h2 { font-size: 30px; }
  .junto { padding: 52px 0; }
  .saidas { padding: 56px 0 52px; }
  .sd { padding: 26px 22px 24px; }
  .sd h3 { font-size: 24px; }
  .mv-gb { font-size: 52px; }
  .pe-in { gap: 24px; }
}

/* O selo do hero móvel: só existe na versão de celular, porque no desktop
   ele já está desenhado dentro da arte. */
.selo-cel { display: none; }
.marca-cel { display: none; }
@media (max-width: 720px) {
  .selo-cel {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
    padding: 6px 14px; border-radius: 999px; background: var(--verm);
    font-family: var(--disp); font-weight: 800; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  }
  .selo-cel i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }

  /* O recorte de celular descarta o titulo e a assinatura que a arte de
     desktop traz queimados; aqui eles voltam como TEXTO de verdade. */
  .marca-cel { display: block; margin-bottom: 20px; }
  .marca-cel-h {
    font-family: var(--disp); font-weight: 800; font-size: 33px; line-height: 1.02;
    letter-spacing: -0.032em; margin-bottom: 8px;
  }
  .marca-cel-h span { color: var(--verm-2); }
  .marca-cel-s { font-size: 16px; color: var(--texto2); line-height: 1.5; }
  .marca-cel-s b { color: #4D9BFF; font-weight: 700; }
  /* com a marca acima, o titulo da conta encolhe pra nao virar duas manchetes */
  .faixa-txt h1 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb, .sd { transition: none; }
  .cb:hover, .sd:hover, .cb.destaque:hover { transform: none; }
}

/* =====================================================================
   ULTIMA REGRA DO ARQUIVO, e isso importa: o bloco @media de 720px acima
   redeclara `padding` (shorthand) em .faixa, e shorthand apaga o
   padding-top de quem veio antes. A folga do header fixed tem que ser
   afirmada DEPOIS de todo mundo, senao o hero do /movel nasce por baixo
   do header no celular -- foi exatamente o que o navegador mostrou.
   ===================================================================== */
@media (max-width: 980px) {
  .faixa-hero { padding-top: 96px; }
}

/* =====================================================================
   HERO v2 — no modelo do mockup do Filipe (28/08).
   Texto à esquerda, foto sangrando no centro-direita, e a CONTA num card
   próprio na ponta direita, fechando com a faixa de economia.
   ===================================================================== */
.hero2 {
  position: relative; overflow: hidden;
  /* A foto empurrada pra direita e o scrim FECHADO ate a metade: com o corte
     centrado, o rosto da mulher caia exatamente atras do titulo. */
  background:
    linear-gradient(94deg, rgba(4, 9, 26, 0.985) 0%, rgba(4, 9, 26, 0.95) 30%,
                    rgba(5, 11, 30, 0.72) 46%, rgba(6, 13, 36, 0.30) 66%,
                    rgba(6, 13, 36, 0.48) 100%),
    url("/img/hero-casal.jpg?v=1") right 22% center / cover no-repeat var(--fundo);
  padding: 132px 0 66px;
}
.hero2-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center;
}
.hero2-txt { max-width: 520px; }
.hero2-kicker {
  font-family: var(--disp); font-weight: 700; font-size: 11.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--verm-2); margin-bottom: 16px;
}
.hero2-txt h1 {
  font-family: var(--disp); font-weight: 800; font-size: 62px; line-height: 0.98;
  letter-spacing: -0.038em; margin-bottom: 20px; text-wrap: balance;
}
/* o mockup traz "é ultra." em azul-ciano, e não no vermelho do resto */
.hero2-txt h1 em {
  font-style: normal;
  background: linear-gradient(94deg, #2E8BFF 0%, #63E1FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero2-sub {
  font-size: 17px; line-height: 1.6; color: var(--texto2);
  margin-bottom: 26px; max-width: 430px; text-wrap: pretty;
}
.hero2-selos { display: flex; gap: 10px; flex-wrap: wrap; }
.hero2-selo {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; border: 1px solid var(--linha); border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 13px; font-weight: 700; line-height: 1.25; max-width: 170px;
}
.hero2-selo svg { width: 20px; height: 20px; color: var(--verm-2); flex: 0 0 auto; }

/* ---------- a conta, agora card próprio ---------- */
.conta2 {
  border: 1px solid var(--linha); border-radius: 20px; overflow: hidden;
  background: rgba(9, 17, 42, 0.72);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  text-align: center;
}
.conta2-de { padding: 18px 20px 16px; }
.conta2-rot {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8A96B4; margin-bottom: 7px;
}
.conta2-riscado {
  font-family: var(--disp); font-weight: 700; font-size: 25px; color: var(--texto2);
  text-decoration: line-through; text-decoration-color: rgba(255, 26, 39, 0.75);
  text-decoration-thickness: 2px;
}
.conta2-por { background: var(--verm); padding: 16px 20px 18px; }
.conta2-por .conta2-rot { color: rgba(255, 255, 255, 0.86); }
.conta2-val { display: flex; align-items: baseline; justify-content: center; gap: 2px; color: #fff; }
.conta2-val .rs { font-size: 17px; font-weight: 700; }
.conta2-val .num { font-family: var(--disp); font-weight: 800; font-size: 46px; line-height: 1; }
.conta2-val .cent { font-family: var(--disp); font-weight: 800; font-size: 22px; }
.conta2-val .mes { font-size: 12.5px; opacity: 0.9; margin-left: 3px; }
.conta2-eco {
  padding: 13px 20px 15px; border-top: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.035);
}
.conta2-eco b {
  display: block; font-family: var(--disp); font-weight: 800; font-size: 19px;
  color: var(--verm-2); margin-top: 4px;
}

/* ---------- a ação, dentro do card de preço ----------
   🚨 Medido no celular ANTES disto existir: dentro dos 844px da primeira dobra
   havia UM único elemento tocável nas três landings — o WhatsApp do header. O
   visitante lia o preço e não tinha onde tocar. Numa landing de venda essa é a
   falha mais cara que existe, e ela não aparece no desktop porque lá o resto da
   página está à vista.

   Altura 54px: o mínimo de alvo de toque é 44px, e este é o botão principal.
   Fundo no vermelho da TIM (#E30613), que dá 4,88:1 com branco. */
.conta2-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; margin: 0; border-radius: 0;
  background: var(--verm); color: #fff;
  font-family: var(--disp); font-weight: 800; font-size: 16px;
  letter-spacing: -0.01em;
  transition: filter 0.15s ease;
}
.conta2-cta:hover { filter: brightness(0.92); color: #fff; }
.conta2-cta svg { width: 18px; height: 18px; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .conta2-cta { transition: none; } }

@media (max-width: 1080px) {
  .hero2-in { grid-template-columns: 1fr; gap: 32px; }
  .conta2 { max-width: 340px; }
}
@media (max-width: 720px) {
  .hero2 {
    padding: 96px 0 44px;
    background:
      linear-gradient(180deg, rgba(4, 9, 26, 0.70) 0%, rgba(4, 9, 26, 0.90) 58%, var(--fundo) 100%),
      url("/img/hero-casal-cel.jpg?v=1") center 28% / cover no-repeat var(--fundo);
  }
  .hero2-txt h1 { font-size: 40px; }
  .hero2-sub { font-size: 16px; }
  .hero2-selo { max-width: none; flex: 1 1 45%; }
  .conta2 { max-width: none; }
}

/* =====================================================================
   CARD DE COMBO v2 — no modelo do mockup: cada combo tem a SUA cor
   (entrada azul · destaque vermelho · família roxo), o número de GB
   grande nessa cor, e o botão fechando na mesma nota.
   A cor entra por `--cor` no style do próprio card, então esta folha
   não precisa saber quantos combos existem nem quais são.
   ===================================================================== */
.grade2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }

.cb2 {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 22px;
  padding: 40px 24px 24px; text-align: center; overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in oklab, var(--cor) 22%, transparent) 0%, transparent 62%),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.cb2:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--cor) 55%, transparent); }
.cb2.destaque {
  border-color: color-mix(in oklab, var(--cor) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--cor) 30%, transparent),
              0 26px 64px color-mix(in oklab, var(--cor) 22%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* a tag monta em cima da borda, como no mockup */
.cb2-tag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: 6px 18px 7px; border-radius: 0 0 12px 12px;
  /* FUNDO sob texto branco: usa o tom escurecido da régua, não o claro.
     O fallback mantém a tag pintada se `--cor-fundo` não vier. */
  background: var(--cor-fundo, var(--cor)); color: #fff;
  font-family: var(--disp); font-weight: 800; font-size: 10px; letter-spacing: 0.14em;
  white-space: nowrap;
}

.cb2-nome {
  font-family: var(--disp); font-weight: 800; font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 4px;
}
.cb2-sub { font-size: 13px; color: var(--texto2); margin-bottom: 18px; }

.cb2-gb {
  font-family: var(--disp); font-weight: 800; font-size: 54px; line-height: 1;
  letter-spacing: -0.035em; color: var(--cor); margin-bottom: 4px;
}
.cb2-gb small { font-size: 26px; font-weight: 800; }
.cb2-plano { font-size: 12.5px; font-weight: 600; color: var(--texto2); margin-bottom: 16px; }

.cb2-fibra {
  border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04); margin-bottom: 16px;
}
.cb2-fibra b { display: block; font-family: var(--disp); font-weight: 800; font-size: 21px; line-height: 1.1; }
.cb2-fibra span { font-size: 11.5px; font-weight: 600; color: var(--texto2); }

.cb2-quem {
  display: flex; align-items: flex-start; gap: 9px; text-align: left;
  font-size: 12.5px; color: var(--texto2); line-height: 1.45; margin-bottom: 16px;
}
.cb2-quem svg { width: 15px; height: 15px; color: var(--cor); flex: 0 0 auto; margin-top: 2px; }

/* streamings: o Globoplay tem SVG no projeto; o Deezer ainda não, então
   entra como marca tipográfica em vez de um logo mal desenhado. */
.cb2-streams {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 11px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05);
  margin-bottom: 14px;
}
.cb2-streams img { height: 17px; width: auto; }
.cb2-streams .risca { width: 1px; height: 18px; background: var(--linha); }
.cb2-deezer {
  font-family: var(--disp); font-weight: 800; font-size: 14.5px; letter-spacing: -0.02em;
  color: #fff; line-height: 1;
}
.cb2-deezer i { display: block; font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: 0.18em; color: #C4A7FF; }

.cb2-extras { font-size: 11.5px; color: #8A96B4; line-height: 1.5; margin-bottom: 18px; }

.cb2-preco { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--linha); }
.cb2-de { font-size: 12px; color: #8A96B4; margin-bottom: 8px; }
.cb2-de s { text-decoration-color: rgba(255, 26, 39, 0.7); }
.cb2-por { display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.cb2-por .rs { font-size: 15px; font-weight: 700; color: var(--cor); }
.cb2-por .num { font-family: var(--disp); font-weight: 800; font-size: 38px; line-height: 1; }
.cb2-por .cent { font-family: var(--disp); font-weight: 800; font-size: 19px; }
.cb2-por .mes { font-size: 12.5px; color: var(--texto2); margin-left: 4px; }
.cb2-dacc { font-size: 11.5px; color: #8A96B4; line-height: 1.5; margin: 6px 0 16px; }
.cb2-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 12px;
  /* 🚨 branco sobre o azul claro dava 3,36:1 e sobre o roxo 3,96:1, num texto
     de 14,5px que precisa de 4,5:1. Este é o botão que fecha a venda. */
  background: var(--cor-fundo, var(--cor)); color: #fff;
  font-weight: 700; font-size: 14.5px;
  transition: filter 0.15s ease;
}
.cb2-btn:hover { filter: brightness(0.92); color: #fff; }
.cb2-btn svg { width: 16px; height: 16px; }

@media (max-width: 1080px) {
  .grade2 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  /* 🔎 Os 11,5px foram dimensionados para TRÊS colunas no desktop. Aqui o card
     é único e largo, então a letra miúda não tem mais motivo — e o que está
     escrito nela é o que faz o preço valer: "no débito automático", o preço-
     âncora e o que vem incluso. Medido antes: 11,5px e 12px, abaixo do piso
     legível de leitura no celular. */
  .cb2-dacc { font-size: 13px; }
  .cb2-de { font-size: 13.5px; }
  .cb2-extras { font-size: 13px; }
  .cb2-plano { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb2, .cb2:hover { transition: none; transform: none; }
}

/* =====================================================================
   SEÇÕES DE BAIXO v2 — no modelo do mockup.
   Título à esquerda, conteúdo à direita: a mesma diagonal de leitura em
   "vale para os três" e nas saídas.
   ===================================================================== */
.bloco2 { position: relative; overflow: hidden; padding: 76px 0; }
.bloco2-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: center;
}
.bloco2-tit h2 {
  font-family: var(--disp); font-weight: 800; font-size: 34px; line-height: 1.1;
  letter-spacing: -0.028em; text-wrap: balance;
}
.bloco2-tit p { margin-top: 14px; font-size: 14.5px; color: var(--texto2); line-height: 1.6; }

/* ---------- os quatro tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tile {
  border: 1px solid var(--linha); border-radius: 18px; padding: 22px 18px;
  background: rgba(255, 255, 255, 0.04); text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.tile-arte {
  height: 58px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.tile-arte svg { height: 46px; width: auto; }
.tile-arte img { height: 20px; width: auto; }
.tile h3 { font-family: var(--disp); font-weight: 700; font-size: 15px; margin-bottom: 7px; }
.tile p { font-size: 12.5px; color: var(--texto2); line-height: 1.5; }
.tile-conv { justify-content: center; gap: 2px; }
.tile-conv b {
  font-family: var(--disp); font-weight: 800; font-size: 27px; line-height: 1.1;
  color: var(--verm-2); display: block;
}
.tile-conv span { font-size: 12px; color: var(--texto2); display: block; margin-bottom: 8px; }
.tile-conv .rot {
  margin-top: 10px; font-family: var(--disp); font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; color: #9FC2FF;
}
.tile-logos { display: flex; align-items: center; gap: 10px; }
.tile-logos .risca { width: 1px; height: 16px; background: var(--linha); }

/* ---------- as duas saídas, com aparelho ---------- */
.saidas2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sd2 {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px; align-items: center; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 20px; padding: 24px 24px 24px 20px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.sd2:hover { transform: translateY(-3px); color: var(--tinta); }
.sd2-movel { background: linear-gradient(120deg, rgba(0, 87, 184, 0.24) 0%, rgba(255, 255, 255, 0.035) 62%); }
.sd2-movel:hover { border-color: rgba(46, 139, 255, 0.55); }
.sd2-fibra { background: linear-gradient(120deg, rgba(227, 6, 19, 0.22) 0%, rgba(255, 255, 255, 0.035) 62%); }
.sd2-fibra:hover { border-color: rgba(255, 26, 39, 0.55); }
.sd2-arte { display: flex; align-items: center; justify-content: center; }
.sd2-arte svg { width: 88px; height: auto; }
.sd2 h3 { font-family: var(--disp); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 7px; }
.sd2 p { font-size: 13.5px; color: var(--texto2); line-height: 1.55; margin-bottom: 16px; }
.sd2-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px;
  border-radius: 10px; font-weight: 700; font-size: 13.5px; color: #fff;
}
.sd2-movel .sd2-btn { background: #0057B8; }
.sd2-fibra .sd2-btn { background: var(--verm); }
.sd2-btn svg { width: 15px; height: 15px; }

/* ---------- faixa de fecho ---------- */
.fecho {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  padding: 40px 0;
}
.fecho-in {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.fecho-selo {
  width: 62px; height: 62px; border-radius: 16px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(227, 6, 19, 0.14); border: 1px solid rgba(227, 6, 19, 0.42);
}
.fecho-selo svg { width: 30px; height: 18px; }
.fecho h2 {
  flex: 1 1 340px;
  font-family: var(--disp); font-weight: 800; font-size: 29px; line-height: 1.18;
  letter-spacing: -0.024em; text-wrap: balance;
}

/* ---------- rodapé ---------- */
.pe2 { padding: 46px 0 26px; background: #04091A; border-top: 1px solid var(--linha); }
.pe2-topo {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px;
  padding-bottom: 30px; border-bottom: 1px solid var(--linha);
}
.pe2-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.pe2-logo .tim-logo { width: 40px; height: 24px; }
.pe2-logo b { font-family: var(--disp); font-weight: 800; font-size: 17px; }
.pe2-marca p { font-size: 13px; color: var(--texto2); line-height: 1.5; }
.pe2-social { display: flex; gap: 10px; margin-top: 16px; }
.pe2-social a {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha); background: rgba(255, 255, 255, 0.04);
  color: var(--texto2); transition: color 0.15s ease, border-color 0.15s ease;
}
.pe2-social a:hover { color: var(--verm-2); border-color: var(--verm-2); }
.pe2-social svg { width: 16px; height: 16px; }
.pe2-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.pe2-col { display: flex; gap: 12px; }
.pe2-col svg { width: 19px; height: 19px; color: var(--texto2); flex: 0 0 auto; margin-top: 2px; }
.pe2-col h4 { font-family: var(--disp); font-weight: 700; font-size: 13.5px; margin-bottom: 5px; }
.pe2-col p { font-size: 12.5px; color: #8A96B4; line-height: 1.5; }
.pe2-fim {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: 18px; font-size: 12px; color: #8A96B4;
}

@media (max-width: 1080px) {
  .bloco2-in { grid-template-columns: 1fr; gap: 28px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saidas2 { grid-template-columns: 1fr; }
  .pe2-topo { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .bloco2 { padding: 52px 0; }
  .bloco2-tit h2, .fecho h2 { font-size: 26px; }
  .tiles { grid-template-columns: 1fr; }
  .sd2 { grid-template-columns: 72px minmax(0, 1fr); padding: 20px; }
  .sd2-arte svg { width: 66px; }
  .pe2-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sd2, .sd2:hover { transition: none; transform: none; } }

/* ---------- hero da landing de celular ---------- */
.hero2-movel {
  background:
    linear-gradient(94deg, rgba(4, 9, 26, 0.985) 0%, rgba(4, 9, 26, 0.94) 28%,
                    rgba(5, 11, 30, 0.70) 46%, rgba(6, 13, 36, 0.28) 68%,
                    rgba(6, 13, 36, 0.46) 100%),
    url("/img/hero-movel.jpg?v=1") right 26% center / cover no-repeat var(--fundo);
}
.hero2-movel .hero2-txt h1 em {
  background: linear-gradient(94deg, #FF1A27 0%, #FF8A92 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- família de planos ---------- */
.fam { display: block; margin-bottom: 46px; }
.fam:last-child { margin-bottom: 0; }
.fam-topo {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--linha);
}
.fam-topo h3 {
  font-family: var(--disp); font-weight: 800; font-size: 26px; letter-spacing: -0.022em;
  color: var(--cor);
}
.fam-topo p { flex: 1 1 320px; font-size: 14px; color: var(--texto2); line-height: 1.55; }

/* lista de itens dentro do card de plano móvel */
.mv2-itens {
  display: flex; flex-direction: column; gap: 9px; text-align: left;
  margin-bottom: 18px;
}
.mv2-itens li { display: flex; gap: 9px; font-size: 12.5px; color: var(--texto2); line-height: 1.4; }
.mv2-itens svg { width: 14px; height: 14px; color: var(--cor); flex: 0 0 auto; margin-top: 2px; }

@media (max-width: 720px) {
  .hero2-movel {
    background:
      linear-gradient(180deg, rgba(4, 9, 26, 0.66) 0%, rgba(4, 9, 26, 0.90) 56%, var(--fundo) 100%),
      url("/img/hero-movel-cel.jpg?v=1") center 24% / cover no-repeat var(--fundo);
  }
  .fam-topo h3 { font-size: 22px; }
}

/* ---------- hero da landing de fibra ---------- */
.hero2-fibra {
  background:
    linear-gradient(94deg, rgba(4, 9, 26, 0.985) 0%, rgba(4, 9, 26, 0.94) 30%,
                    rgba(5, 11, 30, 0.68) 48%, rgba(6, 13, 36, 0.26) 70%,
                    rgba(6, 13, 36, 0.44) 100%),
    url("/img/hero-fibra.jpg?v=1") right 20% center / cover no-repeat var(--fundo);
}
.hero2-fibra .hero2-txt h1 em {
  background: linear-gradient(94deg, #FF1A27 0%, #FF8A92 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* A fibra tem 9 planos: em 3 colunas de 1180px o card fica largo demais e a
   grade vira uma parede. Quatro por linha aperta o passo e a página encolhe.

   🚨 O `@media` é obrigatório, e a falta dele foi o pior defeito do site.
   `.grade-fibra` e `.grade2` têm a MESMA especificidade (0,1,0) e o mesmo
   elemento carrega as duas classes (index.html:194). Media query NÃO soma
   especificidade — então esta regra, por vir depois no arquivo, vencia o
   `grid-template-columns: 1fr` que o bloco de 1080px aplica em `.grade2`, em
   QUALQUER largura. Medido a 390px: três colunas de 102px, com o preço
   pedindo 92px numa caixa de 52px e a tag "MELHOR CUSTO-BENEFÍCIO" ocupando
   203,8px num card de 102px. Os 9 planos apareciam picotados: "500(",
   "99,99 /m". A página inteira de fibra não vendia no celular por isto.
   (O tablet, 721–1080px, estava quebrado do mesmo jeito.) */
@media (min-width: 1081px) {
  .grade-fibra { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grade-fibra .cb2-chips { margin-bottom: 14px; }

/* rodapé: o bloco legal fica em uma coluna só, com o texto miúdo */
.pe2-legal { display: block; }
.pe2-legal p { font-size: 11.5px; line-height: 1.6; color: #6E7A99; max-width: none; }

@media (max-width: 720px) {
  .hero2-fibra {
    background:
      linear-gradient(180deg, rgba(4, 9, 26, 0.62) 0%, rgba(4, 9, 26, 0.90) 58%, var(--fundo) 100%),
      url("/img/hero-fibra-cel.jpg?v=1") center 30% / cover no-repeat var(--fundo);
  }
}

/* Na fibra o card comeca pelo numero (o nome do plano E a velocidade), entao
   ele precisa de respiro no topo onde os outros tem a linha de nome. */
.grade-fibra .cb2-gb { margin-top: 6px; }
.grade-fibra .cb2-plano { margin-bottom: 18px; line-height: 1.5; }

/* =====================================================================
   FAIXA "VANTAGEM EXTRA" — a arte do Filipe, com o texto VIVO.
   A peça original traz o texto queimado no pixel; aqui fica só a foto e o
   texto volta como HTML: num celular de 390px aquele título viraria uma
   tira ilegível, e buscador nenhum lê imagem.
   ===================================================================== */
.vantagem {
  position: relative; overflow: hidden; background: #050505;
  border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
}
.vantagem-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 46%; gap: 0; align-items: center;
  min-height: 440px;   /* espaco pra ela caber inteira */
}
.vantagem-txt { padding: 54px 0; max-width: 560px; }
.vantagem-kicker {
  font-family: var(--disp); font-weight: 700; font-size: 11.5px; letter-spacing: 0.30em;
  text-transform: uppercase; color: var(--verm-2); margin-bottom: 22px;
}
.vantagem-txt h2 {
  font-family: var(--disp); font-weight: 800; font-size: 44px; line-height: 1.08;
  letter-spacing: -0.032em; margin-bottom: 30px; text-wrap: balance;
}
/* o "descontão" da peça vai do vermelho ao roxo */
.vantagem-txt h2 em {
  font-style: normal;
  background: linear-gradient(96deg, #FF1A27 0%, #E0389B 46%, #7B2FF2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vantagem-btn {
  display: inline-flex; align-items: center; gap: 11px;
  height: 56px; padding: 0 30px; border-radius: 999px;
  background: var(--verm); color: #fff; font-weight: 700; font-size: 16px;
  box-shadow: 0 0 0 6px rgba(227, 6, 19, 0.16), 0 0 46px rgba(227, 6, 19, 0.45);
  transition: box-shadow 0.18s ease, background 0.18s ease;
}
.vantagem-btn:hover {
  background: var(--verm-2); color: #fff;
  box-shadow: 0 0 0 8px rgba(227, 6, 19, 0.22), 0 0 60px rgba(227, 6, 19, 0.55);
}
.vantagem-btn i {
  width: 9px; height: 9px; border-radius: 50%; background: #25D366; flex: 0 0 auto;
}
.vantagem-foto {
  position: absolute; top: 0; right: 0; bottom: 0; width: 52%;
  /* ancorado no TOPO, nao no centro: `cover` numa faixa baixa corta na
     vertical, e centralizado ele comia 165px do alto -- exatamente onde esta
     o rosto dela. */
  background: url("/img/vantagem.jpg?v=2") right top / cover no-repeat;
}
/* a foto nasce em preto na borda esquerda, entao o encontro e invisivel */
.vantagem-foto::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, #050505 0%, rgba(5, 5, 5, 0.55) 12%, transparent 34%);
}

@media (max-width: 900px) {
  .vantagem-in { grid-template-columns: 1fr; min-height: 0; }
  .vantagem-txt { padding: 40px 0 34px; max-width: none; }
  .vantagem-txt h2 { font-size: 30px; }
  .vantagem-btn { width: 100%; justify-content: center; }
  /* no celular a moca vira uma faixa embaixo, em vez de sumir atras do texto */
  .vantagem-foto {
    position: relative; width: auto; height: 230px; margin: 0 -22px;
    background-position: center 12%;
  }
  .vantagem-foto::before {
    background: linear-gradient(180deg, #050505 0%, transparent 26%, transparent 74%, #050505 100%);
  }
}
@media (prefers-reduced-motion: reduce) { .vantagem-btn { transition: none; } }

/* =====================================================================
   VITRINE DE PRODUTO (/aparelhos)
   ===================================================================== */
.vantagem-hero { border-top: 0; }
.vantagem-hero .vantagem-in { min-height: 340px; padding-top: 68px; }
.vantagem-sub { font-size: 16px; color: var(--texto2); line-height: 1.6; }

/* 🚨 Esta regra tem de existir e tem de estar AQUI.
   A linha acima (`.vantagem-hero .vantagem-in`) mora FORA de media query e tem
   especificidade 0,2,0 — ela atropela o `min-height: 0` que o bloco mobile de
   900px aplica em `.vantagem-in` (0,1,0). Resultado medido no celular: 340px de
   altura mínima num conteúdo que empilhado mede bem menos, ou seja ~200px de
   FAIXA PRETA MORTA entre a foto e o texto, logo na abertura de /aparelhos.
   Especificidade não olha media query; só a ordem e o peso do seletor. */
@media (max-width: 900px) {
  .vantagem-hero .vantagem-in { min-height: 0; padding-top: 16px; }
  /* 🔎 Tudo escopado em `.vantagem-hero` de propósito. A `.vantagem` sem sufixo
     é a faixa "descontão" de /, /fibra e /movel, que NÃO tem defeito: soltar
     estas regras encolheria a banda das três de 562px para 468px de brinde.
     Medido com o escopo certo: em /aparelhos o hero cai de 624px para 478px, a
     grade sobe de 875px para 729px (115px da primeira fileira de produto entram
     na dobra) e a faixa morta cai de 108px para 34px; / e /movel ficam intactas
     e o desktop não muda. */
  .vantagem-hero .vantagem-txt { padding: 18px 0 26px; }
  .vantagem-hero .vantagem-txt h2 { margin-bottom: 18px; }
  .vantagem-hero .vantagem-kicker { margin-bottom: 14px; }
  .vantagem-hero .vantagem-foto { height: 186px; }
}

.grade-produtos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.prod {
  display: flex; flex-direction: column; text-align: center;
  border: 1px solid var(--linha); border-radius: 20px; padding: 18px 16px 16px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.prod:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.20); }
/* fundo claro atrás da foto: quase todo PNG de produto vem recortado em
   branco, e sobre o navy o produto preto some. */
.prod-foto {
  border-radius: 14px; overflow: hidden; margin-bottom: 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #E7EBF3 100%);
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.prod-foto img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.prod-nome {
  font-family: var(--disp); font-weight: 700; font-size: 15px; line-height: 1.3;
  margin-bottom: 10px; min-height: 2.6em;
}
.prod-de { font-size: 12px; color: #8A96B4; min-height: 1.3em; margin-bottom: 2px; }
.prod-de s { text-decoration-color: rgba(255, 26, 39, 0.7); }
.prod-por { display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.prod-por .rs { font-size: 14px; font-weight: 700; color: var(--verm-2); }
.prod-por .num { font-family: var(--disp); font-weight: 800; font-size: 27px; line-height: 1; }
.prod-plano { font-size: 11.5px; color: var(--texto2); line-height: 1.45; margin: 8px 0 14px; min-height: 2.9em; }
.prod-plano b { color: var(--tinta); font-weight: 700; }
.prod-btn {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 11px; background: var(--verm); color: #fff;
  font-weight: 700; font-size: 14px; transition: filter 0.15s ease;
}
.prod-btn:hover { filter: brightness(0.92); color: #fff; }
.prod-btn svg { width: 15px; height: 15px; }
.prod-vazio {
  grid-column: 1 / -1; padding: 34px 26px; text-align: center;
  border: 1px dashed var(--linha); border-radius: 18px;
  font-size: 15px; color: var(--texto2); line-height: 1.6;
}

@media (max-width: 1080px) { .grade-produtos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) {
  .grade-produtos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* A CONDIÇÃO do preço era o menor texto do card: 11,5px contra 24px do valor.
     "no plano TIM BLACK FAMÍLIA VIP" é o que decide se o preço vale para o
     cliente — não pode ser a letra miúda. O `min-height` fica: ele iguala os
     cards de UMA linha ("sem depender de plano") aos de duas, mantendo os
     botões alinhados entre si. O card cresce ~6px, e isso é aceitável. */
  .prod-plano { font-size: 13px; min-height: 2.6em; }
  .prod-de { font-size: 13px; }
}
@media (max-width: 420px) {
  .prod-nome { font-size: 14px; }
  .prod-por .num { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .prod, .prod:hover { transition: none; transform: none; } }

/* Ícones sociais do rodapé: 34x34 medido, mínimo de toque é 44x44.
   O quadrado visual continua 34 — quem cresce é a área tocável, via padding.
   Vale só no celular; no desktop o cursor acerta 34px sem esforço. */
@media (max-width: 900px) {
  .pe2-social { gap: 12px; }
  .pe2-social a { width: 44px; height: 44px; border-radius: 12px; }
}