/* ─── GS ODONTOLOGIA — COMPONENTES ─────────────────────────────────
   Átomos e blocos de interface. Sem nenhuma biblioteca externa.
   ───────────────────────────────────────────────────────────────── */

/* ══ TIPOGRAFIA DE APOIO ═══════════════════════════════════════════ */

.gs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gs-primary-400);
}

.gs-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
}

.gs-section__head--center .gs-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
}

.gs-eyebrow--light { color: var(--gs-secondary); }

.gs-title {
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--gs-primary);
  margin-top: var(--space-5);
  text-wrap: balance;
}

.gs-title--light { color: var(--gs-text-inverse); }

.gs-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--gs-text-muted);
}

.gs-lead--light { color: var(--gs-text-inverse-muted); }

.gs-section p:not([class]) {
  color: var(--gs-text-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--container-text);
}


/* ══ BOTÕES ════════════════════════════════════════════════════════ */

.gs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: var(--space-4) var(--space-7, 1.75rem);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth),
    color var(--dur-fast) var(--ease-smooth),
    transform var(--dur-fast) var(--ease-smooth),
    box-shadow var(--dur-fast) var(--ease-smooth);
}

.gs-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}

.gs-btn:hover .gs-btn__icon { transform: translateX(3px); }
.gs-btn:active { transform: translateY(1px); }

.gs-btn--primary {
  background: var(--gs-accent);
  color: var(--gs-text-inverse);
  box-shadow: var(--shadow-brand);
}
.gs-btn--primary:hover { background: var(--gs-accent-hover); box-shadow: var(--shadow-xl); }

.gs-btn--light {
  background: var(--gs-bg);
  color: var(--gs-primary);
}
.gs-btn--light:hover { background: var(--gs-secondary-light); }

.gs-btn--ghost {
  border-color: var(--gs-border-strong);
  color: var(--gs-primary);
}
.gs-btn--ghost:hover { background: var(--gs-surface-alt); border-color: var(--gs-primary); }

.gs-btn--ghost-light {
  border-color: rgba(255, 255, 255, .45);
  color: var(--gs-text-inverse);
}
.gs-btn--ghost-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--gs-text-inverse);
}

.gs-btn--whatsapp {
  background: var(--gs-whatsapp);
  color: #fff;
}
.gs-btn--whatsapp:hover { background: var(--gs-whatsapp-dark); }
.gs-btn--whatsapp .gs-btn__icon { width: 20px; height: 20px; }
.gs-btn--whatsapp:hover .gs-btn__icon { transform: none; }

.gs-btn--sm { min-height: 44px; padding: var(--space-3) var(--space-5); }
.gs-btn--block { width: 100%; }


/* ══ HEADER · NAV · BURGER ═════════════════════════════════════════ */

.gs-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--gs-border);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-smooth);
}

.gs-header.is-solid::before { opacity: 1; }

/* sobre o hero o logo é branco; ao fixar, volta ao navy */
.gs-header__logo {
  filter: brightness(0) invert(1);
  transition: filter var(--dur-base) var(--ease-smooth);
}
.gs-header.is-solid .gs-header__logo { filter: none; }

.gs-nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-3) 0;
  font-family: var(--font-accent);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--gs-primary);
  transition: color var(--dur-fast) var(--ease-smooth);
}

.gs-nav__link::after {
  content: '';
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.gs-nav__link:hover::after,
.gs-nav__link.is-current::after { transform: scaleX(1); transform-origin: left; }

/* drawer mobile */
@media (max-width: 1023.98px) {
  .gs-nav {
    background: var(--gs-bg);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--dur-base) var(--ease-cinematic),
      visibility var(--dur-base) var(--ease-cinematic);
  }
  .gs-nav.is-open { transform: translateX(0); visibility: visible; }

  body.has-menu-open { overflow: hidden; }

  body.has-menu-open::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--gs-overlay-dark);
    animation: gs-fade-in var(--dur-fast) var(--ease-smooth) both;
  }
}

@media (min-width: 1024px) {
  .gs-nav__link { font-size: var(--text-sm); letter-spacing: var(--tracking-wide); color: var(--gs-text-inverse); }
  .gs-header.is-solid .gs-nav__link { color: var(--gs-primary); }

  .gs-nav__cta {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .4);
    color: var(--gs-text-inverse);
    box-shadow: none;
  }
  .gs-nav__cta:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }

  .gs-header.is-solid .gs-nav__cta {
    background: var(--gs-accent);
    border-color: var(--gs-accent);
    color: var(--gs-text-inverse);
  }
  .gs-header.is-solid .gs-nav__cta:hover { background: var(--gs-accent-hover); }
}

.gs-burger {
  position: relative;
  z-index: var(--z-drawer);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-inline-end: -12px;
  color: var(--gs-text-inverse);
  transition: color var(--dur-base) var(--ease-smooth);
}

.gs-header.is-solid .gs-burger,
.gs-burger[aria-expanded="true"] { color: var(--gs-primary); }

.gs-burger__icon { width: 26px; height: 26px; grid-area: 1 / 1; }
.gs-burger__icon--close { opacity: 0; transform: rotate(-45deg); }
.gs-burger__icon--open,
.gs-burger__icon--close { transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth); }
.gs-burger[aria-expanded="true"] .gs-burger__icon--open { opacity: 0; transform: rotate(45deg); }
.gs-burger[aria-expanded="true"] .gs-burger__icon--close { opacity: 1; transform: rotate(0); }

/* Precisa vir DEPOIS do bloco acima: mesma especificidade, quem fecha
   a cascata vence. (Repetido de layout.css de propósito.) */
@media (min-width: 1024px) {
  .gs-burger { display: none; }
}


/* ══ HERO ══════════════════════════════════════════════════════════ */

.gs-hero__eyebrow {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gs-secondary);
}

/* ── pontos do slideshow ───────────────────────────────────────────
   Traços, não bolinhas: acompanham o fio areia que marca títulos e
   cards no resto do site. O alvo de toque de 44px é o botão inteiro;
   o traço visível mora dentro dele. */
.gs-hero__dot {
  position: relative;
  width: 26px;
  height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}

.gs-hero__dot::before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  height: 2px;
  background: rgba(255, 255, 255, .38);
  transition: background var(--dur-base) var(--ease-smooth),
              transform var(--dur-base) var(--ease-smooth);
  transform: translateY(-50%);
}

.gs-hero__dot:hover::before { background: rgba(255, 255, 255, .7); }

.gs-hero__dot.is-active::before {
  background: var(--gs-secondary);
  transform: translateY(-50%) scaleY(2);
}

.gs-hero__logo { filter: brightness(0) invert(1); }

.gs-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--tracking-tighter);
  color: var(--gs-text-inverse);
  text-wrap: balance;
}

/* cada linha é uma máscara para o reveal vertical */
.gs-line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em;
}
.gs-line > span { display: block; }

.gs-hero__scroll {
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gs-text-inverse-muted);
  transition: color var(--dur-fast) var(--ease-smooth);
}
.gs-hero__scroll:hover { color: var(--gs-text-inverse); }
.gs-hero__scroll svg { width: 22px; height: 22px; animation: gs-bob 2.4s var(--ease-in-out) infinite; }


/* ══ PILARES (sobre) ═══════════════════════════════════════════════ */

.gs-pilar__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--gs-border-strong);
  border-radius: var(--radius-md);
  color: var(--gs-primary);
}
.gs-pilar__icon svg { width: 26px; height: 26px; }

.gs-pilar__title {
  font-family: var(--font-accent);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gs-primary);
  margin-bottom: var(--space-2);
}

.gs-pilar__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gs-text-muted);
}


/* ══ CARD DE EQUIPE ════════════════════════════════════════════════ */

.gs-membro__card {
  position: relative;
  overflow: hidden;
  /* os retratos são 720×900; o card mantém o mesmo 4:5 para nenhum rosto
     depender de corte, em qualquer largura de coluna */
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  background: var(--gs-primary-800);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-base) var(--ease-smooth),
              transform var(--dur-base) var(--ease-smooth);
}

.gs-membro__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* mesma armadilha dos depoimentos: sem altura no <picture>, o `height: 100%`
   da <img> não tem contra o que resolver e o object-fit não vale */
.gs-membro__card picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gs-membro__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.gs-membro__card:hover img { transform: scale(1.05); }

.gs-membro__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(5, 20, 38, 0) 40%,
    rgba(5, 20, 38, .38) 66%,
    rgba(5, 20, 38, .92) 100%);
}

.gs-membro__meta {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
  color: var(--gs-text-inverse);
}

/* fio areia sobre o nome — cresce no hover e é o único movimento do card
   além do zoom da foto */
.gs-membro__meta::before {
  content: '';
  width: 26px;
  height: 2px;
  margin-bottom: var(--space-3);
  background: var(--gs-secondary);
  transition: width var(--dur-base) var(--ease-out-expo);
}
.gs-membro__card:hover .gs-membro__meta::before { width: 52px; }

.gs-membro__nome {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.gs-membro__esp {
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gs-secondary);
}


/* ══ CARD DE ESPECIALIDADE ═════════════════════════════════════════ */

.gs-esp {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--gs-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-smooth),
              transform var(--dur-base) var(--ease-out-expo);
}
.gs-esp:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }

.gs-esp__link { display: block; height: 100%; }

.gs-esp__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gs-esp__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.gs-esp:hover .gs-esp__media img { transform: scale(1.06); }

.gs-esp__overlay {
  position: absolute;
  inset: 0;
  background: var(--gs-overlay-brand);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-smooth);
}
.gs-esp:hover .gs-esp__overlay { opacity: 1; }

.gs-esp__body {
  position: relative;
  padding: var(--space-6);
}

.gs-esp__icon {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: var(--space-6);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  background: var(--gs-primary);
  color: var(--gs-text-inverse);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-base) var(--ease-smooth);
}
.gs-esp__icon svg { width: 24px; height: 24px; }
.gs-esp:hover .gs-esp__icon { background: var(--gs-secondary); color: var(--gs-primary); }

.gs-esp__title {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--gs-primary);
}

.gs-esp__text {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gs-text-muted);
}

.gs-esp__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gs-primary);
}
.gs-esp__more svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.gs-esp:hover .gs-esp__more svg { transform: translateX(4px); }


/* ══ TEXTO DO CTA INVISALIGN ═══════════════════════════════════════
   O pedido era "texto pequeno e chamativo": quem grita nessa tela é a
   foto e a luz do estojo, não a tipografia. Por isso o título fica um
   degrau abaixo do `--text-section` das outras seções e o parágrafo
   desce para `--text-sm`. O contraste vem do branco puro sobre o navy
   e do botão sólido, não do tamanho da letra.
   (A estrutura da seção está em layout.css, bloco 5.) */

.gs-cta-inv__titulo {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--gs-text-inverse);
  text-wrap: balance;
}

.gs-cta-inv__texto {
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gs-text-inverse-muted);
}

/* Crédito de quem aparece no plano, no espírito da ficha técnica de um
   filme: corpo mínimo, bem espaçado, tom recuado. Não é legenda de
   imagem — é a informação de que a foto é da equipe da casa. */
.gs-cta-inv__credito {
  margin-top: var(--space-2);
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gs-secondary-dark);
}


/* ══ NÚMEROS ═══════════════════════════════════════════════════════ */

.gs-num { display: grid; gap: var(--space-2); }

.gs-num__value {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  color: var(--gs-secondary);
  font-variant-numeric: tabular-nums;
}

.gs-num__label {
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gs-text-inverse);
}

.gs-num__desc {
  font-size: var(--text-sm);
  color: var(--gs-text-inverse-muted);
}


/* ══ TABS (unidades) ═══════════════════════════════════════════════ */

.gs-tabs {
  position: relative;
  margin-bottom: var(--space-8);
}

.gs-tabs__list {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--gs-border);
}
.gs-tabs__list::-webkit-scrollbar { display: none; }

.gs-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  color: var(--gs-text-muted);
  transition: color var(--dur-fast) var(--ease-smooth);
}
.gs-tabs__tab svg { width: 18px; height: 18px; }
.gs-tabs__tab:hover { color: var(--gs-primary); }
.gs-tabs__tab.is-active { color: var(--gs-primary); }

.gs-tabs__indicator {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 0;
  background: var(--gs-primary);
  transition: transform var(--dur-base) var(--ease-cinematic),
              width var(--dur-base) var(--ease-cinematic);
}


/* ══ UNIDADE ═══════════════════════════════════════════════════════ */

.gs-unidade__kicker {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gs-primary-400);
}

.gs-unidade__name {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  color: var(--gs-primary);
}

.gs-unidade__desc {
  font-size: var(--text-sm);
  color: var(--gs-text-muted);
}

.gs-unidade__info {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-5);
}

.gs-unidade__info:empty { display: none; }

.gs-unidade__info > div {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.gs-unidade__info dt {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--gs-primary-400);
}
.gs-unidade__info dt svg { width: 20px; height: 20px; }

.gs-unidade__info dd {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gs-text-muted);
}
.gs-unidade__info dd a:hover { color: var(--gs-primary); text-decoration: underline; }


/* ── accordion (mobile): o cabeçalho é criado por locations.js ──── */

.gs-unidade__toggle { display: none; }

@media (max-width: 767.98px) {
  .gs-unidades__panels { display: grid; gap: var(--space-3); }

  .gs-unidade { gap: 0; box-shadow: var(--shadow-sm); }

  .gs-unidade__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: 64px;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-accent);
    font-size: var(--text-base);
    font-weight: 600;
    text-align: start;
    color: var(--gs-primary);
  }

  .gs-unidade__toggle-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
  }

  .gs-unidade__toggle svg { width: 20px; height: 20px; flex-shrink: 0; }
  .gs-unidade__toggle-name svg { color: var(--gs-primary-400); }

  .gs-unidade__toggle > svg {
    color: var(--gs-primary-400);
    transition: transform var(--dur-base) var(--ease-out-expo);
  }
  .gs-unidade__toggle.is-open > svg { transform: rotate(180deg); }

  /* fechado: só o cabeçalho ocupa espaço */
  .gs-unidade__media,
  .gs-unidade__body { display: none; }

  .gs-unidade.is-open { box-shadow: var(--shadow-md); }
  .gs-unidade.is-open .gs-unidade__media {
    display: block;
    animation: gs-fade-in var(--dur-base) var(--ease-smooth) both;
  }
  .gs-unidade.is-open .gs-unidade__body {
    display: flex;
    padding-top: var(--space-6);
    animation: gs-pop-in var(--dur-base) var(--ease-out-expo) both;
  }
  .gs-unidade.is-open .gs-unidade__actions .gs-btn { width: 100%; }
}


/* ══ CARD DE MAPA (localização) ════════════════════════════════════ */

/* O card vive sobre navy, onde sombra não separa nada. Quem separa é
   uma superfície um fio mais clara com contorno areia translúcido —
   o mesmo recurso já usado nos controles do carrossel da Equipe. */
.gs-mapa {
  overflow: hidden;
  border: 1px solid rgba(208, 201, 193, .18);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .04);
  transition: border-color var(--dur-base) var(--ease-smooth);
}
.gs-mapa:hover,
.gs-mapa:focus-within { border-color: rgba(208, 201, 193, .45); }

.gs-mapa__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--gs-primary-900);   /* enquanto o mapa carrega */
}

/* A marca tem quatro cores e nenhuma é o verde/amarelo do Google. O
   mapa entra dessaturado, no tom da página, e recupera a cor quando
   alguém aponta ou tabula até ele — que é justamente quando a cor
   vira informação (avenida, parque, água). */
.gs-mapa__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.9) contrast(1.05);
  transition: filter var(--dur-slow) var(--ease-smooth);
}
.gs-mapa:hover .gs-mapa__frame iframe,
.gs-mapa:focus-within .gs-mapa__frame iframe { filter: none; }

/* Sem hover não existe o gesto que devolveria a cor; aí o mapa já
   nasce colorido em vez de ficar cinza para sempre no celular. */
@media (hover: none) {
  .gs-mapa__frame iframe { filter: none; }
}

.gs-mapa__body { padding: var(--space-6); }

.gs-mapa__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--gs-text-inverse);
}

.gs-mapa__endereco {
  margin-top: var(--space-3);
  font-style: normal;                  /* <address> vem em itálico */
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--gs-text-inverse-muted);
}

.gs-mapa__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: var(--space-5);
}

.gs-mapa__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gs-secondary);
  transition: color var(--dur-fast) var(--ease-smooth);
}
.gs-mapa__tel svg { width: 18px; height: 18px; flex-shrink: 0; }
.gs-mapa__tel:hover { color: var(--gs-text-inverse); }


/* ══ COMPARADOR ANTES / DEPOIS ═════════════════════════════════════ */

.gs-compare {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--gs-surface-alt);
  aspect-ratio: 1 / 1;
  user-select: none;
  touch-action: pan-y;
}

.gs-compare__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-compare__clip {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
}

/* a imagem "antes" não pode encolher junto com o container recortado */
.gs-compare__clip .gs-compare__img {
  width: var(--gs-compare-w, 100%);
  max-width: none;
}

.gs-compare__tag {
  position: absolute;
  inset-block-start: var(--space-4);
  z-index: 2;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gs-compare__tag--antes {
  inset-inline-start: var(--space-4);
  background: rgba(255, 255, 255, .88);
  color: var(--gs-primary);
}
.gs-compare__tag--depois {
  inset-inline-end: var(--space-4);
  background: var(--gs-overlay-brand-deep);
  color: var(--gs-text-inverse);
}

.gs-compare__handle {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  z-index: 3;
  width: 2px;
  margin-inline-start: -1px;
  background: #fff;
  box-shadow: 0 0 12px rgba(11, 45, 84, .45);
  pointer-events: none;
}

.gs-compare__handle span {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
}
.gs-compare__handle span::before,
.gs-compare__handle span::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
}
.gs-compare__handle span::before {
  inset-inline-start: 11px;
  border-inline-end: 7px solid var(--gs-primary);
}
.gs-compare__handle span::after {
  inset-inline-end: 11px;
  border-inline-start: 7px solid var(--gs-primary);
}

/* o range é a superfície de interação: invisível, mas focável e arrastável */
.gs-compare__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.gs-compare__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 46px;
  height: 100%;
}
.gs-compare__range::-moz-range-thumb {
  width: 46px;
  height: 100%;
  border: 0;
  background: transparent;
}
.gs-compare__range:focus-visible { opacity: 1; outline-offset: -4px; }

.gs-caso__label {
  margin-top: var(--space-4);
  font-family: var(--font-accent);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gs-primary);
}


/* ══ DEPOIMENTOS ═══════════════════════════════════════════════════
   A peça aqui não é um card: é um fotograma.

   O que havia antes era uma caixa — cantos arredondados, sombra
   projetada e, pior, um caixilho navy de 6px em volta de cada foto.
   Esse caixilho não era decisão de ninguém: `<button>` vem com
   `padding: 1px 6px` do próprio navegador, e o reset zera `background`
   e `border` mas não o padding. Como o card tem fundo navy e proporção
   fixa, o padding aparecia como moldura grossa em toda foto. É por isso
   que o `padding: 0` abaixo é a linha que resolve, não um detalhe.

   No lugar da caixa, o fotograma encosta no fundo da página: sem
   sombra, canto quase reto e um fio de 1px que só existe porque os
   stills são claros e, sem ele, sangrariam no branco da seção. O peso
   passa a vir da gradação da imagem — scrim + vinheta —, que é a mesma
   gramática do hero e do CTA do Invisalign.

   O scroll-snap do slide vem do carrossel compartilhado (layout.css). */

.gs-depo__card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;                    /* ← ver o parágrafo do caixilho, acima */
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--gs-primary-900);
  /* 4/5 e não 3/4: um retângulo mais baixo pesa menos na página e, como
     o corte é ancorado no topo, o que sai a mais é a faixa de baixo do
     vídeo — justamente onde ficam as legendas queimadas. */
  aspect-ratio: 4 / 5;
  text-align: start;
  /* Fio por dentro, não sombra por fora: delimita o fotograma sem
     descolar a peça da página, que era o que dava o ar de card. */
  box-shadow: inset 0 0 0 1px rgba(11, 45, 84, .12);
}

/* O <picture> tem altura automática, então `height: 100%` na <img> filha
   não tinha contra o que resolver e a imagem estourava o card. Dando altura
   ao wrapper, o object-fit/object-position abaixo passa a valer. */
.gs-depo__card picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gs-depo__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Os vídeos são 9:16 e o fotograma é 4:5, então sobra ~30% de altura
     para cortar. Colado no topo (`center top`) sobrava teto vazio e o
     rosto caía para o meio de baixo do quadro — o assunto ficava solto.
     Em 22% o corte tira uma lasca de cima e o grosso de baixo: o rosto
     sobe para o terço superior, com respiro por cima, e a faixa
     inferior do vídeo original — onde ficam as legendas queimadas, que
     antes apareciam por trás do nome — continua fora do quadro.
     Vale para os quatro depoimentos; se entrar um vídeo com
     enquadramento muito diferente, é este número que se ajusta. */
  object-position: center 22%;
  transition: transform var(--dur-slow) var(--ease-out-expo),
              opacity var(--dur-base) var(--ease-smooth);
}
.gs-depo__card:hover img { transform: scale(1.04); }

/* Duas camadas, como no hero e no CTA: a de baixo assenta o nome, a
   vinheta fecha o quadro e é o que iguala quatro stills gravados em
   salas, luzes e câmeras diferentes — sem ela, um fundo azul e um fundo
   branco ao lado brigam. No hover a gradação alivia: o fotograma
   "acende" em vez de saltar da página. */
.gs-depo__scrim {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom,
      rgba(5, 20, 38, 0) 44%,
      rgba(5, 20, 38, .34) 68%,
      rgba(5, 20, 38, .88) 100%),
    radial-gradient(122% 80% at 50% 36%,
      rgba(5, 20, 38, 0) 42%,
      rgba(5, 20, 38, .50) 100%);
  transition: opacity var(--dur-base) var(--ease-smooth);
}
.gs-depo__card:hover .gs-depo__scrim { opacity: .8; }

/* Menor e de traço mais fino que antes: um disco de 68px com borda a
   55% de branco competia com o rosto do paciente, que é o assunto. */
.gs-depo__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .40);
  border-radius: var(--radius-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  transition: background-color var(--dur-base) var(--ease-smooth),
              border-color var(--dur-base) var(--ease-smooth),
              color var(--dur-base) var(--ease-smooth),
              transform var(--dur-base) var(--ease-bounce);
}
.gs-depo__play svg { width: 18px; height: 18px; margin-inline-start: 2px; }
.gs-depo__card:hover .gs-depo__play {
  background: var(--gs-secondary);
  border-color: var(--gs-secondary);
  color: var(--gs-primary);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Legenda de fotograma: recuada do canto, nome em serifa e a função em
   caixa-alta miúda. A ordem visual é imagem → nome → função; por isso a
   função vem em areia e no menor corpo do sistema. */
.gs-depo__meta {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5);
  color: var(--gs-text-inverse);
}

.gs-depo__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.gs-depo__role {
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gs-secondary);
}


/* ══ CARROSSEL ═════════════════════════════════════════════════════ */

.gs-carousel__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gs-border-strong);
  border-radius: var(--radius-full);
  color: var(--gs-primary);
  transition: background-color var(--dur-fast) var(--ease-smooth),
              border-color var(--dur-fast) var(--ease-smooth),
              color var(--dur-fast) var(--ease-smooth);
}
.gs-carousel__btn svg { width: 20px; height: 20px; }
.gs-carousel__btn:hover { background: var(--gs-primary); border-color: var(--gs-primary); color: var(--gs-text-inverse); }
.gs-carousel__btn:disabled { opacity: .3; cursor: not-allowed; }
.gs-carousel__btn:disabled:hover { background: none; color: var(--gs-primary); border-color: var(--gs-border-strong); }
[data-carousel-prev] svg { transform: rotate(180deg); }

/* sem gap: o espaçamento entre os pontos agora vem do padding deles */
.gs-carousel__dots { display: flex; align-items: center; }

/* O alvo de toque precisa dos 48px do briefing, mas o ponto tem que
   continuar com 8px. Então quem é grande é o <button> (transparente) e
   quem é visível é o ::before, centrado dentro dele. O caminho mais
   curto — padding + `background-clip: content-box` — não serve: o raio
   da borda é reduzido pelo padding antes do recorte, o que quadrava os
   pontos inativos, e o `background` de atalho na regra `.is-active`
   ainda zerava o `background-clip`, estourando o ponto ativo. */
.gs-carousel__dot {
  position: relative;
  width: 32px;
  height: 48px;
  padding: 0;
  background: none;
}

.gs-carousel__dot::before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--gs-border-strong);
  transition: width var(--dur-base) var(--ease-out-expo),
              background-color var(--dur-fast) var(--ease-smooth);
}

.gs-carousel__dot.is-active::before { width: 26px; background: var(--gs-primary); }

/* ── controles sobre fundo escuro (equipe) ─────────────────────────
   O padrão é navy sobre branco e sumiria no fundo da seção Equipe.
   Aqui a borda vira areia translúcida e o hover inverte para areia
   sólida com o ícone em navy — o mesmo gesto do resto do site. */
.gs-equipe .gs-carousel__btn {
  border-color: rgba(208, 201, 193, .45);
  color: var(--gs-text-inverse);
}
.gs-equipe .gs-carousel__btn:hover {
  background: var(--gs-secondary);
  border-color: var(--gs-secondary);
  color: var(--gs-primary);
}
.gs-equipe .gs-carousel__btn:disabled:hover {
  background: none;
  color: var(--gs-text-inverse);
  border-color: rgba(208, 201, 193, .45);
}

.gs-equipe .gs-carousel__dot::before { background: rgba(208, 201, 193, .45); }
.gs-equipe .gs-carousel__dot.is-active::before { background: var(--gs-secondary); }


/* ══ FORMULÁRIO ════════════════════════════════════════════════════ */

.gs-form-wrap {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--gs-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.gs-form { display: grid; gap: var(--space-5); }

.gs-field-row { display: grid; gap: var(--space-5); }

@media (min-width: 560px) {
  .gs-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gs-field { display: grid; gap: var(--space-2); }

.gs-field__label {
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gs-primary);
}

.gs-field__opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gs-text-muted);
}

.gs-field__input {
  width: 100%;
  min-height: 52px;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--gs-text);
  background: var(--gs-bg);
  border: 1px solid var(--gs-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-smooth),
              box-shadow var(--dur-fast) var(--ease-smooth);
}

.gs-field__input::placeholder { color: var(--gs-primary-300); }

.gs-field__input:focus {
  outline: none;
  border-color: var(--gs-primary);
  box-shadow: 0 0 0 3px rgba(11, 45, 84, .12);
}

.gs-field__input--area {
  min-height: 108px;
  padding-block: var(--space-4);
  resize: vertical;
}

.gs-field__select { position: relative; }

.gs-field__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--space-10);
  cursor: pointer;
}

.gs-field__select select:invalid { color: var(--gs-primary-300); }

.gs-field__select svg {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-4);
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--gs-primary-400);
}

.gs-field__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: #a4262c; /* vermelho de sistema: erro não é cor de marca */
}

.gs-field.has-error .gs-field__input {
  border-color: #a4262c;
  box-shadow: 0 0 0 3px rgba(164, 38, 44, .1);
}

.gs-field.is-valid .gs-field__input { border-color: var(--gs-primary-400); }

.gs-form__nota {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--gs-text-muted);
  text-align: center;
}

.gs-form__status {
  padding: var(--space-4);
  font-size: var(--text-sm);
  text-align: center;
  border-radius: var(--radius-md);
  background: var(--gs-secondary-100);
  color: var(--gs-primary);
}

.gs-btn[data-form-submit][aria-busy="true"] { opacity: .7; pointer-events: none; }


/* ══ FOOTER ════════════════════════════════════════════════════════ */

.gs-footer__logo { filter: brightness(0) invert(1); }

.gs-footer__tagline {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--gs-secondary);
}

.gs-footer__title {
  margin-bottom: var(--space-5);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gs-text-inverse);
}

.gs-footer a { transition: color var(--dur-fast) var(--ease-smooth); }
.gs-footer a:hover { color: var(--gs-secondary); }

.gs-footer__unidades li { display: grid; gap: var(--space-1); }

.gs-footer__uf {
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gs-primary-400);
}

.gs-footer__credit strong {
  font-weight: 600;
  color: var(--gs-secondary);
}


/* ── redes sociais ─────────────────────────────────────────────────
   Botão quadrado de 48px: é o alvo de toque mínimo do projeto e casa
   com o quadrado arredondado dos dois ícones. O hover inverte para
   areia sólida com o traço em navy — o mesmo gesto das setas do
   carrossel da Equipe, para não inventar um comportamento novo.

   O seletor carrega `.gs-footer` porque a regra genérica
   `.gs-footer a:hover` (areia) é mais específica que `.gs-social__link`
   sozinho e apagaria a inversão. */
.gs-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.gs-footer .gs-social__link {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(208, 201, 193, .3);
  border-radius: var(--radius-md);
  color: var(--gs-text-inverse);
  transition:
    background-color var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth),
    color var(--dur-fast) var(--ease-smooth);
}

.gs-social__link svg { width: 20px; height: 20px; }

.gs-footer .gs-social__link:hover {
  background: var(--gs-secondary);
  border-color: var(--gs-secondary);
  color: var(--gs-primary);
}


/* ══ FAB WHATSAPP ══════════════════════════════════════════════════ */

.gs-fab {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-fab);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-bounce);
}

.gs-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }

.gs-fab__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  background: var(--gs-whatsapp);
  color: #fff;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 28px rgba(37, 211, 102, .42);
  transition: background-color var(--dur-fast) var(--ease-smooth),
              transform var(--dur-fast) var(--ease-bounce);
}
.gs-fab__btn:hover { background: var(--gs-whatsapp-dark); transform: scale(1.06); }

.gs-fab__icon { width: 30px; height: 30px; grid-area: 1 / 1; transition: opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth); }
.gs-fab__icon--close { width: 24px; height: 24px; opacity: 0; transform: rotate(-90deg); }
.gs-fab__btn[aria-expanded="true"] .gs-fab__icon--wpp { opacity: 0; transform: rotate(90deg); }
.gs-fab__btn[aria-expanded="true"] .gs-fab__icon--close { opacity: 1; transform: rotate(0); }

/* pulso: só quando o menu está fechado */
.gs-fab__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gs-whatsapp);
  animation: gs-pulse 2.6s var(--ease-out-expo) infinite;
}
.gs-fab__btn[aria-expanded="true"]::before { animation: none; opacity: 0; }

.gs-fab__tooltip {
  order: -1;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-accent);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  background: var(--gs-primary);
  color: var(--gs-text-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-smooth),
              transform var(--dur-base) var(--ease-out-expo);
}
.gs-fab__tooltip.is-visible { opacity: 1; transform: none; }

.gs-fab__menu {
  width: min(84vw, 300px);
  padding: var(--space-4);
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  animation: gs-pop-in var(--dur-base) var(--ease-out-expo) both;
}
.gs-fab__menu[hidden] { display: none; }

.gs-fab__menu-title {
  margin-bottom: var(--space-3);
  font-family: var(--font-accent);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gs-text-muted);
}

.gs-fab__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-smooth);
}
.gs-fab__item:hover { background: var(--gs-surface-alt); }
.gs-fab__item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gs-whatsapp); }
.gs-fab__item span { display: grid; font-size: var(--text-xs); color: var(--gs-text-muted); }
.gs-fab__item strong { font-size: var(--text-sm); font-weight: 600; color: var(--gs-primary); }


/* ══ MODAL DE VÍDEO ════════════════════════════════════════════════ */

.gs-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.gs-modal[hidden] { display: none; }

.gs-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 20, 38, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: gs-fade-in var(--dur-fast) var(--ease-smooth) both;
}

/* Os depoimentos foram gravados em retrato (9:16). Com largura fixa, a
   `max-height` deixava tarjas pretas dos dois lados. Deixando largura e
   altura em `auto`, o navegador reescala o vídeo pela altura mantendo a
   proporção, e a caixa (`fit-content`) encolhe junto — o botão de fechar
   acompanha a borda real do vídeo, seja ele retrato ou paisagem. */
.gs-modal__box {
  position: relative;
  width: fit-content;
  max-width: min(100%, 460px);
  animation: gs-pop-in var(--dur-base) var(--ease-out-expo) both;
}

.gs-modal__video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 78dvh;
  border-radius: var(--radius-md);
  background: #000;
}

.gs-modal__close {
  position: absolute;
  inset-block-end: calc(100% + var(--space-3));
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--gs-text-inverse);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-full);
  transition: background-color var(--dur-fast) var(--ease-smooth);
}
.gs-modal__close:hover { background: rgba(255, 255, 255, .14); }
.gs-modal__close svg { width: 22px; height: 22px; }

body.has-modal-open { overflow: hidden; }


/* ══ ALVOS DE TOQUE ════════════════════════════════════════════════
   O briefing pede 48×48px de área clicável. Botões e CTAs já nascem
   assim; o que faltava eram os links de texto em lista (rodapé, ficha
   da unidade), com ~17px de altura de linha. A regra vale por
   `pointer: coarse` e não por largura de tela: quem precisa de alvo
   grande é o dedo, não a viewport — assim um tablet em modo paisagem
   também é atendido e o desktop no mouse fica intocado. Só a área
   cresce; o texto mantém o tamanho. */
@media (pointer: coarse) {
  .gs-footer__col ul a,
  .gs-footer__unidades a,
  .gs-unidade__info dd a,
  .gs-header__brand {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }

  /* o logo é o alvo, mas não deve empurrar a altura do cabeçalho */
  .gs-header__brand { min-height: 44px; }
}