/* ═══════════════════════════════════════════════════════════════════════════
   Landing pública do Hautomatize (`core/templates/core/saas/landing.html`).

   CORES: tudo sai dos tokens do design system (`ds/tokens.css`, `--hz-*`), que
   trocam sozinhos entre claro e escuro por `html[data-theme]`. O gradiente do
   logotipo (#beff00 → #00d2ff) aparece POUCO -- botão principal, números,
   destaque do título. Espalhado por tudo ele deixa de ser destaque.

   CONTEXTO DE FAIXA: cada `.faixa` define as variáveis `--t-*` (tinta, linha,
   cartão...). Os componentes só leem `--t-*`, e por isso o mesmo cartão
   funciona numa faixa clara, numa faixa escura e nos dois temas.

   ESTRUTURA: `.faixa` pinta a largura inteira; `.limite` centraliza o
   conteúdo dentro dela.

   MOVIMENTO: só `transform` e `opacity`, nada que force layout. Tudo para
   quando a pessoa pede menos movimento, e nada fica escondido sem JavaScript
   (`html.js-anima` só existe quando o script de tema confirmou que pode
   animar).
   ═══════════════════════════════════════════════════════════════════════════ */

html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 84px; }

:root {
    --lime: #beff00;
    --ciano: #00d2ff;
    --marca: linear-gradient(101deg, var(--lime), var(--ciano));
    --marca-ink: #06202a;

    /* A mesma viagem de matiz, escurecida para valer sobre fundo claro. O lime
       da marca sobre papel dá ~1,4:1 -- some. Esta versão passa de 4,5:1. */
    --marca-tinta: linear-gradient(101deg, #3b6e00, #006f9e);

    --l-papel: var(--hz-surface);
    --l-suave: var(--hz-bg);
    --l-em: var(--marca-tinta);
    --l-olho: var(--hz-brand-text);
    --l-aurora: .3;

    --display: "Archivo Black", "Arial Black", var(--hz-font);
    --texto: var(--hz-font);

    --raio: 16px;
    --raio-g: 24px;
    --limite: 1200px;
    --borda-tela: clamp(1rem, 4vw, 3rem);
    --topo-altura: 68px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

html[data-theme="dark"] {
    --l-papel: var(--hz-bg);
    --l-suave: var(--hz-surface);
    --l-em: var(--marca);
    --l-olho: #7fe3b0;
    --l-aurora: .26;
}

/* ── Contextos de faixa ──────────────────────────────────────────────────── */
body.landing,
.faixa--papel,
.faixa--suave,
.topo,
.segmentos-visiveis,
.contato-dialog {
    --t-bg: var(--l-papel);
    --t-ink: var(--hz-ink);
    --t-ink-2: var(--hz-ink-2);
    --t-muted: var(--hz-muted);
    --t-line: var(--hz-line);
    --t-line-2: var(--hz-line-strong);
    --t-card: var(--hz-surface);
    --t-card-2: var(--hz-surface-2);
    --t-campo: var(--hz-surface);
    --t-em: var(--l-em);
    --t-olho: var(--l-olho);
    --t-realce: var(--hz-brand);
    --t-sombra: var(--hz-shadow);
}
.faixa--suave { --t-bg: var(--l-suave); }
html[data-theme="dark"] .faixa--suave { --t-card: var(--hz-surface-2); --t-card-2: var(--hz-surface-3); }

/* A faixa escura é escura nos DOIS temas: é o contraste que marca as partes
   de decisão (Nexo, montador, contratação, rodapé). */
.faixa--breu {
    --t-bg: #070c11;
    --t-ink: #f2f7fa;
    --t-ink-2: #aebfcc;
    --t-muted: #8397a7;
    --t-line: #1f2c37;
    --t-line-2: #2b3b48;
    --t-card: #0f171f;
    --t-card-2: #14202a;
    --t-campo: #0a1219;
    --t-em: var(--marca);
    --t-olho: var(--ciano);
    --t-realce: var(--ciano);
    --t-sombra: 0 24px 48px -24px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] .faixa--breu { --t-bg: #060a0d; }

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

body.landing {
    margin: 0;
    background: var(--l-papel);
    color: var(--t-ink);
    font-family: var(--texto);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
body.menu-aberto { overflow: hidden; }

/* `:where()` zera a especificidade: a base não pode vencer o componente
   (um `.landing p { margin: 0 }` apagaria o `margin-top` de `.secao-sub`). */
:where(.landing) h1, :where(.landing) h2, :where(.landing) h3 {
    font-family: var(--display); font-weight: 400; letter-spacing: -.02em;
    line-height: 1.06; margin: 0; text-wrap: balance; color: var(--t-ink);
}
:where(.landing) p { margin: 0; }
:where(.landing) img { max-width: 100%; height: auto; display: block; }
:where(.landing) a { color: inherit; text-decoration: none; }
:where(.landing) a:hover { color: inherit; }
.landing [hidden] { display: none !important; }

.landing em {
    font-style: normal;
    background-image: var(--t-em);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.landing :focus-visible { outline: 3px solid var(--ciano); outline-offset: 3px; border-radius: 6px; }

.pular {
    position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--hz-ink); color: var(--hz-surface); padding: .8rem 1.2rem; border-radius: 0 0 12px 0;
    font-weight: 700;
}
.pular:focus { left: 0; }

/* ── Estrutura ───────────────────────────────────────────────────────────── */
.faixa {
    position: relative;
    padding: clamp(4rem, 9vw, 7rem) var(--borda-tela);
    background: var(--t-bg); color: var(--t-ink);
}
.limite { max-width: var(--limite); margin-inline: auto; position: relative; }

/* ── Montagem por rolagem ────────────────────────────────────────────────── */
/* Um observador liga `.revelado` UMA vez. O atraso escalonado é o que dá a
   sensação de montagem em vez de tudo piscar junto. */
.js-anima [data-revelar] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--atraso, 0) * 80ms);
}
.js-anima [data-revelar].revelado { opacity: 1; transform: none; }
.sem-js [data-revelar] { opacity: 1 !important; transform: none !important; }

/* ── Botões ──────────────────────────────────────────────────────────────── */
.landing .btn {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .72rem 1.3rem; border: 0; border-radius: 999px;
    font-family: var(--texto); font-size: .95rem; font-weight: 700; line-height: 1.2;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s ease, color .2s ease;
}
.landing .btn:hover { transform: translateY(-2px); }
.landing .btn:active { transform: translateY(0); }

.landing .btn--marca { background: var(--marca); color: var(--marca-ink); box-shadow: 0 8px 22px -10px #00b4d8aa; }
.landing .btn--marca:hover { color: var(--marca-ink); box-shadow: 0 14px 30px -10px #00b4d8cc; }
/* O brilho que atravessa o botão no hover: pequeno, rápido, só uma vez. */
.landing .btn--marca::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(110deg, transparent 30%, #ffffff8c 50%, transparent 70%);
    transform: translateX(-120%);
}
.landing .btn--marca:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }

.landing .btn--linha { background: transparent; color: var(--t-ink); box-shadow: inset 0 0 0 1.5px var(--t-line-2); }
.landing .btn--linha:hover { color: var(--t-ink); box-shadow: inset 0 0 0 1.5px var(--t-ink); background: color-mix(in srgb, var(--t-ink) 4%, transparent); }

.landing .btn--fantasma { background: #ffffff14; color: #f2f7fa; box-shadow: inset 0 0 0 1px #ffffff38; }
.landing .btn--fantasma:hover { background: #ffffff24; color: #fff; }

.landing .btn--entrar { background: var(--hz-ink); color: var(--hz-surface); padding: .6rem 1.05rem; }
.landing .btn--entrar:hover { color: var(--hz-surface); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--hz-ink) 70%, transparent); }
.landing .btn--entrar i { font-size: 1.05rem; }

.landing .btn--g { padding: .95rem 1.6rem; font-size: 1.02rem; }
.landing .btn--bloco { width: 100%; }

.olho {
    display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--t-olho); margin-bottom: .9rem;
}
.olho--pilula {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .38rem .8rem .38rem .6rem; border-radius: 999px; letter-spacing: .08em;
    background: color-mix(in srgb, var(--t-card) 80%, transparent);
    border: 1px solid var(--t-line); box-shadow: var(--hz-shadow-sm);
}
.olho--pilula::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%; background: #25d366;
    box-shadow: 0 0 0 0 #25d36680; animation: pulso 2.4s infinite;
}
@keyframes pulso { 0% { box-shadow: 0 0 0 0 #25d36670; } 70% { box-shadow: 0 0 0 9px #25d36600; } 100% { box-shadow: 0 0 0 0 #25d36600; } }

/* ── Avisos do topo ──────────────────────────────────────────────────────── */
.landing-preview-banner, .landing-announcement {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .6rem;
    padding: .55rem 1rem; background: #0d1f18; color: #f2f7fa; font-size: .85rem; font-weight: 700; text-align: center;
}
.landing-preview-banner { position: sticky; top: 0; z-index: 120; background: #2563eb; }
.landing-announcement button {
    border: 0; border-bottom: 1px solid currentColor; background: transparent;
    color: var(--lime); font: inherit; cursor: pointer; padding: 0;
}

/* ── Topo fixo ───────────────────────────────────────────────────────────── */
.topo {
    position: sticky; top: 0; z-index: 90;
    padding-inline: var(--borda-tela);
    background: color-mix(in srgb, var(--l-papel) 78%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.topo.is-rolado, .topo.is-menu-aberto {
    background: color-mix(in srgb, var(--l-papel) 92%, transparent);
    border-bottom-color: var(--t-line);
    box-shadow: 0 10px 30px -18px rgba(9, 20, 15, .35);
}
.topo-interno { display: flex; align-items: center; gap: 1rem; min-height: var(--topo-altura); }

.marca { display: inline-flex; align-items: center; gap: .55rem; flex: none; }
.marca img { width: 34px; height: 34px; transition: transform .5s var(--ease); }
.marca:hover img { transform: rotate(-8deg) scale(1.06); }
.marca span { font-family: var(--display); font-size: 1.3rem; letter-spacing: -.035em; color: var(--t-ink); }

.topo-nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.topo-nav > a, .topo-nav-botao {
    position: relative; padding: .5rem .72rem; border-radius: 999px; border: 0; background: transparent;
    color: var(--t-ink-2); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}
.topo-nav > a:hover, .topo-nav-botao:hover { color: var(--t-ink); background: color-mix(in srgb, var(--t-ink) 6%, transparent); }
.topo-nav > a.is-atual { color: var(--t-ink); }
.topo-nav > a.is-atual::after {
    content: ''; position: absolute; left: .72rem; right: .72rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--marca);
}
.topo-nav-cta { display: none !important; }

.topo-acoes { display: flex; align-items: center; gap: .5rem; flex: none; }
.topo-icone {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
    border: 1px solid var(--t-line); background: color-mix(in srgb, var(--t-card) 70%, transparent);
    color: var(--t-ink); cursor: pointer; font-size: 1.05rem; padding: 0;
    transition: border-color .2s ease, transform .2s var(--ease);
}
.topo-icone:hover { border-color: var(--t-line-2); transform: rotate(-12deg); }
.topo-tema .bi-sun { display: none; }
html[data-theme="dark"] .topo-tema .bi-sun { display: block; }
html[data-theme="dark"] .topo-tema .bi-moon-stars { display: none; }

.topo-menu { display: none; gap: 4px; align-content: center; justify-items: center; }
.topo-menu:hover { transform: none; }
.topo-menu span { width: 17px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s var(--ease), opacity .2s ease; }
.topo.is-menu-aberto .topo-menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topo.is-menu-aberto .topo-menu span:nth-child(2) { opacity: 0; }
.topo.is-menu-aberto .topo-menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.topo-progresso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.topo-progresso span {
    display: block; height: 100%; background: var(--marca);
    transform: scaleX(var(--progresso, 0)); transform-origin: 0 50%;
}

/* ── Diálogo de contato ──────────────────────────────────────────────────── */
.contato-dialog {
    border: 0; border-radius: 20px; padding: 0; background: transparent; color: var(--t-ink);
    max-width: 500px; width: calc(100% - 32px); max-height: calc(100vh - 28px); overflow: auto;
}
.contato-dialog[open] { animation: dialogo-entra .35s var(--ease); }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.contato-dialog::backdrop { background: var(--hz-overlay); backdrop-filter: blur(4px); }
.contato-dialog__box {
    position: relative; display: grid; gap: .7rem; padding: 1.75rem;
    background: var(--t-card); border: 1px solid var(--t-line); border-radius: 20px; box-shadow: var(--hz-shadow-lg);
}
.contato-dialog__box .olho { margin-bottom: 0; }
.contato-dialog__box h2 { font-size: 1.5rem; }
.contato-dialog__box p { color: var(--t-ink-2); font-size: .9rem; line-height: 1.45; }
.contato-dialog__box input:not([type="checkbox"]), .contato-dialog__box select, .contato-dialog__box textarea {
    width: 100%; border: 1px solid var(--t-line-2); border-radius: 12px;
    background: var(--hz-surface-2); color: var(--t-ink); padding: .72rem .85rem; font: inherit; font-size: .95rem;
}
.contato-dialog__box input:focus, .contato-dialog__box select:focus, .contato-dialog__box textarea:focus { outline: 0; border-color: var(--hz-brand); box-shadow: var(--hz-focus); }
.contato-dialog__close {
    position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border-radius: 50%;
    border: 0; background: transparent; color: var(--t-muted); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.contato-dialog__close:hover { background: color-mix(in srgb, var(--t-ink) 8%, transparent); color: var(--t-ink); }
.contato-dialog__consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem; color: var(--t-ink-2); }
.contato-dialog__consent input { margin-top: .2rem; accent-color: var(--hz-brand); }
.contato-dialog__retorno { min-height: 1.2em; color: var(--hz-ok) !important; font-weight: 600; }

/* ── Segmentos ───────────────────────────────────────────────────────────── */
.segmentos-visiveis {
    position: relative; z-index: 5; padding: .7rem var(--borda-tela);
    background: var(--l-papel); border-bottom: 1px solid var(--t-line);
}
.segmentos-visiveis__inner { display: flex; align-items: center; gap: 1.25rem; }
.segmentos-visiveis__heading { flex: none; }
.segmentos-visiveis__heading .olho { margin: 0; font-size: .7rem; }
.segmentos-visiveis__heading p { color: var(--t-muted); font-size: .78rem; line-height: 1.3; }
.segmentos-visiveis__grid {
    display: flex; gap: .45rem; flex: 1; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; padding: .15rem;
}
.segmentos-visiveis__grid::-webkit-scrollbar { display: none; }
.segmento-card {
    appearance: none; flex: none; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem .85rem .4rem .45rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--t-line); background: var(--t-card); color: var(--t-ink-2);
    font: inherit; font-size: .86rem; font-weight: 700; white-space: nowrap;
    transition: border-color .2s ease, color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.segmento-card:hover { color: var(--t-ink); transform: translateY(-1px); border-color: var(--segmento-cor); }
.segmento-card.is-atual {
    color: var(--t-ink); border-color: var(--segmento-cor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--segmento-cor) 22%, transparent);
}
.segmento-card__icone {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem;
    background: color-mix(in srgb, var(--segmento-cor) 18%, transparent); color: var(--segmento-cor-ink);
}
.segmento-card.is-atual .segmento-card__icone { background: var(--segmento-cor); color: #0b1a12; }
.segmento-card { --segmento-cor: #34c759; --segmento-cor-ink: #1c7a36; }
.segmento-card--varejo { --segmento-cor: #f05252; --segmento-cor-ink: #c02b2b; }
.segmento-card--processos { --segmento-cor: #f0a437; --segmento-cor-ink: #a86300; }
.segmento-card--crm { --segmento-cor: #a675ff; --segmento-cor-ink: #6b3fd1; }
html[data-theme="dark"] .segmento-card { --segmento-cor-ink: var(--segmento-cor); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { overflow: hidden; padding-top: clamp(2.5rem, 6vw, 4.75rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
/* Grade de pontos que some nas bordas: dá textura sem competir com o texto. */
.hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--t-ink) 14%, transparent) 1px, transparent 1.2px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 70% 35%, #000 10%, transparent 75%);
}
.hero-aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-aurora span {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--l-aurora);
    will-change: transform; animation: deriva 22s ease-in-out infinite alternate;
}
.hero-aurora span:nth-child(1) { width: 520px; height: 520px; left: -140px; top: -180px; background: var(--lime); }
.hero-aurora span:nth-child(2) { width: 560px; height: 560px; right: -180px; top: 10%; background: var(--ciano); animation-duration: 26s; animation-delay: -6s; }
.hero-aurora span:nth-child(3) { width: 420px; height: 420px; left: 35%; bottom: -260px; background: #34d27b; animation-duration: 30s; animation-delay: -12s; }
@keyframes deriva {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(40px, 30px, 0) scale(1.08); }
    100% { transform: translate3d(-30px, 50px, 0) scale(.95); }
}

.hero-interno {
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); }
.hero h1 em { display: block; }
.hero .chamada { margin: 1.4rem 0 2rem; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--t-ink-2); max-width: 36em; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-nota { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin-top: 1.6rem; font-size: .88rem; color: var(--t-ink-2); }
.hero-nota span { display: inline-flex; align-items: center; gap: .35rem; }
.hero-nota i { color: var(--hz-brand); }

/* ── Demonstração ────────────────────────────────────────────────────────── */
.demo { position: relative; display: grid; gap: .9rem; }

/* A chave de plano: dois botões grandes, não uma abinha discreta -- é aqui
   que a página faz o argumento comercial. */
.niveis {
    display: grid; grid-template-columns: 1fr 1fr; gap: .35rem;
    padding: .35rem; border-radius: 20px;
    background: color-mix(in srgb, var(--t-card) 85%, transparent);
    border: 1px solid var(--t-line); box-shadow: var(--hz-shadow-sm);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nivel {
    position: relative; overflow: hidden;
    display: grid; gap: .1rem; text-align: left; cursor: pointer;
    padding: .65rem .85rem; border-radius: 15px;
    background: transparent; border: 1px solid transparent; color: var(--t-muted);
    font-family: var(--texto);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.nivel strong { font-size: .93rem; font-weight: 800; color: var(--t-ink); }
.nivel small { font-size: .75rem; line-height: 1.35; }
.nivel:hover { border-color: var(--t-line-2); }
.nivel.is-atual { background: var(--marca); color: #16323b; }
.nivel.is-atual strong { color: var(--marca-ink); }
/* Risco que atravessa o botão enquanto a demo toca: sem ele a troca
   automática pega a pessoa de surpresa. */
.nivel.is-atual::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    background: #06202a55; transform-origin: 0 50%;
    animation: aba-progresso 20s linear forwards;
}
@keyframes aba-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* O celular: uma conversa de WhatsApp de verdade, com altura fixa -- a
   mensagem nova empurra as antigas em vez de esticar a página. */
.telefone {
    position: relative; padding: 10px; border-radius: 34px;
    background: linear-gradient(160deg, #1b2a24, #0b1411);
    box-shadow: 0 40px 80px -30px rgba(9, 20, 15, .55), 0 0 0 1px #ffffff14 inset;
    animation: flutua 7s ease-in-out infinite;
}
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.demo-conversa {
    --zap-fundo: #efeae2; --zap-deles: #ffffff; --zap-nossos: #d9fdd3; --zap-tinta: #111b21;
    --zap-sub: #667781; --zap-topo: #008069; --zap-nota: #fff5c4;
    display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden;
    border-radius: 26px; background: var(--zap-fundo); color: var(--zap-tinta);
    height: clamp(340px, 44vh, 430px);
}
html[data-theme="dark"] .demo-conversa {
    --zap-fundo: #0b141a; --zap-deles: #202c33; --zap-nossos: #005c4b; --zap-tinta: #e9edef;
    --zap-sub: #8696a0; --zap-topo: #1f2c34; --zap-nota: #3a3320;
}
.conversa-topo {
    display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem;
    background: var(--zap-topo); color: #fff;
}
.conversa-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; flex: none; }
.conversa-quem { display: grid; line-height: 1.2; min-width: 0; }
.conversa-quem strong { font-size: .92rem; font-weight: 700; }
.conversa-quem small { font-size: .72rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-repetir {
    margin-left: auto; width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: grid; place-items: center; cursor: pointer;
    background: #ffffff1f; border: 0; color: #fff; transition: transform .4s var(--ease), background .2s ease;
}
.demo-repetir:hover { background: #ffffff33; transform: rotate(180deg); }
.demo-aviso {
    margin: .6rem auto 0; padding: .3rem .7rem; border-radius: 8px; max-width: 88%;
    background: var(--zap-nota); color: var(--zap-tinta); font-size: .72rem; text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.demo-aviso:empty { display: none; }
.conversa-corpo {
    display: flex; flex-direction: column; gap: .4rem; padding: .75rem .85rem;
    overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-width: none;
    background-image: radial-gradient(color-mix(in srgb, var(--zap-sub) 16%, transparent) 1px, transparent 1.2px);
    background-size: 18px 18px;
}
.conversa-corpo::-webkit-scrollbar { display: none; }
.conversa-corpo > :first-child { margin-top: auto; }
.balao {
    position: relative; max-width: 84%; padding: .45rem .65rem .5rem; border-radius: 10px;
    font-size: .86rem; line-height: 1.4; box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    animation: balao-entra .35s var(--ease) both;
}
.balao--deles { align-self: flex-start; background: var(--zap-deles); border-top-left-radius: 3px; }
.balao--nossos { align-self: flex-end; background: var(--zap-nossos); border-top-right-radius: 3px; padding-right: 2.2rem; }
.balao--nossos::after {
    content: '\F26F'; font-family: 'bootstrap-icons'; position: absolute; right: .45rem; bottom: .3rem;
    font-size: .8rem; color: #53bdeb;
}
.balao--interno {
    align-self: center; max-width: 92%; background: var(--zap-nota); font-size: .78rem;
    border: 1px dashed color-mix(in srgb, var(--zap-tinta) 25%, transparent); box-shadow: none; text-align: center;
}
.balao strong { font-weight: 700; }
@keyframes balao-entra { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.digitando {
    align-self: flex-start; display: inline-flex; gap: 4px; padding: .6rem .75rem;
    background: var(--zap-deles); border-radius: 10px; border-top-left-radius: 3px;
}
.digitando span { width: 6px; height: 6px; border-radius: 50%; background: var(--zap-sub); animation: pulo 1.1s infinite; }
.digitando span:nth-child(2) { animation-delay: .16s; }
.digitando span:nth-child(3) { animation-delay: .32s; }
@keyframes pulo { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.conversa-rodape { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem .6rem; }
.conversa-campo {
    flex: 1; display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: 999px;
    background: var(--zap-deles); color: var(--zap-sub); font-size: .82rem;
}
.conversa-mic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #00a884; color: #fff; }

.demo-selo {
    position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 800;
    background: var(--t-card); color: var(--t-ink); border: 1px solid var(--t-line);
    box-shadow: var(--hz-shadow); animation: flutua 6s ease-in-out infinite;
}
.demo-selo--a { left: -22px; top: 22%; animation-delay: -2s; }
.demo-selo--a i { color: #25d366; }
.demo-selo--b { right: -18px; bottom: 16%; animation-delay: -4s; }
.demo-selo--b i { color: #00a6d6; }

/* Esteira: acende conforme o pedido avança pelos módulos. */
.esteira {
    list-style: none; margin: 0; padding: .55rem;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .35rem;
    background: color-mix(in srgb, var(--t-card) 85%, transparent); border: 1px solid var(--t-line); border-radius: 18px;
}
.esteira-no {
    display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: .45rem;
    padding: .4rem .5rem; border-radius: 12px; border: 1px solid transparent;
    opacity: .45; transition: opacity .35s ease, background .35s ease, border-color .35s ease;
}
.esteira-icone {
    width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--t-ink) 7%, transparent); color: var(--t-ink-2); font-size: .82rem;
    transition: background .35s ease, color .35s ease;
}
.esteira-rotulo { font-size: .74rem; font-weight: 700; color: var(--t-ink); line-height: 1.25; }
.esteira-ok { color: var(--hz-ok); font-size: .82rem; opacity: 0; transition: opacity .3s ease; }
.esteira-no.is-ativo { opacity: 1; background: color-mix(in srgb, var(--t-ink) 4%, transparent); border-color: var(--t-line-2); }
.esteira-no.is-ativo .esteira-icone { background: var(--marca); color: var(--marca-ink); }
.esteira-no.is-feito { opacity: 1; }
.esteira-no.is-feito .esteira-ok { opacity: 1; }

/* ── Números ─────────────────────────────────────────────────────────────── */
.numeros-faixa { padding-block: clamp(2.25rem, 5vw, 3.25rem); border-block: 1px solid var(--t-line); }
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.numero { padding-left: 1.1rem; border-left: 2px solid var(--t-line); }
.numero strong {
    display: block; font-family: var(--display); font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1;
    font-variant-numeric: tabular-nums; font-weight: 400;
    background-image: var(--t-em); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.numero span { display: block; margin-top: .5rem; color: var(--t-ink-2); font-size: .9rem; max-width: 28ch; }

/* ── Cabeças de seção ────────────────────────────────────────────────────── */
.secao-cabeca { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); max-width: 50rem; }
.secao-cabeca h2 { font-size: clamp(1.9rem, 4vw, 3.05rem); }
.secao-sub { margin-top: 1.1rem; color: var(--t-ink-2); max-width: 62ch; font-size: 1.05rem; }
.secao-cabeca--centro { text-align: center; margin-inline: auto; }
.secao-cabeca--centro .secao-sub { margin-inline: auto; }
.secao-cabeca--linha { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; justify-content: space-between; max-width: none; }

.lista-check { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .8rem; }
.lista-check li { position: relative; padding-left: 2rem; color: var(--t-ink-2); }
.lista-check li::before {
    content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: .05em;
    width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
    font-size: .95rem; background: color-mix(in srgb, var(--hz-brand) 14%, transparent); color: var(--hz-brand);
}
.faixa--breu .lista-check li::before { background: #beff001f; color: var(--lime); }

/* ── O que muda entre os planos ──────────────────────────────────────────── */
.comparar { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; align-items: stretch; }
.comparar-cartao {
    display: flex; flex-direction: column; padding: 1.6rem; border-radius: var(--raio-g);
    background: var(--t-card); border: 1px solid var(--t-line);
    transition: box-shadow .3s ease, border-color .3s ease, transform .3s var(--ease);
}
.comparar-cartao--destaque {
    background: linear-gradient(var(--t-card), var(--t-card)) padding-box, var(--marca) border-box;
    border: 2px solid transparent;
}
.comparar-cartao.is-atual { box-shadow: 0 22px 50px -26px #00a6d680; transform: translateY(-3px); }
.comparar-cartao h3 { font-size: 1.35rem; }
.comparar-cartao header p { margin-top: .4rem; color: var(--t-ink-2); font-size: .93rem; }
.comparar-lista { list-style: none; margin: 1.2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--t-line); display: grid; gap: .6rem; }
.comparar-lista li { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; color: var(--t-ink-2); }
.comparar-lista i { color: var(--hz-ok); margin-top: .18em; flex: none; }
.comparar-lista--falta { border-top: 0; padding-top: .2rem; }
.comparar-lista--falta i { color: var(--hz-danger); }
.comparar-lista--falta li { color: var(--t-muted); }
.comparar-ver {
    margin-top: auto; align-self: flex-start; transform: translateY(1rem); margin-bottom: 1rem;
    padding: .55rem 1rem; border-radius: 999px; cursor: pointer;
    background: transparent; border: 1px solid var(--t-line-2); color: var(--t-ink);
    font: inherit; font-size: .85rem; font-weight: 700;
}
.comparar-ver:hover { border-color: var(--t-ink); }

.telas-bloco { margin-top: 2rem; }
.telas-rotulo { display: block; margin-bottom: .7rem; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
.telas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; }
.telas:empty { display: none; }
.tela {
    position: relative; display: grid; grid-template-columns: 36px 1fr; gap: .65rem; align-items: center;
    padding: .7rem .8rem; border-radius: 14px; background: var(--t-card-2); border: 1px solid var(--t-line);
    animation: balao-entra .45s var(--ease) both;
}
.tela--ia { border-color: color-mix(in srgb, var(--ciano) 45%, var(--t-line)); }
.tela-icone { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--t-ink) 7%, transparent); color: var(--t-ink); }
.tela--ia .tela-icone { background: var(--marca); color: var(--marca-ink); }
.tela strong { display: block; font-size: .86rem; font-weight: 700; color: var(--t-ink); }
.tela small { display: block; font-size: .76rem; color: var(--t-ink-2); line-height: 1.35; }
.tela-selo { position: absolute; top: .45rem; right: .55rem; font-size: .62rem; font-weight: 800; padding: .08rem .4rem; border-radius: 999px; background: var(--marca); color: var(--marca-ink); }

/* ── Produtos ────────────────────────────────────────────────────────────── */
.produtos-atalhos { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: -1rem auto 3.5rem; max-width: 60rem; }
.produtos-atalhos a {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 999px;
    background: var(--t-card-2); border: 1px solid var(--t-line); color: var(--t-ink-2);
    font-size: .88rem; font-weight: 700; transition: border-color .2s ease, color .2s ease, transform .2s var(--ease);
}
.produtos-atalhos a:hover { color: var(--t-ink); border-color: var(--hz-brand); transform: translateY(-2px); }
.produtos-atalhos i { color: var(--hz-brand); }

.produtos-lista { display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }
.produto {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4.5rem); align-items: center; scroll-margin-top: 100px;
}
.produto--inverso .produto-texto { order: 2; }
.produto-olho { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-olho); }
.produto-icone {
    width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem;
    background: var(--marca); color: var(--marca-ink); box-shadow: 0 10px 24px -12px #00b4d8aa;
}
.produto h3 { font-size: clamp(1.55rem, 2.8vw, 2.2rem); margin-top: 1rem; }
.produto p { margin-top: 1rem; color: var(--t-ink-2); font-size: 1.02rem; max-width: 36rem; }
.produto-arte { position: relative; }
.produto-arte::before {
    content: ''; position: absolute; inset: 8% -4% -6% 8%; border-radius: 40px; z-index: 0;
    background: var(--marca); opacity: .18; filter: blur(40px);
}
.produto--inverso .produto-arte::before { inset: 8% 8% -6% -4%; }
.produto-arte .janela { position: relative; z-index: 1; transition: transform .5s var(--ease); }
.produto:hover .produto-arte .janela { transform: translateY(-4px) rotate(-.4deg); }
.janela--produto .janela-corpo { min-height: 17rem; }

/* ── A cadeia ────────────────────────────────────────────────────────────── */
.cadeia { list-style: none; margin: 0; padding: 0; position: relative; }
.cadeia::before {
    content: ''; position: absolute; left: 27px; top: 1.8rem; bottom: 1.8rem; width: 2px;
    background: linear-gradient(var(--lime), var(--ciano)); opacity: .5;
}
.cadeia-item {
    position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.5rem; align-items: start;
    padding: 1.4rem 0;
}
.cadeia-num {
    position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--display); font-size: 1.35rem; color: var(--marca-ink);
    background: var(--marca); box-shadow: 0 0 0 6px var(--t-bg);
}
.cadeia-corpo { padding: 1.2rem 1.4rem; border-radius: var(--raio); background: var(--t-card); border: 1px solid var(--t-line); transition: border-color .25s ease, transform .25s var(--ease); }
.cadeia-item:hover .cadeia-corpo { border-color: var(--t-line-2); transform: translateX(4px); }
.cadeia-modulo { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-olho); margin-bottom: .35rem; }
.cadeia-corpo h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); margin-bottom: .45rem; }
.cadeia-corpo p { color: var(--t-ink-2); max-width: 64ch; }

/* ── Como começar ────────────────────────────────────────────────────────── */
.passos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; counter-reset: passo; position: relative; }
.passo {
    position: relative; padding: 1.75rem 1.5rem 1.6rem; border-radius: var(--raio-g);
    background: var(--t-card-2); border: 1px solid var(--t-line);
    transition: transform .3s var(--ease), box-shadow .3s ease;
}
.passo:hover { transform: translateY(-4px); box-shadow: var(--hz-shadow); }
.passo-num {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 1.1rem;
    font-family: var(--display); font-size: 1.2rem; background: var(--marca); color: var(--marca-ink);
}
.passo h3 { font-size: 1.2rem; }
.passo p { margin-top: .5rem; color: var(--t-ink-2); font-size: .96rem; }

/* ── Nexo ────────────────────────────────────────────────────────────────── */
.nexo-faixa { overflow: hidden; }
.nexo-faixa::before {
    content: ''; position: absolute; width: 720px; height: 720px; right: -240px; top: -260px; border-radius: 50%;
    background: radial-gradient(circle, #00d2ff30, transparent 65%); pointer-events: none;
}
.hermes { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hermes h2 { font-size: clamp(1.9rem, 4vw, 3.05rem); }
.tester {
    position: relative; background: var(--t-card); border: 1px solid var(--t-line); border-radius: var(--raio-g); padding: 1.5rem;
    box-shadow: var(--t-sombra);
}
.tester-rotulo { display: flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t-olho); margin-bottom: .9rem; }
.tester-campo { background: var(--t-campo); border: 1px solid var(--t-line-2); border-radius: 12px; padding: .8rem 1rem; font-size: .95rem; display: flex; align-items: center; gap: .6rem; color: var(--t-ink); }
.tester-campo i { color: var(--t-muted); }
.tester-seta { text-align: center; color: var(--t-muted); padding: .5rem 0; }
.tester-seta i { display: inline-block; animation: desce 1.8s ease-in-out infinite; }
@keyframes desce { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.tester-saida { background: var(--t-card-2); border-left: 3px solid var(--lime); border-radius: 10px; padding: .9rem 1rem; }
.tester-saida strong { display: inline-block; margin-right: .5rem; color: var(--t-ink); }
.tester-tag { font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; background: #beff001f; color: var(--lime); font-weight: 700; }
.tester-saida p { margin-top: .4rem; font-size: .87rem; color: var(--t-ink-2); }
.tester-nota { margin-top: .9rem; font-size: .82rem; color: var(--t-muted); }

/* ── Telas por dentro (vitrine) ──────────────────────────────────────────── */
.vitrine { display: grid; grid-template-columns: minmax(0, .3fr) minmax(0, .7fr); gap: 1.2rem; align-items: start; }
.vitrine-lista { display: grid; gap: .35rem; max-height: 30rem; overflow-y: auto; }
.vitrine-op {
    position: relative; display: grid; gap: .1rem; text-align: left; cursor: pointer;
    padding: .7rem .9rem; border-radius: 14px; border: 1px solid var(--t-line);
    background: var(--t-card); color: var(--t-ink); font-family: var(--texto);
    transition: border-color .2s ease, background .2s ease;
}
.vitrine-op:hover { border-color: var(--t-line-2); }
.vitrine-op.is-atual { border-color: transparent; background: var(--marca); }
.vitrine-op strong { font-size: .92rem; font-weight: 700; }
.vitrine-op small { font-size: .76rem; color: var(--t-ink-2); }
.vitrine-op.is-atual strong, .vitrine-op.is-atual small { color: var(--marca-ink); }
.vitrine-ia { position: absolute; top: .55rem; right: .6rem; font-size: .62rem; font-weight: 800; padding: .05rem .4rem; border-radius: 999px; background: var(--marca); color: var(--marca-ink); }
.vitrine-op.is-atual .vitrine-ia { background: var(--marca-ink); color: var(--lime); }
.vitrine-texto { margin-top: .9rem; color: var(--t-ink-2); font-size: .95rem; }

/* A janela é sempre ESCURA, como o sistema aberto no modo escuro: os
   desenhos (`mk-*`) usam a mesma paleta em qualquer tema da página. */
.janela {
    --m-ink: #eef4f7; --m-ink-2: #9fb3c1; --m-linha: #243240; --m-fundo: #0c141b; --m-card: #111c25;
    --m-soft: #ffffff0b; --m-soft-2: #ffffff14;
    background: var(--m-fundo); border: 1px solid #22303c; border-radius: 18px; overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55); color: var(--m-ink);
}
.janela-topo { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-bottom: 1px solid var(--m-linha); background: #0f1922; }
.janela-bolas { display: inline-flex; gap: .3rem; }
.janela-bolas i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.janela-bolas i:nth-child(2) { background: #febc2e; }
.janela-bolas i:nth-child(3) { background: #28c840; }
.janela-titulo { font-size: .8rem; font-weight: 700; color: var(--m-ink-2); }
.janela-selo { margin-left: auto; font-size: .64rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px; background: var(--marca); color: var(--marca-ink); }
.janela-corpo { padding: 1rem; min-height: 22rem; color: var(--m-ink); }

/* ── Peças dos desenhos ──────────────────────────────────────────────────── */
.mk { display: grid; gap: .7rem; font-size: .78rem; }
.mk--split { grid-template-columns: minmax(0, .34fr) minmax(0, .66fr); align-items: start; }
.mk-nota { color: var(--m-ink-2); font-size: .72rem; font-style: italic; }
.mk-filtros { display: flex; flex-wrap: wrap; gap: .35rem; }
.mk-filtro { padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--m-linha); color: var(--m-ink-2); font-size: .7rem; }
.mk-filtro.is-ativo { background: var(--marca); color: var(--marca-ink); border-color: transparent; font-weight: 700; }
.mk-lateral, .mk-carrinho { display: grid; gap: .3rem; align-content: start; padding-right: .7rem; border-right: 1px solid var(--m-linha); }
.mk-lateral-titulo { font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--m-ink-2); margin-top: .4rem; }
.mk-canal { padding: .3rem .5rem; border-radius: 8px; color: var(--m-ink-2); font-size: .74rem; }
.mk-canal.is-ativo { background: var(--m-soft-2); color: var(--m-ink); font-weight: 700; }
.mk-canal--zap { color: #25d366; }
.mk-conversa { display: grid; gap: .35rem; align-content: start; }
.mk-aba-linha { display: flex; gap: .3rem; margin-bottom: .3rem; }
.mk-aba { padding: .22rem .6rem; font-size: .7rem; color: var(--m-ink-2); border-bottom: 2px solid transparent; }
.mk-aba.is-ativo { color: var(--m-ink); border-bottom-color: var(--ciano); font-weight: 700; }
.mk-msg { padding: .4rem .6rem; border-radius: 10px; background: var(--m-soft-2); color: var(--m-ink); justify-self: start; max-width: 90%; }
.mk-msg--eu { background: #00d2ff26; justify-self: end; }
.mk-kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.mk-coluna { display: grid; gap: .35rem; align-content: start; padding: .5rem; border-radius: 12px; background: var(--m-soft); }
.mk-coluna-topo { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; font-weight: 700; color: var(--m-ink-2); }
.mk-badge { padding: 0 .35rem; border-radius: 999px; background: var(--m-soft-2); font-size: .65rem; }
.mk-card { display: grid; gap: .2rem; padding: .45rem .55rem; border-radius: 9px; background: var(--m-card); border-left: 2px solid var(--m-linha); }
.mk-card.is-alto { border-left-color: var(--lime); }
.mk-card-titulo { font-size: .72rem; font-weight: 600; }
.mk-card-pe { font-size: .64rem; color: var(--m-ink-2); }
.mk--fluxo { justify-items: center; }
.mk-fluxo-linha { display: flex; align-items: center; gap: .4rem; }
.mk-no { display: inline-block; padding: .35rem .7rem; border-radius: 9px; font-size: .72rem; font-weight: 600; border: 1px solid var(--m-linha); background: var(--m-card); }
.mk-no--inicio { background: var(--marca); color: var(--marca-ink); border-color: transparent; }
.mk-no--condicao { border-color: var(--ciano); color: var(--ciano); border-radius: 999px; }
.mk-no--acao { color: var(--m-ink); }
.mk-no--fim { background: #beff001f; border-color: #beff004d; color: var(--lime); }
.mk-no--humano { border-style: dashed; color: var(--m-ink-2); }
.mk-seta { color: var(--m-ink-2); font-size: .9rem; }
.mk-fluxo-ramos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; }
.mk-fluxo-ramo { display: grid; gap: .3rem; justify-items: center; padding-top: .5rem; border-top: 1px solid var(--m-linha); }
.mk-ramo-rotulo { font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--m-ink-2); }
.mk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; }
.mk-kpi { display: grid; gap: .1rem; padding: .55rem .6rem; border-radius: 11px; background: var(--m-soft); border: 1px solid var(--m-linha); }
.mk-kpi-rotulo { font-size: .64rem; color: var(--m-ink-2); text-transform: uppercase; letter-spacing: .08em; }
.mk-kpi-valor { font-size: 1.05rem; font-family: var(--display); font-weight: 400; }
.mk-kpi-delta { font-size: .66rem; font-weight: 700; color: var(--lime); }
.mk-kpi-delta.is-baixa { color: #ff9b9b; }
.mk-grafico { display: flex; align-items: flex-end; gap: .4rem; height: 7rem; padding-top: .5rem; }
.mk-barra { flex: 1; border-radius: 5px 5px 0 0; background: var(--marca); opacity: .85; }
.mk-legenda { display: flex; gap: .4rem; }
.mk-legenda span { flex: 1; text-align: center; font-size: .62rem; color: var(--m-ink-2); }
.mk-mapa { position: relative; height: 7rem; border-radius: 12px; background: var(--m-soft); border: 1px solid var(--m-linha); overflow: hidden; }
.mk-pin { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 0 4px #00d2ff26; }
.mk-pin--1 { left: 18%; top: 30%; }
.mk-pin--2 { left: 52%; top: 62%; }
.mk-pin--3 { left: 78%; top: 26%; background: var(--lime); box-shadow: 0 0 0 4px #beff0026; }
.mk-rota { position: absolute; left: 18%; top: 32%; width: 62%; height: 34%; border-top: 2px dashed var(--m-linha); border-right: 2px dashed var(--m-linha); border-radius: 0 12px 0 0; }
.mk-linhas { display: grid; gap: .3rem; }
.mk-linha { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; padding: .45rem .6rem; border-radius: 10px; background: var(--m-soft); }
.mk-linha > :nth-child(4) { grid-column: auto; }
.mk-linha strong { font-size: .74rem; }
.mk-linha-meio { font-size: .72rem; color: var(--m-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mk-linha-pe { font-size: .68rem; color: var(--m-ink-2); }
.mk-etiqueta { padding: .12rem .5rem; border-radius: 999px; font-size: .66rem; font-weight: 700; white-space: nowrap; justify-self: start; }
.mk-etiqueta--ativo { background: #00d2ff26; color: var(--ciano); }
.mk-etiqueta--ok { background: #beff001f; color: var(--lime); }
.mk-etiqueta--alerta { background: #ff6b6b26; color: #ff9b9b; }
.mk-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.mk-produto { display: grid; gap: .25rem; align-content: start; padding: .5rem; border-radius: 10px; background: var(--m-soft); border: 1px solid var(--m-linha); }
.mk-produto.is-ativo { border-color: var(--ciano); background: #00d2ff14; }
.mk-produto-nome { font-size: .72rem; font-weight: 700; }
.mk-produto-preco { font-size: .66rem; color: var(--m-ink-2); }
.mk-carrinho { border-right: 0; border-left: 1px solid var(--m-linha); padding-left: .8rem; padding-right: 0; }
.mk-item { font-size: .72rem; color: var(--m-ink-2); }
.mk-total { display: flex; justify-content: space-between; margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--m-linha); font-size: .8rem; }
.mk-botao { margin-top: .5rem; padding: .4rem .7rem; border-radius: 9px; background: var(--marca); color: var(--marca-ink); font-size: .7rem; font-weight: 700; text-align: center; }
.mk-botao--pequeno { margin-top: .3rem; padding: .25rem .5rem; font-size: .64rem; }
.mk-comandas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mk-comanda { display: grid; gap: .25rem; align-content: start; padding: .6rem; border-radius: 12px; background: var(--m-soft); border-top: 3px solid var(--lime); }
.mk-comanda--atrasa { border-top-color: #ff9b9b; }
.mk-comanda-topo { display: flex; justify-content: space-between; align-items: center; }
.mk-relogio { font-size: .68rem; font-variant-numeric: tabular-nums; color: var(--m-ink-2); }
.mk-comanda-item { font-size: .7rem; color: var(--m-ink); }
.mk-etapas { display: grid; gap: .3rem; }
.mk-etapa { display: grid; grid-template-columns: 14px 1fr auto auto; gap: .6rem; align-items: center; padding: .45rem .6rem; border-radius: 10px; background: var(--m-soft); }
.mk-etapa-marca { width: 10px; height: 10px; border-radius: 50%; background: var(--m-linha); }
.mk-etapa--feito .mk-etapa-marca { background: var(--lime); }
.mk-etapa--agora .mk-etapa-marca { background: var(--ciano); box-shadow: 0 0 0 4px #00d2ff26; }
.mk-etapa-nome { font-size: .74rem; font-weight: 600; }
.mk-agenda { display: grid; gap: .3rem; }
.mk-hora { display: grid; grid-template-columns: 52px 1fr; gap: .6rem; align-items: center; padding: .45rem .6rem; border-radius: 10px; background: var(--m-soft); }
.mk-hora.is-ativo { background: #00d2ff14; border-left: 2px solid var(--ciano); }
.mk-hora-marca { font-size: .68rem; font-variant-numeric: tabular-nums; color: var(--m-ink-2); }
.mk-hora-corpo { font-size: .74rem; }

/* ── Módulos em carrossel ────────────────────────────────────────────────── */
.carrossel-setas { display: flex; gap: .5rem; }
.seta {
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: var(--t-card); border: 1px solid var(--t-line); color: var(--t-ink); font-size: 1.05rem;
    transition: border-color .2s ease, transform .2s var(--ease);
}
.seta:hover:not(:disabled) { border-color: var(--t-ink); transform: translateY(-2px); }
.seta:disabled { opacity: .35; cursor: default; }
.carrossel {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 2.4rem) / 3)); gap: 1.2rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
    padding: .25rem .1rem 1.25rem;
}
.carrossel::-webkit-scrollbar { display: none; }
.cartao {
    scroll-snap-align: start; padding: 1.6rem; border-radius: var(--raio-g);
    background: var(--t-card); border: 1px solid var(--t-line);
    transition: border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.cartao:hover { transform: translateY(-4px); box-shadow: var(--hz-shadow); }
.cartao.is-atual { border-color: var(--t-line-2); }
.cartao-cabeca { display: grid; grid-template-columns: 46px 1fr; gap: .9rem; align-items: start; margin-bottom: 1.2rem; }
.cartao-icone { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--marca); color: var(--marca-ink); font-size: 1.25rem; }
.cartao-cabeca h3 { font-size: 1.15rem; }
.cartao-cabeca p { color: var(--t-ink-2); font-size: .88rem; margin-top: .2rem; }
.cartao-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.cartao-itens li { display: grid; gap: .15rem; padding-top: .85rem; border-top: 1px solid var(--t-line); }
.cartao-itens strong { font-weight: 700; font-size: .95rem; }
.cartao-itens span { color: var(--t-ink-2); font-size: .87rem; line-height: 1.5; }
.pontos { display: flex; gap: .45rem; justify-content: center; margin-top: .75rem; }
.ponto { width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: var(--t-line-2); transition: width .3s var(--ease), background .3s ease; }
.ponto.is-atual { background: var(--marca); width: 36px; }

/* ── Quem usa ────────────────────────────────────────────────────────────── */
.prova-interno { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center; }
.prova-interno .secao-cabeca { margin-bottom: 0; }
.prova-destaques { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.prova-destaques li {
    position: relative; display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.25rem;
    border-radius: var(--raio); background: var(--t-card-2); border: 1px solid var(--t-line);
    font-weight: 700; color: var(--t-ink);
}
.prova-destaques li::before {
    content: '\F26E'; font-family: 'bootstrap-icons'; flex: none; width: 36px; height: 36px; border-radius: 11px;
    display: grid; place-items: center; background: var(--marca); color: var(--marca-ink); font-size: 1.1rem; font-weight: 400;
}
.prova-depoimentos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
.depoimento { margin: 0; padding: 1.5rem; border-radius: var(--raio-g); background: var(--t-card); border: 1px solid var(--t-line); box-shadow: var(--hz-shadow-sm); }
.depoimento blockquote { margin: 0; font-size: 1.02rem; color: var(--t-ink); }
.depoimento figcaption { display: grid; margin-top: 1rem; font-size: .88rem; }
.depoimento figcaption span { color: var(--t-muted); }

/* ── Montador de plano ───────────────────────────────────────────────────── */
.faixa--breu-fundo { --t-bg: #0b131a; border-block: 1px solid var(--t-line); }
.montador { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 1.4rem; align-items: start; }
.montador-escolhas { display: grid; gap: 1rem; }
.montador-bloco { background: #070c11; border: 1px solid var(--t-line); border-radius: var(--raio-g); padding: 1.3rem 1.4rem; }
.montador-bloco h3 { font-size: 1.05rem; }
.montador-dica { margin-top: .35rem; font-size: .86rem; color: var(--t-ink-2); }
.montador-legenda { display: inline-block; padding: 2px 7px; border-radius: 999px; background: #73f04a; color: #092015; font-size: .68rem; font-weight: 800; }
.montador-bases { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; margin-top: 1rem; }
.montador-base {
    display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: center;
    padding: .75rem .85rem; border-radius: 14px; cursor: pointer;
    background: #ffffff0a; border: 1px solid var(--t-line); transition: border-color .16s ease, background .16s ease;
}
.montador-base:hover { border-color: var(--ciano); }
.montador-base.is-atual { border-color: var(--ciano); background: #00d2ff14; }
.montador-base input { accent-color: var(--lime); width: 17px; height: 17px; }
.montador-base strong { display: block; font-size: .93rem; color: var(--t-ink); }
.montador-base small { display: block; margin-top: .1rem; font-size: .76rem; color: var(--t-ink-2); }
.montador-itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .45rem; margin-top: 1rem; }
.montador-item {
    display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center;
    padding: .65rem .8rem; border-radius: 13px; cursor: pointer;
    background: #ffffff08; border: 1px solid var(--t-line); transition: border-color .16s ease, background .16s ease;
}
.montador-item:hover { border-color: var(--ciano); }
.montador-item.is-marcado { border-color: var(--ciano); background: #00d2ff14; }
/* Verde e sem caixa clicável: o que já está pago não deveria dar a impressão
   de que dá para "economizar" desmarcando. */
.montador-item.is-incluso { border-color: #beff003d; background: #beff000f; cursor: default; }
.montador-item input { accent-color: var(--lime); width: 17px; height: 17px; }
.montador-item-corpo strong { display: block; font-size: .88rem; font-weight: 700; color: var(--t-ink); }
.montador-item-corpo small { display: block; font-size: .75rem; color: var(--t-ink-2); line-height: 1.35; }
.montador-item-preco { font-size: .78rem; font-weight: 700; color: var(--ciano); white-space: nowrap; }
.montador-item.is-incluso .montador-item-preco { color: var(--lime); }
.montador-grupo { margin-top: .5rem; border: 1px solid var(--t-line); border-radius: 14px; overflow: hidden; }
.montador-grupo.tem-marcada { border-color: var(--ciano); }
.montador-grupo > summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .7rem .9rem; cursor: pointer; list-style: none; background: #ffffff08; font-size: .88rem; color: var(--t-ink);
}
.montador-grupo > summary::-webkit-details-marker { display: none; }
.montador-grupo > summary::after { content: '\F282'; font-family: 'bootstrap-icons'; font-size: .7rem; color: var(--t-ink-2); }
.montador-grupo[open] > summary::after { content: '\F286'; }
.montador-grupo > summary:hover { background: #ffffff12; }
.montador-grupo-conta { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--t-ink-2); }
.montador-grupo.tem-marcada .montador-grupo-conta { color: var(--ciano); }
.montador-grupo .montador-itens { margin-top: 0; padding: .6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.montador-medidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.medida label { display: block; font-size: .82rem; font-weight: 700; color: var(--t-ink-2); margin-bottom: .4rem; }
.medida small { display: block; margin-top: .4rem; font-size: .74rem; color: var(--t-ink-2); }
.medida-campo { display: grid; grid-template-columns: 42px 1fr 42px; gap: .3rem; }
.medida-campo input {
    font-family: var(--texto); font-size: 1.05rem; font-weight: 700; text-align: center;
    padding: .55rem .4rem; border: 1px solid var(--t-line); border-radius: 12px;
    background: var(--t-campo); color: var(--t-ink); width: 100%;
}
.medida-btn { border-radius: 12px; cursor: pointer; font-size: 1.15rem; line-height: 1; background: #ffffff0d; border: 1px solid var(--t-line); color: var(--t-ink); }
.medida-btn:hover { border-color: var(--ciano); color: var(--ciano); }
.montador-conta {
    position: sticky; top: calc(var(--topo-altura) + 1.25rem);
    background: linear-gradient(#070c11, #070c11) padding-box, var(--marca) border-box;
    border: 2px solid transparent; border-radius: var(--raio-g); padding: 1.5rem;
}
.montador-conta-olho { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ciano); }
.montador-total { display: flex; align-items: baseline; gap: .25rem; margin-top: .7rem; color: var(--t-ink); }
.montador-total .plano-cifrao, .montador-total .plano-por { color: var(--t-ink-2); }
.montador-economia { min-height: 1.2em; margin-top: .3rem; font-size: .82rem; font-weight: 700; color: var(--lime); }
.montador-linhas { list-style: none; margin: 1.1rem 0; padding: 1.1rem 0 0; border-top: 1px solid var(--t-line); display: grid; gap: .6rem; max-height: 17rem; overflow-y: auto; }
.montador-linhas li { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.montador-linhas strong { display: block; font-size: .85rem; font-weight: 700; color: var(--t-ink); }
.montador-linhas small { display: block; font-size: .72rem; color: var(--t-ink-2); }
.montador-linha-preco { font-size: .82rem; font-weight: 700; color: var(--t-ink); white-space: nowrap; }
.montador-nota { margin-top: .9rem; font-size: .76rem; color: var(--t-ink-2); line-height: 1.5; }

/* ── Planos ──────────────────────────────────────────────────────────────── */
.switch {
    display: inline-flex; gap: .25rem; margin-top: 1.6rem; padding: .28rem; border-radius: 999px;
    background: var(--t-card); border: 1px solid var(--t-line);
}
.switch-op {
    display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1.15rem; border: 0; border-radius: 999px;
    background: transparent; color: var(--t-ink-2); font-family: var(--texto); font-size: .9rem; font-weight: 700; cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.switch-op.is-ativo { background: var(--marca); color: var(--marca-ink); }
.switch-selo { font-size: .68rem; font-weight: 800; padding: .1rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--t-ink) 8%, transparent); }
.switch-op.is-ativo .switch-selo { background: #06202a1f; }

.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: stretch; }
.plano {
    position: relative; display: flex; flex-direction: column;
    background: var(--t-card); border: 1px solid var(--t-line); border-radius: var(--raio-g); padding: 1.9rem 1.6rem;
    transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
}
.plano:hover { transform: translateY(-5px); box-shadow: var(--hz-shadow-lg); }
.plano--destaque {
    background: linear-gradient(var(--t-card), var(--t-card)) padding-box, var(--marca) border-box;
    border: 2px solid transparent; box-shadow: 0 24px 50px -28px #00a6d6aa;
}
/* O plano do nível que está tocando na demonstração. Ele não muda de
   tamanho: cartão que cresce e encolhe a cada troca faz a seção pular. */
.plano--do-nivel { border-color: color-mix(in srgb, var(--ciano) 60%, var(--t-line)); }
.plano-fita {
    position: absolute; top: -.85rem; left: 1.6rem; background: var(--marca); color: var(--marca-ink);
    font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .28rem .7rem; border-radius: 999px;
}
.plano-nome { font-size: 1.5rem; }
.plano-chamada { color: var(--t-ink-2); font-size: .92rem; margin-top: .35rem; min-height: 2.6em; }
.plano-preco { display: flex; align-items: baseline; gap: .25rem; margin-top: 1.1rem; color: var(--t-ink); }
.plano-cifrao { font-size: 1.1rem; font-weight: 700; color: var(--t-ink-2); }
.plano-valor { font-family: var(--display); font-size: 3.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.plano-por { color: var(--t-ink-2); font-size: .95rem; }
.plano-nota { font-size: .85rem; color: var(--t-ink-2); margin-top: .5rem; min-height: 2.4em; }
.plano-economia { display: block; color: var(--hz-ok); font-weight: 700; }
.plano-recursos { list-style: none; margin: 1.4rem 0; padding: 1.4rem 0 0; border-top: 1px solid var(--t-line); display: grid; gap: .7rem; flex: 1; align-content: start; }
.plano-recursos li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start; font-size: .93rem; color: var(--t-ink-2); }
.plano-recursos i { color: var(--hz-ok); }
.planos-pe { margin-top: 2rem; color: var(--t-ink-2); font-size: .95rem; text-align: center; }
.planos-pe a { color: var(--hz-brand-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.planos-bonus { margin-top: .5rem; color: var(--t-ink-2); font-size: .85rem; text-align: center; }
.planos-bonus .bi { color: var(--hz-brand-text); margin-right: .25rem; }

/* ── Contratação ─────────────────────────────────────────────────────────── */
.contratar { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contratar h2 { font-size: clamp(1.9rem, 4vw, 3.05rem); }
.form-cartao {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    background: var(--t-card); border: 1px solid var(--t-line); border-radius: var(--raio-g); padding: 1.7rem; box-shadow: var(--t-sombra);
}
.campo { display: grid; gap: .4rem; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-size: .82rem; font-weight: 700; color: var(--t-ink-2); }
.campo input, .campo select {
    font-family: var(--texto); font-size: 1rem; padding: .72rem .9rem;
    border: 1px solid var(--t-line-2); border-radius: 12px; background: var(--t-campo); color: var(--t-ink); width: 100%;
}
.campo input::placeholder { color: var(--t-muted); }
.campo input:focus, .campo select:focus { outline: 0; border-color: var(--ciano); box-shadow: 0 0 0 3px #00d2ff26; }
.campo input[aria-invalid="true"] { border-color: #ff6b6b; }
.plano-escolhido { display: block; padding: .72rem .9rem; border: 1px dashed var(--t-line-2); border-radius: 12px; background: var(--t-campo); color: var(--t-ink-2); font-size: .95rem; }
.plano-escolhido.tem-plano { border-style: solid; border-color: var(--ciano); color: var(--t-ink); font-weight: 700; }
/* A composição do plano montado, repetida na hora de fechar: quem passou por
   quatro passos de montagem precisa reconhecer o que está assinando. */
.plano-escolhido-itens { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.plano-escolhido-itens li { font-size: .8rem; color: var(--t-ink-2); }
.plano-escolhido-itens li::before { content: '· '; color: var(--ciano); }
.consentimento label { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; cursor: pointer; font-weight: 400; }
.consentimento input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--lime); }
.consentimento span { font-size: .85rem; line-height: 1.45; color: var(--t-ink-2); }
.consentimento a { color: var(--ciano); text-decoration: underline; }
.consentimento.is-invalido span { color: #ff9b9b; }
.form-aviso { margin-top: .8rem; font-size: .9rem; min-height: 1.2em; }
.form-aviso.is-erro { color: #ff9b9b; }
.form-aviso.is-ok { color: var(--lime); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: .7rem; max-width: 860px; margin-inline: auto; }
.faq-item { border: 1px solid var(--t-line); border-radius: var(--raio); background: var(--t-card); transition: border-color .2s ease, box-shadow .2s ease; }
.faq-item[open] { border-color: var(--t-line-2); box-shadow: var(--hz-shadow-sm); }
.faq-item summary {
    cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.3rem; font-weight: 700; font-size: 1.02rem; color: var(--t-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i {
    flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in srgb, var(--t-ink) 6%, transparent); color: var(--t-ink-2); transition: transform .25s var(--ease), background .2s ease;
}
.faq-item[open] summary i { transform: rotate(45deg); background: var(--marca); color: var(--marca-ink); }
.faq-item p { padding: 0 1.3rem 1.3rem; color: var(--t-ink-2); }
.faq-item[open] p { animation: balao-entra .35s var(--ease); }

/* ── Chamada final ───────────────────────────────────────────────────────── */
.cta-final { padding-top: 0; }
.cta-final__caixa {
    position: relative; overflow: hidden; isolation: isolate; text-align: center;
    padding: clamp(2.75rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4rem); border-radius: 32px;
    background: #070c11; color: #f2f7fa;
    --t-em: var(--marca); --t-olho: var(--ciano); --t-ink: #f2f7fa;
}
.cta-final__brilho span {
    position: absolute; z-index: -1; width: 460px; height: 460px; border-radius: 50%; filter: blur(80px); opacity: .45;
    animation: deriva 20s ease-in-out infinite alternate;
}
.cta-final__brilho span:nth-child(1) { left: -120px; top: -200px; background: var(--lime); }
.cta-final__brilho span:nth-child(2) { right: -140px; bottom: -220px; background: var(--ciano); animation-delay: -8s; }
.cta-final__caixa h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 18ch; margin-inline: auto; color: #f2f7fa; }
.cta-final__caixa h2 em { display: block; }
.cta-final__caixa > p { margin: 1.2rem auto 0; max-width: 46ch; color: #c1d0da; font-size: 1.06rem; }
.cta-final__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.cta-final__entrar { margin-top: 1.4rem; font-size: .92rem; color: #aebfcc; }
.cta-final__entrar a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
.rodape { padding-block: 3rem; }
.rodape-interno { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: center; }
.rodape .marca span { color: var(--t-ink); }
.rodape-frase { margin-top: .7rem; font-size: .92rem; color: var(--t-ink-2); }
.rodape-links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.rodape-links a { font-size: .92rem; color: var(--t-ink-2); }
.rodape-links a:hover { color: var(--t-ink); }

/* ── Blocos legais (Decreto 7.962 / LGPD) ────────────────────────────────── */
.legal { padding: 4rem var(--borda-tela); background: var(--l-suave); border-top: 1px solid var(--hz-line); color: var(--hz-ink); }
.legal-wrap { max-width: 1080px; margin: 0 auto; display: grid; gap: 3rem; }
.legal-bloco h2 { margin: 0 0 .35rem; font-family: var(--texto); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--hz-ink); }
.legal-sub { margin: 0 0 1.4rem; color: var(--hz-muted); font-size: .95rem; }
.legal-bloco h4 { margin: 1.1rem 0 .3rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hz-muted); }
.legal-bloco p { color: var(--hz-ink-2); font-size: .93rem; line-height: 1.6; }
.legal-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .9rem; }
.legal-card { padding: 1.1rem 1.2rem; background: var(--hz-surface); border: 1px solid var(--hz-line); border-radius: 14px; }
.legal-card h3 { margin: 0 0 .4rem; font-family: var(--texto); font-size: 1rem; font-weight: 800; letter-spacing: 0; color: var(--hz-ink); }
.legal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 2.4rem; }
.legal-lista { margin: .4rem 0 0; padding-left: 1.15rem; color: var(--hz-ink-2); font-size: .93rem; line-height: 1.75; }
.legal-nota { margin-top: 1rem; padding: .85rem 1rem; background: var(--hz-surface); border: 1px solid var(--hz-line); border-radius: 12px; font-size: .88rem !important; }
.legal-alerta { padding: .9rem 1.1rem; background: var(--hz-warn-bg); border: 1px solid color-mix(in srgb, var(--hz-warn) 40%, transparent); border-radius: 12px; color: var(--hz-warn) !important; font-size: .9rem !important; }
.legal-alerta code { background: rgba(0, 0, 0, .06); padding: .1rem .35rem; border-radius: 5px; font-size: .85em; }
.legal-form { background: var(--hz-surface); border: 1px solid var(--hz-line); border-radius: 16px; padding: 1.4rem; }
.legal-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
.legal-form label { display: block; font-size: .82rem; font-weight: 700; color: var(--hz-ink-2); }
.legal-form input, .legal-form select, .legal-form textarea {
    width: 100%; margin-top: .3rem; padding: .6rem .75rem; font: inherit; font-size: .93rem; font-weight: 400;
    border: 1px solid var(--hz-line-strong); border-radius: 9px; background: var(--hz-surface); color: var(--hz-ink);
}
.legal-form input:focus, .legal-form select:focus, .legal-form textarea:focus { outline: 0; border-color: var(--hz-brand); box-shadow: var(--hz-focus); }
.legal-wide { grid-column: 1 / -1; }
.legal-check { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0; font-size: .86rem; font-weight: 400 !important; color: var(--hz-ink-2); }
.legal-check input { width: 17px; height: 17px; margin-top: .15rem; flex: 0 0 17px; accent-color: var(--hz-brand); }
.legal-btn { padding: .75rem 1.6rem; border: 0; border-radius: 999px; background: var(--hz-brand); color: var(--hz-brand-ink); font-size: .95rem; font-weight: 800; cursor: pointer; }
.legal-btn:hover:not(:disabled) { background: var(--hz-brand-hover); }
.legal-btn:disabled { opacity: .6; cursor: not-allowed; }
.legal-retorno { margin-top: .9rem; padding: .7rem .9rem; border-radius: 10px; font-size: .9rem !important; }
.legal-retorno.ok { background: var(--hz-ok-bg); color: var(--hz-ok) !important; }
.legal-retorno.erro { background: var(--hz-danger-bg); color: var(--hz-danger) !important; }
.legal-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 0; }
.legal-dados dt { font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--hz-muted); }
.legal-dados dd { margin: .2rem 0 0; color: var(--hz-ink); font-size: .95rem; font-weight: 700; }

/* ── Telas menores ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .topo-menu { display: grid; }
    .topo-nav {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: .15rem;
        padding: .75rem var(--borda-tela) 1.25rem;
        background: var(--l-papel); border-bottom: 1px solid var(--t-line);
        box-shadow: 0 24px 40px -24px rgba(9, 20, 15, .45);
        max-height: calc(100vh - var(--topo-altura)); overflow-y: auto;
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity .22s ease, transform .22s var(--ease), visibility 0s linear .22s;
    }
    .topo.is-menu-aberto .topo-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .topo-nav > a, .topo-nav-botao { padding: .85rem .75rem; font-size: 1.02rem; text-align: left; border-radius: 12px; }
    .topo-nav > a.is-atual::after { display: none; }
    .topo-nav > a.is-atual { background: color-mix(in srgb, var(--t-ink) 6%, transparent); }
    .topo-nav-cta { display: flex !important; margin-top: .6rem; }
}

@media (max-width: 980px) {
    .hero-interno, .hermes, .contratar, .montador, .vitrine, .produto, .prova-interno { grid-template-columns: 1fr; }
    .produto--inverso .produto-texto { order: 0; }
    .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* A lista de telas vira uma faixa que rola de lado: empilhada, ela
       empurraria o desenho para fora da primeira tela. */
    .vitrine-lista { grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr); overflow-x: auto; max-height: none; }
    .mk--split, .mk-kanban, .mk-comandas { grid-template-columns: 1fr 1fr; }
    .mk-lateral, .mk-carrinho { border: 0; padding: 0; }
    .montador-conta { position: static; }
    .carrossel { grid-auto-columns: minmax(280px, 70%); }
    .demo { max-width: 560px; width: 100%; margin-inline: auto; }
    .segmentos-visiveis__heading p { display: none; }
}

@media (max-width: 640px) {
    :root { --topo-altura: 60px; }
    body.landing { font-size: 1rem; }
    .topo-cta { display: none !important; }
    .topo-interno { gap: .5rem; }
    .marca span { font-size: 1.12rem; }
    .marca img { width: 30px; height: 30px; }
    .topo-icone { width: 38px; height: 38px; }
    .landing .btn--entrar { padding: .55rem .85rem; font-size: .9rem; }
    .segmentos-visiveis__heading { display: none; }
    .segmentos-visiveis { padding-block: .55rem; }
    .form-cartao { grid-template-columns: 1fr; padding: 1.25rem; }
    .cadeia::before { left: 21px; }
    .cadeia-item { grid-template-columns: 44px 1fr; gap: .9rem; }
    .cadeia-num { width: 44px; height: 44px; font-size: 1.1rem; }
    .cadeia-corpo { padding: 1rem 1.1rem; }
    .hero-acoes .btn { width: 100%; }
    .switch { width: 100%; }
    .switch-op { flex: 1; justify-content: center; padding-inline: .6rem; }
    .niveis { grid-template-columns: 1fr 1fr; }
    .nivel small { display: none; }
    .esteira { grid-template-columns: 1fr 1fr; }
    .telas { grid-template-columns: 1fr; }
    .carrossel { grid-auto-columns: 86%; }
    .demo-selo { display: none; }
    .telefone { border-radius: 28px; padding: 7px; }
    .demo-conversa { border-radius: 22px; height: 400px; }
    .montador-itens, .montador-bases { grid-template-columns: 1fr; }
    .mk--split, .mk-kanban, .mk-comandas, .mk-grade, .mk-fluxo-ramos { grid-template-columns: 1fr; }
    .mk-grade { grid-template-columns: 1fr 1fr; }
    .janela-corpo { min-height: 0; }
    .janela--produto .janela-corpo { min-height: 0; }
    .produtos-atalhos { margin-bottom: 2.5rem; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--borda-tela) * -1); padding-inline: var(--borda-tela); }
    .produtos-atalhos::-webkit-scrollbar { display: none; }
    .produtos-atalhos a { flex: none; }
    .cta-final__acoes .btn { width: 100%; }
    .legal { padding: 2.5rem var(--borda-tela); }
    .legal-wrap { gap: 2.2rem; }
    .legal-grid, .legal-cards { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
    .marca span { display: none; }
}

/* ── Menos movimento ─────────────────────────────────────────────────────── */
/* Ninguém fica sem conteúdo por preferir menos movimento: nada anima, nada
   flutua, e tudo já nasce no lugar. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-revelar] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-aurora span, .cta-final__brilho span, .telefone, .demo-selo, .olho--pilula::before, .tester-seta i { animation: none !important; }
    .nivel.is-atual::after { display: none; }
    .landing *, .landing *::before, .landing *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* No papel não existe rolagem nem tema: sem isto a impressão sai com as
   seções em branco. */
@media print {
    [data-revelar] { opacity: 1 !important; transform: none !important; }
    .topo, .segmentos-visiveis, .hero-aurora, .demo-selo, .cta-final__brilho { display: none !important; }
}