/* ============================================================
   Como Funciona — preview fiel (Figma 1230:17148, copy B2B 29-08)
   Seções da página usam medidas/cores literais do Figma;
   navbar, hero-parallax e footer vêm da infra real do site.
   ============================================================ */

.cf-page { position: relative; overflow: clip; }

/* ---------- HERO (pg-hero--img real: parallax via main.js) ---------- */
.cf-hero__content {
  max-width: 706px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cf-hero__title {
  visibility: hidden;   /* revelado pelo script de entrada (com fallback) */
  margin: 0;
  font-family: 'ITC Avant Garde Gothic', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -.4px;
  color: #fff;
}

.cf-hero__lead {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: #dbe7ff;
}

.cf-hero__form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.cf-hero__input {
  width: 360px;
  height: 50px;
  padding: 13px 16px;
  border: 1px solid #d7deec;
  border-radius: 12px;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: -.16px;
  color: #dbe7ff;
}
.cf-hero__input::placeholder { color: #dbe7ff; }

.cf-hero__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 17px 30px;
  border: 1px solid #005bff;
  border-radius: 14px;
  background: #005bff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.16px;
  color: #eef4ff;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.cf-hero__submit:hover { background: #004bd9; transform: translateY(-1px); }

/* ---------- SEÇÃO PASSOS 01/02/03 (2ª dobra, costura sobre o hero) ----------
   Cortina dos Passos (artefato 74d2ebf8 · leitura C): no hover uma cortina
   de grainient em pente sobe e revela a imagem do passo. Motor WAAPI em
   cortina-passos.js; variantes d/e/f no grainient-variants.js. */
.cf-passos {
  position: relative;
  z-index: 2;
  margin-top: -32px;
  border-radius: 32px 32px 0 0;
  min-height: 1055px;
  padding: 24px 0;
  background: url('/public/assets/cf-bg-passos.webp') center / cover no-repeat;
  overflow: hidden;
}

.cf-passos__wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 96px;
  max-width: 1440px;
  min-height: inherit;
  margin: 0 auto;
  padding: 62px 120px;
}

.cf-passos__title {
  margin: 0;
  font-family: 'ITC Avant Garde Gothic', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -.8px;
  color: #fff;
  text-align: center;
}

.cf-passos__grid { display: flex; gap: 24px; justify-content: center; margin: 0 auto; }

/* wrapper por card: alvo do parallax (transform), separado da
   transição de entrada do card (que também usa transform) */
.cf-passo-wrap { display: block; }

.cf-passo {
  position: relative;
  width: 384px;
  height: 450px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #8aaeff;
  border-radius: 12px;
  background: rgba(0,91,255,.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  overflow: hidden;
  contain: layout paint;
  cursor: default;
}

/* número fantasma grande no canto inferior direito */
.cf-passo > .cf-passo__num {
  position: absolute;
  right: 24px;
  bottom: 10px;
  margin: 0;
  font-size: 96px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -2px;
  color: #fff;
  opacity: .22;
}
.cf-passo__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; letter-spacing: -.2px; color: #eef4ff; }
.cf-passo__text  { margin: 0; font-size: 13px; font-weight: 400; line-height: 1.6; color: #eef4ff; }
.cf-passo > p { position: relative; z-index: 2; }

/* camada de revelação (leitura C: cobre o conteúdo, fiel à referência) */
.cf-passo-reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  border-radius: inherit;
}
.cf-passo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.cf-passo-reveal canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* entrada: classe --pronto vem do ScrollTrigger da página */
.cf-passo { opacity: 0; transform: scale(.94); transition: opacity .6s ease, transform .6s ease; }
.cf-passo.cf-passo--pronto { opacity: 1; transform: none; }

/* ---------- GRID "Ideal para sua gestão" ---------- */
.cf-beneficios {
  position: relative;
  z-index: 3;
  margin-top: -32px;
  border-radius: 32px 32px 0 0;   /* costura sobre a seção azul, marca do site */
  background: #fff;
  padding: 106px 0;
}

.cf-beneficios__inner {
  width: 1152px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.cf-beneficios__titles {
  width: 100%;
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.8px;
  color: #002e7f;
}

.cf-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 1152px;
  height: 512px;
}

.cf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 250px;
  padding: 16px;
  border: 1px solid #d7deec;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.cf-card--light:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -10px rgba(11,27,59,.16);
}

.cf-card--blue:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -8px rgba(0,91,255,.45);   /* sombra azul da marca */
}

.cf-card--blue {
  border-color: transparent;
  /* fallback estático; o canvas .ds-grainient (WebGL) anima por cima */
  background: url('/public/assets/cf-card-bg.webp') center / cover no-repeat;
}

.cf-card--blue .cf-grainient {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.cf-card__text { position: relative; z-index: 1; }

.cf-card__icon {
  width: 16px;
  height: 16px;
  object-fit: contain;      /* SVGs têm viewBox não-quadrado — sem isso achatam */
  position: relative;
  z-index: 1;
}

.cf-card__text { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cf-card__text h3 { margin: 0; font-size: 13px; font-weight: 700; line-height: normal; letter-spacing: -.13px; }
.cf-card__text p  { margin: 0; font-size: 11px; font-weight: 400; line-height: 1.6; }

.cf-card--light .cf-card__text { color: #0b1b3b; }
.cf-card--blue  .cf-card__text { color: #fff; }

.cf-gc-gestao   { grid-column: 1 / span 2; grid-row: 1; }
.cf-gc-taxa     { grid-column: 3;          grid-row: 1; }
.cf-gc-fiscal   { grid-column: 4;          grid-row: 1; }
.cf-gc-fraudes  { grid-column: 2;          grid-row: 2; }
.cf-gc-rede     { grid-column: 3;          grid-row: 2; }
.cf-gc-rh       { grid-column: 4 / span 2; grid-row: 2; }

/* ---------- ROTEADOR DE PÚBLICOS (design do Jota — Figma 1230:17507) ---------- */
:root {
  /* mola medida no protótipo (artefato "Cards para Cada Ponta") */
  --saida: 0.4s cubic-bezier(0.25, 0.8, 0.35, 1);
  --janela: 136px;     /* mídia visível em repouso */
  --curso: 116px;      /* descida do painel (136→252) */
  --ico-sobe: -54px;   /* subida do ícone no hover */
}

.cf-lados {
  position: relative;
  padding: 80px 0 150px;
  background: #fff;
}

.cf-lados__inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.cf-lados__title {
  margin: 0 auto;
  max-width: 900px;
  font-family: 'ITC Avant Garde Gothic', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -.8px;
  color: #002e7f;
  text-align: center;
}

.cf-lados__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 369px));
  gap: 36px 24px;
  padding-top: 64px;
  justify-content: center;
}

  /* ---------- card ---------- */
  .lado {
    position: relative;
    width: min(369px, 100%);
    height: 462px;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    display: block;
    text-decoration: none;
    box-shadow: rgba(11, 27, 59, 0.2) 0 20px 44px -16px, rgba(11, 27, 59, 0.1) 0 8px 16px -8px;
    transition: box-shadow 0.25s;
  }
  .lado:hover { box-shadow: rgba(0, 91, 255, 0.45) 0 22px 46px -12px, rgba(11, 27, 59, 0.1) 0 8px 16px -8px; }
  .lado:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; }

  /* z0 — mídia: grainient WebGL do site (fallback: degradê CSS) */
  .lado-media {
    position: absolute;
    inset: -30px;               /* sangria medida no original p/ o zoom */
    z-index: 0;
    background: linear-gradient(135deg, var(--grad-brilho), var(--blue-500) 45%, var(--grad-fundo));
    transform: scale(1.18);
    transition: transform var(--saida);
  }
  .lado-media canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  /* z1 — grão estático que NÃO acompanha o zoom */
  .lado-grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    mix-blend-mode: soft-light;
    opacity: 0.22;
  }

  /* z2 — ícone: sempre opaco, revelado por oclusão */
  .lado-icon {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 83px;                  /* ajuste do Jota: alguns ícones dão uma "espiada" no repouso */
    width: 290px;
    margin-left: -145px;
    transform: translateY(var(--ico-sobe)) rotate(-10deg);
    transition: transform var(--saida);
  }
  .lado-icon svg { display: block; width: 100%; height: auto; overflow: visible; }

  /* z3 — painel frontal (desce no hover; sangria 2× contra overshoot) */
  .lado-panel {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: var(--janela);
    height: 924px;              /* 2× o card — nunca abre buraco embaixo */
    background: var(--blue-500);
    border-radius: 24px 24px 0 0;
    transform: translateY(var(--curso));
    transition: transform var(--saida);
  }
  .lado-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 8px;
    border-radius: 8px 8px 4px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #eef4ff;
    white-space: nowrap;
    background: var(--blue-500);
  }
  .lado-tag--empresa { background: #073bce; }
  .lado-tag--estabelecimento { background: #0039a6; }
  .lado-tag--colaborador { background: #004bd9; }
  .lado-tag svg { display: none; width: 15px; height: 15px; flex: none; }

  /* z4 — bloco de texto FIXO (não se move; réplica de .cf-lado__panel) */
  .lado-text {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 24px;
  }
  .lado-head { display: flex; align-items: center; gap: 8px; }
  .lado-head h3 {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #ffffff;
  }
  .lado-head svg { width: 20px; height: 20px; flex: none; }
  .lado-text p {
    padding-top: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ============================================================
     Estados
     — default (sem JS / touch sem JS): ABERTO (acima)
     — touch com JS: fechado até o IO abrir (uma vez, no viewport)
     — desktop (hover fino): fechado; abre no hover/focus com a mola
     ============================================================ */
  html.touch .lado:not(.is-open) .lado-panel,
  html.touch .lado:not(.is-open) .lado-icon,
  html.touch .lado:not(.is-open) .lado-media { transform: none; }

  @media (hover: hover) and (pointer: fine) {
    .lado .lado-panel, .lado .lado-icon, .lado .lado-media { transform: none; }
    .lado:is(:hover, :focus-visible) .lado-panel { transform: translateY(var(--curso)); }
    .lado:is(:hover, :focus-visible) .lado-icon { transform: translateY(var(--ico-sobe)) rotate(-10deg); }
    .lado:is(:hover, :focus-visible) .lado-media { transform: scale(1.18); }
  }

  /* ida = mola medida (bounce 0.4 / 1s); fallback bezier em cascata */
  .lado:is(:hover, :focus-visible) :is(.lado-panel, .lado-icon, .lado-media),
  .lado.is-open :is(.lado-panel, .lado-icon, .lado-media) {
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-timing-function: linear(0, 0.015, 0.0556, 0.1157, 0.1898, 0.2729, 0.361, 0.4505, 0.5386, 0.623, 0.7019, 0.7741, 0.8389, 0.8958, 0.9446, 0.9856, 1.0191, 1.0455, 1.0655, 1.0797, 1.0888, 1.0936, 1.0947, 1.0929, 1.0888, 1.0829, 1.0757, 1.0677, 1.0593, 1.0508, 1.0425, 1.0346, 1.0272, 1.0205, 1.0144, 1.0092, 1.0046, 1.0009, 0.9978, 0.9954, 0.9936, 0.9923, 0.9915, 0.9911, 0.991, 0.9912, 0.9917, 0.9922, 0.9929, 0.9937, 0.9945, 0.9953, 0.9961, 0.9968, 0.9975, 0.9981, 0.9987, 0.9992, 0.9996, 1, 1.0002, 1.0005, 1.0006, 1.0007, 1.0008);
  }

  @media (prefers-reduced-motion: reduce) {
    .lado-panel, .lado-icon, .lado-media { transition: none !important; }
  }


/* ---------- CTA ---------- */
.cf-cta { padding: 92px 0; background: #fff; }
.cf-cta__inner { width: 1200px; margin: 0 auto; padding: 0 24px; }

.cf-cta__stage {
  position: relative;
  width: 1152px;
  height: 340px;
  border-radius: 35px;
  background: linear-gradient(163.56deg, #002e7f 0%, #004bd9 100%);
  filter: drop-shadow(0 20px 22px rgba(11,27,59,.2)) drop-shadow(0 8px 8px rgba(11,27,59,.1));
}

.cf-cta__webgl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 35px;   /* stage não pode ter overflow:hidden (a pessoa transborda) */
  z-index: 0;
}

.cf-cta__glow {
  position: absolute;
  inset: 0;
  border-radius: 35px;
  background: radial-gradient(80.64px 40.8px at 138.24px 0, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 68%);
  z-index: 1;
}

.cf-cta__pessoa  { z-index: 2; }
.cf-cta__content { z-index: 3; }

.cf-cta__pessoa {
  position: absolute;
  left: 814px;
  top: -84px;
  width: 318px;
  height: 424px;
  object-fit: cover;
}

.cf-cta__content { position: absolute; left: 60px; top: 56px; max-width: 540px; }

.cf-cta__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.6px;
  color: #fff;
}

.cf-cta__title .mark {
  display: inline-block;
  padding: 0 6px;
  border-radius: 6px;
  background: #fff;
  color: #005bff;
  line-height: 1.1;
}

.cf-cta__lead {
  margin: 0;
  padding-top: 14px;
  max-width: 380px;
  font-size: 13px;
  color: rgba(255,255,255,.85);
}

.cf-cta__actions { display: flex; gap: 14px; padding-top: 30px; }

.cf-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -.16px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease;
}
.cf-cta__btn:hover { transform: translateY(-1px); }

.cf-cta__btn--solid {
  padding: 15px 30px;
  background: #fff;
  color: #004bd9;
  filter: drop-shadow(0 6px 8px rgba(11,27,59,.12)) drop-shadow(0 2px 3px rgba(11,27,59,.06));
}

.cf-cta__btn--ghost {
  padding: 17px 32px;
  border: 1px solid rgba(255,255,255,.6);
  color: #fff;
}

/* ============================================================
   NOTEBOOK / TELAS BAIXAS — as seções se ajustam à viewport
   (padrão do site: seção cabe em 100svh, nada de altura fixa
   de desktop grande obrigando scroll para ver o conteúdo)
   ============================================================ */
@media (min-width: 901px) {
  .cf-passos {
    min-height: 0;
    height: clamp(740px, 100svh, 1055px);
    padding: 0;
  }
  .cf-passos__wrapper {
    min-height: 0;
    height: 100%;
    padding: clamp(36px, 5.5svh, 62px) 120px;
    gap: clamp(48px, 8svh, 110px);
  }

  .cf-beneficios { padding: clamp(52px, 7svh, 106px) 0; }
  .cf-beneficios__inner { gap: clamp(28px, 4.5svh, 64px); }
}

/* notebook (viewport baixa): compacta títulos e palco dos cards */
@media (min-width: 901px) and (max-height: 880px) {
  .cf-passo { height: 420px; }
  .cf-grid { height: 460px; }
  .cf-card { height: 100%; }
}

/* ============================================================
   RESPONSIVO — breakpoint principal do site é 900px
   ============================================================ */
@media (max-width: 900px) {

  /* ---- hero ---- */
  .cf-hero__content { gap: 18px; }
  .cf-hero__title { font-size: 32px; letter-spacing: -.32px; }
  .cf-hero__form { flex-direction: column; align-items: stretch; width: 100%; }
  .cf-hero__input { width: 100%; }
  .cf-hero__submit { width: 100%; }

  /* ---- passos: grid absoluto vira pilha ---- */
  .cf-passos { min-height: 0; }
  .cf-passos__wrapper { padding: 56px 20px 0; gap: 40px; }
  .cf-passos__title { font-size: 30px; line-height: 1.15; letter-spacing: -.6px; }
  .cf-passos__grid { width: 100%; flex-direction: column; align-items: center; gap: 20px; }
  .cf-passo-wrap { width: 100%; max-width: 420px; }
  .cf-passo { width: 100%; height: 400px; }


  /* ---- grid de benefícios ---- */
  .cf-beneficios { padding: 72px 0; }
  .cf-beneficios__inner { width: 100%; padding: 0 20px; gap: 40px; }
  .cf-beneficios__titles { font-size: 30px; line-height: 1.2; letter-spacing: -.6px; }
  .cf-grid {
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
  .cf-card { height: auto; min-height: 175px; }
  .cf-gc-gestao, .cf-gc-taxa, .cf-gc-fiscal,
  .cf-gc-fraudes, .cf-gc-rede, .cf-gc-rh { grid-column: auto; grid-row: auto; }
  .cf-gc-gestao, .cf-gc-rh { grid-column: 1 / -1; }

  /* ---- roteador ---- */
  .cf-lados { padding: 64px 0 100px; }
  .cf-lados__inner { width: 100%; padding: 0 20px; }
  .cf-lados__title { font-size: 30px; line-height: 1.2; letter-spacing: -.6px; }
  .cf-lados__cards { gap: 24px; padding-top: 40px; }

  /* ---- CTA ---- */
  .cf-cta { padding: 64px 0; }
  .cf-cta__inner { width: 100%; padding: 0 20px; }
  .cf-cta__stage { width: 100%; height: auto; }
  .cf-cta__webgl, .cf-cta__glow { border-radius: 24px; }
  .cf-cta__stage { border-radius: 24px; }
  .cf-cta__pessoa { display: none; }   /* a foto transborda; no mobile sai */
  .cf-cta__content {
    position: relative;
    left: auto;
    top: auto;
    max-width: 100%;
    padding: 36px 24px 32px;
  }
  .cf-cta__title { font-size: 24px; line-height: 1.25; letter-spacing: -.48px; }
  .cf-cta__title .mark { line-height: 1.1; }
  .cf-cta__lead { max-width: 100%; }
  .cf-cta__actions { flex-direction: column; align-items: stretch; }
  .cf-cta__btn { width: 100%; }
}

@media (max-width: 560px) {
  .cf-grid { grid-template-columns: 1fr; }
  .cf-gc-gestao, .cf-gc-rh { grid-column: auto; }
  .cf-card { min-height: 150px; }
}

/* ------------------------------------------------------------
   CTA em Arrow Fill nesta seção (10-09-2026)
   O `.cf-cta__btn--solid` virou `.afb`. O componente tem 48px de
   altura e o botão fantasma ao lado tem 52px (padding 17 + linha de
   16 + borda), então sem este ajuste os dois ficam desalinhados.
   O raio da bolha acompanha: raio do botão menos a folga de 6px.
   ------------------------------------------------------------ */

.cf-cta__actions .afb {
  height: 52px;
  --radius: 20px;
  --icon-radius: 14px;
}