/* ============================================================
   CALDOS LUCRATIVOS — OTIMIZAÇÕES MOBILE FIRST
   Carregado depois de site.css (sobrescreve o necessário)
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; font-size: 16px; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

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

/* ---------- MOBILE (até 767px) ---------- */
@media (max-width: 767px) {

  /* Espaçamento da página */
  .mx-auto.w-full.max-w-\[1180px\] { padding-left: 16px; padding-right: 16px; }
  .section-pad { padding-top: 32px; padding-bottom: 32px; }

  /* Tipografia */
  h1, .text-\[2rem\] { font-size: 1.75rem !important; line-height: 1.18 !important; }
  h2 { font-size: 1.4rem !important; line-height: 1.25 !important; }
  .text-\[1\.8rem\], .text-\[1\.65rem\], .text-\[1\.5rem\] { font-size: 1.4rem !important; }
  .text-\[3\.4rem\], .text-\[3\.2rem\] { font-size: 2.6rem !important; }
  h3 { font-size: 1rem !important; }
  p, li { font-size: 0.95rem; line-height: 1.6; }
  .text-\[1\.02rem\] { font-size: 0.98rem !important; }

  /* Botões: 100% da largura, altura mínima de 48px */
  .btn-cta,
  .btn-premium,
  a[href*="pay.lowify.com.br"]:not(.mobile-cta a) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 48px;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
    text-align: center;
    touch-action: manipulation;
    line-height: 1.25;
  }
  .btn-cta + .btn-cta,
  .btn-premium + .btn-premium { margin-top: 12px; }
  .btn-cta:active, .btn-premium:active { transform: scale(0.975); }

  /* Alvos de toque mínimos */
  a, button, summary { touch-action: manipulation; }
  summary { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }

  /* Cards e grids: 1 coluna */
  .grid:not(.grid-cols-\[minmax\(0\,1fr\)_auto\]) { grid-template-columns: 1fr !important; }
  .surface-card { border-radius: 14px; }
  .surface-card.p-8 { padding: 20px !important; }
  .surface-card.p-6 { padding: 18px !important; }

  /* Planos: Premium primeiro e em destaque, Básico depois e discreto */
  .plan-basic { opacity: 0.95; }

  /* Mini VSL: vídeo/imagem 100% da largura */
  #vsl .max-w-\[380px\] { max-width: 100% !important; }
  #vsl video, #vsl img { width: 100%; border-radius: 16px; }

  /* Evita zoom automático no iOS */
  input, select, textarea { font-size: 16px !important; min-height: 44px; }

  /* Espaço para a barra fixa */
  main { padding-bottom: 88px !important; }
}

/* Telas muito pequenas (<= 360px) */
@media (max-width: 360px) {
  h1, .text-\[2rem\] { font-size: 1.45rem !important; }
  h2 { font-size: 1.2rem !important; }
  .btn-cta, .btn-premium { font-size: 0.85rem !important; padding: 12px 14px !important; min-height: 46px; }
  .text-\[3\.4rem\], .text-\[3\.2rem\] { font-size: 2.1rem !important; }
}

/* ---------- CTA FIXO ---------- */
.mobile-cta {
  transform: translateY(110%);
  transition: transform 0.3s ease;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta a { min-height: 44px; display: inline-flex; align-items: center; }

@media (min-width: 768px) {
  .mobile-cta { display: none !important; }
}

/* Sem efeitos exclusivos de hover em telas de toque */
@media (hover: none) {
  *:hover { transition-duration: 0.15s; }
}