/* ============================================================
   Kotari — landing page
   Tokens: css/tokens.css (nunca escreva hex aqui)
   Linguagem visual: KV Kotari + ritmo das duas referências
   ============================================================ */

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-text);
  font-family: var(--k-font-text);
  font-size: var(--k-step-0);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--k-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--k-step-3); }
h2 { font-size: var(--k-step-2); }
h3 { font-size: var(--k-step-1); letter-spacing: -0.015em; line-height: 1.2; }
p  { margin: 0; text-wrap: pretty; }

::selection { background: var(--k-emerald); color: #fff; }

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

/* ---------- layout ---------- */

.wrap { width: min(1200px, 100% - 2 * var(--k-space-3)); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - 2 * var(--k-space-3)); margin-inline: auto; }

section { position: relative; }
.sec { padding-block: var(--k-space-6); }
.sec--mint { background: var(--k-bg-alt); }
.sec--navy { background: var(--k-bg-inverse); color: var(--k-text-inverse); }
.sec--navy h2, .sec--navy h3 { color: var(--k-text-inverse); }

.eyebrow {
  font-size: var(--k-step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--k-text-muted);
}
.sec--navy .eyebrow { color: var(--k-mint); opacity: 0.75; }

.lede { font-size: var(--k-step-1); line-height: 1.4; color: var(--k-text-muted); font-weight: 400; }
.muted { color: var(--k-text-muted); }
.center { text-align: center; }

/* ---------- botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--k-step-0);
  line-height: 1;
  letter-spacing: -0.01em;
  border: 1.5px solid transparent;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), background-color .28s, color .28s, border-color .28s, box-shadow .28s;
  will-change: transform;
}
.btn--primary {
  background: var(--k-action);
  color: var(--k-action-text);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 24px -14px var(--k-emerald-700);
}
.btn--primary:hover { background: var(--k-emerald-700); transform: translateY(-2px); }
.btn--ghost { border-color: var(--k-border); color: var(--k-text); }
.btn--ghost:hover { border-color: var(--k-text); transform: translateY(-2px); }
.sec--navy .btn--ghost { border-color: rgba(224,242,233,.35); color: var(--k-text-inverse); }
.sec--navy .btn--ghost:hover { border-color: var(--k-mint); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 1.1em 2em; }

/* ---------- header ---------- */

.hdr {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--k-cream) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background-color .3s;
}
.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--k-space-3);
  height: 80px;
  transition: height .35s cubic-bezier(.2,.7,.3,1);
}
.hdr.is-compact { border-bottom-color: var(--k-border); }
.hdr.is-compact .hdr__in { height: 60px; }
.hdr__logo img { height: 30px; width: auto; transition: height .35s cubic-bezier(.2,.7,.3,1); }
.hdr.is-compact .hdr__logo img { height: 25px; }

.nav { display: flex; gap: var(--k-space-3); font-size: var(--k-step--1); font-weight: 500; }
.nav a { position: relative; padding-block: 4px; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.hdr__act { display: flex; align-items: center; gap: 0.7rem; }
.hdr__act .btn { padding: 0.7em 1.2em; font-size: var(--k-step--1); }
.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--k-text); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--k-text);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

/* ============================================================
   1 · HERÓI
   ============================================================ */

.hero {
  position: relative;
  padding-top: calc(80px + var(--k-space-6));
  padding-bottom: 0;
  isolation: isolate;
  /* sem overflow:hidden aqui — é o que deixa o mockup invadir a
     seção seguinte. O recorte dos vegetais é feito por .veg. */
}
.hero__in { position: relative; z-index: 2; text-align: center; }
.hero__eyebrow { margin-bottom: var(--k-space-2); display: inline-block; }
.hero h1 { max-width: 15ch; margin-inline: auto; }
.hero__sub {
  max-width: 54ch;
  margin: var(--k-space-3) auto 0;
  font-size: var(--k-step-1);
  line-height: 1.45;
  color: var(--k-text-muted);
}
.hero__sub b { color: var(--k-text); font-weight: 600; }
.hero__cta {
  margin-top: var(--k-space-4);
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__micro { margin-top: var(--k-space-2); font-size: var(--k-step--1); color: var(--k-text-muted); }

/* ============================================================
   MOCKUP DO HERÓI
   Notebook desenhado em CSS. A moldura antiga era um retângulo com
   três bolinhas, que lê como "print recortado". Um aparelho com
   bisel, câmera, base e sombra de apoio dá profundidade e faz o
   conteúdo parecer um produto rodando, não uma imagem colada.
   ============================================================ */

.mock {
  position: relative;
  z-index: 3;
  width: min(920px, 100%);
  margin: var(--k-space-5) auto calc(-1 * var(--k-space-5));
  perspective: 1400px;
}

/* tampa: o corpo escuro que segura a tela */
.mock__lid {
  position: relative;
  border-radius: clamp(10px, 1.6vw, 20px);
  padding: clamp(9px, 1.1vw, 15px);
  background:
    linear-gradient(160deg, #3b4358 0%, #202634 32%, #171c27 62%, #2c3342 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09) inset,
    0 1px 0 rgba(255,255,255,.16) inset,
    0 30px 60px -30px rgba(10,27,63,.55);
}
.mock__cam {
  position: absolute; top: clamp(4px, .45vw, 7px); left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: #0a0d14;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), inset 0 0 2px rgba(120,180,255,.5);
}

/* vidro: onde o conteúdo vive, com o reflexo diagonal por cima */
.mock__glass {
  position: relative;
  border-radius: clamp(5px, .7vw, 9px);
  overflow: hidden;
  background: var(--k-surface);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6);
}
.mock__glass::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(112deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 26%, transparent 46%);
  pointer-events: none;
  z-index: 5;
}

/* base: a parte de baixo do aparelho, com o recorte do polegar */
.mock__base {
  position: relative;
  width: 106%;
  margin: 0 auto;
  left: -3%;
  height: clamp(11px, 1.5vw, 20px);
  border-radius: 0 0 clamp(8px, 1vw, 14px) clamp(8px, 1vw, 14px);
  background: linear-gradient(180deg, #d7dbe3 0%, #aeb5c2 46%, #7f8797 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 12px 20px -12px rgba(10,27,63,.5);
}
.mock__notch {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 14%; height: 42%;
  border-radius: 0 0 99px 99px;
  background: linear-gradient(180deg, #8d95a5, #b9c0cc);
}

/* sombra de apoio: o que assenta o aparelho na página */
.mock__floor {
  position: absolute; left: 50%; bottom: -22px;
  transform: translateX(-50%);
  width: 78%; height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(10,27,63,.28), transparent 70%);
  filter: blur(9px);
  z-index: -1;
}

/* barra do navegador dentro da tela */
.mock__bar {
  display: flex; align-items: center; gap: 8px;
  padding: clamp(7px, .8vw, 11px) clamp(9px, 1vw, 14px);
  border-bottom: 1px solid var(--k-border);
  background: color-mix(in srgb, var(--k-cream) 55%, #fff);
}
.mock__dots { display: flex; gap: 5px; }
.mock__dots i { width: 9px; height: 9px; border-radius: 50%; }
.mock__dots i:nth-child(1) { background: #ec6a5e; }
.mock__dots i:nth-child(2) { background: #f4bf4f; }
.mock__dots i:nth-child(3) { background: #61c554; }
.mock__url {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 11px; color: var(--k-text-muted);
  background: var(--k-bg); border-radius: 999px; padding: 4px 12px;
  max-width: 240px; margin-inline: auto;
}
.mock__url svg { opacity: .55; flex: none; }

.mock__screen { position: relative; aspect-ratio: 16 / 10; background: var(--k-cream); }
.mock__screen img { width: 100%; height: 100%; object-fit: cover; }
.mock__play {
  position: absolute; inset: 0; margin: auto;
  width: clamp(58px, 7vw, 84px); aspect-ratio: 1; border-radius: 50%;
  background: var(--k-surface);
  display: grid; place-content: center;
  box-shadow: 0 14px 34px -12px rgba(10,27,63,.6);
  z-index: 6;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.mock__play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: clamp(15px, 1.9vw, 22px) solid var(--k-emerald);
  border-block: clamp(9px, 1.2vw, 13px) solid transparent;
}
.mock:hover .mock__play { transform: scale(1.09); }
/* fora da tela, sob o aparelho: dentro dela as tags cobriam ora o
   botão da interface, ora o logo da lateral */
.mock__meta {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; flex-wrap: wrap;
  margin-top: calc(var(--k-space-3) + 8px);
}
.mock__cap { font-size: var(--k-step--1); color: var(--k-text-muted); }
.mock__tag {
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--k-grey-warm) 30%, transparent);
  color: var(--k-text-muted);
  border: 1px solid var(--k-border);
}

/* vegetais flutuantes — 3 planos de profundidade */
.veg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.veg img {
  position: absolute;
  object-fit: contain;
  will-change: transform;
}
.veg__p1 { opacity: .5; filter: blur(6px); }   /* fundo  — 0,25× */
.veg__p2 { opacity: .82; filter: blur(1.5px); } /* médio  — 0,55× */
.veg__p3 { opacity: 1; }                        /* frente — 0,9×  */

/* Zona protegida — a regra que segura tudo.
   Cada elemento é ancorado A PARTIR DO CENTRO, nunca da borda: a
   aresta interna fica sempre a --band pixels do eixo. Assim o H1, a
   subheadline e os CTAs continuam limpos em qualquer largura, e em
   telas estreitas os vegetais cortam na borda (efeito desejado) em
   vez de invadir o texto. */
.veg .l { right: calc(50% + var(--band)); }
.veg .r { left:  calc(50% + var(--band)); }

.v1  { --band: 400px; width: 150px; top: 12%; }
.v2  { --band: 430px; width: 118px; top: 46%; }
.v3  { --band: 470px; width:  86px; top: 71%; }
.v4  { --band: 500px; width:  74px; top: 26%; }
.v5  { --band: 405px; width: 168px; top: 63%; }
.v6  { --band: 425px; width: 132px; top: 10%; }
.v7  { --band: 495px; width:  96px; top: 38%; }
.v8  { --band: 410px; width: 108px; top: 67%; }
.v9  { --band: 445px; width: 176px; top: 18%; }
.v10 { --band: 400px; width: 158px; top: 74%; }
.v11 { --band: 520px; width:  70px; top: 52%; }

/* ============================================================
   2 · FAIXA DE LOGOS (marquee)
   ============================================================ */

/* padding-top maior: compensa a invasão do mockup do herói */
.logos { padding-block: calc(var(--k-space-6) + var(--k-space-4)) var(--k-space-5); overflow: hidden; }
.logos__title { text-align: center; margin-bottom: var(--k-space-4); }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: var(--k-space-5); width: max-content; will-change: transform; }
.logo-ph {
  height: 42px; width: 140px;
  display: grid; place-content: center;
  border-radius: var(--k-radius);
  background: color-mix(in srgb, var(--k-grey-warm) 28%, transparent);
  color: var(--k-text-muted);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  filter: grayscale(1); opacity: .7;
  transition: filter .3s, opacity .3s;
}
.logo-ph:hover { filter: none; opacity: 1; }
.logos__claim {
  margin: var(--k-space-4) auto 0;
  max-width: 46ch; text-align: center;
  font-size: var(--k-step-1); line-height: 1.4;
}
.logos__claim b { color: var(--k-emerald); font-weight: 700; }

/* ============================================================
   3 · PROBLEMA
   ============================================================ */

/* O prato entra como âncora visual do bloco: é o fim da linha de
   tudo que a página descreve. Os três problemas ficam ao lado, em
   pilha, em vez de três colunas com ícone. */
.prob__grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) 1fr;
  gap: var(--k-space-5);
  align-items: center;
  margin-top: var(--k-space-5);
}
.prob__bowl {
  margin: 0;
  position: relative;
  will-change: transform;
}
.prob__bowl::before {           /* halo quente atrás do prato */
  content: "";
  position: absolute;
  inset: 6% 6% 2%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--k-saffron) 26%, transparent), transparent 68%);
  filter: blur(28px);
  z-index: 0;
}
.prob__bowl img {
  position: relative; z-index: 1;
  width: 100%; height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 40px 60px rgba(10,27,63,.28));
}
.prob__list { display: grid; gap: var(--k-space-3); }
.prob__card {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  padding: var(--k-space-3) var(--k-space-4);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s, border-color .4s;
}
.prob__card:hover {
  transform: translateX(6px);
  border-color: color-mix(in srgb, var(--k-emerald) 40%, var(--k-border));
  box-shadow: 0 24px 50px -34px rgba(10,27,63,.4);
}
.prob__card h3 { margin-bottom: 0.5rem; font-size: var(--k-step-1); }

/* ============================================================
   4 · COMO FUNCIONA
   ============================================================ */

.steps { margin-top: var(--k-space-6); display: grid; gap: var(--k-space-6); }
.step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--k-space-5);
  align-items: center;
}
.step:nth-child(even) .step__txt { order: 2; }
.step__num {
  font-size: var(--k-step--1); font-weight: 700; letter-spacing: .14em;
  color: var(--k-emerald); margin-bottom: var(--k-space-2);
  display: flex; align-items: center; gap: 10px;
}
.step__num::after { content: ""; height: 1px; width: 44px; background: var(--k-border); }
.step__txt h3 { margin-bottom: 0.8rem; }

/* CTA por passo — peso leve de propósito: são 6 na mesma seção e
   não podem competir com o primário do herói e do preço. */
.btn--step {
  margin-top: var(--k-space-3);
  padding: 0.55em 0;
  border-radius: 0;
  color: var(--k-emerald);
  gap: 0.55em;
  position: relative;
}
.btn--step::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.btn--step:hover { transform: none; color: var(--k-emerald-700); }
.btn--step:hover::after { transform: scaleX(1); transform-origin: left; }
.btn--step svg { transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.btn--step:hover svg { transform: translateX(4px); }
/* Tratamento dos prints: a imagem original tem uma margem clara em
   volta da janela. Recortamos por dentro dela (cover + scale) para a
   tela do produto chegar mais perto e preencher o quadro. Com a
   moldura de origem cortada, o card volta a ter chrome próprio. */
.step__shot {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--k-radius-lg);
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  box-shadow: 0 34px 64px -40px rgba(10,27,63,.45);
  display: grid; place-content: center;
  color: var(--k-text-muted); font-size: var(--k-step--1);
  will-change: transform;
}
.step__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.02);          /* respiro: o recorte pesado já foi feito no arquivo */
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.step:hover .step__shot img { transform: scale(1.12); }

/* ============================================================
   5 · CONFIANÇA
   ============================================================ */

.trust__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--k-space-3); margin-top: var(--k-space-5);
}
/* Cada item é uma foto de gente do ramo — não ícone. A foto ocupa
   o topo do card inteiro, sangrando nas bordas. */
.trust__item {
  border-radius: var(--k-radius-lg);
  background: color-mix(in srgb, var(--k-navy-700) 40%, transparent);
  border: 1px solid rgba(224,242,233,.14);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), border-color .45s;
}
.trust__item:hover { transform: translateY(-5px); border-color: rgba(224,242,233,.3); }

.trust__ph {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: var(--k-navy-900);
}
.trust__ph::after {                 /* funde a base da foto no card */
  content: "";
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, color-mix(in srgb, var(--k-navy) 92%, transparent), transparent);
}
.trust__ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.trust__item:hover .trust__ph img { transform: scale(1.05); }

.trust__body { padding: var(--k-space-3) var(--k-space-4) var(--k-space-4); }
.trust__item h3 { font-size: var(--k-step-1); margin-bottom: .5rem; }
.trust__item p { color: color-mix(in srgb, var(--k-mint) 78%, transparent); }

/* ============================================================
   6 · COMPARATIVO
   ============================================================ */

.cmp { margin-top: var(--k-space-5); border-radius: var(--k-radius-lg); overflow: hidden; border: 1px solid var(--k-border); }
.cmp__head, .cmp__row { display: grid; grid-template-columns: 1fr 1fr; }
.cmp__head > div {
  padding: var(--k-space-3);
  font-weight: 700; font-family: var(--k-font-display);
  font-size: var(--k-step-1); letter-spacing: -.02em;
}
.cmp__head > div:first-child { background: color-mix(in srgb, var(--k-grey-warm) 26%, transparent); color: var(--k-text-muted); }
.cmp__head > div:last-child { background: var(--k-emerald); color: #fff; }
.cmp__row > div { padding: 1rem var(--k-space-3); border-top: 1px solid var(--k-border); display: flex; gap: .7rem; align-items: flex-start; }
.cmp__row > div:first-child { background: var(--k-surface); color: var(--k-text-muted); }
.cmp__row > div:last-child { background: color-mix(in srgb, var(--k-mint) 45%, var(--k-surface)); font-weight: 500; }
.cmp__row svg { flex: none; margin-top: 4px; }
.cmp__toggle { display: none; }

/* ============================================================
   7 · PREÇO
   ============================================================ */

.price__grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--k-space-3);
  margin-top: var(--k-space-5); align-items: start;
}
.price__card {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  padding: var(--k-space-4);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.price__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px rgba(10,27,63,.4); }
.price__card--hero { border-color: var(--k-emerald); border-width: 2px; position: relative; }
.price__badge {
  position: absolute; top: -13px; left: var(--k-space-4);
  background: var(--k-saffron); color: var(--k-navy);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.price__val { display: flex; align-items: baseline; gap: .4rem; margin-block: var(--k-space-2) var(--k-space-3); }
.price__val strong { font-family: var(--k-font-display); font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.price__val span { color: var(--k-text-muted); font-size: var(--k-step-0); }
.price__list { list-style: none; margin: 0 0 var(--k-space-4); padding: 0; display: grid; gap: .7rem; }
.price__list li { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--k-step-0); }
.price__list svg { flex: none; margin-top: 4px; color: var(--k-emerald); }
.price__note { margin-top: var(--k-space-4); text-align: center; max-width: 60ch; margin-inline: auto; }

/* ============================================================
   7b · TESTE GRÁTIS + IMPORTAÇÃO POR PLANILHA
   ============================================================ */

.trial__grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: var(--k-space-5);
  align-items: center;
}
.trial__list { list-style: none; margin: var(--k-space-4) 0 0; padding: 0; display: grid; gap: var(--k-space-3); }
.trial__list li { display: flex; gap: .9rem; align-items: flex-start; }
.trial__list svg { flex: none; margin-top: 3px; color: var(--k-emerald); }
.trial__list strong { font-weight: 700; }
.trial__list div { color: var(--k-text-muted); }
.trial__cta { margin-top: var(--k-space-4); display: flex; gap: .8rem; flex-wrap: wrap; }

/* mock da importação */
.imp {
  margin: 0;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  padding: var(--k-space-3);
  box-shadow: 0 40px 70px -45px rgba(10,27,63,.45);
}
.imp__file {
  display: flex; align-items: center; gap: .9rem;
  padding: var(--k-space-3);
  border: 1.5px dashed color-mix(in srgb, var(--k-emerald) 45%, var(--k-border));
  border-radius: var(--k-radius);
  background: color-mix(in srgb, var(--k-mint) 40%, transparent);
  margin-bottom: var(--k-space-3);
}
.imp__file small { display: block; color: var(--k-text-muted); font-size: var(--k-step--1); }
.imp__xls {
  flex: none;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--k-emerald);
  padding: 10px 9px; border-radius: 8px;
}

.imp__sheet { border: 1px solid var(--k-border); border-radius: var(--k-radius); overflow: hidden; }
.imp__row {
  display: grid;
  grid-template-columns: 1.25fr 1.15fr .8fr;
  gap: .6rem;
  padding: .68rem .85rem;
  font-size: 13px;
  border-top: 1px solid var(--k-border);
  white-space: nowrap; overflow: hidden;
}
.imp__row span { overflow: hidden; text-overflow: ellipsis; }
.imp__row:first-child { border-top: 0; }
.imp__row--head {
  background: color-mix(in srgb, var(--k-grey-warm) 24%, transparent);
  font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--k-text-muted);
}
.imp__row:not(.imp__row--head) span:nth-child(2),
.imp__row:not(.imp__row--head) span:nth-child(3) { color: var(--k-text-muted); }

.imp__bar { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--k-grey-warm) 40%, transparent); margin-top: var(--k-space-3); overflow: hidden; }
.imp__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--k-emerald); }
.imp__done {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .8rem; font-size: var(--k-step--1); font-weight: 600;
  color: var(--k-emerald);
}
.imp__done b { font-variant-numeric: tabular-nums; }
.imp__note { margin-top: .4rem; font-size: 11px; color: var(--k-text-muted); }

.js .imp__row[data-imp] { opacity: 0; }

/* ============================================================
   8 · DEPOIMENTOS
   ============================================================ */

.tst__row {
  margin-top: var(--k-space-5);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr);
  gap: var(--k-space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--k-space-2);
  scrollbar-width: none;
}
.tst__row::-webkit-scrollbar { display: none; }
.tst__card {
  scroll-snap-align: start;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  padding: var(--k-space-4);
  display: flex; flex-direction: column; gap: var(--k-space-3);
}
.tst__quote { font-size: var(--k-step-1); line-height: 1.35; font-family: var(--k-font-display); font-weight: 500; letter-spacing: -.015em; }
.tst__who { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.tst__ph {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--k-bg-alt); flex: none;
  display: grid; place-content: center; font-size: 10px; color: var(--k-text-muted);
}
.tst__thumb {
  aspect-ratio: 16/10; border-radius: var(--k-radius);
  background: var(--k-navy-900); position: relative;
  display: grid; place-content: center; color: var(--k-mint); font-size: var(--k-step--1);
}
.tst__thumb .mock__play { width: 52px; height: 52px; }
.tst__thumb .mock__play::before { border-left-width: 14px; border-block-width: 9px; margin-left: 4px; }
.tst__nav { display: flex; gap: .6rem; justify-content: flex-end; margin-top: var(--k-space-3); }
.tst__nav button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--k-border);
  display: grid; place-content: center;
  transition: background-color .3s, border-color .3s, transform .3s;
}
.tst__nav button:hover { background: var(--k-text); color: var(--k-cream); border-color: var(--k-text); transform: translateY(-2px); }

/* ============================================================
   9 · FAQ
   ============================================================ */

.faq { margin-top: var(--k-space-5); border-top: 1px solid var(--k-border); }
.faq__item { border-bottom: 1px solid var(--k-border); }
.faq__q {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-space-3);
  padding: var(--k-space-3) 0;
  text-align: left;
  font-family: var(--k-font-display);
  font-size: var(--k-step-1);
  font-weight: 600; letter-spacing: -.015em; line-height: 1.25;
  transition: color .25s;
}
.faq__q:hover { color: var(--k-emerald); }
.faq__sign { flex: none; width: 28px; height: 28px; position: relative; margin-top: 4px; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; border-radius: 2px;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .25s;
}
.faq__sign::before { width: 15px; height: 1.5px; }
.faq__sign::after  { width: 1.5px; height: 15px; }
.faq__item[data-open="true"] .faq__sign::after { transform: rotate(90deg); opacity: 0; }
/* resposta SEMPRE no HTML — só escondida por CSS (SEO + leitores de tela) */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.3,1); }
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: var(--k-space-3); max-width: 68ch; color: var(--k-text-muted); }

/* ============================================================
   10 · FAIXA FINAL + RODAPÉ
   ============================================================ */

.final { position: relative; overflow: hidden; text-align: center; }
.final .wrap--narrow { position: relative; z-index: 2; }
.final p { margin-top: var(--k-space-2); color: color-mix(in srgb, var(--k-mint) 80%, transparent); font-size: var(--k-step-1); }
.final__cta { margin-top: var(--k-space-4); display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.final .btn--primary { background: var(--k-saffron); color: var(--k-navy); box-shadow: none; }
.final .btn--primary:hover { background: #fff; }

.ftr { background: var(--k-navy-900); color: var(--k-text-inverse); padding-block: var(--k-space-5) var(--k-space-3); }
.ftr h4 { font-size: var(--k-step--1); letter-spacing: .12em; text-transform: uppercase; opacity: .55; margin-bottom: var(--k-space-2); font-weight: 600; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: var(--k-step--1); }
.ftr a { opacity: .82; transition: opacity .25s; }
.ftr a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* linha 1 — entidade + NAP */
.ftr__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--k-space-4);
  padding-bottom: var(--k-space-5);
  border-bottom: 1px solid rgba(224,242,233,.14);
}
.ftr__logo img { height: 30px; margin-bottom: var(--k-space-3); }
.ftr__desc { font-size: var(--k-step--1); line-height: 1.6; opacity: .75; max-width: 52ch; }
.ftr__desc b { opacity: 1; font-weight: 700; }
.ftr__nap { font-style: normal; font-size: var(--k-step--1); line-height: 1.8; }
.ftr__nap p { opacity: .78; }
.ftr__hours { margin-top: var(--k-space-2); opacity: .5 !important; line-height: 1.5; }
.ftr__soc { display: flex; gap: .6rem; margin-top: var(--k-space-3); }
.ftr__soc a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(224,242,233,.2); display: grid; place-content: center; }
.ftr__soc a:hover { background: rgba(224,242,233,.1); text-decoration: none; }

/* linha 2 — navegação */
.ftr__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--k-space-4);
  padding-block: var(--k-space-5);
}

/* linha 3 — base legal */
.ftr__base {
  padding-top: var(--k-space-3);
  border-top: 1px solid rgba(224,242,233,.14);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--k-space-3); flex-wrap: wrap;
  font-size: var(--k-step--1); opacity: .6;
}
/* .ftr ul já define grid — precisa da mesma especificidade para virar linha */
.ftr ul.ftr__meta { display: flex; flex-wrap: wrap; gap: var(--k-space-3); }

/* ---------- barra fixa mobile ---------- */

.sticky-cta {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  display: none; align-items: center; justify-content: space-between; gap: var(--k-space-2);
  padding: 10px var(--k-space-3);
  background: color-mix(in srgb, var(--k-cream) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--k-border);
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.sticky-cta.is-on { transform: translateY(0); }
.sticky-cta strong { font-family: var(--k-font-display); font-size: var(--k-step-1); letter-spacing: -.02em; }
.sticky-cta small { display: block; color: var(--k-text-muted); font-size: 12px; }

/* ============================================================
   ANIMAÇÕES DE ENTRADA (estado inicial; o JS libera)
   ============================================================ */

.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal-line span { display: block; }
.js .fx-mock { opacity: 0; transform: translateY(40px) scale(.97); }

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1024px) {
  .step { grid-template-columns: 1fr; gap: var(--k-space-3); }
  .step:nth-child(even) .step__txt { order: 0; }
  .prob__grid { grid-template-columns: 1fr; gap: var(--k-space-4); }
  .trial__grid { grid-template-columns: 1fr; gap: var(--k-space-4); }
  .prob__bowl { width: min(380px, 72%); margin-inline: auto; }
  .price__grid { grid-template-columns: 1fr; }
  .ftr__grid { grid-template-columns: repeat(3, 1fr); }
  .ftr__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav, .hdr__act .btn--ghost { display: none; }
  .burger { display: flex; }
  .hdr__in { height: 62px; }
  .hdr__logo img { height: 24px; }
  .hdr__act .btn { padding: .65em 1em; font-size: 13px; white-space: nowrap; }

  /* O CTA precisa caber acima da dobra (375×812). Com o H1 no
     tamanho de desktop ele descia ~380px abaixo da linha. */
  .hero { padding-top: calc(62px + var(--k-space-4)); }
  .hero h1 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 2.4rem); max-width: 100%; }
  .hero__sub { font-size: var(--k-step-0); max-width: 100%; margin-top: var(--k-space-2); }
  .hero__cta, .trial__cta { flex-direction: column; margin-top: var(--k-space-3); }
  .trial__cta .btn { width: 100%; }
  .imp__row { grid-template-columns: 1.3fr 1fr; font-size: 12px; }
  .imp__row span:nth-child(3) { display: none; }
  .hero__cta .btn { width: 100%; }
  .mock { margin-top: var(--k-space-4); }
  .trust__grid { grid-template-columns: 1fr; }
  .sticky-cta { display: flex; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: var(--k-space-3); }
  .ftr__top { grid-template-columns: 1fr; gap: var(--k-space-3); }
  .ftr__base { justify-content: flex-start; align-items: flex-start; flex-direction: column; }
  body { padding-bottom: 74px; }

  /* vegetais: 6 elementos, plano único, ancorados na borda.
     A âncora pelo centro não serve aqui — em 390px de largura ela
     jogaria tudo para fora da tela. */
  .veg img { filter: none; opacity: .9; }
  .veg .l, .veg .r { left: auto; right: auto; }
  .v3, .v4, .v7, .v9, .v11 { display: none; }
  .v1  { width: 78px;  top: 2%;  left: -6%;  }
  .v2  { width: 76px;  top: 54%; left: -9%;  }
  .v5  { width: 104px; top: 76%; left: -2%;  }
  .v6  { width: 84px;  top: 10%; right: -4%; }
  .v8  { width: 72px;  top: 62%; right: -8%; }
  .v10 { width: 96px;  top: 82%; right: -2%; }

  /* comparativo: nunca rola na horizontal — vira toggle */
  .cmp__toggle {
    display: flex; gap: 4px; padding: 4px;
    background: color-mix(in srgb, var(--k-grey-warm) 26%, transparent);
    border-radius: 999px; margin-top: var(--k-space-4);
  }
  .cmp__toggle button {
    flex: 1; padding: .7em 1em; border-radius: 999px;
    font-size: var(--k-step--1); font-weight: 600;
    transition: background-color .3s, color .3s;
  }
  .cmp__toggle button[aria-selected="true"] { background: var(--k-emerald); color: #fff; }
  .cmp { margin-top: var(--k-space-2); }
  .cmp__head, .cmp__row { grid-template-columns: 1fr; }
  .cmp[data-show="com"] .cmp__head > div:first-child,
  .cmp[data-show="com"] .cmp__row > div:first-child { display: none; }
  .cmp[data-show="sem"] .cmp__head > div:last-child,
  .cmp[data-show="sem"] .cmp__row > div:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .fx-mock { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   PÁGINAS INTERNAS
   Mesmo vocabulário da home: fundo creme, legumes em parallax,
   reveal em cascata, cards com lift. O que muda é a densidade:
   herói menor, texto mais longo, mais links.
   ============================================================ */

.sec--tight { padding-block: var(--k-space-5); }
.sec__h2 { margin-top: .6rem; max-width: 22ch; }
.sec__lede { margin-top: var(--k-space-3); max-width: 62ch; }

/* ---------- migalha de pão ---------- */
.crumbs { margin-bottom: var(--k-space-3); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: var(--k-step--1); color: var(--k-text-muted);
}
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .5; }
.crumbs a:hover { color: var(--k-text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--k-text); }

/* ---------- herói de página interna ---------- */
.phero {
  position: relative;
  padding-top: calc(80px + var(--k-space-5));
  padding-bottom: var(--k-space-5);
  isolation: isolate;
  overflow: hidden;
}
.phero__in { position: relative; z-index: 2; }
.phero__h1 { max-width: 20ch; margin-top: .4rem; }
.phero__lede { max-width: 58ch; margin-top: var(--k-space-3); font-size: var(--k-step-1); line-height: 1.45; color: var(--k-text-muted); }
.phero__cta { margin-top: var(--k-space-4); display: flex; gap: .8rem; flex-wrap: wrap; }

/* legumes da página interna: menos densos, só nas bordas externas */
.veg--page img { opacity: .5; }
.veg--page .v1  { --band: 520px; top: 6%;  width: 120px; }
.veg--page .v3  { --band: 560px; top: 62%; width:  70px; }
.veg--page .v5  { --band: 500px; top: 74%; width: 130px; }
.veg--page .v6  { --band: 505px; top: 12%; width: 108px; }
.veg--page .v8  { --band: 545px; top: 52%; width:  86px; }
.veg--page .v10 { --band: 495px; top: 78%; width: 128px; }

/* ---------- caixa "Em resumo" (a resposta que a IA cita) ---------- */
.resumo {
  border-left: 3px solid var(--k-emerald);
  background: color-mix(in srgb, var(--k-mint) 42%, transparent);
  border-radius: 0 var(--k-radius-lg) var(--k-radius-lg) 0;
  padding: var(--k-space-4);
}
.resumo h2 {
  font-size: var(--k-step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-emerald); margin-bottom: var(--k-space-2);
}
.resumo p + p { margin-top: var(--k-space-2); }

/* ---------- grade de cards ---------- */
.cardgrid { display: grid; gap: var(--k-space-3); margin-top: var(--k-space-5); }
.cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
.cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  padding: var(--k-space-4);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(10,27,63,.4); }
.card h3 { margin-bottom: .6rem; }
.card a { color: var(--k-emerald); font-weight: 600; }
.card a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- bloco dividido (texto + foto) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-space-5); align-items: center; }
.split__txt h2 { margin-block: .6rem var(--k-space-3); }
.split__txt p + p { margin-top: var(--k-space-2); }
.split__txt p { color: var(--k-text-muted); }
.split__txt .btn { margin-top: var(--k-space-3); }
.split__img {
  margin: 0; border-radius: var(--k-radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; will-change: transform;
  box-shadow: 0 40px 70px -45px rgba(10,27,63,.45);
}
.split__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- lista numerada de etapas ---------- */
.steplist { list-style: none; margin: var(--k-space-5) 0 0; padding: 0; display: grid; gap: var(--k-space-4); }
.steplist li { display: flex; gap: var(--k-space-3); align-items: flex-start; }
.steplist__n {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-content: center;
  background: var(--k-bg-alt); color: var(--k-emerald);
  font-family: var(--k-font-display); font-weight: 800; font-size: var(--k-step-0);
}
.steplist h3 { margin-bottom: .4rem; }

/* ---------- grade de links (blog, ajuda, materiais) ---------- */
.linkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-space-3); margin-top: var(--k-space-5); }
.linkcard {
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  padding: var(--k-space-4);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), border-color .4s, box-shadow .4s;
}
.linkcard:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--k-emerald) 45%, var(--k-border));
  box-shadow: 0 24px 50px -34px rgba(10,27,63,.4);
}
.linkcard h3 { font-size: var(--k-step-1); }
.linkcard__go {
  margin-top: auto; padding-top: var(--k-space-2);
  font-size: var(--k-step--1); font-weight: 700; color: var(--k-emerald);
}
.linkcard__go::after { content: " →"; transition: margin-left .3s cubic-bezier(.2,.7,.3,1); }
.linkcard:hover .linkcard__go::after { margin-left: 5px; }

/* ---------- texto corrido (glossário, legal) ---------- */
.prose { max-width: 72ch; }
.prose h2 {
  font-size: var(--k-step-1); margin-top: var(--k-space-5); margin-bottom: var(--k-space-2);
  padding-bottom: .5rem; border-bottom: 1px solid var(--k-border);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--k-step-0); font-weight: 700; margin-top: var(--k-space-3); margin-bottom: .3rem; }
.prose p, .prose ul, .prose ol { color: var(--k-text-muted); margin-bottom: var(--k-space-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--k-emerald); font-weight: 600; }
.prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prose em { opacity: .7; }

.aviso {
  background: color-mix(in srgb, var(--k-saffron) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--k-saffron) 55%, transparent);
  border-radius: var(--k-radius);
  padding: var(--k-space-3);
  margin-bottom: var(--k-space-4);
  font-size: var(--k-step--1);
  color: var(--k-text);
}

@media (max-width: 1024px) {
  .cardgrid--3, .linkgrid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: var(--k-space-4); }
  .split__img { order: -1; }
}

@media (max-width: 760px) {
  .cardgrid--3, .cardgrid--2, .linkgrid { grid-template-columns: 1fr; }
  .phero { padding-top: calc(62px + var(--k-space-4)); }
  .phero__h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.4rem); max-width: 100%; }
  .phero__lede { font-size: var(--k-step-0); }
  .phero__cta { flex-direction: column; }
  .phero__cta .btn { width: 100%; }
  .veg--page .v3, .veg--page .v8 { display: none; }
  .veg--page .l, .veg--page .r { left: auto; right: auto; }
  .veg--page .v1  { width: 76px; top: 4%;  left: -6%; }
  .veg--page .v5  { width: 88px; top: 72%; left: -5%; }
  .veg--page .v6  { width: 72px; top: 14%; right: -5%; }
  .veg--page .v10 { width: 86px; top: 66%; right: -4%; }
  .steplist li { gap: var(--k-space-2); }
}

/* CTA no rodapé de um bloco de conteúdo. Existe para as páginas de
   segmento fecharem o argumento sem esperar a faixa final. */
.blococta {
  margin-top: var(--k-space-5);
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
}
.blococta__nota {
  flex-basis: 100%;
  font-size: var(--k-step--1);
  color: var(--k-text-muted);
}
@media (max-width: 760px) {
  .blococta { flex-direction: column; align-items: stretch; }
  .blococta .btn { width: 100%; }
  .blococta__nota { text-align: center; }
}

/* ============================================================
   TELA FALSA DO PRODUTO (poster do vídeo do herói)
   Desenhada em HTML porque print de sistema envelhece e imagem
   de banco não mostra o produto. Tudo dimensionado em cqw, então
   escala junto com o mockup sem perder nitidez.
   ============================================================ */

.mock__screen { container-type: size; }

.ui {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 19cqw 1fr;
  background: var(--k-cream);
  font-size: 1.75cqw;
  line-height: 1.35;
  text-align: left;
  overflow: hidden;
}

/* ---- lateral ---- */
.ui__side {
  background: var(--k-navy);
  color: var(--k-mint);
  padding: 2.2cqw 1.6cqw;
  display: flex; flex-direction: column; gap: 2.2cqw;
}
.ui__brand { display: flex; align-items: center; gap: .7cqw; }
.ui__brand img { width: 2.6cqw; height: 2.6cqw; filter: brightness(0) invert(1); }
.ui__brand span { font-weight: 800; letter-spacing: -.02em; font-size: 2.1cqw; color: #fff; }
.ui__nav { display: grid; gap: .35cqw; font-size: 1.55cqw; }
.ui__nav span {
  padding: .85cqw 1cqw; border-radius: .7cqw;
  opacity: .58;
}
.ui__nav .is-on { background: var(--k-emerald); color: #fff; opacity: 1; font-weight: 600; }
.ui__side-foot {
  margin-top: auto; display: flex; align-items: center; gap: .7cqw;
  font-size: 1.35cqw; opacity: .6;
}
.ui__avatar {
  width: 2.6cqw; height: 2.6cqw; border-radius: 50%;
  background: var(--k-emerald-300); color: #fff;
  display: grid; place-content: center; font-size: 1.15cqw; font-weight: 700;
}

/* ---- área principal ---- */
.ui__main { display: flex; flex-direction: column; padding: 2.2cqw 2.4cqw; gap: 1.6cqw; }
.ui__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.6cqw; }
.ui__code {
  display: block; font-size: 1.25cqw; font-weight: 700;
  letter-spacing: .1em; color: var(--k-emerald);
}
.ui__title { display: block; font-size: 2.3cqw; letter-spacing: -.02em; margin-top: .3cqw; }
.ui__chip {
  flex: none;
  background: color-mix(in srgb, var(--k-saffron) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--k-saffron) 60%, transparent);
  color: var(--k-navy);
  font-size: 1.25cqw; font-weight: 600;
  padding: .55cqw 1cqw; border-radius: 99px;
}

/* ---- grade de comparação ---- */
.ui__table {
  background: #fff;
  border: 1px solid var(--k-grey-warm);
  border-radius: 1cqw;
  overflow: hidden;
}
.ui__row {
  display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr;
  align-items: center;
  padding: 1.05cqw 1.4cqw;
  border-top: 1px solid color-mix(in srgb, var(--k-grey-warm) 55%, transparent);
  font-size: 1.5cqw;
}
.ui__row:first-child { border-top: 0; }
.ui__row span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ui__row--head {
  background: color-mix(in srgb, var(--k-grey-warm) 26%, transparent);
  font-size: 1.2cqw; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--k-grey-deep);
}
.ui__row .is-best {
  color: var(--k-emerald); font-weight: 800;
  background: color-mix(in srgb, var(--k-mint) 75%, transparent);
  border-radius: .5cqw; padding: .3cqw .6cqw; margin: -.3cqw -.2cqw;
}
.ui__row .is-off { color: var(--k-grey-warm); }

/* ---- rodapé da tela ---- */
.ui__foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.6cqw;
  background: var(--k-bg-alt);
  border: 1px solid color-mix(in srgb, var(--k-emerald) 26%, transparent);
  border-radius: 1cqw;
  padding: 1.3cqw 1.6cqw;
}
.ui__ideal-lbl { display: block; font-size: 1.15cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--k-emerald); }
.ui__ideal-val { display: block; font-size: 2.6cqw; letter-spacing: -.03em; margin-top: .15cqw; }
.ui__ideal-sub { display: block; font-size: 1.25cqw; color: var(--k-grey-deep); }
.ui__btn {
  flex: none;
  background: var(--k-emerald); color: #fff;
  font-size: 1.45cqw; font-weight: 700;
  padding: .95cqw 1.7cqw; border-radius: 99px;
}

/* véu que devolve a leitura de "isto é um vídeo" */
.mock__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(10,27,63,.34), transparent 70%),
    linear-gradient(to top, rgba(10,27,63,.22), transparent 45%);
  pointer-events: none;
}

@media (max-width: 700px) {
  /* em tela estreita a grade não cabe: sobra o essencial */
  .ui { grid-template-columns: 1fr; }
  .ui__side { display: none; }
  .ui__row { grid-template-columns: 1.6fr 1fr 1fr; }
  .ui__row span:nth-child(4) { display: none; }
  .ui__main { padding: 3.4cqw; gap: 2.6cqw; }
  .ui { font-size: 3cqw; }
  .ui__title { font-size: 4cqw; }
  .ui__row { font-size: 2.7cqw; padding: 1.9cqw 2.4cqw; }
  .ui__row--head { font-size: 2.1cqw; }
  .ui__chip { font-size: 2.1cqw; }
  .ui__code { font-size: 2.1cqw; }
  .ui__ideal-val { font-size: 4.4cqw; }
  .ui__ideal-lbl, .ui__ideal-sub { font-size: 2.1cqw; }
  .ui__btn { font-size: 2.4cqw; }
}

/* ============================================================
   CONSENTIMENTO DE COOKIES (LGPD)
   Aceitar e recusar têm o mesmo peso — botão de recusa apagado
   descaracteriza o consentimento.
   ============================================================ */

.ck {
  position: fixed;
  z-index: 200;
  left: var(--k-space-3); right: var(--k-space-3); bottom: var(--k-space-3);
  /* Acompanha a largura de conteúdo do site (.wrap): as bordas do aviso
     alinham com o header e as seções, em vez de flutuar num card estreito. */
  max-width: 1200px; margin-inline: auto;
  display: flex; align-items: center; gap: var(--k-space-4);
  padding: var(--k-space-3) var(--k-space-4);
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg);
  box-shadow: 0 30px 70px -30px rgba(10,27,63,.45);
  opacity: 0; transform: translateY(18px);
  transition: opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1);
}
.ck.is-on { opacity: 1; transform: translateY(0); }
.ck__txt { flex: 1; }
.ck__txt strong { display: block; font-family: var(--k-font-display); font-size: var(--k-step-1); letter-spacing: -.02em; margin-bottom: .25rem; }
.ck__txt p { font-size: var(--k-step--1); color: var(--k-text-muted); line-height: 1.5; }
.ck__txt a { color: var(--k-emerald); text-decoration: underline; text-underline-offset: 2px; }
.ck__acoes { display: flex; gap: .5rem; flex: none; }
.ck__acoes .btn { padding: .7em 1.15em; font-size: var(--k-step--1); }
.ck__ops { list-style: none; margin: var(--k-space-2) 0 0; padding: 0; display: grid; gap: .6rem; }
.ck__ops label { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--k-step--1); color: var(--k-text-muted); line-height: 1.45; cursor: pointer; }
.ck__ops b { color: var(--k-text); font-weight: 700; }
.ck__ops input { margin-top: 3px; accent-color: var(--k-emerald); width: 17px; height: 17px; flex: none; }
.ck__ops input:disabled { opacity: .55; }

@media (max-width: 760px) {
  .ck { flex-direction: column; align-items: stretch; gap: var(--k-space-3); bottom: 82px; }
  .ck__acoes { flex-wrap: wrap; }
  .ck__acoes .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ck { transition: none; opacity: 1; transform: none; }
}

/* Recusar com o MESMO peso visual de aceitar. Botão de recusa em
   estilo mais fraco é padrão escuro e derruba a validade do
   consentimento — os dois são sólidos, mudam só a cor. */
.ck__acoes [data-ck-recusar] {
  background: color-mix(in srgb, var(--k-grey-warm) 34%, var(--k-surface));
  border-color: color-mix(in srgb, var(--k-grey-deep) 45%, transparent);
  color: var(--k-text);
}
.ck__acoes [data-ck-recusar]:hover {
  background: color-mix(in srgb, var(--k-grey-warm) 55%, var(--k-surface));
  border-color: var(--k-text);
}

/* ===== Formulário de agendamento de demonstração (/contato#formulario) ===== */
.demo-form { margin: var(--k-space-3) 0 var(--k-space-4); }
.demo-form__row { margin-bottom: var(--k-space-2); }
.demo-form label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--k-step--1);
  font-weight: 500;
  color: var(--k-text);
}
/* :not([type="submit"]) é essencial: `.demo-form input` tem especificidade maior
   que `.btn--primary`, então sem a exclusão o botão de enviar perderia o verde
   e passaria a parecer um campo de texto. */
.demo-form input:not([type="submit"]) {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--k-text);
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
}
.demo-form input:not([type="submit"]):focus-visible {
  outline: 2px solid var(--k-action);
  outline-offset: 1px;
  border-color: var(--k-action);
}
.demo-form input::placeholder { color: var(--k-text-muted); }
.demo-form input[type="submit"] { margin-top: var(--k-space-2); }
.demo-form .muted { margin-top: 0.85rem; font-size: var(--k-step--1); }