/* ─── GS ODONTOLOGIA — LAYOUT ──────────────────────────────────────
   Estrutura, grids e fluxo. Mobile-first.
   Breakpoints: 768px (tablet) · 1024px (desktop) · 1440px (wide)
   ───────────────────────────────────────────────────────────────── */

/* ══ CONTAINER ═════════════════════════════════════════════════════ */

.gs-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.gs-container--wide {
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}

/* sprite de ícones: presente no DOM, invisível */
.gs-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ══ SEÇÃO GENÉRICA ════════════════════════════════════════════════ */

.gs-section {
  position: relative;
  padding-block: var(--section-y);
}

.gs-section--alt { background: var(--gs-bg-alt); }

.gs-section__head {
  max-width: var(--container-text);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.gs-section__head--center {
  margin-inline: auto;
  text-align: center;
}

.gs-section__lead { margin-top: var(--space-5); }


/* ══ CARROSSEL (compartilhado) ═════════════════════════════════════
   Usado por depoimentos e equipe. Rolagem nativa com scroll-snap: as
   setas e os pontos só empurram `scrollLeft`, então o arrastar com o
   dedo e o trackpad continuam funcionando de graça — e sem JS a faixa
   ainda rola. As margens negativas fazem os cards "sangrarem" até a
   borda da tela, mantendo o primeiro alinhado ao container. */

.gs-carousel { position: relative; }

.gs-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block-end: var(--space-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}

.gs-carousel__track::-webkit-scrollbar { display: none; }

/* vale para qualquer slide, seja .gs-depo ou .gs-membro */
.gs-carousel__track > * { scroll-snap-align: start; }

.gs-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .gs-carousel__track { grid-auto-columns: 42%; gap: var(--space-5); }
}

@media (min-width: 1024px) {
  .gs-carousel__track {
    grid-auto-columns: calc((100% - var(--space-6) * 2) / 3);
    gap: var(--space-6);
  }
}


/* ══ HEADER ════════════════════════════════════════════════════════ */

.gs-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.gs-header__inner {
  width: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.gs-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gs-header__logo {
  width: auto;
  height: 34px;
}

/* nav some no mobile: vira drawer (ver components.css) */
.gs-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  width: min(88vw, 380px);
  height: 100dvh;
  padding: calc(var(--header-h) + var(--space-8)) var(--space-8) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.gs-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.gs-nav__cta { align-self: flex-start; }

@media (min-width: 1024px) {
  .gs-nav {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: var(--space-8);
    background: none;
    transform: none;
    visibility: visible;
    box-shadow: none;
  }

  .gs-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-7, 1.75rem);
  }

  .gs-burger { display: none; }
  .gs-header__logo { height: 40px; }
}


/* ══ 1 · HERO ══════════════════════════════════════════════════════ */

.gs-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--gs-primary-900);
  color: var(--gs-text-inverse);
}

.gs-hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
}

/* As quatro imagens ficam empilhadas no mesmo lugar; o crossfade é só
   opacidade (ver animations.css), então nada aqui muda de tamanho. */
.gs-hero__slides {
  position: absolute;
  inset: 0;
}

.gs-hero__slide {
  position: absolute;
  inset: 0;
  display: block;
}

.gs-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.gs-hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.gs-hero__scrim {
  position: absolute;
  inset: 0;
  /* duas camadas: a vertical dá o clima, a horizontal garante contraste
     do texto sobre a parte clara da imagem, à esquerda. */
  background-image:
    linear-gradient(to right,
      rgba(5, 20, 38, .84) 0%,
      rgba(5, 20, 38, .46) 46%,
      rgba(5, 20, 38, .10) 100%),
    var(--gs-hero-scrim);
}

.gs-hero__content {
  position: relative;
  /* Desce o bloco de texto para que "em cada sorriso." não corte o rosto
     da pessoa à esquerda do enquadramento. Usa `top` (e não `transform`)
     de propósito: o GSAP anima o `transform` deste mesmo elemento no pin
     do hero, e um deslocamento por `top` não entra nesse caminho — os
     dois convivem sem um sobrescrever o outro. Também não afeta o
     layout, então não cria rolagem extra.
     Para calibrar, mexa só neste valor. */
  --hero-shift: clamp(1rem, 7vh, 5rem);
  top: var(--hero-shift);
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--space-10)) var(--gutter) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.gs-hero__logo {
  width: min(280px, 62vw);
  height: auto;
}

.gs-hero__lead {
  max-width: 46ch;
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--gs-text-inverse-muted);
}

.gs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.gs-hero__scroll {
  position: relative;
  justify-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block-end: var(--space-8);
}

/* No celular os pontos sobem para cima do "Role para explorar": na mesma
   linha, o texto centralizado invade a área deles (medido a 375px). A
   partir de 768px sobra folga e os dois voltam para a mesma base. */
.gs-hero__dots {
  position: absolute;
  inset-block-end: calc(var(--space-8) + 4rem);
  inset-inline-end: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 768px) {
  .gs-hero__logo { width: min(340px, 44vw); }
  .gs-hero__dots { inset-block-end: var(--space-8); }
}

@media (min-width: 1024px) {
  .gs-hero__particles { display: block; }
  .gs-hero__content { padding-block-start: var(--header-h); }
}


/* ══ 2 · SOBRE ═════════════════════════════════════════════════════ */

.gs-sobre__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.gs-sobre__figures {
  position: relative;
  padding-bottom: 18%;
  padding-right: 12%;
}

.gs-sobre__fig--main {
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.gs-sobre__fig--main img { aspect-ratio: 4 / 5; object-fit: cover; }

.gs-sobre__fig--inset {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 46%;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 6px solid var(--gs-bg);
  box-shadow: var(--shadow-xl);
}

.gs-sobre__fig--inset img { aspect-ratio: 3 / 4; object-fit: cover; }

.gs-sobre__text > * + * { margin-top: var(--space-5); }
.gs-sobre__text .gs-title { margin-top: var(--space-4); }

.gs-pilares {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-10) !important;
  padding-top: var(--space-8);
  border-top: 1px solid var(--gs-border);
}

@media (min-width: 768px) {
  .gs-pilares { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

@media (min-width: 1024px) {
  .gs-sobre__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    align-items: center;
  }
  .gs-sobre__figures { padding-bottom: 22%; padding-right: 16%; }
  .gs-pilares { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (min-width: 1440px) {
  .gs-pilares { grid-template-columns: repeat(3, 1fr); }
}


/* ══ 3 · EQUIPE ════════════════════════════════════════════════════ */

.gs-equipe {
  isolation: isolate;
  overflow: hidden;
  background: var(--gs-primary-900);
  color: var(--gs-text-inverse);
}

/* Halo frio saindo do topo: dá profundidade ao fundo chapado e emenda
   visualmente com o branco da seção "Sobre", logo acima. */
.gs-equipe::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(11, 45, 84, .85) 0%, rgba(5, 20, 38, 0) 62%),
    linear-gradient(to bottom, rgba(208, 201, 193, .07), rgba(208, 201, 193, 0) 30%);
}

/* a seção é a única com fundo escuro; o carrossel em si é o compartilhado */
.gs-equipe .gs-section__head,
.gs-equipe .gs-carousel { position: relative; }


/* ══ 4 · ESPECIALIDADES ════════════════════════════════════════════ */

.gs-esp-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .gs-esp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gs-esp-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}


/* ══ 5 · CTA INVISALIGN ════════════════════════════════════════════
   Tela cheia, texto encostado embaixo à esquerda.

   São duas montagens, porque o recorte da foto muda demais:

   · Até 1024px a tela é estreita e alta. Com `cover`, uma foto 3:2
     aparece só pela faixa central: rosto no alto, mãos e estojo a ~72%
     da altura. Não sobra área escura para o texto. Então a foto termina
     antes do fim da seção (`inset-block-end: 38%`) e o texto ocupa a
     base em navy sólido — a seção continua valendo a tela inteira.

   · A partir de 1024px a foto sangra até embaixo e o texto entra por
     cima, na faixa escura da esquerda.

   `100svh` (e não `100vh`): no celular a barra do navegador some e
   volta, e com `vh` a seção pulava de altura no meio da rolagem. */

.gs-cta-inv {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--gs-primary-900);
  color: var(--gs-text-inverse);
}

.gs-cta-inv__media {
  position: absolute;
  inset-block: 0 38%;
  inset-inline: 0;
  z-index: var(--z-below);
  overflow: hidden;
}

/* O `poster` também é desenhado com este `object-fit`, então o frame
   parado e o vídeo tocando têm exatamente o mesmo enquadramento — a
   troca de um para o outro não mexe um pixel. */
.gs-cta-inv__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dissolve a base do vídeo no fundo da seção. É o que apaga a emenda
   entre vídeo e texto no celular — e, no desktop, o que segura o
   contraste do texto por cima do jaleco branco. */
.gs-cta-inv__media::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 46%;
  background: linear-gradient(to top, var(--gs-primary-900), rgba(5, 20, 38, 0));
}

/* Duas camadas, como no hero: a vinheta fecha o quadro (é o que dá o
   ar de cinema) e o gradiente lateral abre espaço legível à esquerda. */
.gs-cta-inv__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-image:
    linear-gradient(to right,
      rgba(5, 20, 38, .78) 0%,
      rgba(5, 20, 38, .28) 44%,
      rgba(5, 20, 38, 0) 72%),
    radial-gradient(115% 85% at 50% 44%,
      rgba(5, 20, 38, 0) 38%,
      rgba(5, 20, 38, .74) 100%);
}

.gs-cta-inv__inner {
  position: relative;
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--space-10)) var(--gutter) clamp(2.5rem, 8vh, 5rem);
}

.gs-cta-inv__content {
  max-width: 29rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .gs-cta-inv__media { inset-block-end: 0; }
  .gs-cta-inv__content { max-width: 34rem; gap: var(--space-5); }
}


/* ══ 6 · NÚMEROS ═══════════════════════════════════════════════════ */

.gs-numeros {
  position: relative;
  padding-block: clamp(4rem, 8vw, 7.5rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--gs-primary-900);
  color: var(--gs-text-inverse);
}

.gs-numeros__bg {
  position: absolute;
  inset: -12% 0;
  z-index: var(--z-below);
}

.gs-numeros__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .22;
}

.gs-numeros::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background: var(--gs-overlay-brand-deep);
}

.gs-numeros__inner { position: relative; text-align: center; }

.gs-numeros__grid {
  display: grid;
  gap: var(--space-10);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .gs-numeros__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gs-numeros__grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-8);
  }
}


/* ══ 7 · UNIDADES ══════════════════════════════════════════════════ */

.gs-unidades__panels { position: relative; }

.gs-unidade {
  display: grid;
  gap: var(--space-8);
  overflow: hidden;
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  background: var(--gs-surface);
  box-shadow: var(--shadow-md);
}

.gs-unidade[hidden] { display: none; }

.gs-unidade__media { margin: 0; }

.gs-unidade__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gs-unidade__body {
  padding: 0 var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.gs-unidade__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  width: 100%;
}

@media (max-width: 767.98px) {
  .gs-tabs { display: none; }
}

@media (min-width: 768px) {
  .gs-unidade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
  }
  /* A foto preenche a coluna em vez de definir a altura dela. Com
     `height: 100%` no fluxo normal, uma imagem em retrato esticava o card
     para ~900px e deixava a coluna de texto boiando no vazio. Tirando a
     imagem do fluxo, quem manda na altura é o conteúdo — mais o piso
     abaixo, para o card não achatar enquanto os dados de endereço e
     horário ainda não foram preenchidos. */
  .gs-unidade__media {
    position: relative;
    min-height: 420px;
    overflow: hidden;
  }
  .gs-unidade__media picture,
  .gs-unidade__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .gs-unidade__body {
    justify-content: center;
    padding: clamp(2rem, 4vw, 3.5rem);
  }
}


/* ══ 8 · RESULTADOS ════════════════════════════════════════════════ */

.gs-casos {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

.gs-resultados__nota {
  max-width: 62ch;
  margin: var(--space-10) auto 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--gs-text-muted);
}

@media (min-width: 640px) {
  .gs-casos { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gs-casos { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}


/* ══ 9 · DEPOIMENTOS ═══════════════════════════════════════════════ */

/* A seção usa o carrossel compartilhado (bloco "CARROSSEL", acima);
   o card em si está em components.css. Nada específico de layout aqui. */


/* ══ 10 · AGENDAMENTO ══════════════════════════════════════════════ */

.gs-agendamento {
  position: relative;
  padding-block: var(--section-y);
  background: var(--gs-primary);
  color: var(--gs-text-inverse);
}

.gs-agendamento__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.gs-agendamento__aside > * + * { margin-top: var(--space-5); }

.gs-agendamento__pontos {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-8) !important;
}

.gs-agendamento__pontos li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--gs-text-inverse-muted);
}

.gs-agendamento__pontos svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--gs-secondary);
}

.gs-agendamento__wpp { margin-top: var(--space-8) !important; }

@media (min-width: 1024px) {
  .gs-agendamento__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
  .gs-agendamento__aside { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
}


/* ══ 11 · LOCALIZAÇÃO ══════════════════════════════════════════════ */

/* O fim da página escurece em degrau: agendamento (navy) → mapas
   (navy-800) → rodapé (navy-900). Uma seção clara aqui partiria esse
   bloco escuro no meio e desfaria o fecho. */
.gs-localizacao {
  background: var(--gs-primary-800);
  color: var(--gs-text-inverse);
}

.gs-mapas {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

/* São três unidades: duas colunas deixariam a terceira sozinha embaixo.
   Até 1024px fica uma coluna só — mas aí o card chega a ~900px de
   largura e um mapa 4:3 passaria de 600px de altura, empurrando os
   outros dois para fora da tela. Nessa faixa o mapa vira uma faixa
   larga; a informação (rua, quadra, referências) continua toda ali. */
@media (min-width: 768px) {
  .gs-mapas { gap: var(--space-8); }
  .gs-mapa__frame { aspect-ratio: 21 / 9; }
}

@media (min-width: 1024px) {
  .gs-mapas { grid-template-columns: repeat(3, 1fr); }
  .gs-mapa__frame { aspect-ratio: 4 / 3; }
}


/* ══ 12 · FOOTER ═══════════════════════════════════════════════════ */

.gs-footer {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--space-8);
  background: var(--gs-primary-900);
  color: var(--gs-text-inverse-muted);
  font-size: var(--text-sm);
}

.gs-footer__top {
  display: grid;
  gap: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.gs-footer__brand { max-width: 320px; }

.gs-footer__logo {
  width: 100%;
  max-width: 260px;
  height: auto;
  color: var(--gs-text-inverse);
}

.gs-footer__col ul {
  display: grid;
  gap: var(--space-3);
}

.gs-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-8);
  font-size: var(--text-xs);
}

@media (min-width: 640px) {
  .gs-footer__top { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gs-footer__top {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--space-8);
  }
  .gs-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}