/* ==========================================================================
   nous — landing page
   Tokens → base → layout → componentes → seções → responsivo
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --brand-1: #FF5B14;
  --brand-2: #FF8A3D;
  --codifica-1: #FF8A3D;
  --codifica-2: #D9430A;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --container: 1160px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 72px;
}

/* Tema único: claro.
   O portal tinha dois temas e um alternador; a identidade nova é o grafite
   sobre o off-white, e manter o escuro significaria manter duas paletas
   para revisar a cada mudança de marca. */
:root {
  --bg: #F5F4F0;
  --bg-elev: #FFFFFF;
  --surface: rgba(30, 33, 36, .030);
  --surface-strong: rgba(30, 33, 36, .055);
  --border: rgba(30, 33, 36, .11);
  --border-strong: rgba(30, 33, 36, .19);
  --text: #1E2124;
  --text-soft: #4A4742;
  --text-mute: #6F6B64;
  --header-bg: rgba(255, 255, 255, .78);
  --shadow: 0 22px 50px -26px rgba(30, 33, 36, .3);
  --glow-a: rgba(255, 91, 20, .16);
  --glow-b: rgba(255, 138, 61, .13);
  --grid-line: rgba(30, 33, 36, .045);
  --code-bg: #15181A;
}


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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Rede de segurança herdada por todo o documento: e-mails e URLs longos
     quebram em vez de furar o layout em telas estreitas. Só age quando a
     palavra realmente não cabe. */
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 650;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--brand-1);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: color-mix(in srgb, var(--brand-1) 34%, transparent); }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--brand-1);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

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

.section { padding-block: var(--section-y); position: relative; }

.section--alt {
  background: linear-gradient(180deg, transparent, var(--surface) 18%, var(--surface) 82%, transparent);
  border-block: 1px solid var(--border);
}

.section__head { max-width: 62ch; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head--left { margin-inline: 0; text-align: left; }

/* Cabeçalho com frase em linha única: ocupa a largura do container para o
   título centralizar na página; os parágrafos mantêm a medida de leitura. */
.section__head--wide { max-width: none; }
.section__head--wide > .section__lead:not(.nowrap) { max-width: 62ch; margin-inline: auto; }

.section__title { font-size: clamp(1.85rem, 3.6vw, 2.9rem); margin-bottom: 1rem; }
.section__lead { color: var(--text-soft); font-size: clamp(1rem, 1.4vw, 1.1rem); }

/* Frases que devem ficar sempre em uma única linha.
   --nowrap-w = largura aproximada da frase em "em"; a fonte encolhe até caber. */
.nowrap {
  white-space: nowrap;
  text-wrap: nowrap;
  font-size: min(var(--nowrap-max), calc((100vw - 2 * var(--gutter)) / var(--nowrap-w)));
}
.section__title.nowrap { --nowrap-max: clamp(1.85rem, 3.6vw, 2.9rem); }
.section__lead.nowrap { --nowrap-max: clamp(1rem, 1.4vw, 1.1rem); }

#servicos .section__title.nowrap { --nowrap-w: 16.8; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-1) 18%, transparent);
}
.eyebrow--codifica .dot {
  background: var(--codifica-1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--codifica-1) 18%, transparent);
}

.grad {
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad--codifica { background-image: linear-gradient(100deg, var(--codifica-1), var(--codifica-2)); }

/* ---------- Fundo decorativo ---------- */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.bg-fx__grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 35%, transparent 78%);
}
.bg-fx__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.bg-fx__glow--a {
  width: 46rem; height: 32rem;
  top: -14rem; left: 48%;
  transform: translateX(-50%);
  background: var(--glow-a);
}
.bg-fx__glow--b {
  width: 34rem; height: 26rem;
  top: 34rem; right: -10rem;
  background: var(--glow-b);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); }

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* O nav ocupa o vão entre a marca e as ações e centraliza os links nele. Antes
   o bloco inteiro era empurrado para a direita — o centro do nav caía em 869 num
   cabeçalho cujo centro é 713 —, porque o botão de contato morava dentro da
   lista de links e somava largura só de um lado. */
/* Os três blocos recebem o MESMO peso de crescimento, e é isso que põe o nav
   no centro do cabeçalho — e não no meio do vão que sobra. A marca ocupa 150px
   e as ações 266px: centralizar no vão deixava os links 59px à esquerda do
   centro real. */
.site-header__inner > .brand { flex: 1 1 0; }
.site-header__inner > .nav { flex: 1 1 0; display: flex; justify-content: center; }
.site-header__actions {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
}
.nav__cta--acao {
  padding: .55rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: .93rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.nav__cta--acao:hover { border-color: var(--brand-1); }

@media (max-width: 900px) {
  .site-header__inner > .nav { flex: 0 0 auto; }
  .nav__cta--acao { display: none; }
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
/* Lockup único: marca + wordmark vetorizado no mesmo SVG (o wordmark é vetor,
   não texto, porque a fonte do logo tem o A sem travessão e o R com a haste
   solta — nenhuma fonte de sistema reproduz isso). O respiro entre marca e
   wordmark está no viewBox, por isso .brand não tem gap. currentColor faz DARA
   seguir o tema; SOLUTIONS fica num grupo com opacity .7, que é a relação de
   contraste medida na arte original. */
.brand__logo { display: block; height: 36px; width: auto; color: var(--text); }
.site-footer .brand__logo { height: 32px; }

/* Nome da marca em texto para leitores de tela e indexação: o lockup é vetor. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .35rem; }
.nav__list a {
  display: block;
  padding: .55rem .8rem;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__list a:hover { color: var(--text); background: var(--surface-strong); }
.nav__list a.is-active { color: var(--text); }
.nav__cta {
  margin-left: .45rem;
  color: var(--text) !important;
  border: 1px solid var(--border-strong);
}
.nav__cta:hover { border-color: var(--brand-1); }

.site-header__actions { display: flex; align-items: center; gap: .5rem; }

/* Acesso ao portal ITSM */
.btn-entrar {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 38px;
  padding: 0 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .18s var(--ease), background .18s var(--ease),
              box-shadow .22s var(--ease);
}
.btn-entrar:hover {
  border-color: var(--brand-1);
  background: var(--surface-strong);
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--brand-1) 85%, transparent);
}
.btn-entrar__icon { width: 17px; height: 17px; flex-shrink: 0; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.icon-btn:hover { border-color: var(--border-strong); background: var(--surface-strong); }
.icon-btn .icon { width: 18px; height: 18px; }
/* Mostra o ícone do tema para o qual o clique vai levar */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px; height: 38px;
  padding: 0 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .96rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary {
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2));
  color: #fff;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--brand-1) 70%, transparent);
}
.btn--primary:hover { box-shadow: 0 16px 38px -12px color-mix(in srgb, var(--brand-1) 80%, transparent); }

.btn--codifica {
  background: linear-gradient(100deg, var(--codifica-1), var(--codifica-2));
  color: #04231C;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--codifica-1) 60%, transparent);
}

.btn--ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover { background: var(--surface-strong); border-color: var(--text-mute); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 8vw, 7rem); }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__title { font-size: clamp(2.3rem, 5.6vw, 4.1rem); font-weight: 700; }
.hero__lead {
  margin-top: 1.4rem;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--text-soft);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
}
.hero__pills li {
  padding: .4rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-soft);
}

/* Card de código */
.hero__visual { position: relative; }

.code-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--code-bg);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform .5s var(--ease);
}
.hero__visual:hover .code-card { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }

.code-card__bar {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .022);
}
.code-card__dots { display: flex; gap: 6px; }
.code-card__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.code-card__dots i:first-child { background: #FF5F57; }
.code-card__dots i:nth-child(2) { background: #FEBC2E; }
.code-card__dots i:nth-child(3) { background: #28C840; }
.code-card__file { font-family: var(--font-mono); font-size: .78rem; color: #6F7891; }

.code-card__body {
  margin: 0;
  padding: 1.35rem 1.5rem 1.6rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: clamp(.72rem, 1.02vw, .82rem);
  line-height: 1.75;
  color: #C6CBDA;
  tab-size: 2;
}
.c-k { color: #7C9CFF; }
.c-t { color: #4FD0E0; }
.c-f { color: #C39BFF; }
.c-s { color: #7FE0A8; }
.c-o { color: #8B93A8; }
.c-b { color: #FFB86C; }

.float-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  animation: float 6s ease-in-out infinite;
}
.float-chip--1 { top: -1.1rem; left: -1.2rem; }
.float-chip--2 { bottom: 3.5rem; right: -1.4rem; animation-delay: -2s; }
.float-chip--3 { bottom: -1.1rem; left: 12%; animation-delay: -4s; font-family: var(--font-mono); font-weight: 500; }

.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--codifica-1); }
.pulse--ok { box-shadow: 0 0 0 0 color-mix(in srgb, var(--codifica-1) 60%, transparent); animation: pulse 2.2s infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--codifica-1) 55%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- Cards de serviço ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.25rem;
}

/* Quatro cartões numa linha só. A faixa mínima de 280px do auto-fit não cabe
   quatro vezes no container (4×280 + 3×20 = 1180 > 1160), e a grade quebra em
   3 + 1 — o quarto cartão lê como sobra, não como par dos outros três. Aqui a
   faixa mínima cede: são os cartões que encolhem, não a linha que quebra. */
.cards--quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards--quatro .card { padding: 1.6rem 1.35rem; }
@media (max-width: 1040px) { .cards--quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cards--quatro { grid-template-columns: 1fr; } }

.card {
  position: relative;
  padding: 1.9rem 1.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--brand-1) 55%, transparent), transparent 45%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity .28s var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-5px); background: var(--surface-strong); }
.card:hover::before { opacity: 1; }

/* A luz que segue o ponteiro (main.js, "Luz nos cartões" escreve --mx/--my).
   Fica ATRÁS do conteúdo: `isolation` faz do cartão um contexto próprio, e o
   z-index negativo põe a luz entre o fundo dele e o texto — por cima, ela
   tingiria as letras. Só existe com ponteiro de verdade. */
@media (hover: hover) and (pointer: fine) {
  .card { isolation: isolate; }
  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 91, 20, .1), transparent 65%);
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
  }
  .card:hover::after { opacity: 1; }
}

.card--featured { background: var(--surface-strong); border-color: var(--border-strong); }
.card--featured::before { opacity: .7; }

.card__badge {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2));
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.3rem;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand-1) 16%, transparent), transparent);
  color: var(--brand-1);
}
.card__icon svg { width: 23px; height: 23px; }

.card__title { font-size: 1.22rem; margin-bottom: .7rem; }
.card__text { color: var(--text-soft); font-size: .95rem; }
/* `a` é `color: inherit` no reset: sem esta linha um link no corpo do
   cartão fica invisível como link. Mesma régua do .faq__a e do .prose. */
.card__text a { color: var(--brand-1); text-decoration: underline; text-underline-offset: 2px; }

.card__list { margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid var(--border); display: grid; gap: .55rem; }
.card__list li {
  position: relative;
  padding-left: 1.3rem;
  font-size: .89rem;
  color: var(--text-soft);
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-1);
  opacity: .8;
}

/* ---------- Split (Protheus / Contato) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.split--form { align-items: start; }
.split__copy .btn { margin-top: 2rem; }

.check-list { margin-top: 2rem; display: grid; gap: .85rem; }
.check-list li { display: flex; gap: .8rem; align-items: flex-start; color: var(--text-soft); }
.check {
  flex-shrink: 0;
  position: relative;
  width: 22px; height: 22px;
  margin-top: .18rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-1) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-1) 40%, transparent);
}
.check::after {
  content: "";
  position: absolute;
  left: 6px; top: 8px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--brand-1);
  border-bottom: 2px solid var(--brand-1);
  transform: rotate(-45deg);
}

.stat-grid { display: grid; gap: 1rem; }
.stat {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  display: grid;
  gap: .3rem;
}
.stat__label { font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute); }
.stat__value { font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
.stat__hint { font-size: .87rem; color: var(--text-soft); }

/* ---------- Portal (carrossel de prints do produto) ---------- */
.carousel { position: relative; }

/* O palco existe para ancorar as setas: elas ficam sobre as bordas do trilho,
   fora do fluxo, sem entrar na conta do scroll-snap. */
.carousel__stage { position: relative; }

.carousel__track {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Esconde a barra de rolagem sem perder a rolagem — os pontos e as setas já
     comunicam a posição. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__track:focus-visible {
  outline: 2px solid var(--brand-1);
  outline-offset: 6px;
  border-radius: var(--radius-lg);
}

/* Um print por slide, ocupando a largura inteira: são telas densas (tabela,
   indicador, grade de numeração) e só assim o conteúdo interno fica legível. */
.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.6rem);
}


/* ---- Setas ---- */
.carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.carousel__nav svg { width: 22px; height: 22px; }
/* Encostadas POR DENTRO do quadro. Meio para fora elas ficavam cortadas pela
   borda do print; e totalmente para fora não cabe em viewport estreita, onde a
   goteira do container encolhe para 4vw. Sobrepor o print é o padrão de
   carrossel — o fundo translúcido com blur mantém a seta legível por cima de
   tela clara ou escura. */
.carousel__nav--prev { left: 0.75rem; }
.carousel__nav--next { right: 0.75rem; }

.carousel__nav:hover { background: var(--surface-strong); border-color: var(--brand-1); }

/* ---- Pontos ---- */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: background .2s var(--ease), width .2s var(--ease);
}
.carousel__dot:hover { background: var(--text-mute); }

/* O ativo vira cápsula: a posição fica legível sem depender só de cor. */
.carousel__dot.is-active {
  width: 26px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2));
}

.shots__note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  font-size: .82rem;
  color: var(--text-mute);
}

/* ---------- Quadro de telas (portal) ----------
   Uma tela por vez, abas por área e uma fileira de cartões com a barra que
   enche. O comportamento está em "Quadro de telas" no main.js; sem ele, o
   quadro é uma faixa com rolagem lateral (o estado sem .is-vivo, abaixo). */
.quadro { margin-top: clamp(3.5rem, 7vw, 5.5rem); }

.quadro__head { max-width: 46rem; margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem); text-align: center; }
.quadro__eyebrow {
  margin-bottom: .6rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-1);
}
.quadro__titulo { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; }
.quadro__realce { display: block; color: var(--text-mute); }

/* Abas e controles nascem com [hidden] e só o script os mostra; o display
   deles abaixo venceria o [hidden] do navegador sem esta linha. */
.quadro__abas[hidden],
.quadro__controles[hidden] { display: none; }

/* ---- Abas ---- */
.quadro__abas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}
.quadro__aba {
  appearance: none;
  padding: .55rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-soft);
  font: inherit; font-size: .9rem; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.quadro__aba:hover { border-color: var(--border-strong); color: var(--text); }
.quadro__aba[aria-selected="true"] { border-color: var(--text); background: var(--text); color: var(--bg); }
.quadro__aba:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }

/* ---- Palco ----
   Sem JS: faixa com scroll-snap, uma figura por vez, todas alcançáveis.
   A largura é contida para tela, legenda e cartões caberem juntos numa janela
   de notebook: na largura cheia do container a tela sozinha passava da dobra. */
.quadro__palco,
.quadro__controles { max-width: 62rem; margin-inline: auto; }
.quadro__palco {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.quadro__palco::-webkit-scrollbar { display: none; }
.quadro__palco:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 6px; border-radius: var(--radius-lg); }

.quadro__item {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  display: grid;
  align-content: start;
  gap: clamp(1rem, 2vw, 1.4rem);
  scroll-snap-align: center;
}

/* Com JS: as figuras se empilham na mesma célula e só a da vez aparece. A
   célula fica com a altura da maior legenda, então o quadro não pula. */
.quadro.is-vivo .quadro__palco { display: grid; overflow: visible; touch-action: pan-y; }
.quadro.is-vivo .quadro__item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s linear .5s;
}
.quadro.is-vivo .quadro__item.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s;
}
/* Imagem que ainda não foi a da vez nem a seguinte fica fora do render — e,
   com loading="lazy", fora da rede. Sem isto as dezoito, empilhadas no mesmo
   lugar, seriam baixadas juntas. */
.quadro.is-vivo .quadro__item:not(.is-carregado) img { display: none; }

/* ---- Moldura ----
   A malha (abaixo, "Malha") com a paleta da área. A cor troca junto com a
   figura, porque cada figura carrega a sua: a troca de tela já é a transição. */
.quadro__moldura {
  padding: clamp(8px, 1.2vw, 16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.quadro__item[data-aba="ia"],
[data-paleta="ia"]                 { --m0: #FFF1E8; --m1: #FFB48A; --m2: #FFD9A8; --m3: #FFC4B0; --m4: #FFE7C9; }
.quadro__item[data-aba="vendas"]   { --m0: #FFF4E3; --m1: #FFC978; --m2: #FFA98C; --m3: #FFE0A3; --m4: #FFD1C2; }
.quadro__item[data-aba="operacao"] { --m0: #EEF6F3; --m1: #9FDCCB; --m2: #B9D3FF; --m3: #CDEBDF; --m4: #FFE0B8; }
.quadro__item[data-aba="servicos"] { --m0: #F5EFFB; --m1: #CDB5FF; --m2: #FFC2D6; --m3: #B9D3FF; --m4: #FFE0C7; }
.quadro__item[data-aba="gestao"]   { --m0: #EDF3FF; --m1: #A9C4FF; --m2: #A8E6DA; --m3: #D3C4FF; --m4: #FFD7BF; }
[data-paleta="xml"]                { --m0: #EEF6F1; --m1: #9ED9C0; --m2: #FFD3B5; --m3: #BFE3D6; --m4: #FFE7C4; }
[data-paleta="erp"]                { --m0: #EEF2FB; --m1: #AFC6FF; --m2: #FFD0B8; --m3: #C9D6FF; --m4: #BFE6DB; }

/* ---------- Malha ----------
   Cinco radiais sobre a cor de base: é a moldura que diz de que produto (ou
   de que área) é a tela. Parada de propósito — numa peça deste tamanho, um
   degradê em movimento repinta tudo a cada quadro. As cores vêm de
   --m0…--m4, que as paletas acima definem. */
.quadro__moldura,
.malha {
  background-color: var(--m0);
  background-image:
    radial-gradient(at 50% 55%, rgba(255, 255, 255, .6) 0, transparent 60%),
    radial-gradient(at 10% 12%, var(--m1) 0, transparent 55%),
    radial-gradient(at 92% 8%, var(--m2) 0, transparent 55%),
    radial-gradient(at 85% 92%, var(--m3) 0, transparent 55%),
    radial-gradient(at 8% 88%, var(--m4) 0, transparent 55%);
}

.quadro__janela {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 6px);
  background: #1E2124;
  box-shadow: 0 30px 60px -30px rgba(30, 33, 36, .45);
}
/* A barra fica por cima da imagem: o zoom cresce para todos os lados, e no
   alto ele passaria por cima dela. */
.quadro__barra-janela {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .7rem;
  background: #1E2124;
}
.quadro__barra-janela i { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(245, 244, 240, .25); }
.quadro__barra-janela span {
  margin-left: .55rem;
  color: rgba(245, 244, 240, .62);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
}
.quadro__janela img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top center;
  background: var(--bg-elev);
  transform-origin: var(--foco, 50% 30%);
}

/* O zoom lento anda na mesma duração da barra (um pouco mais, para não parar
   antes da troca) e continua durante a saída, para a imagem não voltar ao
   tamanho original enquanto some. */
.quadro.is-vivo .quadro__item.is-on img,
.quadro.is-vivo .quadro__item.is-saindo img {
  animation: quadro-zoom calc(var(--quadro-dur, 9s) + .6s) cubic-bezier(.3, .1, .4, 1) forwards;
}
@keyframes quadro-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Tela gravada: o <video> é criado pelo main.js e, enquanto ele vale, toma o
   lugar do print — que continua no HTML para quem não tem script, pede menos
   movimento ou economiza dados, e volta se o vídeo falhar. Sem zoom: a tela
   já se mexe sozinha. */
.quadro__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  background: var(--bg-elev);
}
.quadro__item.tem-video img { display: none; }

/* ---- Legenda ---- */
.quadro__legenda { max-width: 62ch; margin-inline: auto; text-align: center; }
.quadro__legenda-titulo { margin-bottom: .5rem; font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.quadro__legenda-texto { color: var(--text-soft); font-size: .96rem; }

/* ---- Controles: pausa e cartões ---- */
.quadro__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: clamp(1.1rem, 2vw, 1.5rem);
}
.quadro__toca {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.quadro__toca:hover { border-color: var(--brand-1); }
.quadro__toca:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }
.quadro__toca svg { grid-area: 1 / 1; width: 18px; height: 18px; }
.quadro__toca[data-estado="tocando"] .quadro__icone-play,
.quadro__toca[data-estado="pausado"] .quadro__icone-pausa { display: none; }

.quadro__cartoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; min-width: 0; }
.quadro__cartao {
  appearance: none;
  display: grid;
  /* A barra vai ao pé: nome de uma linha ou de duas, as barras ficam alinhadas. */
  grid-template-rows: auto 1fr auto;
  gap: .3rem;
  width: 11.5rem;
  padding: .6rem .85rem .7rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .6);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.quadro__cartao:hover { border-color: var(--border-strong); background: var(--bg-elev); }
.quadro__cartao:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }
.quadro__cartao.is-on {
  border-color: var(--brand-1);
  background: var(--bg-elev);
  box-shadow: 0 1px 2px rgba(30, 33, 36, .06), 0 10px 26px -18px rgba(30, 33, 36, .3);
}
.quadro__cartao-ramo { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.quadro__cartao-nome { font-size: .84rem; font-weight: 600; line-height: 1.25; }
.quadro__cartao-barra {
  align-self: end;
  height: 3px;
  margin-top: .3rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}
.quadro__cartao-barra::after {
  content: '';
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  transform: scaleX(0);
  transform-origin: left;
}
.quadro__cartao.is-visto .quadro__cartao-barra::after { transform: none; }
/* O relógio do quadro: quando esta barra termina, o script chama a próxima. */
.quadro__cartao.is-on .quadro__cartao-barra::after { animation: quadro-barra var(--quadro-dur, 9s) linear forwards; }
@keyframes quadro-barra { to { transform: none; } }

/* Pausar é pausar as duas animações juntas: a barra e o zoom andam na mesma
   duração, e só continuam casados se pararem e voltarem no mesmo instante. */
.quadro.is-pausado .quadro__cartao-barra::after,
.quadro.is-pausado .quadro__janela img { animation-play-state: paused; }

/* Sem passagem automática (movimento reduzido): nada anda, e o cartão da vez
   mostra a barra cheia — ela só marca qual tela está à vista. */
.quadro.is-estatico .quadro__cartao-barra::after,
.quadro.is-estatico .quadro__janela img { animation: none !important; }
.quadro.is-estatico .quadro__cartao.is-on .quadro__cartao-barra::after { transform: none; }

@media (max-width: 640px) {
  /* Abas e cartões viram fileiras roláveis: em coluna eles empurrariam a tela
     para baixo da dobra. */
  .quadro__abas,
  .quadro__cartoes {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .quadro__abas::-webkit-scrollbar,
  .quadro__cartoes::-webkit-scrollbar { display: none; }
  .quadro__cartao { flex: none; width: 10rem; }
  .quadro__barra-janela span { display: none; }
}

/* A promessa curta do produto, para quem lê o cabeçalho e não rola até o bloco
   do framework logo abaixo do carrossel. Peso maior que o lead, tamanho menor
   que o título: é uma afirmação, não um segundo subtítulo. */
.portal-claim {
  margin: 1.1rem 0 0;
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  font-weight: 650;
  color: var(--text);
}

/* "Disponível em:" — onde o portal roda. Vive no cabeçalho centralizado da
   seção, por isso centraliza junto; as cápsulas repetem a linguagem dos pontos
   do carrossel (borda fina, raio total) em vez de introduzir uma nova. */
.plataformas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .7rem;
  margin: 1.15rem 0 0;
  font-size: .86rem;
  color: var(--text-soft);
}

.plataformas__rotulo { color: var(--text-mute); }

.plataforma {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .34rem .72rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
}

.plataforma__icone {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--brand-1);
}

/* ---- Segmentos ----
   Os doze ramos que o portal já sabe vestir. Vem ANTES do carrossel de propósito:
   é a afirmação que o carrossel depois prova, e sem ela dezoito telas de ramos
   diferentes parecem dezoito produtos diferentes.

   Grade em HTML, e não um print da tela de escolha de segmento: assim os nomes
   indexam, o texto acompanha o tema claro/escuro e a leitura no celular vira
   uma coluna, em vez de uma imagem de 1440px espremida. */
.segmentos { margin-top: clamp(2rem, 4vw, 3rem); }

.segmentos__head { max-width: 62ch; margin-inline: auto; text-align: center; }

.segmentos__title { font-size: clamp(1.15rem, 2vw, 1.45rem); margin-bottom: .6rem; }

.segmentos__lead { color: var(--text-soft); font-size: .95rem; line-height: 1.65; }

.segmentos__grid {
  display: grid;
  /* 250px põe os DOZE segmentos em três fileiras de quatro na largura cheia.
     Era 205px, que dava cinco por fileira — bom para dez, e péssimo para doze:
     sobravam dois cartões soltos na última, e o bloco parecia interrompido no
     meio em vez de uma lista completa. O número certo é o que divide a lista. */
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: .85rem;
  margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}

.segmento {
  display: flex;
  gap: .8rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.segmento__icone {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: .15rem;
  color: var(--brand-1);
}

.segmento__nome { font-size: .96rem; font-weight: 650; margin-bottom: .25rem; }

.segmento__texto { color: var(--text-soft); font-size: .86rem; line-height: 1.5; }

.segmentos__nota {
  max-width: 68ch;
  margin: clamp(1.1rem, 2.2vw, 1.5rem) auto 0;
  text-align: center;
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.65;
}

.segmentos__nota strong { color: var(--text); font-weight: 650; }

/* ---- Faixa de integrações ----
   Fila contínua de sistemas já integrados, logo abaixo de "Disponível em:".
   Ocupa a largura do container (e não a medida de leitura de 62ch do cabeçalho):
   com a caixa estreita cabiam seis nomes e a fila não parecia infinita. */
.integracoes {
  margin-top: clamp(1.6rem, 3vw, 2.25rem);
  text-align: center;
}

.integracoes__rotulo {
  margin: 0 0 .85rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* `overflow-x: auto` não é enfeite: a regra global de prefers-reduced-motion
   zera a animação, e sem rolagem quem usa essa preferência ficaria vendo apenas
   a primeira metade do trilho, parada. As pontas somem em máscara — é o que dá
   a impressão de que a fila não termina. */
.integracoes__faixa {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.integracoes__faixa::-webkit-scrollbar { display: none; }

.integracoes__trilho {
  display: flex;
  flex: none;
  gap: .6rem;
  margin: 0;
  padding: .15rem 0;
  list-style: none;
  animation: desfilar 48s linear infinite;
}

/* Cortesia com quem quer ler um nome específico. */
.integracoes__faixa:hover .integracoes__trilho,
.integracoes__faixa:focus-within .integracoes__trilho { animation-play-state: paused; }

@keyframes desfilar {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.integracao {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem .9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: .87rem;
  font-weight: 600;
  white-space: nowrap;
}

.integracao__ponto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2));
  flex: none;
}

.integracoes__nota {
  margin: .9rem 0 0;
  font-size: .86rem;
  color: var(--text-soft);
}

/* ---- NOUS I.A. ----
   Entre a faixa de integrações e o carrossel, porque as quatro primeiras telas
   do carrossel são do assistente.

   O bloco tem duas metades e elas são visualmente diferentes de propósito: em
   cima, a grade do que o assistente faz DENTRO do portal; embaixo, o cartão do
   WhatsApp, que é outro canal. Uma grade só, com o WhatsApp como sétimo item,
   fazia o canal parecer mais um recurso da lista — e ele é a única parte que
   acontece fora do portal. */
.nous {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.6vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--glow-a), transparent 58%),
    var(--surface);
}

.nous__head { max-width: 66ch; }

.nous__eyebrow {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.nous__title { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: .7rem; }

.nous__lead { color: var(--text-soft); font-size: .97rem; line-height: 1.7; }

.nous__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Fio curto no topo em vez de caixa: seis caixas dentro de uma caixa maior
   viram uma parede. O fio separa sem cercar. */
.nous__item { padding-top: .85rem; border-top: 2px solid var(--border-strong); }

.nous__item-title { font-size: .98rem; font-weight: 650; margin-bottom: .4rem; }

.nous__item-text { color: var(--text-soft); font-size: .9rem; line-height: 1.6; }

.nous__zap {
  margin-top: clamp(1.75rem, 3.4vw, 2.5rem);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.nous__zap-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }

.nous__zap-icone {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* O verde da marca, e não o verde do WhatsApp: a cor de outra empresa num
     ícone desenhado por nós passaria por selo de parceria oficial. */
  background: linear-gradient(140deg, var(--codifica-1), var(--codifica-2));
  color: #05201A;
}

.nous__zap-icone svg { width: 19px; height: 19px; }

.nous__zap-title { font-size: 1.05rem; font-weight: 650; }

.nous__zap-text {
  max-width: 70ch;
  color: var(--text-soft);
  font-size: .95rem;
  line-height: 1.7;
}

.nous__zap-text strong { color: var(--text); font-weight: 650; }

.nous__zap-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: .8rem clamp(1rem, 2.4vw, 1.8rem);
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.nous__zap-lista li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.6;
}

.nous__zap-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(100deg, var(--codifica-1), var(--codifica-2));
}

.nous__zap-lista strong { color: var(--text); font-weight: 650; }

/* Bloco do framework — entre a nota das telas e o convite final. Deliberadamente
   diferente do .portal-cta que vem logo abaixo (que é tracejado): aqui, superfície
   cheia com um fio da marca à esquerda, para os dois cartões não se confundirem. */
.framework {
  max-width: 68ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.35rem, 2.6vw, 1.9rem) clamp(1.25rem, 2.4vw, 1.85rem);
  border-radius: var(--radius-lg);
  /* O fio da marca é uma faixa de background, não uma borda: `border-image` não
     respeita `border-radius` e deixaria o canto quadrado no cartão arredondado. */
  background:
    linear-gradient(180deg, var(--brand-1), var(--brand-2)) left / 3px 100% no-repeat,
    var(--surface);
}

.framework__title {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  margin-bottom: .85rem;
}

.framework__text {
  color: var(--text-soft);
  font-size: .95rem;
  line-height: 1.65;
}

.framework__text + .framework__text { margin-top: .7rem; }

.framework__text strong { color: var(--text); font-weight: 650; }

/* Chamada ao fim da seção */
.portal-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.portal-cta__title { font-size: clamp(1.1rem, 1.8vw, 1.35rem); margin-bottom: .4rem; }
.portal-cta__text { color: var(--text-soft); font-size: .93rem; max-width: 46ch; }
.portal-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Em tela estreita as setas sairiam por cima do print; os pontos e o arraste
   bastam, então elas saem de cena. */
@media (max-width: 720px) {
  .carousel__nav { display: none; }
}

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

/* ---------- Processo ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1.1rem;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.step:hover { border-color: var(--border-strong); transform: translateY(-4px); }
.step__num {
  display: inline-block;
  margin-bottom: .9rem;
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 700;
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step__title { font-size: 1.04rem; margin-bottom: .5rem; }
.step__text { font-size: .88rem; color: var(--text-soft); }

/* ---------- Codifica ---------- */
.codifica { position: relative; }
.codifica__inner {
  position: relative;
  /* Padding lateral menor que o vertical: devolve ~28px de largura para as
     4 colunas dos pilares caberem confortavelmente em uma linha. */
  padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid color-mix(in srgb, var(--codifica-1) 26%, var(--border));
  border-radius: clamp(var(--radius-lg), 3vw, 30px);
  background:
    radial-gradient(ellipse 70% 90% at 88% 6%, color-mix(in srgb, var(--codifica-1) 11%, transparent), transparent 70%),
    var(--surface);
  overflow: hidden;
}
.codifica .eyebrow { color: var(--codifica-1); }
.codifica .section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Os 4 pilares em uma única linha no desktop, que é onde a comparação entre
   eles acontece de relance.

   Abaixo de 820px, 4 colunas deixariam ~120px de texto útil — ilegível. A
   versão anterior mantinha a linha única com scroll horizontal, mas isso
   escondia 2 dos 4 pilares atrás de um gesto que muita gente não descobre.
   No celular a rolagem vertical da própria página é o gesto natural, então
   os cards empilham. */
.codifica__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}

@media (max-width: 820px) {
  .codifica__grid { grid-template-columns: repeat(2, minmax(min(230px, 100%), 1fr)); gap: 1rem; }
}
@media (max-width: 560px) {
  .codifica__grid { grid-template-columns: 1fr; }
}

.pillar {
  padding: 1.2rem 1.05rem;
  /* Colunas estreitas: quebra palavras longas em vez de estourar o card */
  overflow-wrap: break-word;
  hyphens: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elev);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.pillar:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--codifica-1) 40%, transparent); }
.pillar__icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-bottom: .9rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--codifica-1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--codifica-1) 32%, transparent);
  color: var(--codifica-1);
}
.pillar__icon svg { width: 18px; height: 18px; }
.pillar__title { font-size: .97rem; margin-bottom: .4rem; }
.pillar__text { font-size: .845rem; line-height: 1.55; color: var(--text-soft); }

.codifica__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.8rem, 3vw, 2.4rem);
  border-top: 1px solid var(--border);
}
.codifica__cta-title { font-size: 1.2rem; margin-bottom: .3rem; }
.codifica__cta-text { font-size: .92rem; color: var(--text-soft); }

/* ---------- Contato ---------- */
.contact-list { margin-top: 2.2rem; display: grid; gap: 1rem; }
.contact-list li { display: flex; align-items: center; gap: .9rem; color: var(--text-soft); font-size: .95rem; }
.contact-list a { transition: color .18s var(--ease); }
.contact-list a:hover { color: var(--brand-1); }
.contact-list__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--brand-1);
}
.contact-list__icon svg { width: 19px; height: 19px; }

.form {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
}
.field { display: grid; gap: .45rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-size: .84rem; font-weight: 600; color: var(--text-soft); }
.req { color: var(--brand-1); margin-left: .15rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .78rem .95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .94rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737B8F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-mute); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 18%, transparent);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #FF6B6B; }

.field__error { font-size: .8rem; color: #FF8A8A; min-height: 0; }
.field__error:empty { display: none; }

/* Honeypot — fora do fluxo visual, sem display:none (bots detectam) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .84rem; color: var(--text-soft); cursor: pointer; }
.consent input { margin-top: .22rem; width: 17px; height: 17px; accent-color: var(--brand-1); flex-shrink: 0; }
.consent a { color: var(--brand-1); text-decoration: underline; text-underline-offset: 2px; }
.consent + .field__error { margin-top: -.6rem; }

.form__status { font-size: .89rem; font-weight: 500; }
.form__status:empty { display: none; }
.form__status.is-ok { color: var(--codifica-1); }
.form__status.is-error { color: #FF8A8A; }
.form__note { font-size: .85rem; color: var(--text-soft); }

.spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.is-sending .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--section-y);
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.site-footer__tag { margin-top: 1rem; max-width: 32ch; font-size: .9rem; color: var(--text-soft); }

/* Redes sociais. O rótulo acessível fica no aria-label do link — o SVG é
   decorativo, então um leitor de tela anuncia "Instagram da nous"
   e não "imagem". */
.social { margin-top: 1.4rem; display: flex; gap: .6rem; }
.social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text-soft);
  transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.social a:hover { color: var(--brand-1); border-color: var(--border-strong); transform: translateY(-2px); }
.social svg { width: 19px; height: 19px; }
.site-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 2rem; }
.site-footer__h { font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 1rem; }
.site-footer__nav ul { display: grid; gap: .6rem; }
.site-footer__nav a { font-size: .9rem; color: var(--text-soft); transition: color .18s var(--ease); }
.site-footer__nav a:hover { color: var(--text); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  justify-content: space-between;
  padding-block: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  color: var(--text-mute);
}
.site-footer__bottom a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Trilha de navegação (breadcrumb) ----------
   A trilha visível existe para o visitante; o BreadcrumbList em JSON-LD é o
   que o buscador usa para desenhar o caminho no resultado. Os dois precisam
   contar a MESMA história — se editar um, edite o outro. */
.crumb {
  padding-top: clamp(1.5rem, 3vw, 2.2rem);
  font-size: .84rem;
  color: var(--text-mute);
}
.crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.crumb li { display: flex; align-items: center; gap: .5rem; }
.crumb li + li::before {
  content: "/";
  color: var(--border-strong);
}
.crumb a { color: var(--text-soft); }
.crumb a:hover { color: var(--brand-1); }
.crumb [aria-current="page"] { color: var(--text); }

/* ---------- Cabeçalho de página de serviço ---------- */
.page-head { padding-block: clamp(2.2rem, 5vw, 3.4rem) clamp(3rem, 6vw, 4.5rem); }
.page-head__inner { max-width: 62ch; }
.page-head__title { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 700; }
.page-head__lead {
  margin-top: 1.3rem;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}
/* Linha de botões. O espaçamento é do container, não de cada botão: sem este
   reset, um `.actions` dentro de `.split__copy` herdaria também o
   `margin-top` que aquela regra aplica a cada `.btn` solto. */
.page-head__actions,
.actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; }
.page-head__actions .btn,
.actions .btn { margin-top: 0; }

/* Cabeçalho com arte à direita (Integrações). Abaixo de 960px a arte desce
   para baixo do texto, menor — ela ilustra, não explica sozinha. */
.page-head--arte .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (max-width: 960px) {
  .page-head--arte .container { grid-template-columns: 1fr; }
  .page-head--arte .fluxo { max-width: 30rem; margin-inline: auto; }
}

/* ---------- Fluxo de integrações ----------
   Fios pontilhados do sistema ao centro e um pulso por fio. O pulso é um
   traço de 7% do caminho (pathLength=100) que corre por stroke-dashoffset; a
   primeira parte do ciclo é espera, para o fim do ciclo cair exatamente na
   chegada — é nesse instante que o main.js ("Fluxo") acende quem recebe. */
.fluxo { margin: 0; }
.fluxo__svg { width: 100%; height: auto; overflow: visible; }

.fluxo__fio {
  fill: none;
  stroke: rgba(30, 33, 36, .3);
  stroke-width: 1.4;
  stroke-dasharray: 2 5;
  stroke-linecap: round;
}
.fluxo__pulso {
  fill: none;
  stroke: var(--brand-1);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 7 100;
  stroke-dashoffset: 7;
  filter: drop-shadow(0 0 3px rgba(255, 91, 20, .7));
  animation: fluxo-entra var(--dur, 3.2s) linear var(--atraso, 0s) infinite;
}
.fluxo__ramo[data-sentido="sai"] .fluxo__pulso {
  stroke: #1E2124;
  filter: drop-shadow(0 0 3px rgba(30, 33, 36, .35));
  animation-name: fluxo-sai;
}
/* Do sistema (início do caminho) para o centro (fim). */
@keyframes fluxo-entra {
  0%, 35% { stroke-dashoffset: 7; }
  100% { stroke-dashoffset: -100; }
}
/* Do centro para o sistema: o mesmo traço, no sentido contrário. */
@keyframes fluxo-sai {
  0%, 35% { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: 7; }
}

.fluxo__no rect {
  fill: #FFFFFF;
  stroke: var(--border-strong);
  transition: stroke .3s var(--ease);
}
.fluxo__no text,
.fluxo__centro text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--text);
}
.fluxo__centro rect { fill: #1E2124; }
.fluxo__centro text { fill: #F5F4F0; font-size: 22px; font-weight: 700; letter-spacing: .02em; }
.fluxo__centro .fluxo__traco { fill: var(--brand-1); }
.fluxo__halo { fill: var(--brand-1); opacity: .06; }

/* A chegada: o centro pulsa o halo; o sistema acende a borda. */
.fluxo__halo.is-recebe { animation: fluxo-halo .9s var(--ease); }
@keyframes fluxo-halo { 0% { opacity: .26; } 100% { opacity: .06; } }
.fluxo__no.is-recebe rect { animation: fluxo-no 1s var(--ease); }
@keyframes fluxo-no { 0% { stroke: var(--brand-1); stroke-width: 2.5; } 100% { stroke: var(--border-strong); stroke-width: 1; } }

@media (prefers-reduced-motion: reduce) {
  /* Sem pulsos: só os fios e os sistemas. */
  .fluxo__pulso { display: none; }
}

/* ---------- Link "saiba mais" dentro do card ----------
   O card inteiro não vira link: dentro dele já existem listas e, mais tarde,
   podem entrar outros links — link aninhado é HTML inválido e confunde o
   leitor de tela. O rótulo repete o assunto do card de propósito, para não
   existirem vários links "saiba mais" idênticos na mesma página. */
.card__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand-1);
}
.card__more svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.card__more:hover svg { transform: translateX(3px); }

/* ---------- Perguntas frequentes ----------
   <details> nativo: sem JavaScript, o conteúdo continua no HTML e continua
   abrível. Fechado por padrão só esconde visualmente — o buscador e o leitor
   de tela alcançam o texto das respostas de qualquer jeito. */
.faq { display: grid; gap: .8rem; max-width: 74ch; margin-inline: auto; }
.faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .25s var(--ease);
}
.faq__item[open] { border-color: var(--border-strong); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: .45em;
  border-right: 2px solid var(--text-mute);
  border-bottom: 2px solid var(--text-mute);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a {
  padding: 0 1.4rem 1.3rem;
  color: var(--text-soft);
}
.faq__a p + p { margin-top: .8rem; }
.faq__a a { color: var(--brand-1); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Bloco de texto corrido das páginas de serviço ----------
   Os modificadores existem porque a CSP tem `style-src 'self'`, que bloqueia
   atributo style="" no HTML: qualquer ajuste pontual de layout precisa virar
   classe aqui. */
.prose { max-width: 68ch; }
.prose--center { margin-inline: auto; }
.prose--spaced { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.prose p { color: var(--text-soft); }
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--text); }
.prose a { color: var(--brand-1); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Navegação entre serviços irmãos ----------
   Toda página de serviço termina apontando para as outras duas: é o que
   mantém o site navegável em profundidade sem depender do menu do topo. */
.siblings { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.sibling {
  display: block;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.sibling:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.sibling__title { font-size: 1.05rem; margin-bottom: .45rem; }
.sibling__text { color: var(--text-soft); font-size: .92rem; }

/* ---------- Páginas simples (erro / legal) ---------- */
.simple-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.simple-page main { flex: 1; padding-block: clamp(3rem, 8vw, 6rem); }

.error-block { max-width: 56ch; }
.error-block__code {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(3.5rem, 12vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.error-block__title { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin: 1.2rem 0 .9rem; }
.error-block__text { color: var(--text-soft); }
.error-block .btn { margin-top: 2rem; }

.legal { max-width: 74ch; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .6rem; }
.legal__meta { color: var(--text-mute); font-size: .87rem; margin-bottom: 2.5rem; }
.legal h2 {
  font-size: 1.18rem;
  margin: 2.4rem 0 .8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border);
}
.legal p, .legal li { color: var(--text-soft); }
.legal p + p { margin-top: .9rem; }
.legal ul { margin-top: .9rem; display: grid; gap: .5rem; }
.legal ul li { position: relative; padding-left: 1.3rem; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-1);
  opacity: .8;
}
.legal a { color: var(--brand-1); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--text); }
.legal__back { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Cena fora de vista ----------
   `[data-cena]` longe da janela ganha .fora-de-cena (main.js, "Cena à vista").
   Pausa, e não `animation: none`: congela onde estava e, ao voltar, continua
   dali — os laços de um bloco param juntos e a defasagem entre eles fica. */
.fora-de-cena,
.fora-de-cena *,
.fora-de-cena *::before,
.fora-de-cena *::after { animation-play-state: paused !important; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  /* Entre 861px e 960px o nav completo ainda aparece e o header fica no limite.
     O lockup deitado é mais largo que a marca+texto antiga, então encolhe aqui
     para não empurrar o CTA. */
  .brand__logo { height: 30px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 560px; }
  .code-card { transform: none; }
  .float-chip--2 { right: 0; }
  .float-chip--1 { left: 0; }
  .split { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    margin: 0;
    padding: 1rem var(--gutter) 1.6rem;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateY(-115%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s var(--ease);
  }
  .nav.is-open { transform: translateY(0); visibility: visible; }
  .nav__list { flex-direction: column; align-items: stretch; gap: .2rem; }
  .nav__list a { padding: .85rem 1rem; border-radius: var(--radius-sm); font-size: 1rem; }
  .nav__cta { margin: .6rem 0 0; text-align: center; }
}

/* Espaço apertado no header: o botão de entrar vira só ícone */
@media (max-width: 480px) {
  .btn-entrar { width: 38px; padding: 0; justify-content: center; }
  .btn-entrar span { display: none; }
}

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
  .float-chip--3 { display: none; }
  .codifica__cta { flex-direction: column; align-items: stretch; }
  .codifica__cta .btn { width: 100%; }
}

/* ---------- Toque (celular / tablet) ---------- */
@media (pointer: coarse) {
  /* O Safari no iOS dá zoom na página ao focar um campo com fonte < 16px.
     Não é ajustável por viewport meta sem desabilitar zoom (o que é ruim
     para acessibilidade) — a única saída boa é a fonte ter 16px. */
  .field input,
  .field select,
  .field textarea { font-size: 16px; }

  /* Alvos de toque: 38px fica abaixo do mínimo confortável de 44px */
  .icon-btn,
  .nav-toggle { width: 44px; height: 44px; }
  .nav-toggle { padding: 0 11px; }
  .btn-entrar { height: 44px; }

  /* Checkbox de consentimento: aumenta a área sem mexer no texto */
  .consent input { width: 20px; height: 20px; }
}

/* Quando o botão de entrar está só com o ícone, ele também é alvo de toque */
@media (pointer: coarse) and (max-width: 480px) {
  .btn-entrar { width: 44px; }
}

/* Sem hover real, o :hover "cola" depois do toque em vários navegadores */
@media (hover: none) {
  .btn:hover,
  .card:hover,
  .step:hover,
  .pillar:hover,
  .client:hover { transform: none; }
  .btn:hover .btn__icon { transform: none; }
}

/* ---------- Preferências do usuário ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .code-card { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --border: rgba(255, 255, 255, .3); --text-soft: #D6DAE6; }
  :root { --border: rgba(9, 12, 24, .35); --text-soft: #2A3242; }
}

/* ---------- Impressão ---------- */
@media print {
  .bg-fx, .site-header, .nav, .hero__visual, .form, .float-chip { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ==========================================================================
   MENU DE PRODUTOS — agrupa as duas marcas sob um item só
   ==========================================================================
   <details>/<summary> em vez de JavaScript: abre no clique e no teclado, fecha
   com Esc, e continua funcionando se o script falhar — que é o estado em que o
   menu principal do site não pode ficar.

   O marcador triangular do <summary> precisa ser desligado em DOIS lugares:
   `list-style` (padrão) e `::-webkit-details-marker` (WebKit antigo). Faltando
   um, o triângulo aparece grudado no rótulo.
   ========================================================================== */

.nav__grupo { position: relative; display: flex; align-items: center; }

.nav__menu > summary {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .8rem;
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--text-soft);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__menu > summary::marker { content: ""; }
.nav__menu > summary::-webkit-details-marker { display: none; }

.nav__menu > summary::after {
  content: "";
  width: .4em;
  height: .4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  transition: transform .18s var(--ease);
}
.nav__menu[open] > summary::after { transform: translateY(.1em) rotate(-135deg); }
.nav__menu > summary:hover,
.nav__menu[open] > summary { color: var(--text); background: var(--surface-strong); }

.nav__submenu {
  position: absolute;
  top: calc(100% + .55rem);
  left: 0;
  z-index: 40;
  min-width: 13.5rem;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.nav__submenu a { white-space: nowrap; }

@media (max-width: 900px) {
  .nav__grupo { display: block; }
  .nav__submenu {
    position: static;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 .75rem;
  }
}

/* ==========================================================================
   VITRINE DE PRODUTOS — as três frentes, passando sozinhas
   ==========================================================================
   Primeira dobra: abre com o que a nous vende, não com quem a nous é. Cada
   slide tem título tipográfico (a promessa), a marca endossada como selo e o
   produto EM USO ao lado — dois telefones no NOUS IA, a janela do portal no
   NOUS CONNECT.

   Os mockups são HTML, não imagem: escalam sem borrar, herdam a tipografia do
   site, o texto continua sendo texto (busca e leitor de tela alcançam) e mudar
   uma frase não exige reabrir editor de imagem.
   ========================================================================== */

.vitrine { position: relative; }
.vitrine__track { gap: 0; overflow-y: hidden; align-items: stretch; }

.vitrine__slide {
  height: min(90vh, 840px);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  display: grid;
  /* Duas faixas: o texto ocupa a de cima e se centraliza nela; o palco fica
     ancorado na de baixo, encostado no rodapé do slide. Antes as duas dividiam
     o mesmo espaço centralizado, e os aparelhos pareciam boiando no meio. */
  grid-template-rows: 1fr minmax(0, 46%);
  justify-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.vitrine__slide > .vitrine__inner { align-self: center; }
.vitrine__slide > .vitrine__palco {
  align-self: end;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

/* O fundo tem profundidade em vez de cor chapada: dois halos muito abertos e
   uma malha finíssima. É o que separa "tem uma cor de fundo" de "tem um
   ambiente" — e some no papel, porque é tudo transparência. */
.vitrine__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(255, 91, 20, .10), transparent 62%),
    radial-gradient(900px 460px at 88% 8%, rgba(255, 138, 61, .09), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F4F0 100%);
}
.vitrine__slide--connect::before {
  background:
    radial-gradient(1000px 520px at 82% -6%, rgba(255, 91, 20, .09), transparent 60%),
    linear-gradient(180deg, #F5F4F0 0%, #FFFFFF 100%);
}
.vitrine__slide--xml::before {
  background:
    radial-gradient(1000px 520px at 26% -6%, rgba(255, 138, 61, .11), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F1EFEA 100%);
}
.vitrine__slide--erp::before {
  background:
    radial-gradient(1000px 520px at 70% -6%, rgba(255, 91, 20, .10), transparent 60%),
    linear-gradient(180deg, #F1EFEA 0%, #FFFFFF 100%);
}
.vitrine__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(30, 33, 36, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 33, 36, .035) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
}

.vitrine__inner {
  width: min(100% - var(--gutter) * 2, 60rem);
  text-align: center;
  display: grid;
  gap: clamp(.9rem, 2vw, 1.4rem);
  justify-items: center;
}

.vitrine__eyebrow {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}
.vitrine__selo { display: block; height: clamp(3.4rem, 7vh, 4.6rem); width: auto; }

.vitrine__titulo {
  margin: 0;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 700;
  color: #1E2124;
}

.vitrine__tag {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  line-height: 1.5;
  color: var(--text-soft);
}

.vitrine__acoes { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

/* ---------- O palco onde o produto aparece em uso ---------- */
.vitrine__palco {
  width: min(100% - var(--gutter) * 2, 62rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

/* ── Os dois telefones como UMA composição ────────────────────────────────
   Antes eles eram dois objetos soltos, cada um com a própria rotação e a
   própria altura: liam como dois celulares caindo, não como um par. Agora
   partilham a mesma linha de base, se sobrepõem de propósito e a inclinação é
   simétrica — um abre para a esquerda, o outro para a direita, no mesmo
   ângulo. O da conversa vem à frente porque é a cena que explica o produto. */
.vitrine__palco--fones { gap: 0; perspective: 1400px; }

/* ---------- Telefone ---------- */
.fone {
  margin: 0 0 -2.5rem;
  width: clamp(12rem, 19vw, 15.5rem);
  border-radius: 2rem 2rem 0 0;
  padding: .55rem .55rem 0;
  background: #1E2124;
  box-shadow: 0 34px 60px -28px rgba(30, 33, 36, .45);
  transform-origin: bottom center;
}
.fone--zap {
  z-index: 2;
  transform: rotate(-4deg);
  margin-right: -1rem;
}
.fone--app {
  z-index: 1;
  transform: rotate(4deg) scale(.95);
  margin-left: -1rem;
}

.fone__tela {
  background: #FFFFFF;
  border-radius: 1.55rem 1.55rem 0 0;
  overflow: hidden;
  font-size: .72rem;
  color: #1E2124;
  height: 100%;
}

.fone__topo {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .7rem;
  background: #F5F4F0;
  border-bottom: 1px solid rgba(30, 33, 36, .08);
}
.fone__avatar {
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: #1E2124;
  color: #F5F4F0;
  display: grid; place-items: center;
  font-weight: 700;
}
.fone__quem { display: grid; line-height: 1.2; }
.fone__quem strong { display: flex; align-items: center; gap: .22rem; font-size: .74rem; }
.fone__quem small { color: var(--text-mute); font-size: .62rem; }
.fone__selo { width: .78rem; height: .78rem; }

.fone__conversa { display: grid; gap: .4rem; padding: .7rem; background: #FBFAF7; }
.bolha {
  margin: 0;
  padding: .42rem .6rem;
  border-radius: .8rem;
  max-width: 88%;
  line-height: 1.35;
}
.bolha--eu { justify-self: end; background: #FFE3D2; border-bottom-right-radius: .2rem; }
.bolha--ia { justify-self: start; background: #FFFFFF; border: 1px solid rgba(30,33,36,.08); border-bottom-left-radius: .2rem; }

.fone__campo {
  padding: .5rem .7rem;
  background: #F5F4F0;
  color: var(--text-mute);
  border-top: 1px solid rgba(30, 33, 36, .08);
}

/* ---- Conversa encenada (main.js, "Conversa encenada") ----
   As bolhas não saem do fluxo: ficam transparentes no lugar delas, então a
   chegada de uma não empurra nada. Sem JS a classe não existe e a conversa
   aparece inteira. */
.is-encenando .bolha {
  opacity: 0;
  transform: translateY(6px) scale(.97);
  transform-origin: bottom left;
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.is-encenando .bolha--eu { transform-origin: bottom right; }
.is-encenando .bolha.is-chegou { opacity: 1; transform: none; }

/* A resposta "pensando": a bolha já tem o tamanho final, mas o recorte deixa
   à vista só o canto de cima, do tamanho de uma bolha de três pontos. Ao
   chegar, o recorte abre até a bolha inteira e o texto acende. */
.is-encenando .bolha--ia {
  position: relative;
  clip-path: inset(0 calc(100% - 2.6rem) calc(100% - 1.85rem) 0 round .8rem);
  transition: opacity .3s var(--ease), transform .35s var(--ease),
              clip-path .5s var(--ease), color .35s var(--ease) .15s;
}
.is-encenando .bolha--ia.is-pensando { opacity: 1; transform: none; color: transparent; }
.is-encenando .bolha--ia.is-chegou { clip-path: inset(0 round .8rem .8rem .8rem .2rem); }
.is-encenando .bolha--ia::after {
  content: '';
  position: absolute;
  top: .76rem;
  left: .62rem;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: #A39E96;
  box-shadow: .45rem 0 #A39E96, .9rem 0 #A39E96;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.is-encenando .bolha--ia.is-pensando::after { opacity: 1; animation: pensando 1s ease-in-out infinite; }
@keyframes pensando { 50% { opacity: .35; } }
.fone__quem small.is-digitando { color: #1A8F4C; }

.fone__app-topo { padding: .6rem .75rem; background: #1E2124; color: #F5F4F0; }
.fone__marca { font-weight: 700; letter-spacing: .02em; }
.fone__marca i { color: #FF5B14; font-style: normal; padding: 0 .1em; }
.fone__app-corpo { padding: .7rem .75rem; display: grid; gap: .5rem; background: #FFFFFF; }
.fone__saudacao { margin: 0; font-weight: 700; }
.fone__resumo { margin: 0; color: var(--text-mute); font-size: .66rem; }
.fone__kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.fone__kpis li {
  display: grid;
  gap: .05rem;
  padding: .45rem .5rem;
  border: 1px solid rgba(30, 33, 36, .1);
  border-radius: .6rem;
  background: #FBFAF7;
}
.fone__kpis span { color: var(--text-mute); font-size: .62rem; }
.fone__kpis b { font-size: .95rem; }
.fone__kpis i { font-style: normal; font-size: .62rem; }
.fone__kpis .sobe { color: #B3202C; }
.fone__kpis .desce { color: #0b6a56; }
.fone__aviso {
  margin: 0;
  padding: .45rem .55rem;
  border-left: 3px solid #FF5B14;
  background: #FFF1EA;
  border-radius: .3rem;
  line-height: 1.35;
}
.fone__acao {
  margin-top: .1rem;
  padding: .45rem .6rem;
  border-radius: 999px;
  background: #1E2124;
  color: #F5F4F0;
  text-align: center;
  font-weight: 600;
}

/* ---------- O portal no computador e no telefone ---------- */
/* Os dois juntos dizem "desktop e mobile" sem precisar da frase: a janela
   atrás, o aparelho encostado na frente, ambos cortados pelo rodapé como os
   telefones do slide anterior. */
.vitrine__palco--portal { align-items: flex-end; gap: 0; }
.fone--portal {
  z-index: 2;
  /* Largo o bastante para o valor caber numa linha: no tamanho anterior
     "R$ 4,2 mi" quebrava e o indicador vizinho saía pela borda. */
  width: clamp(9.5rem, 14vw, 12rem);
  max-height: 100%;
  margin: 0 0 0 -5rem;
  transform: rotate(3deg);
  align-self: flex-end;
}
.fone--portal .fone__tela { font-size: .68rem; }

.fone__destaque {
  display: grid;
  gap: .12rem;
  padding: .55rem .6rem;
  border: 1px solid rgba(30, 33, 36, .1);
  border-radius: .6rem;
  background: #FBFAF7;
}
.fone__destaque span { color: var(--text-mute); font-size: .64rem; }
.fone__destaque b { font-size: 1.15rem; line-height: 1.1; }
.fone__destaque i { font-style: normal; font-size: .64rem; }

/* ---------- Janela do portal ---------- */
.janela {
  margin: 0;
  width: min(100%, 54rem);
  max-height: 100%;
  border-radius: .9rem .9rem 0 0;
  overflow: hidden;
  background: #1E2124;
  box-shadow: 0 34px 80px -36px rgba(30, 33, 36, .5);
}
.janela__barra { display: flex; gap: .35rem; padding: .55rem .7rem; }
.janela__barra i { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(245, 244, 240, .25); }
/* A imagem é recortada pelo alto: o que interessa numa tela de gestão é o
   cabeçalho e os primeiros indicadores, não o rodapé da página. */
.janela img { display: block; width: 100%; height: auto; }
.janela { display: flex; flex-direction: column; }
.janela > img { min-height: 0; object-fit: cover; object-position: top center; }

/* ---------- O XML e o painel fiscal (NOUS XML) ---------- */
/* Aqui não há print: a tela fiscal ainda não foi capturada do portal, e o
   documento que chega da SEFAZ não é uma tela — é um arquivo. Os dois são
   HTML, pela mesma razão do resto da vitrine, e a composição diz o produto
   sem precisar da legenda: o XML à frente, já capturado, e atrás dele o
   painel que cobra a manifestação antes de o prazo virar crédito perdido. */
.vitrine__palco--fiscal { align-items: flex-end; gap: 0; }

.janela--fiscal { width: min(100%, 44rem); min-width: 0; }
.janela--fiscal .fiscal { background: #FFFFFF; min-height: 0; overflow: hidden; }

.fiscal { font-size: .72rem; color: #1E2124; padding-left: 1.5rem; }
.fiscal__topo {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .55rem .8rem;
  background: #1E2124;
  color: #F5F4F0;
}
.fiscal__rota { color: rgba(245, 244, 240, .62); font-size: .66rem; }

.fiscal__kpis {
  list-style: none;
  margin: 0;
  padding: .7rem .8rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  border-bottom: 1px solid rgba(30, 33, 36, .08);
}
.fiscal__kpis li {
  display: grid;
  gap: .12rem;
  padding: .45rem .55rem;
  border: 1px solid rgba(30, 33, 36, .1);
  border-radius: .6rem;
  background: #FBFAF7;
}
.fiscal__kpis span { color: var(--text-mute); font-size: .6rem; line-height: 1.25; }
.fiscal__kpis b { font-size: .98rem; line-height: 1.1; }
.fiscal__kpis .alerta { color: #B3202C; }

.fiscal__lista { list-style: none; margin: 0; padding: 0; }
.fiscal__lista li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .6rem;
  padding: .5rem .8rem;
  border-bottom: 1px solid rgba(30, 33, 36, .06);
}
.fiscal__quem { display: grid; gap: .05rem; min-width: 0; }
.fiscal__quem strong,
.fiscal__quem small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiscal__quem strong { font-weight: 600; }
.fiscal__quem small { color: var(--text-mute); font-size: .6rem; }
.fiscal__valor { font-variant-numeric: tabular-nums; font-weight: 600; }

/* O estado da manifestação é a informação da linha: ela precisa ser lida de
   relance, e cor sozinha não basta — cada chip carrega a palavra. */
.chip {
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.chip--ciencia { background: #FFF1EA; border-color: rgba(255, 91, 20, .3); color: #A33A08; }
.chip--ok { background: #E8F3EF; border-color: rgba(11, 106, 86, .25); color: #0b6a56; }
.chip--divergente { background: #FBE9EA; border-color: rgba(179, 32, 44, .25); color: #B3202C; }

/* ---------- O XML como ele chega ---------- */
.nota {
  z-index: 2;
  margin: 0 -1.25rem 0 0;
  width: clamp(13rem, 21vw, 17.5rem);
  max-height: 100%;
  align-self: flex-end;
  transform: rotate(-3deg);
  transform-origin: bottom center;
  border-radius: .8rem .8rem 0 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(30, 33, 36, .12);
  border-bottom: 0;
  box-shadow: 0 34px 60px -28px rgba(30, 33, 36, .45);
  font-size: .72rem;
}
.nota__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .65rem;
  background: #F5F4F0;
  border-bottom: 1px solid rgba(30, 33, 36, .08);
}
.nota__tipo { font-weight: 700; letter-spacing: .04em; }
.nota__chave {
  margin: 0;
  padding: .55rem .65rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--text-soft);
  word-spacing: .18em;
  border-bottom: 1px solid rgba(30, 33, 36, .06);
}
.nota__campos { margin: 0; padding: .55rem .65rem; display: grid; gap: .35rem; }
.nota__campos > div { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.nota__campos dt { color: var(--text-mute); font-size: .62rem; }
.nota__campos dd { margin: 0; font-weight: 600; text-align: right; }
.nota__prazo {
  margin: 0;
  padding: .45rem .65rem;
  background: #FFF1EA;
  border-top: 1px solid rgba(255, 91, 20, .22);
  line-height: 1.35;
}
.nota__prazo b { color: #A33A08; }

/* ---------- O ERP no computador e no telefone (NOUS ERP) ---------- */
/* Só a janela, sem telefone: o ERP é usado no computador. Ela é HTML porque
   o ERP ainda não tem print capturado. Os indicadores e as linhas
   reaproveitam as peças do painel fiscal; o que é só daqui é o menu dos
   módulos, que diz "quatro módulos, uma base" sem legenda. */
.vitrine__palco--erp { align-items: flex-end; gap: 0; }

.janela--erp { width: min(100%, 52rem); min-width: 0; }
.erp { background: #FFFFFF; color: #1E2124; font-size: .72rem; min-height: 0; overflow: hidden; }
.erp__corpo { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); }
.erp__painel { min-width: 0; }

.erp__menu {
  list-style: none;
  margin: 0;
  padding: .6rem .5rem;
  display: grid;
  align-content: start;
  gap: .15rem;
  background: #FBFAF7;
  border-right: 1px solid rgba(30, 33, 36, .08);
}
.erp__menu li { padding: .38rem .55rem; border-radius: .45rem; color: var(--text-soft); }
.erp__menu .is-ativo { background: #FFF1EA; color: #A33A08; font-weight: 600; }

/* ---------- Controles ---------- */
.vitrine .carousel__nav {
  background: rgba(255, 255, 255, .86);
  color: #1E2124;
  border-color: rgba(30, 33, 36, .16);
}
.vitrine .carousel__stage { position: relative; }
.vitrine .carousel__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(.6rem, 1.6vw, 1.1rem);
  margin: 0;
  z-index: 3;
}
.vitrine .carousel__dot { background: rgba(30, 33, 36, .22); box-shadow: none; }
.vitrine .carousel__dot.is-active { background: var(--brand-1); }

@media (max-width: 860px) {
  .vitrine__slide { height: auto; padding-bottom: 3.5rem; }
  .vitrine__palco--fones .fone--app { display: none; }
  .fone--zap { transform: none; margin-right: 0; }
  /* No telefone sobra o painel: o cartão do XML por cima dele roubaria a
     metade da largura que os quatro indicadores já disputam. */
  .vitrine__palco--fiscal .nota { display: none; }
  /* Sem o cartão por cima, a faixa de padding que existia para ele sobra. */
  .fiscal { padding-left: 0; font-size: .66rem; }
  .fiscal__kpis { grid-template-columns: 1fr 1fr; }
  /* O menu dos módulos é o primeiro a sair: sem ele os indicadores ficam com
     a largura toda, como no painel fiscal. */
  .erp__corpo { grid-template-columns: minmax(0, 1fr); }
  .erp__menu { display: none; }
  .erp { font-size: .66rem; }
}

/* ---------- A trilha do Codifica ---------- */
/* Quatro cartões escalonados, na mesma lógica dos aparelhos: encostados no
   rodapé, levemente desalinhados entre si e cortados pela borda. Cada um
   carrega a cor do próprio nível — as mesmas do site do projeto, onde elas
   identificam a etapa e não a marca. */
.vitrine__palco--niveis { align-items: flex-end; }

.trilha {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1rem);
  width: min(100%, 60rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trilha__item {
  display: grid;
  gap: .3rem;
  padding: 1rem 1rem 1.6rem;
  background: #FFFFFF;
  border: 1px solid rgba(30, 33, 36, .1);
  border-top: 3px solid var(--cor);
  border-radius: .9rem .9rem 0 0;
  box-shadow: 0 26px 50px -30px rgba(30, 33, 36, .45);
  text-align: left;
}
/* O degrau entre eles sugere avanço, e é o que impede que a fileira pareça uma
   tabela. O primeiro fica mais baixo; o último, mais alto. */
.trilha__item:nth-child(1) { transform: translateY(1.5rem); }
.trilha__item:nth-child(2) { transform: translateY(1rem); }
.trilha__item:nth-child(3) { transform: translateY(.5rem); }

.trilha__n {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cor);
  font-weight: 700;
}
.trilha__item strong { font-size: 1.02rem; }
.trilha__item em { font-style: normal; font-size: .78rem; color: var(--text-soft); line-height: 1.35; }

@media (max-width: 860px) {
  .trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trilha__item { transform: none !important; }
  .fone--portal { display: none; }
}

/* ==========================================================================
   PÁGINA DO NOUS IA — texto e prova, alternados
   ==========================================================================
   A página era só cartão de texto. Um assistente se explica MOSTRANDO: cada
   afirmação vem ao lado da tela onde ela acontece, e os lados se invertem a
   cada bloco para o olho não cair no mesmo lugar três vezes seguidas.
   ========================================================================== */

.ia-hero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); overflow: hidden; }

.ia-hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.ia-hero__titulo {
  margin: .6rem 0 0;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.ia-hero__lead {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text-soft);
  line-height: 1.6;
}
.ia-hero__acoes { margin-top: 1.5rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* Os mesmos aparelhos da vitrine, aqui encostados um no outro e cortados em
   baixo pelo limite da seção. */
.ia-hero__fones {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: -3rem;
}
.ia-hero__fones .fone--zap { margin-right: -1rem; }
.ia-hero__fones .fone--app { margin-left: -1rem; }

/* ---------- Par de texto e tela ---------- */
.par { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.par:nth-of-type(even) { background: var(--surface); }

.par__grade {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
/* Inverte a ordem visual sem mexer na ordem do DOM: quem navega por teclado
   ou leitor de tela continua recebendo texto e depois imagem, sempre. */
.par--invertido .par__texto { order: 2; }
/* As colunas trocam junto com a ordem: a arte fica com os 7/12 dos dois lados.
   Sem isto, invertida, ela caía na coluna estreita e a tela virava miniatura. */
.par--invertido .par__grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.par__titulo {
  margin: .6rem 0 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.par__lead { margin: .9rem 0 0; color: var(--text-soft); line-height: 1.6; }

.par__lista { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.par__lista li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .95rem;
  line-height: 1.5;
}
.par__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--brand-1);
}

.par__arte { margin: 0; }
/* Com malha, a arte vira um quadro: a janela encosta no pé dele, cortada como
   se continuasse para baixo — que é como a janela já foi desenhada. */
.par__arte.malha {
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.par__arte.malha .janela--cena { border-radius: .9rem .9rem 0 0; }

/* O mesmo palco fiscal da vitrine, agora dentro de uma coluna de 7/12 em vez
   da largura da tela: sem isto o cartão do XML come metade do espaço e a lista
   de notas vira reticências. Ele encolhe e afunda mais na janela. */
.par__arte .vitrine__palco--fiscal { width: 100%; }
.par__arte .nota { width: clamp(11rem, 15vw, 13rem); margin-right: -2rem; }
.par__arte .vitrine__palco--erp { width: 100%; }
/* Na coluna de 7/12 os quatro indicadores em linha viram valores quebrados:
   dois por linha, e o menu dos módulos mais estreito. Só acima do ponto em
   que o menu sai de cena — abaixo dele a coluna dele não pode sobrar. */
@media (min-width: 861px) {
  .par__arte .erp__corpo { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .par__arte .erp .fiscal__kpis { grid-template-columns: 1fr 1fr; }
}

/* ---------- Cena: a conversa e a tela (NOUS IA, "explica") ----------
   Montada em HTML pela mesma razão das janelas da vitrine: a tela reage à
   resposta, e um print não reage. O roteiro está no HTML (data-em) e quem o
   toca é o main.js, "Roteiro". Sem .is-encenando, tudo no estado final. */
.janela--cena { width: 100%; border-radius: .9rem; }
.cena__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  background: #FFFFFF;
  font-size: .72rem;
  color: #1E2124;
}
.cena__tela { min-width: 0; border-right: 1px solid rgba(30, 33, 36, .08); }
.cena__kpis { grid-template-columns: repeat(3, 1fr); }
.cena__kpi { transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease); }
.cena__delta { font-style: normal; font-size: .6rem; font-weight: 600; color: #B3202C; }

.cena__grafico { padding: .75rem .8rem .9rem; }
.cena__grafico-titulo { margin: 0 0 .6rem; font-weight: 600; }
.cena__grafico-titulo span { color: var(--text-mute); font-weight: 400; }
.cena__barras { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.cena__barra {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr) 2.4rem;
  align-items: center;
  gap: .5rem;
  padding: .28rem .4rem;
  border-radius: .45rem;
  transition: background .4s var(--ease);
}
.cena__barra b { text-align: right; font-variant-numeric: tabular-nums; }
.cena__barra--total { margin-top: .2rem; border-top: 1px solid rgba(30, 33, 36, .1); border-radius: 0 0 .45rem .45rem; font-weight: 700; }

/* O comprimento vem do valor, por seletor e não por style: a CSP não deixa
   estilo em atributo, e assim a barra tem tamanho mesmo sem JS. Escala: o
   total (1,2) ocupa a trilha inteira. */
.cena__traco {
  display: block;
  height: .55rem;
  width: calc(var(--v) / 1.2 * 100%);
  border-radius: 999px;
  transform-origin: left;
  transition: transform .7s var(--ease);
}
.cena__traco[data-v="0.1"] { --v: .1; }
.cena__traco[data-v="0.2"] { --v: .2; }
.cena__traco[data-v="0.3"] { --v: .3; }
.cena__traco[data-v="0.8"] { --v: .8; }
.cena__traco[data-v="1.2"] { --v: 1.2; }
.cena__traco--cai { background: #E5737B; }
.cena__traco--sobe { background: #3FA68A; }
.cena__barra--total .cena__traco--cai { background: #B3202C; }

.cena__chat {
  display: grid;
  align-content: start;
  gap: .4rem;
  padding: .6rem .65rem .8rem;
  background: #FBFAF7;
}
.cena__chat-topo {
  margin: 0 0 .15rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute);
}
.cena__chat .bolha { max-width: 100%; }
.cena__acao {
  justify-self: start;
  margin: .2rem 0 0;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: #1E2124;
  color: #F5F4F0;
  font-weight: 600;
}

/* ---- O roteiro: o que cada peça faz quando chega ---- */
.is-encenando .cena__traco { transform: scaleX(0); }
.is-encenando .cena__barra.is-chegou .cena__traco { transform: none; }
.is-encenando .cena__barra b { opacity: 0; transition: opacity .3s var(--ease) .4s; }
.is-encenando .cena__barra.is-chegou b { opacity: 1; }
/* O maior responsável e o total ficam marcados: é a tela "com o número aceso". */
.is-encenando .cena__barra--alvo.is-chegou,
.is-encenando .cena__barra--total.is-chegou { background: #FFF1EA; }
.is-encenando .cena__kpi.is-chegou {
  border-color: rgba(255, 91, 20, .55);
  background: #FFF6F0;
  box-shadow: 0 0 0 3px rgba(255, 91, 20, .14);
}
.is-encenando .cena__acao {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.is-encenando .cena__acao.is-chegou { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .cena__corpo { grid-template-columns: 1fr; }
  .cena__tela { border-right: 0; border-bottom: 1px solid rgba(30, 33, 36, .08); }
  .cena__barra { grid-template-columns: 5.8rem minmax(0, 1fr) 2.2rem; }
}

/* ---------- Chamada final ---------- */
.ia-cta { padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }
.ia-cta__caixa {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(900px 340px at 50% 0%, rgba(255, 91, 20, .12), transparent 70%),
    var(--surface);
  border: 1px solid var(--border);
}
.ia-cta__titulo {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.ia-cta__lead { margin: 0; max-width: 52ch; color: var(--text-soft); line-height: 1.6; }
.btn--grande { padding: .95rem 1.8rem; font-size: 1.02rem; }

@media (max-width: 860px) {
  .ia-hero__grade,
  .par__grade,
  .par--invertido .par__grade { grid-template-columns: 1fr; }
  .par--invertido .par__texto { order: 0; }
  .ia-hero__fones .fone--app { display: none; }
}

/* ---------- Botão flutuante do WhatsApp ----------
   Verde da própria marca do WhatsApp, e não o laranja da nous: o canal é
   reconhecido pela cor, e o laranja aqui competiria com os CTAs da página.
   Fica abaixo do cabeçalho (z-index 100) e some quando o menu mobile abre,
   porque o menu cobre a tela inteira e o botão flutuaria sobre ele. */
.zap-flutuante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.15rem;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  box-shadow: 0 16px 34px -14px rgba(37, 211, 102, .75), 0 2px 8px rgba(30, 33, 36, .18);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), opacity .2s var(--ease),
              visibility .2s var(--ease);
}
.zap-flutuante:hover {
  background: #1FBB58;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px rgba(37, 211, 102, .8), 0 2px 10px rgba(30, 33, 36, .2);
}
.zap-flutuante:focus-visible { outline-color: #0E7A3C; }
.zap-flutuante svg { width: 24px; height: 24px; flex: none; }

body.is-locked .zap-flutuante { opacity: 0; visibility: hidden; }

/* No celular o rótulo rouba largura útil e encosta no conteúdo: vira círculo.
   O nome do canal continua no aria-label, então o leitor de tela não perde
   nada — só o texto desenhado é que sai. */
@media (max-width: 640px) {
  .zap-flutuante { padding: .85rem; gap: 0; }
  .zap-flutuante__texto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .zap-flutuante:hover { transform: none; }
}