/* ==========================================================================
   GM Web — ajustes mínimos sobre o tema (index-8-dark).
   Regra: nada aqui redesenha o tema. São só os componentes que o index-8-dark
   não tinha (planos, marquee, CTA do hero) e correções de contraste no dark.
   Todas as cores vêm das variáveis do master.css.
   ========================================================================== */

/* ---------- utilitários ---------- */

.gm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* honeypot: escondido de gente, visível para bot */
.gm-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* trava de scroll horizontal — o tema tem blocos full-bleed */
.gm-page {
  overflow-x: hidden;
}

/* Rede de segurança: nenhuma imagem estoura o container que a contém.
   O tema não define isso e é a origem do logo passando por cima do menu. */
.gm-page img {
  max-width: 100%;
}

/* ---------- botões ---------- */

.gm-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.gm-btn--primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--black-2);
}

.gm-btn--primary:hover {
  background-color: transparent;
  color: var(--primary);
}

.gm-btn--ghost {
  border-color: var(--gray-12);
  color: var(--white);
}

.gm-btn--ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- header ----------
   O .header__inner-3 do tema é um grid de colunas fixas (150px auto 150px) e o
   tema nunca dimensionou o <img> do logo. Com um PNG de 420px de largura o logo
   invadia a coluna do menu. Travando pela altura, a largura sai proporcional. */

.header__inner-3 {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(24px, 3vw, 64px);
}

.header__logo-2 img {
  width: auto;
  height: clamp(52px, 4.1vw, 68px);
}

.header__nav-2 {
  text-align: center;
}

/* O tema dá `padding: 0 40px` em cada item e conta com 3 ou 4 itens de menu. Com os
   5 do site (e "Como funciona" no meio), a linha passava de 850px e o "Contato"
   caía para uma segunda linha em 1440px. Flex sem quebra + respiro proporcional. */
.main-menu-3 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

.main-menu-3 > li {
  padding: 0 clamp(10px, 1.5vw, 32px);
  white-space: nowrap;
}

.header__nav-icon-3 {
  gap: 18px;
}

.header__nav-icon-3 img {
  margin-top: 0;
}

.offcanvas__logo img {
  width: auto;
  height: 34px;
}

/* Entre 992 e 1399 o tema zera o padding lateral dos itens (padding: 25px 0),
   então os 5 itens do menu encostam um no outro. */
@media only screen and (min-width: 992px) and (max-width: 1399px) {
  .main-menu-3 > li > a {
    font-size: 15px;
    padding: 20px 0;
  }
}

/* Abaixo de 992 não há largura para 5 itens + logo + CTA + hambúrguer.
   O menu completo continua acessível pelo offcanvas. */
@media only screen and (max-width: 991px) {
  .header__nav-2 {
    display: none;
  }
  .header__logo-2 img {
    height: 42px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__inner-3 {
    display: flex;
    justify-content: space-between;
  }

  .header__logo-2 img {
    height: 48px;
  }
}

.gm-header-cta {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 100px;
  background-color: var(--primary);
  color: var(--black-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.gm-header-cta:hover {
  background-color: var(--white);
  color: var(--black-2);
}

@media only screen and (max-width: 767px) {
  .gm-header-cta {
    display: none;
  }
}

/* ---------- hero ---------- */

.gm-hero-label {
  color: var(--gray-2);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.gm-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
  margin-left: 300px;
}

.hero__area-4 {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(64px, 7vw, 120px);
}

@media only screen and (max-width: 767px) {
  .gm-hero-cta {
    margin-left: 0;
  }

  .gm-hero-cta .gm-btn {
    flex: 1 1 100%;
  }
}

/* ---------- marquee ----------
   Duas cópias idênticas do texto dentro de um track flex; o translateX(-50%)
   equivale exatamente à largura de uma cópia, então o loop é contínuo. */

.gm-marquee {
  overflow: hidden;
  padding: clamp(20px, 3vw, 40px) 0;
  border-top: 1px solid var(--gray-12);
  border-bottom: 1px solid var(--gray-12);
}

.gm-marquee__track {
  display: flex;
  width: -webkit-max-content;
  width: max-content;
  animation: gm-marquee-scroll 45s linear infinite;
}

.gm-marquee:hover .gm-marquee__track {
  animation-play-state: paused;
}

.gm-marquee__item {
  flex: 0 0 auto;
  padding-right: clamp(20px, 4vw, 60px);
  color: var(--white);
  font-size: clamp(28px, 7vw, 150px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.gm-marquee__accent {
  font-family: "newYork", serif;
}

/* Variante do rodapé: sem bordas nem respiro extra. */
.gm-marquee--plain {
  padding: 0;
  border: 0;
}

@keyframes gm-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* O "clique aqui" é um círculo absoluto no centro do texto. Acima de 1365px o
   tema só o mostra no hover; abaixo ele fica fixo e tapa o texto. Aqui ele sai
   do fluxo absoluto e vira um botão abaixo da faixa. */
@media only screen and (max-width: 1365px) {
  .contact_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .contact_wrap .gm-marquee {
    width: 100%;
  }
  /* .dark tem precedência maior no master.css, então repete-se aqui. */
  .contact_wrap .link,
  .dark .contact_wrap .link {
    position: static;
    transform: none;
    width: auto;
    height: auto;
    padding: 14px 32px;
    border-radius: 100px;
    background-color: var(--primary);
    color: var(--black-2);
  }
}

/* Sem animação: vira uma faixa rolável, nunca um texto cortado. */
@media (prefers-reduced-motion: reduce) {
  .gm-marquee {
    overflow-x: auto;
  }
  .gm-marquee__track {
    animation: none;
  }
  .gm-marquee__item + .gm-marquee__item {
    display: none;
  }
}

/* ---------- linhas de serviço / processo (awards__items reaproveitado) ---------- */

/* A 3ª coluna do componente original é uma imagem de 100px. Aqui ela recebe
   texto, então a proporção precisa de mais espaço. */
.awards__items.gm-row {
  grid-template-columns: 0.6fr 2fr 3fr 0.4fr;
  align-items: start;
}

.gm-row__text {
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.gm-row__link {
  display: block;
  text-align: right;
  color: var(--gray-2);
  transition: color 0.3s ease;
}

.gm-row__link:hover {
  color: var(--primary);
}

/* Até 991 as 4 colunas não cabem: o texto espremia contra o título.
   Vira número + conteúdo empilhado, e a seta (que só duplica o CTA) some. */
@media only screen and (max-width: 991px) {
  .awards__items.gm-row {
    grid-template-columns: 56px 1fr;
    grid-gap: 8px 15px;
  }
  .awards__items.gm-row .title {
    grid-column: 2;
  }
  .awards__items.gm-row .gm-row__text {
    grid-column: 2;
    font-size: 15px;
  }
  .awards__items.gm-row .gm-row__link {
    display: none;
  }
}

/* ---------- diferenciais ---------- */

.gm-num {
  display: block;
  color: var(--primary);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 16px;
}

/* ---------- planos ---------- */

/* Os 3 planos ficam em um bloco centralizado, sem uma quarta coluna vazia
   empurrando toda a seção para a esquerda. */
.gm-planos .price__table {
  align-items: stretch;
  width: 100%;
  max-width: 1280px;
  margin: 80px auto 0;
  padding-top: 60px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 24px;
}

@media only screen and (max-width: 1199px) {
  .gm-planos .price__table {
    grid-template-columns: repeat(2, 1fr);
  }

  .gm-planos .gm-plano:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
}

@media only screen and (max-width: 767px) {
  .gm-planos .price__table {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    padding-top: 40px;
  }

  .gm-planos .gm-plano:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
}

.gm-plano > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
}

/* Destaque por CONTRASTE de fundo — nunca por borda colorida. */
.gm-plano--destaque > div {
  background-color: var(--gray-6);
  border-color: var(--gray-6);
}

.gm-plano__selo {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 14px;
  margin-bottom: 16px;
  border-radius: 100px;
  background-color: var(--primary);
  color: var(--black-2);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gm-plano__tagline {
  display: block;
  color: var(--gray-2);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.gm-plano__nome {
  margin-bottom: 16px;
}

.gm-plano__preco {
  color: var(--white);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 4px;
}

.gm-plano__preco small {
  display: block;
  color: var(--gray-2);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gm-plano__parcela {
  color: var(--gray-2);
  font-size: 15px;
  margin-bottom: 8px;
}

.gm-plano__prazo {
  color: var(--primary);
  font-size: 15px;
  margin-bottom: 24px;
}

.gm-plano__inclui {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.gm-plano__inclui li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--gray-2);
  font-size: 15px;
  line-height: 1.5;
}

.gm-plano__inclui li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary);
}

.gm-plano__ideal {
  color: var(--gray-8);
  font-size: 14px;
  font-style: italic;
  margin-bottom: 24px;
}

.gm-plano__cta {
  margin-top: auto;
}

.gm-planos__micro {
  color: var(--gray-8);
  font-size: 13px;
  margin-top: 24px;
}

.gm-mensalidade {
  margin-top: 60px;
  padding: 32px;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
}

.gm-mensalidade__titulo {
  color: var(--white);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
}

.gm-mensalidade__inclui {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gm-mensalidade__inclui li {
  position: relative;
  padding-left: 22px;
  color: var(--gray-2);
  font-size: 15px;
}

.gm-mensalidade__inclui li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary);
}

.gm-planos__condicoes {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.gm-planos__condicoes li {
  color: var(--gray-8);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 6px;
}

/* No mobile o card em destaque vem primeiro, sem scale(). */
@media only screen and (max-width: 991px) {
  .gm-plano--destaque {
    order: -1;
  }
  .gm-plano--destaque > div,
  .gm-plano > div {
    transform: none;
  }
}

@media only screen and (max-width: 767px) {
  .gm-plano > div,
  .gm-mensalidade {
    padding: 24px;
  }
  .gm-plano__preco {
    font-size: 34px;
  }
  .gm-mensalidade {
    margin-top: 40px;
  }
  .gm-mensalidade__inclui {
    gap: 10px 20px;
  }
}

/* ---------- crescimento (planos mensais, seção "depois do site") ----------
   Mesmo grid de 3 colunas e o mesmo .gm-plano de includes/planos-cards.php,
   só reescrito com o seletor .gm-crescimento porque cada seção da Home tem a
   sua própria classe (.gm-planos, .gm-faq, .gm-depo...) e o grid é reaproveitado
   por herança de componente, não de seção. */

.gm-crescimento .price__table {
  align-items: stretch;
  width: 100%;
  max-width: 1280px;
  margin: 80px auto 0;
  padding-top: 60px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 24px;
}

@media only screen and (max-width: 1199px) {
  .gm-crescimento .price__table {
    grid-template-columns: repeat(2, 1fr);
  }

  .gm-crescimento .gm-plano:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
}

@media only screen and (max-width: 767px) {
  .gm-crescimento .price__table {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    padding-top: 40px;
  }

  .gm-crescimento .gm-plano:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
}

.gm-plano__periodo {
  color: var(--gray-2);
  font-size: 16px;
  font-weight: 400;
}

.gm-plano__preco-nota {
  color: var(--gray-8);
  font-size: 13px;
  margin-bottom: 20px;
}

.gm-faixa-basico {
  max-width: 1280px;
  margin: 48px auto 0;
  padding: 20px 32px;
  border-radius: 16px;
  background-color: var(--gray-6);
}

.gm-faixa-basico p {
  margin: 0;
  color: var(--gray-2);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

.gm-faixa-basico strong {
  color: var(--white);
}

.gm-faixa-basico a {
  color: var(--primary);
  text-decoration: underline;
  margin-left: 6px;
}

.gm-faixa-basico a:hover {
  color: var(--white);
}

.gm-crescimento__brinde {
  max-width: 1280px;
  margin: 40px auto 0;
  padding: 48px;
  border-radius: 16px;
  background-color: var(--black-2);
  border: 1px solid var(--gray-12);
}

.gm-crescimento__brinde h3 {
  color: var(--white);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  margin-bottom: 16px;
}

.gm-crescimento__brinde p {
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.65;
  max-width: 72ch;
}

.gm-planos__ponte {
  max-width: 640px;
  margin: 48px auto 0;
  text-align: center;
}

.gm-planos__ponte p {
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 16px;
}

@media only screen and (max-width: 767px) {
  .gm-faixa-basico,
  .gm-crescimento__brinde {
    padding: 24px;
  }
}

/* ---------- formulário: o select não existe no tema ---------- */

.contact__form select {
  width: 100%;
  padding: 16px 0;
  border: none;
  border-bottom: 1px solid var(--gray-12);
  background-color: transparent;
  color: var(--gray-2);
  font-size: 16px;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 20px;
}

.contact__form select:focus {
  border-bottom-color: var(--primary);
}

.contact__form select option {
  background-color: var(--black-2);
  color: var(--white);
}

/* ---------- faq ----------
   O "+" é um ::after posicionado à direita e o tema não reserva espaço para ele:
   nas perguntas longas o texto encostava no ícone. */

.faq__list-6 .accordion-button {
  padding-right: 44px;
}

@media only screen and (max-width: 767px) {
  .faq__list-6 .accordion-button {
    font-size: 17px;
    line-height: 1.35;
  }
}

/* ---------- depoimentos ---------- */

/* 2 colunas fixas: são 4 depoimentos, então 2x2 fecha sem card órfão.
   Com auto-fit dava 3+1 nas telas de 1366. */
.gm-depo__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding-top: 60px;
  padding-bottom: 130px;   /* o marcador da seção seguinte encostava no último card */
}

.gm-depo__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 32px;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
}

.gm-depo__texto {
  margin: 0;
  flex: 1 1 auto;
}

.gm-depo__texto p {
  position: relative;
  margin: 0;
  padding-top: 28px;
  color: var(--gray-2);
  font-size: 17px;
  line-height: 1.65;
}

.gm-depo__texto p::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primary);
  font-size: 48px;
  line-height: 0.8;
}

.gm-depo__autor {
  display: flex;
  align-items: center;
  gap: 14px;
}

.gm-depo__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gray-12);
  color: var(--primary);
}

.gm-depo__avatar svg {
  width: 24px;
  height: 24px;
}

.gm-depo__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gm-depo__nome {
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.gm-depo__cargo {
  color: var(--gray-8);
  font-size: 14px;
  line-height: 1.4;
}

@media only screen and (max-width: 767px) {
  .gm-depo__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 40px;
    padding-bottom: 80px;
  }
  .gm-depo__card {
    padding: 24px;
    gap: 20px;
  }
  .gm-depo__texto p {
    font-size: 16px;
  }
}

/* ---------- footer ---------- */

.gm-whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 82px;
  z-index: 9991;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--black-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.gm-whatsapp-float i {
  font-size: 25px;
}

.gm-whatsapp-float:hover {
  transform: translateY(-3px);
  background-color: var(--white);
  color: var(--black-2);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .gm-whatsapp-float {
    bottom: 145px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .gm-whatsapp-float {
    right: 10px;
    bottom: 125px;
  }
}

@media only screen and (max-width: 767px) {
  .gm-whatsapp-float {
    right: 5px;
    bottom: 115px;
  }
}

.gm-footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.gm-footer-logo {
  max-width: 120px;
  height: auto;
}

.gm-footer-legal a {
  color: var(--gray-2);
  margin-right: 20px;
}

.gm-footer-legal a:hover {
  color: var(--primary);
}

/* Dados cadastrais e canais no rodapé */
.gm-footer-contact li {
  padding-bottom: 14px;
}

.gm-footer-contact .gm-footer-contact__label,
.gm-footer-contact .gm-footer-contact__value,
.gm-footer-contact address,
.gm-footer-contact a {
  display: inline;
  font-size: clamp(16px, 1.45vw, 24px);
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-transform: none;
}

.gm-footer-contact .gm-footer-contact__label {
  color: var(--gray-2);
  font-weight: 600;
}

.gm-footer-contact .gm-footer-contact__value,
.gm-footer-contact address,
.gm-footer-contact a {
  color: var(--white);
}

.gm-footer-contact address {
  margin: 0;
  font-style: normal;
}

.gm-footer-contact a:hover {
  color: var(--primary);
}

/* Redes sociais do rodapé (coluna de contato) */
.gm-footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}

.gm-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--gray-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.gm-footer-social a:hover {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

/* ==========================================================================
   PÁGINAS INTERNAS
   /Servicos · /Como-funciona · /Planos · /Duvidas · /Contato · legais · 404
   Mesma regra do topo do arquivo: nada aqui redesenha o tema. São os componentes
   que o index-8-dark não tinha, escritos com as variáveis do master.css.
   ========================================================================== */

/* ---------- correções que valem para o site inteiro ---------- */

/* Atalho de teclado: fica fora da tela até receber foco. */
.gm-skip {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  background-color: var(--primary);
  color: var(--black-2);
  font-size: 15px;
  transition: top 0.2s ease;
}

.gm-skip:focus {
  top: 0;
}

/* O tema só colore .about-sub-right dentro de .about__area-8, .awards__area-8,
   .work__area-8 e .client__area-8. Nas seções próprias (.gm-planos, .gm-faq,
   .gm-depo, .gm-contato e as internas) o h6 caía no preto padrão do navegador,
   ou seja, invisível sobre o fundo #121212. */
.dark .about-sub-right {
  color: var(--white);
  font-weight: 400;
  padding-bottom: 10px;
  /* O tema capitaliza cada palavra, o que em português vira "O Que Fazemos". */
  text-transform: none;
}

/* .service__item-2 desenha uma régua vertical em left:-90px, calculada para o
   grid de gap 120px do tema. Nos cards de plano e nos .gm-card o gap é outro, e
   a régua cairia no meio do card vizinho. */
.gm-plano::before,
.gm-card::before {
  display: none;
}

/* ---------- hero das internas ---------- */

.gm-hero-int {
  padding-top: 180px;
  padding-bottom: clamp(40px, 6vw, 80px);
}

@media only screen and (max-width: 991px) {
  .gm-hero-int {
    padding-top: 140px;
  }
}

@media only screen and (max-width: 767px) {
  .gm-hero-int {
    padding-top: 120px;
  }
}

.gm-hero-int__title {
  color: var(--white);
  font-size: clamp(38px, 7.5vw, 110px);
  font-weight: 500;
  line-height: 1.02;
  text-transform: uppercase;
  margin-bottom: 24px;
  max-width: 16ch;
}

.gm-hero-int__title span {
  color: var(--primary);
}

.gm-hero-int__text {
  color: var(--gray-2);
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.65;
  max-width: 62ch;
}

/* O .gm-hero-cta da Home é recuado para acompanhar o título do index-8-dark; nas
   internas o bloco é alinhado à esquerda, como o resto da página. */
.gm-hero-cta--int {
  margin-left: 0;
  margin-top: 32px;
}

/* ---------- caminho de navegação ---------- */

.gm-breadcrumb {
  margin-bottom: 28px;
}

.gm-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gm-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-8);
  font-size: 14px;
}

.gm-breadcrumb li + li::before {
  content: "/";
  color: var(--gray-12);
}

.gm-breadcrumb a {
  color: var(--gray-2);
}

.gm-breadcrumb a:hover {
  color: var(--primary);
}

.gm-breadcrumb [aria-current="page"] {
  color: var(--white);
}

/* ---------- ritmo das seções ---------- */

.gm-secao {
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

.gm-intro {
  max-width: 720px;
  margin: 48px 0 8px;
}

.gm-intro__titulo {
  color: var(--white);
  font-size: clamp(30px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.gm-intro__texto {
  color: var(--gray-2);
  font-size: 17px;
  line-height: 1.65;
}

.gm-nota {
  color: var(--gray-8);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 28px;
}

.gm-nota a {
  color: var(--gray-2);
  text-decoration: underline;
}

.gm-nota a:hover {
  color: var(--primary);
}

.gm-secao__acao {
  margin-top: 40px;
}

.gm-link-seta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-size: 16px;
  line-height: 1.3;
  border-bottom: 1px solid var(--gray-12);
  padding-bottom: 6px;
  transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}

.gm-link-seta:hover {
  color: var(--primary);
  border-color: var(--primary);
  gap: 16px;
}

.gm-link-seta i {
  font-size: 13px;
}

/* ---------- grade de cards ---------- */

.gm-cards {
  display: grid;
  gap: 24px;
  margin-top: 56px;
}

.gm-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gm-cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media only screen and (max-width: 1199px) {
  .gm-cards--3,
  .gm-cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 767px) {
  .gm-cards--3,
  .gm-cards--4 {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 36px;
  }
}

.gm-card {
  position: relative;
  margin: 0;
}

.gm-card > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 32px;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.gm-card > div:hover {
  border-color: var(--gray-6);
  background-color: var(--gray-6);
}

.gm-card__titulo {
  color: var(--white);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 12px;
}

.gm-card__texto {
  color: var(--gray-2);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 0;
}

.gm-card .gm-link-seta {
  margin-top: 20px;
  font-size: 15px;
}

@media only screen and (max-width: 767px) {
  .gm-card > div {
    padding: 24px;
  }
}

/* ---------- lista com marcador de conferido ---------- */

.gm-lista-check {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gm-lista-check li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.6;
}

.gm-lista-check li strong {
  color: var(--white);
  font-weight: 500;
}

.gm-lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(-45deg);
}

/* ---------- /Servicos: bloco de serviço ---------- */

.gm-servicos {
  margin-top: 56px;
  border-top: 1px solid var(--gray-12);
}

.gm-servico {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(240px, 0.9fr);
  gap: 40px;
  padding: 56px 0;
  border-bottom: 1px solid var(--gray-12);
}

.gm-servico__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.gm-servico__num {
  color: var(--primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.gm-servico__titulo {
  color: var(--white);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}

.gm-servico__detalhe {
  color: var(--gray-2);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.gm-servico__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
  align-self: start;
}

.gm-servico__preco {
  color: var(--white);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.gm-servico__ideal {
  color: var(--gray-8);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.gm-servico__ideal span {
  display: block;
  color: var(--gray-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  margin-bottom: 4px;
}

.gm-servico__aside .gm-btn {
  width: 100%;
}

@media only screen and (max-width: 1199px) {
  .gm-servico {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    gap: 32px;
  }
  .gm-servico__head {
    grid-column: 1 / -1;
  }
}

@media only screen and (max-width: 767px) {
  .gm-servico {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0;
  }
  .gm-servico__detalhe {
    font-size: 16px;
  }
  .gm-servico__aside {
    padding: 24px;
  }
}

/* ---------- /Como-funciona: etapas ---------- */

.gm-etapas {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  counter-reset: none;
}

.gm-etapa {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 32px;
  padding: 44px 0;
  border-top: 1px solid var(--gray-12);
}

.gm-etapa:last-child {
  border-bottom: 1px solid var(--gray-12);
}

.gm-etapa__num {
  color: var(--gray-12);
  font-size: clamp(44px, 5vw, 72px);
  font-weight: 500;
  line-height: 0.9;
}

.gm-etapa__titulo {
  color: var(--white);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.gm-etapa__texto {
  color: var(--gray-2);
  font-size: 17px;
  line-height: 1.7;
  max-width: 68ch;
  margin-bottom: 24px;
}

.gm-etapa__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}

.gm-etapa__meta dt {
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.gm-etapa__meta dd {
  color: var(--gray-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

@media only screen and (max-width: 767px) {
  .gm-etapa {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 0;
  }
  .gm-etapa__texto {
    font-size: 16px;
  }
  .gm-etapa__meta {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.gm-prazos {
  padding-top: 15px;
}

.gm-prazos .gm-planos__condicoes {
  margin-top: 24px;
}

/* ---------- tabela (comparativo de planos e bases legais) ---------- */

/* O wrapper é quem rola. Sem ele a tabela empurra a largura da página e cria o
   scroll horizontal do documento inteiro no celular. */
.gm-tabela-wrap {
  margin-top: 48px;
  overflow-x: auto;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
}

.gm-tabela-wrap:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.gm-tabela {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 15px;
}

.gm-tabela th,
.gm-tabela td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--gray-12);
}

.gm-tabela thead th {
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  background-color: var(--black-2);
}

.gm-tabela thead th span {
  display: block;
  color: var(--gray-8);
  font-size: 13px;
  font-weight: 400;
  margin-top: 4px;
}

.gm-tabela tbody th {
  color: var(--gray-2);
  font-weight: 400;
}

.gm-tabela td {
  color: var(--gray-2);
}

.gm-tabela tbody tr:last-child th,
.gm-tabela tbody tr:last-child td {
  border-bottom: 0;
}

/* A coluna do recurso fica presa na rolagem lateral: sem isso, no celular, você
   rola para o lado e perde a referência do que está comparando. */
.gm-tabela th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--black-2);
  border-right: 1px solid var(--gray-12);
}

.gm-tabela .is-destaque {
  background-color: var(--gray-6);
}

.gm-tabela thead th.is-destaque {
  background-color: var(--gray-6);
  color: var(--white);
}

.gm-sim {
  color: var(--primary);
  font-size: 15px;
}

.gm-nao {
  color: var(--gray-12);
  font-size: 15px;
}

@media only screen and (max-width: 767px) {
  .gm-tabela {
    font-size: 14px;
    min-width: 620px;
  }
  .gm-tabela th,
  .gm-tabela td {
    padding: 14px 16px;
  }
}

/* ---------- /Planos: complementos ---------- */

.gm-plano__mais {
  padding-left: 26px;
}

.gm-plano__mais::before {
  display: none;
}

.gm-plano__mais a {
  color: var(--primary);
  font-size: 14px;
  border-bottom: 1px solid transparent;
}

.gm-plano__mais a:hover {
  border-bottom-color: var(--primary);
}

.gm-mensalidade__nota {
  color: var(--gray-8);
  font-size: 14px;
  line-height: 1.6;
  margin: 20px 0 0;
}

/* ---------- /Planos: abas de topo (Criação / Crescimento) ---------- */

.gm-planos-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.gm-planos-abas__item {
  padding: 10px 22px;
  border: 1px solid var(--gray-12);
  border-radius: 100px;
  color: var(--gray-2);
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.gm-planos-abas__item:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ---------- /Planos: bloco Módulos ---------- */

.gm-modulos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}

@media only screen and (max-width: 991px) {
  .gm-modulos {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.gm-modulo {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
}

.gm-modulo__inclui-em {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 16px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gm-modulo__nome {
  color: var(--white);
  margin-bottom: 12px;
}

.gm-modulo__texto {
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 24px;
}

.gm-modulo__preco {
  margin-top: auto;
  margin-bottom: 20px;
}

.gm-modulo__preco-label {
  display: block;
  color: var(--gray-8);
  font-size: 13px;
  margin-bottom: 4px;
}

.gm-modulo__preco-valor {
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
}

.gm-nota-modulos {
  color: var(--gray-8);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 24px;
}

@media only screen and (max-width: 767px) {
  .gm-modulo {
    padding: 24px;
  }
}

/* ---------- /Planos: bloco Crescimento (4 planos mensais) ---------- */

.gm-crescimento2__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.gm-toggle-anual {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--gray-12);
  border-radius: 100px;
}

.gm-toggle-anual__btn {
  padding: 10px 18px;
  border: 0;
  border-radius: 100px;
  background-color: transparent;
  color: var(--gray-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.gm-toggle-anual__btn span {
  font-weight: 400;
  opacity: 0.85;
}

.gm-toggle-anual__btn.is-active {
  background-color: var(--primary);
  color: var(--black-2);
}

/* Essencial: faixa reduzida, não é um card do grid — é a mesma mensalidade de
   sempre (.gm-faixa-basico da Home), só com preço e CTA embutidos. */
.gm-faixa-basico--planos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}

.gm-faixa-basico--planos .gm-faixa-basico__texto h3 {
  color: var(--white);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 6px;
}

.gm-faixa-basico--planos .gm-faixa-basico__texto p {
  color: var(--gray-2);
  font-size: 15px;
  text-align: left;
  margin: 0;
}

.gm-faixa-basico--planos .gm-faixa-basico__preco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.gm-faixa-basico--planos .gm-plano__preco {
  margin: 0;
  font-size: 28px;
}

.gm-faixa-basico--planos .gm-plano__preco-equivalente {
  margin: 0;
}

@media only screen and (max-width: 575px) {
  .gm-faixa-basico--planos {
    flex-direction: column;
    align-items: flex-start;
  }
}

.gm-crescimento2__grid {
  align-items: stretch;
  width: 100%;
  margin: 32px 0 0;
  padding-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 24px;
}

@media only screen and (max-width: 1199px) {
  .gm-crescimento2__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gm-crescimento2__grid .gm-plano:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 12px);
  }
}

@media only screen and (max-width: 767px) {
  .gm-crescimento2__grid {
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
  .gm-crescimento2__grid .gm-plano:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
}

.gm-plano__inclui-destaque {
  color: var(--white);
  font-weight: 600;
}

.gm-plano__preco-equivalente {
  display: none;
  color: var(--gray-8);
  font-size: 13px;
  margin-bottom: 20px;
}

#crescimento.is-anual .gm-plano__preco-equivalente {
  display: block;
}

.gm-crescimento2__brinde {
  margin-top: 48px;
  padding: 48px;
  border-radius: 16px;
  background-color: var(--black-2);
  border: 1px solid var(--gray-12);
}

.gm-crescimento2__brinde h3 {
  color: var(--white);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 500;
  margin-bottom: 16px;
}

.gm-crescimento2__brinde p {
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.65;
  max-width: 72ch;
}

@media only screen and (max-width: 767px) {
  .gm-crescimento2__brinde {
    padding: 24px;
  }
}

/* ---------- /Contato: canais ---------- */

.gm-canais {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}

@media only screen and (max-width: 991px) {
  .gm-canais {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 36px;
  }
}

.gm-canal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 32px;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

a.gm-canal:hover {
  border-color: var(--primary);
  background-color: var(--gray-6);
}

.gm-canal__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 50%;
  border: 1px solid var(--gray-12);
  color: var(--primary);
  font-size: 19px;
}

.gm-canal__label {
  color: var(--gray-8);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gm-canal__valor {
  color: var(--white);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
}

.gm-canal__extra {
  color: var(--gray-2);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 4px;
}

.gm-contato__titulo {
  color: var(--white);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 24px;
}

@media only screen and (max-width: 767px) {
  .gm-canal {
    padding: 24px;
  }
}

/* ---------- formulário: avisos e erros ---------- */

.gm-aviso {
  padding: 28px;
  margin-bottom: 32px;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
  background-color: var(--gray-6);
}

.gm-aviso p {
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.65;
  margin-bottom: 16px;
}

.gm-aviso ul {
  margin: 0;
  padding-left: 20px;
}

.gm-aviso li {
  color: var(--gray-2);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 6px;
}

.gm-aviso__titulo {
  color: var(--white);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 10px;
}

.gm-aviso--ok {
  border-left: 3px solid var(--primary);
}

.gm-aviso--erro {
  border-left: 3px solid #ff6b5e;
}

.gm-aviso--erro .gm-aviso__titulo {
  color: #ff8c82;
}

.gm-erro {
  color: #ff8c82;
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0 0;
}

.contact__form [aria-invalid="true"] {
  border-bottom-color: #ff6b5e;
}

.gm-form__nota {
  color: var(--gray-8);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 24px;
}

.gm-form__nota a {
  color: var(--gray-2);
  text-decoration: underline;
}

.gm-form__nota a:hover {
  color: var(--primary);
}

/* ---------- chamada final ---------- */

.gm-cta {
  padding-top: clamp(40px, 5vw, 70px);
  padding-bottom: clamp(60px, 7vw, 100px);
}

.gm-cta__box {
  padding: clamp(36px, 5vw, 72px);
  border: 1px solid var(--gray-12);
  border-radius: 24px;
  background-color: var(--gray-6);
  text-align: center;
}

.gm-cta__titulo {
  color: var(--white);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.gm-cta__texto {
  color: var(--gray-2);
  font-size: 17px;
  line-height: 1.65;
  max-width: 60ch;
  margin: 0 auto 32px;
}

.gm-cta__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

@media only screen and (max-width: 575px) {
  .gm-cta__acoes .gm-btn {
    flex: 1 1 100%;
  }
}

/* ---------- páginas legais ---------- */

/* Coluna única centralizada, com o sumário como cartão no topo.
   A primeira versão era um grid de duas colunas com o sumário em position: sticky —
   mas o ScrollSmoother anima #smooth-content por transform, e transform cria bloco
   de contenção: sticky nunca gruda, e o que sobrava era uma coluna vazia de 280px
   ao lado de dez telas de texto. */
.gm-legal {
  max-width: 940px;
  margin: 0 auto;
  padding-top: clamp(32px, 4vw, 60px);
  padding-bottom: clamp(64px, 8vw, 120px);
}

/* A tabela de bases legais tem min-width de 720px dentro de um wrapper que rola;
   sem isto ela estica o container e estoura a largura da tela no celular. */
.gm-legal > * {
  min-width: 0;
}

.gm-legal__indice {
  padding: 28px 32px;
  margin-bottom: 56px;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
}

.gm-legal__indice-titulo {
  color: var(--gray-8);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.gm-legal__indice ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3;
  column-gap: 32px;
  counter-reset: indice;
}

.gm-legal__indice li {
  counter-increment: indice;
  margin-bottom: 10px;
  break-inside: avoid;
}

.gm-legal__indice a {
  display: flex;
  gap: 10px;
  color: var(--gray-2);
  font-size: 14px;
  line-height: 1.45;
}

.gm-legal__indice a::before {
  content: counter(indice) ".";
  color: var(--gray-12);
  flex: 0 0 auto;
}

.gm-legal__indice a:hover {
  color: var(--primary);
}

.gm-legal__conteudo {
  max-width: 76ch;
  margin: 0 auto;
}

.gm-legal__conteudo section {
  padding-bottom: 40px;
  scroll-margin-top: 120px;
}

.gm-legal__conteudo h2 {
  color: var(--white);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 16px;
}

.gm-legal__conteudo h3 {
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  margin: 24px 0 12px;
}

.gm-legal__conteudo p {
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 16px;
}

.gm-legal__conteudo strong {
  color: var(--white);
  font-weight: 500;
}

.gm-legal__conteudo ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.gm-legal__conteudo li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--gray-2);
  font-size: 16px;
  line-height: 1.7;
}

.gm-legal__conteudo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primary);
}

.gm-legal__conteudo a {
  color: var(--primary);
  border-bottom: 1px solid transparent;
}

.gm-legal__conteudo a:hover {
  border-bottom-color: var(--primary);
}

.gm-legal__resumo {
  padding: 32px;
  margin-bottom: 40px;
  border: 1px solid var(--gray-12);
  border-radius: 16px;
  background-color: var(--gray-6);
}

.gm-legal__resumo h2 {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gm-legal__data {
  color: var(--gray-8);
  font-size: 14px;
}

/* A tabela das páginas legais herda o mesmo componente do comparativo. */
.gm-legal__conteudo .gm-tabela-wrap {
  margin: 0 0 24px;
}

@media only screen and (max-width: 991px) {
  .gm-legal__indice {
    margin-bottom: 40px;
  }
  .gm-legal__indice ol {
    columns: 2;
    column-gap: 24px;
  }
}

@media only screen and (max-width: 575px) {
  .gm-legal__indice {
    padding: 24px;
  }
  .gm-legal__indice ol {
    columns: 1;
  }
  .gm-legal__resumo {
    padding: 24px;
  }
}