/* =====================================================================
   O pop-up "Outros planos" — o que este site tem a mais que a fibra.
   Tudo o mais vem de style.css + combo.css, copiados verbatim.
   ===================================================================== */

/* 🚨 Redundância deliberada: esta regra já existe em style.css:51, e o
   style.css carrega antes desta folha em toda página — então, na prática,
   já vale antes daqui. Repetimos porque o modo de falha é grave e
   silencioso: se um dia esta folha for servida sozinha, ou style.css mudar
   e perder a regra, `display` do CSS ANULA o atributo `hidden` e o modal
   fica invisível POR CIMA da página, engolindo todos os cliques — foi
   exatamente assim que o portão de CEP quebrou em julho. A folha do modal
   fica autocontida sobre esse risco. Ver tests/test_pagina.py. */
[hidden] { display: none !important; }

body.travado { overflow: hidden; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;                 /* acima do .topo, que é fixed */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-fundo {
  position: absolute;
  inset: 0;
  background: rgba(3, 7, 20, 0.78);
  backdrop-filter: blur(3px);
}
.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(82vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* rolar o fim da lista não rola a página atrás */
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 28px 24px 22px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
  /* a barra grossa do Windows cortava o card ao meio na captura do Filipe */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.modal-card::-webkit-scrollbar { width: 8px; }
.modal-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.modal-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;                  /* alvo de toque, não 24px decorativo */
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto2);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.modal-x:hover { color: var(--tinta); background: rgba(255, 255, 255, 0.06); }

.modal-topo { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; padding-right: 40px; }
.modal-foto {
  width: 84px; height: 84px; flex: 0 0 84px;
  object-fit: contain;
  background: var(--carta-2);
  border-radius: 12px;
  padding: 6px;
}
/* Era um eyebrow mono-maiúsculo ("QUANTO SAI EM CADA PLANO") em cima do nome.
   Virou frase, embaixo, dizendo algo que o título não diz: a ORDEM da lista. */
.modal-card h2 {
  font-family: var(--disp);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 5px;
  text-wrap: balance;
}
.modal-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto2);
}

/* A escada é uma TABELA DE PREÇOS, e a tarefa de quem abre é uma só: achar o
   próprio plano e ler o valor. Então o nome do plano tem de ser legível — era
   ele que estava em caixa alta, apertado e apagado. */
.escada { list-style: none; margin: 0; padding: 0; }

.escada-linha {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: 2px 18px;
  align-items: baseline;
  padding: 15px 14px;
  border-radius: 12px;
}
/* Separador entre irmãs, não borda em cada uma: assim a linha destacada não
   precisa "apagar" borda nenhuma para não ficar com um traço no meio. */
.escada-linha + .escada-linha { border-top: 1px solid var(--linha); }
.escada-linha.atual { background: rgba(0, 87, 184, 0.22); }
.escada-linha.atual,
.escada-linha.atual + .escada-linha { border-top-color: transparent; }

.escada-preco {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--tinta);
  /* numeral tabular: com os preços um embaixo do outro, a vírgula alinha e a
     coluna vira uma escada de verdade em vez de números tortos */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* O "R$" era vermelho e disputava com o número em toda linha. O número é a
   mensagem; a moeda é contexto. */
.escada-preco .rs {
  font-family: var(--corpo);
  font-size: 11px;
  font-weight: 600;
  color: var(--texto2);
  vertical-align: 0.3em;
  margin-right: 1px;
}

.escada-planos {
  font-size: 14px;
  line-height: 1.6;
  /* mais claro que --texto2: é o texto que a pessoa VARRE procurando o plano
     dela. 11,3:1 sobre a carta. */
  color: #C7D1E8;
}
/* Nome inteiro ou nada: o navegador quebra ENTRE nomes, nunca dentro de um. */
.escada-plano { white-space: nowrap; }
.escada-ponto { color: var(--texto2); margin: 0 2px; }

/* Marcador de estado, na coluna do nome e em linha própria — grudado no fim de
   uma lista de cinco planos ele caía num ponto qualquer da terceira linha. */
.escada-selo {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #7FD3FF;
}

.modal-nota {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texto2);
}

/* O botão do card. Não é vermelho: vermelho é do CTA de WhatsApp, e este
   botão não converte. */
.prod-planos {
  background: transparent;
  color: var(--tinta);
  border: 1px solid rgba(255, 255, 255, 0.22);
  min-height: 44px;
  font-family: inherit;
  cursor: pointer;
}
.prod-planos:hover {
  border-color: var(--azul-2);
  background: rgba(0, 87, 184, 0.14);
  filter: none;                 /* o .prod-btn:hover herdado clareia; aqui não */
}

/* 🚨 Mobile: nome de plano é comprido. A 390px duas colunas picotam o texto
   (foi o defeito que a grade de fibra teve por semanas). Vira pilha. */
@media (max-width: 560px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-card {
    width: 100%;
    max-height: 88vh;
    border-radius: var(--raio) var(--raio) 0 0;
    padding: 22px 18px 18px;
  }
  /* 🚨 Nome de plano é comprido: a 390px, duas colunas picotam o texto. Vira
     pilha — preço em cima, planos embaixo. */
  .escada-linha { grid-template-columns: 1fr; gap: 3px; padding: 13px 10px; }
  .escada-preco { font-size: 20px; }
  .escada-selo { grid-column: 1; }
  .modal-card h2 { font-size: 20px; }
  .modal-foto { width: 66px; height: 66px; flex-basis: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-fundo { backdrop-filter: none; }
}

/* =====================================================================
   A busca. O filtro em si mora no vitrine.js, dentro do render().

   Não tem rótulo em cima: o placeholder já diz o que fazer, e um rótulo
   mono-maiúsculo repetindo isso era enfeite — o <label> continua no HTML,
   para leitor de tela.
   ===================================================================== */

/* rótulo que só o leitor de tela usa */
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.busca { padding: 4px 0 30px; }
.busca-in {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.busca-caixa {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 400px;
  min-width: 0;
  padding: 0 6px 0 14px;
  background: var(--carta);
  border: 1px solid var(--linha);
  border-radius: 999px;
  transition: border-color .18s cubic-bezier(.22,1,.36,1),
              box-shadow .18s cubic-bezier(.22,1,.36,1);
}
.busca-caixa:focus-within {
  border-color: var(--azul-2);
  box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.28);
}

.busca-lupa { width: 17px; height: 17px; flex: 0 0 17px; color: var(--texto2); }
.busca-caixa:focus-within .busca-lupa { color: #7FD3FF; }

.busca-campo {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;          /* alvo de toque */
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 15px;
}
.busca-campo::placeholder { color: #8A96B8; }
.busca-campo:focus { outline: none; }
/* o X nativo do type=search duplicaria o nosso botão */
.busca-campo::-webkit-search-cancel-button { display: none; }

.busca-x {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto2);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease-out, background .16s ease-out;
}
.busca-x:hover { color: var(--tinta); background: rgba(255, 255, 255, 0.07); }

/* Na MESMA linha do campo: o contador é resposta à busca, não legenda de
   seção. Embaixo, ele empurrava a vitrine e a página pulava a cada tecla. */
.busca-conta {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--texto2);
}

.busca-vazia {
  margin: 0 0 40px;
  padding: 26px 22px;
  border: 1px dashed var(--linha);
  border-radius: var(--raio);
  text-align: center;
  color: var(--texto2);
  font-size: 15px;
}
.busca-vazia b { color: var(--tinta); }
.busca-vazia-btn {
  display: inline-block;
  margin-left: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .16s ease-out, background .16s ease-out;
}
.busca-vazia-btn:hover { border-color: var(--azul-2); background: rgba(0, 87, 184, 0.16); }

@media (max-width: 560px) {
  .busca { padding-bottom: 18px; }
  .busca-caixa { max-width: none; }
  .busca-vazia { padding: 18px 14px; }
  .busca-vazia-btn { display: block; margin: 12px auto 0; }
}

/* O botão de instalar. Nasce hidden (para não piscar dentro do app já
   instalado); o pwa.js o mostra ao carregar e o esconde depois de instalado. */
.btn-instalar {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .16s ease-out, background .16s ease-out;
}
.btn-instalar:hover { border-color: var(--azul-2); background: rgba(0, 87, 184, 0.16); }
.nav-mobile .btn-instalar { display: block; width: 100%; margin-bottom: 10px; }

/* O botão de 44px sem align-items fazia "Acessórios" flutuar ~10px acima. */
.nav { align-items: center; }

/* ---------------------------------------------------------------------
   O card "como instalar". Mesmo molde do popup de planos; a lista é o que
   o vendedor lê com o celular na mão, então cada passo é uma linha larga,
   com o número num círculo e a palavra que ele tem de procurar em negrito.
   --------------------------------------------------------------------- */
.modal-card-curto h2 { padding-right: 40px; }   /* o X fica no canto; o título não passa por baixo */

.instalar-passos {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  counter-reset: passo;
}
.instalar-passos li {
  position: relative;
  padding: 12px 0 12px 44px;
  border-top: 1px solid var(--linha);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto2);
  counter-increment: passo;
}
.instalar-passos li:first-child { border-top: 0; }
.instalar-passos li b { color: var(--tinta); font-weight: 700; }
/* O ícone que o vendedor tem de achar na tela, desenhado do lado da palavra. */
.ico-passo {
  display: inline-block;
  width: 1em;
  height: 1.1em;
  margin: 0 0.1em;
  vertical-align: -0.2em;
  color: var(--tinta);          /* fill/stroke vêm do próprio SVG: um é cheio, o outro é traço */
}
.instalar-passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 12px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 87, 184, 0.2);
  color: #7FD3FF;
  font-family: var(--mono);
  font-size: 13px;
}
.instalar-aviso {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--carta-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto2);
}
.instalar-aviso b { color: var(--tinta); }