/* ═══════════════════════════════════════════════════════════════════════════
   Contato — SAC e Denúncias no celular (até 767 px) — 26/10/2026

   O visual de computador continua o do <style> do próprio contato.php. Aqui:

     · a escolha do canal vira três botões lado a lado (Comercial, SAC,
       Denúncias). Os cartões antigos não quebravam o texto e deixavam a
       página mais larga que a tela (rolava de lado);
     · o formulário sobe para logo depois da apresentação; os cartões de
       apoio (Como funciona, O que pode ser relatado...) vão para baixo dele;
     · campos em caixa, com letra de 16 px (abaixo disso o iPhone dá zoom
       sozinho ao tocar no campo) e altura boa para o dedo;
     · SAC: botões Ligar e WhatsApp antes do formulário; dica do Título junto
       do campo; contador de caracteres na Mensagem;
     · Denúncias: os três campos travados (Nome, Telefone, E-mail) viram uma
       linha "Você aparece como Anônimo"; atalhos de toque em "Quando
       aconteceu"; a orientação do "Antes de enviar" vai para junto do Relato;
       botão Copiar no protocolo.

   O que só existe no celular está escondido no computador logo abaixo.
   Comportamento (contador, atalhos, enviar uma vez só, rolar até o aviso,
   copiar) no script do fim do contato.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Até o tablet: o texto do cartão de canal pode quebrar linha (sem isto o
   estilo de botão do tema prende tudo numa linha e o cartão vaza da tela).
   No computador fica como estava. */
@media (max-width: 1024px) { .vp-ct .vp-canal { white-space: normal; min-width: 0; } }

/* Só do celular */
.vp-ct .vp-canal-curto,
.vp-ct .vp-direto,
.vp-ct .vp-anonimo,
.vp-ct .vp-chips,
.vp-ct .vp-dica,
.vp-ct .vp-contador,
.vp-ct .vp-copiar { display: none; }

@media (max-width: 767px) {
  .vp-ct { padding: 24px 16px 28px; }

  /* ── Escolha do canal: três botões lado a lado ── */
  .vp-ct .vp-canais { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 26px; }
  .vp-ct .vp-canal,
  .vp-ct .vp-canal:hover,
  .vp-ct .vp-canal:focus,
  .vp-ct .vp-canal:active {
    flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 92px; padding: 14px 6px 12px; border-width: 1.5px; border-radius: 14px;
    text-align: center; transform: none; box-shadow: none; background: #fff;
    -webkit-tap-highlight-color: transparent;
  }
  .vp-ct .vp-canal:not([aria-selected="true"]) { border-color: #e6e7ec; }
  .vp-ct .vp-canal:not([aria-selected="true"]) .vp-canal-ico { background: #f3f4f7; color: var(--roxo); }
  .vp-ct .vp-canal[aria-selected="true"] { background: #fdf1e8; border-color: var(--laranja); box-shadow: 0 6px 16px -8px rgba(227,122,54,.45); }
  .vp-ct .vp-canal-ico { width: 40px; height: 40px; border-radius: 11px; }
  .vp-ct .vp-canal-ico svg { width: 21px; height: 21px; }
  .vp-ct .vp-canal-tit,
  .vp-ct .vp-canal-sub { display: none; }
  .vp-ct .vp-canal-curto { display: block; font-size: 14px; font-weight: 600; line-height: 1.15; color: var(--cinza); }
  .vp-ct .vp-canal[aria-selected="true"] .vp-canal-curto { color: #c45f1f; }

  /* ── Ordem no celular: título, apresentação, (falar direto), formulário, apoio ──
     A coluna da esquerda "se desmancha" (display: contents) e os filhos dela
     passam a ser ordenados junto com o cartão do formulário. */
  .vp-ct #painel-sac .vp-linha,
  .vp-ct #painel-denuncia .vp-linha { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .vp-ct #painel-sac .vp-col:first-child,
  .vp-ct #painel-denuncia .vp-col:first-child { display: contents; }
  .vp-ct #painel-sac h2, .vp-ct #painel-denuncia h2 { order: 1; font-size: 27px; line-height: 1.15; margin: 0 0 10px; }
  .vp-ct #painel-sac .vp-intro, .vp-ct #painel-denuncia .vp-intro { order: 2; font-size: 16px; line-height: 1.6; margin: 0 0 20px; }
  .vp-ct .vp-direto { order: 3; }
  .vp-ct #painel-sac .vp-col:last-child,
  .vp-ct #painel-denuncia .vp-col:last-child { order: 4; margin-bottom: 22px; }
  .vp-ct .vp-ap-agilizar, .vp-ct .vp-ap-oque { order: 5; }
  .vp-ct .vp-ap-como, .vp-ct .vp-ap-sigilo { order: 6; }
  .vp-ct .vp-ap-direto, .vp-ct .vp-ap-antes { display: none; }   /* viraram os botões / a dica do Relato */

  /* cartões de apoio, mais enxutos */
  .vp-ct .vp-apoio { border-radius: 16px; padding: 20px 18px; margin: 0 0 14px; }
  .vp-ct .vp-apoio h3 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
  .vp-ct .vp-apoio li { font-size: 15px; line-height: 1.55; margin-bottom: 8px; }
  .vp-ct .vp-apoio ol { font-size: 15px; line-height: 1.6; }
  .vp-ct .vp-apoio ol li { margin-bottom: 6px; padding-left: 4px; }

  /* ── SAC: falar direto ── */
  .vp-ct .vp-direto { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 20px; }
  .vp-ct .vp-direto-btn,
  .vp-ct .vp-direto-btn:hover,
  .vp-ct .vp-direto-btn:focus {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px;
    border: 1.5px solid #e2e5ec; border-radius: 14px; background: #fff; color: var(--cinza);
    font-size: 15px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .vp-ct .vp-direto-btn svg { color: var(--laranja); }
  .vp-ct .vp-direto-btn:active { background: #fdf1e8; border-color: #f6d3bb; }

  /* ── Cartão do formulário ── */
  .vp-ct #painel-sac .vp-form-card,
  .vp-ct #painel-denuncia .vp-form-card { padding: 22px 18px 24px; border-radius: 20px; }
  .vp-ct #painel-sac .vp-form .vp-grid,
  .vp-ct #painel-denuncia .vp-form .vp-grid { grid-template-columns: 1fr; gap: 16px; }
  .vp-ct #painel-sac .vp-form label,
  .vp-ct #painel-denuncia .vp-form label { font-size: 14px; font-weight: 600; margin-bottom: 7px; letter-spacing: .01em; }
  .vp-ct #painel-sac .vp-form input:not([type="hidden"]):not(.vp-hp),
  .vp-ct #painel-sac .vp-form textarea,
  .vp-ct #painel-denuncia .vp-form input:not([type="hidden"]):not(.vp-hp),
  .vp-ct #painel-denuncia .vp-form textarea {
    min-height: 50px; padding: 13px 14px; border: 1.5px solid rgba(255,255,255,.18); border-radius: 12px;
    background: rgba(255,255,255,.07); color: #fff; font-size: 16px; line-height: 1.4;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  }
  .vp-ct #painel-sac .vp-form textarea,
  .vp-ct #painel-denuncia .vp-form textarea { min-height: 150px !important; line-height: 1.55; resize: vertical; }
  .vp-ct #painel-sac .vp-form input:focus,
  .vp-ct #painel-sac .vp-form textarea:focus,
  .vp-ct #painel-denuncia .vp-form input:focus,
  .vp-ct #painel-denuncia .vp-form textarea:focus {
    border-color: var(--amarelo); background: rgba(255,255,255,.11); box-shadow: 0 0 0 3px rgba(255,170,0,.22);
  }
  .vp-ct #painel-sac .vp-form input::placeholder, .vp-ct #painel-sac .vp-form textarea::placeholder,
  .vp-ct #painel-denuncia .vp-form input::placeholder, .vp-ct #painel-denuncia .vp-form textarea::placeholder { color: rgba(255,255,255,.5); }
  .vp-ct #painel-sac .vp-form input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #63677f inset; }

  .vp-ct .vp-dica { display: block; margin-top: 7px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.45; }
  .vp-ct .vp-dica b { color: #fff; font-weight: 600; }
  .vp-ct .vp-dica-antes { margin: -2px 0 9px; }
  .vp-ct .vp-contador { display: block; margin-top: 6px; text-align: right; color: rgba(255,255,255,.55); font-size: 12px; font-variant-numeric: tabular-nums; }
  .vp-ct .vp-contador.perto { color: var(--amarelo); }

  .vp-ct #painel-sac .vp-form .vp-enviar,
  .vp-ct #painel-denuncia .vp-form .vp-enviar { margin-top: 22px; }
  .vp-ct #painel-sac .vp-form button[type="submit"],
  .vp-ct #painel-denuncia .vp-form button[type="submit"] { min-height: 54px; font-size: 17px; border-radius: 30px; }
  .vp-ct .vp-form button[type="submit"]:disabled { opacity: .7; cursor: progress; }

  /* avisos depois do envio */
  .vp-ct #painel-sac .vp-msg, .vp-ct #painel-denuncia .vp-msg { font-size: 15px; line-height: 1.5; border-radius: 12px; }
  .vp-ct .vp-msg:focus { outline: none; }

  /* ── Denúncias ── */
  /* o aviso de sigilo e os três campos travados viram um bloco só */
  .vp-ct .vp-sigilo, .vp-ct .vp-campo-travado { display: none; }
  .vp-ct .vp-anonimo {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px;
    padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.45;
  }
  .vp-ct .vp-anonimo svg { grid-row: 1 / 3; width: 34px; height: 34px; padding: 8px; border-radius: 10px;
    background: rgba(255,170,0,.16); color: var(--amarelo); box-sizing: border-box; }
  .vp-ct .vp-anonimo .vp-anonimo-tit { color: #fff; font-size: 16px; font-weight: 500; }
  .vp-ct .vp-anonimo b { color: #fff; font-weight: 700; }

  .vp-ct .vp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .vp-ct .vp-chips button,
  .vp-ct .vp-chips button:hover,
  .vp-ct .vp-chips button:focus {
    width: auto; min-height: 36px; padding: 0 14px; border: 1.5px solid rgba(255,255,255,.28); border-radius: 18px;
    background: transparent; color: #fff; font: 500 14px/1 Roboto, system-ui, sans-serif; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .vp-ct .vp-chips button[aria-pressed="true"] { background: var(--amarelo); border-color: var(--amarelo); color: #3b2a00; font-weight: 600; }

  .vp-ct .vp-copiar,
  .vp-ct .vp-copiar:hover,
  .vp-ct .vp-copiar:focus {
    display: inline-flex; align-items: center; width: auto; min-height: 36px; margin: 4px 0 0 6px; padding: 0 14px;
    border: 1.5px solid rgba(255,255,255,.4); border-radius: 18px; background: transparent; color: #fff;
    font: 600 14px/1 Roboto, system-ui, sans-serif; vertical-align: middle; cursor: pointer;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .vp-ct #painel-sac .vp-form input, .vp-ct #painel-sac .vp-form textarea,
  .vp-ct #painel-denuncia .vp-form input, .vp-ct #painel-denuncia .vp-form textarea { transition: none; }
}