/* =====================================================================
   RESPONSIVIDADE — Clínica da Dor Salus Doloris
   Breakpoints: 1300px (menu vira hambúrguer) · 860px (tablet) · 600px (mobile)

   NOTA IMPORTANTE SOBRE O MENU:
   O menu principal tem 9 itens + botão. Testando em telas reais, esse
   menu só cabe confortavelmente, sem cortar nenhuma palavra, em telas
   MUITO largas (≥ 1300px). Por isso o menu hambúrguer (mobile) passa a
   ser usado também em notebooks e janelas de navegador "normais"
   (< 1300px) — é o padrão adotado pela maioria dos sites premium e
   evita qualquer corte de texto no cabeçalho.
   ===================================================================== */

/* ---------------------------------------------------------------------
   RESPONSIVIDADE — MENU (≤ 1300px)
   Abaixo desse valor o menu horizontal é substituído pelo menu mobile,
   para nunca haver risco de sobreposição ou corte dos nomes do menu.
--------------------------------------------------------------------- */
@media (max-width: 1300px){
  .nav-principal{ display: none; }
  .botao-menu{ display: flex; }
}

/* ---------------------------------------------------------------------
   RESPONSIVIDADE — NOTEBOOK / TABLET GRANDE (≤ 1080px)
--------------------------------------------------------------------- */
@media (max-width: 1080px){
  :root{ --espaco-secao: clamp(3.6rem, 8vw, 6rem); }

  .sobre__grade{ gap: 2.5rem; }
  .medico{ grid-template-columns: 280px 1fr; }

  .carrossel__seta--esq{ left: 8px; }
  .carrossel__seta--dir{ right: 8px; }
}

/* ---------------------------------------------------------------------
   RESPONSIVIDADE TABLET (≤ 860px)
--------------------------------------------------------------------- */
@media (max-width: 860px){

  .sobre__grade{ grid-template-columns: 1fr; }
  .sobre__imagem{ max-width: 420px; margin: 0 auto; }
  .pilares{ grid-template-columns: 1fr 1fr; }

  /* Carrossel de cards: 2 por vez no tablet */
  .grade-cards.grade-scroll__trilho > .card{
    flex-basis: calc((100% - 1.6rem) / 2);
  }
  .grade-tratamentos.grade-scroll__trilho > .card-tratamento{
    flex-basis: calc((100% - 1.8rem) / 2);
  }

  .medico{ grid-template-columns: 1fr; text-align: center; }
  .medico__foto{ max-width: 260px; margin: 0 auto; }
  .medico__crm{ margin-left: auto; margin-right: auto; }
  .localizacao__item{ text-align: left; }

  .localizacao__grade{ grid-template-columns: 1fr; }
  .localizacao__mapa{ min-height: 320px; }
  .localizacao__mapa iframe{ min-height: 320px; }

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

  .rodape__grade{ grid-template-columns: 1fr 1fr; }
  .rodape__marca{ grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   MENU MOBILE — painel deslizante
--------------------------------------------------------------------- */
.menu-mobile{
  position: fixed;
  inset: 0;
  z-index: 550;
  background: var(--petroleo-glass);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
}
.menu-mobile.aberto{ opacity: 1; visibility: visible; }

.menu-mobile__painel{
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(340px, 84vw);
  background: var(--azul-petroleo);
  padding: 6.5rem 2.4rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  transform: translateX(100%);
}
.menu-mobile.aberto .menu-mobile__painel{ transform: translateX(0); }

.menu-mobile__painel a{
  font-family: var(--fonte-display);
  font-size: clamp(1.02rem, 0.82rem + 1.6vw, 1.3rem);
  color: var(--branco);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  /* Nunca corta uma palavra no meio: quebra de linha só é permitida
     entre duas palavras (itens com dois nomes), nunca dentro de uma
     palavra única — o tamanho da fonte se ajusta para caber. */
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

.menu-mobile__painel .btn{ margin-top: 1rem; align-self: flex-start; }

/* ---------------------------------------------------------------------
   RESPONSIVIDADE MOBILE (≤ 600px)
--------------------------------------------------------------------- */
@media (max-width: 600px){
  :root{ --espaco-secao: 3.2rem; }

  .hero{ text-align: left; }
  .hero__conteudo{ padding-top: 5.5rem; }
  .hero__botoes{ flex-direction: column; align-items: stretch; }
  .hero__botoes .btn{ width: 100%; }
  .hero__sunburst{ width: 90vw; height: 90vw; opacity: 0.09; }

  /* Selo "Cuidado Real" sobre a imagem — reposicionado para não
     ultrapassar a borda da tela em celulares estreitos (evita corte) */
  .sobre__selo{
    left: 0.8rem;
    bottom: 0.8rem;
    max-width: calc(100% - 1.6rem);
    padding: 1rem 1.2rem;
  }

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

  .grade-cards{ grid-template-columns: 1fr; }
  .grade-tratamentos{ grid-template-columns: 1fr; }

  /* Carrossel de cards: 1 por vez no celular, gira para ver os demais */
  .grade-cards.grade-scroll__trilho,
  .grade-tratamentos.grade-scroll__trilho{ gap: 1rem; }
  .grade-cards.grade-scroll__trilho > .card,
  .grade-tratamentos.grade-scroll__trilho > .card-tratamento{
    flex-basis: 100%;
  }
  .grade-scroll__controles{ margin-top: 1.6rem; }

  .medico{ padding: 1.6rem; }

  .carrossel__seta{ width: 40px; height: 40px; }
  .carrossel__legenda{ font-size: 1rem; padding: 1.4rem; }

  .cta-final{ padding: 2.6rem 1.4rem; }

  .rodape__grade{ grid-template-columns: 1fr; gap: 2.2rem; }
  .rodape__base{ flex-direction: column; align-items: flex-start; }

  .whatsapp-flutuante{ width: 54px; height: 54px; bottom: 1.2rem; right: 1.2rem; }

  .localizacao__botoes{ flex-direction: column; align-items: stretch; }
  .localizacao__botoes .btn{ width: 100%; }
}

/* ---------------------------------------------------------------------
   TELAS GRANDES (≥ 1600px) — leve respiro adicional
--------------------------------------------------------------------- */
@media (min-width: 1600px){
  :root{ --largura-max: 1360px; }
}