/* ═══════════════════════════════════════════════════════════
   mobile/home.css — Overrides Mobile da página inicial
   Dolce Olive — carregado depois de pages/home.css

   É a porta de entrada de quem chega pelo Instagram/Google —
   o foco aqui é os CTAs do hero serem fáceis de tocar e a leitura
   ficar confortável, sem precisar de zoom.
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* A navbar agora ocupa sua própria faixa (deixou de ser "fixed"),
     então o hero não precisa mais do espaço extra que compensava a
     sobreposição — senão sobra um vão vazio entre a navbar e o texto. */
  .hero { padding-top: 56px; }

  .sobre-inner { grid-template-columns: 1fr; gap: 48px; }
  .sobre-visual { aspect-ratio: 3/2; }

  /* Botões do hero ocupam a largura toda — alvo de toque maior
     e sem risco de o texto (ex.: "Fazer meu pedido") apertar. */
  .hero-btns { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-primary, .btn-outline { padding: 15px 24px; text-align: center; }

  .strip { gap: 24px; }
  .strip-item { font-size: 11px; }

  .campanha-slide { padding: 36px 28px; min-height: 220px; }
  .campanha-slide.has-img .slide-cta-floating { left: 28px; bottom: 24px; padding: 10px 22px; font-size: 8px;}
  .campanhas::before,
  .campanhas::after { background-size: 90px auto; }
  .carousel-prev, .carousel-next { width: 40px; height: 40px; }
  .carousel-dot { width: 8px; height: 8px; }
  .carousel-dot.active { width: 26px; }

  .valores { grid-template-columns: 1fr; gap: 20px; }
  .lavanda-left, .lavanda-right { width: 360px; }
}

/* Ajustes adicionais para telas bem pequenas */
@media (max-width: 420px) {
  .hero { padding: 40px 6% 64px; }
  .section { padding: 64px 6%; }
  .cat-card-body { padding: 24px 24px; }
  .contato-grid { grid-template-columns: 1fr; }
  .lavanda-left, .lavanda-right { width: 280px; }
  .destaque-body { padding: 22px; }
}