/* ============================================================
   Brasoft Confort — CELULAR
   Alvo: 390px (iPhone atual), validado também em 360px (Android
   intermediário, o piso real do mercado brasileiro).

   Mora num arquivo só, compartilhado pelas quatro páginas, para elas não
   divergirem — foi o que já aconteceu antes com regras duplicadas.

   Carregar SEMPRE por último, depois de glass/teste-branco.css.
   ============================================================ */

/* ============================================================
   [hidden] PRECISA ESCONDER — vale em todas as larguras.

   O atributo `hidden` traz `display:none` da folha do navegador, que tem
   especificidade ZERO. Qualquer classe com display próprio vence, e o
   elemento que o JS marcou como oculto continua na tela.

   Não é hipótese: o checkout escondia a linha "Máximo frescor · Tecido
   Fresh" com `hidden`, mas `.summary-row{display:flex}` mandava mais alto.
   Quem escolhia o frescor PADRÃO via, no resumo do pedido, uma linha de
   Tecido Fresh com acréscimo — um item que não comprou. Achado na
   avaliação de 11/08/2026.

   A regra é global e usa !important de propósito: é a única forma de a
   folha do usuário vencer uma classe, e esconder é uma decisão que o JS
   toma — nenhum layout tem o direito de desobedecer.
   ============================================================ */
[hidden] { display: none !important; }

/* ============================================================
   ROLAGEM LATERAL — vale em TODAS as larguras, não só no celular.
   O mostruário de desktop mostrou que em 1440px cinco seções estouravam a
   janela (de 136 a 245px) por causa dos elementos decorativos: a marca
   d'água do monograma sai 120px pela direita, e as faíscas das seções de
   entrega e vídeos passam da borda. Decoração não pode criar rolagem.

   `clip` só no eixo X, com Y visível: as sombras das cartas e o leque
   continuam podendo transbordar para cima e para baixo, que é onde o efeito
   mora. Com `hidden` o navegador criaria contêiner de rolagem e quebraria o
   `position: sticky` do cabeçalho.
   ============================================================ */
#conteudo > section, .site-footer { overflow-x: clip; overflow-y: visible; }

@media (max-width: 767px) {

  /* ---- 0. Nenhuma rolagem lateral, nunca ----
     Página que anda para o lado no celular é o defeito mais caro que existe:
     a pessoa acha que quebrou. Achei e corrigi os culpados um a um (pílulas
     com nowrap, cabeçalho do checkout, grade de vídeos), mas isto aqui é o
     cinto de segurança para o que ainda não apareceu.
     `clip` e não `hidden`: hidden criaria um contêiner de rolagem e brigaria
     com o arrasto do leque e com o `position: sticky` do cabeçalho. */
  html, body { overflow-x: clip; }

  /* Grade de vídeos: cartazes com proporção fixa não encolhiam junto */
  #videos .video-grid, #videos .grid, .video-grid {
    grid-template-columns: 1fr;
  }
  #videos img, #videos video, #videos iframe { width: 100%; height: auto; }

  /* ---- 1. Alvos de toque ----
     A auditoria achou 16 alvos abaixo de 44px de altura. Link em linha de
     texto tem a altura da linha (20px), e no dedo isso é um erro de mira.
     A área cresce SEM mexer no texto: padding vertical e um deslocamento
     negativo de margem, para o parágrafo não abrir buraco. */
  a.link, .link, .back-link, .breadcrumb a, .footer-inner a, .site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 12px;
    margin-block: -12px;
  }
  /* Botão que é link de texto: mesma regra, mas ele já é flex */
  button.link { min-height: 44px; padding-block: 12px; margin-block: -12px; }

  /* Itens de navegação e rodapé em lista: o alvo é a linha inteira */
  .site-footer li a, .footer-cols a {
    min-height: 44px;
    padding-block: 10px;
  }
  /* A marca no cabeçalho ficava em 42px — dois pixels do mínimo */
  .brand { min-height: 44px; }

  /* ---- 2. Texto pequeno demais ----
     43 trechos abaixo de 12px. Onze pixels em caixa alta com espaçamento de
     letra é ilegível no celular, e é justamente onde moram os selos e as
     pílulas de pendência — informação que a pessoa PRECISA ler. */
  .badge, .pending, .buybox-selo, .m-type, .eyebrow, .label, .review-date {
    font-size: .75rem;      /* 12px */
    line-height: 1.45;
  }
  .topstrip { font-size: .75rem; }
  /* A pílula cresce junto, senão o texto encosta na borda */
  .pending { padding: 3px 10px; }
  /* Eu mesmo encolhi esta para .625rem quando refiz a hierarquia do resumo
     de compra, para ela não gritar mais alto que o preço. No desktop está
     certo; no celular 10px é ilegível, e legibilidade ganha da hierarquia. */
  .buybox .installments .pending { font-size: .75rem; padding: 3px 10px; }

  /* ---- 3. Respiro ----
     No celular a leitura é uma coluna só: o texto precisa de mais entrelinha
     e as bordas laterais precisam de folga real, não de 12px. */
  :root { --container-pad: 20px; }
  .caption, .subtitle { line-height: 1.6; }

  /* ---- 4. Cartões ----
     Raio grande em carta estreita come o conteúdo; o padding interno cede
     um passo para o texto ganhar largura útil. */
  .trust-item, .step-card, .content-card, .review-card, .trial-card,
  .option, .buybox, .panel, .summary, .model-card {
    border-radius: var(--radius-xl);
  }
  .buybox, .panel, .summary { padding: var(--space-5); }

  /* ---- 5. O que empurrava a página para o lado ----
     Descoberto no mostruário, em 390px de verdade: as pílulas [preencher]
     têm white-space: nowrap, e uma delas mede 459px. Num grid, a coluna
     passa a medir pelo conteúdo que NÃO quebra — o checkout virava uma
     coluna de 509px numa tela de 390, com rolagem horizontal.
     No celular a pílula quebra em duas linhas; nowrap é luxo de tela larga. */
  .pending { white-space: normal; }
  /* Item de grid tem min-width: auto por padrão, e é isso que o deixa maior
     que a própria coluna. Zerar é o cinto de segurança da regra acima. */
  .checkout > *, .form-grid > *, .pay-grid > *, .catalog-grid > *,
  .panel, .summary, .buybox { min-width: 0; }

  /* O leque: as cartas laterais passam da moldura de propósito (é o que dá a
     sensação de baralho), mas o trilho é overflow: visible e isso empurrava a
     PÁGINA para o lado. `clip` corta sem criar contêiner de rolagem — com
     `hidden` o navegador criaria um, e o arrasto do dedo brigaria com ele. */
  .models-track.leque { overflow-x: clip; overflow-y: visible; }

  /* Cabeçalho do checkout: marca, "Voltar" e "Compra segura" não cabem lado a
     lado em 390px. O selo de segurança perde o texto e fica só o cadeado —
     a informação continua, no title. */
  .header-right { gap: var(--space-3); }
  .secure span, .secure { font-size: 0; }
  .secure svg { font-size: 1rem; }

  /* ---- 6. Peças que não cabem em coluna estreita ---- */
  /* Tabela larga rola no eixo dela, e o aviso é visual: sombra na borda */
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* 360px — o piso. Aqui o que ainda estoura é o título display, que em
   caixa alta e com fonte serifada não quebra bem. */
@media (max-width: 380px) {
  :root { --container-pad: 16px; }
  .h1, h1, .catalog-head h1 { hyphens: auto; overflow-wrap: break-word; }
}