/*
  Estilos das seções 04–12 (Stats até FAQ).
  Container padrão de conteúdo: ~1182px dentro de um container de 1200px
  (medido ao vivo em ejlsystem.framer.website, seções fora do Hero).
*/

/* ================= Padrões compartilhados ================= */

.section {
  padding-block: 80px;
}

.section__container {
  position: relative;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

/* moldura decorativa (Shape Container do Framer): hairlines verticais nas
   bordas do conteúdo, presentes em quase toda seção fora do Hero */
.section-frame {
  position: relative;
}

.section-frame::before,
.section-frame::after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 1px;
  background: rgb(31, 31, 31);
  pointer-events: none;
}

.section-frame::before { left: 0; }
.section-frame::after { right: 0; }

.section__top {
  max-width: 630px;
  margin-bottom: 56px;
}

.section__heading {
  font-size: var(--h2-size);
  line-height: var(--h2-line-height);
  margin-top: 16px;
}

.section__lead {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  color: var(--color-text-secondary);
  margin-top: 16px;
}

/* checklist com ícone de check (Solution, Pricing) */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* bullet: pequeno quadrado sólido azul (confirmado no vídeo enviado pelo
   usuário — não um círculo com check como a primeira versão desta seção) */
.checklist__icon {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
}

/* chips (módulos, ferramentas etc.) — confirmado no 2º vídeo enviado pelo
   usuário: são estáticos (sem scroll/marquee), 3 por card, badge retangular
   com preenchimento sólido escuro, não pill outline */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.chip {
  padding: 8px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ================= Stats Section ================= */

.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  padding: 24px 32px;
  border-right: 1px solid rgb(31, 31, 31);
  text-align: center;
}

.stat:last-child { border-right: none; }

.stat__value {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 40px;
  color: var(--color-text-primary);
}

.stat__label {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ================= Pain Point Section ================= */

.pain-point__top {
  max-width: 942px;
  margin-bottom: 64px;
}

.pain-point__top .section__heading {
  font-size: 32px;
  line-height: 1.25;
}

.pain-point__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.pain-card {
  padding: 40px;
  border-left: 1px solid rgb(31, 31, 31);
}

.pain-card:first-child { border-left: none; }

/* grade de pontos 3x3 — linha aparece no hover do card (confirmado no
   vídeo enviado pelo usuário: card 1 sem linha, card 2 quadrado, card 3
   quadrado + X, dispensadas em repouso) */
.pain-card__dots {
  width: 40px;
  height: 40px;
  margin-bottom: 32px;
  overflow: visible;
}

.pain-card__dots .dot {
  fill: var(--color-text-primary);
  opacity: 0.85;
}

.pain-card__dots .line {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
  opacity: 0;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.pain-card:hover .pain-card__dots .line,
.pain-card:focus-within .pain-card__dots .line {
  stroke-dashoffset: 0;
  opacity: 0.9;
}

.pain-card__title {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.pain-card__text {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* ================= Solution Section ================= */

.solution__grid {
  display: grid;
  grid-template-columns: 591fr 591fr;
  gap: 0;
  align-items: center;
}

.solution__content {
  max-width: 512px;
}

.solution__content .checklist {
  margin-top: 32px;
}

/* Imagem real (RsnUT6OIaTeDlrfnjNX6lv3lIdc.png — mesa de trabalho com
   notebook aberto no painel "Agenda" do EJL System). No site original ela
   é aplicada via CSS background-image com background-repeat:repeat, mas a
   altura do container deixa a segunda cópia praticamente invisível — aqui
   uso object-fit:cover, que preserva o resultado visual (foto preenchendo
   a coluna) sem replicar a costura de repetição como se fosse proposital. */
.solution__media {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.solution__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* ================= Service Section ================= */

.service__layout {
  display: grid;
  grid-template-columns: 258fr 825fr;
  gap: 96px;
  /* min-width:0 nos itens de grid evita que conteúdo intrínseco (chips,
     marquee) force a trilha a ficar mais larga que o espaço disponível */
  min-width: 0;
}

.service__layout > * {
  min-width: 0;
}

.service__index {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: max-content;
}

.service__index-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service__index-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-faint);
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.service__index-item::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.6;
}

.service__index-item.is-active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-accent);
}

.service__index-item.is-active::before {
  background: var(--color-accent);
  opacity: 1;
}

/* Coluna direita das 4 linhas do Service Section. Reestruturado na 2ª
   rodada de refinamento: não existe uma "caixa" com borda/fundo ao redor de
   cada linha inteira — só a textura decorativa contínua (.service-cards__panel,
   o "Shape Container" do Framer) atrás de tudo, e cada widget específico
   (diagrama / roadmap / progresso / grade de ícones) com seu próprio fundo. */
.service-cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
  min-width: 0;
}

.service-cards__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 46%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  background-color: #050308;
  background-size: cover;
  background-position: right center;
  overflow: hidden;
  z-index: 0;
}

.service-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: center;
  gap: 32px;
  min-width: 0;
}

.service-card__col {
  min-width: 0;
  padding-block: 12px;
}

.service-card__title {
  max-width: 460px;
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 1.3;
}

.service-card__text {
  max-width: 460px;
  margin-top: 16px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* diagrama de fluxo (Card 1): 3 ícones de origem -> núcleo (raio) ->
   checklist de módulos ativos. Cores/formas aproximadas a partir do 2º
   vídeo enviado pelo usuário — não são os ícones/SVGs originais do Framer,
   que não puderam ser localizados via API. */
.flow-diagram {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 260px;
  margin-inline: auto;
}

.flow-diagram__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--color-flow-line);
  stroke-width: 1.5;
  opacity: 0.7;
}

.flow-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: var(--color-flow-dot);
  border-radius: 1.5px;
}

.flow-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-flow-border);
  background: rgba(8, 6, 20, 0.7);
  color: var(--color-text-secondary);
}

.flow-icon svg {
  width: 22px;
  height: 22px;
}

.flow-icon--core {
  width: 56px;
  height: 56px;
  border-color: var(--color-flow-border);
  background: rgba(8, 6, 20, 0.85);
  color: var(--color-flow-core-1);
}

.flow-icon--core svg {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 10px rgba(255, 106, 61, 0.65));
}

.flow-checklist {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-flow-border);
  background: rgba(8, 6, 20, 0.75);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.flow-checklist span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flow-checklist__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 10px;
  font-style: normal;
  color: var(--color-text-primary);
}

/* caixas dos widgets 2 e 3 (roadmap / barras de progresso) */
.roadmap-box,
.progress-box {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-flow-border);
  overflow: hidden;
}

.roadmap-box {
  background: linear-gradient(165deg, rgba(46, 34, 96, 0.55), rgba(18, 13, 46, 0.8));
}

.progress-box {
  background: rgba(4, 4, 8, 0.85);
  padding-inline: 24px;
}

/* grade de ícones (Card 4) */
.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 300px;
  margin-inline: auto;
}

.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-flow-border);
  background: rgba(8, 6, 20, 0.7);
  color: var(--color-text-primary);
}

.icon-badge svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 1199px) {
  .service-card {
    grid-template-columns: 1fr;
  }

  .service-cards__panel {
    display: none;
  }

  .roadmap-box,
  .progress-box {
    max-width: 480px;
    background: rgba(10, 8, 20, 0.6);
  }

  .icon-grid {
    margin-inline: 0;
  }
}

/* bug real corrigido: .flow-diagram usa posicionamento absoluto com valores
   em px fixos (desenhado para ~340px de largura) — em telas mais estreitas
   que isso, os elementos (principalmente o card de checklist, mais à
   direita) ultrapassavam a própria caixa e vazavam pela lateral da tela.
   Confirmado em vídeo real do celular do usuário. Como são só 2 breakpoints
   de app real (~360–390px de largura útil de conteúdo), escala fixa em vez
   de recalcular as posições internas. */
@media (max-width: 480px) {
  .flow-diagram {
    transform: scale(0.82);
    transform-origin: top left;
    margin-bottom: -46px;
  }
}

/* roadmap (Card 2: Soluções sob medida) — bullet quadrado (não mais linha
   vertical contínua), confirmado no 2º vídeo enviado pelo usuário */
.roadmap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.roadmap__step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 24px;
  border-top: 1px solid var(--color-flow-border);
}

.roadmap__step:first-child {
  border-top: none;
}

.roadmap__step-title {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
}

.roadmap__step-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--color-accent);
}

.roadmap__step-tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-faint);
  white-space: nowrap;
}

.roadmap__step-tag--active {
  color: var(--color-accent);
  font-weight: 500;
}

/* etapas concluídas: riscado + esmaecido (confirmado no vídeo) */
.roadmap__step.is-done .roadmap__step-title {
  color: var(--color-text-faint);
  text-decoration: line-through;
  text-decoration-color: var(--color-text-faint);
}

.roadmap__step.is-done .roadmap__step-title::before {
  background: var(--color-text-faint);
}

.roadmap__step.is-current .roadmap__step-title {
  font-weight: 500;
}

.roadmap__step.is-next .roadmap__step-title,
.roadmap__step.is-next .roadmap__step-tag {
  color: var(--color-text-faint);
  opacity: 0.6;
}

.roadmap__step.is-next .roadmap__step-title::before {
  background: var(--color-text-faint);
  opacity: 0.6;
}

/* barras de progresso (Card 3: Sites e Landing pages) */
.progress-list {
  display: flex;
  flex-direction: column;
}

.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 0;
  border-top: 1px solid var(--color-flow-border);
}

.progress-row:first-child {
  border-top: none;
}

.progress-row__label {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-primary);
}

.progress-row__bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  /* trilho tracejado (estilo "barcode") — confirmado no vídeo enviado
     pelo usuário, não uma barra sólida contínua */
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0,
    rgba(255, 255, 255, 0.1) 2px,
    transparent 2px,
    transparent 4px
  );
}

.progress-row__fill {
  display: block;
  height: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    #4cdbff 0,
    #0066ff 2px,
    transparent 2px,
    transparent 4px
  );
  /* sem transition CSS aqui de propósito: a contagem 0 -> valor real
     (initProgressBars em js/animations.js) já anima width via
     requestAnimationFrame a cada frame — uma transition CSS por cima
     ficaria brigando com esses updates constantes e travaria a animação */
}

.progress-row__value {
  flex-shrink: 0;
  width: 34px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-faint);
}

/* ================= How its Work Section (Sites e Landing Pages) ================= */

.how-it-works__layout {
  display: grid;
  grid-template-columns: 591fr 591fr;
  gap: 0;
  align-items: center;
}

.how-it-works__content {
  max-width: 512px;
}

.how-it-works__video {
  margin-top: 40px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: #0a0d12;
}

.how-it-works__video-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.how-it-works__video-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}

.how-it-works__video video {
  width: 100%;
  height: auto;
  display: block;
}

.how-it-works__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.how-step {
  display: flex;
  gap: 20px;
  padding-block: 32px;
  border-top: 1px solid var(--color-border-subtle);
}

.how-step:first-child { border-top: none; }

.how-step__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.how-step__title {
  font-family: var(--font-heading);
  font-size: 18px;
}

.how-step__text {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* ================= Team Section ================= */

.team__header {
  max-width: 706px;
  margin-bottom: 64px;
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
}

.team-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #202630;
  border-radius: var(--radius-md);
  background: #05070a;
  overflow: hidden;
  cursor: pointer;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.team-card:hover {
  transform: translateY(-2px);
}

.team-card.is-inactive {
  opacity: 0.58;
  transform: scale(0.975);
}

.team-card.is-active {
  border-color: rgba(0, 175, 255, 0.44);
}

.team-card__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #06080c;
}

.team-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px 18px;
}

.team-card__name {
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.team-card__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.team-card__bio {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-faint);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-card__skills {
  margin-top: auto;
  padding: 8px 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-text-secondary);
}

.team-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.team-card__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-text-faint);
  transition: color var(--duration-fast) ease;
}

.team-card__social:hover { color: var(--color-text-primary); }
.team-card__social--whatsapp:hover { color: #20d980; }

.team-card__more {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-faint);
}

/* Modal de detalhes do colaborador — comportamento e valores reais de
   ResponsiveTeamCards.tsx (backdrop rgba(0,2,6,.92) + blur(12px), artigo
   max-width 820px desktop em grid 1.15fr/.85fr, borda accent a 44%). */
.team-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu-overlay);
  display: grid;
  place-items: center;
  padding: 18px;
}

.team-modal[hidden] {
  display: none;
}

.team-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 2, 6, 0.92);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.team-modal.is-open .team-modal__backdrop {
  opacity: 1;
}

.team-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  max-height: 620px;
  overflow: auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border: 1px solid rgba(0, 175, 255, 0.44);
  border-radius: 12px;
  background: #05070a;
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.team-modal.is-open .team-modal__card {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.team-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #4b5563;
  border-radius: 5px;
  background: rgba(4, 7, 11, 0.88);
  color: var(--color-white);
  font-size: 18px;
  line-height: 1;
}

.team-modal__photo {
  position: relative;
  min-height: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #06080c;
}

.team-modal__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-modal__body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-modal__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.team-modal__name {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.08;
  color: var(--color-text-primary);
}

.team-modal__description {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #b4bac3;
}

.team-modal__skills {
  margin-top: auto;
  padding: 9px 10px;
  border: 1px solid #28313c;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: #d7dbe2;
}

.team-modal__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ================= About Section ================= */

.about__grid {
  display: grid;
  grid-template-columns: 591fr 591fr;
  gap: 0;
  align-items: stretch;
}

.about__media {
  position: relative;
  /* background-image vem inline no HTML: url() dentro de uma custom
     property resolve relativo à folha de estilo que a CONSOME (sections.css),
     não ao documento que a declara — por isso é setado direto no atributo
     style do elemento em vez de por --variável (bug real encontrado no QA) */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.about__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.about__media-caption {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-faint);
}

.about__content {
  max-width: 442px;
  padding-left: 80px;
}

.about__badges {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}

.about__badge {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.about__badge-value {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--color-accent);
}

.about__badge-label {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ================= Pricing Section ================= */

.pricing__top {
  max-width: 630px;
}

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

.pricing-card {
  padding: 48px;
  border: 1px solid var(--color-border-subtle);
}

.pricing-card + .pricing-card {
  border-left: none;
}

.pricing-card__title {
  font-family: var(--font-heading);
  font-size: 24px;
}

.pricing-card__text {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.pricing-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 24px;
}

.pricing-card__price {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-text-primary);
}

.pricing-card__price-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-faint);
}

.pricing-card .checklist {
  margin-top: 24px;
}

/* botão cheio, texto centralizado — confirmado no vídeo enviado pelo
   usuário (não alinhado à esquerda com seta como a versão anterior) */
.pricing-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 32px;
  padding: 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--color-text-primary);
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.pricing-card__cta span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pricing-card__cta:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ================= Pricing CTA Section ================= */

.pricing-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 48px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}

.pricing-cta__title {
  font-family: var(--font-heading);
  font-size: 24px;
  max-width: 480px;
}

.pricing-cta__text {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-secondary);
  max-width: 480px;
}

/* ================= FAQ Section ================= */

.faq__top {
  max-width: 630px;
  margin-bottom: 48px;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--color-border-subtle);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  text-align: left;
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--color-text-primary);
}

.faq-item__icon {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-text-primary);
  transition: transform var(--duration-fast) ease;
}

.faq-item__icon::before {
  width: 12px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.faq-item__icon::after {
  width: 1.5px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.faq-item.is-open .faq-item__icon::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-overlay) ease;
}

.faq-item__answer-inner {
  overflow: hidden;
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
}

.faq-item__answer p {
  padding-bottom: 24px;
  max-width: 720px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* ================= Defesa geral contra overflow em grid/flex ================= */
/* itens de grid/flex têm min-width:auto por padrão, o que deixa a trilha
   crescer para caber conteúdo intrínseco (texto longo, chips) e pode forçar
   overflow horizontal da página inteira — min-width:0 remove essa armadilha
   em todos os grids de seção (bug real encontrado no QA mobile) */
.stats__grid > *,
.pain-point__grid > *,
.solution__grid > *,
.how-it-works__layout > *,
.team__grid > *,
.about__grid > *,
.pricing__grid > * {
  min-width: 0;
}