/* ============================================================
   iEntrega — adições ao design system do handoff.
   Carregado DEPOIS de styles.css. Este arquivo não redefine nada
   do handoff: contém só os componentes que a Motion não tinha
   (chat do copiloto, linhas de produto, selo do comprovante).
   Usa os mesmos tokens (--bg, --sf, --bd, --tx, --mu, --ac…).
   ============================================================ */

/* marca: losango no lugar da letra */
/* a marca real substitui o losango desenhado em CSS. O PNG ja traz
   o canto arredondado no alpha, entao o fundo e o raio do
   .brand__mark tem que sair — senao aparece um quadrado indigo
   nas quinas transparentes. */
.brand__mark--logo { background: none; border-radius: 0; object-fit: contain; }


/* ---------- estados de entrega (mesma régua do produto) ---------- */
.status--ok { border-color: rgba(52,211,153,.32); background: rgba(52,211,153,.08); color: #34D399; }
.status--late { border-color: rgba(251,191,36,.32); background: rgba(251,191,36,.08); color: #FBBF24; }
.status--fail { border-color: rgba(248,113,113,.32); background: rgba(248,113,113,.08); color: #F87171; }
[data-theme="light"] .status--ok { border-color: rgba(31,138,99,.3); background: rgba(31,138,99,.08); color: #1F8A63; }
[data-theme="light"] .status--late { border-color: rgba(154,106,11,.3); background: rgba(154,106,11,.08); color: #9A6A0B; }
[data-theme="light"] .status--fail { border-color: rgba(194,69,61,.3); background: rgba(194,69,61,.08); color: #C2453D; }

/* ---------- copiloto ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.chat .msg { padding: 11px 14px; border-radius: 11px; font-size: 13.5px; line-height: 1.55; max-width: 88%; }
.chat .msg--user { align-self: flex-end; background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.3); color: var(--tx); }
.chat .msg--bot { background: var(--bg); border: 1px solid var(--bd); color: var(--mu); }
.chat .msg--bot strong { color: var(--tx); font-weight: 600; }
.chat .tool { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .05em; color: var(--mu); opacity: .75; padding-left: 3px; }

/* ---------- selo do comprovante ---------- */
.seal-list { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.seal-list .row { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--tx); }
.seal-list .row .tick { width: 17px; height: 17px; border-radius: 5px; background: rgba(52,211,153,.16); color: #34D399; display: grid; place-items: center; font-size: 10px; flex: none; }
[data-theme="light"] .seal-list .row .tick { background: rgba(31,138,99,.14); color: #1F8A63; }
.hash-line { margin: 4px 22px 22px; padding: 12px 14px; border: 1px solid var(--bd); border-radius: 10px; background: var(--bg); font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.7; color: var(--mu); word-break: break-all; }
.hash-line b { display: block; color: var(--tx); font-weight: 500; margin-bottom: 3px; }

/* hash no rodapé do comprovante em papel */
.receipt__hash { margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1.7; color: var(--paper-mu); word-break: break-all; }
.receipt__hash b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* ---------- rastreio público ---------- */
/* ---------- planos (simulador) ---------- */
.calc-plan { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-top: 5px; }
.calc-per { margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--mu); }

/* ---------- faixa de confiança da plataforma ---------- */
/* sem border-top: .section ja fecha com border-bottom e a emenda ficava com 2px */
.trust-strip { }
.trust-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-strip__grid > div { padding: 26px 24px; border-right: 1px solid var(--bd); display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--mu); }
.trust-strip__grid > div:first-child { padding-left: 0; }
.trust-strip__grid > div:last-child { border-right: 0; padding-right: 0; }
.trust-strip__grid .n { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .1em; color: var(--ac-tx); padding-top: 2px; }
.trust-strip__grid b { color: var(--tx); font-weight: 600; }

/* ============================================================
   A PARTIR DAQUI: melhorias trazidas do protótipo.
   Estes blocos SOBRESCREVEM regras do handoff de propósito —
   cada um está anotado com o motivo.
   ============================================================ */

/* --- abas com auto-avanço -------------------------------------
   Handoff: .tab[aria-selected=true] .bar { background: var(--ac) }
   — barra cheia e estática. Aqui ela vira trilho + preenchimento
   que corre em 7s e mostra quanto falta para a próxima aba. */
.tabs .tab .bar { background: var(--bd); overflow: hidden; }
.tabs .tab[aria-selected="true"] .bar { background: var(--bd); }
.tabs .tab .bar i { display: block; height: 100%; width: 100%; background: var(--ac); transform: scaleX(0); transform-origin: left; }
.tabs .tab { transition: background .22s; }
.tabs .tab:hover { background: color-mix(in srgb, var(--sf) 60%, transparent); }

/* --- marquee: corrige o salto no fim do loop -------------------
   Handoff: .marquee-track { gap: 48px } com translateX(-50%).
   Com 12 spans há 11 gaps, então -50% cai meio gap antes do
   duplicado e a faixa dá um pulo de 24px a cada volta.
   Com margin-right em cada span as duas metades ficam idênticas. */
.marquee-track { gap: 0; }
.marquee-track span { margin-right: 48px; }
.marquee-mask:hover .marquee-track { animation-play-state: paused; }

/* --- hover dos cards: acrescenta elevação ---------------------
   Handoff só muda a cor da borda; o protótipo levantava o card. */
.case-card, .persona-card { transition: border-color .25s, transform .3s cubic-bezier(.2,.7,.3,1); }
.sector-card { transition: border-color .25s; }
.case-card:hover, .persona-card:hover { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .case-card:hover, .persona-card:hover { transform: none; }
}

/* --- arte em canvas no lugar dos placeholders ------------------ */
/* `.receipt__photo canvas` saiu daqui junto com a foto desenhada do
   comprovante. As duas regras de `.receipt__photo` que sobram em styles.css
   ficam de propósito: aquele arquivo é o fork do handoff e a disciplina dele é
   divergir o mínimo possível — regra morta ali é ruído do handoff, não nosso. */
/* [iE] A arte em canvas saiu das duas seções (ver bloco SETORES E CASOS no fim
   deste arquivo). Setores agora usa foto; Casos usa fragmento de produto. */

/* --- assinatura que se desenha -------------------------------- */
.receipt__sign svg path { stroke-dasharray: 340; stroke-dashoffset: 340; }
.rv-in .receipt__sign svg path { animation: sign-draw 1.6s .35s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes sign-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .receipt__sign svg path { stroke-dashoffset: 0; animation: none; }
}

/* --- hash que se sela ------------------------------------------ */
#receipt-hash { font-variant-ligatures: none; }

/* [iE] O 84px cravado ERRAVA nas pontas, e a home era a única das três páginas
   ainda com ele. O `zoom` está no BODY, o `html` fica fora dele, e
   `scroll-padding` mora no scroll container, que é o `html`: o cabeçalho de
   68px renderiza 78,2px a 1,15 e 88,4px a 1,3. Acima de 1750px o valor fixo
   ficava MENOR que o cabeçalho, e todo clique nas cerca de 30 âncoras do menu
   aterrissava com o título escondido atrás dele.

   Regra dos dois sentidos: medida de viewport DIVIDE por --z (está dentro do
   zoom), scroll-padding MULTIPLICA (está fora). Mesmo conserto já aplicado ao
   site.css, que serve Módulos e Sobre — isto aqui era a folha gêmea que ficou
   para trás, que é a classe de defeito que este projeto mais paga. */
:root { --z: 1; }
@media (min-width: 1440px) { :root { --z: 1.15; } }
@media (min-width: 1750px) { :root { --z: 1.3;  } }
html { scroll-padding-top: calc(84px * var(--z)); }

/* ============================================================
   MÓDULOS — barra em pílulas e mockups, portados do protótipo.
   Sobrescreve o desenho de abas do handoff (colunas 01–05 com
   divisória) pela barra arredondada com ícone.
   ============================================================ */

/* tokens auxiliares que o protótipo usava e o handoff não define */
:root {
  --ok: #34D399; --warn: #FBBF24; --bad: #F87171;
  --ac2: #818CF8; --ft: #807C88; --bds: #2F2D35; --sf2: #2B2B37;
}
:root[data-theme="light"] {
  --ok: #1F8A63; --warn: #9A6A0B; --bad: #C2453D;
  --ac2: #4F46E5; --ft: #89888F; --bds: #E3E7EC; --sf2: #F7F9FB;
}

.modbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; background: var(--sf); border: 1px solid var(--bd); border-radius: 14px; padding: 6px; margin-top: clamp(44px, 5vw, 66px); }
.modbar .tab { position: relative; overflow: hidden; padding: 16px 8px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: background .22s; }
.modbar .tab + .tab { border-left: 0; }
.modbar .tab:first-child { padding-left: 8px; }
.modbar .tab:last-child { padding-right: 8px; }
.modbar .tab:hover { background: var(--sf2); }
.modbar .tab .ico { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--sf2); display: grid; place-items: center; color: var(--mu); transition: background .25s, color .25s; }
/* a celula tem 160px de texto e o nome mais longo usava 102: sobrava
   um terco da largura. Sobe o corpo e o respiro lateral cede 2px. */
.modbar .tab .name { margin: 0; font-size: 16px; font-weight: 600; color: var(--tx); letter-spacing: -.016em; line-height: 1.2; }
.modbar .tab .hint { margin: 0; font-size: 12.5px; color: var(--ft); line-height: 1.3; transition: color .25s; }
.modbar .tab[aria-selected="true"] { background: var(--sf2); }
.modbar .tab[aria-selected="true"] .ico { background: var(--ac); color: #FAF8F5; }
.modbar .tab[aria-selected="true"] .hint { color: var(--mu); }
.modbar .tab .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; margin: 0; background: transparent; overflow: hidden; }
@media (max-width: 1000px) { .modbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .modbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- moldura dos mockups ---------- */
.mock { border: 1px solid var(--bd); background: var(--sf); border-radius: 16px; box-shadow: 0 40px 80px -50px var(--sh); overflow: hidden; }
.mock-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--bd); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--mu); }
.mock-b { padding: 18px; }
.split2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
@media (max-width: 560px) { .split2 { grid-template-columns: 1fr; } }
.pane { background: var(--bg); border: 1px solid var(--bds); border-radius: 12px; padding: 15px; }
.pane h5 { margin: 0 0 11px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--mu); }

/* ---------- lista de entregas ---------- */
.lrow { display: grid; grid-template-columns: 3px 62px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bds); font-size: 13px; }
.lrow:last-child { border-bottom: 0; }
.lrow .stripe { width: 3px; height: 20px; border-radius: 2px; }
.lrow .id { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ft); }
.lrow .stt { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; text-align: right; white-space: nowrap; }
@media (max-width: 480px) { .lrow { grid-template-columns: 3px 1fr auto; } .lrow .id { display: none; } }

/* ---------- entregadores ---------- */
.drv { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13px; }
.drv .av { width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: #0B0A0C; flex: none; }
.drv .dp { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--mu); }
.minibar { height: 4px; border-radius: 99px; background: var(--bds); overflow: hidden; margin: 2px 0 9px; }
.minibar i { display: block; height: 100%; border-radius: 99px; }

/* ---------- consolidado por produto ---------- */
.prd { display: grid; grid-template-columns: 1fr auto auto; gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--bds); font-size: 13px; }
.prd:last-child { border-bottom: 0; }
.prd .q { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.pt { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.pt.ok { background: rgba(52,211,153,.12); color: var(--ok); }
.pt.warn { background: rgba(251,191,36,.12); color: var(--warn); }
.pt.bad { background: rgba(248,113,113,.12); color: var(--bad); }
:root[data-theme="light"] .pt.ok { background: rgba(31,138,99,.12); }
:root[data-theme="light"] .pt.warn { background: rgba(154,106,11,.12); }
:root[data-theme="light"] .pt.bad { background: rgba(194,69,61,.12); }

/* ---------- celulares ---------- */
.phones { display: flex; justify-content: center; gap: 20px; padding: 22px 16px; }
.phone { width: 236px; border: 1px solid var(--bd); background: var(--sf2); border-radius: 24px; padding: 15px; box-shadow: 0 30px 60px -40px var(--sh); }
.phone.small { width: 196px; align-self: flex-end; }
@media (max-width: 560px) { .phones { flex-direction: column; align-items: center; } .phone.small { align-self: center; } }
.ph-top { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ft); padding: 2px 4px 12px; }
.chk { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 12.5px; }
.chk .cb { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--hl); display: grid; place-items: center; font-size: 9px; color: transparent; flex: none; }
.chk.done .cb { background: var(--ok); border-color: var(--ok); color: #0B0A0C; }
.chk.done > span:nth-child(2) { color: var(--mu); }
.qbadge { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .09em; color: var(--warn); }
.chk.done .qbadge { color: var(--ok); }

/* ---------- comprovante em miniatura ---------- */
.minisheet { background: var(--paper); color: #17151A; border-radius: 10px; padding: 16px; font-size: 11.5px; box-shadow: 0 20px 44px -18px var(--shx); }
.minisheet .r1 { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--paper-bd); }
.minisheet .bn { font-weight: 700; font-size: 12.5px; }
.minisheet .seal { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; background: #DFF3E9; color: #0F7A52; padding: 4px 7px; border-radius: 4px; height: fit-content; }
.minisheet .num { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 9px 0 2px; }
.minisheet .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 9px; font-size: 10.5px; }
.minisheet .kv dt { color: var(--paper-mu); }
.minisheet .kv dd { margin: 0; font-family: 'JetBrains Mono', monospace; text-align: right; color: #2A262C; }
.minisheet .hash { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--paper-bd); font-family: 'JetBrains Mono', monospace; font-size: 8px; color: var(--paper-mu); word-break: break-all; line-height: 1.6; }

/* ---------- linha do tempo do rastreio ---------- */
.tl { position: relative; padding-left: 20px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--bd); }
.tli { position: relative; padding: 8px 0; font-size: 13px; }
.tli::before { content: ""; position: absolute; left: -19px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--sf2); border: 1px solid var(--bd); }
.tli.did::before { background: var(--ok); border-color: var(--ok); }
.tli.now::before { background: var(--ac); border-color: var(--ac); box-shadow: 0 0 0 4px rgba(99,102,241,.2); }
.tli .tt { color: var(--tx); }
.tli .td { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ft); }

/* ---------- balões de WhatsApp ---------- */
.bub { background: var(--sf2); border: 1px solid var(--bds); border-radius: 11px; padding: 10px 13px; font-size: 12.5px; line-height: 1.5; color: var(--tx); }
.bub .bt { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--ft); margin-top: 6px; letter-spacing: .05em; }
.bub.me { align-self: flex-end; border-color: rgba(99,102,241,.32); background: rgba(99,102,241,.09); }

/* ---------- card Antes -> Depois (substitui o .result-card do handoff) ---------- */
/* elevacao do card Antes -> Depois, mesma escala dos demais */
.bacard { border: 1px solid var(--bd); background: var(--bg); border-radius: 14px; padding: 24px;
  box-shadow: 0 2px 3px rgba(0,0,0,.13), 0 10px 20px -6px rgba(0,0,0,.20), 0 34px 64px -18px rgba(0,0,0,.45); }
:root[data-theme="light"] .bacard { box-shadow: 0 2px 3px rgba(20,19,23,.05), 0 10px 20px -6px rgba(20,19,23,.08), 0 34px 64px -18px rgba(20,19,23,.16); }
.bacard .label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mu); }
.balines { margin-top: 14px; }
.baline { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bds); font-size: 14px; line-height: 1.45; }
.baline:last-child { border-bottom: 0; }
.baline .tag { flex: none; width: 58px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; }
.baline .tag--antes { color: var(--ft); }
.baline .tag--depois { color: var(--ac-tx); }
.baline .old { color: var(--ft); text-decoration: line-through; text-decoration-color: rgba(248,113,113,.5); text-decoration-thickness: 1px; }
:root[data-theme="light"] .baline .old { text-decoration-color: rgba(194,69,61,.5); }
.baline strong { color: var(--tx); font-weight: 600; }

/* ============================================================
   RECURSOS — grade de 6 cards com demonstração dentro,
   portada do protótipo. Substitui o bento do handoff, que tinha
   5 cards e visual em apenas 2 deles.
   ============================================================ */
.featgrid { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .featgrid { grid-template-columns: 1fr; } }
.feat { border: 1px solid var(--bd); background: var(--bg); border-radius: 14px; padding: clamp(24px, 2.6vw, 30px); transition: border-color .25s; }
.feat:hover { border-color: var(--hl); }
.feat .tt { font-size: 19px; font-weight: 600; letter-spacing: -.012em; color: var(--tx); }
.feat > p { margin-top: 9px; max-width: 52ch; font-size: 14.5px; line-height: 1.55; color: var(--mu); }
.feat .demo { margin-top: 22px; }
.feat .demo .pane { background: var(--sf); }

/* ponto pulsante do rastreio */
.pulse-ring { width: 38px; height: 38px; border-radius: 50%; background: rgba(99,102,241,.14); border: 1px solid rgba(99,102,241,.35); display: grid; place-items: center; flex: none; }
.pulse-ring .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac); animation: livedot 1.8s ease-in-out infinite; }

/* etiqueta com QR */
.etiq { border: 1px dashed var(--hl); border-radius: 10px; padding: 13px 15px; display: flex; gap: 14px; align-items: center; background: var(--sf); }
.etiq .qr { width: 52px; height: 52px; flex: none; border: 4px solid var(--tx); border-radius: 4px; opacity: .9;
  background: conic-gradient(var(--tx) 0 25%, transparent 0 50%, var(--tx) 0 75%, transparent 0) 0 0 / 14px 14px, var(--sf2); }
.etiq .et { font-size: 12.5px; line-height: 1.45; color: var(--mu); }
.etiq .et b { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--tx); font-weight: 500; }

/* três passos da revisão */
.revrow { display: flex; gap: 10px; }
@media (max-width: 420px) { .revrow { flex-direction: column; } }
.revrow .ev { flex: 1; border: 1px solid var(--bds); background: var(--sf); border-radius: 9px; padding: 10px 12px; font-size: 11.5px; color: var(--mu); text-align: center; }
.revrow .ev b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--tx); margin-bottom: 2px; font-weight: 400; }

/* ============================================================
   POLIMENTO — micro-interações do protótipo + acessibilidade.
   O handoff tem só brightness no hover e nenhum anel de foco.
   Tudo aqui respeita prefers-reduced-motion.
   ============================================================ */

/* --- botões: elevação no hover, afunda no clique --------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; border: 0;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s,
              background .18s, border-color .18s, filter .18s;
}
.btn:active { transform: translateY(1px) scale(.99); }
@media (hover: hover) {
  .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(99,102,241,1); }
  .btn--ghost:hover { transform: translateY(-1px); background: var(--sf2); }
  .btn--sm:hover { transform: translateY(-1px); }
}
.btn--ghost { border: 1px solid var(--bd); }

/* --- seta que desliza nos links -------------------------------- */
.link-accent .ar { display: inline-block; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) { .link-accent:hover .ar { transform: translateX(4px); } }

/* --- chips reagem ao ponteiro ---------------------------------- */
.chip { transition: border-color .2s, color .2s; }
@media (hover: hover) {
  a.chip:hover { border-color: var(--ac); color: var(--tx); }
}

/* --- anel de foco visível (o handoff não tinha nenhum) ---------- */
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; }

/* --- rolagem suave nas âncoras, junto com o scroll-padding ----- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- sem flash cinza ao tocar em link no celular --------------- */
a, button { -webkit-tap-highlight-color: transparent; }

/* --- respeita quem pediu menos movimento ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active,
  .sector-card, .case-card, .persona-card,
  .sector-card:hover, .case-card:hover, .persona-card:hover,
  .link-accent .ar, .link-accent:hover .ar {
    transform: none;
    transition: none;
  }
  .marquee-track { animation: none; }
}

/* ============================================================
   RODAPÉ — bloco de verificação pública + contato.
   A verificação abre o rodapé porque quem chega ali costuma ser
   alguém com um comprovante impresso na mão, não um lead.
   ============================================================ */

.verify-band {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(36px, 4vw, 52px) 32px;
  border-bottom: 1px solid var(--bd);
}
@media (max-width: 820px) { .verify-band { grid-template-columns: 1fr; } }
.verify-band__copy h3 { margin: 14px 0 0; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -.02em; font-weight: 600; }
.verify-band__copy p { margin: 10px 0 0; max-width: 52ch; font-size: 14.5px; line-height: 1.55; color: var(--mu); }

.verify-form { display: flex; gap: 10px; }
@media (max-width: 480px) { .verify-form { flex-direction: column; } }
.verify-form input {
  flex: 1; min-width: 0;
  background: var(--bg); border: 1px solid var(--bd); border-radius: 9px;
  color: var(--tx); font-family: 'JetBrains Mono', monospace; font-size: 13.5px;
  padding: 13px 15px; letter-spacing: .03em;
  transition: border-color .2s, box-shadow .2s;
}
.verify-form input::placeholder { color: var(--mu); opacity: .7; }
.verify-form input:focus {
  outline: none; border-color: var(--ac);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.verify-form .btn { flex: none; }


/* --- barra inferior: legal separado do copyright --- */
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { color: var(--mu); }
@media (hover: hover) { .footer-legal a:hover { color: var(--tx); } }


/* preco do plano com mais peso: JetBrains Mono é variável (100–800) */
.calc-out .total { font-weight: 700; }
.calc-out .rate { font-weight: 500; }
.calc-plan { font-weight: 700; }

/* e-mail alinhado a direita da faixa de infraestrutura */
.footer-mail { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--mu); transition: color .2s; }
@media (hover: hover) { .footer-mail:hover { color: var(--ac); } }

/* a faixa de infraestrutura assume a mesma grade do footer-grid,
   para o e-mail cair exatamente sob a coluna Empresa */
@media (min-width: 900px) {
  .partner-band { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 36px; align-items: center; }
  .partner-band__infra { grid-column: 1 / 5; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
  .footer-mail { grid-column: 5; justify-self: start; }
}
.partner-band__infra { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

/* o link cai na linha de baixo, alinhado sob a pilula de avaliacao.
   flex-basis:100% forca a quebra sem precisar mexer no markup. */
.hero__trust .link-accent { flex-basis: 100%; }

/* sem sublinhado no hover dos links: a seta que desliza ja e o sinal,
   e a linha brigava com a propria seta. */
.link-accent:hover { text-decoration: none; }

/* ============================================================
   ELEVAÇÃO — sombra em três camadas para todas as superfícies
   suspensas, e flutuação contínua só para o comprovante.

   O handoff usa `0 40px 80px -50px` em tudo: o spread de -50px
   come quase toda a sombra e os cartões ficam colados no fundo.
   Aqui: contato (2px) + média (10px) + ambiente (34px). É o degrau
   entre as três que o olho lê como volume — uma sombra só, por mais
   borrada que seja, lê como mancha.
   ============================================================ */

.mock-card, .mock, .panel-card, .code-card, .calc-card, .phone, .hvid, .panel-art {
  box-shadow:
    0 2px 3px rgba(0,0,0,.13),
    0 10px 20px -6px rgba(0,0,0,.20),
    0 34px 64px -18px rgba(0,0,0,.45);
}
:root[data-theme="light"] .mock-card,
:root[data-theme="light"] .mock,
:root[data-theme="light"] .panel-card,
:root[data-theme="light"] .code-card,
:root[data-theme="light"] .calc-card,
:root[data-theme="light"] .phone,
:root[data-theme="light"] .hvid,
:root[data-theme="light"] .panel-art {
  box-shadow:
    0 2px 3px rgba(20,19,23,.05),
    0 10px 20px -6px rgba(20,19,23,.08),
    0 34px 64px -18px rgba(20,19,23,.16);
}
/* o celular menor fica um degrau abaixo na hierarquia */
.phone.small { box-shadow: 0 2px 3px rgba(0,0,0,.10), 0 8px 16px -6px rgba(0,0,0,.16), 0 24px 44px -16px rgba(0,0,0,.34); }

/* ============================================================
   COMPROVANTE FLUTUANTE
   Dois transforms empilhados, para não brigarem:
     .receipt-float -> deriva do scroll (JS escreve --float)
     .receipt       -> sobe e desce sozinho (keyframe)
   ============================================================ */

.receipt-wrap { position: relative; }
.receipt-float { transform: translateY(var(--float, 0px)); will-change: transform; }

.receipt {
  position: relative;
  z-index: 1;
  box-shadow:
    0 2px 3px rgba(0,0,0,.14),
    0 10px 20px -6px rgba(0,0,0,.22),
    0 34px 64px -18px rgba(0,0,0,.50),
    0 0 0 1px var(--rim);
  animation: flutua 7s ease-in-out infinite;
  will-change: transform;
}
:root[data-theme="light"] .receipt {
  box-shadow:
    0 2px 3px rgba(20,19,23,.07),
    0 10px 20px -6px rgba(20,19,23,.10),
    0 34px 64px -18px rgba(20,19,23,.22),
    0 0 0 1px rgba(20,19,23,.06);
}

@keyframes flutua {
  0%, 100% { transform: rotate(-.9deg) translateY(-8px); }
  50%      { transform: rotate(-.3deg) translateY(8px); }
}

/* sombra projetada no chão: é ela que mais vende o "está no ar" */
.receipt-wrap::after {
  content: "";
  position: absolute; left: 8%; right: 8%; bottom: -26px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.42), transparent 72%);
  pointer-events: none;
  z-index: 0;
  animation: flutuaSombra 7s ease-in-out infinite;
}
:root[data-theme="light"] .receipt-wrap::after {
  background: radial-gradient(ellipse at center, rgba(20,19,23,.30), transparent 72%);
}
/* respira ao contrário: papel em cima = sombra maior, mais clara e mais
   difusa. Em baixo = menor e mais densa. É o comportamento físico real. */
@keyframes flutuaSombra {
  0%, 100% { transform: scale(1.07); opacity: .58; filter: blur(18px); }
  50%      { transform: scale(.90);  opacity: .96; filter: blur(11px); }
}

/* pausa no hover: dá para ler o comprovante parado */
.receipt-wrap:hover .receipt,
.receipt-wrap:hover::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .receipt { animation: none; transform: rotate(-.6deg); }
  .receipt-wrap::after { animation: none; transform: none; opacity: .8; }
  .receipt-float { transform: none; }
}


/* ============================================================
   ALTERNADOR DE TEMA — a pastilha desliza

   Antes eram dois fundos piscando: um acendia, o outro apagava.
   Agora e um objeto so que viaja de um lado ao outro e amortece no
   fim, como um interruptor fisico. Grade de duas colunas iguais
   porque "Escuro" tem uma letra a mais que "Claro" — sem isso a
   pastilha mudaria de largura no meio do percurso.

   Quem escreve data-active e o setTheme() do app.js, no mesmo lugar
   em que ja atualiza os aria-pressed.
   ============================================================ */

.theme-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  isolation: isolate;
  transition: border-color .25s ease, transform .13s ease;
}

.theme-toggle::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--ac);
  box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 0 16px -3px rgba(99,102,241,.60);
  transform: translateX(var(--tt-x, 0));
  /* o leve passar do ponto no fim e o que faz parecer peca, nao opacidade */
  transition: transform .42s cubic-bezier(.34, 1.32, .52, 1);
}
:root[data-theme="light"] .theme-toggle::before {
  box-shadow: 0 1px 2px rgba(20,19,23,.14), 0 0 14px -4px rgba(99,102,241,.45);
}

.theme-toggle[data-active="light"] { --tt-x: 100%; }

.theme-toggle button {
  position: relative;
  z-index: 1;
  background: transparent;
  /* o rotulo responde depois que a pastilha ja saiu de cima dele:
     o objeto lidera, o texto acompanha */
  transition: color .28s ease .08s;
}
/* o fundo agora e da pastilha; o botao so troca a cor do rotulo */
.theme-toggle button[aria-pressed="true"] { background: transparent; color: #FAF8F5; }
.theme-toggle button:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

@media (hover: hover) {
  .theme-toggle:hover { border-color: var(--hl); }
  .theme-toggle button[aria-pressed="false"]:hover { color: var(--tx); }
}

/* a pressao vale para o grupo inteiro: um clique, um objeto */
.theme-toggle:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle::before,
  .theme-toggle button { transition: none; }
  .theme-toggle:active { transform: none; }
}


/* ============================================================
   RECURSOS — tres colunas, cards suspensos

   Duas mudancas ligadas. A grade era 1fr 1fr: seis cards viravam
   tres pares empilhados, e a secao lia como "aqui estao algumas
   coisas". Em 3x2 le como um bloco so — que e a mensagem certa
   para uma secao chamada Recursos.

   E os cards usavam --bg (#16161F) dentro de uma faixa --sf
   (#24242F): mais escuros que a propria faixa, ou seja, pocos.
   Sombra projetada em poco nao existe. Aqui eles sobem para
   --card, um degrau acima da faixa, e a sombra de tres camadas
   passa a dizer a verdade. Os paineis internos (.pane, .etiq, .ev)
   continuam em --sf e agora ficam rebaixados dentro do card, que
   e a hierarquia correta.
   ============================================================ */

:root { --card: #292934; }
:root[data-theme="light"] { --card: #FFFFFF; }

.featgrid { grid-template-columns: repeat(3, 1fr); }

.feat {
  background: var(--card);
  padding: clamp(20px, 1.7vw, 25px);
  box-shadow:
    0 2px 3px rgba(0,0,0,.13),
    0 10px 20px -6px rgba(0,0,0,.20),
    0 34px 64px -18px rgba(0,0,0,.45);
  transition: border-color .25s, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
:root[data-theme="light"] .feat {
  box-shadow:
    0 2px 3px rgba(20,19,23,.05),
    0 10px 20px -6px rgba(20,19,23,.08),
    0 34px 64px -18px rgba(20,19,23,.16);
}

@media (hover: hover) {
  .feat:hover { transform: translateY(-3px); }
  :root:not([data-theme="light"]) .feat:hover {
    box-shadow:
      0 3px 5px rgba(0,0,0,.15),
      0 14px 26px -6px rgba(0,0,0,.24),
      0 44px 78px -18px rgba(0,0,0,.52);
  }
  :root[data-theme="light"] .feat:hover {
    box-shadow:
      0 3px 5px rgba(20,19,23,.06),
      0 14px 26px -6px rgba(20,19,23,.10),
      0 44px 78px -18px rgba(20,19,23,.20);
  }
}

/* a coluna e ~35% mais estreita: o texto acompanha */
.feat .tt { font-size: 17.5px; line-height: 1.25; }
.feat > p { margin-top: 10px; max-width: none; font-size: 14px; }
.feat .demo { margin-top: 18px; }

/* as tres caixas da Revisao apertam junto */
.revrow { gap: 8px; }
.revrow .ev { padding: 9px 7px; font-size: 11px; }
.revrow .ev b { font-size: 12.5px; }

/* a etiqueta cede largura do QR para o endereco caber */
.etiq { gap: 12px; padding: 12px 13px; }
.etiq .qr { width: 44px; height: 44px; }

@media (max-width: 1120px) { .featgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .featgrid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .feat, .feat:hover { transform: none; transition: border-color .25s; }
}


/* ============================================================
   ANTES -> DEPOIS, refeito

   O cartao tinha 6 rotulos ("Antes" x3, "Depois" x3) mais um
   cabecalho que ja dizia "Antes -> Depois": sete vezes as mesmas
   duas palavras em 468px, e a calha dos rotulos comia 70px de
   largura em toda linha.

   Pior: o pareamento existia (planilhas -> uma tela, canhotos ->
   prova selada, "nao recebi" -> um link) mas so na cabeca de quem
   lia. As seis linhas tinham peso igual, e a unica quebra que
   importava — onde o antes vira depois — era desenhada igual as
   que nao importavam.

   Agora sao tres pares. O problema fica em cima, menor e riscado;
   o resultado logo abaixo, maior e mais claro. A seta ocupa a
   calha e e o unico acento do cartao: ela e a transformacao. Fio
   so entre pares, nunca dentro deles.

   Risco e cor sozinhos nao chegam ao leitor de tela — dai o <s>
   semantico e os rotulos em .sr.
   ============================================================ */

.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.bacard .label .seta { color: var(--ac-tx); }

.balines { margin-top: 16px; }

.bapair {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 6px;
  padding: 15px 0;
  border-top: 1px solid var(--bds);
}
.bapair:first-child { border-top: 0; padding-top: 2px; }
.bapair:last-child { padding-bottom: 2px; }

/* a linha antiga nao compete com o resultado: menor e apagada */
.bapair .de {
  grid-column: 2; grid-row: 1;
  font-size: 12.5px; line-height: 1.4;
  color: var(--ft);
  text-decoration: line-through;
  text-decoration-color: rgba(248,113,113,.45);
  text-decoration-thickness: 1px;
}
:root[data-theme="light"] .bapair .de { text-decoration-color: rgba(194,69,61,.45); }

.bapair .seta {
  grid-column: 1; grid-row: 2;
  font-size: 13px; line-height: 1.5;
  color: var(--ac-tx);
}
.bapair .para {
  grid-column: 2; grid-row: 2;
  margin-top: 3px;
  font-size: 14px; line-height: 1.5;
  color: var(--mu);
}
.bapair .para strong { color: var(--tx); font-weight: 600; }

/* ============================================================
   LETTERING "iEntrega"

   O export do lockup veio em paleta 8-bit sem alfa — o navy
   #0e1428 gravado no arquivo. Como o fundo era uma cor unica,
   deu para recuperar a cobertura de cada pixel e devolver o
   antialiasing, entao o lettering assenta em qualquer fundo.

   Duas versoes porque a letra e quase branca: no tema claro ela
   sumiria. O pin acima do "i" mantem o indigo nas duas — e marca,
   nao tipografia.

   Um SVG seria melhor: aqui a origem tem 376px de largura e o
   cabecalho pede 73px, entao sobra pouca margem para telas 3x.
   ============================================================ */

/* Cheguei a reduzir para 55,3% da altura do icone e subir o
   lettering ~4px, que e a proporcao literal do lockup original.
   O cliente preferiu como estava: maior e assentado mais baixo.
   Fica assim de proposito — nao 'corrigir' de novo para a medida
   do lockup. */
.brand { gap: 5px; }
.brand__name { display: inline-flex; --wm-h: 27px; }
.brand__name--sm { --wm-h: 23px; }
/* sobe 4px no cabecalho — o fator escala para o rodape */
.brand__wm {
  display: block; height: var(--wm-h); width: auto;
  transform: translateY(calc(var(--wm-h) * -0.148));
}

.brand__wm--claro { display: none; }
:root[data-theme="light"] .brand__wm--escuro { display: none; }
:root[data-theme="light"] .brand__wm--claro { display: block; }


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

   O handoff não trazia nenhuma regra de largura para 24 dos 30
   blocos de layout, e nenhuma grade auto-fit. As colunas eram
   fixas até 320px: os quatro cards de Benefícios ficavam com 85px
   cada num celular, o rodapé tentava cinco colunas, e os cinco
   links do menu colidiam com a logo.

   Escada de quebras, reaproveitando as larguras que já existiam
   no arquivo:

     1000px  as divisões de duas colunas empilham; as grades de
             quatro viram duas
      900px  o menu vira gaveta
      820px  Setores e Casos viram uma coluna
      620px  telefone: o que sobrou de duas vira uma, o respiro
             vertical encolhe, a tipografia desce
      460px  telefone estreito: botões ocupam a linha inteira

   Nada aqui toca no desktop.
   ============================================================ */

/* ---------- botão da gaveta ---------- */
.navtoggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; padding: 0;
  border: 1px solid var(--bd); border-radius: 10px;
  background: transparent; cursor: pointer;
}
.navtoggle span {
  display: block; width: 16px; height: 1.5px; border-radius: 2px;
  background: var(--tx);
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.navtoggle span + span { margin-top: 4px; }
/* vira X: cada traço anda metade da distância entre eles */
.site-header.nav-open .navtoggle span:first-child { transform: translateY(2.75px) rotate(45deg); }
.site-header.nav-open .navtoggle span:last-child  { transform: translateY(-2.75px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .navtoggle span { transition: none; } }

/* ============================ ≤1120px ============================ */
@media (max-width: 1120px) {
  .split, .proof-grid { gap: 44px; }
  .hero__grid { gap: 40px; }
}

/* ============================ ≤1000px ============================ */
@media (max-width: 1000px) {
  /* divisões de duas colunas empilham */
  .hero__grid,
  .panel.is-open,
  .split,
  .proof-grid,
  .quote-grid { grid-template-columns: 1fr; align-items: start; gap: 40px; }

  .hero__grid { padding-top: 56px; padding-bottom: 64px; }
  .split, .proof-grid { padding-top: 64px; padding-bottom: 64px; }
  .quote-grid { padding: 56px 0; }
  .panel.is-open { padding: 44px 0 56px; }
  .hero__sub { max-width: 56ch; }

  /* grades de quatro viram duas */
  .persona-grid, .timeline, .case-grid { grid-template-columns: 1fr 1fr; }
  .timeline { gap: 28px 24px; }

  /* a faixa de números: a borda vertical passa a separar só o par,
     e uma horizontal fecha a segunda fileira */
  .stats-band__grid { grid-template-columns: 1fr 1fr; }
  .stats-band__grid > div { padding: 30px 20px 32px; }
  .stats-band__grid > div + div { border-left: 0; }
  .stats-band__grid > div:nth-child(even) { border-left: 1px solid var(--bd); padding-right: 0; }
  .stats-band__grid > div:nth-child(odd) { padding-left: 0; }
  .stats-band__grid > div:nth-child(n+3) { border-top: 1px solid var(--bd); }
  .stats-band .num { font-size: 32px; }

  /* mesma lógica na faixa de plataforma, que usa borda à direita */
  .trust-strip__grid { grid-template-columns: 1fr 1fr; }
  .trust-strip__grid > div { padding: 22px 20px; border-right: 0; }
  .trust-strip__grid > div:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--bd); }
  .trust-strip__grid > div:nth-child(even) { padding-right: 0; }
  .trust-strip__grid > div:nth-child(n+3) { border-top: 1px solid var(--bd); }

  /* rodapé: marca ocupa a linha, links em 2x2 */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; padding: 44px 32px 30px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }

  .marquee-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cta__inner { padding-top: 84px; padding-bottom: 90px; }
}

/* ============================ ≤900px: a gaveta ============================ */
@media (max-width: 900px) {
  .navtoggle { display: flex; }
  .site-header__row { gap: 12px; }

  /* fundo opaco, nao o --hdr de 85%: aqui o painel cobre conteudo,
     e translucido o texto do hero atravessa e nada fica legivel */
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 20px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--bd);
    box-shadow: 0 18px 34px -18px rgba(0,0,0,.55);
  }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav a { padding: 14px 2px; font-size: 16px; border-top: 1px solid var(--bd); }
  /* a borda do primeiro dobraria com a do cabecalho */
  .site-nav a:first-child { border-top: 0; padding-top: 16px; }

  /* o alternador de tema sai do cabeçalho: não cabe e não é essencial */
  .header-actions .theme-toggle { display: none; }
}

/* ============================ ≤820px ============================ */
@media (max-width: 820px) {
  .case-grid { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; gap: 18px; }
  .cta h2 { max-width: 20ch; }
}

/* ============================ ≤620px: telefone ============================ */
@media (max-width: 620px) {
  /* 32px de respiro lateral come 16% de uma tela de 390 */
  .wrap { padding: 0 20px; }
  .footer-grid { padding: 40px 20px 26px; }
  .partner-band { padding: 0 20px 22px; gap: 16px; }
  .footer-bottom { padding: 16px 20px 32px; }
  .marquee-row { padding: 22px 20px; }

  .persona-grid, .timeline { grid-template-columns: 1fr; }
  .timeline { gap: 24px; margin-top: 34px; }
  .persona-grid, .sector-grid, .case-grid, .featgrid { margin-top: 30px; }

  .trust-strip__grid { grid-template-columns: 1fr; }
  .trust-strip__grid > div { border-right: 0; padding: 20px 0; }
  .trust-strip__grid > div:nth-child(odd) { border-right: 0; }
  .trust-strip__grid > div:nth-child(n+2) { border-top: 1px solid var(--bd); }

  .section-pad { padding-top: 56px; padding-bottom: 56px; }
  .hero__grid { padding-top: 40px; padding-bottom: 48px; }
  .split, .proof-grid { padding-top: 52px; padding-bottom: 52px; }
  .quote-grid { padding: 44px 0; }
  .cta__inner { padding-top: 66px; padding-bottom: 72px; }

  /* a segunda linha do h1 tem 23 caracteres: em 40px ela estoura 350px */
  .hero h1 { font-size: clamp(26px, 7.6vw, 34px); }
  .hero__sub { font-size: 16px; }
  .cta h2 { font-size: clamp(27px, 8vw, 36px); }
  .cta p { font-size: 16px; }
  .quote-grid blockquote { font-size: clamp(20px, 5.6vw, 26px); }
  .section-head h2, .proof-grid h2 { font-size: clamp(25px, 7vw, 32px); }

  .calc-card { padding: 20px; }
  .receipt { padding: 20px; }
  .tab { padding: 20px 14px 0; }
  .mock-b { padding: 14px; }
}

/* ============================ ≤460px ============================ */
@media (max-width: 460px) {
  .hero__cta, .cta__actions { flex-direction: column; align-items: stretch; }
  .hero__cta .btn, .cta__actions .btn { justify-content: center; }
  .header-actions .login { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }

  .stats-band__grid { grid-template-columns: 1fr; }
  .stats-band__grid > div { padding: 24px 0 26px; }
  .stats-band__grid > div:nth-child(even) { border-left: 0; }
  .stats-band__grid > div:nth-child(n+2) { border-top: 1px solid var(--bd); }
}


/* ============================================================
   DÚVIDAS FREQUENTES

   Sanfona em <details> nativo. Sem JS: o atributo name faz os
   irmãos fecharem sozinhos quando um abre, e a altura anima por
   interpolate-size + ::details-content. Navegador que não conhece
   essas duas coisas abre e fecha seco, que é uma degradação
   aceitável.

   É de propósito que a seção não seja mais uma grade de cards: a
   página já tem quatro delas seguidas. Aqui é lista com fio, que
   é o objeto certo para uma pergunta e uma resposta.
   ============================================================ */

#faq .split { align-items: start; }
#faq .lede { max-width: 38ch; }

.faq {
  display: flex; flex-direction: column;
  /* a propriedade herda: cobre os <details> filhos */
  interpolate-size: allow-keywords;
}

.faq__item { border-top: 1px solid var(--bd); }
.faq__item:last-child { border-bottom: 1px solid var(--bd); }

.faq__item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 0;
  cursor: pointer;
  font-size: 16.5px; font-weight: 600; letter-spacing: -.012em;
  line-height: 1.35; color: var(--tx);
  transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }

/* chevron desenhado com duas bordas: gira meia volta ao abrir */
.faq__item summary::after {
  content: ""; flex: none;
  width: 9px; height: 9px; margin-right: 3px;
  border-right: 1.6px solid var(--mu);
  border-bottom: 1.6px solid var(--mu);
  transform: translateY(-3px) rotate(45deg);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .2s;
}
.faq__item[open] summary::after {
  transform: translateY(1px) rotate(-135deg);
  border-color: var(--ac);
}
@media (hover: hover) {
  .faq__item summary:hover { color: var(--ac); }
  .faq__item summary:hover::after { border-color: var(--ac); }
}
.faq__item summary:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 4px; }

.faq__a { padding: 0 0 22px; max-width: 64ch; }
.faq__a p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--mu); }

/* a animação de altura; sem suporte, abre seco */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .34s cubic-bezier(.2,.7,.3,1),
              content-visibility .34s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }

@media (max-width: 620px) {
  .faq__item summary { font-size: 15.5px; padding: 17px 0; }
  .faq__a { padding-bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item summary::after,
  .faq__item::details-content { transition: none; }
}


/* ============================================================
   FRAGMENTOS DAS FUNCIONALIDADES

   Os mockups dos cards ocupavam de 19% a 38% da altura (média 31%)
   e ficavam encaixados num painel rebaixado, o que os fazia ler
   como diagrama. Aqui eles passam a ler como pedaço do produto,
   por quatro coisas:

     escala       ocupam perto da metade do card
     sangramento  passam da borda direita e são cortados pelo card,
                  que é o que diz "tem mais coisa aí atrás"
     camadas      duas ou três folhas com sombra, uma atrás da outra
     um detalhe   o ponto pulsando, a barra, o relógio da entrega

   No tema escuro o fragmento sobe um degrau de valor sobre o card.
   No claro o card ja e branco puro, entao quem levanta o fragmento
   e a sombra, nao a cor.
   ============================================================ */

:root { --frag: #303043; --frag-bd: #414156; }
:root[data-theme="light"] { --frag: #FFFFFF; --frag-bd: #E3E7EC; }

.feat { overflow: hidden; }              /* corta o sangramento */
.feat .demo { margin-top: 20px; }

/* Sem sangramento: o fragmento respeita a margem do card dos dois lados,
   igual ao texto acima dele. */
.frag { position: relative; }

.fcard {
  position: relative; z-index: 3;
  background: var(--frag);
  border: 1px solid var(--frag-bd);
  border-radius: 11px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.14),
              0 6px 14px -6px rgba(0,0,0,.24),
              0 20px 36px -16px rgba(0,0,0,.38);
}
:root[data-theme="light"] .fcard {
  box-shadow: 0 1px 2px rgba(20,19,23,.05),
              0 6px 14px -6px rgba(20,19,23,.08),
              0 20px 36px -16px rgba(20,19,23,.14);
}

/* folhas de trás: mesma peça, encolhida e apagada */
.fstack { position: relative; }
.fstack .fghost {
  position: absolute; left: 14px; right: 14px; height: 40px;
  border-radius: 11px; background: var(--frag); border: 1px solid var(--frag-bd);
  pointer-events: none;
}
.fstack .fghost--1 { bottom: -8px;  z-index: 2; opacity: .92; box-shadow: 0 6px 12px -6px rgba(0,0,0,.4); }
.fstack .fghost--2 { bottom: -15px; left: 28px; right: 28px; z-index: 1; opacity: .6; }

/* chips */
.fchip {
  flex: none; font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .09em; line-height: normal;
  padding: 4px 7px; border-radius: 5px;
}
.fchip--ac   { color: var(--ac2); background: rgba(99,102,241,.14); }
.fchip--ok   { color: var(--ok);  background: rgba(52,211,153,.13); }
.fchip--warn { color: var(--warn);background: rgba(251,191,36,.13); }
.fchip--mu   { color: var(--mu);  background: var(--bds); }
:root[data-theme="light"] .fchip--mu { background: var(--bg); }

/* ---------- pontualidade ---------- */
.fdual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fnum { display: grid; gap: 4px; padding: 14px; }
.fnum__v { font-family: 'JetBrains Mono', monospace; font-size: 27px; letter-spacing: -.02em; color: var(--ac); line-height: 1.1; }
.fnum__c { font-size: 11.5px; line-height: 1.4; color: var(--mu); }
.fnum--vazio { box-shadow: none; background: transparent; border-style: dashed; }
.fnum--vazio .fnum__v { color: var(--ft); }

@media (max-width: 680px) {
  .fdual { grid-template-columns: 1fr; }
}


/* ============================================================
   MAIS DOIS FRAGMENTOS

   sino       nove tipos de alerta, com o número ao lado
   assinatura o risco em vetor, e o PDF que sai com o nome do pedido

   [iE] Havia um terceiro, o mapa de pinos do rastreio. Saiu em 18/ago junto com
   os outros cinco mocks desta seção, quando o cliente trocou cada um por arte.
   ============================================================ */

/* ---------- sino de alertas ---------- */
.fsino__h { display: flex; align-items: center; gap: 9px; padding-bottom: 11px; border-bottom: 1px solid var(--bds); }
.fsino__h b { flex: 1; font-size: 13px; font-weight: 600; color: var(--tx); }
.fsino__h svg { flex: none; color: var(--mu); }
.fsino__r { display: flex; align-items: center; gap: 10px; padding-top: 10px; font-size: 12.5px; color: var(--mu); }
.fsino__r span:nth-child(2) { flex: 1; }
.fsino__r b { font-family: 'JetBrains Mono', monospace; font-weight: 400; color: var(--tx); }
.fdot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.fdot--bad  { background: var(--bad); }
.fdot--warn { background: var(--warn); }
.fdot--mu   { background: var(--ft); }

/* ---------- assinatura ---------- */
.fass__cap { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ft); }
.fass__risco { margin: 4px 0 10px; color: var(--tx); }
/* tamanho nativo do traco: esticado ele vira onda, nao assinatura */
.fass__risco svg { display: block; width: 170px; max-width: 100%; height: 60px; }
.fass__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--bds); font-size: 12px; color: var(--mu); }
.fpdf { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 10px 13px; font-size: 12px; color: var(--mu); }
.fpdf__i { flex: none; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .06em; color: var(--bad); border: 1px solid var(--bad); border-radius: 3px; padding: 2px 4px; opacity: .8; }
.fpdf b { font-family: 'JetBrains Mono', monospace; font-weight: 400; color: var(--tx); }

/* ---------- nona célula: ver todas ---------- */
.feat--todas { display: block; color: var(--tx); }
.feat--todas .go { margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--ac-tx); }
.ftodas {
  margin-top: 18px; display: flex; flex-wrap: wrap; gap: 7px;
  /* a nuvem é cortada em baixo de propósito: é o "e mais 400" desenhado */
  max-height: 96px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent);
          mask-image: linear-gradient(180deg, #000 58%, transparent);
}
.ftodas span {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: normal;
  color: var(--mu); background: var(--bds); border-radius: 5px; padding: 5px 8px;
}
:root[data-theme="light"] .ftodas span { background: var(--bg); }


/* ============================================================
   DEPOIMENTOS — o único momento full-bleed da página

   Medido antes de desenhar: 15 seções, 15 na mesma largura de
   1369px, 2 fundos no site inteiro, 11 abrindo com eyebrow + h2.
   A monotonia não era de layout de depoimento, era de largura e
   de superfície. Então é aí que essa seção quebra:

     largura     sai do container, edge a edge
     superfície  ganha um terceiro fundo (papel ou índigo)
     escala      a citação vai a 48px; o maior da página era 52
                 no CTA, com cinco palavras
     condução    o leitor escolhe o setor; sem auto-avanço, que é
                 o que as abas dos Módulos já fazem

   O trilho de setores é quem usa a largura toda. O texto fica
   numa coluna confortável, porque citação de 1200px não se lê.
   ============================================================ */

.depo {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 8.4vw, 122px);
  padding-inline: clamp(20px, 5.4vw, 96px);
}

/* ---------- superfície A: papel ----------
   O comprovante é o único objeto de papel da página. Fazer o
   depoimento ser papel também diz que ele está no registro. */
.depo[data-fundo="papel"] { background: var(--paper); color: var(--ink); }
.depo[data-fundo="papel"] .depo__setor { color: var(--paper-mu); }
.depo[data-fundo="papel"] .depo__setor.is-on { color: var(--ink); }
.depo[data-fundo="papel"] .depo__rail { border-color: var(--paper-bd); }
.depo[data-fundo="papel"] .depo__quem i { color: var(--paper-mu); }
.depo[data-fundo="papel"] .av { background: rgba(20,19,23,.07); color: var(--ink); }
.depo[data-fundo="papel"] .depo__marca { color: rgba(20,19,23,.05); }

/* ---------- superfície B: índigo ---------- */
.depo[data-fundo="indigo"] { background: #16153A; color: #EFEEF6; }
.depo[data-fundo="indigo"]::before {
  content: ""; position: absolute; left: 50%; top: -40%;
  width: min(1500px, 120%); height: 900px; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(99,102,241,.34), transparent 70%);
  pointer-events: none;
}
.depo[data-fundo="indigo"] .depo__setor { color: rgba(239,238,246,.42); }
.depo[data-fundo="indigo"] .depo__setor.is-on { color: #FFF; }
.depo[data-fundo="indigo"] .depo__rail { border-color: rgba(239,238,246,.16); }
.depo[data-fundo="indigo"] .depo__quem i { color: rgba(239,238,246,.6); }
.depo[data-fundo="indigo"] .av { background: rgba(255,255,255,.12); color: #FFF; }
.depo[data-fundo="indigo"] .depo__marca { color: rgba(255,255,255,.05); }

.depo__in { position: relative; }

/* ---------- trilho de setores: é ele que usa a largura toda ---------- */
.depo__rail {
  display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 44px);
  padding-bottom: 22px; border-bottom: 1px solid;
}
.depo__setor {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 600; letter-spacing: -.018em;
  transition: color .26s, opacity .26s;
}
.depo__setor:focus-visible { outline: 2px solid var(--ac); outline-offset: 4px; border-radius: 4px; }

/* ---------- palco ----------
   As seis falas ocupam a mesma célula da grade, então a altura é a
   da maior e nada pula quando troca. */
.depo__palco { display: grid; margin-top: clamp(34px, 4vw, 58px); }
.depo__fala {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity .34s ease, transform .44s cubic-bezier(.2,.7,.3,1), visibility 0s .4s;
}
.depo__fala.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .38s ease .06s, transform .5s cubic-bezier(.2,.7,.3,1) .06s, visibility 0s;
}

.depo__fala blockquote {
  margin: 0; max-width: 40ch;
  font-size: clamp(24px, 3.1vw, 42px);
  line-height: 1.14; letter-spacing: -.03em; font-weight: 600;
  text-wrap: pretty;
}
/* a atribuição entra um pouco depois da frase */
.depo__quem {
  display: flex; align-items: center; gap: 13px;
  margin-top: clamp(24px, 2.6vw, 38px);
  transition: opacity .34s ease .14s, transform .44s cubic-bezier(.2,.7,.3,1) .14s;
}
.depo__fala:not(.is-on) .depo__quem { opacity: 0; transform: translateY(10px); }
.depo__quem .av {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .04em;
}
.depo__quem b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.depo__quem i { display: block; margin-top: 2px; font-size: 13.5px; font-style: normal; }

/* aspas gigantes ao fundo: só textura, nunca lida */
.depo__marca {
  position: absolute; right: -.06em; top: -.34em;
  font-size: clamp(180px, 26vw, 380px); line-height: 1; font-weight: 600;
  pointer-events: none; user-select: none; z-index: 0;
}
/* z-index explicito nos dois filhos reais. Um seletor coringa aqui
   devolvia as aspas absolutas para o fluxo e a secao inchava. */
.depo__rail, .depo__palco { position: relative; z-index: 1; }

@media (max-width: 820px) {
  .depo__rail { gap: 14px 20px; }
  .depo__fala blockquote { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .depo__fala, .depo__quem { transition: opacity .15s ease; transform: none; }
  .depo__fala:not(.is-on) .depo__quem { transform: none; }
}


/* ============================================================
   DEPOIMENTOS — bloco antigo dentro da faixa full-bleed

   A composição volta a ser a de antes: estrelas, citação, avatar
   com nome e empresa, "Ver o caso", e o card Antes → Depois à
   direita. O que muda é o entorno — a faixa índigo sai do
   container — e o trilho de setores acima, que troca a fala.

   As classes .stars, .quote-author, .avatar e .bacard são as
   mesmas de antes, então o que vem aqui é só o que precisa ser
   relido sobre índigo: os tokens da página são feitos para o
   fundo dela, não para este.
   ============================================================ */

.depo__grid {
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(32px, 4vw, 56px); align-items: center;
  margin-top: clamp(30px, 3.4vw, 46px);
}
@media (max-width: 1000px) { .depo__grid { grid-template-columns: 1fr; align-items: start; } }

/* a citação volta ao corpo de antes; quem carrega a largura é o trilho */
.depo__fala blockquote {
  /* sem teto proprio: quem limita a medida e a coluna do grid,
     entao a frase usa toda a largura que a faixa full-bleed deu */
  margin: 20px 0 0; max-width: none;
  font-size: clamp(23px, 2.6vw, 34px);
  line-height: 1.32; letter-spacing: -.02em; font-weight: 500;
  text-wrap: pretty;
}
.depo__fala .stars { font-size: 13px; letter-spacing: .18em; }
.depo__fala .quote-author { margin-top: 26px; }
/* a atribuição herda o atraso da entrada; sem isso ela aparece antes da frase */
.depo__fala .quote-author {
  transition: opacity .34s ease .14s, transform .44s cubic-bezier(.2,.7,.3,1) .14s;
}
.depo__fala:not(.is-on) .quote-author { opacity: 0; transform: translateY(10px); }

/* ---------- releitura sobre índigo ----------
   --ac (#6366F1) sobre #16153A tem contraste baixo demais para
   texto pequeno: os acentos sobem para um índigo claro. */
.depo[data-fundo="indigo"] .stars,
.depo[data-fundo="indigo"] .link-accent,
.depo[data-fundo="indigo"] .bacard .label .seta,
.depo[data-fundo="indigo"] .bapair .seta { color: #A9A7F7; }

.depo[data-fundo="indigo"] .avatar {
  background: rgba(255,255,255,.07); border-color: rgba(239,238,246,.18); color: #EFEEF6;
}
.depo[data-fundo="indigo"] .muted { color: rgba(239,238,246,.62); }

.depo[data-fundo="indigo"] .bacard {
  background: rgba(9,9,26,.55);
  border-color: rgba(239,238,246,.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 12px 24px -10px rgba(0,0,0,.4), 0 36px 66px -20px rgba(0,0,0,.5);
}
.depo[data-fundo="indigo"] .bacard .label { color: rgba(239,238,246,.55); }
.depo[data-fundo="indigo"] .bapair { border-top-color: rgba(239,238,246,.13); }
.depo[data-fundo="indigo"] .bapair .de { color: rgba(239,238,246,.42); }
.depo[data-fundo="indigo"] .bapair .para { color: rgba(239,238,246,.74); }
.depo[data-fundo="indigo"] .bapair .para strong { color: #FFF; }

/* ---------- releitura sobre papel (a outra opção, mantida) ---------- */
.depo[data-fundo="papel"] .stars,
.depo[data-fundo="papel"] .link-accent,
.depo[data-fundo="papel"] .bacard .label .seta,
.depo[data-fundo="papel"] .bapair .seta { color: #4F46E5; }
.depo[data-fundo="papel"] .avatar { background: rgba(20,19,23,.05); border-color: var(--paper-bd); color: var(--paper-mu); }
.depo[data-fundo="papel"] .muted { color: var(--paper-mu); }
.depo[data-fundo="papel"] .bacard {
  background: #FFF; border-color: var(--paper-bd);
  box-shadow: 0 2px 3px rgba(20,19,23,.05), 0 12px 24px -10px rgba(20,19,23,.08), 0 36px 66px -20px rgba(20,19,23,.14);
}
.depo[data-fundo="papel"] .bacard .label { color: var(--paper-mu); }
.depo[data-fundo="papel"] .bapair { border-top-color: var(--paper-bd); }
.depo[data-fundo="papel"] .bapair .de { color: var(--paper-mu); }
.depo[data-fundo="papel"] .bapair .para { color: #4A463F; }
.depo[data-fundo="papel"] .bapair .para strong { color: var(--ink); }


/* ============================================================
   BARRA DE CLIENTES — a mesma peça da barra dos Módulos

   Herda .tabs e .tab, então a barrinha que enche em 7s, o clique
   que fixa e a pausa no ponteiro vêm de graça. A diferença é a
   forma da célula: nos Módulos ela é coluna alta com o ícone
   quadrado em cima; aqui é célula deitada, ícone à esquerda e o
   texto ao lado, na mesma proporção que os nomes tinham antes.

   O quadrado do ícone fica: é onde entra a logo do cliente.
   ============================================================ */

.clibar {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px;
  padding: 5px; border-radius: 13px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(239,238,246,.12);
}
.clibar .tab {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 9px;    /* deitada, não em coluna */
  padding: 11px 9px; border-radius: 9px;
  text-align: left; min-width: 0;
  transition: background .22s;
}
.clibar .tab + .tab { border-left: 0; }
.clibar .tab:first-child { padding-left: 9px; }
.clibar .tab:last-child { padding-right: 9px; }

.clibar .tab .ico {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.07); color: rgba(239,238,246,.55);
  transition: background .25s, color .25s;
}
.clibar .tab .txt { min-width: 0; }
.clibar .tab .name {
  display: block; margin: 0; font-size: 14px; font-weight: 600;
  letter-spacing: -.014em; line-height: 1.22;
  color: rgba(239,238,246,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .25s;
}
.clibar .tab .hint {
  display: block; margin: 2px 0 0; font-size: 11px; line-height: 1.25;
  color: rgba(239,238,246,.34);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .25s;
}

@media (hover: hover) { .clibar .tab:hover { background: rgba(255,255,255,.06); } }
.clibar .tab[aria-selected="true"] { background: rgba(255,255,255,.09); }
.clibar .tab[aria-selected="true"] .ico { background: #6366F1; color: #FFF; }
.clibar .tab[aria-selected="true"] .name { color: #FFF; }
.clibar .tab[aria-selected="true"] .hint { color: rgba(239,238,246,.6); }
.clibar .tab:focus-visible { outline: 2px solid #A9A7F7; outline-offset: -2px; }

/* a barrinha que enche: mesma da barra dos Módulos, relida sobre índigo */
.clibar .tab .bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  margin: 0; background: transparent; overflow: hidden;
}
.clibar .tab[aria-selected="true"] .bar { background: rgba(239,238,246,.14); }
/* sem a classe .tabs (que colidia com o seletor do JS dos Modulos),
   a barrinha precisa da regra propria */
.clibar .tab .bar i {
  display: block; height: 100%; width: 100%;
  background: #A9A7F7; transform: scaleX(0); transform-origin: left;
}

/* sobre papel, os mesmos papéis com os tokens do comprovante */
.depo[data-fundo="papel"] .clibar { background: rgba(20,19,23,.035); border-color: var(--paper-bd); }
.depo[data-fundo="papel"] .clibar .tab .ico { background: rgba(20,19,23,.06); color: var(--paper-mu); }
.depo[data-fundo="papel"] .clibar .tab .name { color: var(--paper-mu); }
.depo[data-fundo="papel"] .clibar .tab .hint { color: #9A948A; }
.depo[data-fundo="papel"] .clibar .tab[aria-selected="true"] { background: #FFF; }
.depo[data-fundo="papel"] .clibar .tab[aria-selected="true"] .ico { background: #4F46E5; color: #FFF; }
.depo[data-fundo="papel"] .clibar .tab[aria-selected="true"] .name { color: var(--ink); }
.depo[data-fundo="papel"] .clibar .tab[aria-selected="true"] .hint { color: var(--paper-mu); }
.depo[data-fundo="papel"] .clibar .tab[aria-selected="true"] .bar { background: var(--paper-bd); }
.depo[data-fundo="papel"] .clibar .tab .bar i { background: #4F46E5; }

/* o trilho antigo some junto com a classe */
.depo__rail, .depo__setor { display: none; }

@media (max-width: 1000px) { .clibar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .clibar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ============================================================
   CTA COM FILME DE FUNDO

   Mesma montagem da Standard Fleet: vídeo em object-fit: cover
   ocupando a seção inteira, um véu por cima para o texto branco
   ter contraste, e o conteúdo por último.

   ATENÇÃO: o arquivo em _tmp é o vídeo DELES, só para você ver o
   efeito funcionando aqui. Não pode ir para o ar. Ver a nota no
   fim deste bloco sobre o que deveria entrar no lugar.
   ============================================================ */

.cta--video { position: relative; isolation: isolate; }

.cta__filme { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.cta__filme video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
  display: block;
}

/* dois véus: um chapado para o contraste do texto, e um degradê que
   costura o vídeo com a seção de cima e com o rodapé de baixo */
.cta__veu {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(8,8,13,.55) 18%, rgba(8,8,13,.55) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgba(8,8,13,.72) 0%, rgba(8,8,13,.28) 55%, rgba(8,8,13,.42) 100%);
}
/* No claro o degrade vertical desbotava para o creme da pagina e
   brigava com o video escuro, virando uma faixa leitosa de ~130px em
   cima e embaixo. Sai o degrade: o corte fica seco, que e o que a
   referencia faz. Fica so o veu, que e quem da contraste ao texto. */
:root[data-theme="light"] .cta__veu {
  background:
    linear-gradient(180deg, rgba(12,11,18,.46), rgba(12,11,18,.46)),
    linear-gradient(90deg, rgba(12,11,18,.6) 0%, rgba(12,11,18,.24) 55%, rgba(12,11,18,.4) 100%);
}

.cta--video .cta__glow { z-index: 2; opacity: .5; }
.cta--video .cta__inner { position: relative; z-index: 3; }

/* sobre filme o texto é sempre claro, nos dois temas */
.cta--video .cta__inner h2 { color: #FFF; }
.cta--video .cta__inner p { color: rgba(255,255,255,.82); }
.cta--video .cta__inner p strong { color: #FFF; }
.cta--video .btn--ghost {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #FFF;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (hover: hover) {
  .cta--video .btn--ghost:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }
}

/* quem pediu menos movimento fica com o poster parado */
@media (prefers-reduced-motion: reduce) {
  .cta__filme video { display: none; }
  .cta__filme { background: url('../_tmp/movimento-poster.jpg') center 62% / cover no-repeat; }
}


/* ============================================================
   COMPROVAÇÃO EM ÍNDIGO

   O índigo passa a marcar os dois picos do argumento: quem usa
   (Depoimentos) e a tese do produto (Comprovação). Mas só um dos
   dois sai do container — o depoimento. Aqui a faixa é índigo e o
   conteúdo continua nos 1369px, então é rima de cor, não repetição
   de estrutura.

   Ganho de bônus: o comprovante é o único objeto de papel da
   página. Papel creme sobre índigo é o maior contraste que a
   página tem, e ele é justamente o que deveria saltar aqui.

   Os tokens da página são feitos para o fundo dela; sobre índigo
   tudo precisa ser relido.
   ============================================================ */

#prova {
  position: relative;
  overflow: hidden;
  background: #16153A;
  border-bottom-color: rgba(239,238,246,.1);
}
#prova::after {
  content: ""; position: absolute; left: 50%; top: -30%;
  width: min(1500px, 120%); height: 900px; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(99,102,241,.3), transparent 70%);
  pointer-events: none; z-index: 0;
}
#prova .proof-grid { position: relative; z-index: 1; }

/* --ac sobre #16153A não tem contraste para texto pequeno */
#prova .eyebrow,
#prova .bullets li::before { color: #A9A7F7; }
#prova h2 { color: #FFF; }
#prova .lede { color: rgba(239,238,246,.74); }
#prova .bullets li { color: rgba(239,238,246,.8); }

/* a sombra projetada do comprovante some no índigo se ficar preta:
   ela precisa ser mais densa e mais fechada aqui */
#prova .receipt-wrap::after {
  background: radial-gradient(ellipse at center, rgba(4,4,18,.55), transparent 72%);
}
:root[data-theme="light"] #prova .receipt-wrap::after {
  background: radial-gradient(ellipse at center, rgba(4,4,18,.5), transparent 72%);
}
/* e o papel ganha o mesmo aro nos dois temas, já que o fundo agora
   é o mesmo nos dois */
#prova .receipt,
:root[data-theme="light"] #prova .receipt {
  box-shadow:
    0 2px 3px rgba(0,0,0,.2),
    0 12px 24px -8px rgba(0,0,0,.3),
    0 40px 72px -20px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.08);
}

/* ============================================================
   [iE] O COMPROVANTE, VERSÃO DA PÁGINA DE MÓDULOS
   ============================================================
   TWIN: estas mesmas regras existem em css/modulos.css, porque index.html e
   modulos.html não compartilham NENHUMA folha — a home carrega
   styles.css + ientrega.css, a de Módulos carrega site.css + modulos.css.
   Não há conflito de cascata (nunca são lidas juntas), mas há risco de
   divergência: mexeu aqui, mexe lá. É o candidato natural da limpeza das
   classes duplicadas que ainda está em aberto.

   O papel usa raio de PAPEL, não de interface. O handoff dava 14px, que é o
   raio de cartão de UI; documento impresso tem canto quase reto. */
#prova .receipt { border-radius: 6px; }

/* o carimbo é verde de tinta, com hex cravado: é impressão em papel e não pode
   seguir o tema da interface. Antes era `--ac`, o índigo da marca, o que fazia
   o carimbo pertencer ao SITE em vez de pertencer ao documento. */
#prova .receipt__stamp {
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 4px;
  background: #DFF3E9; color: #0F7A52;
}

.rec-cap { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--paper-mu); }
.rec-gps { margin-top: 8px; height: 96px; border: 1px solid var(--paper-bd); border-radius: 6px; background: #F3EFE8; display: grid; place-items: center; }
.rec-gps svg { display: block; }

/* As duas molduras ficam VAZIAS e ROTULADAS, sobre hachura. A página não tem
   foto real de entrega e não vai inventar uma — e a peça que saiu daqui, a
   "Foto na porta" desenhada em <canvas>, era a única da página que fingia ser
   uma FOTOGRAFIA, dentro da seção que fala em não fingir. A hachura diz
   "existe uma imagem aqui que não é sua para ver", que é verdade e é o
   máximo que esta página pode afirmar hoje. */
.rec-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.rec-foto {
  height: 74px; border-radius: 6px; border: 1px solid var(--paper-bd);
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(-45deg, #EDE8E0 0 6px, #F4F0EA 6px 12px);
}
.rec-foto span { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-mu); }

/* rótulo de procedência, fora do papel */
.rot {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mu); margin: 0 0 10px 2px;
}
/* O VERDE TEM DE SER TRAVADO AQUI, e é a mesma armadilha que este arquivo já
   documenta duas vezes: `#prova` é índigo NOS DOIS TEMAS, então token que
   escurece no tema claro fica ilegível sobre ele. `--ok` vale #1F8A63 no claro,
   verde escuro sobre índigo escuro. Cravado no #34D399, que é o valor pensado
   para fundo escuro. */
#prova .rot--ok { color: #34D399; }
:root[data-theme="light"] #prova .rot--ok { color: #34D399; }

/* no celular o carimbo em linha rouba metade da largura e o nome do cliente
   quebra em três. Empilhado, o cabeçalho devolve a linha inteira aos dois.
   Mesma regra que modulos.css aplica ao gêmeo. */
@media (max-width: 620px) {
  #prova .receipt__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  #prova .receipt__head .id { margin-top: 0; font-size: 17px; }
}


/* ============================================================
   [iE] A TRILHA — segunda peça vinda da página de Módulos
   ============================================================
   TWIN de css/modulos.css, pelo mesmo motivo do comprovante acima: as duas
   páginas não compartilham folha nenhuma. Mexeu aqui, mexe lá.

   Um fio de 1px atravessa a seção com seis estações penduradas, alternando
   acima e abaixo, e entre cada par, SOBRE o fio, o substantivo do que muda de
   mão. São CINCO ENTREGAS, não seis passos: é a frase "o que um grava, o
   próximo usa" deixando de ser frase e virando desenho.

   Sem números de etapa. A posição no fio é o número e o horário é a ordem.

   Cada estação é uma grade de quatro linhas — [texto acima] [nó] [texto
   abaixo] [haste] — com a linha do nó de altura FIXA. É isso que mantém os
   seis nós no mesmo eixo sem nenhuma conta: quem alterna é a linha que recebe
   o texto, não a posição do nó.

   DIVERGE do gêmeo em uma coisa, de propósito: aqui não entram a nuvem de
   funcionalidades nem o miudinho de procedência. A home já tem o "E outras
   405" na célula do #funcionalidades, e repetir seria dizer duas vezes. */

/* as três curvas com papel fixo, que este arquivo repetia à mão em quatro
   lugares. O overshoot da pastilha do tema continua fora: o valor dele é ser
   o único do site. */
:root {
  --e-casa:  cubic-bezier(.2,.7,.3,1);
  --e-rev:   cubic-bezier(.16,1,.3,1);
  --e-traco: cubic-bezier(.4,0,.2,1);
}
@keyframes mod-entra { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.trilha { margin-top: 52px; }
.tri__linha { position: relative; display: flex; align-items: stretch; }

/* o fio, atrás de tudo, exatamente no eixo dos nós.
   `--hl`, não `--bd`: o fio é o objeto principal da seção e precisa ser visto.
   Em `--bd` sobre o fundo escuro ele existe e some, que é o pior dos dois
   mundos — parece defeito de renderização, não desenho. */
.tri__fio {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none; display: grid; grid-template-rows: 1fr 12px 1fr auto;
}
.tri__fio i {
  grid-row: 2; align-self: center; height: 1px; background: var(--hl);
  transform-origin: left;
}

.tri__est {
  flex: 1 1 0; min-width: 0;
  display: grid; grid-template-rows: 1fr 12px 1fr auto;
  justify-items: center; text-align: center;
  padding: 0 8px;
}
.tri__no {
  position: relative;
  grid-row: 2; align-self: center;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ac); box-shadow: 0 0 0 4px var(--bg);
}
/* a primeira estação não é módulo nenhum: o pedido entra por integração.
   Nó OCO, porque a diferença é a informação. */
.tri__no--oco { background: var(--bg); box-shadow: 0 0 0 1px var(--hl), 0 0 0 4px var(--bg); }
/* O texto é MAIS LARGO que a fatia da estação, e transborda de propósito.
   Só os NÓS precisam estar igualmente espaçados; o texto vive nas linhas 1 e
   3, e os chips na linha 2, então um não alcança o outro. E como as estações
   alternam, vizinha nenhuma divide linha com vizinha. */
.tri__txt { display: flex; flex-direction: column; gap: 5px; width: 176px; }
.tri__est--cima .tri__txt { grid-row: 1; align-self: end; padding-bottom: 14px; }
.tri__est--baixo .tri__txt { grid-row: 3; align-self: start; padding-top: 14px; }
.tri__h { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ac-tx); font-variant-numeric: tabular-nums; }
.tri__o { font-size: 15.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.tri__m { font-size: 11px; line-height: 1.35; color: var(--ft); }
.tri__haste { grid-row: 4; width: 1px; height: 30px; background: linear-gradient(180deg, var(--bd), transparent); }

.tri__passa {
  flex: 0 0 auto; display: grid; grid-template-rows: 1fr 12px 1fr auto;
  align-items: center; padding: 0 2px;
}
/* `position: relative` NÃO é enfeite: o fio é `position: absolute`, e elemento
   posicionado pinta ACIMA de elemento em fluxo normal, por mais fundo que este
   tenha. O resultado era o fio riscando o texto dos chips de ponta a ponta,
   com cara de tachado. Posicionando o chip, ele entra na mesma camada do fio e
   ganha por vir depois no documento. Vale para o nó pelo mesmo motivo. */
.tri__passa span {
  position: relative;
  grid-row: 2; align-self: center;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em;
  color: var(--mu); background: var(--bg); border: 1px solid var(--bds);
  border-radius: 999px; padding: 4px 9px; white-space: nowrap;
  transition: color .25s, border-color .25s;
}
.section--tint .tri__passa span { background: var(--sf); }

/* o Copiloto NÃO fica no fio: ele lê as seis e não produz nenhuma, e é por
   isso que não é um passo. O desenho explica isso sem uma linha de texto. */
.tri__base { display: grid; justify-items: center; }
.tri__base::before {
  content: ""; width: 100%; height: 1px;
  background: repeating-linear-gradient(90deg, var(--bd) 0 5px, transparent 5px 10px);
}
.tri__copiloto {
  margin-top: -1px; display: block; text-align: center; max-width: 60ch;
  border: 1px solid var(--bd); background: var(--sf); border-radius: 11px;
  padding: 15px 24px; transform: translateY(22px);
}
.section--tint .tri__copiloto { background: var(--bg); }
.tri__copiloto b { display: block; font-size: 15px; font-weight: 600; }
.tri__copiloto span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--mu); }

/* miudinho de procedência. Na home ele NÃO fica sob a corrente como na página
   de Módulos: lá a corrente é a penúltima seção e a linha fecha a página; aqui
   ela é a sexta de dezessete, e nota de rodapé no meio da página é nota no
   lugar errado. Fica encostada no comprovante, que é o artefato que carrega o
   rótulo EXEMPLO e onde o leitor de fato pergunta "isso é real?". */
.tri__miudo {
  margin: 30px 0 0; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; line-height: 1.6; color: var(--ft);
}
/* sobre índigo, --ft não tem contraste: é a mesma armadilha do --ac e do --ok */
#prova .tri__miudo { color: rgba(239,238,246,.55); }

/* --- o fio se desenha e as estações acendem quando ele passa --- */
@keyframes tri-fio   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tri-fio-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rv .tri__fio i { transform: scaleX(0); }
.rv-in .tri__fio i { animation: tri-fio 1.1s var(--e-traco) both; }
.rv .tri__est, .rv .tri__passa span, .rv .tri__base { opacity: 0; }
/* 1100 / 6 ≈ 183; 170 faz a estação pousar um instante ANTES de o fio chegar,
   que é o que parece certo — o fio alcança algo que já está lá. */
.rv-in .tri__est { animation: mod-entra .46s var(--e-casa) both; animation-delay: calc(var(--i, 0) * 170ms); }
.rv-in .tri__passa span { animation: mod-entra .46s var(--e-casa) both; animation-delay: calc(var(--i, 0) * 170ms + 90ms); }
.rv-in .tri__base { animation: mod-entra .5s var(--e-casa) 1.15s both; }
@media (hover: hover) {
  .tri__est { transition: transform .3s var(--e-casa); }
  .tri__est:hover { transform: translateY(-3px); }
  /* passar o ponteiro numa estação acende o que ELA entrega ao próximo */
  .tri__est:hover + .tri__passa span { color: var(--tx); border-color: var(--ac); }
}

/* --- o fio gira para vertical. Uma corrente vertical continua sendo uma
   corrente; o que não funcionava era a grade de duas colunas. --- */
@media (max-width: 900px) {
  .tri__linha { flex-direction: column; align-items: stretch; }
  .tri__fio { display: block; }
  /* `height: 100%` explícito, não `top:0; bottom:0` com altura automática: a
     regra base deixa `align-self: center` no elemento e o par offset+auto
     resolvia para zero — o fio existia, com 1px de largura e 0 de altura. */
  .tri__fio i { position: absolute; left: 4px; top: 0; width: 1px; height: 100%; transform-origin: top; align-self: stretch; }
  .rv .tri__fio i { transform: scaleY(0); }
  .rv-in .tri__fio i { animation-name: tri-fio-v; }
  .tri__est, .tri__passa { display: block; padding: 0 0 0 26px; position: relative; }
  .tri__est { padding-top: 4px; padding-bottom: 18px; text-align: left; justify-items: start; }
  .tri__est .tri__txt { max-width: none; padding: 0; }
  .tri__no { position: absolute; left: 0; top: 8px; }
  .tri__haste { display: none; }
  .tri__passa { padding-bottom: 18px; }
  .tri__passa span { display: inline-block; }
  .tri__base::before { display: none; }
  .tri__copiloto { transform: none; margin-top: 10px; margin-left: 26px; }
  .tri__base { justify-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .rv .tri__fio i { transform: scaleX(1); }
  .rv .tri__est, .rv .tri__passa span, .rv .tri__base { opacity: 1; }
  .rv-in .trilha *, .rv-in .trilha *::before { animation: none !important; }
  .tri__est { transition: none; }
}


/* ============================================================
   O BRILHO SAI DO CTA E VAI PARA O RODAPÉ

   Sobre o filme de fundo o brilho só sujava a imagem, e a seção
   já tem cor própria. No rodapé ele fecha a página com a mesma
   cor que abre na hero.
   ============================================================ */

.cta--video .cta__glow { display: none; }

.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: ""; position: absolute; left: 50%; bottom: -300px;
  width: min(1300px, 150%); height: 700px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(99,102,241,.25), transparent);
  pointer-events: none; z-index: 0;
}
:root[data-theme="light"] .site-footer::before {
  background: radial-gradient(closest-side, rgba(99,102,241,.18), transparent);
}
.site-footer > * { position: relative; z-index: 1; }


/* ============================================================
   MENU DO CABEÇALHO — a mecânica da motiontools

   Medido no site deles (dividindo pelo zoom próprio de 1,33):
     gatilho    hover, não clique
     abertura   opacity 0→1 + translateY 8px→0, ~300ms ease-out
     chevron    gira 180°
     item       ícone 28 + vão 12 + rótulo 16
     coluna     fio vertical de 1px separando
     cabeçalho  pastilha arredondada
     três formas: painel largo, médio e estreito

   O que muda aqui é só a pele: superfície --card em vez de branco,
   raio 14px em vez de 8 (é o nosso raio de cartão), e a nossa
   sombra de três camadas em vez da de uma só.
   ============================================================ */

.site-nav { position: relative; }
.navdrop { position: relative; }

.navdrop__gatilho {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 14.5px; color: var(--mu);
  transition: color .2s;
}
.navdrop__gatilho:focus-visible { outline: 2px solid var(--ac); outline-offset: 4px; border-radius: 4px; }
.navdrop__seta { flex: none; transition: transform .28s cubic-bezier(.2,.7,.3,1); }
@media (hover: hover) { .navdrop:hover .navdrop__gatilho { color: var(--ac); } }
.navdrop.is-open .navdrop__gatilho { color: var(--ac); }
.navdrop.is-open .navdrop__seta { transform: rotate(180deg); }

/* ---------- o painel ---------- */
.navdrop__painel {
  position: absolute; top: calc(100% + 16px); left: 50%;
  width: var(--larg, 480px); max-width: calc(100vw - 32px);
  /* nasce 8px abaixo e apagado, igual à referência */
  transform: translateX(-50%) translateY(8px);
  opacity: 0; visibility: hidden;
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 18px;
  box-shadow:
    0 2px 3px rgba(0,0,0,.16),
    0 12px 26px -8px rgba(0,0,0,.3),
    0 34px 64px -18px rgba(0,0,0,.5);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1), visibility 0s .3s;
  z-index: 40;
}
:root[data-theme="light"] .navdrop__painel {
  box-shadow:
    0 2px 3px rgba(20,19,23,.05),
    0 12px 26px -8px rgba(20,19,23,.1),
    0 34px 64px -18px rgba(20,19,23,.18);
}
.navdrop.is-open .navdrop__painel {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1), visibility 0s;
}

/* a ponte invisível: sem ela o painel fecha ao atravessar os 16px
   de folga entre o gatilho e a borda de cima */
.navdrop__painel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
}

.navdrop__cols { display: flex; }
.navdrop__col { flex: 1; min-width: 0; padding: 0 14px; }
.navdrop__col + .navdrop__col { border-left: 1px solid var(--bd); }
.navdrop__col:first-child { padding-left: 4px; }
.navdrop__col:last-child { padding-right: 4px; }

.navdrop__chip {
  display: inline-block; margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; line-height: normal;
  color: var(--mu); background: var(--bds);
  padding: 5px 9px; border-radius: 7px;
}
:root[data-theme="light"] .navdrop__chip { background: var(--bg); }

.navdrop__item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px; margin: 0 -8px; border-radius: 9px;
  font-size: 14.5px; letter-spacing: -.008em; color: var(--tx);
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.navdrop__ico {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bds); color: var(--mu);
  transition: background .18s, color .18s;
}
:root[data-theme="light"] .navdrop__ico { background: var(--bg); }
.navdrop__ico svg { width: 17px; height: 17px; }

@media (hover: hover) {
  .navdrop__item:hover { background: var(--sf2); color: var(--tx); }
  .navdrop__item:hover .navdrop__ico { background: var(--ac); color: #FAF8F5; }
}
.navdrop__item:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; }

/* ---------- na gaveta do celular vira lista aberta ----------
   Sem sanfona dentro de sanfona: o gatilho vira só um rótulo e
   os links descem embaixo dele. */
@media (max-width: 900px) {
  .navdrop { position: static; }
  .navdrop__gatilho {
    width: 100%; justify-content: flex-start;
    padding: 16px 2px 8px; font-size: 11px;
    font-family: 'JetBrains Mono', monospace; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mu); cursor: default;
    border-top: 1px solid var(--bd);
  }
  .navdrop:first-child .navdrop__gatilho { border-top: 0; }
  .navdrop__seta { display: none; }
  .navdrop__painel {
    position: static; width: auto; max-width: none;
    opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; border-radius: 0; padding: 0;
    box-shadow: none; transition: none;
  }
  .navdrop__painel::before { display: none; }
  .navdrop__cols { display: block; }
  .navdrop__col { padding: 0; }
  .navdrop__col + .navdrop__col { border-left: 0; margin-top: 10px; }
  .navdrop__chip { display: none; }
  .navdrop__item { font-size: 15.5px; padding: 9px 2px; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .navdrop__painel { transition: opacity .15s ease, visibility 0s; transform: translateX(-50%); }
  .navdrop.is-open .navdrop__painel { transform: translateX(-50%); }
  .navdrop__seta { transition: none; }
}


/* ============================================================
   [iE] SETORES E CASOS — a arte em canvas saiu.

   As duas seções tinham a MESMA forma (eyebrow, h2, link, grade 2x2,
   faixa de 170-180px com um desenho abstrato em cima do corpo), e a
   faixa desenhava o substantivo do setor em vez do produto. Duas
   correções, uma em cada seção, para que deixem de rimar:

   Setores  — perde a mídia e vira quatro colunas densas. É a pausa
              silenciosa entre dois blocos visuais pesados.
   Casos    — mantém a mídia, mas ela passa a ser o artefato real da
              operação, montado com .fcard/.fchip, o mesmo vocabulário
              dos fragmentos de Funcionalidades.
   ============================================================ */

/* --- Setores: mesmo tratamento de Casos de uso -----------------
   [iE] Setores nasceu diferente de Casos de propósito: cenário dessaturado
   atrás do texto, com véu indigo, para não disputar atenção com a frase e
   para o indigo seguir sendo o único acento da página.

   O cliente comparou os dois lado a lado e escolheu igualar. É uma decisão
   sobre o que a seção É, não um ajuste de hover: aqui a foto deixa de ser
   pano de fundo e vira o assunto do card, como em Casos.

   O que veio junto, e é o ganho: o hover passou a mover UMA coisa. Antes
   moviam quatro — saturação de .34 a .92, um scale(1.015) desamplia, o véu
   caindo para .45, e o card subindo 3px. O scale deslocava ~3px de cada lado
   na horizontal exatamente enquanto o card subia 3px na vertical: dois
   movimentos do mesmo tamanho em eixos diferentes, embaralhando um ao outro.

   Os valores abaixo são os mesmos de `.case-card__media img`. Se um dia
   mudar lá, muda aqui — não há folha comum entre os dois. */
.sector-card__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--sf);
}
/* A foto entra LIMPA: sem brightness, sem saturate, sem contrast. O escurecimento
   que existia aqui (e o degradê que existia no styles.css) foi retirado a pedido do
   cliente — a imagem estava chegando abafada. O texto se defende com text-shadow. */
.sector-card__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
.sector-card:hover .sector-card__media img { transform: scale(1.03); }

.sector-card__no { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; color: #FFF; text-shadow: 0 1px 8px rgba(0,0,0,.7); }

@media (prefers-reduced-motion: reduce) {
  .sector-card__media img { transition: none; }
  .sector-card:hover .sector-card__media img { transform: none; }
}
/* ≤1040px: três colunas viram tira estreita demais para foto com texto dentro.
   Coluna única, e cada cartão passa a ter a própria proporção — aqui pode, porque
   sozinho na linha ele define a altura em vez de herdá-la. */
@media (max-width: 1040px) {
  .sector-grid { grid-template-columns: 1fr; }
  .sector-card, .sector-card--largo { grid-column: auto; aspect-ratio: 2 / 1; }
}
/* No telefone o cartão fica em RETRATO, e não é gosto: medido a 390px, o rótulo
   (título + linha + quatro chips em duas fileiras) ocupa 189px. Numa faixa 4/3 de
   250px de altura sobram 61px de foto — a imagem vira tarja. Em 4/5 sobram 227px,
   e a foto continua sendo o assunto do cartão. */
@media (max-width: 560px) {
  /* 1/1 e não 4/5: em retrato a caixa fica em 0,8 contra 1,16 do arquivo e o
     `cover` corta 31% da foto. No quadrado o corte cai para 14% e ainda sobram
     144px de imagem acima do rótulo de 189px. */
  .sector-card, .sector-card--largo { aspect-ratio: 1 / 1; }
  .sector-card__body { padding: 18px 18px 18px; }
  .sector-card__body h3 { font-size: 19px; }
}

/* --- Casos: foto do produto em uso ----------------------------
   Setores e Casos voltaram a ter foto, então a diferença passa a ser o
   TRATAMENTO, não a presença da imagem:

     Setores  faixa 3:1, cor puxada para baixo, véu indigo — cenário.
     Casos    faixa 16:9, cor quase cheia — é prova, precisa ser lida.

   O 16:9 é o enquadramento nativo destas fotos. Cortar mais alto ganhava
   compacidade e perdia pedaço da interface montada na cena, que é o assunto.

   Por isso aqui não entra o véu nem a dissolvida na base: só um degrau de
   brilho no escuro, para a foto não estourar contra o #0B0A0C. */
.case-card { display: flex; flex-direction: column; }
.case-card__body { flex: 1; }
.case-card__media {
  position: relative; height: auto; aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--bd); background: var(--sf);
}
.case-card__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.95) contrast(1.02) brightness(.9);
  transition: filter .5s ease;
}
[data-theme="light"] .case-card__media img { filter: saturate(.95) contrast(1.01) brightness(1); }
.case-card:hover .case-card__media img { filter: none; }

/* fundo de grade para quando um card voltar a usar fragmento em vez de foto */
.case-card__media--art {
  display: grid; align-content: center; justify-items: center; padding: 26px 28px;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 22px 100%,
    var(--sf);
}
.case-card__media .frag { width: 100%; max-width: 430px; }
.case-card__media .fchip { white-space: nowrap; }
.case-card__media .fcard { padding: 11px 13px; }

@media (prefers-reduced-motion: reduce) { .case-card__media img { transition: none; } }

/* comprovante selado */
.cprova__sig { height: 30px; margin: 9px 0 8px; border-bottom: 1px solid var(--bd); }
.cprova__sig svg { display: block; width: 100%; height: 100%; }
.cprova__sig path { fill: none; stroke: var(--tx); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; vector-effect: non-scaling-stroke; }
.cprova__ft { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .05em; color: var(--mu); }

/* fila que espera o sinal */
.cfila__hd { margin-bottom: 11px; }
.cfila__row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--mu); }
.cfila__row i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--ac); }
.cfila__row b { margin-left: auto; font-weight: 400; color: var(--ft); }
.cfila__ft { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--bds); font-size: 11px; color: var(--mu); }

/* XML que vira entrega */
.cxml { display: flex; align-items: center; gap: 12px; }
.cxml__f {
  flex: none; width: 32px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--bds); border-radius: 3px; background: var(--bg);
  font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .06em; color: var(--ac2);
}
.cxml__t { flex: 1; min-width: 0; }
.cxml__t b { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 400; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxml__t span { display: block; margin-top: 5px; font-size: 11.5px; color: var(--mu); }

/* ocorrência que reagenda */
.creent__link { display: block; width: 1px; height: 12px; margin: 0 auto; background: var(--bds); }


/* ============================================================
   O FILME DA CORRENTE, NO HERÓI
   ------------------------------------------------------------
   O filme é claro e o herói é escuro. Isso não é conflito: a página
   já usa papel branco sobre fundo escuro na folha do relatório
   mensal. Aqui é a mesma folha, acesa.

   Por isso a moldura NÃO troca de cor por tema — o conteúdo dela é
   branco nos dois. Só a sombra troca, e ela vem da mesma lista de
   três camadas dos outros cartões (contato + média + ambiente).
   ============================================================ */

.hvid {
  position: relative;
  align-self: center;
  border: 1px solid var(--bd);
  border-radius: 16px;
  overflow: hidden;
  background: #F4F5F9;            /* o mesmo cinza do filme, para não piscar branco antes da capa */
  line-height: 0;                 /* mata o espaço fantasma abaixo do <img> inline */
}
.hvid__capa { display: block; width: 100%; height: auto; }

/* o filme cobre a capa e some por opacidade — nunca por display, senão
   o navegador descarta o buffer e a volta ao repouso pisca */
.hvid__filme {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s var(--e-casa);
}
.hvid.tocando .hvid__filme { opacity: 1; }

/* A pastilha é escura sobre claro nos DOIS temas, porque ela mora em
   cima do filme, que é sempre claro. Trocar por tema deixaria ela
   invisível no tema claro. */
.hvid__play {
  /* [iE] Em cima à direita, não embaixo à esquerda: embaixo ela cobria o
     início da régua de horários do pôster — "07:55 pedido entra", que é
     onde a corrente começa. Ao lado do título o quadro está vago. */
  position: absolute; right: 15px; top: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px;
  font-family: inherit; font-size: 12.5px; font-weight: 500; letter-spacing: -.005em;
  color: #F7F7FA;
  background: rgba(20,19,23,.86);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s var(--e-casa), background .25s, opacity .3s, visibility .3s;
}
.hvid__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ac); color: #fff;
}
.hvid__ico svg { margin-left: 1px; }
@media (hover: hover) {
  .hvid__play:hover { background: rgba(20,19,23,.94); transform: translateY(-2px); }
}
.hvid__play:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

/* [iE] Enquanto toca, a pastilha recua — mas NÃO some de vez, senão não
   sobra jeito de pausar um filme que roda para sempre. Ela volta inteira
   quando o ponteiro entra na moldura, e continua alcançável pelo Tab.
   Em telas sem ponteiro ela fica visível o tempo todo, pelo mesmo motivo. */
.hvid.tocando .hvid__play { opacity: 0; }
@media (hover: hover) {
  .hvid.tocando:hover .hvid__play,
  .hvid.tocando .hvid__play:focus-visible { opacity: 1; }
}
@media (hover: none) {
  .hvid.tocando .hvid__play { opacity: .82; }
}

/* o ícone troca de seta para pausa assim que o filme acende */
.hvid__pausa { display: none; }
.hvid.tocando:not(.pausado) .hvid__seta { display: none; }
.hvid.tocando:not(.pausado) .hvid__pausa { display: block; }
/* tocando, o rótulo comprido sai: "47s" basta ao lado do símbolo de pausa */
.hvid.tocando:not(.pausado) .hvid__longo { display: none; }

@media (max-width: 900px) {
  .hvid__play { right: 11px; top: 11px; padding: 7px 12px 7px 9px; font-size: 12px; }
}
/* [iE] A 390px o card tem 338px de largura e a pastilha inteira ocupava quase
   metade dele. Aqui sobra só a duração. O nome acessível não encolhe junto
   porque vem do aria-label do botão, não deste texto. */
@media (max-width: 620px) {
  .hvid__longo { display: none; }
  .hvid__play { padding: 7px 11px 7px 8px; }
}

/* Sem movimento: a capa fica, e o filme só roda se a pessoa pedir.
   O estado final é escrito nominalmente — não basta desligar a
   transição, porque o repouso aqui já é o estado correto. */
@media (prefers-reduced-motion: reduce) {
  .hvid__filme { transition: none; }
  .hvid.tocando .hvid__filme { opacity: 1; }
}


/* ============================================================
   [iE] TEMA CLARO PUXADO PARA O ROXO — 6/ago/2026
   O claro era creme (#F4F1EC, croma no amarelo). Passou a lavanda,
   mantendo o L* de cada token: nenhum contraste se moveu, entao a
   auditoria de texto pequeno continua valendo.
   ============================================================ */

/* A barra de modulos usa a superficie de card por padrao. No claro ela
   passa a ser a cor da pagina, a pedido: a pilula fica so pela borda. */
:root[data-theme="light"] .modbar { background: var(--bg); }

/* O halo do heroi nascia centralizado no meio da tela. Sobre um fundo
   que agora tambem e indigo, ele lia como mancha; passa para tras do
   card, como derramamento de luz da peca. */
:root[data-theme="light"] .hero__glow {
  left: 74%; top: 2%; width: 900px; height: 720px;
  background: radial-gradient(closest-side,
    rgba(99,102,241,.28), rgba(99,102,241,.10) 48%, rgba(99,102,241,0) 74%);
}


/* ============================================================
   [iE] A HOME ABRE EM ÍNDIGO — 6/ago/2026
   O herói recebe a MESMA superfície e o MESMO degradê da faixa de
   Depoimentos (.depo[data-fundo="indigo"]), para os dois lerem como a
   mesma peça. Os valores são cópia de lá, não recálculo: se aquele
   índigo mudar, este tem de mudar junto.
   Só a home: o ientrega.css não é carregado por modulos.html nem por
   sobre.html, que têm .hero próprio e seguem escuras.
   ============================================================ */
:root:not([data-theme="light"]) .hero {
  background: #16153A;
  color: #EFEEF6;
  border-bottom-color: rgba(239,238,246,.1);
}
:root:not([data-theme="light"]) .hero .hero__sub,
:root:not([data-theme="light"]) .hero .hero__note {
  color: rgba(239,238,246,.66);
}
/* A pílula tinha fundo --sf e borda --bd, os dois tokens da PÁGINA.
   Sobre índigo liam como retângulo cinza colado por cima. */
:root:not([data-theme="light"]) .hero .hero__badge {
  background: rgba(255,255,255,.10);
  border-color: rgba(239,238,246,.18);
  color: rgba(239,238,246,.82);
}

/* O .hero__glow nascia diferente do de Depoimentos: radial closest-side
   1400x1000 em top:-30%, contra a ELIPSE 50%x50% 1500x900 em top:-40%
   com corte em 70%. Era essa geometria, e não a cor, que fazia os dois
   nunca parecerem a mesma peça. */
:root:not([data-theme="light"]) .hero__glow {
  left: 50%; top: -40%;
  width: min(1500px, 120%); height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(99,102,241,.34), transparent 70%);
}

:root:not([data-theme="light"]) .site-header {
  background: rgba(22,21,58,.85);
  border-bottom-color: rgba(239,238,246,.10);
}
:root:not([data-theme="light"]) .site-header .site-nav a { color: rgba(239,238,246,.78); }
:root:not([data-theme="light"]) .site-header .site-nav a:hover { color: #FFF; }

/* ⚠ display:flow-root NÃO é enfeite. O .modbar tem
   margin-top: clamp(44px,5vw,66px) e o #modulos não tem padding nem
   borda no topo, então essa margem ESCAPA da seção (margin collapse) —
   66px x 1,3 do zoom = 86px de fundo da página aparecendo entre duas
   seções coloridas, que lia como uma faixa preta. flow-root faz a margem
   viver dentro. Tirar isto traz a faixa preta de volta. */
:root:not([data-theme="light"]) #modulos {
  background: #1C1A2E;
  display: flow-root;
  border-bottom: 1px solid rgba(239,238,246,.07);
}

/* Os dois usam background: var(--sf) (#24242F). Sobre o índigo do herói
   o problema não é brilho — o --sf até é mais claro que #16153A — é
   CROMA: cinza quase neutro sobre índigo saturado lê como sujeira.
   #252236 tem o MESMO L* do --sf, só com croma na direção do --ac. */
:root:not([data-theme="light"]) .hero .btn--ghost,
:root:not([data-theme="light"]) .hero .rating-pill {
  background: #252236;
  border-color: #353247;
}