/* TF-MOBILE (25/07) — otimização mobile do site (home + fichas).
   Injetado via nginx em todo HTML do site, DEPOIS do <style> inline. */

/* nunca rolar horizontal (o vilão nº1 de "site zoado no celular") */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; }

/* ALVO DE TOQUE: botões com altura mínima de dedo */
.btn { min-height: 46px; }

@media (max-width: 900px) {
  /* hero: título fluido em vez de 3rem fixo (estourava em 360px) */
  h1 { font-size: clamp(1.6rem, 7.5vw, 2.6rem) !important; line-height: 1.15 !important; }
  header { padding-top: 96px !important; min-height: 0 !important; padding-bottom: 2.5rem !important; }
  header p { font-size: 0.95rem !important; }

  h2 { font-size: 1.05rem !important; }

  /* CTAs do hero: empilhados e largos (fácil de acertar com o dedo) */
  header > .container > div[style*="display:flex"],
  header .container div[style*="gap:15px"] { flex-direction: column !important; align-items: stretch !important; }
  header .btn { width: 100% !important; padding: 0 1rem !important; font-size: 0.8rem !important; }

  /* planos: 1 coluna, sem minmax de 300px apertando */
  .plans-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  .plan-card { transform: none !important; padding: 1.5rem !important; }

  /* modais: caber na tela e rolar quando precisar */
  .modal { padding: 12px !important; align-items: flex-start !important; }
  .modal-content {
    padding: 1.5rem 1.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 6vh !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }

  /* container: respiro nas bordas */
  .container { padding: 0 14px !important; }

  /* carrossel de capas: rolagem por toque, sem cortar */
  .swiper, .swiper-wrapper { touch-action: pan-x pan-y; }

  /* FICHAS: layout de 2 colunas vira 1 */
  .ficha-grid, .detail-grid, [class*="grid"][style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 420px) {
  .swiper-slide { width: 140px !important; }
  .btn { font-size: 0.72rem !important; }
}

/* ── NAV DO SITE NO CELULAR (25/07, print do Carlos: abas transbordando e
   título do hero cortado atrás da nav fixa de 64px) ────────────────────── */
@media (max-width: 900px) {
  nav { height: 58px !important; }
  .nav-content { gap: 6px !important; }
  .logo { height: 24px !important; width: 92px !important; flex: 0 0 auto; }

  /* abas: uma linha só, com swipe horizontal e sem barra visível */
  .tf-tabs {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .tf-tabs::-webkit-scrollbar { display: none; }
  .tf-tabs a {
    padding: 9px 9px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  /* o botão ENTRAR (visitante) nunca encolhe */
  nav .nav-content > a.btn { flex: 0 0 auto; padding: 0 14px !important; }

  /* folga pro título não ficar atrás da nav fixa */
  header { padding-top: 86px !important; }
}

@media (max-width: 420px) {
  .tf-tabs a { padding: 9px 7px !important; font-size: 11.5px !important; }
  .logo { width: 80px !important; height: 22px !important; }
  header { padding-top: 82px !important; }
}


/* ── MASCARA DO LOGO NA HOME — REMOVIDA EM 29/07/2026 ────────────────────
   Diagnóstico correto: o item não passava ATRÁS do logo; ele era cortado pela
   borda esquerda da própria caixa das abas (overflow-x + justify-content
   flex-end). O fundo e a sombra no logo tratavam o sintoma errado. A correção
   real é o menu hambúrguer do tf-shell.js em telas ≤900px. */