/* ============================================================
   LUMINA CLINIC · responsive.css
   Todos os ajustes de tablet e mobile isolados aqui
   ============================================================ */

/* ---------- TABLET ---------- */
@media (max-width: 1100px) {
  :root { --pad-x: 48px; }

  #hero { grid-template-columns: 1fr 0.9fr; }
  .hero-stats { gap: 28px; }
  .stat-number { font-size: 26px; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }

  .team-single { gap: 40px; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {
  :root { --pad-x: 24px; }

  /* NAV */
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--cream);
    flex-direction: column;
    justify-content: center;
    gap: 28px;
    transform: translateX(100%);
    transition: transform .4s ease;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 14px; }
  .nav-cta { padding: 14px 32px !important; }

  /* HERO */
  #hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left { padding: 116px 24px 56px; order: 2; }
  .hero-right { height: 60vh; order: 1; }
  .hero-right::after { background: linear-gradient(to bottom, transparent 60%, var(--cream) 100%); }
  .hero-img-main { animation: none; transform: none; }
  .hero-title { font-size: clamp(42px, 11vw, 60px); }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 16px; }
  .btn-primary { justify-content: center; }
  .hero-stats { gap: 20px; margin-top: 48px; }
  .stat-number { font-size: 22px; }
  .stat-label { font-size: 9px; }
  .hero-badge { display: none; }

  /* BRAND BAR */
  .brand-track { animation-duration: 20px; gap: 36px; }
  .brand-item::after { margin-left: 36px; }

  /* SERVICES */
  #services { padding: 72px 24px; }
  .section-header { margin-bottom: 48px; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card.featured { order: -1; }
  .service-card { padding: 36px 28px; }

  /* ABOUT */
  #about { grid-template-columns: 1fr; min-height: 0; }
  .about-img-col { height: 420px; order: 1; }
  .about-img-overlay { right: 16px; padding: 18px 24px; }
  .about-content { padding: 56px 24px; order: 2; }

  /* TEAM */
  #team { padding: 72px 24px; }
  .team-single { grid-template-columns: 1fr; gap: 40px; }
  .team-photo { max-width: 320px; margin: 0 auto; }
  .team-photo::after { right: 12px; bottom: -12px; top: 12px; left: 12px; }
  .team-creds { gap: 8px; }

  /* TESTIMONIALS */
  #testimonials { padding: 72px 24px; }
  .testimonials-note { margin: -24px 0 40px; }
  .testimonials-grid { grid-template-columns: 1fr; }

  /* CTA */
  #cta { flex-direction: column; padding: 56px 24px; text-align: center; align-items: stretch; }
  .cta-actions { flex-direction: column; }
  .btn-white, .btn-outline-white { text-align: center; padding: 16px; }

  /* FOOTER */
  footer { padding: 56px 24px 32px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  /* FAB menor para não cobrir conteúdo */
  .whatsapp-fab { width: 54px; height: 54px; bottom: 20px; right: 20px; }
  .wa-ico-fab { width: 25px; height: 25px; }
}

/* ---------- MOBILE PEQUENO ---------- */
@media (max-width: 380px) {
  .hero-stats { flex-wrap: wrap; }
}