/* ═══════════════════════════════════════════════════════════════════════════
   PETAFLOP — folha única das páginas públicas (pt-BR e en).
   Escrita à mão, sem framework e sem build.

   As duas árvores de idioma (/ e /en/) compartilham ESTA folha. Por isso não
   existe nada de texto aqui dentro — nem `content:"Produtos"`, nem aspas
   tipográficas de um idioma só. Conteúdo mora no HTML, que é traduzido; estilo
   mora aqui, que não é.

   ─── DE ONDE VEM ESTE SISTEMA ─────────────────────────────────────────────
   As medidas abaixo não foram escolhidas no olho: saíram do CSS do apple.com
   (`main.built.css`, setembro de 2026), que é o desenho de referência para
   página clara com muito respiro.

     · contêiner 1068px  — o valor aparece 31 vezes na folha deles
     · coluna de texto 734px — 20 vezes; a leitura NÃO usa a largura do contêiner
     · corpo 17px, entretítulo 19/21px
     · escala de título 28 / 32 / 40 / 48 / 56
     · letter-spacing de título entre −.005em e −.022em
     · line-height de título entre 1.07 e 1.10
     · botão em pílula (eles usam raio 980px)
     · alternância de fundo branco / cinza claro para separar seção, em vez de
       linha divisória

   O que NÃO veio de lá: a cor. O índigo é da Petaflop, e o tom precisou mudar
   com o fundo — ver o bloco de cor logo abaixo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ---------- cor ----------
     O acento da versão escura era #7c8cff, escolhido para dar 7:1 contra um
     fundo quase preto. Em branco ele dá 2,98:1 e REPROVA como texto — a mesma
     cor não serve para os dois fundos. #4a55cc é a mesma família de índigo
     escurecida até 6,06:1 contra o branco, e branco por cima dele também dá
     6,06:1: serve para link E para fundo de botão, sem precisar de variante.

     O verde é o "no ar". O da versão escura (#45e3a0) também reprovava em
     branco; este dá 5,0:1.

     OS CINZAS SÃO MAIS ESCUROS QUE OS DA APPLE. O #86868b deles dá 3,62:1 no
     branco e 3,33:1 no cinza de seção: reprova em AA. Eles usam esse tom em
     texto grande ou dispensável; aqui ele estaria em legenda e rótulo, que são
     conteúdo. Cada tom abaixo foi medido nos DOIS fundos, porque a seção cinza
     é o caso mais apertado. */
  --bg:#ffffff;
  --bg-alt:#f5f5f7;                 /* alternância de seção */
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  --ink:#1d1d1f;                    /* 16,8:1 no branco */
  --ink-soft:#5e5e63;               /* 6,3:1 — texto secundário */
  --ink-dim:#6e6e73;                /* 4,7:1 mesmo no cinza — legenda e rótulo */
  --accent:#4a55cc;
  --accent-2:#3a44ad;               /* hover */
  --accent-soft:#eff1fb;            /* realce de fundo */
  --ok:#1a7f57;

  /* ---------- tipo ----------
     Nenhuma fonte de rede, de propósito: a fonte do sistema já está carregada
     quando o HTML chega. Sem segunda conexão, sem FOUT, sem troca de métrica
     depois do primeiro paint. De quebra, em Mac e iPhone o `system-ui` É a SF
     Pro — a mesma fonte do apple.com, sem baixar nada.

     Peso 600 e não 700 nos títulos: é o que a Apple usa, e a diferença entre
     Semibold e Bold é o que separa "refinado" de "anúncio". */
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* ---------- layout ---------- */
  --maxw:1068px;
  --maxw-texto:734px;
  --gutter:clamp(20px,4vw,22px);
  --radius:18px;                    /* cartão */
  --radius-sm:12px;
  --barra:56px;                     /* altura real da barra do topo */

  /* ESCALA DE ESPAÇAMENTO — uma só.
     O ritmo de seção para seção vive nestas três variáveis. Nunca sobrescrever
     padding de <section> no HTML: quem faz isso cria a sétima exceção que
     ninguém mais consegue afinar. */
  --s-sec:clamp(72px,9vw,120px);
  --s-head:clamp(28px,3.4vw,44px);
  --s-blk:clamp(18px,2.2vw,26px);

  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 3px rgba(0,0,0,.05), 0 8px 28px -12px rgba(0,0,0,.14);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barra) + 16px);}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  /* `letter-spacing` POSITIVO no corpo, negativo nos títulos. Não é capricho:
     medido no oxide.computer (0,021em a 16px) e no stripe.com (0,013em a 15px).
     Letra pequena precisa de ar entre os caracteres; letra grande precisa do
     contrário, senão as palavras se desmancham em letras soltas. */
  font-size:17px;line-height:1.47;letter-spacing:.011em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
/* `dd` nasce com `margin-inline-start:40px` no navegador, e `dl` com 1em em
   cima e embaixo. Sem zerar aqui, cada lista de definição ganha um recuo
   fantasma que só aparece na linha que não tem margem própria. */
dl,dd{margin:0;}
h1,h2,h3,h4,p{margin:0;text-wrap:pretty;}
h1,h2{text-wrap:balance;}
:target{scroll-margin-top:calc(var(--barra) + 24px);}

/* ---------- TECLADO ----------
   `:focus-visible` e não `:focus`: o anel não deve aparecer para quem clicou com
   o mouse, senão vira sujeira visual e alguém acaba pedindo para removê-lo — e aí
   quem navega por teclado fica sem saber onde está. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}

/* Pular a navegação: sem isto, chegar ao conteúdo custa seis tabulações por visita. */
.pular{
  position:fixed;left:16px;top:-72px;z-index:100;
  background:var(--accent);color:#fff;font-weight:600;font-size:15px;
  padding:11px 20px;border-radius:999px;transition:top .18s var(--ease);
}
.pular:focus{top:16px;}

/* ---------- utilitários ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.mono{font-family:var(--mono);font-variant-ligatures:none;letter-spacing:0;}
.ext{display:inline-flex;align-items:center;gap:.4em;}
.ext svg{width:.8em;height:.8em;flex:none;opacity:.6;}

/* ═══ BARRA DO TOPO ═══════════════════════════════════════════════════════
   Translúcida com desfoque, como a do apple.com: o conteúdo passa por baixo e
   continua legível. 80% de opacidade é o mínimo para o texto da barra não
   competir com o que está rolando atrás. */
.topo{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex;align-items:center;gap:16px;height:var(--barra);}

.marca{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.01em;}
.marca .glifo{width:24px;height:24px;flex:none;border-radius:6px;}

.nav-links{margin-left:auto;display:flex;align-items:center;gap:26px;}
.nav-links a{font-size:14px;font-weight:400;color:var(--ink-soft);transition:color .15s;}
.nav-links a:hover{color:var(--ink);}

/* Seletor de idioma. Dois links, não um <select>: é navegação, e navegação que o
   robô de busca precisa seguir para achar a outra árvore. `aria-current` marca a
   página em que já se está. */
.idioma{display:flex;align-items:center;gap:2px;margin-left:16px;
  border:1px solid var(--line);border-radius:999px;padding:2px;}
.idioma a{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  padding:4px 9px;border-radius:999px;color:var(--ink-dim);transition:.15s;
}
.idioma a:hover{color:var(--ink);}
.idioma a[aria-current="true"]{background:var(--accent);color:#fff;}

/* Botão do menu no celular. Só existe quando o JS confirmou que está vivo
   (`html.js`, escrito por script inline no <head>): se o JS falhar, o botão
   nunca aparece e os links ficam visíveis do jeito que o HTML os entregou.
   Menu que depende de JS + JS que não carregou = site sem navegação nenhuma. */
.menu-btn{display:none;}

@media(max-width:860px){.nav-links{gap:18px;}}
@media(max-width:720px){
  .js .menu-btn{
    display:grid;place-items:center;margin-left:auto;
    width:38px;height:38px;background:transparent;color:var(--ink);
    border:1px solid var(--line);border-radius:999px;cursor:pointer;
  }
  .js .menu-btn svg{width:17px;height:17px;}
  /* FECHADO É O ESTADO PADRÃO, E QUEM DIZ ISSO É O CSS.
     Se o menu começasse aberto e o JS o fechasse depois, haveria um quadro com
     o painel na tela — o mesmo pulo que a gente evita no <head>. Sem JS, nada
     disto vale (`.js` nunca entra) e os links ficam visíveis. */
  .js .nav-links{
    display:none;
    position:absolute;left:0;right:0;top:var(--barra);
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:rgba(255,255,255,.98);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line-soft);
    padding:6px var(--gutter) 16px;
  }
  .js[data-menu="aberto"] .nav-links{display:flex;}
  /* `> a` e não `a`: o seletor descendente também alcançava os dois links de
     dentro da pílula PT/EN, que ficavam com padding zero na horizontal e
     viravam duas letras empilhadas num círculo. */
  .js .nav-links > a{padding:13px 0;font-size:17px;color:var(--ink);border-bottom:1px solid var(--line-soft);}
  .js .nav-links > a:last-of-type{border-bottom:0;}
  .js .idioma{margin:14px 0 0;align-self:flex-start;}
}

/* ═══ ABERTURA ════════════════════════════════════════════════════════════
   Centralizada, que é como a Apple compõe: título grande, uma linha de apoio,
   e o produto logo abaixo. Não tem cartão de estatística nem tira de fatos —
   CNPJ, cidade e servidor já estão no rodapé e na seção da empresa. */
.heroi{position:relative;padding:clamp(56px,8vw,96px) 0 var(--s-sec);text-align:center;}

/* A grade de fundo é o desenho da marca: um petaflop é 10¹⁵ operações por
   segundo, e a grade é o retrato disso — células iguais, muitas. Feita com
   gradiente e não com <img>: nada para baixar. Em fundo claro ela precisa ser
   quase imperceptível, senão vira papel quadriculado. */
.heroi::before{
  content:"";position:absolute;inset:0 0 auto;height:min(520px,70%);
  background:
    linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px) 0 0/58px 58px,
    linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px) 0 0/58px 58px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 0%,#000 0%,transparent 72%);
          mask-image:radial-gradient(90% 70% at 50% 0%,#000 0%,transparent 72%);
  pointer-events:none;
}
.heroi > .wrap{position:relative;z-index:1;}

.heroi h1{
  font-size:clamp(33px,5.6vw,56px);font-weight:600;letter-spacing:-.022em;line-height:1.07;
  /* 24ch e não 18: em 18 a frase caía em quatro linhas a 1280px. Um título
     institucional é mais longo que um slogan e precisa de mais medida. */
  max-width:24ch;margin:0 auto;
}
.lead{
  margin:20px auto 0;font-size:clamp(19px,1.8vw,21px);line-height:1.42;
  color:var(--ink-soft);max-width:var(--maxw-texto);
}

.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;justify-content:center;}
/* Botão em pílula, compacto. A Apple usa raio 980px e um corpo de 17px: o
   formato é o que faz o botão parecer clicável sem precisar de sombra. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:17px;font-weight:400;line-height:1.2;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.btn.primario{background:var(--accent);color:#fff;}
.btn.primario:hover{background:var(--accent-2);}
.btn.fantasma{background:transparent;color:var(--accent);border-color:var(--line);}
.btn.fantasma:hover{border-color:var(--accent);background:var(--accent-soft);}
/* Links de ação da abertura. A Apple não usa botão aqui: usa dois links em azul
   com um chevron, no corpo do entretítulo. O botão em pílula fica para a ação
   dentro do cartão de produto, onde de fato se compra. Dois pesos de chamada
   em vez de um só — e a abertura não vira um formulário. */
.acoes-texto{
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;
  margin-top:22px;font-size:clamp(17px,1.6vw,19px);
}
.acoes-texto a{color:var(--accent);display:inline-flex;align-items:center;gap:5px;}
/* A mesma chamada, no corpo de uma seção alinhada à esquerda. Só o herói é
   centralizado; herdar o `justify-content:center` aqui deixaria o link boiando
   no meio de um parágrafo alinhado à margem. */
.acoes-texto.acoes-esq{justify-content:flex-start;margin-top:var(--s-blk);font-size:17px;}

/* O RECADO. A página inteira fala em terceira pessoa; esta é a única frase em
   que uma pessoa aparece e fala com quem está lendo. Régua à esquerda e corpo
   um passo maior para marcar a mudança de voz — é o mesmo recurso que revista
   usa para separar o comentário do autor do texto corrido. Um por página; dois
   já seriam um padrão, e padrão é o que a gente está tentando evitar. */
.prosa .recado{
  margin-top:var(--s-blk);padding-left:22px;border-left:2px solid var(--accent);
  font-size:19px;line-height:1.5;color:var(--ink);letter-spacing:.004em;
}
.acoes-texto a:hover{text-decoration:underline;}
/* O chevron é `aria-hidden` no HTML: é seta decorativa, e um leitor de tela
   lendo "maior que" no fim de cada link só atrapalha. */
.acoes-texto span{font-size:1.15em;line-height:1;transition:transform .15s var(--ease);}
.acoes-texto a:hover span{transform:translateX(2px);}

/* No celular os botões quebravam em duas linhas, cada um com a largura do
   próprio texto — duas caixas desalinhadas. Empilhados e esticados viram uma
   coluna só, que é o alvo maior para o polegar. */
@media(max-width:520px){.acoes{flex-direction:column;align-items:stretch;}}

/* ═══ SEÇÕES ══════════════════════════════════════════════════════════════
   A separação entre seções é MUDANÇA DE FUNDO, não linha divisória: branco,
   cinza, branco, cinza. É o que dá o respiro da página clara — uma régua de
   1px a cada 120px de espaço faria o olho tropeçar no divisor em vez de
   perceber o bloco novo.

   O título de seção é uma FRASE e não leva rótulo em caixa alta em cima. E as
   formas das seções não se repetem: uma é cartão, outra é texto corrido, outra
   é duas colunas. Quando toda seção tem a mesma forma, a página soa a gerador
   de landing page. */
section{padding:var(--s-sec) 0;}
section.alt{background:var(--bg-alt);}
section h2{
  font-size:clamp(28px,3.6vw,40px);font-weight:600;letter-spacing:-.016em;line-height:1.1;
  max-width:24ch;margin-bottom:var(--s-head);
}

/* Texto corrido. Usado onde a informação é um argumento e não uma lista de
   itens comparáveis. Os parágrafos têm tamanhos diferentes de propósito. */
.prosa p{color:var(--ink-soft);font-size:17px;line-height:1.52;max-width:var(--maxw-texto);}
.prosa p + p{margin-top:var(--s-blk);}
.prosa strong{color:var(--ink);font-weight:590;}
.prosa .mono{font-size:.92em;color:var(--ink);}
/* O expoente do 10¹⁵ na etimologia do nome. `line-height:0` impede que ele
   empurre a entrelinha do parágrafo, que é o efeito padrão de <sup>. */
.prosa sup{font-size:.68em;vertical-align:super;line-height:0;}

/* ═══ PRODUTO ═════════════════════════════════════════════════════════════ */
/* Entrada de produto: texto à esquerda, ação à direita. Em bloco único o
   cartão ocupava 1068px com a descrição presa em 52ch — metade dele ficava
   vazia. Com a ação na outra coluna a linha inteira tem função. */
.produto{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,56px);align-items:center;
  background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:clamp(24px,3.4vw,38px);box-shadow:var(--shadow);
}
@media(max-width:760px){.produto{grid-template-columns:1fr;gap:22px;align-items:start;}}

.produto h3{font-size:clamp(21px,2.2vw,26px);font-weight:600;letter-spacing:-.014em;}
.produto .desc{margin-top:14px;color:var(--ink-soft);font-size:16px;line-height:1.5;max-width:58ch;}
.produto .desc strong{color:var(--ink);font-weight:600;}



/* Na coluna da direita a ação empilha: botão em cima, preço embaixo. */
.produto-pe{margin-top:0;}


/* ═══ PERFIS ═════════════════════════════════════════════════════════════ */
.perfis{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.perfis a{
  display:inline-flex;align-items:center;gap:7px;font-size:15px;
  padding:8px 16px;border:1px solid var(--line);border-radius:999px;color:var(--accent);
  transition:.15s;
}
.perfis a:hover{background:var(--accent-soft);border-color:var(--accent);}

/* ═══ CONTATO ═════════════════════════════════════════════════════════════ */
.canais{display:grid;gap:10px;max-width:var(--maxw-texto);}
.canal{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;
  background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:16px 20px;font-size:16px;color:var(--ink-soft);
}
.canal strong{color:var(--ink);font-weight:600;}
.canal a{color:var(--accent);font-size:15px;}
.canal a:hover{color:var(--accent-2);}

/* ═══ RODAPÉ ══════════════════════════════════════════════════════════════ */
footer{background:var(--bg-alt);border-top:1px solid var(--line-soft);padding:40px 0 36px;}
.pe{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-start;}
/* Os links do rodapé repetem os do topo de propósito: é a rede de segurança de
   quem está sem JS no celular, onde o menu do topo vira um botão. */
.pe nav{display:flex;flex-wrap:wrap;gap:8px 22px;}
.pe nav a{font-size:14px;color:var(--ink-soft);}
.pe nav a:hover{color:var(--ink);text-decoration:underline;}
.pe-legal{font-size:13px;color:var(--ink-dim);line-height:1.6;}
.pe-legal strong{color:var(--ink-soft);font-weight:600;}
.pe-nota{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-dim);display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;}

/* ═══ PÁGINAS DE TEXTO (privacidade, 404) ═════════════════════════════════ */
.doc{padding:clamp(48px,7vw,80px) 0 var(--s-sec);}
.doc-corpo{max-width:var(--maxw-texto);}
.doc h1{font-size:clamp(32px,4.4vw,48px);font-weight:600;letter-spacing:-.02em;line-height:1.08;}
.doc .atualizado{margin-top:14px;font-size:14px;color:var(--ink-dim);}
.doc h2{margin:56px 0 0;font-size:24px;font-weight:600;letter-spacing:-.01em;max-width:none;}
.doc h3{margin-top:32px;font-size:18px;font-weight:600;}
.doc p,.doc li{color:var(--ink-soft);font-size:17px;line-height:1.52;}
.doc p{margin-top:16px;}
.doc ul{margin-top:16px;display:grid;gap:10px;}
/* MARCADOR POSICIONADO, E NÃO `display:flex` NO <li>.
   A versão flex (bolinha e texto como dois itens) parecia funcionar e quebrava
   em silêncio no primeiro item que começasse com <strong>: o negrito virava um
   terceiro item flex e ganhava uma COLUNA só dele, com o resto da frase
   escorrendo ao lado. Vale para toda a política — quase todo item de lista lá
   começa com um termo em negrito. */
.doc ul li{position:relative;padding-left:20px;}
.doc ul li::before{content:"";position:absolute;left:3px;top:11px;
  width:5px;height:5px;border-radius:50%;background:var(--accent);}
.doc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.doc a:hover{color:var(--accent-2);}
/* O sublinhado acima é para link DENTRO do texto corrido. Num botão ele vira
   ruído — e a página 404 é inteira `.doc`, então sem esta linha os botões saem
   sublinhados. */
.doc .btn{text-decoration:none;}
.doc strong{color:var(--ink);font-weight:600;}
.doc .destaque{
  margin-top:24px;background:var(--bg-alt);border-radius:var(--radius-sm);
  padding:20px 24px;
}
.doc .destaque p:first-child{margin-top:0;}
.doc .voltar{margin-top:48px;}

.erro{min-height:56vh;display:grid;place-items:center;text-align:center;}
.erro .codigo{font-size:clamp(56px,11vw,96px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--accent);}
.erro h1{margin-top:16px;}
.erro p{max-width:44ch;margin-left:auto;margin-right:auto;}
.erro h2{margin-top:0;font-size:22px;font-weight:600;letter-spacing:-.01em;}
.erro hr{border:0;border-top:1px solid var(--line);margin:48px auto;max-width:240px;}
.erro .pe-nota{margin-top:0;padding-top:0;border-top:0;}

/* ═══ MOVIMENTO ═══════════════════════════════════════════════════════════
   Uma regra só, no fim, valendo para a página inteira. Quem pediu ao sistema
   para reduzir movimento normalmente tem um motivo clínico — vestibular,
   enxaqueca, epilepsia fotossensível. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* ═══ IMPRESSÃO ═══════════════════════════════════════════════════════════
   As páginas legais são as que de fato se imprimem (alguém arquiva a política
   que aceitou). Agora que o site já é claro, sobra esconder o que não serve no
   papel e revelar o endereço dos links. */
@media print{
  .topo,.pular,footer,.acoes{display:none;}
  .doc a{color:#000;}
  .doc a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555;}
}