/* ============================================================================
   Kelvin Pilotto — Folha principal
   ----------------------------------------------------------------------------
   Linguagem visual do portfólio de referência, aplicada a uma página de venda.

   A ideia estruturante: a página é uma PILHA DE LAJES. Cada seção é um bloco
   com o topo arredondado em 80px que sobe 80px sobre a seção anterior, então
   a curva do topo sempre recorta o bloco de baixo. Dentro das lajes, as linhas
   de conteúdo alternam um canto gigante — esquerda, direita, esquerda.

   Organização:
     01. Reset e base           07. Cases
     02. Lajes e containers     08. Depoimentos e diferenciais
     03. Tipografia display     09. Processo e FAQ
     04. Botões e header        10. CTA e footer
     05. Hero                   11. Blog e páginas internas
     06. Pilares e sistemas     12. Responsivo
   ========================================================================= */


/* ==========================================================================
   01. Reset e base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  background: var(--canvas);
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-family: var(--font-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-on-light); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sobre laje escura o laranja escuro some — o foco vira branco. */
.slab--dark :focus-visible,
.slab--gray :focus-visible { outline-color: var(--white); }

/* O realce de seleção precisa contrastar com QUALQUER superfície do tema.
   Antes ele era `background: var(--accent)` — a mesma cor do botão cheio:
   ao arrastar sobre "Contratar Website", o realce cobria o botão com a
   própria cor dele e o rótulo sumia. Agora são dois pares fixos: tinta
   sobre claro, branco sobre escuro. */
::selection { background: #1A1730; color: #FFFFFF; }

.slab--dark ::selection,
.card-veil ::selection,
.site-footer ::selection,
.btn--accent::selection,
.btn--accent ::selection,
.btn--warm::selection,
.btn--warm ::selection {
  background: #FFFFFF;
  color: #1A1730;
}


/* ==========================================================================
   02. Lajes e containers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--tight { max-width: 820px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-to-content {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--ink);
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}

.skip-to-content:focus { top: var(--space-4); color: var(--white); }

/* A laje. `position: relative` sem z-index explícito basta: no fluxo, o
   irmão posterior pinta por cima do anterior, que é exatamente a ordem de
   empilhamento que queremos. */
.slab {
  position: relative;
  border-radius: var(--slab-radius) var(--slab-radius) 0 0;
  padding-block: var(--section-y) calc(var(--section-y) + var(--slab-dwell));
  box-shadow: 0 -20px 40px rgba(0,0,0,0.08);
  padding-top: 2em !important;
}

/* O empilhamento só liga com JS, e por um motivo concreto: o ponto de
   encaixe (--slab-stick) tem de ser MEDIDO por laje. Um `top` fixo abaixo do
   cabeçalho gruda a laje antes dela ter rolado inteira — numa laje mais alta
   que a janela, tudo que passa da borda inferior fica escondido para sempre,
   porque a laje seguinte sobe por cima antes daquele trecho poder aparecer.
   Sem script, as lajes ficam no fluxo: perde-se o efeito, nunca o conteúdo. */
.js .slab {
  position: sticky;
  top: var(--slab-stick, var(--header-h));
}

/* O recuo negativo só vale entre lajes: a primeira encosta no hero. */
.slab + .slab,
.hero + .slab {
  margin-top: var(--slab-overlap);
  padding-top: calc(var(--section-y) + var(--slab-radius));
}

.slab--dark  { background: var(--slab-dark); }
.slab--gray  {background: #eee;}
.slab--light { background: var(--canvas-soft); }
.slab--lg    { padding-block: var(--section-y-lg) calc(var(--section-y-lg) + var(--slab-dwell)); }
.slab--lg.slab + .slab {}

.slab--dark h2, .slab--dark h3, .slab--gray h2, .slab--gray h3 {color: #111;}

/* Estes são padrões de laje, não regras de componente — por isso vão dentro
   de :where(), que zera a especificidade. Sem isso, `.slab--gray .card-veil p`
   (0,3,1) venceria `.case-tag` (0,1,0) e engoliria a cor laranja da etiqueta.
   Com :where(), quem manda é o componente, e a laje só define o padrão. */
.slab--dark :where(p, li) { color: var(--text-on-dark); }

/* Na laje cinza o corpo fica em tinta escura: branco sobre #8A8A88 não
   passa em AA fora de tamanho display. Dentro dos cartões translúcidos,
   que são bem mais escuros, o branco volta. */
.slab--gray :where(p, li) { color: var(--ink); }
.slab--gray :where(.card-veil) :where(p, li) { color: var(--text-on-dark); }


/* ==========================================================================
   03. Tipografia display
   ========================================================================== */

/* Rótulo mono-espaçado de abertura de seção. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-on-light);
}

.eyebrow::before {
  content: "";
  inline-size: 26px;
  block-size: 1px;
  flex: none;
  background: currentColor;
}

.slab--dark .eyebrow { color: var(--accent-2-on-dark); }
.slab--gray .eyebrow { color: var(--ink); }
.eyebrow--center { justify-content: center; }

/* Título de laje: 40px em peso 200. O peso ultraleve em corpo grande é a
   assinatura tipográfica da referência. */
.slab-title {
  font-family: var(--font-ui);
  font-size: var(--fs-slab);
  font-weight: 200;
  line-height: var(--lh-flat);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-5);
}

.section-head { max-width: 40rem; margin-bottom: var(--space-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.section-head > p {
  font-size: var(--fs-lead);
  margin: 0;
  text-wrap: pretty;
}


/* ==========================================================================
   04. Botões e header
   ========================================================================== */

/* Botão da referência: fundo transparente, borda de 1,6px, canto reto. */
.btn {
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.6px solid var(--btn-bd);
  border-radius: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn:hover { --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink); color: var(--btn-fg); }
.btn svg { inline-size: 1.05em; block-size: 1.05em; flex: none; }

/* Trilha Website — roxo. */
.btn--accent { --btn-fg: var(--ink); --btn-bg: var(--accent); --btn-bd: var(--accent); }
.btn--accent:hover { --btn-bg: var(--accent-strong); --btn-bd: var(--accent-strong); --btn-fg: var(--ink); }

/* Trilha Sistema — contorno roxo. */
.btn--accent-line { --btn-fg: var(--accent-on-light); --btn-bd: var(--accent-on-light); }
.btn--accent-line:hover { --btn-bg: var(--accent-on-light); --btn-fg: var(--white); }

/* Sobre laje escura ou cinza. */
.btn--light { --btn-fg: var(--white); --btn-bd: var(--white); }
.btn--light:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }

.btn--warm { --btn-fg: var(--slab-dark); --btn-bg: var(--accent); --btn-bd: var(--accent); }
.btn--warm:hover { --btn-bg: var(--accent-strong); --btn-bd: var(--accent-strong); --btn-fg: var(--slab-dark); }

.btn--lg { padding: 16px 32px; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-note { opacity: 0.72; font-weight: 400; }

/* --- Header ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(233, 233, 231, 0.86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

/* Logo "kp": caixa baixa, o k em peso 500 e o p em preto peso 700 —
   exatamente a construção do portfólio. */
.brand {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-decoration: none;
}

.brand span { font-weight: 700; color: var(--ink-pure); }
.brand:hover { color: var(--ink); }
.brand:hover span { color: var(--accent-deep); }

.header-actions { display: flex; align-items: center; gap: var(--space-5); }
.site-header .btn { padding: 10px 20px; font-size: var(--fs-sm); white-space: nowrap; }

/* Seis itens de menu mais o CTA não cabem em 1140px na medida cheia — a
   navegação encolhe um degrau para o botão nunca ser empurrado para fora. */
.site-header .nav-menu { gap: var(--space-4); }
.site-header .nav-menu a { font-size: var(--fs-xs); white-space: nowrap; }

/* --- Botão do menu (só abaixo de 1024px) -------------------------------- */

.menu-toggle {
  display: none;
  inline-size: 44px;
  block-size: 44px;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  margin-inline-end: var(--space-3);
  background: none;
  border: 1.6px solid var(--ink);
  cursor: pointer;
}

/* Três barras feitas de uma só: a do meio é o elemento, as outras dois
   pseudos. Vira X quando aberto. */
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
  display: block;
  inline-size: 18px;
  block-size: 1.6px;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.menu-toggle-bars { position: relative; }
.menu-toggle-bars::before,
.menu-toggle-bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-toggle-bars::before { inset-block-start: -6px; }
.menu-toggle-bars::after  { inset-block-start: 6px; }

.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }


/* ==========================================================================
   05. Hero
   ========================================================================== */

/* GEOMETRIA DA ONDA, em dois numeros usados por todo mundo aqui.

   --wave-h    altura renderizada da onda (ela e achatada de proposito: no
               tamanho natural, razao 4,9:1, a caixa passa de 290px e a
               crista do SVG chega a subir ACIMA do topo da caixa na faixa
               central — foi isso que atropelou o texto do hero).
   --wave-lift quanto a laje preta sobe por cima do hero.

   O respiro inferior do hero e a soma dos dois mais uma folga. Amarrar
   tudo aos mesmos tokens e o que garante que nenhum conteudo volte a ser
   coberto quando a viewport mudar de tamanho. */
:root {
  --wave-h:    clamp(70px, 9vw, 130px);
  --wave-lift: clamp(60px, 7vw, 100px);
}

.hero {
  position: relative;
  z-index: 0;   /* ABAIXO da laje: e o que faz o retrato sair "de tras" da onda */
  padding-block: clamp(1.5rem, 0.5rem + 3vw, 3rem) calc(var(--wave-lift) + var(--wave-h) + -2.5rem);
  overflow: hidden;   /* o mergulho do retrato nao pode gerar barra horizontal */
}

/* Texto e retrato lado a lado, uma coluna cada. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  align-items: end;
}

.hero-copy { padding-block-end: clamp(0.5rem, 2vw, 2.5rem); }

/* O nome, escalonado como o "Kelvin / Piloto" da referencia. */
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 300;
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-tight);
  color: var(--ink-pure);
  margin-bottom: var(--space-5);
}

.hero-title span { display: block; will-change: transform; }
.hero-title .indent { padding-left: 0.62em; }

.hero-lead {
  font-size: var(--fs-lead);
  max-width: 34rem;
  margin-bottom: var(--space-6);
  text-wrap: pretty;
}

.hero-lead strong { color: var(--ink); font-weight: 600; }

.hero .btn-row { margin-bottom: var(--space-7); }

/* Os tres numeros numa linha so. `nowrap` + `flex: 1 1 0` impede que eles
   quebrem para uma segunda linha no desktop, que era como estavam. */
.hero-trust {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}

.hero-trust li {
  flex: 1 1 0;
  min-inline-size: 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent-strong);
}

.hero-trust b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
}

.hero-trust span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.35;
}

/* --- Retrato ------------------------------------------------------------
   PNG recortado, com fundo transparente: nada de background, border-radius
   ou object-fit: cover — qualquer um dos tres desenha uma caixa em volta do
   recorte. Ele mergulha na faixa reservada da onda, e como o hero fica num
   nivel de pilha inferior, a onda passa por cima da barra dele. */

.hero-figure {
  position: relative;
  margin: 0;
  justify-self: center;
  align-self: end;
  margin-block-end: calc(-1 * (var(--wave-lift) + var(--wave-h) * 1.2));
  /* --rise: escrito pelo script a partir da rolagem. Sobe ao descer a
     pagina e volta ao subir — a reversao e automatica porque o valor e
     funcao da posicao, nao de um evento de entrada.; */
  transform: translate3d(0, calc(var(--rise, 0) * -1px), 0);
  will-change: transform;

  /* Levante do retrato, para ele encostar no bloco de texto ao lado. Vive numa
     variável porque no empilhamento do celular ele precisa valer zero: ali o
     retrato fica ABAIXO do texto, e qualquer levante o joga por cima do botão.
     `width` ficava aqui duplicando inline-size logo acima — duas declarações da
     mesma propriedade, e a de baixo vencia calada. */
  bottom: var(--figure-lift, 115px);

  /* 42em, e não min(100%, 42em): o retrato transborda a coluna do grid de
     propósito, e o `overflow: hidden` do .hero apara o que passa. Limitar a
     100% encolheria ele uns 190px no desktop. A declaração vinha duplicada com
     o inline-size acima — mesma propriedade duas vezes, a de baixo vencendo
     calada; agora é uma só. */
  inline-size: 42em;
}

.hero-figure img {
  inline-size: 100%;
  block-size: auto;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.24));
}

/* --- A onda -------------------------------------------------------------
   O SVG do portfolio ja vem preenchido em #111111 e com a base solida: ele
   e a BORDA SUPERIOR da laje preta, nao um enfeite. */

.slab--dark.slab--waved {
  /* z-index removido para respeitar ordem das abas */
  margin-top: calc(-1 * var(--wave-lift));
  padding-top: var(--section-y);
  overflow: visible;   /* a onda vive fora da caixa; nao pode ser cortada */
}

/* bottom:100% cola a onda na aresta superior da laje, qualquer que seja a
   altura dela. Como esta DENTRO da secao, herda o transform da revelacao e
   as duas nunca se separam. */
.slab-wave {
  position: absolute;
  inset-block-end: 100%;
  inset-inline: 0;
  display: block;
  block-size: var(--wave-h);
  margin-block-end: -1px;   /* mata a fresta de subpixel */
  pointer-events: none;
}

/* object-fit: fill achata o SVG ate --wave-h. A onda perde altura relativa
   e ganha horizontalidade — que e como ela aparece no portfolio em telas
   largas. */
.slab-wave img { inline-size: 100%; block-size: 100%; object-fit: fill; }

/* Sem overflow:hidden para conte-lo, o overlay tecnico precisa ficar preso
   a caixa — mesma disputa de ordem, mesma dobra de especificidade. */
.slab--dark.slab--waved::before { inset: 0; }

/* --- Faixa de logos, dentro da laje preta -------------------------------
   Rompe o container e ocupa a largura toda da janela. O truque do 50%/50vw
   funciona dentro de qualquer pai centralizado sem tirar o bloco do fluxo. */

/* Sangria de ponta a ponta SEM unidade de viewport. `100vw` conta a barra de
   rolagem, então a faixa ficava ~15px mais larga que a página e sobrava para
   os dois lados. E era desnecessário: a faixa é filha direta da laje, que já
   vai de borda a borda — quem precisa de recuo é o .container, não ela. */
.logo-strip {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-9);
  inline-size: 100%;
  overflow: hidden;
}

.logo-strip-label {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-on-dark);
  text-align: center;
  margin-bottom: var(--space-6);
}


/* Os wordmarks sao desenhados em tinta escura (#1A1730) para servirem sobre
   fundo claro. Sobre a laje preta eles sumiriam — `brightness(0) invert(1)`
   achata qualquer cor para branco puro, seja qual for o arquivo. */
.logo-strip .swiper-slide img,
.logo-marquee-track img {
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity var(--dur) var(--ease);
}

.logo-strip .swiper-slide img:hover,
.logo-marquee-track img:hover { opacity: 1; }
.logo-strip .swiper-slide h3 { display: none; }




/* ==========================================================================
   06. Números, pilares e sistemas
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }

.stat { padding-top: var(--space-5); border-top: 1px solid var(--line-on-dark); }

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 300;
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: var(--space-2);
}

.stat span { display: block; font-size: var(--fs-sm); color: var(--text-on-dark); line-height: 1.4; }

/* --- Cartão translúcido, base de quase tudo sobre as lajes ------------- */

.card-veil {
  background: var(--card-veil);
  color: var(--white);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card-veil:hover { background: var(--card-veil-up); }

/* O gesto do canto gigante. Alternado por posição no grid, como na
   referência: ímpares abrem à esquerda, pares à direita. */
.corner-l { border-radius: var(--r-giant-row) var(--r-card) var(--r-card) var(--r-card); }
.corner-r { border-radius: var(--r-card) var(--r-giant-row) var(--r-card) var(--r-card); }

/* --- Os 2 pilares ------------------------------------------------------ */

.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }

.pillar {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  background: var(--card-veil);
  color: var(--white);
  transition: background var(--dur) var(--ease);
}

.pillar:hover { background: var(--card-veil-up); }
.pillar--website { border-radius: var(--r-giant-tall) var(--r-card) var(--r-card) var(--r-card); }
.pillar--system  { border-radius: var(--r-card) var(--r-giant-tall) var(--r-card) var(--r-card); }

.pillar-kicker {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.pillar--website .pillar-kicker { color: var(--accent-on-dark); }
.pillar--system  .pillar-kicker { color: var(--accent-2-on-dark); }

.pillar h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-sub);
  font-weight: 200;
  line-height: var(--lh-flat);
  color: var(--white);
  margin-bottom: var(--space-2);
}

.pillar-sub { font-size: var(--fs-sm); color: var(--text-on-dark); margin-bottom: var(--space-6); }

.pillar-price { padding-block: var(--space-2); margin-bottom: var(--space-5); }

.pillar-price b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 300;
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
  color: var(--white);
  margin-bottom: var(--space-2);
}

/* "Sob consulta" é palavra, não cifra: desce um degrau para não competir
   com o R$ 800 do card ao lado. */
.pillar--system .pillar-price b { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); }
.pillar-price span { font-size: var(--fs-sm); color: var(--text-on-dark); }

.pillar-features { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }

.pillar-features li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-on-dark);
}

.pillar-features svg { inline-size: 18px; block-size: 18px; margin-top: 0.28em; }
.pillar--website .pillar-features svg { color: var(--accent-on-dark); }
.pillar--system  .pillar-features svg { color: var(--accent-2-on-dark); }
.pillar-features b { color: var(--white); font-weight: 600; }

.pillar .btn { margin-top: auto; }
.pillar-foot { margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--text-on-dark); text-align: center; }

/* --- Linhas de sistemas / diferenciais --------------------------------- */

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

.row-item {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6) clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

/* Alternância do canto gigante ao longo da lista. */
.rows .row-item:nth-child(odd)  { border-radius: var(--r-giant-row) var(--r-card) var(--r-card) var(--r-card); }
.rows .row-item:nth-child(even) { border-radius: var(--r-card) var(--r-giant-row) var(--r-card) var(--r-card); }

.row-icon {
  inline-size: 68px;
  block-size: 68px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-on-dark);
  color: var(--accent-2-on-dark);
}

.row-icon svg { inline-size: 26px; block-size: 26px; }

.row-item h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--white); margin-bottom: var(--space-1); }
.row-item p { font-size: var(--fs-sm); color: var(--text-on-dark); margin: 0; }


/* ==========================================================================
   07. Cases — slider
   --------------------------------------------------------------------------
   Paleta local do componente. O tema roda num acento só (laranja); o roxo
   volta aqui porque a seção pede o par roxo/laranja do portfólio, e fica
   fechado neste escopo para não vazar de volta para o resto da página.

   Dois tons de cada acento, e não um: #FF9500 dá 2,1:1 sobre o cartão claro
   e reprova em AA até como texto grande — então superfície e traço usam o
   tom vivo e todo TEXTO usa a versão profunda da mesma família. No roxo é o
   mesmo caso: #6B4DFF passa no botão (5,1:1 com branco) mas cai para 4,4:1
   no rótulo de 12px sobre o roxo claro, onde entra #5A3EE0.

   O cartão claro envolve TAMBÉM os dots e o contador. Soltos sobre a laje
   cinza (#8A8A88) o contador daria 1,4:1 e o dot ativo 1,6:1 — invisíveis.
   ========================================================================== */

.cases-slider {
  --cs-purple:      #6B4DFF;   /* superfícies: botão e glifo das setas */
  --cs-purple-ink:  #5A3EE0;   /* texto pequeno sobre o roxo claro */
  --cs-purple-soft: #F0EBFF;   /* fundo das tags */
  --cs-orange:      #FF9500;   /* dot ativo, hover de superfície */
  --cs-orange-ink:  #C25100;   /* a métrica, que é texto */
  --cs-surface:     #F9F7FF;
  --cs-ink:         #1A1A1A;
  --cs-muted:       #6B7280;
  --cs-dot:         #E5E7EB;

  max-inline-size: 1200px;
  margin-inline: auto;
  background: var(--cs-surface);
  border-radius: 20px;
  overflow: hidden;            /* é o que corta o canto da foto */
  box-shadow: 0 18px 40px rgba(26, 23, 48, 0.18);
  transition: box-shadow 0.4s var(--ease);
}

.cases-slider:hover { box-shadow: 0 30px 60px rgba(107, 77, 255, 0.2); }

.cases-slider-stage { position: relative; }

/* --- Slide ---------------------------------------------------------------- */

/* Prefixado com .kp-cases-swiper de propósito. O CSS do Swiper é injetado pelo
   addon de carrossel dentro do <body>, ou seja, DEPOIS da folha do tema — e o
   `.swiper-slide { display: block; height: 100% }` dele empata em
   especificidade com `.case-slide` e ganha na ordem. Sem o prefixo, o slide
   perde o grid e a foto ocupa a largura toda. */
.kp-cases-swiper .case-slide {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-block-size: 400px;
  block-size: auto;
  background: var(--cs-surface);
}

/* Slide fora de foco sai da ordem de tabulação e da árvore de acessibilidade:
   sem isso o Tab entra em links de projetos que ninguém está vendo. O atraso
   só na visibilidade é o tempo da transição — quem sai precisa continuar
   visível enquanto se apaga. A regra depende de .swiper-initialized, então
   sem JS nenhum slide é escondido. */
.swiper-initialized .case-slide {
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
}

.swiper-initialized .case-slide.swiper-slide-active {
  visibility: visible;
  transition-delay: 0s;
}

/* A foto é absoluta de propósito: fora do fluxo, ela não entra no cálculo da
   altura da linha do grid, que fica sendo ditada pelo texto. Com a imagem no
   fluxo, um mockup 4:3 esticaria o slide para ~470px e a altura mudaria de
   case para case. */
.case-slide-media {
  position: relative;
  min-block-size: 260px;
  overflow: hidden;
}

.case-slide-media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.case-slide:hover .case-slide-media img { transform: scale(1.05); }

.case-slide-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding: 40px;
}

.case-slide-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--cs-ink);
  margin: 0;
}

.case-slide-text {
  font-size: 15px;
  line-height: var(--lh-body);
  color: var(--cs-muted);
  margin: 0;
}

/* --- Métrica -------------------------------------------------------------- */

.case-metric { margin: 0; }

.case-metric b {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--cs-orange-ink);
  font-variant-numeric: tabular-nums;
}

.case-metric span { font-size: 15px; color: var(--cs-muted); }

/* --- Tags ----------------------------------------------------------------- */

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-tags li {
  font-size: 12px;
  font-weight: 600;
  color: var(--cs-purple-ink);
  background: var(--cs-purple-soft);
  padding: 6px 12px;
  border-radius: 16px;
}

/* --- Botão ---------------------------------------------------------------- */

.case-slide-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--cs-purple);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              scale var(--dur) var(--ease);
}

.case-slide-btn:hover,
.case-slide-btn:focus-visible {
  background: var(--cs-orange);
  color: var(--ink-pure);
  text-decoration: underline;
  scale: 1.05;
}

.case-slide-btn svg {
  inline-size: 16px;
  block-size: 16px;
  transition: transform var(--dur-fast) var(--ease);
}

.case-slide-btn:hover svg { transform: translateX(4px); }

/* --- Setas ---------------------------------------------------------------- */

/* Fundo sólido, e não transparente como num slider sobre fundo chapado: aqui
   a seta se apoia na foto do case, e um glifo roxo direto sobre a imagem
   aparece ou some conforme o mockup que estiver embaixo. */
.cases-arrow {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--cs-purple);
  box-shadow: 0 6px 20px rgba(26, 23, 48, 0.22);
  cursor: pointer;
  z-index: 2;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              scale var(--dur) var(--ease);
}

.cases-arrow:hover { background: var(--cs-surface); color: var(--cs-orange-ink); scale: 1.1; }
.cases-arrow--prev { inset-inline-start: 24px; }
.cases-arrow--next { inset-inline-end: 24px; }
.cases-arrow svg { inline-size: 22px; block-size: 22px; }

/* --- Dots e contador ------------------------------------------------------ */

.cases-slider-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: 24px 30px 26px;
}

.cases-dots {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* Especificidade acima da do bundle do Swiper, que pinta o bullet de preto
   a 20% de opacidade. */
.cases-dots .swiper-pagination-bullet {
  inline-size: 10px;
  block-size: 10px;
  margin: 0;
  border-radius: var(--r-pill);
  background: #acacac;
  opacity: 1;
  cursor: pointer;
  transition: background var(--dur) var(--ease), inline-size var(--dur) var(--ease),
              scale var(--dur) var(--ease);
}

.cases-dots .swiper-pagination-bullet:hover { scale: 1.2; }

/* O ativo muda de FORMA, não só de cor: laranja sobre o cartão claro dá
   2,1:1, contraste que não sustenta sozinho a leitura de "é este aqui". */
.cases-dots .swiper-pagination-bullet-active {
  inline-size: 26px;
  background: var(--cs-orange);
}

.cases-counter {
  grid-column: 3;
  justify-self: end;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--cs-muted);
}

/* ==========================================================================
   08. Depoimentos e diferenciais
   ========================================================================== */

.kp-reviews-swiper {
  padding-bottom: var(--space-6);
}

.quote {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 1.4rem + 2vw, 3rem);
  background: var(--white);
  height: auto;
}

.quote:nth-child(odd)  { border-radius: var(--r-giant-card) var(--r-card) var(--r-card) var(--r-card); }
.quote:nth-child(even) { border-radius: var(--r-card) var(--r-giant-card) var(--r-card) var(--r-card); }

.quote-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.quote-stars { display: flex; gap: 3px; color: var(--accent-deep); margin-bottom: var(--space-4); }
.quote-stars svg { inline-size: 16px; block-size: 16px; }

.quote blockquote {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .quotes .quote {
    flex: 0 0 calc(50% - (var(--space-6) / 2));
    scroll-snap-align: start;
  }
}

.quote-author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }

/* `.quote-author .quote-avatar` e não só `.quote-avatar`: o avatar é um
   <span> dentro de .quote-author, e a regra de metadados abaixo
   (`.quote-author span`, 0-1-1) venceria a classe sozinha (0-1-0) — o texto
   do avatar saía cinza sobre o roxo, 1,03:1. */
.quote-author .quote-avatar {
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.quote-author b { display: block; font-size: var(--fs-sm); color: var(--ink); }
.quote-author span { display: block; font-size: var(--fs-xs); color: var(--text); }

/* --- Diferenciais (sobre o canvas claro) ------------------------------- */

.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); }

.why-item { padding-top: var(--space-5); border-top: 1px solid var(--line); transition: border-color var(--dur) var(--ease); }
.why-item:hover { border-top-color: var(--accent-strong); }
.why-icon { color: var(--accent-on-light); margin-bottom: var(--space-4); }
.why-icon svg { inline-size: 26px; block-size: 26px; }
.why-item h3 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: var(--space-2); }
.why-item p { font-size: var(--fs-sm); margin: 0; }

/* Os diferenciais ficam direto sobre a laje cinza, sem cartão por baixo.
   Ali o branco dá 3,46:1 no h3 (que a 20px não conta como texto grande) e
   o roxo do ícone, 1,9:1 — os dois passam a usar a tinta escura, que é o
   mesmo tratamento que o corpo de texto já recebe nessa laje. */
.slab--gray .why-item h3,
.slab--gray .why-icon { color: var(--ink); }
.slab--gray .why-item { border-top-color: rgba(26, 23, 48, 0.28); }
.slab--gray .why-item:hover { border-top-color: var(--ink); }
.slab--light .why-item:hover { border-top-color: var(--accent-strong); }


/* ==========================================================================
   09. Processo e FAQ
   ========================================================================== */

.tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }

.track { padding: clamp(2rem, 1.4rem + 2vw, 2.75rem); background: var(--white); }
.tracks .track:nth-child(odd)  { border-radius: var(--r-giant-card) var(--r-card) var(--r-card) var(--r-card); }
.tracks .track:nth-child(even) { border-radius: var(--r-card) var(--r-giant-card) var(--r-card) var(--r-card); }
.pillars .track { border-radius: var(--r-card) var(--r-giant-card) var(--r-card) var(--r-card); }

.track-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-6); }
.track-head h3 { font-family: var(--font-ui); font-size: var(--fs-sub); font-weight: 200; line-height: var(--lh-flat); margin: 0; }
.track-badge { font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.track--website .track-badge { color: var(--accent-on-light); }
.track--system  .track-badge { color: var(--accent-2-on-light); }

.steps { display: grid; gap: var(--space-5); }
.step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-4); }

/* Trilho ligando os números. */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19.5px;
  top: 44px;
  bottom: calc(-1 * var(--space-5) - 4px);
  inline-size: 1px;
  background: var(--line);
}

.step-num {
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid currentColor;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.track--website .step-num { color: var(--accent-on-light); }
.track--system  .step-num { color: var(--accent-2-on-light); }

.step-body { padding-top: 0.4rem; }
.step-body b { display: block; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); }
.step-body span { font-size: var(--fs-sm); color: var(--text); }

/* --- Modern Horizontal Timeline ------------------------------------------ */
.track-head--modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-8);
  text-align: center;
}
.track-badge--modern {
  display: inline-flex;
  align-items: center;
  background: rgba(26, 23, 48, 0.05); /* very light gray/ink */
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink);
  margin-top: var(--space-2);
}
.slab--dark .track-badge--modern,
.slab--gray .track-badge--modern {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

.timeline-modern {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  position: relative;
  text-align: left;
  padding-bottom: 8em;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  position: relative;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--delay, 0s);
}
.process-inline.is-in .timeline-step {
  opacity: 1;
  transform: translateY(0) scale(1);
}
html:not(.js) .timeline-step {
  opacity: 1;
  transform: none;
}

/* Horizontal line connecting the steps */
.timeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px; /* Half of the 48px marker height */
  left: 48px; /* Start immediately after the marker */
  right: calc(-1 * var(--space-4)); /* Stretch across the grid gap to the next step */
  height: 1px;
  background: var(--line);
  z-index: 0;
  transition: background var(--dur) var(--ease);
}
.slab--dark .timeline-step:not(:last-child)::after {
  background: var(--line-on-dark);
}

.timeline-marker {
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-bottom: var(--space-4);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.slab--dark .timeline-marker {
  background: var(--slab-dark);
  border-color: var(--line-on-dark);
}

.timeline-num {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.slab--dark .timeline-num {
  color: var(--text-on-dark);
}

/* Hover Effects */
.timeline-step:hover .timeline-marker {
  transform: scale(1.1);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(255, 184, 112, 0.2);
}
.timeline-step:hover .timeline-num {
  color: var(--accent-deep);
}
.slab--dark .timeline-step:hover .timeline-num {
  color: var(--accent);
}
.timeline-step:hover:not(:last-child)::after {
  background: var(--accent);
}

.timeline-content h4 {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--ink);
}
.slab--dark .timeline-content h4 {
  color: var(--white);
}

.timeline-content p {
  font-size: var(--fs-sm);
  color: #e5e5e5;
  line-height: var(--lh-snug);
}
.slab--dark .timeline-content p {
  color: var(--text-on-dark);
}

@media (max-width: 860px) {
  .timeline-modern {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .timeline-step {
    flex-direction: row;
    gap: var(--space-4);
  }
  .timeline-step:not(:last-child)::after {
    /* Change to vertical line */
    top: 48px;
    left: 24px; /* Center of the marker horizontally */
    bottom: calc(-1 * var(--space-6)); /* Stretch down to the next marker */
    right: auto;
    width: 1px;
    height: auto;
  }
  .timeline-marker {
    margin-bottom: 0;
    flex-shrink: 0;
  }
}

/* --- FAQ ---------------------------------------------------------------- */

.faq { display: grid; gap: var(--space-3); }

.faq-item {
  background: var(--white);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: background var(--dur) var(--ease);
}

.faq-item[open] { background: var(--white); }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) clamp(1.25rem, 1rem + 1vw, 2rem);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq-q::-webkit-details-marker { display: none; }

.faq-icon { inline-size: 22px; block-size: 22px; flex: none; position: relative; color: var(--accent-on-light); }

/* Sinal de + que vira − ao abrir: duas barras, sem ícone externo. */
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  inset-inline: 2px;
  inset-block-start: 50%;
  block-size: 1.6px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.faq-icon::before { transform: translateY(-50%); }
.faq-icon::after  { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: translateY(-50%); opacity: 0; }

.faq-a { padding: 0 clamp(1.25rem, 1rem + 1vw, 2rem) var(--space-5); }
.faq-a p { max-width: 62ch; font-size: var(--fs-sm); color: var(--text); text-wrap: pretty; }

/* Abertura animada onde o navegador suporta; onde não, abre sem transição. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size var(--dur) var(--ease), opacity var(--dur) var(--ease),
                content-visibility var(--dur) allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; opacity: 1; }
}


/* ==========================================================================
   10. CTA final e footer
   ========================================================================== */

.cta-final { text-align: center; }
.cta-final > .container { max-width: 46rem; }

.cta-final .cta-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--white);
  margin-bottom: var(--space-4);
}

.cta-final > .container > p { font-size: var(--fs-lead); color: var(--text-on-dark); margin-bottom: var(--space-7); }
.cta-final .btn-row { justify-content: center; }
.cta-note { margin-top: var(--space-6); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.55); }

/* --- Footer ------------------------------------------------------------- */

.site-footer { background: var(--slab-dark); color: var(--text-on-dark); padding-block: var(--space-9) var(--space-6); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line-on-dark);
}

.site-footer .brand { color: var(--white); display: inline-block; margin-bottom: var(--space-4); }
.site-footer .brand span { color: var(--accent-2); }
.footer-about { font-size: var(--fs-sm); max-width: 30rem; margin: 0; color: var(--text-on-dark); }

.footer-col h4 {
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.footer-col ul, .footer-col .nav-menu { display: grid; gap: var(--space-3); }

.footer-col a, .footer-col .nav-menu a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.footer-col a:hover { color: var(--accent-2); }
.footer-col svg { inline-size: 15px; block-size: 15px; flex: none; opacity: 0.75; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.45);
}

.footer-bottom p { margin: 0; }
.footer-bottom a { color: inherit; }


/* ==========================================================================
   11. Blog e páginas internas
   ========================================================================== */

/* Seção simples, sem geometria de laje — usada nas páginas internas. */
.section { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }

.page-hero { padding-block: var(--space-9) var(--space-8); }
.page-hero h1 { font-size: var(--fs-h1); font-weight: 300; color: var(--ink-pure); margin-bottom: var(--space-3); }
.page-hero > .container > p { font-size: var(--fs-lead); max-width: 44rem; margin: 0; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text);
  margin-bottom: var(--space-5);
}

.breadcrumb a { color: var(--text); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-on-light); text-decoration: underline; }

.quote {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 1.4rem + 2vw, 3rem);
    background: var(--white);
  }
  
  .quote:nth-child(odd)  { border-radius: var(--r-giant-card) var(--r-card) var(--r-card) var(--r-card); }
  .quote:nth-child(even) { border-radius: var(--r-card) var(--r-giant-card) var(--r-card) var(--r-card); }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.grid-cards .card:nth-child(odd)  { border-radius: var(--r-giant-card) var(--r-card) var(--r-card) var(--r-card); }
.grid-cards .card:nth-child(even) { border-radius: var(--r-card) var(--r-giant-card) var(--r-card) var(--r-card); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.card-media { aspect-ratio: 16 / 9; background: var(--canvas-soft); overflow: hidden; }
.card-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.card-placeholder { display: grid; place-items: center; block-size: 100%; color: var(--line); }
.card-placeholder svg { inline-size: 40px; block-size: 40px; }

.card-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5) var(--space-6) var(--space-6); }
.card-title { font-size: var(--fs-h3); font-weight: 600; margin-bottom: var(--space-2); }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--accent-on-light); }
.card-excerpt { font-size: var(--fs-sm); margin: 0; }

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text);
}

/* --- Post individual ---------------------------------------------------- */

.post-single { padding-block: var(--space-8) var(--section-y); }
.post-single > .container { max-width: 820px; }

.post-category { font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent-on-light); margin-bottom: var(--space-3); }
.post-title { font-size: var(--fs-h1); font-weight: 300; color: var(--ink-pure); margin-bottom: var(--space-4); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.post-featured-image { margin: var(--space-7) 0; }
.post-featured-image img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-giant-card) var(--r-card) var(--r-card) var(--r-card); }

.post-content { font-size: 1.0625rem; line-height: 1.85; color: var(--text); }
.post-content h2, .post-content h3 { color: var(--ink); margin-top: var(--space-8); }
.post-content img { border-radius: var(--r-md); margin-block: var(--space-6); }
.post-content ul, .post-content ol { margin: 0 0 var(--space-5); padding-left: var(--space-5); }
.post-content li { list-style: revert; margin-bottom: var(--space-2); }

.post-content blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent-strong);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--ink);
}

.post-content code { font-family: ui-monospace, Consolas, monospace; font-size: 0.875em; background: var(--canvas); padding: 0.15em 0.4em; border-radius: 3px; }
.post-content pre { background: var(--slab-dark); color: #e9e9e7; padding: var(--space-5); border-radius: var(--r-md); overflow-x: auto; }
.post-content pre code { background: none; padding: 0; }

.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-7); }
.post-tags li { padding: 0.3rem 0.9rem; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--text); }

.related-posts { padding-block: var(--section-y); }
.related-posts .slab-title { color: var(--ink); }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }

.pagination a, .pagination span {
  min-inline-size: 44px;
  padding: 0.6rem 0.9rem;
  display: grid;
  place-items: center;
  border: 1.6px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .is-current { background: var(--ink); border-color: var(--ink); color: var(--white); }

.error-404 { padding-block: var(--section-y-lg); text-align: center; }

.error-404 .code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 11vw, 11rem);
  font-weight: 200;
  letter-spacing: var(--ls-tight);
  line-height: 1;
  color: var(--ink-pure);
  margin-bottom: var(--space-4);
}

.error-404 h1 { font-size: var(--fs-h1); font-weight: 300; }
.error-404 p { max-width: 34rem; margin-inline: auto; margin-bottom: var(--space-6); }
.error-404 .btn-row { justify-content: center; }

.nav-menu { display: flex; align-items: center; gap: var(--space-5); }
.nav-menu a { font-size: var(--fs-sm); font-weight: 500; color: var(--text); text-decoration: none; }
/* O `.active` do CMS compara caminho de URL: como todos os itens de âncora
   apontam para a home, ele marcaria os seis ao mesmo tempo. Quem define o
   item atual aqui é o scrollspy, via `.is-current`. */


/* --- Horizontal Layout Variants ---------------------------------------- */
.pillar--horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-6);
  max-width: 760px;
  margin: 0 auto;
}
.pillar--horizontal .pillar-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pillar--horizontal .pillar-features {
  flex: 1;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.process-inline {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.slab--dark .process-inline {
  border-top-color: var(--line-on-dark);
}
.process-inline .track-head {
  justify-content: center;
}
.steps--horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
}
.steps--horizontal .step {
  flex: 1 1 250px;
  max-width: 300px;
}

/* ==========================================================================
   12. Responsivo
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --slab-radius: 56px; --slab-overlap: -56px; }

  /* --- Menu em painel ---------------------------------------------------
     Abaixo de 1024px os seis itens viram um painel abaixo do cabeçalho.
     Fechado ele fica com altura zero e `visibility: hidden`, o que também
     o tira da ordem de tabulação — esconder só com opacidade deixaria os
     links focáveis no escuro. */
  .menu-toggle { display: flex; }

  .site-header .container { flex-wrap: wrap; }

  .header-actions {
    position: absolute;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--gutter);
    background: var(--canvas);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-block-size: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-block-size var(--dur) var(--ease), visibility 0s linear var(--dur);
  }

  .header-actions.is-open {
    max-block-size: 80vh;
    overflow-y: auto;
    visibility: visible;
    padding-block: var(--space-4) var(--space-5);
    transition: max-block-size var(--dur) var(--ease), visibility 0s;
  }

  .site-header .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header .nav-menu li { border-block-end: 1px solid var(--line); }

  .site-header .nav-menu a {
    display: block;
    padding-block: var(--space-4);
    font-size: var(--fs-body);
  }

  .site-header .nav-menu a::after { display: none; }
  .site-header .nav-menu a.is-current { color: var(--accent-on-light); font-weight: 600; }

  .header-cta { margin-block-start: var(--space-5); }

  /* Empilhado, o retrato vai DEPOIS do texto: ele conserva o mergulho sob a
     onda, e a margem negativa dele nao pode puxar o texto para cima — que e
     o que aconteceria se continuasse com `order: -1`. */
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  /* --figure-lift zerado: empilhado, o retrato vem DEPOIS do botão, e os 115px
     de levante do desktop o faziam subir 83px por cima dele. */
  .hero-figure {
    order: 0;
    justify-self: center;
    inline-size: min(78%, 380px);
    --figure-lift: 0px;
  }
  .hero-copy { padding-block-end: 0; }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about-col { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .pillars, .quotes, .tracks { grid-template-columns: 1fr; }
  .pillar--horizontal { flex-direction: column; align-items: stretch; }
  .steps--horizontal { flex-direction: column; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Slider de cases vira pilha: imagem em cima, conteudo embaixo. */
  .kp-cases-swiper .case-slide { grid-template-columns: 1fr; min-block-size: 500px; }
  .case-slide-media { block-size: 250px; min-block-size: 250px; }
  .case-slide-body { padding: 20px; gap: 16px; }
  .case-slide-title { font-size: 24px; }
  .case-metric b { font-size: 34px; }

  /* As setas descem para a faixa da imagem: centradas no cartao inteiro, na
     pilha elas cairiam em cima do texto. 44px e o alvo de toque minimo. */
  .cases-arrow {
    inset-block-start: 125px;
    inline-size: 44px;
    block-size: 44px;
  }

  .cases-arrow--prev { inset-inline-start: 12px; }
  .cases-arrow--next { inset-inline-end: 12px; }

  /* Contador embaixo dos dots: lado a lado numa tela estreita, o "1 de 5
     projetos" empurraria os dots para fora do centro. */
  .cases-slider-foot {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-3);
    padding: 20px;
  }

  /* Mesma ideia dos dots das avaliações: o desenho fica em 12px e o alvo de
     toque cresce por padding, sem abrir buraco no layout. */
  .cases-dots { grid-column: 1; gap: 0; }
  .cases-dots .swiper-pagination-bullet {
    inline-size: 12px;
    block-size: 12px;
    padding: 11px 7px;
    background-clip: content-box;
    box-sizing: content-box;
    margin-block: -11px;
  }
  .cases-dots .swiper-pagination-bullet-active { inline-size: 30px; }
  .cases-counter { grid-column: 1; justify-self: center; }

  
  /* O canto gigante encolhe junto — 560px num card de 400px vira um borrão. */
  :root { --r-giant-row: 140px; --r-giant-card: 96px; --r-giant-tall: 110px; }
}

@media (max-width: 620px) {
  :root { --slab-radius: 40px; --slab-overlap: -40px; --header-h: 68px;
          --r-giant-row: 96px; --r-giant-card: 72px; --r-giant-tall: 80px; }

  .why { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }

  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .site-header .btn-row { flex-direction: row; }

  .brand { font-size: 1.875rem; }

  /* O ícone em coluna própria aperta o texto no celular. */
  .row-item { grid-template-columns: 1fr; gap: var(--space-4); }
  .row-icon { inline-size: 52px; block-size: 52px; }
  .row-icon svg { inline-size: 22px; block-size: 22px; }

  /* Abaixo de 620px os tres numeros lado a lado ficariam com ~90px cada.
     Aqui eles podem quebrar. */
  .hero-trust { flex-wrap: wrap; gap: var(--space-4); }
  .hero-trust li { flex: 1 1 8rem; }

  /* Alvos de toque do rodapé. Empilhados, os links tinham 34px de altura e
     ficavam colados uns nos outros — errar o vizinho era o resultado normal.
     O gap da lista encolhe porque a altura do próprio link passa a separar. */
  .footer-col ul, .footer-col .nav-menu { gap: 0; }

  .footer-col a, .footer-col .nav-menu a {
    min-block-size: 44px;
    align-items: center;
  }

  /* O logo é o link de volta para a home e tinha 36×38. */
  .site-header .brand {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* Os quatro números ficam em 2×2 até o fim da escala. Em coluna única eles
   viravam quatro blocos altos com um traço entre cada um, e a prova social
   — que se lê de relance — passava a exigir meia tela de rolagem. O rótulo
   quebra em duas linhas nessa largura, e tudo bem: o número é o que salta. */
@media (max-width: 400px) {
  .stats { gap: var(--space-4); }
}


/* ==========================================================================
   Preferências do usuário e impressão
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .logo-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; inline-size: 100%; }
  .card:hover { transform: none; }
  .case-slide:hover .case-slide-media img { transform: none; }
  .cases-arrow:hover, .case-slide-btn:hover { scale: 1; }

  /* Sem transição, o atraso de visibilidade deixaria o slide anterior
     visível 0,6s por cima do novo. */
  .swiper-initialized .case-slide { transition-delay: 0s; }
}

@media print {
  .site-header, .cta-final, .logo-strip, .slab-wave, .site-footer,
  .cases-arrow, .cases-slider-foot { display: none; }

  /* No papel não há slider: os cases voltam a ser uma pilha de blocos, todos
     visíveis, um por vez na vertical. */
  .cases-slider { box-shadow: none; }
  .swiper-initialized .case-slide { visibility: visible; }
  /* !important porque o Swiper escreve transform/opacity inline em cada slide
     e no wrapper — só a cascata do autor não alcança estilo inline. */
  .kp-cases-swiper .swiper-wrapper { display: block; transform: none !important; }
  .kp-cases-swiper .case-slide { transform: none !important; opacity: 1 !important; }
  body { background: #fff; color: #000; }
  .slab, .js .slab {
    position: static;
    border-radius: 0;
    margin-top: 0;
    padding-block: var(--section-y);
    background: #fff;
    box-shadow: none;
  }
}


/* ==========================================================================
   13. Movimento
   --------------------------------------------------------------------------
   Três camadas, todas desligadas em prefers-reduced-motion:

     a) ENCAIXE DAS LAJES — cada laje sobe e assenta ao entrar na tela, com
        uma curva que ultrapassa levemente o ponto final. É o que dá a
        leitura de pasta deslizando para dentro da pilha.
     b) REVELAÇÃO EM CASCATA — o conteúdo de cada laje entra escalonado,
        via --i (índice do item), para a seção "acontecer" em vez de só
        aparecer pronta.
     c) DERIVA DO DISPLAY — as duas linhas do hero se afastam conforme a
        página rola, como o "Kelvin / Piloto" da referência.

   O JS só liga/desliga classes e escreve a variável --drift; toda a
   animação em si é CSS, então roda no compositor.
   ========================================================================== */

/* --- a) Encaixe das lajes ---------------------------------------------- */

/* Animação de encaixe das lajes (Slide Up) */
.js .slab[data-settle] {
  opacity: 0;
  transform: translate3d(0, 60px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js .slab[data-settle].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Não há limpeza de will-change aqui de propósito: as lajes entram e saem
   o tempo todo (a revelação é reversível), entao elas permanecem como
   camadas promovidas — que é justamente o que mantém o encaixe fluido. */

/* --- b) Revelação em cascata -------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.js [data-reveal].is-in { opacity: 1; transform: translate3d(0, 0, 0); }

/* Animações laterais desativadas */

/* --- c) Deriva do display do hero --------------------------------------- */

/* --drift vai de 0 (topo) a 1 (hero fora de vista); o JS só escreve o
   número, a interpolação é do compositor. */
.hero-title { --drift: 0; }
.hero-title .line-a { transform: translate3d(calc(var(--drift) * -7%), 0, 0); }
.hero-title .line-b { transform: translate3d(calc(var(--drift) * 12%), 0, 0); }

/* O retrato tem transform proprio, guiado por --rise (secao 05) — nao
   pode ser sobrescrito aqui, ou o deslize dele para tras da onda some. */

/* --- Contadores ---------------------------------------------------------- */

/* tabular-nums trava a largura dos dígitos: sem isso o número treme
   horizontalmente enquanto conta. */
.stat b, .counter { font-variant-numeric: tabular-nums; }

/* --- Textura técnica nas lajes escuras ----------------------------------- */

/* Malha fina que deriva devagar. Fica atrás do conteúdo e não intercepta
   ponteiro; é o único elemento puramente decorativo da página. */
.slab--dark { overflow: hidden; }

.slab--dark::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255, 184, 112, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 184, 112, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, #000, transparent 78%);
  animation: grid-drift 34s linear infinite;
  pointer-events: none;
}

.slab--dark > .container { position: relative; z-index: 1; }

@keyframes grid-drift {
  from { transform: none; }
  to   { transform: translate3d(72px, 72px, 0); }
}

/* --- Navegação: item da seção em vista ----------------------------------- */

.nav-menu a {
  position: relative;
  padding-block: 4px;
  transition: color var(--dur-fast) var(--ease);
}

/* Sublinhado que cresce do centro — marca a seção em vista sem mexer no
   espaço ocupado pelo item. */
.nav-menu a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 2px;
  background: var(--accent-strong);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}

.nav-menu a:hover::after { transform: scaleX(0.4); }
.nav-menu a.is-current {color: var(--accent-strong);}
.nav-menu a.is-current::after { transform: scaleX(1); }

/* --- Barra de progresso da leitura --------------------------------------- */

.scroll-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  z-index: 120;
  background: var(--accent-strong);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* --- Respeito a prefers-reduced-motion ------------------------------------
   O bloco geral lá em cima já zera as durações, mas transform e opacity
   iniciais são estado, não animação: sem zerá-los aqui, quem pede menos
   movimento veria a página em branco. */

@media (prefers-reduced-motion: reduce) {
  /* rows e cases não aparecem aqui: o deslocamento lateral deles já está
     restrito a `prefers-reduced-motion: no-preference`. */
  .js .slab[data-settle],
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .hero-title .line-a,
  .hero-title .line-b { transform: none; }
  .hero-figure { transform: none; }

  .slab--dark::before { animation: none; }
  .scroll-progress { display: none; }
}

/* --- SECTION BG --------------------------------------------------------- */
.slab--pricing {
  background: #eeeeee; /* Light gray */
  padding-block: var(--section-y) calc(var(--section-y) + var(--slab-dwell));
}

.slab--pricing h2, .slab--pricing p {
  color: var(--ink);
}

.slab--pricing-system {
  background: linear-gradient(180deg, #ffb870, #b47435);
  padding-block: var(--section-y) calc(var(--section-y) + var(--slab-dwell));
}

.slab--pricing-system .pr-col-header .slab-title,
.slab--pricing-system .track-head .slab-title,
.slab--pricing-system .step-body b {
  color: #000000;
}

.slab--pricing-system .pr-col-header p,
.slab--pricing-system .pr-col-header .eyebrow,
.slab--pricing-system .step-body span {
  color: #ffffff;
}

/* --- GRID LAYOUT --------------------------------------------------------- */
.pricing-reviews-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: center;
  padding-top: 48px;
}

.pr-grid-col {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1024px) {
  .pricing-reviews-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* --- COLUMN HEADERS ------------------------------------------------------ */
.pr-col-header {
  margin-bottom: 24px;
}
.pr-col-header .eyebrow {
  margin-bottom: 8px;
  color: var(--text);
}
.pr-col-header .slab-title {
  margin-bottom: 8px;
  color: var(--ink);
}

/* --- PRICING CARD (LIGHT PREMIUM STYLE) --------------------------------- */
.pricing-card--light {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(15,23,42,0.08);
  border: 1px solid #E5E7EB;
}

.pricing-card-top-border {
  display: none;
}

.pricing-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 16px;
  margin-bottom: 8px;
}

.pricing-card-price {
  font-family: var(--font-display);
  font-size: 49px;
  letter-spacing: -3px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E5E7EB;
}

.pricing-card-price-suffix {
  font-size: 16px;
  color: rgba(0,0,0,0.6);
  font-weight: 500;
  font-family: var(--font-ui);
  letter-spacing: 1px;
}

/* "R$ 800" a 49px não cabe ao lado do parcelamento numa tela de 375px: o preço
   quebrava entre "R$" e "800", e o sufixo em duas linhas. Aqui o preço ocupa
   uma linha inteira e o parcelamento vai para baixo — que é a ordem em que se
   lê preço, e não uma quebra no meio do número. */
@media (max-width: 620px) {
  /* nowrap vai no PAI porque "R$ 800" é nó de texto solto no HTML, sem
     elemento próprio para receber a regra. O sufixo tem linha inteira e cabe
     sem quebrar, então herdar o nowrap não atrapalha. */
  .pricing-card-price {
    flex-wrap: wrap;
    white-space: nowrap;
    font-size: 42px;
    letter-spacing: -2px;
    gap: 4px;
  }

  .pricing-card-price-suffix { flex-basis: 100%; letter-spacing: 0; }
}

.pricing-card-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 24px;
}

.pricing-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pricing-card-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--ink);
}

.pricing-card-features svg {
  width: 24px;
  height: 24px;
  color: var(--accent); /* check-circle-fill uses currentColor for circle and var(--ink) for check */
  flex-shrink: 0;
}

.pricing-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  padding: 0 32px;
  height: 48px;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  border: 1px solid var(--accent);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: auto;
}

.pricing-card-btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.pricing-card-btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--ink);
}

.pricing-card-btn:hover svg {
  transform: translate(2px, -2px);
}

/* --- GOOGLE REVIEWS CAROUSEL --------------------------------------------- */
.kp-reviews-swiper {
  width: 100%;
  padding: 24px 0 48px 0; /* Padding bottom for pagination */
  margin: -24px 0 -48px 0; /* Offset padding to keep alignment */
}

.google-review-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  height: auto;
  cursor: grab;
}

.google-review-card:active {
  cursor: grabbing;
}

.google-review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(15,23,42,0.08);
}

.grc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.grc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.grc-initials {
  background: #e2e8f0;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

/* min-inline-size: 0 é o que permite ESTA coluna encolher em vez de espremer.
   Item de flex tem largura mínima automática = min-content, então sem isso o
   nome e o cargo defendem a própria largura empurrando um ao outro. */
.grc-meta {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-inline-size: 0;
}

.grc-name {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.grc-role {
  font-size: 13px;
  color: #64748b;
}

.grc-google {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
}

/* No celular o selo do Google desce para uma linha própria. Na mesma linha ele
   travava 125px de largura (o rótulo é nowrap), sobravam 73px para nome e
   cargo, e "Milly Ausburg" virava três linhas de uma palavra. */
@media (max-width: 620px) {
  .grc-header { flex-wrap: wrap; }

  .grc-google {
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    order: 3;
  }
}

.grc-google svg {
  width: 24px;
  height: 24px;
  color: #4285F4; /* Google Blue roughly, though could be multi-color */
}

/* 12px é o piso de tamanho de texto do tema. A 11px o rótulo já pedia esforço
   em tela pequena, e ele é justamente a etiqueta que dá procedência à
   avaliação. */
.grc-google span {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
}

.grc-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.grc-stars {
  display: flex;
  gap: 2px;
  color: #fbbc04; /* Google star gold */
}

.grc-stars svg {
  width: 18px;
  height: 18px;
}

.grc-date {
  font-size: 13px;
  color: #94a3b8;
}

.grc-text {
  font-size: 15px;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 24px;
  flex-grow: 1;
}

.grc-footer {
  margin-top: auto;
}

.grc-project-badge {
  display: inline-block;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 12px;
}

/* Swiper pagination colors for this section */
/* O ponto continua com 8px de desenho; quem cresce é a área de toque, via
   padding + background-clip. Sem isso o alvo tem 8×8 — um terço do mínimo de
   24px do WCAG 2.2, e impossível de acertar com o polegar. */
.kp-reviews-swiper .swiper-pagination-bullet {
  background-color: #cbd5e1;
  opacity: 1;
  inline-size: 8px;
  block-size: 8px;
  padding: 12px;
  background-clip: content-box;
  box-sizing: content-box;
  margin: -12px 0;
}

/* background-color, e NÃO o atalho `background`: o atalho reseta todas as
   sub-propriedades que não cita, inclusive background-clip. Com ele aqui, o
   ponto ativo voltava a pintar a caixa inteira e virava uma bolota de 32px. */
.kp-reviews-swiper .swiper-pagination-bullet-active {
  background-color: #f97316;
}