/* ==========================================================================
   RESPONSIVE — breakpoints mobile-first (ajustes acima do layout base)
   ========================================================================== */

/* ---- Telas grandes / TV ---- */
@media (min-width: 1600px) {
  :root {
    --container-width: 1480px;
  }
}

/* ---- Notebook / desktop pequeno ---- */
@media (max-width: 1199px) {
  .grid--specialties {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

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

/* ---- Tablet ---- */
@media (max-width: 1100px) {
  .main-nav {
    position: fixed;
    inset: 0;
    top: 0;
    z-index: calc(var(--z-header) - 1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: var(--glass-blur);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-premium), visibility var(--dur-base);
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
  }

  .main-nav__list {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .nav-link {
    font-size: var(--fs-h4);
    font-family: var(--font-display);
  }

  .nav-toggle {
    display: flex;
  }

  .header-actions .btn-ghost {
    display: none;
  }

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

/* ---- Celular ---- */
@media (max-width: 640px) {
  .grid--specialties,
  .grid--process,
  .grid--testimonials {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .gallery__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .hero {
    align-items: flex-end;
    padding-bottom: var(--space-xl);
  }

  .hero__scroll-cue {
    display: none;
  }

  .modal {
    padding: var(--space-lg) var(--space-md);
  }

  .body-map {
    gap: var(--space-lg);
  }

  .lightbox__nav {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   MOBILE POLISH — empilha as seções de 2 colunas, centraliza tudo e
   amplia as imagens para o celular ficar tão elegante quanto o desktop.
   (usa !important só onde precisa vencer os estilos inline do HTML)
   ========================================================================== */
@media (max-width: 768px) {
  /* --- Seções "Sobre" e "Agende": empilhar em 1 coluna e centralizar --- */
  #sobre .grid,
  #agende .grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
    text-align: center;
  }

  #sobre .grid > div,
  #agende .grid > div {
    text-align: center;
  }

  /* eyebrow (etiqueta) centralizada */
  #sobre .eyebrow,
  #agende .eyebrow,
  #galeria .eyebrow {
    justify-content: center;
  }

  /* listas de números/benefícios centralizadas */
  #sobre ul,
  #agende ul {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /* grupos de botões centralizados */
  #sobre .grid div[style*="flex"],
  #agende .grid div[style*="flex"] {
    justify-content: center;
  }

  /* imagens dessas seções: grandes, centralizadas e com largura controlada */
  #sobre .glass-card,
  #agende .glass-card {
    width: 100%;
    max-width: 24rem;
    margin-inline: auto;
  }

  /* cabeçalhos de seção centralizados no celular */
  .section-head {
    text-align: center;
    margin-inline: auto;
  }

  /* filtros da galeria centralizados */
  .gallery__filters {
    justify-content: center;
  }

  /* conteúdo dos cards centralizado */
  .specialty-card,
  .process-card,
  .testimonial-card {
    text-align: center;
  }

  .testimonial-card__author {
    justify-content: center;
  }

  /* No celular, os reveals "left/right" viram slide vertical:
     evita deslocamento lateral e qualquer rolagem horizontal. */
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(28px);
  }

  [data-reveal="left"].is-visible,
  [data-reveal="right"].is-visible {
    transform: translateY(0);
  }
}

/* --- Galeria: 1 imagem por linha no celular (grandes e nítidas) --- */
@media (max-width: 640px) {
  .gallery__grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-md);
  }
}

/* ---- Impressão (não indexável, mas evita layout quebrado se alguém imprimir) ---- */
@media print {
  .site-header,
  .modal-overlay,
  .lightbox,
  .custom-cursor {
    display: none !important;
  }
}