/* ═══════════════════════════════════════════════════════════════
   DEV FACTORY · pages.css — subpáginas de rolagem (não deck)
   Identidade monocromática: preto/branco + cinzas neutros; os degradês
   (--grad-rainbow, --grad-brand) só como acento (títulos .grad, filetes,
   numeração, selos, molduras isométricas, progresso).
   Tokens e componentes base vêm de /css/styles.css — aqui só o escopo .page.

   POLARIDADE (contrato com pages.js)
   Cada página alterna seções preto/branco: .section.alt é sempre a
   polaridade inversa do tema (escuro → .alt branca; claro → .alt preta).
   A inversão redefine os tokens base no escopo (--bg --ink --muted --card
   --stroke …), então os componentes de styles.css herdam sem mudança.
   --pg-pol (dark|light) diz a polaridade de qualquer elemento; pages.js
   lê esse valor para marcar #topbar[data-under] e as cortinas.
   Utilitários: .pg-light / .pg-dark forçam uma polaridade em qualquer bloco.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- tokens locais ---------- */
:root{
  /* polaridade escura */
  --pg-d-bg:#000; --pg-d-soft:#0B0B0E; --pg-d-ink:#fff; --pg-d-muted:#9A9AA3;
  --pg-d-card:#111111; --pg-d-stroke:rgba(255,255,255,.14); --pg-d-nav:rgba(0,0,0,.74);
  --pg-d-frame:#111111; --pg-d-grid:rgba(255,255,255,.04);
  /* polaridade clara */
  --pg-l-bg:#fff; --pg-l-soft:#F5F5F7; --pg-l-ink:#0A0A0A; --pg-l-muted:#5A5A64;
  --pg-l-card:#F0F0F2; --pg-l-stroke:#E6E6EA; --pg-l-nav:rgba(255,255,255,.84);
  --pg-l-frame:#F5F5F7; --pg-l-grid:rgba(0,0,0,.05);
  /* arco-íris legível em cada fundo (mesmos stops do tema correspondente em styles.css) */
  --pg-rainbow-d:linear-gradient(90deg,#FD439C 0%,#C450EE 30%,#8B5CF6 50%,#2890DF 75%,#40AFFF 100%);
  --pg-rainbow-l:linear-gradient(90deg,#E0207F 0%,#B030DD 30%,#7A3FE0 50%,#1F6FD0 75%,#0B87C9 100%);
  --pg-grad-v:linear-gradient(180deg,var(--roxo),var(--azul) 70%,var(--ciano));
  --pg-top:64px;            /* altura do #topbar */
  --pg-tilt:5deg;           /* inclinação 3D dos cards no hover */
}
:root,:root[data-theme="dark"]{--pg-pol:dark;--pg-frame:var(--pg-d-frame);--pg-grid:var(--pg-d-grid);--pg-curtain:var(--pg-l-bg);--pg-mark-filter:invert(1) hue-rotate(180deg)}
:root[data-theme="light"]{--pg-pol:light;--pg-frame:var(--pg-l-frame);--pg-grid:var(--pg-l-grid);--pg-curtain:var(--pg-d-bg);--pg-mark-filter:none}

/* polaridade clara (seção .alt no tema escuro, cabeçalho sobre seção clara, utilitário) */
:root:not([data-theme="light"]) .section.alt,
#topbar[data-under="light"],
:root[data-theme="light"] body.menu-open #topbar,
.pg-light{
  --pg-pol:light; --pg-frame:var(--pg-l-frame); --pg-grid:var(--pg-l-grid); --pg-curtain:var(--pg-d-bg); --pg-mark-filter:none;
  --bg:var(--pg-l-bg); --bg-soft:var(--pg-l-soft); --ink:var(--pg-l-ink); --muted:var(--pg-l-muted);
  --card:var(--pg-l-card); --stroke:var(--pg-l-stroke); --nav-bg:var(--pg-l-nav); --link:var(--pg-l-ink);
  --shadow:0 22px 60px -32px rgba(0,0,0,.30); --shadow-lg:0 30px 80px -36px rgba(0,0,0,.38);
  --grad-rainbow:var(--pg-rainbow-l);
  color-scheme:light; color:var(--ink);
}
/* polaridade escura (seção .alt no tema claro, cabeçalho sobre seção escura, rodapé, utilitário) */
:root[data-theme="light"] .section.alt,
#topbar[data-under="dark"],
:root:not([data-theme="light"]) body.menu-open #topbar,
#site-footer,
.pg-dark{
  --pg-pol:dark; --pg-frame:var(--pg-d-frame); --pg-grid:var(--pg-d-grid); --pg-curtain:var(--pg-l-bg); --pg-mark-filter:invert(1) hue-rotate(180deg);
  --bg:var(--pg-d-bg); --bg-soft:var(--pg-d-soft); --ink:var(--pg-d-ink); --muted:var(--pg-d-muted);
  --card:var(--pg-d-card); --stroke:var(--pg-d-stroke); --nav-bg:var(--pg-d-nav); --link:var(--pg-d-ink);
  --shadow:0 22px 60px -30px rgba(0,0,0,.9); --shadow-lg:0 30px 90px -30px rgba(0,0,0,.9);
  --grad-rainbow:var(--pg-rainbow-d);
  color-scheme:dark; color:var(--ink);
}

/* ---------- fundo (monocromo: só a grade fina no topo) ---------- */
body.page{min-height:100svh;background:var(--bg)}
body.page::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--pg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--pg-grid) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,transparent 70%);
          mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,transparent 70%)}
body.page main{position:relative;z-index:2;display:block;counter-reset:pgsec}
html:not(.js) [data-a]{opacity:1;transform:none}
html.no-anim [data-a]{transition:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--ink);color:var(--bg)}
code,.mono{font-family:var(--mono);font-size:.9em}

.wrap{width:min(var(--wrap,1200px),calc(100% - 32px));margin-inline:auto}
.wrap.narrow{width:min(860px,calc(100% - 32px))}

/* ---------- cabeçalho: símbolo + "Dev Factory"; troca de cor conforme a seção sob ele ---------- */
#topbar{color:var(--ink);transition:background-color .18s,border-color .18s,color .18s}
#topbar .brand{gap:10px;color:var(--ink)}
/* df-mark.svg desenha em currentColor = preto dentro de <img>; na polaridade escura inverte
   (invert + hue-rotate 180° devolve o degradê do cursor a um tom próximo do original) */
#topbar .brand img,#topbar .brand .df-sym{width:30px;height:30px;flex:none}
#topbar .brand-text{display:inline;font-weight:800;font-size:18px;letter-spacing:-.025em;white-space:nowrap;line-height:1}
#topbar .brand-text i{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.12em;margin-bottom:-.12em}
#topbar .brand.noimg img{display:none!important}
#topbar nav a{letter-spacing:.12em;font-size:12.5px}
#mobile-menu a.cur:not(.mm-cta){background:var(--grad-rainbow);-webkit-background-clip:text;background-clip:text;color:transparent}
#mobile-menu a.mm-cta{margin-top:18px;font-size:17px;padding:14px 28px;color:var(--bg)}
html.no-anim #topbar{transition:none}

/* ---------- kicker (filete curto em degradê vem de styles.css .kicker::before) ---------- */
body.page .kicker{display:flex;line-height:1.3}
/* seções numeradas: "━━ 01 — KICKER" (contador por .sec-head dentro do <main>) */
.sec-head{counter-increment:pgsec}
body.page .sec-head .kicker::after{content:counter(pgsec,decimal-leading-zero) " —";order:-1;flex:none;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink)}
body.page .sec-head .kicker::before{order:-2}
body.page .sec-head.center .kicker{justify-content:center}

/* ---------- hero ---------- */
.page-hero{position:relative;padding:calc(var(--pg-top) + clamp(52px,10vh,128px)) 0 clamp(48px,8vh,104px)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:clamp(28px,5vh,48px)}
.crumbs a{font-weight:600;transition:color .3s}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}
.page-hero .kicker{margin-bottom:22px}
.page-hero h1{font-size:clamp(44px,6.4vw,104px);font-weight:800;line-height:.95;letter-spacing:-.03em;max-width:15ch;
  text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
.page-hero h1 .grad,.grad{background:var(--grad-rainbow);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.14em;margin-bottom:-.14em}
.page-hero .sub{margin-top:clamp(24px,4vh,40px);max-width:62ch;color:var(--muted)}
.page-hero .sub b{color:var(--ink)}
.page-hero .chips{justify-content:flex-start;margin-top:30px}
.page-hero .btns{justify-content:flex-start;margin-top:34px}
.chip.sm{padding:7px 14px;font-size:13px}

/* ---------- seções: alternância preto/branco + filetes full-bleed ---------- */
.section{position:relative;padding:clamp(64px,12vh,140px) 0}
.section.alt{background:var(--bg);color:var(--ink)}
.section:not(.alt){border-top:1px solid var(--stroke)}
.section.tight{padding-top:clamp(36px,6vh,64px)}
.sec-head{max-width:900px;margin-bottom:clamp(32px,6vh,64px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head .kicker{margin-bottom:20px}
.section h2{font-size:clamp(32px,4vw,60px);font-weight:800;line-height:1;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:break-word}
.sec-head .lead,.lead{margin-top:22px;font-size:clamp(16px,1.5vw,19.5px);line-height:1.65;color:var(--muted);max-width:64ch}
.sec-head.center .lead{margin-inline:auto}
.prose{max-width:70ch}
.prose p,.prose li{font-size:clamp(15px,1.3vw,17.5px);line-height:1.75;color:var(--muted)}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:1em}
.prose strong,.prose b,.lead b,.lead strong{color:var(--ink);font-weight:700}
/* links soltos no texto: tinta + sublinhado em degradê (mesma regra de .prose a em styles.css) */
.inline-link{color:var(--ink);font-weight:600;padding-bottom:1px;
  background:linear-gradient(90deg,var(--roxo),var(--azul)) 0 100%/100% 1px no-repeat;transition:background-size .3s var(--ease)}
.inline-link:hover{background-size:100% 2px}
.prose ul{padding-left:1.2em}
.prose code,.card code,.lead code{overflow-wrap:anywhere;background:var(--bg-soft);border:1px solid var(--stroke);border-radius:4px;padding:1px 6px;color:var(--ink)}

/* cortina: a cor da seção anterior recolhe ao entrar (classe .pg-curtain posta por pages.js; sem JS/?rm=1, não existe) */
.section.pg-curtain::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--pg-curtain);
  transform-origin:50% 0;transition:transform 1.05s var(--ease)}
.section.pg-curtain.is-shown::before{transform:scaleY(0)}

/* títulos: reveal por clip-path + translate (usa o [data-a]/.in existente) */
html.js:not(.no-anim) body.page :is(h1,h2)[data-a]{opacity:1;transform:translateY(.3em);clip-path:inset(100% -.12em -.35em -.12em);
  transition:clip-path 1.15s var(--ease),transform 1.15s var(--ease);transition-delay:calc((var(--i,1) - 1) * .12s)}
html.js:not(.no-anim) body.page :is(h1,h2)[data-a].in{transform:none;clip-path:inset(-.35em -.12em -.35em -.12em)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.split.wide-left{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.mt-s{margin-top:14px}
.split>.sec-head{margin-bottom:0}
.shot-row .ticks{margin-top:22px}

/* ---------- cards (só o escopo das páginas) ---------- */
.cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards .card{overflow:visible}
.card.band::after{content:"";position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:0 0 2px 2px;background:var(--grad-brand)}
.card.band.rb::after{background:var(--grad-rainbow)}
.card .eyebrow{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:12px}
.card .eyebrow b{font-family:var(--mono);font-weight:800;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.card p+p,.card p+ul,.card ul+p{margin-top:10px}
.card .more{display:inline-flex;gap:6px;margin-top:18px;font-size:14px;font-weight:700;color:var(--ink);transition:transform .35s var(--ease)}
a.card{display:block;color:inherit}
a.card:hover .more{transform:translateX(5px)}
.card .svc{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink)}
.card .aws{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.cards.svcs{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:14px}
.cards.svcs .card{padding:18px 20px}
.cards.svcs .card p{font-size:13.5px;margin-top:8px}

/* tilt 3D no hover: perspectiva no contêiner, rotação/translação individuais
   (não disputam o transform do reveal [data-a]) */
body.page :is(.cards,.contact-facts,.owners,.stat-grid,.split){perspective:1400px}
body.page :is(.card,.stat-card){transform-style:flat;
  transition-property:opacity,transform,rotate,translate,box-shadow,background-color,border-color;
  transition-duration:.9s,.9s,.6s,.6s,.5s,.5s,.5s;
  transition-timing-function:var(--ease);
  transition-delay:calc((var(--i,1) - 1) * .12s),calc((var(--i,1) - 1) * .12s),0s,0s,0s,0s,0s}
body.page .card:hover{transform:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html:not(.no-anim) body.page :is(.card,.stat-card):hover{rotate:1 -1 0 var(--pg-tilt);translate:0 -4px 0;box-shadow:var(--shadow)}
}

/* lista com marcadores (marcador de styles.css) */
.ticks{margin-top:14px}
.ticks.cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px 28px}

/* ---------- passos numerados: número mono em degradê sobre filete ---------- */
.steps{list-style:none;counter-reset:st;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.steps>li{counter-increment:st;position:relative;padding:24px 24px 26px;background:var(--card);border:1px solid var(--stroke)}
body.page .steps>li::before{content:counter(st,decimal-leading-zero);display:block;width:auto;height:auto;border-radius:0;box-shadow:none;
  font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--stroke)}
.steps.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps>li h3{font-size:clamp(16px,1.5vw,20px);margin-bottom:8px}
.steps>li p{font-size:clamp(13.5px,1.2vw,15.5px);color:var(--muted);line-height:1.6}

/* ---------- tabela comparativa (base em styles.css) ---------- */
.table-compare.simple tbody th{width:28%}

/* ---------- citação ---------- */
.quote{max-width:980px;margin-inline:auto;text-align:center}
.quote blockquote{margin-inline:auto;font-size:clamp(26px,3.4vw,48px);font-weight:800;line-height:1.08;letter-spacing:-.03em;max-width:24ch;text-wrap:balance}
.quote figcaption{margin-top:20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- faixa de CTA (base em styles.css: filete arco-íris no topo) ---------- */
body.page .cta-band{padding:clamp(28px,4.4vw,60px)}
.cta-band>*{min-width:0}
body.page .cta-band h2{font-size:clamp(30px,4vw,60px);line-height:1;letter-spacing:-.03em}
.cta-band p{margin-top:14px}

/* ---------- screenshots (moldura base em styles.css) ---------- */
.shot .frame{background:var(--pg-frame)}
.shot-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.shot-row.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.shot-row.rev .shot{order:2}
.shot-row+.shot-row{margin-top:clamp(48px,8vh,96px)}

/* ---------- números (contadores: pages.js) ---------- */
.stat-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.stat-card{position:relative;padding:26px 22px 24px;background:var(--card);border:1px solid var(--stroke)}
.stat-card::before{content:"";position:absolute;left:22px;top:-1px;width:36px;height:2px;background:var(--grad-brand)}
.stat-card .n{display:block;font-size:clamp(34px,3.8vw,56px);font-weight:800;line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;background:none;color:var(--ink);-webkit-text-fill-color:currentColor;padding-bottom:.08em;margin-bottom:-.04em}
.stat-card .l{display:block;margin-top:12px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.stat-card.hero{grid-column:span 2}
.stat-card.hero .n{font-size:clamp(44px,5.6vw,84px);background:var(--grad-rainbow);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.12em;margin-bottom:-.08em}
.stat-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat-card.span3{grid-column:span 3}
.stat-grid.stack{grid-template-columns:minmax(0,1fr);gap:12px}
.stat-grid.stack .stat-card{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding:20px 22px}
.stat-grid.stack .stat-card .l{margin-top:0}
.note{position:relative;margin-top:22px;padding-left:16px;font-size:13px;line-height:1.6;color:var(--muted);max-width:90ch}
.note::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--pg-grad-v)}

/* ---------- ilustrações isométricas: layout (o quadro e a legenda estão em /css/iso.css) ---------- */
/* desktop: o quadro acompanha a leitura da legenda (sticky); no mobile empilha */
.iso-block{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(24px,3.4vw,56px);align-items:start}
.iso-block>.iso{max-height:min(70vh,680px);position:sticky;top:calc(var(--pg-top) + 24px)}
.iso-legend li span{display:block;font-size:clamp(13px,1.05vw,15px);line-height:1.55;color:var(--muted);margin-top:4px}
.iso-legend li>b:first-child{padding-top:3px}
.iso-legend li{align-content:start}
@media (max-width:900px){.iso-legend.is-live li:not(.is-active) span{display:none}}
/* sem ilustração: a legenda vira uma grade de cartões numerados, apresentável sozinha */
.iso-block.iso-empty,html:not(.js) .iso-block,.iso-block:has(> .iso.is-error){grid-template-columns:minmax(0,1fr)}
.iso-block.iso-empty>.iso,html:not(.js) .iso-block>.iso,.iso-block>.iso.is-error{display:none}
.iso-block.iso-empty .iso-legend,html:not(.js) .iso-block .iso-legend,.iso-block:has(> .iso.is-error) .iso-legend{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;border-top:0}
.iso-block.iso-empty .iso-legend li,html:not(.js) .iso-block .iso-legend li,.iso-block:has(> .iso.is-error) .iso-legend li{
  cursor:default;padding:16px 18px;border:1px solid var(--stroke);background:var(--card)}
.iso-block.iso-empty .iso-legend li span{display:block!important}
.iso-block.iso-empty .iso-legend li::before{background:var(--grad-brand);color:#fff;border-color:transparent}
.iso-block.iso-empty .iso-legend li::after{display:none}

/* superfícies das cenas seguem a polaridade da seção (valores de /css/iso.css) */
:root:not([data-theme="light"]) .section.alt .iso,.pg-light .iso{
  --iso-floor-1:#F8F4FF; --iso-floor-2:#EAF3FE; --iso-grid:#E2D8F6;
  --iso-edge-l:#D9CCF6;  --iso-edge-r:#C2B1EF;
  --iso-ink-1:#7A3FD0;   --iso-ink-2:#8A7FB0;   --iso-ink-3:#2B3086;
  --iso-leader:#2B3086;  --iso-badge-ring:#fff;
  --iso-shadow:rgba(43,48,134,.18); --iso-dim:.32}
:root[data-theme="light"] .section.alt .iso,.pg-dark .iso{
  --iso-floor-1:#1E2552; --iso-floor-2:#141A3C; --iso-grid:#2B3468;
  --iso-edge-l:#2E3577;  --iso-edge-r:#232966;
  --iso-ink-1:#D3A6F7;   --iso-ink-2:#9AA3D6;   --iso-ink-3:#C9CEF5;
  --iso-leader:#8E97D6;  --iso-badge-ring:#0B1027;
  --iso-shadow:rgba(0,0,0,.45); --iso-dim:.46}

/* ---------- diagrama de camadas ---------- */
.layers{display:grid;gap:10px}
.layer{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:18px;align-items:center;padding:16px 20px;
  border:1px solid var(--stroke);background:var(--card)}
.layer .lname{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.layer .lname b{display:block;margin-top:4px;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}
.layer .chips{justify-content:flex-start;gap:8px}
.layer .chip{padding:6px 12px;font-size:13px}
.layer.df{background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad-brand) border-box;border:1px solid transparent}
.layer-arrow{text-align:center;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}
.layer-arrow code{font-size:12px}

/* ---------- duas colunas: quem faz o quê ---------- */
.owners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.owners .card h3{font-size:clamp(17px,1.6vw,21px)}

/* ---------- contato ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.form-card{position:relative;padding:clamp(22px,3vw,36px);background:var(--bg-soft);border:1px solid var(--stroke)}
.form-card::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--grad-rainbow)}
.form-card .sn-form{width:100%}
.sn-form label.fl{display:grid;gap:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.sn-form label.fl em{font-style:normal;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0}
.sn-form label.fl input,.sn-form label.fl textarea{text-transform:none;letter-spacing:0;font-weight:400}
.contact-grid h1{font-size:clamp(44px,5.4vw,84px)}
.sn-form button{justify-self:start}
.sn-form .fmsg{text-align:left}
.sn-form .consent{font-size:12.5px;color:var(--muted);line-height:1.55}
.sn-form .consent a,.contact-facts a{color:var(--ink);font-weight:700;
  background:linear-gradient(90deg,var(--roxo),var(--azul)) 0 100%/100% 1px no-repeat;padding-bottom:1px;text-decoration:none}
.contact-facts{display:grid;gap:14px;margin-top:32px}
.contact-facts .card{padding:20px 22px}
.contact-facts a{overflow-wrap:anywhere}

/* ---------- texto legal ---------- */
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.legal .toc{position:sticky;top:calc(var(--pg-top) + 24px);display:grid;gap:0;font-size:13.5px;border-top:1px solid var(--stroke)}
.legal .toc a{position:relative;padding:9px 4px 9px 0;border-bottom:1px solid var(--stroke);color:var(--muted);transition:color .3s,padding .35s var(--ease)}
.legal .toc a:hover{color:var(--ink);padding-left:8px}
.legal .prose{max-width:76ch}
.legal .prose h2{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;line-height:1.15;margin:2.2em 0 .7em;scroll-margin-top:calc(var(--pg-top) + 20px)}
.legal .prose h2:first-child{margin-top:0}
.legal .prose h3{font-size:16px;margin:1.4em 0 .5em}
.legal .prose li+li{margin-top:.4em}
.legal table{width:100%;border-collapse:collapse;margin-top:1em;font-size:14px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--stroke);color:var(--muted);line-height:1.55}
.legal th{color:var(--ink);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;border-bottom-color:var(--ink)}
.legal td:first-child{color:var(--ink);font-weight:600}

/* ---------- rodapé: sempre preto, filete degradê no topo, marquee ---------- */
#site-footer{position:relative;display:block;padding:0 0 28px;text-align:left;background:var(--bg);color:var(--muted);border-top:0}
#site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad-rainbow)}
.foot-marquee{overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--stroke);padding:clamp(22px,4vh,40px) 0 clamp(18px,3.4vh,34px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.foot-marquee .mq{display:inline-flex;align-items:center;gap:.5em;padding-right:.5em;font-size:clamp(34px,6vw,92px);font-weight:800;line-height:1;
  letter-spacing:-.035em;text-transform:uppercase;color:var(--ink);animation:pgMarquee 48s linear infinite;will-change:transform}
.foot-marquee .mq .o{color:transparent;-webkit-text-stroke:1px var(--ink)}
.foot-marquee .mq i{font-style:normal;font-size:.42em;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes pgMarquee{to{transform:translateX(-50%)}}
html.no-anim .foot-marquee .mq{animation:none}
#site-footer .foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;margin-top:clamp(40px,7vh,72px)}
#site-footer .foot-brand img{height:26px;width:auto;opacity:1}
#site-footer .foot-brand p{margin-top:14px;max-width:34ch;line-height:1.6;font-size:13.5px}
#site-footer .foot-col b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
#site-footer .foot-col a{display:block;padding:4px 0;font-weight:500;font-size:13.5px;transition:color .3s}
#site-footer .foot-col a:hover{color:var(--ink)}
#site-footer .foot-legal{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;margin-top:44px;padding-top:20px;
  border-top:1px solid var(--stroke);font-size:12.5px}
#site-footer .foot-legal a{font-weight:600}
#site-footer .foot-legal a:hover{color:var(--ink)}

/* ---------- cookies (banner simples) ---------- */
#cookiebar{box-shadow:var(--shadow-lg)}
#cookiebar .cb-txt p a{color:var(--ink)}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .cards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  #site-footer .foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  #site-footer .foot-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .stat-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-card.span3{grid-column:span 2}
  .split,.split.wide-left,.iso-block,.iso-block.iso-empty,.shot-row,.shot-row.rev,.contact-grid,.legal{grid-template-columns:minmax(0,1fr)}
  .iso-block>.iso{max-height:none;position:relative;top:auto}
  .shot-row.rev .shot{order:0}
  .legal .toc{position:static;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));column-gap:20px}
  .cta-band .btns{justify-content:flex-start}
  .layer{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media (max-width:720px){
  .cards.c2,.cards.c3,.cards.c4,.owners,.steps.c3{grid-template-columns:minmax(0,1fr)}
  .stat-grid:not(.c4) .stat-card.hero{grid-column:auto}
  .table-compare thead{display:none}
  .table-compare,.table-compare tbody,.table-compare tr,.table-compare th,.table-compare td{display:block;width:100%}
  .table-compare tbody th{width:100%;padding:18px 18px 8px;background:var(--bg-soft);font-size:15px}
  .table-compare tbody.simple th{width:100%}
  .table-compare td{border-bottom:none;padding:8px 18px}
  .table-compare tr{border-bottom:1px solid var(--stroke)}
  .table-compare tr td:last-child{padding-bottom:18px}
  .table-compare td::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);margin-bottom:4px}
  .table-compare td.df{margin:6px 0;box-shadow:inset 2px 0 0 0 var(--roxo)}
  #site-footer .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-hero .btns{flex-direction:column;align-items:stretch}
  .page-hero .btns .btn{justify-content:center}
  .section{padding:clamp(56px,9vh,96px) 0}
}
@media (max-width:480px){
  .page-hero h1,.contact-grid h1{font-size:clamp(38px,11.4vw,46px);line-height:.98}
  .section h2{font-size:clamp(28px,8.2vw,36px)}
  .cta-band h2{font-size:clamp(28px,8.2vw,36px)}
  .btns .btn{max-width:none}
  .cta-band .btns{width:100%}
  body.page .sec-head .kicker{gap:10px}
  body.page .kicker::before{width:28px}
}
@media (prefers-reduced-motion:reduce){
  .card,.chip,.stat-card{transition:none}
  .foot-marquee .mq{animation:none}
  .section.pg-curtain::before{display:none}
  #topbar{transition:none}
}

/* ?rm=1 e reduced-motion: cursor do símbolo parado no cabeçalho */
html.no-anim .df-sym .u,html.no-anim #topbar .df-sym .u{animation:none!important}
@media (prefers-reduced-motion:reduce){#topbar .df-sym .u{animation:none!important}}