/* =================================================================
   CHEDE TECNOLOGIA — site 2.0
   -----------------------------------------------------------------
   Paleta de significado fixo, como num painel de monitoramento:
     verde  (--signal)  = liberado, online, protegido
     vermelho (--threat) = ataque, bloqueio, falha encontrada
     gelo   (--traffic) = trafego ainda nao inspecionado
   O fundo escuro (--night) e o da sala de servidores; o claro
   (--paper) e o das secoes de leitura. Equipamento e sempre escuro,
   mesmo quando aparece sobre o claro.
   ================================================================= */

@font-face {
    font-family: "Chakra Petch";
    src: url("../fonts/chakra-petch-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Chakra Petch";
    src: url("../fonts/chakra-petch-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Chakra Petch";
    src: url("../fonts/chakra-petch-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Atkinson Hyperlegible Next e variavel: um arquivo cobre 200 a 800 */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../fonts/atkinson-next-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --night:    #0b1d21;
    --night-2:  #10282d;
    --night-3:  #17363c;
    --night-4:  #071417;
    --line:     #1f4047;
    --line-2:   #2c5961;
    --mist:     #93aeb0;
    --frost:    #e6f1ef;

    --paper:    #edf2ef;
    --paper-2:  #dde7e2;
    --ink:      #0b1d21;
    --ink-2:    #3d5559;

    --signal:     #6dc72a;
    --signal-hi:  #8be04a;
    --signal-ink: #2b7a12;
    --threat:     #ff5a47;
    --threat-deep:#e5322b;
    --traffic:    #cfefff;
    /* IA: o azul-gelo do dado bruto, em tom mais forte */
    --ia:         #3fc8f2;
    --ia-hi:      #8fe0ff;
    --ia-ink:     #0b6a8b;

    --f-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
    --f-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
    --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* canto chanfrado — a mesma forma do selo do logo */
    --cut: 10px;

    --wrap: 1280px;
    /* margem lateral que cresce com a tela: 20px no celular, ~50px num
       notebook de 1280, ate 64px; acima disso o conteudo para em 1280px */
    --gutter: clamp(20px, 4.2vw, 64px);
}

/* ---------- base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    /* declarado em cada elemento para usar o --cut dele mesmo */
    --chanfro: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* toque no celular: realce discreto na cor da marca no lugar do cinza padrao */
a, button, .ia-caso, .t-zone { -webkit-tap-highlight-color: rgba(109, 199, 42, .18); }

/* telefone sempre na fonte de titulo (o zero cortado da fonte de texto
   fica estranho em numero de telefone) e sem quebrar no meio */
a[href^="tel:"] { font-family: var(--f-display); white-space: nowrap; }

/* numeros no meio do texto: a fonte de texto so tem o zero cortado (Ø),
   entao eles usam a fonte de titulo, que tem o zero normal */
.num { font-family: var(--f-display); font-weight: 500; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--f-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--night);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html.menu-aberto { overflow: hidden; }

/* Ao clicar num item do menu, a secao rola ate o titulo dela, nao ate a borda
   de cima: o espaco interno grande das secoes deixava o titulo longe da barra. */
.sobre[id], .ia[id], .pentest[id], .clientes[id], .suporte[id] {
    scroll-margin-top: calc(56px - clamp(80px, 10vw, 136px));
}

img { max-width: 100%; height: auto; -webkit-user-drag: none; }

/* clicar e arrastar o logo nao deve "pegar" a imagem nem o link */
.nav-logo, .zap-logo, .rodape-marca picture {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
a { color: inherit; }
p { margin: 0 0 1em; max-width: 62ch; text-wrap: pretty; }

::selection { background: rgba(109, 199, 42, .85); color: var(--night); }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}
.paper :focus-visible { outline-color: var(--signal-ink); }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.skip {
    position: absolute;
    left: 12px; top: -80px;
    z-index: 100;
    background: var(--signal);
    color: var(--night);
    font-family: var(--f-display);
    font-weight: 600;
    padding: 10px 16px;
    text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
    width: min(var(--wrap), 100% - var(--gutter) * 2);
    margin-inline: auto;
}

.paper {
    background: var(--paper);
    color: var(--ink);
}

/* ---------- tipografia ---------- */
.h2 {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.005em;
    margin: 0 0 22px;
    text-wrap: balance;
}

.h3 {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.625rem;
    line-height: 1.15;
    margin: 0 0 12px;
}

.lead {
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 52ch;
}

.big {
    font-size: 1.375rem;
    line-height: 1.5;
    max-width: 40ch;
}

.sec-head { margin-bottom: 56px; max-width: 760px; }
.sec-head--center { text-align: center; margin-inline: auto; }
.sec-head--center .lead { margin-inline: auto; }

/* ---------- botoes ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border: 0;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    clip-path: var(--chanfro);
    overflow: hidden;
    transition: background-color .2s ease, color .2s ease;
}

/* brilho que atravessa o botao quando a pessoa passa o mouse */
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .42) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .65s ease;
    pointer-events: none;
}
@media (hover: hover) { .btn:hover::after { transform: translateX(120%); } }

/* o clip-path corta o outline, entao o foco vira fundo branco com anel interno */
.btn:focus-visible {
    outline: none;
    background: #fff;
    color: var(--night);
    box-shadow: inset 0 0 0 3px var(--night);
}

.btn--sm { padding: 11px 18px; font-size: .9375rem; --cut: 7px; }

.btn--signal { background: var(--signal); color: var(--night); }
.btn--signal:hover { background: var(--signal-hi); }

/* um tom abaixo do vermelho da marca para o texto branco passar de 4.5:1 */
.btn--threat { background: #d02a22; color: #fff; }
.btn--threat:hover { background: #b8231c; }

.btn--ink { background: var(--night); color: var(--frost); }
.btn--ink:hover { background: var(--night-3); }

/* =================================================================
   NAVEGACAO
   ================================================================= */
.nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    padding: 12px 0;
    transition: padding .3s ease;
}

/* O fundo desfocado fica num pseudo-elemento, nunca no proprio .nav:
   backdrop-filter no .nav o transforma no "bloco de contencao" dos filhos
   com position:fixed, e o painel do menu do celular ficava preso dentro
   da barra (aparecia espremido embaixo do logo depois de rolar a pagina). */
.nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(11, 29, 33, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 var(--line);
    opacity: 0;
    transition: opacity .3s ease;
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-scrolled { padding: 4px 0; }

.nav-in {
    width: min(var(--wrap), 100% - var(--gutter) * 2);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.nav-logo { display: block; line-height: 0; position: relative; z-index: 2; }
/* Logo recortado rente ao desenho, na resolucao maxima que existe
   (1102 px de largura). Exibido a no maximo 250 px, sobra densidade
   para telas retina de 3x e ainda mais. */
.nav-logo picture { display: block; }
.nav-logo img {
    display: block;
    width: clamp(200px, 17vw, 250px);
    height: auto;
    transition: width .3s ease;
}
.nav.is-scrolled .nav-logo img { width: 140px; }

.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-menu ul {
    display: flex;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu ul a {
    position: relative;
    display: block;
    white-space: nowrap;
    padding: 8px 0;
    color: var(--frost);
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
}

.nav-menu ul a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 2px;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.nav-menu ul a.is-active::after { transform: scaleX(1); }
@media (hover: hover) { .nav-menu ul a:hover::after { transform: scaleX(1); } }

.nav-toggle {
    display: none;
    position: relative;
    z-index: 2;
    width: 46px; height: 46px;
    margin-right: -8px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--frost);
}

.nav-toggle-bars,
.nav-toggle-bars::before {
    position: absolute;
    left: 11px;
    width: 24px; height: 2px;
    background: currentColor;
    transition: transform .3s ease, top .3s ease;
}
.nav-toggle-bars { top: 18px; }
.nav-toggle-bars::before { content: ""; left: 0; top: 8px; }

.nav.is-open .nav-toggle-bars { top: 22px; transform: rotate(45deg); }
.nav.is-open .nav-toggle-bars::before { top: 0; transform: rotate(-90deg); }

@media (max-width: 1140px) and (max-height: 560px) {
    .nav-menu { justify-content: flex-start; gap: 20px; padding-top: 88px; }
    .nav-menu ul a { font-size: 1.35rem; padding: 4px 0; }
}

@media (max-width: 1140px) {
    .nav-toggle { display: block; }
    .nav-logo img { width: 168px; }
    .nav.is-scrolled .nav-logo img { width: 116px; }

    .nav-menu {
        position: fixed;
        inset: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 36px;
        padding: 96px var(--gutter) 48px;
        background: var(--night);
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform .45s cubic-bezier(.3, .7, .2, 1), visibility 0s linear .45s;
    }
    .nav.is-open .nav-menu {
        transform: none;
        visibility: visible;
        transition: transform .45s cubic-bezier(.3, .7, .2, 1);
    }

    .nav-menu { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
    .nav-menu ul { flex-direction: column; gap: 4px; }
    .nav-menu .btn--sm { padding: 16px 28px; font-size: 1.0625rem; --cut: 10px; }
    .nav-menu ul a { font-size: 1.75rem; font-weight: 600; padding: 6px 0; }
}

/* =================================================================
   HERO — mapa da rede
   ================================================================= */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 176px 0 56px;
    color: var(--frost);
    background:
        radial-gradient(ellipse 50% 55% at 74% 46%, rgba(109, 199, 42, .10), transparent 70%),
        radial-gradient(circle at 1px 1px, rgba(147, 174, 176, .16) 1px, transparent 1.4px) 0 0 / 28px 28px,
        var(--night);
}

/* vinheta: o grid some nas bordas */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%, transparent 40%, var(--night) 95%);
    pointer-events: none;
}

.hero-in {
    position: relative;
    width: min(var(--wrap), 100% - var(--gutter) * 2);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
}

.hero-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.75rem, 1.2rem + 4.6vw, 5.25rem);
    line-height: .98;
    letter-spacing: -0.012em;
    margin: 0 0 28px;
}

/* cada linha do titulo sobe de dentro de uma mascara, uma apos a outra */
.hero-title .ln {
    display: block;
    overflow: hidden;
    padding-bottom: .07em;
    margin-bottom: -.07em;
}
.hero-title .ln > span {
    display: block;
    transform: translateY(108%);
    animation: ln-sobe .9s cubic-bezier(.2, .7, .1, 1) forwards;
}
.hero-title .ln:nth-child(1) > span { animation-delay: .10s; }
.hero-title .ln:nth-child(2) > span { animation-delay: .19s; }
.hero-title .ln:nth-child(3) > span { animation-delay: .28s; }
.hero-title .ln:nth-child(4) > span { animation-delay: .37s; }

@keyframes ln-sobe { to { transform: none; } }

.hero-lead {
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--mist);
    max-width: 44ch;
    margin: 0;
    opacity: 0;
    animation: aparece .8s ease .6s forwards;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    margin-top: 36px;
    opacity: 0;
    animation: aparece .8s ease .75s forwards;
}

.hero-phone {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--frost);
    text-decoration: none;
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 2px;
    transition: border-color .2s ease, color .2s ease;
}
.hero-phone:hover { color: #fff; border-color: var(--signal); }

@keyframes aparece { to { opacity: 1; } }

.hero-clientes {
    display: block;
    margin-top: 52px;
    max-width: 560px;
    text-decoration: none;
    opacity: 0;
    animation: aparece .8s ease .95s forwards;
}
.hero-clientes-rotulo {
    display: block;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: .95rem;
    color: var(--mist);
    margin-bottom: 14px;
    transition: color .2s ease;
}
.hero-clientes-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 30px;
}
.hero-clientes-logos img {
    display: block;
    width: auto;
    height: 34px;
    opacity: .82;
    transition: opacity .25s ease;
}
/* logos largos e baixos ganham um pouco menos de altura para equilibrar */
.hero-clientes-logos img[src*="takahashi"] { height: 26px; }
.hero-clientes-logos img[src*="catuai"] { height: 30px; }
.hero-clientes:hover .hero-clientes-rotulo { color: var(--frost); }
.hero-clientes:hover img { opacity: 1; }

/* ---------- palco do mapa ---------- */
.hero-stage { position: relative; }

.topo {
    position: relative;
    width: 100%;
    aspect-ratio: 640 / 560;
}

.topo-svg,
.topo-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.topo-canvas { pointer-events: none; }

.t-zone { fill: transparent; pointer-events: all; cursor: crosshair; }
@media (hover: none) { .t-zone, .ia-caso { cursor: pointer; } }

.t-label {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .03em;
    fill: var(--mist);
    pointer-events: none;
}
.t-label--in { fill: var(--signal); opacity: .8; }

.t-mesh {
    fill: none;
    stroke: var(--line-2);
    stroke-width: 1;
    opacity: 0;
    animation: t-mesh 1s ease .1s forwards;
    pointer-events: none;
}
@keyframes t-mesh { to { opacity: .55; } }

.t-worlds { pointer-events: none; }
.t-world {
    fill: var(--mist);
    opacity: 0;
    animation: aparece .6s ease forwards, pisca 3.2s ease-in-out infinite;
}
.t-world.is-up { fill: var(--traffic); }
.t-world:nth-child(1)  { animation-delay: .10s, 1.0s; }
.t-world:nth-child(2)  { animation-delay: .14s, 2.1s; }
.t-world:nth-child(3)  { animation-delay: .18s, 1.6s; }
.t-world:nth-child(4)  { animation-delay: .22s, 2.8s; }
.t-world:nth-child(5)  { animation-delay: .26s, 1.3s; }
.t-world:nth-child(6)  { animation-delay: .30s, 3.4s; }
.t-world:nth-child(7)  { animation-delay: .34s, 2.4s; }
.t-world:nth-child(8)  { animation-delay: .38s, 1.9s; }
.t-world:nth-child(9)  { animation-delay: .42s, 3.0s; }
.t-world:nth-child(10) { animation-delay: .46s, 1.1s; }
.t-world:nth-child(11) { animation-delay: .50s, 2.6s; }
.t-world:nth-child(12) { animation-delay: .54s, 3.7s; }
.t-world:nth-child(13) { animation-delay: .58s, 1.4s; }
.t-world:nth-child(14) { animation-delay: .62s, 2.2s; }
.t-world:nth-child(15) { animation-delay: .66s, 3.2s; }
.t-world:nth-child(16) { animation-delay: .70s, 1.7s; }

@keyframes pisca {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* linhas que se desenham na abertura (pathLength="1" no SVG) */
.draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: desenha .9s cubic-bezier(.5, 0, .2, 1) forwards;
}
@keyframes desenha { to { stroke-dashoffset: 0; } }

.t-up {
    fill: none;
    stroke: var(--line-2);
    stroke-width: 1.3;
    pointer-events: none;
}
#up-0 { animation-delay: .45s; }
#up-1 { animation-delay: .55s; }
#up-2 { animation-delay: .65s; }
#up-3 { animation-delay: .60s; }
#up-4 { animation-delay: .70s; }
#up-5 { animation-delay: .50s; }

.t-perim {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.5;
    opacity: .55;
    animation-delay: .8s;
}

.t-cable {
    fill: none;
    stroke: var(--line-2);
    stroke-width: 2;
    stroke-linecap: round;
}
#trunk  { animation-delay: 1.15s; animation-duration: .4s; }
#drop-0 { animation-delay: 1.45s; }
#drop-1 { animation-delay: 1.40s; }
#drop-2 { animation-delay: 1.35s; }
#drop-3 { animation-delay: 1.40s; }
#drop-4 { animation-delay: 1.45s; }

.t-box {
    fill: var(--night-2);
    stroke: var(--line-2);
    stroke-width: 1.5;
}

.t-switch {
    opacity: 0;
    animation: aparece .4s ease 1.25s forwards;
}
.t-port { fill: var(--line-2); }
.t-port:nth-child(3n+2) { animation: porta 1.1s steps(2, jump-none) infinite; }
.t-port:nth-child(4n+1) { animation: porta 1.7s steps(2, jump-none) .3s infinite; }
.t-port:nth-child(5n)   { animation: porta .8s steps(2, jump-none) .6s infinite; }
@keyframes porta {
    0%   { fill: var(--line-2); }
    100% { fill: var(--signal); }
}

.t-dev {
    opacity: 0;
    animation: aparece .5s ease forwards;
    animation-delay: calc(1.7s + var(--d) * .09s);
}
.t-ico {
    fill: none;
    stroke: var(--frost);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .85;
}
.t-ico-fill { fill: var(--frost); opacity: .85; }

/* LED do equipamento: cinza ate "ligar", depois verde */
.t-led {
    fill: #36504f;
    animation: liga .3s steps(1) forwards;
    animation-delay: calc(2.05s + var(--d) * .12s);
}
@keyframes liga { to { fill: var(--signal); } }

/* pisca branco quando chega um pacote */
.t-dev.is-rx .t-led { fill: #fff !important; }
.t-dev.is-rx .t-box { stroke: var(--signal); }

.t-name {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 15px;
    fill: var(--mist);
    text-anchor: middle;
}

.t-fw {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: fw-entra .7s cubic-bezier(.3, 1.4, .5, 1) .9s forwards;
}
@keyframes fw-entra {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: none; }
}

.t-fw-halo {
    fill: rgba(109, 199, 42, .05);
    stroke: rgba(109, 199, 42, .28);
    stroke-width: 1;
}
.t-fw-shield {
    fill: var(--night-2);
    stroke: var(--signal);
    stroke-width: 2.5;
    stroke-linejoin: round;
    transition: stroke .15s ease, fill .15s ease;
}
.t-fw-lock {
    fill: none;
    stroke: var(--signal);
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke .15s ease;
}
.t-fw-body { fill: var(--signal); transition: fill .15s ease; }
.t-fw-hole { fill: var(--night-2); }
.t-name--fw { fill: var(--signal); font-weight: 600; }

/* o escudo acende em vermelho por um instante quando segura um ataque */
.t-fw.is-hit .t-fw-shield { stroke: var(--threat); fill: #2a1a1a; }
.t-fw.is-hit .t-fw-lock { stroke: var(--threat); }
.t-fw.is-hit .t-fw-body { fill: var(--threat); }

/* ---------- barra de controle sob o mapa ---------- */
.topo-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    opacity: 0;
    animation: aparece .6s ease 2.1s forwards;
}

.topo-count {
    display: flex;
    gap: 22px;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: .975rem;
    color: var(--mist);
}
.topo-count b {
    color: var(--signal-hi);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-right: 5px;
}
.topo-count .is-bad b { color: var(--threat); }

.topo-attack {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 0;
    background: rgba(255, 90, 71, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 90, 71, .55);
    color: #ffd2cb;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: .975rem;
    cursor: pointer;
    --cut: 8px;
    clip-path: var(--chanfro);
    transition: background-color .2s ease, color .2s ease;
}
.topo-attack:hover { background: rgba(255, 90, 71, .24); color: #fff; }
.topo-attack:focus-visible {
    outline: none;
    background: #fff;
    color: var(--night);
}

.topo-attack-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--threat);
    box-shadow: 0 0 0 0 rgba(255, 90, 71, .6);
    animation: alvo 1.6s ease-out infinite;
}
@keyframes alvo {
    0%   { box-shadow: 0 0 0 0 rgba(255, 90, 71, .6); }
    100% { box-shadow: 0 0 0 10px rgba(255, 90, 71, 0); }
}

.topo-note {
    margin: 10px 0 0;
    font-size: .9rem;
    color: var(--mist);
    min-height: 1.5em;
    opacity: 0;
    animation: aparece .6s ease 2.2s forwards;
}
.topo-note.is-voce { color: var(--frost); }

@media (max-width: 900px) {
    .hero { padding: 132px 0 40px; min-height: 0; }
    .hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hero-lead { font-size: 1.125rem; }
    .hero-clientes { margin-top: 36px; }
    .hero-clientes-logos { gap: 12px 22px; }
    .hero-clientes-logos img { height: 28px; }
    .hero-clientes-logos img[src*="takahashi"] { height: 21px; }
    .hero-clientes-logos img[src*="catuai"] { height: 25px; }
    /* o mapa ocupa a largura toda da tela para os rotulos continuarem legiveis */
    .topo { width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); }
    .t-name { font-size: 19px; }
    .t-label { font-size: 17px; }
}

@media (max-width: 420px) {
    .topo-count { gap: 14px; font-size: .9rem; }
    .topo-attack { width: 100%; justify-content: center; }
}

/* =================================================================
   SOBRE + grafico "quanto dura o dia em que a TI para"
   ================================================================= */
.sobre { padding: clamp(80px, 10vw, 136px) 0 clamp(56px, 7vw, 96px); }

.sobre-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
}

.sobre-copy .big { color: var(--ink); }
.sobre-copy p:not(.big) { color: var(--ink-2); }

.sobre-contato {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}
.sobre-contato a {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 2px solid var(--signal);
    padding-bottom: 1px;
}
.sobre-contato a:hover { color: var(--signal-ink); }

.queda {
    position: relative;
    margin: 0;
    padding: clamp(22px, 3vw, 34px);
    background:
        radial-gradient(circle at 1px 1px, rgba(147, 174, 176, .1) 1px, transparent 1.4px) 0 0 / 22px 22px,
        var(--night);
    color: var(--frost);
    --cut: 18px;
    clip-path: var(--chanfro);
    --t: 1;
    --inc: 7.69%;
    --amb: #f0cd7a;
}

/* ---------- cabecalho ---------- */
.q-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 18px;
}
.queda-titulo {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.1875rem;
    line-height: 1.3;
    text-wrap: balance;
}
.q-dir { display: inline-flex; align-items: center; gap: 12px; min-height: 28px; }   /* altura do botao: ele aparecer nao empurra nada */
.q-tag { font-family: var(--f-mono); font-size: 11.5px; color: #7f9a9c; }
.q-replay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 0;
    background: rgba(109, 199, 42, .1);
    box-shadow: inset 0 0 0 1px rgba(109, 199, 42, .45);
    color: var(--signal-hi);
    font-family: var(--f-display);
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    --cut: 6px;
    clip-path: var(--chanfro);
    animation: aparece .4s ease;
    transition: background-color .2s ease;
}
.q-replay[hidden] { display: none; }
.q-replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .q-replay:hover { background: rgba(109, 199, 42, .2); } }
.q-replay:focus-visible { outline: none; background: #fff; color: var(--night); }

/* ---------- regua da semana + relogio que corre ---------- */
.q-regua { position: relative; padding-top: 30px; margin-bottom: 16px; }
.q-pilula {
    position: absolute;
    top: 0; left: 0;
    padding: 4px 9px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: pre;
    color: var(--night);
    background: var(--frost);
    --cut: 5px;
    clip-path: var(--chanfro);
    transition: background-color .2s ease, color .2s ease, opacity .3s ease;
    will-change: transform;
}
.queda.is-falha .q-pilula { background: var(--threat); color: #fff; }
.queda.is-pronto .q-pilula { left: auto; right: 0; transform: none !important; }

.q-dias {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    font-family: var(--f-display);
    font-size: .875rem;
    color: var(--mist);
    /* marcas de 6 em 6 horas sob os dias */
    background: linear-gradient(to right, var(--line-2) 1px, transparent 1px) 0 100% / 5% 5px repeat-x;
    padding-bottom: 8px;
}
.q-dias span { padding-left: 6px; border-left: 1px solid var(--line-2); }

/* ---------- cada linha do monitor ---------- */
.q-linha + .q-linha { margin-top: 24px; }
.q-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}
.q-nome { font-size: 1rem; color: var(--frost); min-width: 0; }

/* selo de estado: online / em atendimento / fora do ar */
.q-st {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* largura do estado mais longo ("em atendimento"): trocar de estado
       nao muda o tamanho do selo nem empurra o nome para outra linha */
    min-width: 10.4em;
    padding: 3px 9px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: .8rem;
    transition: color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.q-st em { font-style: normal; }
.q-st i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.q-st--ok { color: var(--signal-hi); background: rgba(109, 199, 42, .1); box-shadow: inset 0 0 0 1px rgba(109, 199, 42, .4); }
.q-st--alerta { color: var(--amb); background: rgba(240, 205, 122, .1); box-shadow: inset 0 0 0 1px rgba(240, 205, 122, .45); }
.q-st--fora { color: #ff8a7a; background: rgba(255, 90, 71, .12); box-shadow: inset 0 0 0 1px rgba(255, 90, 71, .5); }
.q-st--alerta i, .q-st--fora i { animation: q-pisca .9s steps(2, jump-none) infinite; }
@keyframes q-pisca { 0% { opacity: 1; } 100% { opacity: .25; } }

/* a barra: 40 blocos de 3 horas */
.q-barra {
    position: relative;
    display: grid;
    grid-template-columns: repeat(40, minmax(0, 1fr));
    gap: 2px;
    height: 20px;
}
.q-seg {
    display: block;
    border-radius: 1px;
    background: #16343b;
    transition: background-color .2s ease;
}
.q-seg.ok { background: var(--signal); }
.q-seg.down { background: var(--threat-deep); }
.q-seg.inc { background: var(--amb); }
/* o bloco "acende" quando o cursor passa por ele */
.q-seg.acende { animation: q-acende .55s ease-out; }
@keyframes q-acende { from { filter: brightness(1.9) saturate(1.2); } }

/* cursor: a linha luminosa que percorre a semana */
.q-cursor {
    position: absolute;
    top: -6px; bottom: -6px;
    left: calc(var(--t) * 100%);
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 10px 2px rgba(207, 239, 255, .7);
    transition: opacity .3s ease;
}
.queda.is-falha .q-cursor { background: #ffd2cb; box-shadow: 0 0 12px 3px rgba(255, 90, 71, .7); }
.queda.is-pronto .q-cursor { opacity: 0; }

/* a falha: onda vermelha saindo do ponto exato */
.q-onda {
    position: absolute;
    top: 50%;
    left: var(--inc);
    width: 12px; height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    border: 2px solid var(--threat);
    opacity: 0;
    pointer-events: none;
}
.queda.is-falha .q-onda { animation: q-onda 1.1s ease-out infinite; }
@keyframes q-onda {
    0%   { transform: scale(.6); opacity: .9; }
    100% { transform: scale(4.2); opacity: 0; }
}

/* os poucos minutos parados, marcados na linha da Chede */
.q-marca {
    position: absolute;
    top: -4px; bottom: -4px;
    left: var(--inc);
    width: 3px;
    background: var(--threat);
    box-shadow: 0 0 10px rgba(255, 90, 71, .8);
    opacity: 0;
    transition: opacity .3s ease;
}
.queda.mostra-marca .q-marca,
.queda.is-pronto .q-marca { opacity: 1; }

/* registro da resposta da Chede */
.q-ev {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 12px 0 0;
    padding: 0;
}
.q-ev li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px 4px 7px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    color: #cfe0de;
    background: rgba(109, 199, 42, .08);
    box-shadow: inset 0 0 0 1px rgba(109, 199, 42, .3);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .3s ease, transform .3s ease;
}
.q-ev li.mostra { opacity: 1; transform: none; }
.q-ev time { color: var(--signal-hi); font-weight: 600; }
.q-ev svg { width: 13px; height: 13px; fill: none; stroke: var(--signal-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.q-pe {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 10px;
}
.q-cont { font-family: var(--f-display); font-size: .9rem; color: var(--mist); }
.q-cont b { font-weight: 600; color: var(--frost); font-variant-numeric: tabular-nums; }
.q-fim {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.25rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.3, .7, .2, 1);
}
.q-fim--ruim { color: var(--threat); }
.q-fim--bom { color: var(--signal-hi); }
.queda.is-pronto .q-fim { opacity: 1; transform: none; }
.queda.is-pronto .q-fim--bom { transition-delay: .25s; }

@media (max-width: 480px) {
    .q-barra { gap: 1.5px; height: 18px; }
    .q-nome { font-size: .9375rem; }
    .q-st { font-size: .72rem; padding: 3px 6px; gap: 6px; }
    .q-fim { font-size: 1.125rem; }
    /* registro compacto: hora em cima, acao embaixo, tres colunas */
    .q-ev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .q-ev li {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 2px 5px;
        padding: 6px 7px;
        font-family: var(--f-display);
        font-size: .74rem;
        line-height: 1.2;
    }
    .q-ev svg { grid-row: 1; }
    .q-ev time { grid-row: 1; justify-self: start; font-family: var(--f-mono); font-size: 11px; }
    .q-ev li span { grid-column: 1 / -1; }
    /* contador e resultado sempre em duas linhas: o texto muda durante a
       animacao e, numa linha so, ora cabia, ora quebrava, e o grafico pulava */
    .q-pe { flex-direction: column; align-items: flex-start; gap: 2px; }
    .q-cont { white-space: nowrap; }
}

@media (max-width: 900px) {
    .sobre-in { grid-template-columns: minmax(0, 1fr); }
}

/* =================================================================
   SERVICOS — pilha de camadas
   ================================================================= */
.servicos { padding: clamp(40px, 5vw, 64px) 0 clamp(80px, 10vw, 136px); }

.serv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
}

.pilha-sticky {
    position: sticky;
    top: 88px;
}

.pilha {
    display: block;
    width: 100%;
    max-height: calc(100vh - 120px);
    overflow: visible;
}

.p-sombra { fill: url(#p-sombra-grad); }

.p-camada {
    transform: translateY(var(--y));
    transition: transform .8s cubic-bezier(.3, .7, .2, 1);
}

.p-lift {
    transition: transform .7s cubic-bezier(.3, .7, .2, 1), opacity .5s ease, filter .5s ease;
}

.p-topo {
    fill: var(--night-2);
    stroke: var(--signal);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    transition: fill .4s ease, stroke .4s ease;
}
.p-lado-e { fill: #0d2428; stroke: rgba(109, 199, 42, .35); stroke-width: 1; transition: fill .4s ease, stroke .4s ease; }
.p-lado-d { fill: #08171a; stroke: rgba(109, 199, 42, .35); stroke-width: 1; transition: fill .4s ease, stroke .4s ease; }

.p-ico {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: opacity .4s ease;
}
.p-ico-fill { fill: var(--signal); transition: opacity .4s ease; }

.p-blink { animation: led-serv 1.2s steps(2, jump-none) infinite; }
@keyframes led-serv {
    0% { opacity: 1; }
    100% { opacity: .25; }
}

.p-guia { stroke: #95aaa6; stroke-width: 1; }
.p-nome {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 17px;
    fill: var(--ink-2);
    transition: fill .3s ease;
}

/* anel do suporte: tracejado girando em volta da pilha */
.p-anel {
    fill: none;
    stroke: var(--signal-ink);
    stroke-width: 2;
    stroke-dasharray: 9 9;
    opacity: 0;
    transition: opacity .6s ease;
}

/* ---- estados controlados pelo JavaScript ---- */
.pilha.is-js .p-camada.is-ghost .p-lift { transform: translateY(-26px); opacity: .55; }
.pilha.is-js .p-camada.is-ghost .p-topo,
.pilha.is-js .p-camada.is-ghost .p-lado-e,
.pilha.is-js .p-camada.is-ghost .p-lado-d {
    fill: transparent;
    stroke: #8ea5a1;
    stroke-dasharray: 4 4;
}
.pilha.is-js .p-camada.is-ghost .p-ico,
.pilha.is-js .p-camada.is-ghost .p-ico-fill { opacity: 0; animation: none; }
.pilha.is-js .p-camada.is-ghost .p-nome { fill: #8ea5a1; }

.pilha.is-js .p-camada.is-active .p-lift {
    filter: drop-shadow(0 0 14px rgba(109, 199, 42, .45));
}
.pilha.is-js .p-camada.is-active .p-topo { fill: #143439; stroke: var(--signal-hi); }
.pilha.is-js .p-camada.is-active .p-ico { stroke: var(--signal-hi); }
.pilha.is-js .p-camada.is-active .p-nome { fill: var(--signal-ink); }

.pilha.is-suporte .p-anel {
    opacity: 1;
    animation: anel 1.6s linear infinite;
}
@keyframes anel { to { stroke-dashoffset: -36; } }

.serv-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.svc {
    padding: 28px 0 28px 28px;
    border-left: 2px solid var(--paper-2);
    transition: border-color .4s ease, opacity .4s ease;
}
.svc + .svc { margin-top: 8px; }
.svc p { color: var(--ink-2); margin: 0; }

.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 18px 0 0;
}
.tags li {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: .875rem;
    padding: 4px 10px;
    color: var(--ink-2);
    background: rgba(255, 255, 255, .55);
    box-shadow: inset 0 0 0 1px #c2d1cb;
}

/* desktop: cada servico ocupa meia tela, e a pilha acompanha o scroll */
@media (min-width: 901px) {
    .servicos.is-js .svc {
        min-height: 40vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        opacity: .5;
    }
    .servicos.is-js .svc:first-child { min-height: 34vh; justify-content: flex-start; padding-top: 8vh; }
    .servicos.is-js .svc:last-child { min-height: 52vh; }
    .servicos.is-js .svc.is-active { opacity: 1; border-color: var(--signal); }
    .servicos.is-js .svc.is-done { opacity: .72; }
}

@media (max-width: 900px) {
    .serv-grid { grid-template-columns: minmax(0, 1fr); }
    .pilha-sticky { position: static; }
    .pilha { max-width: 440px; margin: 0 auto; max-height: none; }
    .svc { padding-left: 20px; }
}

/* =================================================================
   PLATAFORMAS — faixa escura entre servicos e IA
   ================================================================= */
.plat {
    padding: clamp(56px, 7vw, 88px) 0;
    background:
        radial-gradient(circle at 1px 1px, rgba(147, 174, 176, .14) 1px, transparent 1.4px) 0 0 / 28px 28px,
        var(--night);
    border-block: 1px solid var(--line);
    overflow: hidden;
}

.plat-titulo {
    margin: 0 0 30px;
    text-align: center;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 1.0625rem;
    letter-spacing: .01em;
    color: var(--mist);
}

.plat-fileiras { display: grid; gap: 14px; }

/* as pontas somem no fundo, como na faixa da Alphatec, mas sem cortar seco */
.plat-fileira {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.plat-trilho {
    display: flex;
    gap: 14px;
    width: max-content;
    list-style: none;
    margin: 0;
    padding: 0;
    animation: plat-anda 86s linear infinite;
}
.plat-fileira--volta .plat-trilho { animation-duration: 92s; animation-direction: reverse; }
@media (hover: hover) {
    .plat-fileira:hover .plat-trilho { animation-play-state: paused; }
}
/* 4 copias no trilho: andar metade dele emenda perfeitamente */
@keyframes plat-anda { to { transform: translateX(calc(-50% - 7px)); } }

.plat-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px 14px 20px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: clamp(1.05rem, .9rem + .5vw, 1.375rem);
    line-height: 1;
    color: var(--frost);
    background: var(--night-2);
    box-shadow: inset 0 0 0 1px var(--line);
    --cut: 10px;
    clip-path: var(--chanfro);
    white-space: nowrap;
    transition: box-shadow .25s ease, color .25s ease;
}
/* LED de "online" */
.plat-chip i {
    flex: 0 0 auto;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 8px rgba(109, 199, 42, .8);
}
.plat-chip.pisca i { animation: led-rack 2.4s steps(2, jump-none) infinite; animation-delay: var(--d); }
@keyframes led-rack {
    0%   { opacity: 1; }
    100% { opacity: .3; }
}
@media (hover: hover) {
    .plat-chip:hover { box-shadow: inset 0 0 0 1px var(--signal); }
}

@media (max-width: 640px) {
    .plat-titulo { font-size: .95rem; margin-bottom: 22px; padding-inline: var(--gutter); }
    .plat-fileiras { gap: 10px; }
    .plat-trilho { gap: 10px; }
    .plat-chip { padding: 11px 18px 11px 15px; gap: 10px; --cut: 8px; }
    @keyframes plat-anda { to { transform: translateX(calc(-50% - 5px)); } }
}

/* link do item de IA na lista de servicos */
.svc-link {
    display: inline-block;
    align-self: flex-start;
    margin-top: 16px;
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--ia-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--ia);
    padding-bottom: 1px;
}
.svc-link:hover { color: var(--ink); }

/* camada de IA no topo da pilha: icone em azul, no pulso de quem pensa */
.p-camada--ia .p-ico { stroke: var(--ia); }
.p-camada--ia .p-ico-fill { fill: var(--ia); }
.pilha.is-js .p-camada--ia.is-active .p-ico { stroke: var(--ia-hi); }
.pilha.is-js .p-camada--ia.is-active .p-lift { filter: drop-shadow(0 0 14px rgba(63, 200, 242, .5)); }
.pilha.is-js .p-camada--ia.is-active .p-nome { fill: var(--ia-ink); }
.p-pulso {
    transform-box: fill-box;
    transform-origin: center;
    animation: p-pulso 1.8s ease-in-out infinite;
}
@keyframes p-pulso { 50% { transform: scale(1.4); } }

/* =================================================================
   IA E AUTOMACAO
   ================================================================= */
.ia {
    padding: clamp(80px, 10vw, 136px) 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 1px 1px, rgba(11, 29, 33, .09) 1px, transparent 1.4px) 0 0 / 26px 26px,
        var(--paper);
    border-top: 1px solid var(--paper-2);
}

.ia-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 5vw, 72px);
    align-items: end;
    margin-bottom: 44px;
}
.ia-head .h2 { margin: 0; }
.ia-head .lead { margin: 0; }

.ia-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ia-ink);
}
.ia-kicker::before {
    content: "";
    width: 9px; height: 9px;
    background: var(--ia);
    transform: rotate(45deg);
}

/* ---------- painel de automacao ---------- */
.auto {
    background: var(--night);
    color: var(--frost);
    --cut: 18px;
    clip-path: var(--chanfro);
}

.auto-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    background: #0f2428;
    border-bottom: 1px solid var(--line);
}
.auto-dot { width: 10px; height: 10px; border-radius: 50%; background: #24433f; }
.auto-titulo { margin-left: 10px; font-family: var(--f-mono); font-size: 12px; color: #7f9a9c; }
.auto-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--ia-hi);
}
.auto-status i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ia);
    animation: alvo-ia 1.8s ease-out infinite;
}
@keyframes alvo-ia {
    0%   { box-shadow: 0 0 0 0 rgba(63, 200, 242, .6); }
    100% { box-shadow: 0 0 0 9px rgba(63, 200, 242, 0); }
}

.auto-palco {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 7vw, 116px);
    padding: 42px clamp(20px, 3vw, 40px);
}

.auto-fios {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.auto-fio {
    fill: none;
    stroke: var(--line-2);
    stroke-width: 1.5;
    transition: stroke .3s ease, opacity .3s ease;
}
/* um tracejado correndo por cima do fio: dado fluindo o tempo todo */
.auto-fio--fluxo {
    stroke-width: 1.6;
    stroke-dasharray: 2 11;
    animation: fluxo 1.1s linear infinite;
}
.auto-fio--fluxo.auto-fio--in { stroke: rgba(63, 200, 242, .38); }
.auto-fio--fluxo.auto-fio--out { stroke: rgba(109, 199, 42, .38); }
@keyframes fluxo { to { stroke-dashoffset: -13; } }
.auto-fio.is-ativo.auto-fio--in { stroke: rgba(63, 200, 242, .8); }
.auto-fio.is-ativo.auto-fio--out { stroke: rgba(139, 224, 74, .8); }

.auto-token--in { fill: var(--ia-hi); }
.auto-token--out { fill: var(--signal-hi); }

.auto-col {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.auto-no {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 14px;
    background: var(--night-2);
    box-shadow: inset 0 0 0 1px var(--line);
    --cut: 9px;
    clip-path: var(--chanfro);
    font-family: var(--f-display);
    font-weight: 500;
    font-size: .975rem;
    line-height: 1.2;
    color: var(--frost);
    transition: background-color .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.auto-curto { display: none; }

.auto-ico {
    flex: 0 0 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--ia);
    background: rgba(63, 200, 242, .1);
    --cut: 6px;
    clip-path: var(--chanfro);
}
.auto-ico svg,
.ia-caso-ico svg,
.ia-seguro svg {
    width: 20px; height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auto-entradas .auto-no.is-envia {
    background: #11303a;
    box-shadow: inset 0 0 0 1px var(--ia);
}

.auto-saidas .auto-no { padding-right: 62px; }
.auto-check { flex: 0 0 26px; width: 26px; height: 26px; }
.auto-check circle { fill: none; stroke: var(--line-2); stroke-width: 1.6; transition: fill .3s ease, stroke .3s ease; }
.auto-check path {
    fill: none;
    stroke: var(--night);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset .35s ease .12s;
}
.auto-quando {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--signal-hi);
    opacity: 0;
    transition: opacity .3s ease;
}
.auto-saidas .auto-no.is-feito {
    background: rgba(109, 199, 42, .12);
    box-shadow: inset 0 0 0 1px var(--signal);
}
.auto-no.is-feito .auto-check circle { fill: var(--signal); stroke: var(--signal); }
.auto-no.is-feito .auto-check path { stroke-dashoffset: 0; }
.auto-no.is-feito .auto-quando { opacity: 1; }

/* destaque de uma linha quando a pessoa passa o mouse num caso de uso */
.auto.is-foco .auto-no:not(.is-via) { opacity: .3; }
.auto.is-foco .auto-fio:not(.is-via) { opacity: .2; }

/* ---------- nucleo de IA ---------- */
.auto-nucleo {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 210px;
    aspect-ratio: 1;
    margin: auto;
}
.auto-nucleo svg { display: block; width: 100%; height: 100%; overflow: visible; }

.n-brilho { fill: url(#n-grad); opacity: .65; transition: opacity .4s ease; }
.n-anel {
    fill: none;
    transform-box: fill-box;
    transform-origin: center;
}
.n-anel--1 { stroke: rgba(63, 200, 242, .35); stroke-width: 1; stroke-dasharray: 2 7; animation: gira 40s linear infinite; }
.n-anel--2 { stroke: rgba(63, 200, 242, .6); stroke-width: 2; stroke-dasharray: 70 22 14 22; animation: gira 14s linear infinite reverse; }
.n-anel--3 { stroke: rgba(139, 224, 74, .45); stroke-width: 1.2; stroke-dasharray: 3 5; animation: gira 22s linear infinite; }
.n-orbita {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: gira 6s linear infinite;
}
.n-orbita--2 { animation-duration: 9s; animation-direction: reverse; }
.n-sat { fill: var(--ia-hi); }
.n-sat--g { fill: var(--signal-hi); }
.n-chip {
    fill: #0f2a33;
    stroke: var(--ia);
    stroke-width: 2;
    stroke-linejoin: round;
    transition: fill .3s ease, stroke .3s ease;
}
.n-txt {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 34px;
    letter-spacing: .02em;
    fill: var(--frost);
    text-anchor: middle;
}
.n-pulso {
    fill: none;
    stroke: var(--ia);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}
.auto-nucleo.is-pensando .n-chip { fill: #12404d; stroke: var(--ia-hi); }
.auto-nucleo.is-pensando .n-brilho { opacity: 1; }
.auto-nucleo.is-pulso .n-pulso { animation: n-pulso .8s ease-out; }
@keyframes n-pulso {
    from { opacity: .9; transform: scale(1); }
    to   { opacity: 0; transform: scale(2.1); }
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- registro do que a automacao fez ---------- */
.auto-log {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    height: 104px;
    padding: 14px clamp(20px, 3vw, 40px) 16px;
    overflow: hidden;
    border-top: 1px dashed var(--line);
    font-family: var(--f-mono);
    font-size: 12.5px;
}
.al {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0;
    max-width: none;
    white-space: nowrap;
    animation: pf-entra .35s ease-out;
}
.al time { flex: 0 0 auto; color: #6f8b8d; }
.al span { overflow: hidden; text-overflow: ellipsis; color: #cfe0de; }
.al b { flex: 0 0 auto; margin-left: auto; font-weight: 600; color: var(--signal-hi); }

/* ---------- casos de uso ---------- */
.ia-casos {
    list-style: none;
    margin: 44px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 36px);
}
.ia-caso {
    padding-top: 22px;
    border-top: 2px solid #c4d3ce;
    transition: border-color .3s ease;
}
.ia-caso.is-via { border-color: var(--ia); }
@media (hover: hover) { .ia-caso:hover { border-color: var(--ia); } }
.ia-caso.is-pulso { border-color: var(--signal); }
.ia-caso-ico {
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    margin-bottom: 14px;
    color: var(--ia-ink);
    background: rgba(11, 106, 139, .09);
    --cut: 7px;
    clip-path: var(--chanfro);
}
.ia-caso-titulo {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 8px;
}
.ia-caso p { margin: 0; font-size: 1rem; color: var(--ink-2); }

.ia-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 40px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid #c4d3ce;
}
.ia-seguro {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    max-width: 70ch;
    color: var(--ink-2);
}
.ia-seguro svg { flex: 0 0 28px; width: 28px; height: 28px; color: var(--signal-ink); margin-top: 1px; }
.ia-seguro strong { color: var(--ink); }

@media (max-width: 900px) {
    .ia-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .auto-palco { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 30px 14px; }
    .auto-col { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .auto-no {
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        min-height: 0;
        padding: 12px 4px;
        text-align: center;
        font-size: .78rem;
        --cut: 7px;
    }
    .auto-txt, .auto-quando { display: none; }
    .auto-curto { display: block; }
    .auto-saidas .auto-no { padding-right: 4px; }
    .auto-ico { flex: 0 0 auto; width: 32px; height: 32px; }
    .auto-check { flex: 0 0 auto; }
    .auto-nucleo { max-width: 150px; }
    .auto-titulo { display: none; }
    .ia-casos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .ia-casos { grid-template-columns: minmax(0, 1fr); }
    .al time { display: none; }
}

/* =================================================================
   PENTEST
   ================================================================= */
.pentest {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 10vw, 136px) 0;
    color: #f2e8e6;
    background:
        radial-gradient(ellipse 45% 60% at 88% 8%, rgba(229, 50, 43, .24), transparent 70%),
        radial-gradient(ellipse 40% 50% at 0% 100%, rgba(229, 50, 43, .10), transparent 70%),
        #150d0e;
}

.pentest-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: center;
}

.pentest-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--threat);
    margin: 0 0 18px;
}
.pentest-kicker::before {
    content: "";
    width: 9px; height: 9px;
    background: var(--threat);
    transform: rotate(45deg);
}

.pentest .h2 { color: #fff; }

.pentest-lead {
    font-family: var(--f-display);
    font-weight: 500;
    font-size: 1.375rem;
    line-height: 1.4;
    color: var(--threat);
    margin-bottom: 20px;
}

.pentest-copy > p:not([class]) { color: #c2b1ae; }

.pentest-list {
    list-style: none;
    padding: 0;
    margin: 28px 0 26px;
}
.pentest-list li {
    position: relative;
    padding: 0 0 16px 28px;
    color: #a89592;
    font-size: 1rem;
    line-height: 1.5;
}
.pentest-list li::before {
    content: "";
    position: absolute;
    left: 3px; top: 7px;
    width: 9px; height: 9px;
    background: var(--threat-deep);
    transform: rotate(45deg);
}
.pentest-list strong {
    display: block;
    color: #fff;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.0625rem;
}

.pentest-punch {
    color: #fff;
    font-size: 1.125rem;
    border-left: 3px solid var(--threat-deep);
    padding-left: 16px;
    margin: 0 0 32px;
}

/* ---------- terminal do ataque simulado ---------- */
.term {
    background: #0c0708;
    box-shadow: inset 0 0 0 1px #3d2426;
    --cut: 16px;
    clip-path: var(--chanfro);
    font-family: var(--f-mono);
}

.term-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    background: #1b1113;
    border-bottom: 1px solid #3d2426;
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; background: #45302f; }
.term-title { margin-left: 10px; font-size: 12px; color: #a08a87; }

.term-alvo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    font-size: 12.5px;
    color: #c2b1ae;
    border-bottom: 1px dashed #3d2426;
}

/* mira girando devagar: o alvo esta sendo varrido */
.term-mira {
    position: relative;
    flex: 0 0 auto;
    width: 16px; height: 16px;
    border: 1.5px solid var(--threat);
    border-radius: 50%;
    animation: mira 4s linear infinite;
}
.term-mira::before,
.term-mira::after {
    content: "";
    position: absolute;
    background: var(--threat);
}
.term-mira::before { left: 50%; top: -5px; bottom: -5px; width: 1.5px; transform: translateX(-50%); }
.term-mira::after  { top: 50%; left: -5px; right: -5px; height: 1.5px; transform: translateY(-50%); }
@keyframes mira { to { transform: rotate(360deg); } }

/* altura fixa: sem isso a secao pularia a cada linha nova */
.term-feed {
    height: 260px;
    padding: 16px 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    font-size: 13.5px;
    color: #eadcda;
}

.pf-linha {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0;
    max-width: none;
    animation: pf-entra .35s ease-out;
}
@keyframes pf-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.pf-tag {
    flex: 0 0 88px;
    padding: 3px 0;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    letter-spacing: .04em;
}
.pf-tag--ok  { color: var(--signal-hi); box-shadow: inset 0 0 0 1px rgba(109, 199, 42, .55); }
.pf-tag--bad { color: #ffb1a6; background: rgba(255, 90, 71, .14); box-shadow: inset 0 0 0 1px rgba(255, 90, 71, .65); }
.pf-tag--run { color: #f0cd7a; box-shadow: inset 0 0 0 1px rgba(240, 205, 122, .5); animation: testando .5s steps(2, jump-none) infinite; }
@keyframes testando { 0% { opacity: 1; } 100% { opacity: .35; } }

.term-placar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 12px 18px;
    border-top: 1px solid #3d2426;
    font-size: 12.5px;
    color: #a08a87;
}
.term-placar b { color: #fff; font-variant-numeric: tabular-nums; margin-right: 4px; }
.term-placar .is-ok b  { color: var(--signal-hi); }
.term-placar .is-bad b { color: var(--threat); }

@media (max-width: 900px) {
    .pentest-in { grid-template-columns: minmax(0, 1fr); }
    .term-feed { height: 230px; font-size: 12.5px; }
    .pf-tag { flex-basis: 78px; }
}

/* =================================================================
   CLIENTES
   ================================================================= */
.clientes {
    padding: clamp(80px, 10vw, 136px) 0;
    color: var(--frost);
    background: var(--night);
    border-top: 1px solid var(--line);
}
/* ---------- manifesto: a frase de abertura dos clientes ---------- */
.manifesto { margin-bottom: clamp(48px, 6vw, 72px); }

.manifesto-frase {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 1rem + 4.4vw, 5rem);
    line-height: 1.03;
    letter-spacing: -0.015em;
    color: var(--frost);
    max-width: 19ch;
    margin: 0 0 30px;
    text-wrap: balance;
}

/* cada palavra acende quando a rolagem passa por ela; --p vai de 0 a 1 */
.manifesto-frase .w {
    opacity: clamp(.16, calc(var(--p, 0) * (var(--n) + 3) - var(--i)), 1);
    transition: opacity .12s linear;
}

.manifesto-apoio {
    position: relative;
    max-width: 56ch;
    text-wrap: pretty;
    margin: 0;
    padding-left: 22px;
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--mist);
}
/* a barra verde ao lado: daqui para baixo e prova, nao promessa */
.manifesto-apoio::before {
    content: "";
    position: absolute;
    left: 0; top: .2em; bottom: .2em;
    width: 3px;
    background: var(--signal);
}

/* ---------- parede de clientes ----------
   Um bloco por empresa, todos do mesmo tamanho: ninguem parece cliente
   "menor". O logo e vetor e fica em branco cheio, sem transparencia. */
.parede {
    list-style: none;
    margin: 0 0 clamp(72px, 9vw, 112px);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.cli-in {
    position: relative;
    display: grid;
    place-items: center;
    height: 208px;
    padding: 30px 22px 46px;
    overflow: hidden;
    color: var(--frost);
    text-decoration: none;
    background: var(--night-2);
    box-shadow: inset 0 0 0 1px var(--line);
    --cut: 14px;
    clip-path: var(--chanfro);
    transition: background-color .3s ease, box-shadow .3s ease;
}

.cli img {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--mw, 70%);
    max-height: 100px;
    transition: transform .4s cubic-bezier(.3, .7, .2, 1);
}

/* emblema com o nome embaixo (Freedom Shooters): e mais alto que os outros
   logos, entao o bloco dele usa o espaco de cima para o logo crescer na
   mesma proporcao visual dos vizinhos */
.cli--alto .cli-in { padding-top: 12px; }
.cli--alto img { max-height: 140px; }

.cli-setor {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 16px;
    font-family: var(--f-display);
    font-weight: 500;
    font-size: .9rem;
    line-height: 1.25;
    color: var(--mist);
    transition: color .3s ease;
}

/* LED de "online" no canto, o mesmo dos equipamentos do mapa do topo */
.cli-in::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 18px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 8px rgba(109, 199, 42, .8);
}

a.cli-in:focus-visible {
    background: var(--night-3);
    box-shadow: inset 0 0 0 1px var(--signal);
}
a.cli-in:focus-visible img { transform: scale(1.05); }
a.cli-in:focus-visible .cli-setor { color: var(--frost); }
@media (hover: hover) {
    a.cli-in:hover { background: var(--night-3); box-shadow: inset 0 0 0 1px var(--signal); }
    a.cli-in:hover img { transform: scale(1.05); }
    a.cli-in:hover .cli-setor { color: var(--frost); }
}
a.cli-in:focus-visible { outline: none; }

/* o ultimo bloco e um convite, nao um cliente. Com 13 clientes ele ocupa
   o resto da ultima linha: 3 colunas no desktop, 2 no tablet, 1 no celular */
.cli--voce { grid-column: span 3; }
@media (max-width: 1020px) { .cli--voce { grid-column: span 2; } }
@media (max-width: 640px) { .cli--voce { grid-column: span 1; } }
.cli--voce .cli-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
    padding: 28px clamp(24px, 3vw, 44px);
    background:
        radial-gradient(ellipse 60% 120% at 100% 50%, rgba(109, 199, 42, .16), transparent 70%),
        rgba(109, 199, 42, .06);
    box-shadow: inset 0 0 0 1px rgba(109, 199, 42, .5);
}
.cli--voce .cli-in::after { display: none; }
.cli--voce strong {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.35rem, 1rem + 1.1vw, 1.9rem);
    line-height: 1.1;
    color: var(--frost);
    max-width: 17ch;
    text-wrap: balance;
}
.cli--voce span {
    flex: 0 0 auto;
    padding: 13px 22px;
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--night);
    background: var(--signal);
    --cut: 8px;
    clip-path: var(--chanfro);
    transition: background-color .2s ease;
}
@media (hover: hover) {
    .cli--voce .cli-in:hover { background-color: rgba(109, 199, 42, .12); }
    .cli--voce .cli-in:hover span { background: var(--signal-hi); }
}

/* entrada: cada bloco "liga" em sequencia — uma varredura atravessa o
   bloco, o logo entra em foco e o LED acende */
.cli-in::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(139, 224, 74, .22), transparent);
    transform: translateX(-100%);
    pointer-events: none;
}
.js .parede .cli img,
.js .parede .cli--voce strong,
.js .parede .cli--voce span { opacity: 0; filter: blur(8px); transform: scale(.94); }
.js .parede .cli-in::after { background: #36504f; box-shadow: none; }

.js .parede.is-on .cli img,
.js .parede.is-on .cli--voce strong,
.js .parede.is-on .cli--voce span {
    opacity: 1;
    filter: none;
    transform: none;
    transition: opacity .6s ease, filter .6s ease, transform .6s cubic-bezier(.3, .7, .2, 1);
    transition-delay: calc(var(--i) * 75ms + .15s);
}
.js .parede.is-on .cli-in::after {
    background: var(--signal);
    box-shadow: 0 0 8px rgba(109, 199, 42, .8);
    transition: background-color .2s steps(1) calc(var(--i) * 75ms + .55s), box-shadow .2s steps(1) calc(var(--i) * 75ms + .55s);
}
.js .parede.is-on .cli-in::before {
    animation: varre .9s ease-out both;
    animation-delay: calc(var(--i) * 75ms);
}
@keyframes varre {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
/* depois de ligado, o hover responde na hora */
.js .parede.is-on a.cli-in:hover img,
.js .parede.is-on a.cli-in:focus-visible img { transform: scale(1.05); transition-delay: 0s; }

@media (max-width: 1020px) {
    .parede { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .parede { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cli-in { height: 156px; padding: 18px 12px 44px; --cut: 10px; }
    .cli img { max-height: 66px; max-width: min(92%, calc(var(--mw, 70%) * 1.1)); }
    .cli--alto .cli-in { padding-top: 8px; }
    .cli--alto img { max-height: 104px; }
    .cli-setor { left: 12px; right: 12px; bottom: 10px; font-size: .78rem; }
    .cli-in::after { right: 12px; top: 12px; width: 6px; height: 6px; }
    .cli--voce .cli-in { flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 16px; }
    .cli--voce strong { font-size: 1.05rem; }
    .cli--voce span { padding: 9px 12px; font-size: .85rem; --cut: 6px; }
}

.fatos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--line);
}
.fatos > div { padding: 28px 24px 0 0; }
.fatos > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.fatos dt {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--frost);
}
.fatos dd { margin: 6px 0 0; color: var(--mist); text-wrap: balance; }

/* ---------- depoimentos ---------- */
.depos { margin-bottom: clamp(72px, 9vw, 112px); }
.depos-titulo {
    margin: 0 0 22px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--frost);
}
.depos-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
/* so um depoimento aprovado: vira um destaque mais largo */
.depos.um .depos-grade { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

.depo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 22px;
    margin: 0;
    padding: 26px 28px 24px;
    background: var(--night-2);
    box-shadow: inset 0 0 0 1px var(--line);
    --cut: 14px;
    clip-path: var(--chanfro);
}
/* aspas grandes abrindo a citacao, no verde da marca */
.depo::before {
    content: "\201C";
    display: block;
    height: 34px;
    margin: -6px 0 -14px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--signal);
    opacity: .55;
}
.depo-texto { margin: 0; }
.depo-texto p {
    margin: 0;
    max-width: none;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--frost);
}
.depo-autor {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.depo-autor img {
    flex: 0 0 auto;
    width: 64px;
    height: 34px;
    object-fit: contain;
    object-position: left center;
    opacity: .9;
}
.depo-autor span { display: flex; flex-direction: column; font-size: .925rem; color: var(--mist); line-height: 1.35; }
.depo-autor strong { font-family: var(--f-display); font-weight: 600; font-size: 1rem; color: var(--frost); }

/* rascunhos esperando aprovacao: fora do site publicado, visiveis na previa */
.depo[data-pendente] { display: none; }
.depos.previa .depo[data-pendente] { display: flex; }
.depos.previa .depo[data-pendente]::after {
    content: "Rascunho: aguardando aprovação";
    position: absolute;
    right: 24px; top: 12px;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--amb, #f0cd7a);
}

@media (max-width: 760px) {
    .depos-grade { grid-template-columns: minmax(0, 1fr); }
    .depo { padding: 28px 20px 20px; }
    .depo-texto p { font-size: 1.0625rem; }
}

/* ---------- atendimento em todo o Brasil ---------- */
.brasil {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
}

.brasil-titulo {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem);
    line-height: 1.05;
    color: var(--frost);
    margin: 0 0 18px;
    text-wrap: balance;
}
.brasil-copy > p { color: var(--mist); font-size: 1.125rem; }

.brasil .fatos { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
.brasil .fatos > div,
.brasil .fatos > div + div { padding: 18px 0; border-left: 0; }
.brasil .fatos > div + div { border-top: 1px solid var(--line); }

.mapa { margin: 0; }
.mapa-svg { display: block; width: 100%; height: auto; overflow: visible; }

.m-pais {
    fill: var(--night-2);
    stroke: var(--signal);
    stroke-width: 1.5;
    stroke-linejoin: round;
}
.m-divisas { fill: none; stroke: var(--line-2); stroke-width: .8; }
.m-arco { fill: none; stroke: rgba(109, 199, 42, .45); stroke-width: 1.1; }
.m-cap { fill: var(--traffic); }
.m-pacote { fill: var(--signal-hi); }

.m-sede-ponto { fill: var(--signal); stroke: var(--night); stroke-width: 3; }
.m-onda {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: onda-mapa 2.4s ease-out infinite;
}
@keyframes onda-mapa {
    from { transform: scale(1); opacity: .8; }
    to   { transform: scale(4); opacity: 0; }
}


/* com JavaScript, as linhas saem da sede em leque quando o mapa aparece */
.js .mapa .m-arco { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .mapa .m-cap { opacity: 0; }
.js .mapa.is-visible .m-arco {
    animation: desenha 1s cubic-bezier(.5, 0, .2, 1) forwards;
    animation-delay: calc(.2s + var(--i) * 50ms);
}
.js .mapa.is-visible .m-cap {
    opacity: 1;
    transition: opacity .4s ease calc(.8s + var(--i) * 50ms);
}

@media (max-width: 900px) {
    .brasil { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .fatos { grid-template-columns: minmax(0, 1fr); }
    .fatos > div,
    .fatos > div + div { padding: 22px 0; border-left: 0; }
    .fatos > div + div { border-top: 1px solid var(--line); }
}

/* =================================================================
   SUPORTE REMOTO — tres passos ligados por um cabo
   ================================================================= */
.suporte { padding: clamp(80px, 10vw, 136px) 0; }

.passos {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

/* o cabo entre os passos, com um pacote indo do 1 ao 3 */
.passos::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 26px;
    right: calc((100% - 64px) / 3 - 26px);
    border-top: 2px dashed #b3c4be;
}
.passos::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 26px;
    width: 10px; height: 10px;
    background: var(--signal);
    box-shadow: 0 0 10px rgba(109, 199, 42, .8);
    animation: pacote 3.2s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes pacote {
    0%   { left: 26px; opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { left: calc((100% - 64px) / 3 * 2 + 64px + 21px); opacity: 0; }
}

.passo { position: relative; }
.passo p { color: var(--ink-2); max-width: 32ch; }
.passo p a { color: var(--ink); font-weight: 700; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.passo-n {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin-bottom: 22px;
    background: var(--night);
    color: var(--signal);
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.375rem;
    --cut: 9px;
    clip-path: var(--chanfro);
}

.passo-botoes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
}

@media (max-width: 860px) {
    .passos { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .passo { padding-left: 76px; }
    .passo-n { position: absolute; left: 0; top: -6px; margin: 0; }
    .passos::before { top: 26px; bottom: 40px; left: 25px; right: auto; border-top: 0; border-left: 2px dashed #b3c4be; }
    .passos::after { left: 21px; animation-name: pacote-v; }
    @keyframes pacote-v {
        0%   { top: 22px; opacity: 0; }
        10%  { opacity: 1; }
        85%  { opacity: 1; }
        100% { top: calc(100% - 50px); opacity: 0; }
    }
}

/* =================================================================
   CHAMADA FINAL + RODAPE
   ================================================================= */
.final {
    position: relative;
    overflow: hidden;
    padding: clamp(88px, 11vw, 148px) 0;
    color: var(--frost);
    background:
        radial-gradient(ellipse 50% 70% at 100% 50%, rgba(109, 199, 42, .10), transparent 70%),
        radial-gradient(circle at 1px 1px, rgba(147, 174, 176, .14) 1px, transparent 1.4px) 0 0 / 28px 28px,
        var(--night);
}

.final-in { position: relative; }

/* o mesmo escudo do mapa do topo, agora sozinho, emitindo ondas */
.final-escudo {
    position: absolute;
    right: 0;
    top: 50%;
    width: clamp(240px, 28vw, 380px);
    transform: translateY(-50%);
    overflow: visible;
}
.fe-halo { fill: rgba(109, 199, 42, .04); stroke: rgba(109, 199, 42, .22); stroke-width: 1; }
.fe-shield { fill: var(--night-2); stroke: var(--signal); stroke-width: 3; stroke-linejoin: round; }
.fe-lock { fill: none; stroke: var(--signal); stroke-width: 5; stroke-linecap: round; }
.fe-body { fill: var(--signal); }
.fe-hole { fill: var(--night-2); }
.fe-onda {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: onda 3.9s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes onda {
    0%   { transform: scale(.8); opacity: .6; }
    100% { transform: scale(2.3); opacity: 0; }
}

@media (max-width: 900px) {
    .final-escudo { display: none; }
}

.final-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    max-width: 17ch;
    margin: 0 0 22px;
    text-wrap: balance;
}
.final .lead { color: var(--mist); }

.final-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 30px;
    margin-top: 38px;
}
.final-link {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--frost);
    text-decoration: none;
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 2px;
    transition: border-color .2s ease;
}
.final-link:hover { border-color: var(--signal); }

.rodape {
    background: var(--night-4);
    color: var(--mist);
    padding: 64px 0 96px;   /* espaco para o atalho fixo do WhatsApp nao cobrir o texto */
    border-top: 1px solid var(--line);
}

.rodape-in {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
}

.rodape-marca img { width: 240px; height: auto; display: block; margin: 0 0 22px; }
.rodape-marca p { max-width: 44ch; margin-bottom: .6em; }

.rodape-col h2 {
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--frost);
    margin: 0 0 14px;
}
.rodape-col ul { list-style: none; margin: 0; padding: 0; }
.rodape-col a {
    display: inline-block;
    padding: 6px 0;
    color: var(--mist);
    text-decoration: none;
    transition: color .2s ease;
}
.rodape-col a:hover { color: var(--frost); }

.rodape-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: .9375rem;
}
.rodape-base p { margin: 0; }
/* a linha legal so quebra entre os blocos, nunca no meio do CNPJ */
.inteiro { white-space: nowrap; }
.rodape-verso { font-style: italic; color: var(--frost); }

/* tablet: a marca ocupa a linha de cima e as duas listas ficam lado a lado
   (em tres colunas o e-mail nao cabia e empurrava a pagina para o lado) */
@media (max-width: 1000px) {
    .rodape-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rodape-marca { grid-column: 1 / -1; }
}
/* e-mail longo pode quebrar em vez de vazar da tela */
.rodape-col a, .sobre-contato a, .final-link { overflow-wrap: anywhere; }

@media (max-width: 760px) {
    .rodape-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .rodape-col a { padding: 10px 0; }
}

/* ---------- atalho fixo do WhatsApp ---------- */
.zap {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    color: var(--night);
    /* a sombra fica no botao e o chanfro no fundo: clip-path cortaria a sombra */
    filter: drop-shadow(0 8px 16px rgba(4, 12, 14, .45));
    transform: translateY(130px);
    transition: transform .4s cubic-bezier(.3, .7, .2, 1);
}
.zap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--signal);
    --cut: 12px;
    clip-path: var(--chanfro);
    transition: background-color .2s ease;
}
.zap.is-on { transform: none; }
@media (hover: hover) { .zap:hover::before { background: var(--signal-hi); } }
.zap:focus-visible { outline: none; }
.zap:focus-visible::before { background: #fff; }
@media (max-width: 640px) {
    .zap { right: 16px; width: 54px; height: 54px; }
}
.zap svg { width: 30px; height: 30px; }
html:not(.js) .zap { transform: none; }

/* secoes fora da tela pausam as animacoes em CSS (classe posta pelo JS) */
.fora-da-tela *,
.fora-da-tela *::before,
.fora-da-tela *::after { animation-play-state: paused !important; }

/* =================================================================
   MOVIMENTO REDUZIDO
   Quem pediu menos movimento no sistema ve tudo no estado final,
   sem nada correndo sozinho.
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }

    .passos::after { display: none; }
    .btn::after { display: none; }
    .m-pacotes { display: none; }
    .plat-fileira { -webkit-mask-image: none; mask-image: none; }
    .plat-trilho { animation: none !important; width: auto; flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
    .plat-chip.copia { display: none; }
}

/* no desktop o texto da chamada final nao invade o escudo */
@media (min-width: 901px) {
    .final-in { padding-right: clamp(260px, 30vw, 420px); }
}

/* sem JavaScript o mapa fica estatico: some o controle que nao faria nada */
html:not(.js) .topo-bar,
html:not(.js) .topo-note { display: none; }

/* =================================================================
   PAGINAS INTERNAS
   ================================================================= */
.pagina-topo {
    padding: clamp(150px, 14vw, 196px) 0 56px;
    color: var(--frost);
    background:
        radial-gradient(ellipse 50% 90% at 85% 0%, rgba(109, 199, 42, .10), transparent 70%),
        radial-gradient(circle at 1px 1px, rgba(147, 174, 176, .14) 1px, transparent 1.4px) 0 0 / 28px 28px,
        var(--night);
}
.pagina-topo .lead { color: var(--mist); margin: 0; }

.pagina-titulo {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
    line-height: 1;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    text-wrap: balance;
}

/* ---------- PIX ---------- */
.pix { padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 120px); }

.pix-in {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
}

.pix-qr-box {
    display: inline-block;
    padding: 20px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #d3ded9;
    --cut: 14px;
    clip-path: var(--chanfro);
}

/* exibido a 280px a partir de um arquivo de 600px: a suavizacao padrao
   le melhor que image-rendering:pixelated numa escala nao inteira */
.pix-qr { display: block; width: 280px; height: auto; }

.pix-dados { margin: 24px 0 0; }
.pix-dados > div + div { margin-top: 14px; }
.pix-dados dt { font-size: .9375rem; color: var(--ink-2); }
.pix-dados dd {
    margin: 2px 0 0;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.1875rem;
    color: var(--ink);
}

/* passos numerados: e uma sequencia de verdade */
.pix-passos {
    list-style: none;
    counter-reset: passo;
    margin: 0 0 36px;
    padding: 0;
}
.pix-passos li {
    position: relative;
    counter-increment: passo;
    padding: 4px 0 0 56px;
    min-height: 40px;
    font-size: 1.125rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.pix-passos li + li { margin-top: 18px; }
.pix-passos li::before {
    content: counter(passo);
    position: absolute;
    left: 0; top: 0;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    background: var(--night);
    color: var(--signal);
    font-family: var(--f-display);
    font-weight: 700;
    --cut: 7px;
    clip-path: var(--chanfro);
}
.pix-passos strong { color: var(--ink); }

.pix-copiacola { margin-bottom: 26px; }
.pix-copiacola label {
    display: block;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.0625rem;
    margin-bottom: 8px;
}
.pix-copiacola textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-family: var(--f-mono);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-2);
    background: #fff;
    border: 0;
    box-shadow: inset 0 0 0 1px #c2d1cb;
    resize: none;
    word-break: break-all;
}
.pix-copiacola textarea:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 2px; }

.pix-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 14px;
}

/* o botao confirma a copia trocando de cor, e volta sozinho */
.btn.is-copiado { background: var(--signal-ink); color: #fff; }

.pix-aviso { font-family: var(--f-display); font-weight: 600; color: var(--signal-ink); }
.pix-obs { color: var(--ink-2); margin-bottom: 20px; }

@media (max-width: 860px) {
    .pix-in { grid-template-columns: minmax(0, 1fr); }
    .pix-qr-col { text-align: center; }
    .pix-qr { width: 240px; }
    .pix-dados { text-align: left; display: inline-block; }
    /* 16px: com menos que isso o Safari do iPhone da zoom na pagina quando o
       campo recebe foco (e o botao Copiar foca o campo para selecionar) */
    .pix-copiacola textarea { font-size: 16px; height: calc(5 * 1.55em + 26px); }
}
@media (max-width: 420px) {
    .pix-copiacola textarea { height: calc(6 * 1.55em + 26px); }
}

/* ---------- pagina de redirecionamento do WhatsApp ---------- */
.zap-pagina {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    color: var(--frost);
    background:
        radial-gradient(ellipse 60% 50% at 50% 40%, rgba(109, 199, 42, .10), transparent 70%),
        radial-gradient(circle at 1px 1px, rgba(147, 174, 176, .14) 1px, transparent 1.4px) 0 0 / 28px 28px,
        var(--night);
}

.zap-in {
    width: min(560px, 100% - var(--gutter) * 2);
    padding: 48px 0;
    text-align: center;
}
.zap-in .lead { color: var(--mist); margin: 0 auto; }

.zap-logo { display: inline-block; line-height: 0; margin-bottom: 28px; }
.zap-logo img { width: min(280px, 70vw); height: auto; display: block; }

.zap-titulo {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
    line-height: 1.05;
    margin: 0 0 14px;
}

.zap-conexao {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 40px 0 36px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: .9375rem;
    color: var(--mist);
}
.zap-linha {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--line-2);
}
.zap-progresso {
    position: absolute;
    left: 0; top: -1px; bottom: -1px;
    width: 0;
    background: var(--signal);
    box-shadow: 0 0 10px rgba(109, 199, 42, .8);
    animation: conecta 1.6s linear forwards;   /* mesmo tempo do redirecionamento */
}
.zap-progresso::after {
    content: "";
    position: absolute;
    right: -5px; top: 50%;
    width: 10px; height: 10px;
    background: var(--signal-hi);
    transform: translateY(-50%);
}
@keyframes conecta { to { width: 100%; } }

.zap-fallback { margin: 0 auto; color: var(--mist); font-size: 1rem; }
.zap-fallback a { color: var(--signal-hi); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .zap-progresso { width: 100%; }
}

/* =================================================================
   POLITICA DE PRIVACIDADE
   ================================================================= */
.legal-data { margin: 14px 0 0; font-size: .95rem; color: var(--mist); }

.legal { padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 9vw, 112px); }

.legal-in {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

/* resumo: fica parado ao lado enquanto o texto rola, no computador */
.legal-resumo {
    position: sticky;
    top: 108px;
    padding: 26px 26px 22px;
    background: var(--night);
    color: var(--frost);
    --cut: 14px;
    clip-path: var(--chanfro);
}
.legal-resumo h2 {
    margin: 0 0 14px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.25rem;
}
.legal-resumo ul { list-style: none; margin: 0; padding: 0; }
.legal-resumo li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.5;
    color: #cfe0de;
}
.legal-resumo li::before {
    content: "";
    position: absolute;
    left: 2px; top: .62em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 8px rgba(109, 199, 42, .7);
}

.legal-texto { max-width: 70ch; }
.legal-texto h2 {
    margin: 48px 0 14px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.375rem, 1.1rem + .8vw, 1.75rem);
    line-height: 1.2;
    color: var(--ink);
}
.legal-texto h2:first-child { margin-top: 0; }
.legal-texto h3 {
    margin: 26px 0 8px;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--ink);
}
.legal-texto p,
.legal-texto li { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.65; }
.legal-texto strong { color: var(--ink); }
.legal-texto ul { margin: 0 0 1em; padding-left: 0; list-style: none; }
.legal-texto ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.legal-texto ul li::before {
    content: "";
    position: absolute;
    left: 3px; top: .7em;
    width: 7px; height: 7px;
    background: var(--signal-ink);
    transform: rotate(45deg);
}
.legal-texto a,
.rodape-priv {
    color: inherit;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.legal-texto a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.legal-texto code {
    font-family: var(--f-mono);
    font-size: .9em;
    padding: 1px 6px;
    background: rgba(11, 29, 33, .07);
}

.legal-tabela {
    width: 100%;
    margin: 6px 0 18px;
    border-collapse: collapse;
    font-size: .975rem;
}
.legal-tabela th {
    text-align: left;
    font-family: var(--f-display);
    font-weight: 600;
    color: var(--ink);
    padding: 10px 12px;
    border-bottom: 2px solid var(--ink);
}
.legal-tabela td {
    padding: 12px;
    color: var(--ink-2);
    border-bottom: 1px solid #c4d3ce;
    vertical-align: top;
}

.rodape-priv { margin-left: .4em; color: var(--frost); }

@media (max-width: 900px) {
    .legal-in { grid-template-columns: minmax(0, 1fr); }
    .legal-resumo { position: static; }
}

/* celular: a tabela vira uma ficha por cookie, sem rolagem lateral */
@media (max-width: 640px) {
    .legal-tabela thead { display: none; }
    .legal-tabela, .legal-tabela tbody, .legal-tabela tr, .legal-tabela td { display: block; width: 100%; }
    .legal-tabela tr { padding: 12px 0; border-bottom: 1px solid #c4d3ce; }
    .legal-tabela td { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px; padding: 3px 0; border: 0; }
    .legal-tabela td::before {
        content: attr(data-rotulo);
        font-family: var(--f-display);
        font-weight: 600;
        color: var(--ink);
    }
    .legal-tabela td code { justify-self: start; }
    .rodape-priv { margin-left: 0; }
}