/* =============================================================
   servico-seo-aeo-geo.css — específico de
   /servicos/seo-aeo-e-geo/. Carregado só nesta página,
   depois de servico.css. Reaproveita padrões visuais da home
   (fundo neural, marquee, manifesto, painel claro, scroll
   horizontal) e da /servicos/ (etapas "Como trabalhamos"),
   namespaced em svseo-.
   ============================================================= */

/* ---------------------------------------- Quebras de linha limpas */
.svc-hero__title,
.svc-problem__statement,
.svc-section__head h2,
.svc-faq__head h2,
.svc-cta h2 { text-wrap: balance; }

.svc-word { hyphens: none; -webkit-hyphens: none; }

/* ---------------------------------------------- Fundo neural (A)
   Sticky atrás das 3 primeiras seções, footprint zero. */
.svseo-immersive { position: relative; }

/* Sem nenhum fundo próprio no hero (nem o wash radial branco que
   servico.css põe nas outras 16 páginas de serviço) — aqui o hero
   fica exatamente igual à seção 2 (parceiros): só a cor de base
   #0a0a0a, sem textura nenhuma até o campo neural entrar. */
.svc-hero::before { display: none; }

.svseo-hero-bg {
  --field-opacity: 0;
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100svh;
  margin-bottom: -100svh;
  overflow: hidden;
  background: #0a0a0a;
  contain: strict;
  opacity: var(--field-opacity);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

.svseo-hero-bg.is-ready { --field-opacity: 1; }

.svseo-hero-bg__canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #050508;
  pointer-events: none;
}

.svseo-immersive > section {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

/* fallback sem WebGL (mobile) / movimento reduzido — campo estático,
   sem laranja (violeta/ciano suaves, como o shader real). */
.svseo-hero-bg--no-webgl {
  background:
    radial-gradient(60% 50% at 68% 30%, rgba(128, 38, 166, 0.5) 0%, transparent 60%),
    radial-gradient(55% 45% at 30% 72%, rgba(5, 179, 230, 0.38) 0%, transparent 62%),
    radial-gradient(80% 80% at 50% 50%, transparent 35%, rgba(10, 10, 10, 0.85) 100%),
    #0a0a0a;
  opacity: 1;
}

/* O <canvas> interno tem fundo sólido #050508 (regra abaixo) para
   nunca "vazar" enquanto o shader WebGL ainda não desenhou o
   primeiro frame — no modo sem WebGL ele nunca desenha nada, então
   esse fundo sólido ficava cobrindo 100% da área e escondendo o
   gradiente estático acima por completo (fundo "não aparecendo" no
   mobile). Precisa ficar transparente aqui pra revelar o gradiente
   do pai. */
.svseo-hero-bg--no-webgl .svseo-hero-bg__canvas {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .svseo-hero-bg {
    opacity: 1;
    background:
      radial-gradient(60% 50% at 68% 30%, rgba(128, 38, 166, 0.42) 0%, transparent 60%),
      radial-gradient(55% 45% at 30% 72%, rgba(5, 179, 230, 0.32) 0%, transparent 62%),
      #0a0a0a;
  }
}

/* -------------------------------------------- Parceiros / marquee (B) */
/* .svc-page section (mais específica: classe+tipo) define
   padding-block/-inline e venceria estas — todas as regras de
   padding desta página em seções .svseo-* usam .svc-page como prefixo
   para garantir especificidade (0,2,0) &gt; (0,1,1). */
.svc-page .svseo-partners { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* Transição 3→4 (problema→manifesto): cópia literal de
   home.css .home-about-more::after (linha ~302) — gradiente simples,
   sem blur, sentado no fim da 3ª seção do grupo imersivo, preparando
   a entrada no manifesto (preto). A home não sobrepõe pra trás nem
   usa blur; só este gradiente. */
.svseo-problem::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 0;
  height: clamp(10rem, 34vh, 21rem);
  background: linear-gradient(to bottom, transparent, #000000);
  content: "";
  pointer-events: none;
}

.svseo-partners__label {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font: 500 0.66rem/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.svseo-partners__heading {
  margin: 0 auto clamp(1.75rem, 4vw, 3rem);
  max-width: 22ch;
  font: 400 clamp(1.9rem, 3.6vw, 3rem)/1 var(--font-primary);
  letter-spacing: -0.05em;
  text-align: center;
  text-wrap: balance;
}

.svseo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.svseo-marquee__track {
  display: flex;
  width: max-content;
  animation: svseo-marquee 26s linear infinite;
}

.svseo-marquee__set {
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
  padding-right: 1rem;
}

.svseo-marquee__set span {
  display: grid;
  width: clamp(9rem, 15vw, 13rem);
  height: 5.5rem;
  padding: 0.9rem 1.15rem;
  place-items: center;
}

.svseo-marquee__set img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.66;
}

/* Selo da Hostinger já vem com as próprias cores (pílula clara) —
   não uniformizar com o filtro mono dos demais logos. */
.svseo-marquee__badge img {
  filter: none;
  opacity: 1;
  object-fit: contain;
  width: auto;
  max-width: 80%;
  height: auto;
  max-height: 70%;
}

@keyframes svseo-marquee { to { transform: translateX(-50%); } }

@media (max-width: 47.999rem) {
  .svseo-marquee__set { gap: 0.25rem; padding-right: 0.25rem; }
  .svseo-marquee__set span { width: clamp(7.25rem, 31vw, 8.5rem); height: 4.5rem; padding: 0.55rem 0.7rem; }
  .svseo-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svseo-marquee__track { animation-play-state: paused; }
}

/* -------------------------- Manifesto "Evoluímos negócios…" (C)
   Copiado value-for-value de assets/css/pages/home.css:387-430
   (.Horizontal / .Horizontal__text / .heading-xl) + :2324-2341
   (reduced-motion). Re-namespaced svseo-. */
.svseo-manifesto {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 100svh;
  overflow: hidden;
  background: #000000;
}

.svc-page .svseo-manifesto { padding-bottom: 25px; }

.svseo-manifesto__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.svseo-manifesto__text {
  display: flex;
  gap: 4vw;
  width: max-content;
  margin: 0;
  padding-left: 100vw;
  color: var(--color-foreground);
  white-space: nowrap;
  will-change: transform;
}

.svseo-manifesto__word { display: inline-flex; }

.svseo-manifesto__char {
  display: inline-block;
  will-change: transform;
}

.svseo-manifesto .svseo-heading-xl {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 10vw, 12rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .svseo-manifesto {
    height: auto;
    min-height: 60svh;
    padding-inline: 18px;
  }
  .svseo-manifesto__text {
    width: auto;
    padding-left: 0;
    white-space: normal;
    will-change: auto;
  }
}

/* -------------------------------- Painel de fundo claro (D)
   "Como a IBX resolve" e "O que a mídia paga entrega" — fundo
   claro, cantos arredondados no topo, sombra, parallax de entrada
   (mesmo tratamento de .home-key-facts). */
.svseo-panel {
  position: relative;
  z-index: 4;
  overflow: hidden;
  border-radius: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0 0;
  background: #f1f1f0;
  color: #393939;
  box-shadow: 0 -1.5rem 4rem rgba(0, 0, 0, 0.18);
  --svc-ink: #1c1c1c;
  --svc-dim: rgba(10, 10, 10, 0.66);
  --svc-faint: rgba(10, 10, 10, 0.5);
  --svc-line: rgba(10, 10, 10, 0.14);
}

/* Especificidade (0,2,0) para vencer .svc-page section (0,1,1), que
   define padding-block/padding-inline e, sem isso, sobrescreve
   silenciosamente o padding-bottom acima (era a causa real do vão
   grande entre "Como a IBX opera" e o scroll dos 4 pilares). */
.svc-page .svseo-panel {
  padding: clamp(6rem, 11vh, 9rem) var(--page-padding) clamp(2rem, 4vh, 3.5rem);
}

/* "O que a mídia paga entrega": sem cantos arredondados (pedido). */
.svseo-panel--flush {
  border-radius: 0;
  box-shadow: none;
}

.svseo-panel + .svseo-panel { margin-top: -2.5rem; }
.svseo-panel + .svseo-panel--flush { margin-top: 0; }

/* Barra preta ao soltar o pin de "Como trabalhamos": no instante da
   transição (position:fixed → static), o pin-spacer do GSAP pode
   ficar 1 frame com altura diferente da seção real, abrindo uma
   fresta que revela o fundo escuro da página por trás. Não é um
   espaçamento real (medido em repouso, .svseo-process e este painel
   encostam sem vão) — é um problema de timing da transição. Cobrir
   com uma pequena sobreposição garante que a fresta nunca apareça,
   sem mexer visualmente em nada (mesma cor #f1f1f0 dos dois lados). */
.svseo-process + .svseo-panel--flush { margin-top: -0.75rem; }

.svseo-panel__intro {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto clamp(3rem, 7vh, 5.5rem);
  text-align: center;
}

.svseo-panel__diagram {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.svseo-panel__intro h2 {
  margin: 0.8rem 0 0;
  font: 500 clamp(2.6rem, 5vw, 4.6rem)/0.95 var(--font-primary);
  letter-spacing: -0.06em;
  text-wrap: balance;
}

.svseo-panel__intro p {
  max-width: 34ch;
  margin: 1.2rem auto 0;
  color: rgba(10, 10, 10, 0.66);
  font: 400 clamp(0.95rem, 1.1vw, 1.05rem)/1.4 var(--font-interface);
}

/* Marcador vazio, sem afetar layout — serve só de referência de
   posição para o ScrollTrigger de entrada dos cards (ver
   initProofCardsFanIn() em servico-seo-aeo-geo.js). */
.svseo-cards-sentinel { display: block; height: 0; margin: 0; }

.svseo-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.5vw, 1.4rem);
  width: 100%;
  max-width: 66rem;
  margin: 0 auto;
}

.svseo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: clamp(19rem, 26vw, 23rem);
  padding: clamp(1.6rem, 2.4vw, 2.15rem);
  overflow: hidden;
  border-radius: 0.5rem;
  background: #e7e5e3;
  color: #3c3c3d;
}

.svseo-card [data-svseo-step-title] {
  margin: 0;
  font: 400 clamp(2.4rem, 4vw, 3.6rem)/0.85 var(--font-primary);
  letter-spacing: -0.05em;
  color: #1c1c1c;
}

.svseo-card [data-svseo-step-label] {
  margin: 0;
  font: 500 0.66rem/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
}

.svseo-card [data-svseo-step-body] {
  margin: auto 0 0;
  font: 400 0.92rem/1.45 var(--font-interface);
  color: rgba(10, 10, 10, 0.66);
}

/* Mobile: cards correm HORIZONTALMENTE com o scroll da página —
   mesma técnica de .home-key-facts__cards-viewport/__cards/
   .key-fact-card no mobile (home.css:2142-2171 + home.js:463-486,
   gsap.matchMedia "(max-width: 47.999rem)" com pin+scrub movendo o
   track em x). O viewport quebra o padding lateral da seção
   (full-bleed, margin-inline negativo) pra ganhar percurso de
   rolagem; o padding volta pro track, mantendo o alinhamento visual
   do primeiro card com o resto do conteúdo. */
@media (max-width: 47.999rem) {
  .svc-page .svseo-panel { padding-bottom: clamp(2rem, 8vw, 3rem); }

  /* O full-bleed (quebrar o padding lateral da seção) precisa estar
     num WRAPPER separado, nunca no próprio elemento pinado
     (.svseo-cards-viewport): o ScrollTrigger, ao pinar, MEDE a largura
     atual do elemento e a trava via estilo inline (width/max-width)
     — junto com isso ele também zera o margin inline dele (o
     pin-spacer já reserva esse espaço). Um margin-inline negativo
     direto no elemento pinado, então, é sobrescrito e perdido assim
     que o pin é criado, sobrando os 20-40px do --page-padding como
     uma faixa vazia à direita (a "divisão vertical" relatada). Com o
     full-bleed no wrapper (que nunca é pinado), o viewport mede
     100% de largura real desde o início e o pin não tem margin
     nenhum pra "perder". */
  .svseo-cards-bleed {
    margin-inline: calc(-1 * var(--page-padding));
  }

  .svseo-cards-viewport {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
  }

  .svseo-cards {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    width: max-content;
    max-width: none;
    gap: 1rem;
    margin: 0;
    padding-inline: var(--page-padding);
    will-change: transform;
  }

  .svseo-card {
    /* Largura = viewport inteira menos só o padding esquerdo (o
       track não tem padding à direita do último card visível) —
       assim o card ocupa até a borda direita da tela, sem sobrar
       espaço mostrando o começo do próximo card em repouso. O
       próximo card fica então TOTALMENTE fora da tela (depois do
       gap), entrando de fora pra dentro só quando o usuário rola —
       pedido explícito, em vez do "peek" de 82vw copiado da home. */
    flex: 0 0 min(calc(100vw - var(--page-padding)), 28rem);
    min-height: min(58svh, 26rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svseo-panel + .svseo-panel { margin-top: 0; }
}

/* ---------- Scroll horizontal dos cards de frentes (E)
   Valores copiados de home.css:654-685 (home .home-projects).
   Sem divisores verticais (pedido do cliente). */
.svseo-pillars-scroll {
  position: relative;
  z-index: 5;
  overflow: clip;
  background: #f1f1f0;
  color: #393939;
}

.svc-page .svseo-pillars-scroll { padding: 0; }

.svseo-pillars-scroll__viewport {
  position: relative;
  z-index: 2;
  height: 100svh;
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.svseo-pillars-scroll__track {
  position: relative;
  z-index: 2;
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}

.svseo-pillars-scroll__panel {
  flex: 0 0 min(62vw, 40rem);
  width: min(62vw, 40rem);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 2.25rem clamp(2.25rem, 5vw, 5rem);
}

.svseo-pillars-scroll__panel .svseo-index {
  font: 500 0.7rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: rgba(10, 10, 10, 0.5);
}

.svseo-pillars-scroll__panel h3 {
  margin: 0;
  font: 400 clamp(1.6rem, 2.6vw, 2.4rem)/1.05 var(--font-primary);
  letter-spacing: -0.03em;
}

.svseo-pillars-scroll__panel p {
  margin: 0;
  max-width: 34ch;
  font: 400 0.98rem/1.5 var(--font-interface);
  color: rgba(10, 10, 10, 0.66);
}

@media (max-width: 47.999rem) {
  .svseo-pillars-scroll { overflow-x: clip; overflow-y: visible; }
  .svseo-pillars-scroll__viewport {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .svseo-pillars-scroll__track { display: block; width: 100%; height: auto; transform: none !important; }
  .svseo-pillars-scroll__panel {
    width: 100%;
    /* Sem o pin/scroll horizontal (só roda em >=48rem, ver
       initPillarsScroll() em servico-seo-aeo-geo.js), cada card vira um
       bloco na rolagem normal da página. Bloco compacto (não mais
       100svh cheio) com o texto centralizado tanto na vertical
       quanto na horizontal — menos distância de rolagem entre um
       card e o próximo. */
    min-height: 44svh;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(2rem, 7vw, 2.75rem) 20px;
  }

  .svseo-pillars-scroll__panel p { max-width: 30ch; }
  .svseo-pillars-scroll__panel + .svseo-pillars-scroll__panel {
    border-top: 1px solid rgba(10, 10, 10, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svseo-pillars-scroll__viewport { height: auto; overflow-x: auto; }
  .svseo-pillars-scroll__track { transform: none !important; will-change: auto; }
}

/* -------------------- "Como trabalhamos" (13)
   Estrutura/estilo/comportamento copiados de servicos.css e
   servicos-page.js (.process-stage / createProcessPinTimeline):
   seção travada (pin) enquanto as 3 etapas revelam uma a uma com a
   rolagem — não solta antes de mostrar todas. Fundo IGUAL ao de
   "O que entra no trabalho" (#f1f1f0), pedido. */
.svseo-process {
  background: #f1f1f0;
  color: #171717;
}

/* Rede de segurança contra a barra preta: o painel "O que nossa
   equipe te entrega?" tem uma animação de entrada (yPercent) que
   pode deixá-lo levemente deslocado por um instante, expondo o fundo
   escuro da página atrás dele. Em vez de perseguir o tempo exato da
   rolagem (frágil — já falhou 2x), cobrimos essa faixa com a MESMA
   cor clara da seção, sempre presente, independente de timing. */
.svseo-process::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -120px;
  left: 0;
  z-index: 0;
  height: 120px;
  background: #f1f1f0;
  pointer-events: none;
}

/* Só zera o padding VERTICAL (o .svseo-process__stage cuida da própria
   altura) — o padding-inline (margem de segurança lateral) continua
   vindo de .svc-page section, não pode ser zerado junto. */
.svc-page .svseo-process { padding-block: 0; }

.svseo-process__stage {
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(6rem, 13vh, 9.5rem);
  /* Enquanto pinado, o GSAP tira esta div do fluxo (position:fixed) —
     sem fundo próprio, o que aparece por trás é o preto da página
     (main.svc-page/body), não o claro de .svseo-process. Essa era a
     "transição preta" indevida entre o processo e a seção de baixo. */
  background: #f1f1f0;
}

.svseo-process__stage .svc-shell { width: 100%; }

.svseo-process .svc-shell {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 2rem);
}

.svseo-process__head {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

.svseo-process__head .svc-eyebrow {
  grid-column: 1 / 3;
  margin-top: 0.5rem;
  color: rgba(10, 10, 10, 0.5);
}

.svseo-process__head h2 {
  grid-column: 3 / 12;
  margin: 0;
  white-space: nowrap;
  font: 400 clamp(2.6rem, 5vw, 4.7rem)/0.9 var(--font-primary);
  letter-spacing: -0.055em;
}

.svseo-process__steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.svseo-step { display: flex; flex-direction: column; }

.svseo-step [data-svseo-step-label] {
  order: 1;
  margin: 0;
  font: 500 0.82rem/1.25 var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
}

.svseo-step [data-svseo-step-title] {
  order: 2;
  margin: 1.4rem 0 0.9rem;
  font: 400 clamp(1.4rem, 2.25vw, 2.1rem)/1 var(--font-primary);
  letter-spacing: -0.025em;
}

.svseo-step [data-svseo-step-body] {
  order: 3;
  margin: 0;
  max-width: 34ch;
  font: 400 0.92rem/1.35 var(--font-interface);
  color: rgba(10, 10, 10, 0.68);
}

.svseo-step__line {
  order: 4;
  position: relative;
  height: 1px;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  background: rgba(10, 10, 10, 0.14);
}

.svseo-step__line i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 100%;
  height: 2px;
  transform: translateY(-0.5px) scaleX(0);
  transform-origin: 0 50%;
  background: rgba(10, 10, 10, 0.62);
}

@media (max-width: 1023px) {
  .svseo-process__head h2 { grid-column: 1 / -1; font-size: clamp(2.3rem, 8vw, 3.6rem); }
  .svseo-process__head .svc-eyebrow { grid-column: 1 / -1; }
}

/* No mobile as 3 etapas empilhadas em 1 coluna (título + corpo
   completos, cada um em bloco) não cabem em 100svh — o
   .svseo-process__stage tem overflow:hidden (necessário pro pin), então
   o excesso ficava cortado (texto recortado/faltando). Correção
   copiada do padrão real de /servicos/ (servicos.css, mesmo
   media(max-width:767px) em .process-stage/.process-steps/
   .process-step): no mobile cada etapa vira um grid de 2 colunas
   (rótulo à esquerda, título+corpo à direita) em vez de empilhar tudo
   em coluna única — isso compacta a altura o bastante pra caber. */
@media (max-width: 767px) {
  .svseo-process__stage {
    padding-block: 5.5rem 2rem;
  }

  .svseo-process__head h2 { font-size: clamp(1.7rem, 9vw, 2.4rem); }

  .svseo-process__steps {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }

  .svseo-step {
    display: grid;
    grid-template-columns: 25% 75%;
    column-gap: 0.75rem;
  }

  .svseo-step [data-svseo-step-label] {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .svseo-step [data-svseo-step-title] {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: clamp(1.15rem, 4.5vw, 1.4rem);
  }

  .svseo-step [data-svseo-step-body] {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    line-height: 1.2;
  }

  .svseo-step__line {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svseo-step__line i { transform: scaleX(1); }
}

/* ------------------------ "Histórias de clientes" (15)
   Cópia fiel de .home-testimonials/home.js (só leitura na home,
   nada alterado lá). Mesma estrutura, cores e comportamento —
   carrossel de depoimentos com abas, setas e troca automática. */
.svseo-testimonials {
  position: relative;
  z-index: 8;
  min-height: 100svh;
  overflow: hidden;
  background: #f1f1f0;
  color: #3b3b3b;
}

.svc-page .svseo-testimonials {
  padding-block: 35px;
  padding-inline: 0;
}

.svseo-testimonials__inner {
  display: grid;
  min-height: calc(100svh - 70px);
  padding: clamp(7rem, 13vh, 10rem) var(--page-padding) clamp(4rem, 8vh, 6rem);
  overflow: hidden;
  background: transparent;
  grid-template-rows: auto auto 1fr;
}

.svseo-testimonials__header,
.svseo-testimonials__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 1.05fr);
  gap: clamp(4rem, 10vw, 10rem);
  width: min(100%, 68rem);
  margin-inline: auto;
}

.svseo-testimonials__header {
  align-items: end;
  grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 0.65fr);
}

.svseo-testimonials__header h2 {
  max-width: none;
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(3.5rem, 4.7vw, 6.2rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.075em;
  white-space: nowrap;
}

.svseo-testimonials__title-char {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.svseo-testimonials__title-word {
  display: inline-block;
  white-space: nowrap;
}

.svseo-testimonials__header p {
  max-width: 21ch;
  margin: 0 0 0.3rem;
  font-family: var(--font-primary);
  font-size: 0.92rem;
  line-height: 1.18;
}

.svseo-testimonials__divider {
  position: relative;
  width: min(100%, 68rem);
  height: 1px;
  margin: clamp(3rem, 7vh, 5.5rem) auto clamp(3rem, 7vh, 5rem);
  background: rgba(10, 10, 10, 0.14);
}

.svseo-testimonials__divider span {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0 0.45rem;
  background: #f1f1f0;
  font-family: var(--font-primary);
  font-size: 1.1rem;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.svseo-testimonials__body {
  align-items: stretch;
}

.svseo-testimonials__navigation {
  display: flex;
  min-height: 20rem;
  flex-direction: column;
  justify-content: space-between;
}

.svseo-testimonials__tabs {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.svseo-testimonials__tabs button {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(59, 59, 59, 0.36);
  font-family: var(--font-primary);
  font-size: 0.76rem;
  text-transform: uppercase;
  transition: color 450ms ease;
  cursor: pointer;
}

.svseo-testimonials__tabs button span {
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity 350ms ease, transform 450ms ease;
}

.svseo-testimonials__tabs button[aria-selected="true"] {
  color: #343434;
}

.svseo-testimonials__tabs button[aria-selected="true"] span {
  opacity: 1;
  transform: translateX(0);
}

.svseo-testimonials__tabs button:focus-visible,
.svseo-testimonials__arrows button:focus-visible {
  outline: 2px solid #242424;
  outline-offset: 4px;
}

.svseo-testimonials__arrows {
  display: grid;
  width: max-content;
  grid-template-columns: repeat(2, 3.75rem);
}

.svseo-testimonials__arrows button {
  width: 3.75rem;
  height: 3.75rem;
  border: 1px solid rgba(10, 10, 10, 0.16);
  background: transparent;
  color: #343434;
  font-size: 1rem;
  cursor: pointer;
}

.svseo-testimonials__arrows button + button {
  border-left: 0;
}

.svseo-testimonials__stage {
  position: relative;
  display: grid;
  min-height: 20rem;
  grid-template-rows: 1fr auto;
}

.svseo-testimonial {
  grid-area: 1 / 1;
  margin: 0;
}

.svseo-testimonial[hidden] {
  display: none;
}

.svseo-testimonial blockquote {
  max-width: 27ch;
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 2.35vw, 2.75rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.svseo-testimonial figcaption {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}

.svseo-testimonial__avatar {
  display: grid;
  width: 3.7rem;
  height: 3.7rem;
  border: 1px solid rgba(10, 10, 10, 0.16);
  background: linear-gradient(135deg, #d8d8d5, #bdbdb9);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  place-items: center;
}

.svseo-testimonial__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.svseo-testimonial figcaption > span:last-child {
  display: grid;
  gap: 0.2rem;
}

.svseo-testimonial figcaption strong,
.svseo-testimonial figcaption small {
  font-family: var(--font-primary);
  font-weight: 400;
}

.svseo-testimonial figcaption small {
  color: rgba(59, 59, 59, 0.55);
}

.svseo-testimonials__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 13rem);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
}

.svseo-testimonials__stage > .svseo-testimonials__link {
  align-self: end;
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .svseo-testimonials {
    z-index: 9;
    transform: translateZ(0);
  }

  .svseo-testimonials__inner {
    min-height: calc(100svh - 70px);
    padding: 6.75rem 20px 3rem;
  }

  .svseo-testimonials__header,
  .svseo-testimonials__body {
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
  }

  .svseo-testimonials__header {
    gap: 2rem;
  }

  .svseo-testimonials__header h2 {
    max-width: none;
    font-size: clamp(3.25rem, 15vw, 5rem);
    white-space: normal;
  }

  .svseo-testimonials__header p {
    width: min(58%, 14rem);
    margin-left: auto;
    font-size: 0.8rem;
  }

  .svseo-testimonials__divider {
    width: 100%;
    margin-block: 2.75rem;
  }

  .svseo-testimonials__body {
    position: relative;
    grid-template-rows: auto 1fr;
    gap: 2.5rem;
    padding-bottom: 4.75rem;
  }

  .svseo-testimonials__navigation {
    min-height: auto;
  }

  .svseo-testimonials__tabs {
    display: flex;
    width: calc(100vw - 40px);
    margin-right: -20px;
    padding: 0 20px 0 0;
    gap: 1.15rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .svseo-testimonials__tabs::-webkit-scrollbar {
    display: none;
  }

  .svseo-testimonials__tabs button {
    flex: 0 0 auto;
    font-size: 0.68rem;
  }

  .svseo-testimonials__arrows {
    position: absolute;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 2;
  }

  .svseo-testimonials__stage {
    min-height: 25rem;
  }

  .svseo-testimonial blockquote {
    font-size: clamp(1.65rem, 7.2vw, 2.2rem);
  }

  .svseo-testimonials__stage > .svseo-testimonials__link {
    width: min(52vw, 13rem);
    margin: 2rem 0 0 auto;
  }
}

/* -------------------------- CTA de fecho (16)
   Cores invertidas (pedido): fundo claro, texto escuro — mesma cor
   de fundo usada no resto da página (#f1f1f0, ver .svseo-panel/
   .svseo-process/.svseo-testimonials), não um branco à parte. Cantos
   arredondados no topo no padrão do site (.site-footer); a sombra
   (não o contraste de cor) é o que deixa o arredondado visível aqui,
   já que a seção de cima (depoimentos) tem o mesmo fundo claro. */
.svc-cta {
  position: relative;
  margin-top: -2.5rem;
  background: #f1f1f0;
  color: #171717;
  overflow: hidden;
  border-radius: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0 0;
  /* Mesmo estilo do painel "O processo, ponta a ponta" (.svseo-panel):
     a sombra é o que deixa o arredondado visível de verdade — só o
     raio, sem ela, lê como reto à primeira vista. */
  box-shadow: 0 -1.5rem 4rem rgba(0, 0, 0, 0.18);
  --svc-ink: #171717;
  --svc-faint: rgba(10, 10, 10, 0.46);
}

.svc-cta .svc-cta__eyebrow { color: rgba(10, 10, 10, 0.46); }
.svc-cta h2 { color: #171717; }

/* ------------------------- FAQ com a mesma estrutura/alinhamento da
   home (.home-faq): centralizada, container mais estreito (74rem,
   não os 90rem padrão do .svc-shell). O fundo permanece #000 (pedido
   à parte, igual ao rodapé) — só estrutura e alinhamento mudam. */
.svc-faq .svc-shell { max-width: 74rem; }

/* --------------- Transição "Pronto para escalar?" → FAQ
   Cópia fiel de .home-faq-footer-transition (home.css:1534-1563 +
   home.js:922-944): bloco pinado de 100svh com 5 faixas horizontais
   que crescem de baixo pra cima em cascata (a de baixo fecha
   primeiro), cobrindo a tela inteira antes de revelar a seção
   seguinte — que já está logo atrás dela, empurrada com margin-top
   negativo. Na home a transição vai de claro (FAQ) pra escuro
   (rodapé); aqui é a mesma polaridade: CTA clara (#f1f1f0, cor de
   fundo já usada no resto da página) → FAQ escura (#000) — por isso
   as faixas usam a mesma cor #000 da seção que vem depois, e o
   container de fundo usa #f1f1f0, não um branco à parte. */
.svc-cta-faq-transition {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  height: 100svh;
  flex-direction: column;
  overflow: hidden;
  background: #f1f1f0;
  pointer-events: none;
}

.svc-cta-faq-transition span {
  display: block;
  flex: 1 1 20%;
  margin-top: -1px;
  padding-bottom: 1px;
  background: #000000;
  transform: scaleY(0);
  transform-origin: bottom;
  will-change: transform;
}

.svc-cta-faq-transition span:first-child {
  margin-top: 0;
}

.svc-cta-faq-transition + .svc-faq {
  margin-top: -100svh;
}

@media (prefers-reduced-motion: reduce) {
  .svc-cta-faq-transition {
    display: none;
    height: 0;
  }

  .svc-cta-faq-transition + .svc-faq {
    margin-top: -1px;
  }
}

/* `content-visibility:auto` foi removido daqui: o placeholder de
   `contain-intrinsic-size` diverge da altura real e desloca o
   documento quando a seção entra em vista de verdade — como a
   página inteira depende de coordenadas de ScrollTrigger (pins do
   manifesto, do processo e do scroll horizontal), esse desalinhamento
   tardio travava triggers abaixo (ex.: o marquee de segmentos ficava
   preso num estado antigo). Custava mais em corretude do que
   economizava em performance. */