/* ==========================================================================
   SECTIONS — hero, fundo de vídeo, image flip e gradientes
   Cards, lista de trabalhos e depoimentos ficam em cards.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
/* 200vh de altura com -100vh de margem: o vídeo fica sticky enquanto
   a seção seguinte sobe por cima. É o truque do original. */
.hero-bg-video.section {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start;
  /* 280vh com margem -180vh: a seção seguinte continua começando no mesmo
     lugar (100vh), mas o fundo sticky fica PRESO até 180vh de scroll — o
     céu segue visível atrás da segunda seção (transparente) em vez de
     sair de cena assim que ela termina de subir. */
  height: 280vh;
  margin-bottom: -180vh;
  padding-top: 0;
  padding-bottom: 0;
  /* A área excedente permanece no fundo da página durante o scroll. */
  background-color: var(--swatch--neutral-xxdark);
}
.hero-bg-video.container {
  position: absolute;
  top: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}
.hero-bg-video_section-grid { position: absolute; inset: 0 0 auto; width: 100%; height: 100vh; }
.hero_heading { max-width: 18ch; }
.hero_heading em { font-style: normal; color: var(--swatch--primary-accent); }
.hero_scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font--primary-family);
  font-size: var(--size--10px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--swatch--shade-light-55);
}

/* --------------------------------------------------------------------------
   VÍDEO DE FUNDO
   Sem data-player-src, a foto recebe Ken Burns e faz as vezes do vídeo.
   Com src, o <video> entra por cima e os controles aparecem.
   -------------------------------------------------------------------------- */
.bunny-bg_wrapper { position: relative; width: 100%; }
/* z-index 1 faz o fundo do hero atravessar a section seguinte: o fundo dela
   fica coberto, mas o conteúdo (.container, z-10) flutua por cima. É assim
   que hero e a próxima seção compartilham um fundo só — como no original. */
.bunny-bg_wrapper.is-hero-bg { position: sticky; top: 0; z-index: 1; height: 100vh; }

.bunny-bg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius--sm);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--swatch--neutral-xdark);
}
.is-hero-bg .bunny-bg { border-radius: 0; }

/* O texto do hero assenta no céu por sombra própria, não por véu na foto */
.hero-bg-video .content-center_wrapper {
  text-shadow:
    0 2px 26px rgb(1 0 27 / 0.55),
    0 1px 3px rgb(1 0 27 / 0.4);
}

.bunny-bg__video,
.bunny-bg__placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bunny-bg__video { z-index: 1; }
.bunny-bg__placeholder { z-index: 0; }
/* sem src o <video> é removido pelo JS; este seletor cobre o intervalo antes disso */
.bunny-bg__video:not([src]) { display: none; }

/* Ken Burns — só no modo foto. Pan e zoom lentos dão a leitura de vídeo. */
[data-player-status="placeholder"] .bunny-bg__placeholder {
  animation: ken-burns 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes ken-burns {
  from { transform: scale(1.06) translate3d(-1.5%, -1%, 0); }
  to   { transform: scale(1.2) translate3d(2%, 1.5%, 0); }
}

/* grão desligado no hero: o céu vai cru, sem véu nem textura */
.is-hero-bg .bunny-bg::before { content: none; }

/* grão por cima da imagem: tira o aspecto de foto parada */
.bunny-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation: grao 1.1s steps(3) infinite;
}
@keyframes grao {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-3%, 2%, 0); }
  66%  { transform: translate3d(2%, -3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* véu escuro para o texto do hero respirar sobre a foto */
.is-hero-bg .bunny-bg::after {
  /* Sem véu sobre o céu — pedido explícito. A legibilidade do título fica
     por conta do text-shadow abaixo e do sky-dim durante o scroll.
     Medido: branco sobre o céu cru dá ~3:1 no ponto mais claro. */
  content: none;
}

/* ---- spinner de carregamento ---- */
.bunny-bg__loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00000054;
  color: var(--swatch--neutral-light);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease--main), visibility 0.3s;
}
[data-player-status="loading"] .bunny-bg__loading { opacity: 1; visibility: visible; }
.bunny-bg__loading-svg { width: 2.5rem; height: 2.5rem; }

/* ---- botão play/pause ---- */
.bunny-bg__playpause {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
}
/* só faz sentido quando existe vídeo de verdade */
[data-player-status="playing"] .bunny-bg__playpause,
[data-player-status="paused"] .bunny-bg__playpause,
[data-player-status="ready"] .bunny-bg__playpause,
[data-player-status="loading"] .bunny-bg__playpause { display: flex; }

.bunny-bg__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  padding: 0.8125em;
  border: 1px solid #ffffff1a;
  border-radius: 50%;
  background-color: #6464644d;
  -webkit-backdrop-filter: blur(1em);
  backdrop-filter: blur(1em);
  color: var(--swatch--neutral-light);
  cursor: pointer;
  transition: background-color 0.3s var(--ease--main);
}
.bunny-bg__btn:hover { background-color: #64646480; }
.bunny-bg__btn svg { width: 100%; height: 100%; }
.bunny-bg__play-svg { display: block; }
.bunny-bg__pause-svg { display: none; }
[data-player-status="playing"] .bunny-bg__play-svg { display: none; }
[data-player-status="playing"] .bunny-bg__pause-svg { display: block; }

@media screen and (max-width: 479px) {
  .bunny-bg__btn { width: 2.25em; height: 2.25em; padding: 0.6em; }
  .bunny-bg__playpause { bottom: 0.5rem; left: 0.5rem; }
}

/* movimento reduzido: foto parada, sem pan e sem grão animado */
@media (prefers-reduced-motion: reduce) {
  [data-player-status="placeholder"] .bunny-bg__placeholder { animation: none; transform: scale(1.06); }
  .bunny-bg::before { animation: none; }
}

/* --------------------------------------------------------------------------
   IMAGE FLIP (3 mídias em crossfade + etiquetas sincronizadas)
   -------------------------------------------------------------------------- */
.image-flip_block {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: 100%;
}
.image-flip_image-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin-left: 1px;
  margin-right: 1px;
  border-radius: var(--radius--sm);
  overflow: hidden;
}
.image-flip_image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s var(--ease--main);
}
.image-flip_image.is-active { opacity: 1; }
/* As etiquetas saem do centro para o canto superior esquerdo. No centro
   elas pousavam em cima do assunto da imagem — o cubo, o visor — e
   competiam com o texto que as próprias peças já trazem. No canto elas
   viram legenda do painel, não elemento sobre ele. */
.image-flip_text-wrapper {
  position: absolute;
  top: clamp(0.875rem, 1.6vw, 1.25rem);
  left: clamp(0.875rem, 1.6vw, 1.25rem);
  z-index: 5;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 0.25rem;
}
/* Sem font-family, font-size, text-transform ou letter-spacing de propósito:
   herda a tipografia do corpo, como no original. O mono em caixa alta que
   eu tinha posto aqui engrossa demais numa pílula desse tamanho. */
.image-flip_text {
  margin-bottom: 0;
  padding: 0.625rem;
  border-radius: var(--radius--xs);
  /* na seção clara a pílula precisa ser navy para existir sobre o claro */
  background-color: var(--swatch--brand-navy);
  color: var(--swatch--neutral-light);
  line-height: var(--line-height--sm);
  transition: background-color 0.55s var(--ease--main);
}
/* A ativa troca o FUNDO e a TINTA juntos. Só o fundo mudava, e o texto
   claro herdado ficava em 1.05:1 sobre o lima — praticamente invisível.
   Preto sobre lima dá 17.97:1. */
.image-flip_text.is-active {
  background-color: var(--swatch--primary-accent);
  color: #000000;
}

/* --------------------------------------------------------------------------
   GRADIENTES
   -------------------------------------------------------------------------- */
.brand-xxdark-gradient { z-index: 1; background-image: none; }
/* Os três cards se diferenciam por PROFUNDIDADE, não por matiz: o sistema
   tem duas cores e não há três matizes para distribuir.

   Os CAMPOS são todos navy de propósito. Construir um gradiente grande a
   partir do lima leva os tons médios para verde-musgo — o "eco" que a
   paleta antiga tinha. O lima é cor de MARCA, não de campo: ele entra nos
   elementos por cima (botão, label), onde a área é pequena e ele lê
   elétrico em vez de vegetal. */
/* TESTE — cards em CREME uniforme: o mesmo creme das seções claras, com
   uma lavada quase imperceptível do matiz de cada card só para eles não
   ficarem idênticos. Sobre o navy da página funcionam como folhas. */
.brand-gradient,
.deep-gradient,
.mono-gradient {
  z-index: 1;
  /* via --card-base, NÃO background-color: cards.css carrega depois e o
     background-color de lá venceria (mesma especificidade, ordem decide) */
  --card-base: var(--swatch--neutral-cream);
  /* creme puro, sem aura de matiz — os três cards ficam idênticos e a
     única cor vem da imagem que sangra à direita */
  background-image: none;
}

/* VIDRO NO CREME
   Mesma leitura dos cards de fase, adaptada à restrição daqui: o texto é
   navy sobre creme, então a película não pode ficar transparente demais.
   Some a isso o véu de escurecimento do empilhamento (o ::after com
   --stack-dim), que escurece ainda mais durante o empilhamento. Em 0.89
   o creme continua creme (#e5e8e3 contra #eef1ea sólido), o vidro
   aparece nas arestas e o texto segue folgado em AA. */
.pricing-model-card[class*="-gradient"] {
  --card-base: transparent;
  background-color: rgba(238, 241, 234, 0.89);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
  border-color: rgba(255, 255, 255, 0.55);
  /* fio de luz na aresta de cima e sombra própria, como quina de vidro */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
              0 1.5rem 4rem rgba(1, 0, 27, 0.42);
  color: var(--swatch--brand-navy);
}
/* Sem backdrop-filter o creme translúcido deixaria o navy da página subir
   por baixo do texto. Aí ele volta a ser sólido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pricing-model-card[class*="-gradient"] { background-color: var(--swatch--neutral-cream); }
}
.pricing-model-card[class*="-gradient"] .heading { color: var(--swatch--brand-navy); }
.pricing-model-card[class*="-gradient"] .bullet_wrapper { border-top-color: rgba(1, 0, 27, 0.14); }
.pricing-model-card[class*="-gradient"] .bullet_wrapper p { color: rgba(1, 0, 27, 0.72); }
/* lima sobre creme dá 1.0:1 — o CTA vira navy sólido */
.pricing-model-card[class*="-gradient"] .btn-animate-chars {
  border-color: var(--swatch--brand-navy);
  color: var(--swatch--neutral-light);
}
.pricing-model-card[class*="-gradient"] .btn-animate-chars__bg { background-color: var(--swatch--brand-navy); }
.pricing-model-card[class*="-gradient"] .btn-animate-chars:hover { color: var(--swatch--brand-navy); }
.pricing-model-card_content-wrapper, .stack-card__media { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   VÉU DO CÉU — escurece o topo conforme a página desce.
   Fica ACIMA do grão e do scrim (z-index 4) porque é o último estado: ao
   final do hero a tela inteira já é o navy da marca, e a seção seguinte
   sobe sobre um fundo chapado em vez de sobre a foto.
   A opacidade é dirigida por --sky-dim, que o GSAP scrubba no scroll.
   -------------------------------------------------------------------------- */
.sky-dim {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  /* fecha no fundo da página, não no navy da tinta: senão o céu
     escurece até o preto e aparece uma emenda contra a seção seguinte */
  background-color: var(--swatch--neutral-xxdark);
  opacity: var(--sky-dim, 0);
}

/* ==========================================================================
   PÁGINAS DE SPRINT v2 — os componentes seguem a geometria da referência:
   heros divididos, cards de fase com textura de colunas, escada pixelada,
   listas de check e o método em acordeão. Pele e conteúdo são os nossos.
   ========================================================================== */

/* ---------- HERO DIVIDIDO — texto à esquerda, mídia à direita ---------- */
.hero-split.section {
  position: relative;
  overflow: hidden;
  /* A nav é sticky com margem negativa: sem esta folga o título entra por
     baixo do logo — era o bug visível no topo das páginas de sprint.
     nav-height vem do JS; o fallback cobre o primeiro paint. */
  padding-top: calc(var(--nav-height, 5rem) + 4rem);
  padding-bottom: 0;
}
.hero-split_grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 1.625rem;
  align-items: center;
  min-height: 72vh;
}
.hero-split_copy {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 34rem;
}

/* galeria vertical em duas colunas que rolam sozinhas (marca) */
/* ---------- CARDS DE VIDRO DO HERO -----------------------------------
   Duas colunas passando em sentidos opostos, como a galeria que havia
   antes — mas de vidro gelado em vez de fotografia. Cada card carrega
   uma palavra que já existe na página (as quatro fases e os entregáveis
   dos planos), então a coluna reforça a oferta em vez de decorar.
   A máscara nas pontas evita que os cards apareçam e sumam num corte
   seco; o laço usa duas cópias da lista, então -50% volta ao início. */
.hero-glass {
  position: relative;
  isolation: isolate;
  height: min(84vh, 52rem);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  /* Esmaecimento CURTO. Com fotografia dava para fundir 12% de cada lado
     sem estranheza; com uma chapa branca sólida o mesmo fade faz o card
     parecer que se dissolve, e ainda apagava a etiqueta, que fica no pé
     do card. 4% basta para tirar o corte seco. */
  -webkit-mask-image: linear-gradient(transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 4%, #000 96%, transparent 100%);
}
/* Vidro só lê como vidro se houver o que refratar. O fundo aqui é liso,
   então o desfoque devolvia exatamente a mesma cor e o card ficava
   indistinguível do fundo — separado só pela borda. Este brilho fica
   ATRÁS das colunas e é o que aparece através delas. */
.hero-glass::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 24% 18%, rgba(92, 200, 255, 0.30) 0%, transparent 68%),
    radial-gradient(34% 28% at 82% 44%, rgba(203, 255, 84, 0.16) 0%, transparent 70%),
    radial-gradient(42% 34% at 30% 78%, rgba(92, 200, 255, 0.22) 0%, transparent 72%);
  filter: blur(46px);
}

.hero-glass_col {
  display: flex;
  flex-flow: column;
  gap: 1.25rem;
  will-change: transform;
  animation: hero-glass-up 46s linear infinite;
}
.hero-glass_col.is-rev { animation-duration: 58s; animation-direction: reverse; }
@keyframes hero-glass-up { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .hero-glass_col { animation: none; } }

.hero-glass_item {
  flex: none;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: 1.25rem;
  border-radius: clamp(0.875rem, 1.6vw, 1.25rem);
  /* o vidro: branco translúcido sobre o navy, com o fio de luz na quina
     de cima e sombra própria — sem os dois ele vira só um retângulo
     mais claro, não vidro */
  position: relative;
  overflow: hidden;
  /* VIDRO JATEADO BRANCO. Quase opaco de propósito: o material da
     referência é uma chapa fosca, não uma janela — quase não se vê o que
     está atrás, o que se vê é a LUZ espalhada pela superfície.
     As ondas de cinza vêm dos gradientes; o grão vem do ::before. */
  background-color: rgba(255, 255, 255, 0.9);
  background-image:
    linear-gradient(112deg,
      rgba(0, 0, 0, 0.07) 0%, rgba(0, 0, 0, 0.01) 16%,
      rgba(0, 0, 0, 0.06) 34%, rgba(0, 0, 0, 0) 52%,
      rgba(0, 0, 0, 0.05) 70%, rgba(0, 0, 0, 0) 86%,
      rgba(0, 0, 0, 0.04) 100%),
    radial-gradient(70% 55% at 18% 22%, rgba(0, 0, 0, 0.07) 0%, transparent 72%),
    radial-gradient(60% 50% at 88% 78%, rgba(0, 0, 0, 0.05) 0%, transparent 70%);
  -webkit-backdrop-filter: blur(24px) saturate(115%);
  backdrop-filter: blur(24px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95),
              0 1rem 2.5rem rgba(1, 0, 27, 0.45);
  font-family: var(--font--primary-family);
  font-size: var(--size--12px);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.35;
  /* chapa clara pede tinta escura */
  color: rgba(1, 0, 27, 0.72);
}
/* O GRÃO. É ele que separa "branco translúcido" de "vidro jateado": a
   superfície fosca tem microrrelevo, e sem ele a chapa vira um retângulo
   liso. Ruído fractal em SVG, multiplicado sobre o branco — sem arquivo
   de imagem, escala em qualquer tamanho e pesa alguns bytes. */
.hero-glass_item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.34;
  mix-blend-mode: multiply;
}

/* O reflexo: uma faixa de luz atravessando a quina superior esquerda.
   É esse brilho de aresta que o olho lê como superfície de vidro. */
.hero-glass_item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(134deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 24%,
    transparent 46%);
}
.hero-glass_item > * { position: relative; z-index: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-glass_item { background-color: rgba(248, 249, 250, 0.97); }
}

/* cartão de mídia único (produto) + brilho na base do hero */
.hero-media_card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  border-radius: var(--radius--lg);
  background: linear-gradient(150deg, #2e3540, var(--swatch--accent-royal));
}
.hero-media_card img { max-width: 86%; height: auto; }
.hero-glow::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -12vh;
  height: 46vh;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%,
    color-mix(in srgb, var(--swatch--accent-pink) 38%, transparent) 0%,
    color-mix(in srgb, #2e3540 46%, transparent) 45%,
    transparent 78%);
}

/* ---------- ESCADA PIXELADA — divisor entre seções ---------- */
.pixel-steps {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  pointer-events: none;
}
/* A cor tem de ser a da SEÇÃO DE CIMA, que os degraus prolongam para
   dentro da seção clara. Estava em --swatch--brand-navy (#01001b), que
   depois da migração virou a TINTA e não o fundo: por isso os blocos
   saíam mais pretos que a seção que continuam.
   A altura é o valor cheio vezes --steps-grow, que o scroll escala de 0
   a 1: a faixa entra reta e os quadrados descem conforme a página desce. */
.pixel-steps i {
  flex: 1 1 0;
  background-color: var(--swatch--neutral-xxdark);
  height: calc(var(--h) * var(--steps-grow, 1));
}
.pixel-steps i:nth-child(1),  .pixel-steps i:nth-child(12) { --h: 1.25rem; }
.pixel-steps i:nth-child(2),  .pixel-steps i:nth-child(11) { --h: 2rem; }
.pixel-steps i:nth-child(3),  .pixel-steps i:nth-child(10) { --h: 2.75rem; }
.pixel-steps i:nth-child(4),  .pixel-steps i:nth-child(9)  { --h: 3.5rem; }
.pixel-steps i:nth-child(5),  .pixel-steps i:nth-child(8)  { --h: 4.25rem; }
.pixel-steps i:nth-child(6),  .pixel-steps i:nth-child(7)  { --h: 5rem; }
.section.has-steps { padding-top: 0; }
.section.has-steps > .container { margin-top: 3.5rem; }
.hero-split .pixel-steps { position: absolute; left: 0; right: 0; bottom: 0; }

/* ---------- CABEÇALHO DIVIDIDO — copy fixa à esquerda, corpo à direita -- */
.split-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.625rem;
  align-items: start;
  width: 100%;
}
.split-head_copy {
  position: sticky;
  top: calc(var(--nav-height) + 2rem);
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.split-head_copy .heading { margin-bottom: 0; }
.split-head_body { display: flex; flex-flow: column; gap: 1.5rem; min-width: 0; }
/* ---------- CARDS DE FASE — creme translúcido, sem glow ------------- */
.phase-card {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: 7rem;
  padding: 2.5rem;
  border-radius: var(--radius--sm);
  min-height: 24.5rem;
  position: relative;
  /* creme translúcido, mesma película dos cards da home (0.89): abaixo
     disso o navy da página sobe e o creme vira cinza */
  background-color: rgba(238, 241, 234, 0.89);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
              0 1.5rem 4rem rgba(1, 0, 27, 0.42);
  color: var(--swatch--brand-navy);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .phase-card { background-color: var(--swatch--neutral-cream); }
}
/* sobre creme o texto inverte: lima e branco somem, navy é quem lê */
.phase-card .heading { color: var(--swatch--brand-navy); }
.phase-card p { color: rgba(1, 0, 27, 0.72); }
.phase-card.is-accent {
  border-color: rgba(150, 200, 40, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8),
              0 1.5rem 4rem rgba(1, 0, 27, 0.42);
}
.phase-card_top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font--primary-family);
  font-size: var(--size--12px);
  letter-spacing: 1px;
}
.phase-card_top { color: rgba(1, 0, 27, 0.62); }
.phase-card_body { display: flex; flex-flow: column; gap: 0.75rem; max-width: 46rem; }
.phase-card_body .heading { margin-bottom: 0; }
.phase-card_list {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: column;
  gap: 0.375rem;
  font-size: var(--size--14px);
}
.phase-card_list li::before { content: "• "; }

/* ---------- LISTA DE CHECKS (círculo + tique no acento) ---------------- */
.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: column;
  gap: 0.875rem;
}
.check-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--swatch--shade-light-75);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.08em;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 1px solid var(--swatch--primary-accent);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.42em;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid var(--swatch--primary-accent);
  border-bottom: 2px solid var(--swatch--primary-accent);
  transform: rotate(-45deg);
}
:is([background-color="light"], [background-color="cream"]) .check-list li {
  color: var(--swatch--shade-xdark-80);
}

/* ---------- PLANOS — duas colunas separadas pela linha do grid --------- */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.plan-grid { gap: 1.625rem; }
.plan {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1.5rem;
  min-height: 26.25rem;
  padding: 2.5rem;
  border-radius: var(--radius--sm);
  background-color: #ffffff;
  border: 1px solid rgba(1, 0, 27, 0.10);
  box-shadow: 0 0.75rem 2rem rgba(1, 0, 27, 0.07);
  color: var(--swatch--brand-navy);
}
.plan .heading { margin-bottom: 0; color: var(--swatch--brand-navy); }
.plan .check-list li { color: rgba(1, 0, 27, 0.75); }
/* lima sobre branco dá 1.02:1 — o anel e o tique do check viram navy */
.plan .check-list li::before { border-color: rgba(1, 0, 27, 0.28); }
.plan .check-list li::after { border-color: var(--swatch--brand-navy); }
/* e o botão, pelo mesmo motivo, vira navy sólido */
.plan .btn-animate-chars { border-color: var(--swatch--brand-navy); color: var(--swatch--neutral-light); }
.plan .btn-animate-chars__bg { background-color: var(--swatch--brand-navy); }
.plan .btn-animate-chars:hover { color: var(--swatch--brand-navy); }
.plan .button-wrapper { margin-top: 1rem; }

/* ---------- AGENDE UMA CONVERSA + FAQ ---------------------------------- */
.intro-faq_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.625rem;
  align-items: start;
  width: 100%;
}
.intro-col {
  position: sticky;
  top: calc(var(--nav-height) + 2rem);
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 1.25rem;
}
/* Era o avatar de um depoimento reaproveitado aqui, o que sugeria uma
   pessoa específica da ECOSS que não existe. Agora é a marca: o disco
   continua, mas com padding, porque o "e" precisa de respiro e não deve
   ser cortado como uma foto seria. */
.intro-col_avatar {
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.9rem;
  border-radius: 50%;
  object-fit: contain;
  background-color: var(--swatch--neutral-xdark);
  border: 1px solid var(--swatch--shade-light-10);
}

.faq-list { display: flex; flex-flow: column; width: 100%; }
.faq-item { border-top: 1px solid var(--swatch--shade-light-10); }
.faq-item:last-child { border-bottom: 1px solid var(--swatch--shade-light-10); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.875rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--size--20px);
  line-height: var(--line-height--md);
  transition: color 0.3s var(--ease--main);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--swatch--primary-accent); }
.faq-item_icon { flex: none; width: 1rem; height: 1rem; transition: transform 0.35s var(--ease--main); }
.faq-item[open] .faq-item_icon { transform: rotate(45deg); }
.faq-item_answer { padding-bottom: 1.75rem; max-width: 44rem; color: var(--swatch--shade-light-75); }

/* ---------- MÉTODO EM ACORDEÃO (produto) ------------------------------- */
.method_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.625rem;
  align-items: center;
  width: 100%;
}
.method_copy { display: flex; flex-flow: column; align-items: flex-start; gap: 1.25rem; }
.method .image-flip_text-wrapper {
  position: static;
  display: flex;
  flex-flow: column;
  margin-top: 2rem;
  width: 100%;
}
.method .image-flip_text {
  display: block;
  padding: 1.5rem 0;
  border-top: 1px solid var(--swatch--shade-light-10);
  background: none;
  border-radius: 0;
  opacity: 0.35;
  transition: opacity 0.45s var(--ease--main);
  cursor: default;
}
.method .image-flip_text.is-active { opacity: 1; background: none; }
.method_item-head { display: flex; align-items: center; gap: 1rem; }
.method_num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--swatch--shade-light-25);
  font-family: var(--font--primary-family);
  font-size: var(--size--10px);
  letter-spacing: 1px;
}
.method .is-active .method_num {
  border-color: var(--swatch--primary-accent);
  color: var(--swatch--primary-accent);
}
.method_body {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding-left: 2.9rem;
  color: var(--swatch--shade-light-75);
  transition: max-height 0.55s var(--ease--main), padding-top 0.55s var(--ease--main);
}
.method .is-active .method_body { max-height: 14rem; padding-top: 0.75rem; }
.method .image-flip_image-wrapper { position: relative; width: 100%; aspect-ratio: 4 / 3.4; }
.method .image-flip_image {
  border-radius: var(--radius--lg);
  object-fit: cover;
}

/* ---------- FAIXA DE MÍDIA (marquee horizontal) ------------------------ */
.media-strip { width: 100%; overflow: hidden; }
.media-strip_track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: media-strip 46s linear infinite;
}
.media-strip_item {
  width: 24rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius--sm);
  flex: none;
}
@keyframes media-strip { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .media-strip_track { animation: none; } }

@media screen and (max-width: 991px) {
  .hero-split_grid { grid-template-columns: 1fr; min-height: 0; padding-top: 5rem; }
  .hero-glass { height: 42vh; }
  .split-head, .intro-faq_grid, .method_grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .split-head_copy, .intro-col { position: static; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan { padding: 2rem 0; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--swatch--shade-light-10); }
  .phase-card { gap: 4rem; }
}

/* ==========================================================================
   PRODUCT SPRINT & ADVANCED SECTIONS
   ========================================================================== */

/* Masthead Feature & Video Canvas */
.hero-product-sprint {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-height, 5rem) + 3rem);
  padding-bottom: 2rem;
  background-color: var(--swatch--neutral-xxdark);
}

.feature_masthead-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  grid-template-rows: auto;
  gap: 1.625rem;
  min-height: 44rem;
  align-items: center;
  position: relative;
  z-index: 3;
}

.product-sprint_video-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.product-sprint_video-wrapper.is-product-sprint {
  height: 100%;
  min-height: 34rem;
  overflow: visible;
}

.product-sprint_masthead-canvas {
  width: 100%;
  max-width: 38rem;
  height: auto;
  aspect-ratio: 4 / 3.6;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
}

.feature-masthead-bg {
  position: absolute;
  inset: 0%;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.feature-masthead-bg.pink-gradient {
  /* aura do relatório: ciano da logo + toque de lima sobre o azul profundo */
  background: radial-gradient(circle at 75% 50%, rgba(92, 200, 255, 0.22) 0%, rgba(203, 255, 84, 0.08) 35%, rgba(46, 53, 64, 0.4) 60%, rgba(22, 32, 44, 0) 80%),
              linear-gradient(180deg, rgba(22, 32, 44, 0) 0%, rgba(34, 42, 54, 0.7) 60%, rgba(46, 53, 64, 0.5) 100%);
}

/* Background Grid */
.bg-grid.is-ai-upskill_masthead {
  position: absolute;
  inset: 0%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.bg-grid_center.is-ai-upskill_masthead {
  display: flex;
  width: 100%;
  max-width: var(--max-width--lg);
  margin: 0 auto;
  height: 100%;
}

.bg-grid_center.is-ai-upskill_masthead > [class*="grid-col"],
.bg-grid_center.is-ai-upskill_masthead > [class*="grid-gutter"] {
  border-right: 1px solid var(--swatch--shade-light-5);
  height: 100%;
  flex: 1 1 0;
}

/* Methodology Interactive Tabs */
.tab-layout__wrap {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  row-gap: 3em;
  position: relative;
  z-index: 1;
  width: 100%;
}

.tab-layout__col {
  width: 50%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.tab-content__wrap {
  width: 100%;
  height: 100%;
}

.tab-content__inner {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 100%;
  padding-top: 1em;
  padding-bottom: 0;
  gap: 2em;
}

.tab-content__top {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1rem;
}

.tab-content__bottom {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 35em;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
}

.tab-content__item {
  position: relative;
  display: block;
  width: 100%;
  color: var(--swatch--neutral-light);
  padding-top: 2em;
  padding-bottom: 2em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.25s;
}
/* inativos esmaecidos: o chip claro vira cinza e o título apaga, como no
   print da referência */
.tab-content__bottom:has(.tab-content__item.active) .tab-content__item:not(.active) { opacity: 0.5; }
.tab-content__item:not(.active):hover { opacity: 0.85; }

.tab-content__item-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2em;
  width: 100%;
}

/* chip numerado PREENCHIDO (medidas da referência: 2.5em, raio total,
   fundo claro com número escuro em mono) */
.content-item__nr {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  margin-top: -0.2em;
  border-radius: 100em;
  background-color: var(--swatch--neutral-light);
  color: var(--swatch--neutral-xxdark);
  font-family: var(--font--primary-family);
  font-size: var(--size--14px);
}

.content-item__heading {
  margin: 0;
  font-size: 2rem;
  font-family: var(--font--secondary-family);
  font-weight: 500;
  line-height: 1;
  color: var(--swatch--neutral-light);
}

.tab-content__item-detail {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  padding-left: 4em;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
}
.tab-content__item.active .tab-content__item-detail { max-height: 15rem; opacity: 1; }

.tab-description__spacer { padding-top: 1em; }
.tab-description {
  margin-bottom: 0;
  font-size: 1em;
  color: var(--swatch--shade-light-75);
  line-height: 1.6;
}

.tab-content__item-bottom {
  position: absolute;
  inset: auto 0% 0%;
  width: 100%;
  height: 1px;
  background-color: var(--swatch--shade-light-10);
  transition: background-color 0.2s;
}

.tab-progress {
  position: absolute;
  inset: 0% auto 0% 0%;
  width: 100%;
  height: 1px;
  background-color: var(--swatch--primary-pink);
  transform-origin: 0% 50%;
  transform: scale3d(0, 1, 1);
  will-change: transform;
}

@media screen and (max-width: 991px) {
  .tab-content__item-main { gap: 1.5em; }
  .content-item__heading { font-size: 1.5em; }
}
@media screen and (max-width: 767px) {
  .tab-content__item { padding-top: 1.5em; padding-bottom: 1.5em; }
  .tab-content__item-main { gap: 1em; }
  .tab-content__item-detail { padding-left: 3em; }
  .content-item__heading { font-size: 1.5rem; }
}

.tab-visual__wrap {
  position: relative;
  width: 100%;
  height: 48em;
  border-radius: var(--radius--sm);
  overflow: hidden;
}

.tab-visual__item {
  position: absolute;
  inset: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.tab-visual__item.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.tab-visual__inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius--sm);
}

.tab-image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 50%;
  border-radius: var(--radius--sm);
}

.tab-1_screen-img {
  position: absolute;
  z-index: 1;
  height: 78%;
  aspect-ratio: 616 / 1332;
  border-radius: 1.5rem;
  box-shadow: 0 2px 40px #00000066;
  object-fit: cover;
}

.tab-2_screen-img {
  position: absolute;
  z-index: 1;
  width: 72%;
  max-width: none;
  border-radius: 1rem;
  box-shadow: 0 2px 40px #00000066;
}

.tab-1_prompt {
  position: absolute;
  inset: auto auto 2em;
  z-index: 2;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  width: calc(100% - 4rem);
  max-width: 25em;
  padding: 1.125em;
  background-color: #ffffff;
  color: var(--swatch--neutral-xxdark);
  border: 2px solid #4d49fc;
  border-radius: 1em;
  box-shadow: 0 10px 30px #00000040;
}

.tab-1_prompt-controls {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
}

.prompt-controls_wrap {
  display: flex;
  align-items: center;
}

.prompt-controls_icon {
  width: 1.5em;
  height: 1.5em;
  color: #666;
}

.prompt-controls_send {
  width: 2em;
  height: 2em;
  padding: 0.35rem;
  background-color: #4d49fc;
  color: #fff;
  border-radius: 50%;
}

.prompt-controls_cursor {
  position: absolute;
  inset: auto -1.2rem -0.8rem auto;
  width: 3.2em;
  height: 3.2em;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* Media Showcase Slider */
.media-slider_component {
  position: relative;
  z-index: 10;
  display: flex;
  flex-flow: column;
  gap: 2.5rem;
  width: 100%;
}

.slider-media_card {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* sem height:100% — com aspect-ratio dentro de um flex sem altura o
     tamanho vira cíclico e o Chrome resolve para 33 milhões de px */
  background-color: var(--swatch--neutral-xdark);
  border-radius: var(--radius--sm);
  overflow: hidden;
  border: 1px solid var(--swatch--shade-light-10);
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.slider-media_card:hover {
  transform: translateY(-4px);
  border-color: var(--swatch--primary-pink);
}

.slider-media_image {
  position: absolute;
  inset: 0%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 991px) {
  .feature_masthead-wrapper {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 3rem;
    padding-top: 3rem;
  }
  .product-sprint_video-wrapper.is-product-sprint {
    min-height: 24rem;
  }
  .tab-layout__col {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .tab-visual__wrap {
    height: 32em;
  }
}

@media screen and (max-width: 479px) {
  .tab-visual__wrap {
    height: 24em;
  }
  .tab-1_prompt {
    inset: auto auto 1em;
    width: calc(100% - 2rem);
    padding: 0.75em;
  }
}

/* o container do slider de mídia nunca pode crescer com o conteúdo */
.swiper.is-media-slider { width: 100%; }
.swiper-slide.is-media { width: 100%; }

/* Medido na referência: o CTA final tem exatamente a altura do container
   (min-height 50rem) — a seção não soma padding próprio. */
#contato.section { padding-top: 0; padding-bottom: 0; }
/* Na home o retângulo do CTA sobe para encostar na seção clara de cima —
   é o que faz a margem negativa do .cta-canvas. Em página de fundo escuro
   não há o que encostar, e a margem só cola o retângulo nos cards acima.
   .is-standalone devolve o respiro, com os mesmos 132px que a referência
   usa na seção equivalente. */
#contato.section.is-standalone { padding-top: var(--padding-vertical--lg); }
.is-standalone .cta-canvas { margin-top: 0; }
/* FAQ da ref vive numa seção de padding médio, não grande */
#faq.section { padding-top: var(--padding-vertical--md); padding-bottom: var(--padding-vertical--md); }

/* escada na base do hero do product (markup colado usa #hero, não .hero-split) */
#hero .pixel-steps { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
#hero .feature-masthead-bg { z-index: 2; }

/* nome da referência: o hero colado do product usa .pink-gradient no fundo */
.pink-gradient { z-index: 1; background-image: linear-gradient(#16202c, #222a36 36%, #2e3540 77%, #5cc8ff); }

/* A seção do slider de depoimentos precisa de respiro embaixo: o card do
   CTA sobe alguns rem sobre ela e sem isso encostaria nos cards. */
/* O container desta seção já pede top-padding="none", mas a .section soma
   os 132px dela por cima — e a seção do cabeçalho ainda fecha com outros
   132px embaixo. Davam 265px de vazio entre o texto e os cards. */
#conteudo + .section { padding-top: 0; padding-bottom: 22rem; }



/* ---------- PÁGINAS LEGAIS (privacidade, cookies, sitemap) --------------
   Texto corrido longo pede medida de leitura curta: acima de ~70 caracteres
   por linha o olho perde o começo da linha seguinte. 46rem dá ~72. */
.legal { max-width: 46rem; }
.legal .heading { margin: 3rem 0 0.875rem; }
.legal .heading:first-child { margin-top: 0; }
.legal p { margin: 0 0 1rem; color: var(--swatch--shade-light-75); line-height: 1.7; }
.legal strong { color: var(--swatch--neutral-light); font-weight: 600; }
.legal em { font-style: normal; font-family: var(--font--primary-family); font-size: 0.9em; }
.legal__list { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--swatch--shade-light-75); line-height: 1.7; }
.legal__list li { margin-bottom: 0.5rem; }
.legal__link { color: var(--swatch--accent-pink); text-decoration: underline; text-underline-offset: 0.2em; }
.legal__link:hover { color: var(--swatch--primary-accent); }
/* marca o que ainda precisa de informação real do cliente: fica evidente na
   página, para ninguém publicar um documento legal com lacuna */
.legal__todo {
  padding: 0.0625rem 0.375rem;
  border: 1px dashed var(--swatch--primary-accent);
  border-radius: var(--radius--xs);
  font-family: var(--font--primary-family);
  font-size: 0.85em;
  color: var(--swatch--primary-accent);
}
.legal__date {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--swatch--shade-light-10);
  font-family: var(--font--primary-family);
  font-size: var(--size--12px);
  color: var(--swatch--shade-light-55);
}

.sitemap-list { display: flex; flex-flow: column; }
.sitemap-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--swatch--shade-light-10);
  text-decoration: none;
  color: var(--swatch--neutral-light);
  transition: padding-left 0.3s var(--ease--main), color 0.3s var(--ease--main);
}
.sitemap-item:first-child { border-top: 1px solid var(--swatch--shade-light-10); }
.sitemap-item:hover { padding-left: 0.75rem; color: var(--swatch--primary-accent); }
.sitemap-item__nome { flex: none; font-size: 1.125rem; font-weight: 500; min-width: 12rem; }
.sitemap-item__sub { flex: 1; font-size: var(--size--14px); color: var(--swatch--shade-light-75); }
.sitemap-item__seta { width: 0.875rem; height: 0.875rem; flex: none; }
@media screen and (max-width: 767px) {
  .sitemap-item { flex-flow: column; align-items: flex-start; gap: 0.25rem; }
  .sitemap-item__nome { min-width: 0; }
  .sitemap-item__seta { display: none; }
}


/* ---------- A VOLTA AO AZUL DA HERO ------------------------------------
   O fim da página estava em #16202c: matiz 213 (o mesmo da hero), mas com
   saturação 33 contra os 65 do céu. Saturação baixa em claridade baixa é
   o que lê como ardósia/petróleo — o problema nunca foi o matiz.
   Aqui a saturação da hero é trazida para a claridade de fundo, subindo
   em duas etapas que se encontram no mesmo valor: a seção do CTA entrega
   #16283e e o rodapé continua dele até #192f48. O resultado é uma rampa
   contínua do meio da página até o fim do rodapé.
   L19/S48 é o teto: acima disso o texto secundário do rodapé
   (--swatch--shade-light-55) cai abaixo de 4.5:1. */
#contato.section {
  background-image: linear-gradient(180deg, var(--swatch--neutral-xxdark) 0%, #16283e 100%);
}
footer.section {
  background-image: linear-gradient(180deg, #16283e 0%, #192f48 100%);
}

/* ---------- PÁGINA DE CONTATO ------------------------------------------ */
.contato-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contato-form { display: flex; flex-flow: column; gap: 1.5rem; max-width: 34rem; }
.campo { display: flex; flex-flow: column; gap: 0.5rem; }
.campo__label {
  font-family: var(--font--primary-family);
  font-size: var(--size--12px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--swatch--shade-light-75);
}
.campo__opc { color: var(--swatch--shade-light-55); text-transform: none; letter-spacing: 0; }
.campo__input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--swatch--shade-light-10);
  border-radius: var(--radius--xs);
  background-color: var(--swatch--neutral-xdark);
  color: var(--swatch--neutral-light);
  font-family: var(--font--secondary-family);
  font-size: var(--size--14px);
  transition: border-color 0.25s var(--ease--main);
}
.campo__input::placeholder { color: var(--swatch--shade-light-55); }
.campo__input:focus-visible {
  outline: none;
  border-color: var(--swatch--primary-accent);
}
.campo__input--area { resize: vertical; min-height: 6rem; line-height: 1.6; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--swatch--shade-light-10);
  border-radius: var(--radius--xs);
  background-color: transparent;
  color: var(--swatch--shade-light-75);
  font-family: var(--font--primary-family);
  font-size: var(--size--12px);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease--main), color 0.25s var(--ease--main),
              background-color 0.25s var(--ease--main);
}
.chip:hover { border-color: var(--swatch--shade-light-25); color: var(--swatch--neutral-light); }
/* lima sobre lima seria 1:1 — o chip escolhido leva tinta navy */
.chip.is-on {
  background-color: var(--swatch--primary-accent);
  border-color: var(--swatch--primary-accent);
  color: var(--swatch--brand-navy);
}
.contato-enviar { align-self: flex-start; margin-top: 0.5rem; }
.contato-nota { margin: 0; font-size: var(--size--12px); color: var(--swatch--shade-light-55); }

.contato-lado { display: flex; flex-flow: column; gap: 2.5rem; }
.contato-bloco { display: flex; flex-flow: column; gap: 0.75rem; }
.contato-link {
  font-family: var(--font--primary-family);
  font-size: var(--size--14px);
  color: var(--swatch--neutral-light);
  text-decoration: none;
  transition: color 0.25s var(--ease--main);
}
.contato-link:hover { color: var(--swatch--primary-accent); }

@media screen and (max-width: 991px) {
  .contato-grid { grid-template-columns: 1fr; }
}