/* ============================================
   LÁ PIPOKITA — MOBILE.CSS
   Otimização para celular (99% das compras)
   Carregar SEMPRE por último para vencer nos overrides.
   ============================================ */

/* ---------- TABLET / CELULAR GRANDE (<=768px) ---------- */
@media (max-width: 768px){

  /* Espaçamentos gerais mais justos */
  .container{ padding:0 16px; }
  section.block{ padding:44px 0; }
  .sec-head{ margin-bottom:26px; }
  .sec-head p{ font-size:.95rem; }
  .benefits{ padding:36px 0 4px; }
  footer{ margin-top:48px; }

  /* Header compacto */
  .header-in{ padding:10px 16px; gap:10px; }
  .logo{ font-size:1.2rem; gap:8px; }
  .logo img{ height:40px; width:40px; }
  .btn-cart{ padding:9px 14px; font-size:.9rem; }
  .btn-account{ font-size:.85rem; }

  /* ---- HERO tela cheia ---- */
  .hero-full{
    min-height:86vh; min-height:86svh;
    align-items:flex-end;
    background-position:center center;
  }
  /* Escurece embaixo para o texto ficar legível sobre a foto */
  .hero-full .ov{
    background:linear-gradient(180deg,
      rgba(38,20,10,.55) 0%,
      rgba(38,20,10,.45) 32%,
      rgba(38,20,10,.80) 78%,
      rgba(38,20,10,.94) 100%);
  }
  .hero-full .wrap{ padding:96px 18px 42px; }
  .hero-full .col{ max-width:100%; text-align:center; }
  .hero-full .hero-badge{ font-size:.78rem; padding:7px 14px; margin-bottom:16px; }
  .hero-full h1{ font-size:clamp(2rem,8.5vw,2.9rem); margin-bottom:14px; }
  .hero-full p{ font-size:1.02rem; margin:0 auto 24px; }

  /* CTAs empilhados e ocupando a largura (fácil de tocar) */
  .hero-full .hero-ctas{ flex-direction:column; gap:12px; margin-bottom:22px; }
  .hero-full .hero-ctas .btn{ width:100%; padding:16px 24px; font-size:1.05rem; }
  .hero-full .rating{ justify-content:center; font-size:.82rem; }
  .hero-full .scroll{ display:none; }

  /* Barra de destaques */
  .hero-stats > div{ padding:18px 10px; }
  .hero-stats b{ font-size:1.15rem; }
  .hero-stats small{ font-size:.68rem; }

  /* Hero antigo (index no ar) — caso ainda esteja ativo */
  .hero-in{ grid-template-columns:1fr; text-align:center; padding:48px 18px 72px; }
  .hero p{ margin:0 auto 24px; }
  .hero-ctas, .hero-proof{ justify-content:center; }
  nav.main{ display:none; }

  /* Benefícios: 2 colunas compactas */
  .benefits-in{ grid-template-columns:repeat(2,1fr); gap:12px; padding:0 16px; }
  .benefit{ padding:18px 12px; font-size:.9rem; }
  .benefit .ico{ font-size:1.9rem; margin-bottom:6px; }
  .benefit small{ font-size:.78rem; }

  /* ---- VITRINE: 2 colunas no celular ---- */
  .grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .card-img{ height:132px; font-size:3rem; }
  .card-body{ padding:12px 12px 16px; gap:6px; }
  .card-body h3{ font-size:.9rem; min-height:2.4em; line-height:1.25; }
  .card-cat{ font-size:.62rem; }
  .price{ font-size:1.1rem; }
  .price s{ font-size:.78rem; margin-left:5px; }
  .fav-heart{ width:30px; height:30px; font-size:.9rem; }
  .btn-add{ padding:11px 10px; font-size:.85rem; width:100%; }
  .low-stock, .rcount{ font-size:.7rem; }

  /* Passos / depoimentos: 1 coluna */
  .steps, .testis{ grid-template-columns:1fr; gap:16px; }

  /* Busca */
  #busca{ font-size:1rem; }

  /* Footer 1 coluna */
  .footer-in{ grid-template-columns:1fr; gap:28px; padding:40px 18px 20px; }

  /* WhatsApp flutuante — não cobrir a barra inferior */
  .wa-float{ width:54px; height:54px; font-size:1.55rem; right:16px; bottom:18px; }

  /* Conta */
  .account-grid{ grid-template-columns:1fr; padding:0 16px; }
  .auth-wrap{ margin:32px 16px; padding:26px 20px; }

  /* Checkout / modal em 1 coluna */
  .modal{ padding:0; align-items:flex-end; }
  .modal-box{ width:100%; max-height:94vh; border-radius:22px 22px 0 0; padding:24px 20px 28px; }
  .form-row{ grid-template-columns:1fr; }
}

/* ---------- CELULAR (<=480px) ---------- */
@media (max-width: 480px){
  .hero-full h1{ font-size:clamp(1.9rem,9vw,2.5rem); }
  .hero-full p{ font-size:.98rem; }

  /* Barra de destaques 2x2 já vem do styles; garante respiro */
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .hero-stats > div{ border-bottom:1px solid rgba(255,255,255,.1); }
  .hero-stats > div:nth-child(3){ border-right:1px solid rgba(255,255,255,.1); }

  /* Cards ainda em 2 colunas, mais enxutos */
  .grid{ gap:11px; }
  .card-img{ height:118px; }
  .card-body h3{ font-size:.85rem; }
  .price{ font-size:1.02rem; }

  /* Header: esconde texto do botão conta, mantém ícone */
  .btn-account{ font-size:0; }
  .btn-account::before{ content:'👤'; font-size:1.25rem; }

  .btn-cart{ padding:8px 12px; }
  .logo{ font-size:1.08rem; }
  .logo img{ height:36px; width:36px; }

  .sec-head h2{ font-size:1.5rem; }
  .cta-final h2, .insta-card h2{ font-size:1.5rem; }
}

/* ---------- Alvos de toque confortáveis ---------- */
@media (max-width: 768px){
  .btn, .btn-add, .btn-cart, .qty button, .drawer-close,
  .modal-close, .tabs button, .side-menu button{
    min-height:44px;
  }
  .qty button{ width:34px; height:34px; }
}