/* Secoes da LPInvest: passos, responsabilidades, depoimentos, comparacao, FAQ e rodape.
   Tudo escopado pela classe do bloco (.gx-passos, .gx-resp, .gx-depo, .gx-comp, .gx-faq, .gx-rodape).
   Medidas tiradas do CSS do Framer (v17.html). */

/* ---------- Pecas comuns (selo, titulo, subtitulo) ---------- */
.gx-passos, .gx-resp, .gx-depo, .gx-comp, .gx-faq, .gx-rodape {
  --gxs-ink: var(--ink, rgb(24, 24, 24));
  --gxs-muted: var(--muted, rgb(70, 72, 77));
  --gxs-line: rgba(108, 111, 118, 0.12);
  --gxs-line-soft: rgba(70, 72, 77, 0.06);
  --gxs-soft: rgb(250, 250, 250);
  --gxs-tab: rgb(245, 245, 245);
  --gxs-bronze: rgb(171, 123, 85);
  --gxs-title: "Geist", "Inter", system-ui, sans-serif;
  --gxs-body: "Inter", system-ui, sans-serif;
  box-sizing: border-box;
  font-family: var(--gxs-body);
  color: var(--gxs-muted);
  -webkit-font-smoothing: antialiased;
}
.gx-passos *, .gx-resp *, .gx-depo *, .gx-comp *, .gx-faq *, .gx-rodape *,
.gx-passos *::before, .gx-resp *::before, .gx-depo *::before, .gx-comp *::before, .gx-faq *::before, .gx-rodape *::before,
.gx-passos *::after, .gx-resp *::after, .gx-depo *::after, .gx-comp *::after, .gx-faq *::after, .gx-rodape *::after {
  box-sizing: border-box;
}
.gx-passos h2, .gx-passos h3, .gx-passos p, .gx-passos figure,
.gx-resp h2, .gx-resp h3, .gx-resp p, .gx-resp ul,
.gx-depo h2, .gx-depo p,
.gx-comp h2, .gx-comp p, .gx-comp table,
.gx-faq h2, .gx-faq h3, .gx-faq p,
.gx-rodape p, .gx-rodape ul { margin: 0; padding: 0; }

.gx-passos__selo, .gx-resp__selo, .gx-depo__selo, .gx-comp__selo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px;
  background: #fff; border: 1.5px solid var(--gxs-line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  font-family: var(--gxs-body); font-size: 14px; font-weight: 500; line-height: 1.7;
  color: var(--gxs-ink); white-space: nowrap;
}
.gx-passos__selo svg, .gx-resp__selo svg, .gx-depo__selo svg, .gx-comp__selo svg {
  width: 18px; height: 18px; flex: none; color: var(--gxs-muted); overflow: visible;
}

.gx-passos__titulo, .gx-resp__titulo, .gx-depo__titulo, .gx-comp__titulo, .gx-faq__titulo {
  font-family: var(--gxs-title); font-weight: 500; font-size: 44px; line-height: 1.2;
  letter-spacing: -2.5px; color: var(--gxs-ink); text-align: center;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
}
.gx-passos__sub, .gx-resp__sub, .gx-comp__sub, .gx-faq__sub {
  font-size: 16px; line-height: 1.7; color: var(--gxs-muted); text-align: center; opacity: .8;
}

/* ---------- 1. Tres passos ---------- */
.gx-passos { background: var(--gxs-soft); padding: 80px 24px; position: relative; z-index: 1; }
.gx-passos__container {
  max-width: 1060px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 56px;
}
.gx-passos__topo { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.gx-passos__sub { max-width: 380px; }

.gx-passos__painel {
  display: flex; width: 100%;
  background: var(--gxs-tab); border-radius: 20px 20px 0 0;
}
.gx-passos__abas {
  display: flex; flex-direction: column; flex: 1 1 0; max-width: 467px; min-width: 0;
  border-radius: 20px 0 0 0; overflow: hidden;
}
.gx-passos__aba {
  position: relative; flex: 1 1 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px;
  width: 100%; margin: 0; padding: 25px 24px 24px 24px;
  background: var(--gxs-tab); text-align: left; cursor: pointer;
  border: 0; border-left: 1.5px solid var(--gxs-line-soft); border-bottom: 1.5px solid var(--gxs-line-soft);
  font: inherit; color: inherit;
  transition: background-color .4s ease;
}
.gx-passos__aba:first-child { border-top: 1.5px solid var(--gxs-line-soft); border-top-left-radius: 20px; }
.gx-passos__aba.is-ativa { background: #fff; }
.gx-passos__aba-titulo {
  max-width: 290px; font-size: 18px; font-weight: 500; line-height: 1.7; color: var(--gxs-muted);
  transition: color .4s ease;
}
.gx-passos__aba-texto {
  max-width: 290px; font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--gxs-muted);
}
.gx-passos__aba:not(.is-ativa) .gx-passos__aba-titulo,
.gx-passos__aba:not(.is-ativa) .gx-passos__aba-texto { opacity: .8; }
.gx-passos__aba.is-ativa .gx-passos__aba-titulo { color: var(--gxs-ink); }
.gx-passos__aba-linha {
  position: absolute; left: 0; bottom: -1.5px; height: 2px; width: 1px;
  background: var(--gxs-tab); transition: width .9s cubic-bezier(.34, 1.25, .64, 1), background-color .3s ease;
}
.gx-passos__aba.is-ativa .gx-passos__aba-linha { width: 100%; background: var(--gxs-bronze); }
.gx-passos__aba:focus-visible { outline: 2px solid var(--gxs-ink); outline-offset: -4px; }

.gx-passos__tela {
  position: relative; flex: 1 1 0; min-width: 0; height: 474px; overflow: hidden;
  border: 1.5px solid var(--gxs-line-soft); border-bottom: 0; border-top-right-radius: 20px;
}
.gx-passos__palco { position: absolute; inset: 0; }
.gx-passos__img {
  position: absolute; top: 44px; left: 44px; width: 840px; aspect-ratio: 1.80645;
  border: 1.5px solid rgba(70, 72, 77, 0.12); border-radius: 20px; overflow: hidden;
  background: #9c9ca3; z-index: 0;
  transform: translateY(512px);
  transition: transform 1.1s cubic-bezier(.34, 1.2, .64, 1);
}
.gx-passos__img.is-ativa { transform: translateY(0); z-index: 1; }
.gx-passos__img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }

/* ---------- 2. Responsabilidades ---------- */
.gx-resp {
  background: #fff; padding: 80px 24px; position: relative; z-index: 1;
  border-bottom: 1.5px solid var(--gxs-line-soft);
}
.gx-resp__container {
  max-width: 1060px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 72px;
}
.gx-resp__topo { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; padding: 5px 0 0; }
.gx-resp__sub { max-width: 688px; }
.gx-resp__lista {
  list-style: none; width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 64px;
}
.gx-resp__item { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gx-resp__item-topo { display: flex; align-items: center; gap: 12px; }
.gx-resp__item-topo svg { width: 24px; height: 24px; flex: none; color: var(--gxs-bronze); }
.gx-resp__item h3 {
  font-size: 18px; font-weight: 600; line-height: 1.7; letter-spacing: -.3px; color: var(--gxs-ink);
}
.gx-resp__item p { font-size: 14px; line-height: 1.7; color: var(--gxs-muted); }

/* ---------- 3. Depoimentos ---------- */
.gx-depo { background: #fff; padding: 80px 24px; overflow: hidden; }
.gx-depo__container {
  max-width: 1060px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.gx-depo__topo { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.gx-depo__quebra { display: none; }
.gx-depo__faixa {
  position: relative; width: 100%; overflow: hidden;
  display: flex; justify-content: center; align-items: center; gap: 24px;
}
.gx-depo__faixa .gx-depo__card { flex: 0 1 326px; min-width: 0; }
/* Celular: 3 lado a lado ficariam com ~100px cada. Vira carrossel arrastavel,
   com o terceiro aparecendo pela metade pra mostrar que tem mais. */
@media (max-width: 600px) {
  .gx-depo__faixa {
    justify-content: flex-start; gap: 12px; margin: 0 -24px; padding: 0 24px; width: calc(100% + 48px);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .gx-depo__faixa::-webkit-scrollbar { display: none; }
  .gx-depo__faixa .gx-depo__card { flex: 0 0 44%; scroll-snap-align: start; }
  .gx-depo__fade { display: none; }
}
.gx-depo__fade { position: absolute; left: 0; width: 100%; height: 282px; z-index: 2; pointer-events: none; }
.gx-depo__fade--topo { top: -22px; background: linear-gradient(#fff 0%, rgba(255, 255, 255, 0) 100%); }
.gx-depo__fade--base { bottom: -60px; background: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%); }
.gx-depo__card {
  position: relative; width: 326px; max-width: 100%; aspect-ratio: 326 / 580;
  background: #fff; border: 1.5px solid var(--gxs-line-soft); border-radius: 16px; overflow: hidden;
}
.gx-depo__video { position: absolute; inset: 0; overflow: hidden; cursor: pointer; background: #000; }
.gx-depo__video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gx-depo__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gx-depo__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 3;
}
.gx-depo__play svg { width: 100%; height: 100%; display: block; }
.gx-depo__play svg path:first-child { transition: fill .1s cubic-bezier(.4, 0, 1, 1), fill-opacity .1s cubic-bezier(.4, 0, 1, 1); }
.gx-depo__video:hover .gx-depo__play svg path:first-child,
.gx-depo__play:focus-visible svg path:first-child { fill: #f00; fill-opacity: 1; }
.gx-depo__play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 12px; }
.gx-depo__video.is-tocando { cursor: default; }
.gx-depo__video.is-tocando img, .gx-depo__video.is-tocando .gx-depo__play { display: none; }
.gx-depo__faixa.is-tocando .gx-depo__fade { display: none; }

/* ---------- 4. Comparacao ---------- */
.gx-comp { background: #fff; padding: 80px 24px; overflow: hidden; }
.gx-comp__container {
  max-width: 1060px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 56px;
}
.gx-comp__topo { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 518px; }
.gx-comp__sub { max-width: 380px; }
.gx-comp__card {
  width: 100%; max-width: 760px; padding: 8px;
  background: var(--gxs-soft); border: 1px solid var(--gxs-line); border-radius: 20px;
}
.gx-comp__tabela { width: 100%; border-collapse: separate; border-spacing: 0; }
.gx-comp__oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.gx-comp__tabela thead th {
  padding: 16px 24px; font-size: 12px; font-weight: 500; line-height: 1.7;
  text-transform: uppercase; color: var(--gxs-muted); text-align: left;
}
.gx-comp__tabela thead th:last-child { text-align: right; }
.gx-comp__so-cel { display: none; }
.gx-comp__tabela tbody th, .gx-comp__tabela tbody td {
  padding: 18px 24px; border-top: 1px solid var(--gxs-line);
  font-size: 16px; font-weight: 500; line-height: 1.5; vertical-align: middle;
}
.gx-comp__tabela tbody th { text-align: left; color: var(--gxs-muted); }
.gx-comp__tabela tbody td { text-align: right; color: var(--gxs-ink); white-space: nowrap; }
.gx-comp__gox th, .gx-comp__gox td {
  background: var(--gxs-ink); border-top: 0 !important; padding: 22px 24px !important;
}
.gx-comp__gox th { border-radius: 14px 0 0 14px; }
.gx-comp__gox td { border-radius: 0 14px 14px 0; }
.gx-comp__gox-nome, .gx-comp__gox-modelo {
  display: block; font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: -.2px; color: #fff;
}
.gx-comp__gox-nome { margin-bottom: 2px; }
.gx-comp__gox-modelo { opacity: .6; }
.gx-comp__gox td {
  font-size: 22px !important; font-weight: 600 !important; line-height: 1.3 !important;
  letter-spacing: -.5px; color: #fff !important;
}
.gx-comp__nota { padding: 24px 24px 16px; opacity: .6; }
.gx-comp__nota p { font-size: 14px; line-height: 1.7; color: var(--gxs-muted); }

/* ---------- 5. FAQ ---------- */
.gx-faq { background: #fff; padding: 80px 24px; }
.gx-faq__container {
  max-width: 692px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
}
.gx-faq__topo { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.gx-faq__sub { opacity: 1; }
.gx-faq__lista { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.gx-faq__item {
  border: 1.5px solid rgba(108, 111, 118, 0.06); border-radius: 16px;
  background: rgba(246, 247, 249, 0); overflow: hidden;
  transition: background-color .4s cubic-bezier(.44, 0, .56, 1);
}
.gx-faq__item.is-aberto { background: var(--gxs-soft); }
.gx-faq__pergunta { font-size: inherit; font-weight: inherit; }
.gx-faq__botao {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; margin: 0; padding: 32px; border: 0; background: transparent; cursor: pointer;
  text-align: left; font-family: var(--gxs-body);
  font-size: 18px; font-weight: 600; line-height: 1.7; letter-spacing: -.3px; color: var(--gxs-ink);
  transition: padding .4s cubic-bezier(.44, 0, .56, 1);
}
.gx-faq__botao span { flex: 1 1 auto; min-width: 0; }
.gx-faq__botao:focus-visible { outline: 2px solid var(--gxs-ink); outline-offset: -4px; border-radius: 16px; }
.gx-faq__seta {
  width: 24px; height: 24px; flex: none; color: rgb(3, 3, 3);
  transition: transform .4s cubic-bezier(.44, 0, .56, 1);
}
.gx-faq__item.is-aberto .gx-faq__seta { transform: rotate(180deg); }
.gx-faq__resposta {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.44, 0, .56, 1), visibility .4s;
  visibility: hidden;
}
.gx-faq__item.is-aberto .gx-faq__resposta { grid-template-rows: 1fr; visibility: visible; }
.gx-faq__resposta-dentro { min-height: 0; overflow: hidden; }
.gx-faq__resposta p {
  max-width: 495px; padding: 0 32px 32px; margin-top: -8px;
  font-size: 14px; line-height: 1.7; color: var(--gxs-muted);
}

/* ---------- 6. Rodape ---------- */
.gx-rodape { background: #fff; padding: 30px 24px 80px; overflow: hidden; }
.gx-rodape__container {
  max-width: 1060px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px;
}
.gx-rodape__topo { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.gx-rodape__marca { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.gx-rodape__logo {
  position: relative; width: 53px; height: 32px; overflow: hidden;
  transition: width .5s cubic-bezier(.34, 1.2, .64, 1);
}
.gx-rodape__logo-x { position: absolute; left: 0; top: 2px; width: 53px; height: 28px; color: var(--gxs-muted); }
.gx-rodape__logo-nome {
  position: absolute; top: 0; bottom: 0; right: -90px; width: 90px; overflow: hidden;
  transition: right .5s cubic-bezier(.34, 1.2, .64, 1);
}
.gx-rodape__logo-nome svg { position: absolute; right: 0; top: 50%; width: 80px; height: 23px; margin-top: -11.5px; color: var(--gxs-ink); }
.gx-rodape__logo svg { display: block; fill: currentColor; }
.gx-rodape__logo-x svg { width: 100%; height: 100%; }
.gx-rodape__logo:hover { width: 143px; }
.gx-rodape__logo:hover .gx-rodape__logo-nome { right: 0; }
.gx-rodape__frase { max-width: 254px; font-size: 14px; line-height: 1.7; color: var(--gxs-muted); }
.gx-rodape__redes { list-style: none; display: flex; align-items: center; gap: 8px; }
.gx-rodape__rede {
  display: flex; align-items: center; justify-content: center; padding: 8px;
  border-radius: 100px; background: var(--gxs-ink); color: #fff;
  transition: transform .2s ease, opacity .2s ease;
}
.gx-rodape__rede:hover { transform: scale(1.06); }
.gx-rodape__rede:focus-visible { outline: 2px solid var(--gxs-ink); outline-offset: 3px; }
.gx-rodape__rede svg { width: 16px; height: 16px; display: block; fill: currentColor; }
.gx-rodape__base {
  display: flex; align-items: flex-end; gap: 10px; padding-top: 42px;
  border-top: 1px solid rgba(108, 111, 118, 0.06);
}
.gx-rodape__col { flex: 1 1 0; min-width: 0; }
.gx-rodape__col p { font-size: 14px; line-height: 1.7; color: var(--gxs-muted); overflow-wrap: anywhere; }
.gx-rodape__col--dir p { text-align: right; }

/* ---------- Tablet ---------- */
@media (max-width: 1199.98px) {
  .gx-passos__titulo, .gx-resp__titulo, .gx-depo__titulo, .gx-comp__titulo, .gx-faq__titulo {
    font-size: 34px; letter-spacing: -2px;
  }
  .gx-passos__painel { flex-direction: column; border-radius: 28px; overflow: hidden; }
  .gx-passos__abas { max-width: 100%; border-radius: 28px 28px 0 0; }
  .gx-passos__aba { flex: none; padding: 24px; border-right: 1.5px solid var(--gxs-line-soft); }
  .gx-passos__aba:first-child { border-top-right-radius: 28px; border-top-left-radius: 28px; }
  .gx-passos__aba-titulo, .gx-passos__aba-texto { max-width: none; }
  .gx-passos__tela { flex: none; width: 100%; height: auto; padding: 8px; border: 0; border-radius: 0; }
  .gx-passos__palco { position: relative; inset: auto; width: 100%; aspect-ratio: 1.83163; overflow: hidden; border-radius: 20px; }
  .gx-passos__img { top: 0; left: 0; width: 100%; height: 100%; aspect-ratio: auto; transform: translateY(110%); }
  .gx-passos__img.is-ativa { transform: translateY(0); }
  .gx-resp__lista { gap: 60px 40px; }
  .gx-comp__tabela thead th, .gx-comp__tabela tbody th, .gx-comp__tabela tbody td { font-size: 13px; }
  .gx-comp__tabela thead th { font-size: 12px; }
  .gx-comp__gox-nome, .gx-comp__gox-modelo { font-size: 14px; }
  .gx-comp__gox td { font-size: 20px !important; }
}

/* ---------- Celular ---------- */
@media (max-width: 767.98px) {
  .gx-passos__titulo, .gx-resp__titulo, .gx-depo__titulo, .gx-comp__titulo, .gx-faq__titulo {
    font-size: 32px; letter-spacing: -1.5px;
  }
  .gx-passos { padding: 60px 20px; }
  .gx-passos__container { gap: 40px; }
  .gx-passos__sub { max-width: 100%; }

  .gx-resp { padding: 40px 20px 60px; }
  .gx-resp__container { gap: 40px; }
  .gx-resp__lista { grid-template-columns: minmax(0, 1fr); gap: 30px; }

  .gx-depo { padding: 60px 20px 20px; }
  .gx-depo__container { gap: 40px; }
  .gx-depo__quebra { display: inline; }
  .gx-depo__fade { display: none; }

  .gx-comp { padding: 60px 20px 0; }
  .gx-comp__container { gap: 40px; }
  .gx-comp__topo { max-width: 100%; }
  .gx-comp__sub { max-width: 100%; }
  .gx-comp__so-desk { display: none; }
  .gx-comp__so-cel { display: inline; }
  .gx-comp__tabela thead th { padding: 16px; }
  .gx-comp__tabela tbody th, .gx-comp__tabela tbody td { padding: 18px 16px; }
  .gx-comp__gox th, .gx-comp__gox td { padding: 22px 16px !important; }
  .gx-comp__gox th { padding-right: 8px !important; }
  .gx-comp__gox td { padding-left: 8px !important; white-space: normal; }
  .gx-comp__gox-nome, .gx-comp__gox-modelo { font-size: 12px; }
  .gx-comp__gox td { font-size: 18px !important; }
  .gx-comp__nota { padding: 16px 16px 8px; }

  .gx-faq { padding: 80px 20px 60px; }
  .gx-faq__container { gap: 40px; }
  .gx-faq__item { border-width: 1px; border-color: var(--gxs-line); }
  .gx-faq__botao { padding: 18px 22px; font-size: 16px; }
  .gx-faq__resposta p { max-width: 433px; padding: 0 22px 18px; margin-top: -6px; }

  .gx-rodape { padding: 60px 20px; }
  .gx-rodape__container { gap: 40px; }
  .gx-rodape__topo { flex-direction: column; align-items: flex-start; gap: 30px; }
  .gx-rodape__marca { gap: 16px; }
  .gx-rodape__base { flex-direction: column; align-items: flex-start; padding-top: 30px; }
  .gx-rodape__col { flex: none; width: 100%; }
  .gx-rodape__col--dir p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .gx-passos__img, .gx-passos__aba-linha, .gx-faq__resposta, .gx-faq__seta, .gx-rodape__logo, .gx-rodape__logo-nome {
    transition: none;
  }
}

/* Faca a conta ligada a calculadora: 3 colunas no desktop, 2 no celular. */
.gx-comp__tabela thead th:nth-child(2) { text-align: right; }
.gx-comp__tabela td strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.gx-comp__tabela td small { display: none; }
.gx-comp__gox td strong { font-size: inherit; }
@media (max-width: 767px) {
  .gx-comp__col-pct { display: none; }
  .gx-comp__tabela td small.gx-comp__so-cel { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; opacity: .7; }
  .gx-comp__tabela tbody td { white-space: normal; }
}
/* Linha GO-X com 3 colunas: so a ultima celula arredonda a direita, card mais largo. */
.gx-comp__card { max-width: 920px; }
.gx-comp__gox td { border-radius: 0; }
.gx-comp__gox td:last-child { border-radius: 0 14px 14px 0; }
.gx-comp__gox td.gx-comp__col-pct { font-size: 16px !important; font-weight: 500 !important; color: rgba(255, 255, 255, .8) !important; }
.gx-comp__gox-nome { white-space: nowrap; }
.gx-comp__gox-modelo { font-size: 14px; font-weight: 500; }
@media (max-width: 767px) {
  .gx-comp__gox-nome { white-space: normal; font-size: 15px; }
  .gx-comp__gox-modelo { font-size: 12px; }
  .gx-comp__gox td small.gx-comp__so-cel { color: #fff; }
}

/* Sem cabecalho: a tabela vem colada na calculadora. */
.gx-comp { padding-top: 8px; }

/* ---------- Faca a conta: grafico de colunas (05/10/2026) ---------- */
/* Verde do grafico: escuro e sobrio pra conversar com o preto/cinza da pagina
   (contraste 5,2:1 no branco, entao serve tambem pro texto do destaque). */
.gx-col { --gx-verde: #2f7d55; --gx-verde-forte: #25653f; padding: 24px 24px 12px; }
.gx-col__topo { display: flex; flex-direction: column; gap: 6px; }
.gx-col__cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gx-col__visao { display: inline-flex; flex: none; padding: 3px; border-radius: 100px; background: rgba(70, 72, 77, .08); }
.gx-col__visao button {
  padding: 6px 14px; border: 0; border-radius: 100px; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--gxs-muted); transition: background .2s, color .2s, box-shadow .2s;
}
.gx-col__visao button[aria-pressed="true"] { background: #fff; color: var(--gxs-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.gx-col__visao button:focus-visible { outline: 2px solid var(--gx-verde); outline-offset: 2px; }
.gx-col__titulo { font-size: 12px; font-weight: 500; line-height: 1.7; text-transform: uppercase; color: var(--gxs-muted); }
.gx-col__destaque { font-family: var(--gxs-title); font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -.8px; color: var(--gxs-ink); }
.gx-col__destaque strong { font-weight: 600; color: var(--gx-verde); white-space: nowrap; }
.gx-col__area { position: relative; display: flex; margin-top: 28px; height: 310px; padding-bottom: 44px; }
.gx-col__eixo { position: relative; width: 62px; flex: none; }
.gx-col__tick { position: absolute; right: 12px; transform: translateY(50%); font-size: 12px; color: var(--gxs-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gx-col__plot { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 14px; padding: 0 6px; border-bottom: 1px solid rgba(70, 72, 77, .35); }
.gx-col__linha { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(70, 72, 77, .14); pointer-events: none; }
.gx-col__item { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.gx-col__barra { position: relative; width: 100%; max-width: 72px; height: 0; border-radius: 4px 4px 0 0; background: rgb(196, 198, 203); transition: height .5s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
.gx-col__item:hover .gx-col__barra, .gx-col__item.is-ativo .gx-col__barra { background: rgb(160, 163, 170); }
.gx-col__item--gox .gx-col__barra { background: var(--gx-verde) !important; }
.gx-col__item--gox:hover .gx-col__barra, .gx-col__item--gox.is-ativo .gx-col__barra { background: var(--gx-verde-forte) !important; }
.gx-col__item--gox .gx-col__num { color: var(--gx-verde-forte); }
.gx-col__num { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--gxs-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gx-col__item--gox .gx-col__num { font-size: 15px; }
.gx-col__nome { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; font-size: 13px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--gxs-muted); width: max-content; max-width: 110px; }
.gx-col__item--gox .gx-col__nome { font-weight: 700; color: var(--gxs-ink); }
.gx-col__dica { position: absolute; z-index: 2; bottom: 0; left: 0; width: max-content; white-space: nowrap; padding: 10px 12px; border-radius: 10px; background: var(--gxs-ink); color: #fff; font-size: 12px; line-height: 1.5; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s; }
.gx-col__dica.is-on { opacity: 1; transform: translate(-50%, 0); }
.gx-col__dica strong { display: block; font-size: 13px; }
.gx-col__dica span { display: block; color: rgba(255, 255, 255, .75); }
.gx-col__titulo span { white-space: nowrap; }
.gx-col__curto { display: none; }
.gx-col__leg { margin-top: 30px; font-size: 13px; line-height: 1.6; color: var(--gxs-muted); opacity: .8; }
@media (max-width: 767.98px) {
  .gx-col { padding: 20px 12px 8px; }
  .gx-col__destaque { font-size: 20px; letter-spacing: -.5px; }
  .gx-col__area { height: 260px; padding-bottom: 40px; }
  .gx-col__eixo { display: none; }
  .gx-col__rs { display: none; }
  .gx-col__longo { display: none; }
  .gx-col__curto { display: inline; }
  .gx-col__plot { gap: 6px; padding: 0 2px; }
  .gx-col__num { font-size: 10px; }
  .gx-col__item--gox .gx-col__num { font-size: 11px; }
  .gx-col__nome { font-size: 10px; max-width: 48px; }
}
@media (prefers-reduced-motion: reduce) { .gx-col__barra { transition: none; } }