/* ============================================================
   GOMES ODONTOLOGIA & ESTÉTICA — responsive.css
   Mobile-first adjustments — a experiência mobile é redesenhada,
   não apenas encolhida. A maior parte do tráfego vem de anúncio/mobile.
   ============================================================ */

/* ---------- Notebook / tablet-landscape (<=1180px) ---------- */
@media (max-width: 1180px) {
  .treatments-highlight__grid { grid-template-columns: repeat(2, 1fr); }
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .clinic-tour__grid { grid-template-columns: repeat(3, 1fr); }
  .main-nav ul { gap: 22px; }

  .hero__inner { gap: 32px; }
}

/* ---------- Tablet (<=980px) ---------- */
@media (max-width: 980px) {
  .main-nav { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; background: transparent; border: 0; z-index: 101;
  }
  .nav-toggle span { display: block; height: 1px; width: 100%; background: var(--ink); transition: transform 0.3s ease, opacity 0.3s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { max-width: 100%; }
  .hero__scene { height: clamp(340px, 52vh, 480px); margin-top: 20px; }

  .doctor-bio, .location { grid-template-columns: 1fr; }
  .doctor-bio__media { min-height: 380px; }
  .doctor-bio__content { padding: 70px var(--gutter); }
  .location__map { min-height: 320px; order: -1; }

  .treatment-row { grid-template-columns: 160px 1fr; gap: 24px; }

  .team__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ---------- Mobile (<=680px) — experiência própria ---------- */
@media (max-width: 680px) {
  :root { --gutter: 22px; }

  .site-header { padding: 18px var(--gutter); }
  .site-header.is-scrolled { padding: 14px var(--gutter); }
  .brand-mark__name { font-size: 18px; }

  /* Hero — impacto total, tipografia compacta, CTA empilhado */
  .hero { padding-top: 84px; min-height: auto; }
  .hero__lead { font-size: 16px; max-width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 24px; }
  .hero__actions .btn { width: 100%; }
  .hero__scroll-indicator { display: none; }

  .hero__scene { height: 320px; margin-top: 16px; }

  .statement { padding: 90px var(--gutter); }
  .statement__actions { flex-direction: column; align-items: stretch; }
  .statement__actions .btn { width: 100%; }

  .treatments-highlight, .treatments-list, .team, .testimonials, .final-cta, .clinic-tour, .results-carousel {
    padding: 90px var(--gutter);
  }
  .treatments-highlight__intro, .treatments-list__intro, .team__intro, .testimonials__intro, .clinic-tour__intro, .results-carousel__intro {
    margin-bottom: 44px;
  }
  .treatments-highlight__grid { grid-template-columns: 1fr; }
  .treatment-card { padding: 34px 24px; }

  .doctor-bio__content h2, .location__info h2 { font-size: 30px; }
  .doctor-bio__content, .location__info { padding: 60px var(--gutter); }

  .treatments-list { padding-top: 90px; }
  .treatment-row { grid-template-columns: 92px 1fr; padding: 22px 0; gap: 16px; align-items: flex-start; }
  .treatment-row__index { font-size: 10px; margin-bottom: 4px; }
  .treatment-row__text h3 { font-size: 19px; margin-bottom: 6px; }
  .treatment-row__text p { font-size: 13.5px; line-height: 1.55; margin-bottom: 8px; }

  .team__grid { grid-template-columns: 1fr; }

  .clinic-tour__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Setas menores e dentro da área visível — sinalizam que dá pra arrastar
     pra ver mais itens, mesmo em quem não tenta o gesto de swipe. */
  .carousel__nav { width: 36px; height: 36px; font-size: 15px; }
  .carousel__nav--prev { left: 6px; }
  .carousel__nav--next { right: 6px; }

  .location__info { padding: 60px var(--gutter); }
  .location__info address { margin-bottom: 30px; }

  .final-cta { padding: 120px var(--gutter); }
  .final-cta h2 { font-size: 32px; }
  .final-cta .btn { width: 100%; white-space: normal; }

  .site-footer { padding: 70px var(--gutter) 100px; } /* espaço extra p/ CTA fixo */
  .site-footer__grid { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  .site-footer__bottom { flex-direction: column; text-align: left; }

  /* CTA fixo mobile de WhatsApp */
  .mobile-cta {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
    color: var(--cream);
    font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
    border-radius: 3px;
    box-shadow: 0 12px 34px -8px rgba(27,29,32,0.4);
  }

  .mobile-menu ul { gap: 20px; margin-bottom: 34px; }
  .mobile-menu a { font-size: 22px; }
}

/* ---------- Small phones ---------- */
@media (max-width: 380px) {
  .statement h1 { font-size: 30px; }
  .btn { padding: 14px 22px; }
}