/* ==========================================================
   MULTI Assistência Técnica — troca de tela de celular
   ========================================================== */

/* Paleta derivada da arte do cliente, mas dessaturada de propósito:
   o marinho perde o azul elétrico, o amarelo vira dourado fosco e o
   verde do WhatsApp fica mais fechado. Mesma identidade, tom mais
   sóbrio — cor forte demais em site de serviço lê como panfleto. */
:root{
  --marinho:      #16223D;
  --marinho-fundo:#0E1728;
  --marinho-alto: #202F4F;
  --amarelo:      #E5B23C;   /* dourado: fosco o bastante pra não gritar,
                                vivo o bastante pra ser o amarelo da marca */
  --amarelo-esc:  #C4942A;
  --branco:       #FFFFFF;
  --gelo:         #F3F1EC;   /* neutro quente, não azulado */
  --cinza:        #6B7183;
  --cinza-claro:  #DCDAD3;
  --zap:          #1F7A54;
  --zap-esc:      #186344;

  --largura: 1140px;
  --raio: 14px;
  --sombra: 0 18px 40px rgba(8,19,56,.10);
  --sombra-forte: 0 24px 60px rgba(8,19,56,.22);
}

*{ box-sizing: border-box; }

/* O atributo `hidden` vale display:none pelo estilo do navegador, que é a
   camada mais fraca de todas: qualquer `display: flex` autoral aqui embaixo
   passa por cima e o elemento reaparece. Foi assim que a prévia da foto
   apareceu sem foto nenhuma. Esta regra fecha o buraco pra sempre. */
[hidden]{ display: none !important; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
}

/* Coluna de altura cheia: em tela grande o conteúdo é curto e sobrava
   uma faixa branca embaixo do rodapé. Com o main crescendo, o marinho
   vai até o fim e o rodapé encosta na base. */
body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--marinho);
  background: var(--marinho);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main{
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

img, iframe{ max-width: 100%; }

a{ color: inherit; }

.limite{
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

.pular{
  position: absolute; left: -9999px;
  background: var(--amarelo); color: var(--marinho);
  padding: 12px 18px; font-weight: 700; z-index: 100;
}
.pular:focus{ left: 12px; top: 12px; }

:focus-visible{
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}

/* ---------- Tipografia display ---------- */

h1, h2, h3{
  font-family: "Archivo Black", Impact, sans-serif;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
}

/* ---------- Botões ---------- */

.botao{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.botao:hover{ transform: translateY(-2px); }
.botao.grande{ padding: 18px 34px; font-size: 18px; }
.botao.bloco{ display: flex; width: 100%; }

.botao-zap{ background: var(--zap); color: #FFFFFF; }
.botao-zap:hover{ background: var(--zap-esc); }

.botao-vazado{
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.botao-vazado:hover{ background: rgba(255,255,255,.08); }

/* ---------- Topo ---------- */

.topo{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--marinho);
  color: var(--branco);
  border-bottom: 3px solid var(--amarelo);
}
.faixa{
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo do cliente, traçado em SVG a partir do PNG que ele mandou.
   O amarelo original (#FFC300) foi trocado pelo dourado do site, senão
   os dois amarelos ficariam brigando lado a lado no cabeçalho. */
.marca{
  display: block;
  line-height: 0;
  flex: 0 1 auto;
  min-width: 0;
}
.marca img{
  display: block;
  height: 54px;
  width: auto;
  max-width: 100%;
}

.topo-acoes{ display: flex; align-items: center; gap: 16px; }

/* Status em cima, prazo embaixo, os dois encostados na direita pra
   alinharem com o botão do WhatsApp ao lado. */
.topo-info{
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}
/* Mesmo corpo, peso e cor do status logo acima: as duas linhas são
   um par, e qualquer diferença entre elas fazia uma parecer nota de
   rodapé da outra. */
.topo-prazo{
  font-size: 14px;
  font-weight: 500;
  color: var(--cinza-claro);
  line-height: 1.3;
}
.topo-zap{ padding: 10px 20px; font-size: 15px; }

/* ----------------------------------------------------------
   Barra de resumo

   Fica no topo, e não no rodapé, por causa do teclado: no celular,
   escolher o aparelho significa teclado aberto ocupando a metade de
   baixo. Uma barra fixada embaixo sumiria atrás dele justamente na
   hora em que precisa ser vista — e ainda brigaria com o botão
   flutuante do WhatsApp, que mora naquele canto.
   ---------------------------------------------------------- */
.barra-resumo{
  display: grid;
  gap: 1px;
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 9px 24px 11px;
  background: none;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  font: inherit;
  color: var(--branco);
  text-align: left;
  cursor: pointer;
}
.barra-resumo strong{
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(19px, 4.4vw, 24px);
  line-height: 1.1;
  /* Nome de modelo é imprevisível: "MOTO EDGE 60 / EDGE 60S / EDGE 60
     FUSION" existe na tabela. Sem isto ele empurra o preço pra fora. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* estado aberto/fechado */
.status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cinza-claro);
}
.ponto{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cinza);
  flex: none;
}
.status.aberto .ponto,
.status-linha.aberto .ponto{
  background: var(--zap);
  box-shadow: 0 0 0 4px rgba(31,122,84,.20);
}
.status.fechado .ponto,
.status-linha.fechado .ponto{ background: #B5584C; }

/* ---------- Hero ---------- */

/* O topo É a ferramenta: fundo marinho, título curto e os cartões
   brancos dos passos logo abaixo, dentro da mesma seção. */
.hero{
  /* Cresce pra ocupar a sobra vertical: é ele que pinta o marinho até
     o rodapé. `flex-basis: auto` mantém o comportamento normal quando
     o conteúdo é mais alto que a tela, como no celular. */
  flex: 1 0 auto;
  background:
    radial-gradient(1100px 560px at 78% -12%, var(--marinho-alto) 0%, transparent 64%),
    var(--marinho);
  color: var(--branco);
  padding: 52px 0 72px;
}

h1{
  font-size: clamp(30px, 4.6vw, 50px);
  margin-bottom: 12px;
}
/* A segunda linha sempre embaixo e visivelmente menor que a pergunta:
   quem lê vê primeiro o problema dele, depois a promessa. `display:
   block` garante a quebra em qualquer largura, sem depender de <br>, e
   a proporção em `em` mantém a diferença em qualquer tamanho de tela. */
h1 em{
  display: block;
  font-style: normal;
  font-size: .82em;
  color: var(--amarelo);
}

/* A quebra do titulo NO CELULAR, escolhida a mao.
   Deixada por conta do navegador, a frase parte em lugar feio -- e onde
   ela parte muda a cada aparelho. Aqui cada metade fica com um sentido
   inteiro: "Quebrou a tela / do celular?" e "Veja o preco da troca / em
   Porto Alegre."
   Acima de 560px o <br> some e a linha quebra sozinha, porque ai ha
   largura de sobra e forcar quebra deixaria buraco no meio. */
h1 br.q-cel{ display: none; }

/* O corte e 767px, medido, nao chutado: em 768px a frase ja cabe em duas
   linhas sozinha, do jeito certo. Abaixo disso o navegador parte em
   "Quebrou a tela do / celular?" e "...em Porto / Alegre.", que e o pior
   dos mundos -- por isso a quebra a mao vale ate la. */
@media (max-width: 767px){
  h1 br.q-cel{ display: inline; }
}

/* Tela estreita de verdade (SE, Android antigo): em 360px a linha
   amarela "Veja o preco da troca" nao cabe em 30px e larga um "troca"
   sozinho na linha. O clamp trava em 30px e nao desce mais, entao o
   ajuste e aqui. */
@media (max-width: 389px){
  h1{ font-size: 26px; }
}
@media (max-width: 339px){
  h1{ font-size: 23px; }
}


/* ==========================================================
   Pré-orçamento
   ========================================================== */

.visualmente-oculto{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* UM cartão só, com a busca em cima e a gaveta do orçamento embaixo.
   Vale em qualquer largura: a gaveta desliza DENTRO do cartão, e dois
   cartões separados quebrariam esse movimento. */
.orc{
  background: var(--branco);
  /* Ele vive dentro do .hero, que é marinho e pinta o texto de branco.
     Sem esta linha o título do passo fica branco no branco — foi
     exatamente o que aconteceu quando a ferramenta subiu pro topo. */
  color: var(--marinho);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--sombra);
  scroll-margin-top: 90px;
}

.orc-passo{ scroll-margin-top: 90px; }
/* Fora da tipografia display: no desenho novo o título do passo é uma
   pergunta em caixa de frase, não um letreiro. */
.orc-passo h3{
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.015em;
  line-height: 1.2;
  font-size: 24px;
  margin-bottom: 18px;
}
.orc-dica{
  font-size: 15px;
  color: var(--cinza);
  margin: -8px 0 20px;
}

/* ----- busca e marcas ----- */

.orc-busca{ display: block; position: relative; margin-bottom: 16px; }
.orc-busca input{
  width: 100%;
  /* Espaço à esquerda pra lupa, que fica por cima do campo. */
  padding: 15px 16px 15px 46px;
  border: 2px solid var(--cinza-claro);
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  color: var(--marinho);
  background: var(--branco);
}
.orc-busca input:focus{ border-color: var(--marinho); outline: none; }

.orc-lupa{
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--cinza);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;   /* clicar na lupa tem que cair no campo */
}


/* ----- autocompletar ----- */

.orc-auto{ position: relative; }

.orc-sugestoes{
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--branco);
  border: 2px solid var(--marinho);
  border-radius: 12px;
  box-shadow: var(--sombra-forte);
  max-height: 340px;
  overflow-y: auto;
}

.orc-sugestao{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border-radius: 8px;
  cursor: pointer;
}
.orc-sugestao:hover,
.orc-sugestao.marcada{
  background: var(--marinho);
  color: var(--branco);
}
.orc-sugestao-texto{ display: grid; gap: 1px; min-width: 0; }
.orc-sugestao-texto small{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--cinza);
}
.orc-sugestao:hover .orc-sugestao-texto small,
.orc-sugestao.marcada .orc-sugestao-texto small{ color: var(--amarelo); }
.orc-sugestao-texto strong{ font-size: 15.5px; }
.orc-sugestao-preco{
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--cinza);
}
.orc-sugestao:hover .orc-sugestao-preco,
.orc-sugestao.marcada .orc-sugestao-preco{ color: var(--branco); }

.orc-sugestao-vazia{
  padding: 13px;
  font-size: 14.5px;
  color: var(--cinza);
  line-height: 1.5;
}
.orc-sugestao-vazia a{ color: var(--marinho); font-weight: 700; }

/* ----- aparelho escolhido ----- */

/* Mora no alto do orçamento, não mais na coluna da busca: é o
   cabeçalho do que está sendo orçado. */
.orc-escolhido{
  margin: 0 0 16px;
  padding: 16px 20px;
  background: var(--marinho);
  color: var(--branco);
  border-radius: 12px;
}
/* Marca e modelo na MESMA linha, mesma fonte, só mudando a cor: a
   marca em amarelo, o modelo em branco. Antes a marca era um rótulo
   minúsculo numa linha própria — virou uma frase só em 01/08/2026.

   Grande de propósito: é a confirmação de que a pessoa escolheu o
   aparelho certo, e o público da loja é mais velho. Vale ler de longe.

   O teto de 44px vem do nome mais comprido da tabela — "Xiaomi Mi Note
   10 Nacional (Tela Curva)", 39 caracteres. Acima disso ele quebra em
   duas linhas até no desktop. A mediana é 15 caracteres. */
.orc-escolhido-marca,
.orc-escolhido-nome{
  display: inline;
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(26px, 5vw, 44px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.orc-escolhido-marca{ color: var(--amarelo); margin-right: .28em; }


/* ----- resultado ----- */

/* A gaveta. O padding e a divisória moram AQUI dentro, e não no
   vizinho de cima: quando a altura anima até zero, tudo tem que
   desaparecer junto. Uma borda no elemento de cima ficaria órfã na
   tela, riscando o cartão fechado. */
.orc-resultado{
  border-top: 1px solid var(--cinza-claro);
  padding-top: 22px;
  margin-top: 22px;
}

.orc-qualidade{
  margin-bottom: 26px;
}
/* Mesma família e mesma caixa da pergunta lá de cima: os dois são
   título de seção. Em Archivo Black e caixa alta ele empilhava um
   segundo bloco pesado logo abaixo do nome do aparelho. */
.orc-qualidade h4{
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 17px;
  margin: 0 0 10px;
}

.orc-opcao{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 2px solid var(--cinza-claro);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.orc-opcao:hover{ border-color: var(--marinho); }
.orc-opcao.ativa{ border-color: var(--marinho); background: #F1F0EB; }

/* Voltou a aparecer quando os ícones saíram: era o disco do ícone que
   mostrava a opção marcada, e sem os dois sobraria só o realce de
   fundo pra dizer qual está escolhida. */
.orc-opcao input{
  width: 21px;
  height: 21px;
  accent-color: var(--marinho);
  flex: none;
  cursor: pointer;
}

.orc-opcao-texto{ display: grid; gap: 2px; min-width: 0; }
.orc-opcao strong{ font-size: 16px; }
.orc-opcao small{ font-size: 13.5px; color: var(--cinza); }
/* O PRECO DA OPCAO NAO MARCADA SAI MENOR (22/09/2026, pedido do Andre):
   com a caixa do total fora, os precos das opcoes viraram os unicos
   numeros da tela, e todos do mesmo tamanho competiam entre si. Menor
   nas nao marcadas faz a escolhida ser a que se le primeiro.

   A MARCADA NAO ENCOLHE NEM CRESCE: fica no corpo que sempre teve, e a
   nao marcada cai pra 88% dele -- pouco, de proposito (ajustado de 78%
   pra 88% em 22/09/2026, a 78 a diferenca virava degrau).

   O corpo mora numa variavel porque ele muda tres vezes (18px aqui,
   clamp ate 640px, 27px a partir de 700px) e a conta da nao marcada
   tem que acompanhar as tres. Mexeu no corpo, e so mexer na variavel.

   A ALTURA DA LINHA FICA PRESA no corpo do MAIOR, senao a lista toda
   sobe e desce a cada clique: o preco e o item mais alto da linha, e
   encolher a letra encolheria a caixa junto. */
.orc-opcao-valor{
  --preco: 18px;
  margin-left: auto;
  font-family: "Archivo Black", sans-serif;
  font-size: var(--preco);
  line-height: calc(var(--preco) * 1.25);
  white-space: nowrap;
}
.orc-opcao:not(.ativa) .orc-opcao-valor{ font-size: calc(var(--preco) * .88); }

/* O RECADO DO TECNICO (tres toques na opcao, 23/09/2026).

   Nasce escondido e so aparece pelo gesto -- ver `segredo` no
   orcamento.js. Fica na MESMA linha, depois do preco, porque foi assim
   que o Andre desenhou: ele quer ler o fornecedor do lado do valor, sem
   a linha mudar de altura nem empurrar as de baixo.

   `position: absolute` e o que garante isso: o recado flutua sobre a
   propria linha em vez de ocupar espaco nela. Se ocupasse, a lista
   inteira pularia no momento em que ele aparece -- na frente do cliente,
   que e exatamente quem nao pode notar nada. */
.orc-opcao strong{ position: relative; }
.orc-recado{
  /* Ancorado no FIM DO NOME da tela, e absoluto: assim ele nao ocupa
     espaco nenhum na linha. Se ocupasse, a lista inteira pularia no
     instante em que aparece -- na frente do cliente, que e justamente
     quem nao pode notar nada.

     Ficava a direita, colado no preco, e o print mostrou que cobria o
     valor. Dai a mudanca de lado. */
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 9px;
  white-space: nowrap;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cinza);
  background: var(--branco);
  padding: 1px 5px;
  border-radius: 5px;
  pointer-events: none;   /* nao rouba o proximo toque da opcao */
}
.orc-opcao.ativa .orc-recado{ background: #F1F0EB; }
@media (max-width: 767px){
  .orc-recado{ margin-left: 7px; font-size: 10.5px; }
}

/* ----- ícone do cadeado ----- */

.orc-icone{
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.orc-total{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  background: var(--marinho);
  color: var(--branco);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 18px;
}
.orc-total-rotulo{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 14px;
  color: var(--amarelo);
}

.orc-total-valor{
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1;
}

/* Fora do cartão branco, direto sobre o marinho do .hero: é ressalva,
   não é o orçamento. Sem caixa nem fundo — nota de rodapé mesmo. */
.orc-aviso{
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
  line-height: 1.55;
  /* Alinhado pela esquerda com o cartão, não centralizado: agora que a
     página é uma coluna só, um bloco centralizado se descola dela. */
  margin: 16px 0 0;
  max-width: 780px;
}
.orc-aviso p{ margin: 0; }

.orc-aviso strong{ color: var(--amarelo); font-weight: 700; }

.orc-rodape{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--cinza);
  margin: 12px 0 0;
  text-align: center;
  line-height: 1.5;
}
.orc-rodape .orc-icone{ width: 14px; height: 14px; opacity: .6; }

.botao-icone{
  width: 21px;
  height: 21px;
  flex: none;
  fill: currentColor;
}


/* ---------- Rodapé ---------- */

.rodape{
  flex: none;
  background: var(--marinho-fundo);
  color: #8D94A3;
  padding: 44px 0;
  font-size: 15px;
}
.rodape-grade{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-end;
}
.rodape p{ margin: 0 0 4px; }
.rodape a{ color: var(--branco); }
.rodape-marca{
  font-family: "Archivo Black", sans-serif;
  text-transform: uppercase;
  color: var(--branco);
  font-size: 15px;
  margin-bottom: 10px !important;
}
.rodape-fino{ font-size: 13.5px; opacity: .7; }

/* ---------- WhatsApp flutuante ---------- */

.zap-flutuante{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--zap);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
  z-index: 60;
}
.zap-flutuante svg{
  width: 32px;
  height: 32px;
  fill: #fff;
}

/* ==========================================================
   Responsivo
   ========================================================== */

@media (max-width: 640px){
  body{ font-size: 16px; }
  .hero{ padding: 34px 0 48px; }
  .limite, .faixa{ padding-left: 18px; padding-right: 18px; }


  /* O bloco inteiro sai no celular, como o status já saia sozinho: o
     cabeçalho aqui é só logo + WhatsApp, e o prazo espremido entre os
     dois quebrava em três linhas de 81px. */
  .topo-info{ display: none; }
  .topo-zap{ padding: 9px 16px; font-size: 14px; }
  .marca img{ height: 40px; }
  .barra-resumo{ padding: 8px 18px 10px; }



  .orc{ padding: 20px; border-radius: 16px; }
  .orc-resultado{ padding-top: 18px; margin-top: 18px; }

  /* O texto de dentro do campo não cabe no vão padrão do celular.
     Espremo o recuo em vez de diminuir a letra: abaixo de 16px o
     iPhone dá zoom sozinho ao focar o campo. */
  .orc-busca input{ padding: 15px 8px 15px 36px; }
  .orc-lupa{ left: 11px; width: 18px; height: 18px; }
  .orc-passo h3{ font-size: 21px; }
  .orc-intro{ font-size: 16.5px; }
  .orc-total{ padding: 18px 16px; }   /* 16 = 14 da opção + 2 da borda */

  /* O disco continua — é ele que mostra qual tela está marcada, já que
     o rádio é invisível. Só encolhe: a linha tem ~350px úteis aqui. */

  /* Em 390px, ícone + nome + descrição + preço numa fila só espremia a
     descrição em quatro linhas. Aqui viram duas fileiras: nome e preço
     em cima, descrição embaixo ocupando a largura toda.
     `display: contents` dissolve o <span> de texto pra que <strong> e
     <small> virem itens da grade diretamente. */
  .orc-opcao{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 9px;
    row-gap: 3px;
    padding: 12px 14px;
  }
  .orc-opcao-texto{ display: contents; }
  /* 15px, como no desktop: a 16 o nome pedia 111px e a coluna dele
     tinha 108,6 — "Segunda linha" quebrava em duas num aparelho de
     360px com preço de quatro dígitos ao lado. */
  .orc-opcao strong{ grid-column: 2; grid-row: 1; font-size: 15px; }
  /* Opção e total com a MESMA expressão, pra nunca desencontrarem.

     O piso baixo não é timidez: o pior caso da tabela é "R$ 2.800"
     ao lado de "Segunda linha", e num aparelho de 360px a linha tem
     280px por dentro. A 30px o preço vazava o cartão e o nome quebrava
     em duas linhas. */
  .orc-opcao-valor{ --preco: clamp(20px, 5.6vw, 32px); }
  .orc-total-valor{ font-size: clamp(20px, 5.6vw, 32px); }

  .orc-opcao-valor{
    grid-column: 3;
    grid-row: 1;
    margin-left: 0;
  }
  /* Encolhe junto: em 360px o rótulo em corpo cheio empurrava o valor
     e a barra do total virava duas linhas. */
  .orc-total-rotulo{ font-size: 12.5px; }
  .orc-opcao input{ grid-column: 1; grid-row: 1 / -1; }
  .orc-opcao small{ grid-column: 2 / -1; grid-row: 2; }

  /* Com o ícone do WhatsApp na frente, o rótulo quebrava em duas linhas
     nos 390px. Aperta a lateral em vez de diminuir a letra: o público
     da loja é mais velho e o corpo do texto é que não pode encolher. */
  #orc-envio .botao.grande{ padding-left: 18px; padding-right: 18px; }

  .zap-flutuante{ display: flex; }
  .rodape{ padding-bottom: 92px; }
}

/* ==========================================================
   Desktop compacto

   Só acima de 700px. O celular fica exatamente como está — lá o
   corpo grande é necessário, e rolar é natural.

   A meta aqui é caber tudo sem rolagem: numa tela de 900px de
   altura, o orçamento inteiro tem que aparecer de uma vez. Em
   monitor grande a pessoa lê de mais longe, mas enxerga mais de
   uma vez — o que falta não é tamanho de letra, é conseguir ver
   o passo 1 e o preço na mesma olhada.
   ========================================================== */
@media (min-width: 700px){

  .hero{ padding: 26px 0 22px; }

  h1{ font-size: clamp(30px, 3.1vw, 44px); margin-bottom: 22px; }

  /* A coluna da direita já tem o cartão escuro com o aparelho logo
     abaixo do título — a frase de apoio só repetia o que ele mostra,
     e cobrava 30px de altura. Some no desktop, fica no celular. */
  #passo-valor .orc-dica{ display: none; }

  .orc{ gap: 14px; }
  .orc-passo{ padding: 13px 18px; border-radius: 14px; }
  .orc-passo h3{ font-size: 23px; margin-bottom: 10px; }
  .orc-dica{ font-size: 14.5px; margin: 0 0 16px; line-height: 1.55; }

  .orc-busca input{ padding: 15px 16px 15px 52px; font-size: 16px; }
  .orc-lupa{ left: 19px; width: 21px; height: 21px; }
  .orc-escolhido{ margin-bottom: 12px; padding: 11px 16px; }
  /* 38px é o teto: "Xiaomi Mi Note 10 Nacional (Tela Curva)", o nome
     mais comprido da tabela, ainda cabe numa linha só. */
  .orc-escolhido-marca,
  .orc-escolhido-nome{ font-size: 38px; }



  .orc-qualidade{ margin-bottom: 12px; }
  .orc-qualidade h4{ font-size: 15px; }
  .orc-opcao{ padding: 11px 14px; margin-bottom: 6px; }
  .orc-opcao strong{ font-size: 15px; }
  .orc-opcao small{ font-size: 13px; }
  /* Mesmo corpo do valor do total: os dois são preço, e a 17px este
     aqui parecia outra fonte — Archivo Black fecha as contra-formas
     quando fica pequena. */
  .orc-opcao-valor{ --preco: 27px; }

  /* 14 = 12 de recuo da opção + 2 da borda dela. É o que faz os dois
     preços terminarem exatamente na mesma coluna. */
  .orc-total{ padding: 10px 14px; margin-bottom: 8px; }
  .orc-total-valor{ font-size: 27px; }
  .orc-aviso{ font-size: 11.5px; margin-top: 10px; line-height: 1.45; }

  .botao.grande{ padding: 12px 24px; font-size: 15px; }
  .orc-rodape{ font-size: 12px; margin-top: 6px; }

  /* A barra fixa é só do celular. Lá o orçamento fica longe do topo e
     ela confirma, ao rolar, que o preço na tela é do aparelho certo.
     No desktop a página inteira cabe quase de uma olhada, e o nome já
     está grande dentro da gaveta — repetir no cabeçalho só tira espaço.
     `display:none` também a tira da ordem de tabulação. */
  .barra-resumo{ display: none !important; }

  .rodape{ padding: 12px 0; font-size: 12.5px; }
  .rodape-marca{ font-size: 13px; margin-bottom: 2px !important; }
  .rodape p{ margin: 0 0 2px; }

  /* As duas colunas saíram em 01/08/2026: o orçamento virou uma gaveta
     que desliza pra baixo, e gaveta não abre pro lado. */
  .orc{ border-radius: 20px; padding: 26px 28px; }

  .orc-opcao{ padding: 6px 12px; margin-bottom: 4px; }
  .orc-opcao small{ font-size: 12.5px; }
}

/* O conteúdo da gaveta sobe um pouco enquanto ela abre, escalonado.
   Sozinha, a altura animando parece uma persiana; com isto parece que
   o conteúdo veio junto. */
@media (prefers-reduced-motion: no-preference){
  /* Presa à classe `.abrindo`, que só existe durante a abertura da
     gaveta. Solta no seletor, ela reexecutava a cada remontagem do
     painel e a tela piscava. */
  .abrindo #orc-resumo > *,
  .abrindo #orc-envio > *{
    animation: surgir .3s ease-out both;
  }
  .abrindo #orc-resumo > *:nth-child(2){ animation-delay: .05s; }
  .abrindo #orc-resumo > *:nth-child(3){ animation-delay: .1s; }
  .abrindo #orc-resumo > *:nth-child(4){ animation-delay: .14s; }
  .abrindo #orc-envio > *{ animation-delay: .16s; }
}

@keyframes surgir{
  from{ opacity: 0; transform: translateY(8px); }
}

/* O link pras páginas de modelo, no rodapé. Discreto de propósito: quem
   está no site tem a busca, que acha entre 459 modelos e não entre 20.
   Ele existe pra as páginas de modelo não serem órfãs — página sem link
   de lugar nenhum o Google trata como pedaço solto, não como parte do
   site, e costuma não indexar. */
.rodape-fim{ display: flex; flex-direction: column; gap: 6px; }
.rodape-modelos{ margin: 0 !important; font-size: 13.5px; opacity: .7; }
/* Mesmo cinza apagado do "feito por", e não amarelo. Ele não é oferta:
   é caminho de navegação, e quem chegou aqui pra ver preço tem a busca e
   o botão verde. Discreto SIM, invisível NÃO — link da cor do fundo é o
   primeiro exemplo da política de links ocultos do Google, e a punição
   pega o site inteiro. A diferença é medível: isto aqui tem contraste de
   leitura; cor do fundo teria 1:1. */
.rodape-modelos a{ color: var(--branco); }
/* Alinha à direita só quando as duas colunas cabem lado a lado. No
   celular o rodapé quebra em uma coluna só, e texto à direita ali fica
   solto, fora do prumo do endereço. */
@media (min-width: 768px){
  .rodape-fim{ align-items: flex-end; text-align: right; }
}