/* =============================================
   AS FORJE — correções de celular

   Carregado por último: tudo aqui corrige algo medido no aparelho, não
   suposto. Os números vieram de uma varredura em 390px com toque ativo.

   O QUE A MEDIÇÃO ACUSOU
   · 37 elementos clicáveis com menos de 44px de altura ou largura
   · texto de 11,5px em rótulos
   · h1 do hero com 31px contra h2 de seção com 37px — hierarquia invertida
   · ✓ desalinhado quando o item da lista quebra em duas linhas
   · botão principal quebrando em duas linhas
   ============================================= */

/* ─────────────────────────────────────────────
   ALVO DE TOQUE

   O mínimo do WCAG 2.5.8 é 24px e o site já passava nele. Mas 24px é o
   limite do que é *aceitável*, não do que é confortável: a polpa do dedo
   cobre cerca de 44px, que é a recomendação da Apple e do Google.

   Links de texto dentro de card tinham 26px. Dava para acertar — com
   atenção. Ninguém navega com atenção no celular, andando, com uma mão.
   ───────────────────────────────────────────── */
@media (max-width: 860px) {

  /* Link de "ver mais" dentro dos cards de serviço */
  .service-card__link,
  .faq-mais .btn,
  .portfolio-cta .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
  }

  /* Hambúrguer: é o controle mais importante do celular e tinha 34x25px */
  .nav-toggle {
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
    padding: 10px;
  }

  /* Ícones sociais: 38px é quase lá, falta pouco */
  .nav-social, .social-link { width: 44px; height: 44px; }

  /* Links do rodapé — listas longas de alvos pequenos e colados */
  .footer-link, .footer-bottom-link { min-height: 44px; }

  /* Marca na navbar: área de toque inteira, não só o texto */
  .nav-logo { min-height: 44px; }
}

/* ─────────────────────────────────────────────
   TIPOGRAFIA

   Hierarquia invertida: o h1 do hero media 31px e os h2 das seções, 37px.
   O título mais importante da página era o menor. Acontece porque o h1 usa
   clamp com vw, e em 390px o vw entrega pouco.

   Rótulos em caixa alta estavam com 11,5px. Em caixa alta e com espaçamento
   entre letras, esse tamanho fica no limite do legível em tela pequena.
   ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero__title     { font-size: clamp(2.1rem, 8.6vw, 2.6rem); line-height: 1.1; }
  .hero__title em  { font-size: 1.06em; }

  /* Seção não pode competir com o hero */
  .section-title,
  .serv-topo__titulo { font-size: clamp(1.75rem, 7.2vw, 2.15rem); line-height: 1.16; }
  .serv-h2           { font-size: clamp(1.5rem, 6.2vw, 1.9rem); }

  /* Rótulos: de 11,5px para 12,5px, e menos espaçamento para caber */
  .service-card__badge,
  .resumo-card__selo,
  .u-rotulo-mini,
  .plans-maint__tag { font-size: .78rem; letter-spacing: .08em; }

  /* Título longo não pode quebrar deixando uma palavra órfã na linha */
  .section-title, .hero__title { text-wrap: balance; }
}

/* ─────────────────────────────────────────────
   LISTAS COM ÍCONE

   Quando o texto do item quebrava em duas linhas, o ✓ ia para o meio
   vertical e parecia solto. Alinhar no topo resolve, e o padding-top
   mínimo compensa a altura da linha do ícone.
   ───────────────────────────────────────────── */
.service-card__feat,
.plan-feat,
.serv-marcas li,
.plans-maint__list li,
.smart-foot p {
  align-items: flex-start;
}
.service-card__feat > i,
.plan-feat > i,
.plans-maint__list > li > i {
  margin-top: .3em;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   BOTÕES

   "SOLICITAR DIAGNÓSTICO GRATUITO" quebrava em duas linhas por causa do
   espaçamento entre letras somado ao padding. Em tela estreita o rótulo
   vale mais que o espaçamento.
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .btn-lg {
    letter-spacing: .04em;
    padding-inline: 1.1rem;
    font-size: .92rem;
  }
  .hero__actions .btn,
  .serv-topo__acoes .btn { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────
   FAIXA DE URGÊNCIA DO HERO

   Os separadores "·" sobravam em linhas próprias quando os itens
   quebravam, e a faixa virava uma pilha torta. Vira lista empilhada e
   alinhada à esquerda, com os separadores escondidos.
   ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .hero__trust,
  .urgencia {
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
    text-align: left;
  }
  .hero__trust-sep,
  .urgencia__sep { display: none; }
  .hero__trust-item,
  .urgencia__item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    text-align: left;
    justify-content: flex-start;
  }
}

/* ─────────────────────────────────────────────
   CARDS DE SERVIÇO — lista de itens recolhida

   Cada card tem de quatro a seis itens. Seis cards seguidos viram uma
   parede de texto que o visitante rola sem ler. No celular a lista entra
   recolhida atrás de um resumo; quem se interessou abre.

   Usa <details> nativo: funciona sem JavaScript e o leitor de tela já
   entende o estado aberto ou fechado.
   ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .service-card__features { gap: .55rem; }
  .service-card__itens > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px;
    font-size: .95rem; font-weight: 600; color: var(--gold);
  }
  .service-card__itens > summary::-webkit-details-marker { display: none; }
  .service-card__itens > summary::after {
    content: '\f078';                       /* chevron do Font Awesome */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: .7em;
    transition: transform .25s var(--mov-saida, ease);
  }
  .service-card__itens[open] > summary::after { transform: rotate(180deg); }
}

/* ─────────────────────────────────────────────
   ESPAÇAMENTO VERTICAL

   Seções com 7rem de respiro em cima e embaixo somam muita rolagem vazia
   num aparelho de 844px de altura. 3,5rem mantém a separação sem gastar
   meia tela em branco a cada bloco.
   ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .problems, .services, .edge, .smart,
  .about, .process, .prova { padding-block: 3.5rem; }
  .section-head { margin-bottom: 2rem; }
}

/* ─────────────────────────────────────────────
   ROLAGEM HORIZONTAL

   Rede de segurança: no celular, uma palavra longa ou uma URL sem espaço
   empurra a página inteira para o lado, e o visitante vê a barra lateral
   aparecer sem entender por quê.
   ───────────────────────────────────────────── */
@media (max-width: 860px) {
  html, body { overflow-x: clip; }
  .container { overflow-wrap: break-word; }
}

/* O <details> nasce aberto para funcionar sem JavaScript. No desktop o
   resumo some e a lista fica sempre à vista — lá não falta espaço. */
@media (min-width: 861px) {
  .service-card__itens > summary { display: none; }
}

/* ─────────────────────────────────────────────
   ÚLTIMA VARREDURA — o que sobrou da primeira medição
   ───────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Botões de WhatsApp da navbar e do menu: 32-35px de altura */
  .navbar .btn-wa,
  .nav-mobile .btn-wa,
  .hero__urgencia .btn,
  .problems-cta,
  .problem-card__link { min-height: 44px; }

  /* Links de texto que servem de CTA dentro de card */
  .problem-card a,
  .contact-privacy a,
  .form-nota a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }

  /* Assinatura da marca no rodapé: 10,24px é pequeno demais para ler */
  .footer .nav-logo__sub { font-size: .76rem; line-height: 1.5; }
}

/* A barra de endereço do mockup de navegador no hero continua miúda de
   propósito — ela imita a interface de um navegador, não é texto para ler.
   Está marcada como decorativa para o leitor de tela. */

@media (max-width: 860px) {
  /* "Ver como funciona" usa btn-sm, que tem altura própria menor */
  .btn-sm { min-height: 44px; }

  /* O aviso de privacidade do formulário é um link dentro de frase corrida.
     Aumentar a altura dele quebraria o parágrafo; o que dá para fazer é
     engordar a área clicável sem mexer na linha. */
  .cf-privacy a {
    display: inline-block;
    padding-block: .55rem;
    text-underline-offset: 3px;
  }
}