/* ==========================================================================
   Power Vending — site.css (único arquivo de estilo)
   Base: site-v1 (tema escuro) adaptado à estrutura do build. Mobile-first.
   Paleta oficial: #16ACE3 (ciano) · #2A419A (azul médio) · #272A66 (marinho)
   Fontes: Archivo (títulos) + IBM Plex Sans / Mono (corpo e dados)
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Cores institucionais (skill power-vending-brand) */
  --pv-ciano: #16ACE3;
  --pv-azul: #2A419A;
  --pv-marinho: #272A66;

  /* Fundo escuro (derivado do marinho) */
  --fundo: #080A1C;
  --fundo-2: #0D1030;
  --fundo-3: #131740;
  --fundo-rodape: #05071A;
  --linha: rgba(255, 255, 255, 0.10);
  --linha-forte: rgba(255, 255, 255, 0.18);

  /* Texto sobre fundo escuro */
  --texto: #EEF1FA;
  --texto-2: #B7BED6;
  --texto-3: #7E879F;
  --brilho: rgba(22, 172, 227, 0.35);

  /* Cards claros (máquinas) */
  --pv-branco: #FFFFFF;
  --pv-fundo-claro: #F4F6FA;

  --cor-ok: #3DDC97;
  --cor-erro: #FF7B7B;

  /* Tipografia */
  --fonte-titulo: "Archivo", system-ui, Arial, sans-serif;
  --fonte-corpo: "IBM Plex Sans", system-ui, Arial, sans-serif;
  --fonte-dados: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Layout */
  --largura-max: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --raio: 14px;
  --raio-p: 6px;
  --altura-header: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Deslocamento horizontal da mancha do hero ao mouse (site.js atualiza; −0,5 a 0,5) */
  --px: 0;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--altura-header); overflow-x: clip; }
body {
  margin: 0; background: var(--fundo); color: var(--texto); isolation: isolate;
  font-family: var(--fonte-corpo); font-size: 17px; line-height: 1.6;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0; color: var(--texto); }
h1 { font-size: clamp(2rem, 3.7vw, 3.15rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25rem; }
ul.lista-limpa { list-style: none; padding: 0; margin: 0; }
address { font-style: normal; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--pv-ciano); outline-offset: 2px;
}
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--texto-2); max-width: 60ch; }
.texto-centro { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ---------- 3. LAYOUT ---------- */
.container { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: 0 var(--gutter); }
main { position: relative; z-index: 1; }
.secao { position: relative; isolation: isolate; padding: clamp(72px, 10vw, 140px) 0; }
.secao > .container { position: relative; z-index: 1; }
main > .secao:first-child { padding-top: calc(var(--altura-header) + clamp(48px, 8vw, 96px)); }
.secao__cabeca { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.secao__cabeca h2 { margin-bottom: 18px; }

/* Grade de fundo (textura industrial sutil) */
.secao--grade::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
}

.grade { display: grid; gap: 20px; }
@media (min-width: 768px) {
  .grade--2 { grid-template-columns: repeat(2, 1fr); }
  .grade--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) { .grade--4 { grid-template-columns: repeat(4, 1fr); } }

/* Sobretítulo mono em ciano (com traço) */
.sobretitulo {
  font-family: var(--fonte-dados); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pv-ciano); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
}
.sobretitulo::before { content: ''; width: 28px; height: 1px; background: var(--pv-ciano); }
.sobretitulo--sub { text-transform: none; letter-spacing: .02em; font-size: .9rem; }
.sobretitulo--sub::before { content: '_'; width: auto; height: auto; background: none; font-weight: 500; }

/* Marcação de pendência — NUNCA aparece no site publicado (revisão transversal, 06/10/2026).
   A lista de pendências vive só em docs/STATUS.md. Para revisar as marcações durante o trabalho,
   acrescente a classe "mostrar-pendencias" ao <body> (ou rode no console: document.body.classList.add('mostrar-pendencias')). */
.pendente { display: none !important; }
body.mostrar-pendencias .pendente {
  display: inline-block !important; background: rgba(255, 196, 0, 0.12); color: #FFD66B;
  border: 1px dashed rgba(255, 196, 0, 0.6); border-radius: var(--raio-p);
  padding: 4px 8px; font-family: var(--fonte-dados); font-size: 0.75rem;
}

/* ---------- 4. FUNDO ANIMADO (blobs + pontos de luz, só CSS) ---------- */
.fundo-animado { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fundo-animado__blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .8; will-change: transform;
  background: radial-gradient(circle, rgba(22,172,227,0.55) 0%, rgba(42,65,154,0.45) 40%, transparent 70%);
}
.fundo-animado__blob--1 { width: 56vw; height: 56vw; left: -18vw; top: 42vh; animation: blob-1 38s ease-in-out infinite alternate; }
.fundo-animado__blob--2 { width: 48vw; height: 48vw; right: -16vw; top: 52vh; animation: blob-2 46s ease-in-out infinite alternate; opacity: .45; }
.fundo-animado__blob--3 { width: 36vw; height: 36vw; left: 30vw; top: 86vh; animation: blob-3 54s ease-in-out infinite alternate; opacity: .35; }
.fundo-animado__ponto {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(22,172,227,.8) 30%, transparent 70%);
  box-shadow: 0 0 18px 6px rgba(22,172,227,0.35);
  animation: ponto 9s ease-in-out infinite;
}
.fundo-animado__ponto:nth-child(4) { left: 12%; top: 28%; animation-delay: 0s; }
.fundo-animado__ponto:nth-child(5) { left: 78%; top: 22%; animation-delay: -3s; }
.fundo-animado__ponto:nth-child(6) { left: 64%; top: 64%; animation-delay: -5s; }
.fundo-animado__ponto:nth-child(7) { left: 22%; top: 76%; animation-delay: -7s; }
.fundo-animado__ponto:nth-child(8) { left: 90%; top: 86%; animation-delay: -2s; }
@keyframes blob-1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(10vw, 8vh) scale(1.15); } 100% { transform: translate(4vw, -6vh) scale(.95); } }
@keyframes blob-2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-8vw, -10vh) scale(1.12); } 100% { transform: translate(-3vw, 6vh) scale(1.02); } }
@keyframes blob-3 { 0% { transform: translate(0, 0) scale(.9); } 50% { transform: translate(6vw, -12vh) scale(1.1); } 100% { transform: translate(-6vw, -4vh) scale(1); } }
@keyframes ponto { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .9; transform: scale(1.2); } }

/* ---------- 5. BOTÕES ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.98rem;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; line-height: 1.2;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
}
.botao:hover { transform: translateY(-2px); }
.botao svg { width: 18px; height: 18px; }
.botao--primario { background: var(--pv-ciano); color: var(--pv-marinho); }
.botao--primario:hover { box-shadow: 0 12px 40px -8px var(--brilho); color: var(--pv-marinho); }
.botao--secundario { border-color: var(--linha-forte); color: var(--texto); background: rgba(255,255,255,0.03); }
.botao--secundario:hover { border-color: var(--pv-ciano); }
.botao--escuro { background: var(--fundo-2); color: var(--texto); border-color: var(--linha-forte); }
.botao--escuro:hover { border-color: var(--pv-ciano); }
.botao--claro { background: var(--pv-branco); color: var(--pv-marinho); }
.botao--bloco { width: 100%; }
.botao[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- 6. HEADER (partials/header.html) ---------- */
.pular-conteudo {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--pv-ciano); color: var(--pv-marinho); padding: 8px 16px; border-radius: var(--raio-p);
}
.pular-conteudo:focus { top: 8px; }

.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
/* Fundo com desfoque num pseudo-elemento: backdrop-filter no próprio .header vira o bloco de contenção
   do .nav (position: fixed) e o painel do menu mobile fica com a altura do header (D-20).
   Regra: nunca colocar backdrop-filter, filter ou transform no .header nem em ancestrais do .nav. */
.header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(8, 10, 28, 0); transition: background .3s;
}
.header.rolado::before, .header.menu-aberto::before { background: rgba(8, 10, 28, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.header.menu-aberto::before { background: var(--fundo); }
.header.rolado, .header.menu-aberto { border-color: var(--linha); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--altura-header); }

.marca { display: inline-flex; align-items: center; flex-shrink: 0; }
.marca__img { height: 26px; width: auto; }
@media (min-width: 600px) { .marca__img { height: 34px; } }
.marca__texto { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; color: var(--texto); }
.marca__texto span { color: var(--pv-ciano); }

.menu-botao {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; flex-shrink: 0;
  width: 44px; height: 44px; padding: 10px; background: transparent;
  border: 1px solid var(--linha-forte); border-radius: 10px; color: var(--texto);
}
.menu-botao__linha { display: block; height: 2px; width: 100%; background: currentColor; transition: transform .3s, opacity .3s; }
.menu-botao[aria-expanded="true"] .menu-botao__linha:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__linha:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] .menu-botao__linha:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav {
  position: fixed; top: var(--altura-header); left: 0; right: 0; bottom: 0;
  background: var(--fundo); display: none; padding: 24px var(--gutter) 32px; overflow-y: auto; overscroll-behavior: contain;
}
.nav.aberto { display: block; }
.nav__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nav__link {
  display: block; padding: 14px 0; font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.25rem;
  color: var(--texto-2); border-bottom: 1px solid var(--linha); position: relative;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--texto); }
.nav__link[aria-current="page"] { border-left: 3px solid var(--pv-ciano); padding-left: 12px; }
.nav__cta { margin-top: 20px; width: 100%; }

@media (min-width: 900px) {
  .menu-botao { display: none; }
  .nav { position: static; display: flex; align-items: center; gap: 20px; background: transparent; padding: 0; overflow: visible; }
  .nav__lista { flex-direction: row; gap: 22px; }
  .nav__link { padding: 6px 0; font-size: 0.92rem; border-bottom: 0; white-space: nowrap; }
  .nav__link[aria-current="page"] { border-left: 0; padding-left: 0; }
  .nav__link[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--pv-ciano); border-radius: 2px; }
  .nav__cta { margin-top: 0; width: auto; padding: 10px 18px; font-size: 0.88rem; }
  .marca__img { height: 28px; }
}
/* 900–1099 px: header compacto para o CTA não sair da tela (D-20) */
@media (min-width: 1100px) {
  .nav { gap: 30px; }
  .nav__lista { gap: 30px; }
  .nav__link { font-size: 0.95rem; }
  .nav__cta { padding: 11px 20px; font-size: 0.9rem; }
  .marca__img { height: 34px; }
}

/* ---------- 7. HERO (3 cenas em camadas) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: calc(var(--altura-header) + 16px) 0 0;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 100%; opacity: .9; }
.hero__fundo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,10,28,0) 0%, rgba(8,10,28,0) 62%, var(--fundo) 100%), /* respiro escuro antes da faixa de números */
    linear-gradient(90deg, var(--fundo) 0%, rgba(8,10,28,.55) 45%, rgba(8,10,28,.15) 100%);
}
.hero__blob {
  position: absolute; z-index: 1; left: 48%; top: -22%; width: 46vw; height: 46vw; max-width: 600px; max-height: 600px;
  border-radius: 50%; filter: blur(50px); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(22,172,227,0.85) 0%, rgba(42,65,154,0.7) 30%, rgba(42,65,154,0) 68%);
  /* só horizontal: vai e volta (esquerda → direita) em ~14 s, com variação suave de opacidade; sem escala.
     O mouse desloca no máximo 3 px (--px varia de −0,5 a 0,5). */
  animation: hero-blob 14s ease-in-out infinite;
  transform: translateX(calc(var(--px) * 6px));
}
@keyframes hero-blob {
  0%   { translate: -9% 0; opacity: .7; }
  50%  { translate: 9% 0;  opacity: 1; }
  100% { translate: -9% 0; opacity: .7; }
}
.hero__grade { position: relative; z-index: 2; display: grid; gap: 24px; align-items: center; }
.hero__texto { padding-bottom: 24px; position: relative; z-index: 2; }
.hero__texto h1 { margin: 6px 0 18px; max-width: 20ch; }
.hero__texto .lead { margin-bottom: 28px; font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--texto); max-width: 52ch; }
.hero__apoio {
  min-height: 1.6em; margin: 0 0 28px; font-family: var(--fonte-dados); font-size: .82rem; letter-spacing: .04em; color: var(--pv-ciano);
  transition: opacity .5s var(--ease);
}
.hero__apoio.saindo { opacity: 0; }
.hero__acoes { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__indicadores { display: flex; gap: 10px; margin-top: 28px; }

/* --ph é a altura de referência da cena (as camadas são dimensionadas a partir dela).
   No celular o palco tem essa altura; no desktop ele estica até a base da coluna de texto e o hero (overflow hidden)
   corta máquina, pessoa e mancha nessa linha — logo abaixo dos indicadores. */
.hero__palco { position: relative; z-index: 1; --ph: clamp(340px, 100vw, 460px); height: var(--ph); overflow: visible; }
.hero__cena {
  position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
  transition: opacity 1.4s var(--ease), visibility 0s linear 1.4s;
}
.hero__cena.ativa { opacity: 1; visibility: visible; transition: opacity 1.4s var(--ease), visibility 0s; }
/* Camadas de máquina e pessoa ficam paradas (sem flutuação nem paralaxe — decisão da Roberta, 01/10). */
.hero__camada { position: absolute; }
.hero__camada img { width: auto; height: 100%; max-width: none; filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); }
.hero__camada--maquina { right: 0; }
.hero__camada--pessoa { left: 0; }

/* Regra da skill: câmera na altura dos olhos → os olhos da pessoa ficam na linha da máquina a ~1,55 m do chão.
   Cena 1 — homem (1,85 m c/ capacete) + Storage (2.103 mm), mesmo plano.
   máquina: topo 14 %, altura 112 % → horizonte = 14 + 112×(1−1550/2103) ≈ 43,5 %
   pessoa: altura 100 % (≈ escala real), olhos a 7,5 % do topo → topo ≈ 36 %; pés fora do quadro */
.hero__cena--1 .hero__camada--maquina { top: calc(var(--ph) * .14); height: calc(var(--ph) * 1.12); right: -3%; }
.hero__cena--1 .hero__camada--pessoa  { top: calc(var(--ph) * .339); height: calc(var(--ph) * 1.28); left: -6%; } /* 1,3× mais perto da câmera; olhos a 7,5 % de 128 % → topo 43,5 − 9,6 */
/* Cena 2 — mulher (1,80 m c/ capacete) + Carrossel Max (2.100 mm), pessoa ≈ 1,3× mais perto da câmera, pés fora do quadro.
   máquina: topo 24 %, altura 92 % → horizonte ≈ 48 %; olhos a 11 % de 110 % → topo ≈ 35,9 % */
.hero__cena--2 .hero__camada--maquina { top: calc(var(--ph) * .24); height: calc(var(--ph) * .92); right: -2%; }
.hero__cena--2 .hero__camada--pessoa  { top: calc(var(--ph) * .359); height: calc(var(--ph) * 1.1); left: -4%; }
/* Cena 3 — mãos com tablet ERPV em primeiro plano + Stockage recheada (sem linha de olhos); bordas do recorte esmaecidas */
.hero__cena--3 .hero__camada--maquina { top: calc(var(--ph) * .20); height: calc(var(--ph) * 1.12); right: 0; }
/* mãos com tablet: mais à esquerda (entram sob o botão "Conhecer as máquinas") e apoiadas na linha de corte, deixando a máquina aparecer ao fundo */
.hero__cena--3 .hero__camada--pessoa  { bottom: 0; height: calc(var(--ph) * .5); left: -48%; }
.hero__cena--3 .hero__camada--pessoa img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%), linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%), linear-gradient(180deg, #000 80%, transparent 100%); mask-composite: intersect;
}

.hero__indicador {
  width: 34px; height: 4px; border-radius: 2px; border: 0; padding: 0; background: rgba(255,255,255,.25);
  position: relative; overflow: hidden; cursor: pointer;
}
.hero__indicador::after { content: ''; position: absolute; inset: 0; background: var(--pv-ciano); transform: scaleX(0); transform-origin: left; }
.hero__indicador[aria-selected="true"]::after { transform: scaleX(1); transition: transform var(--hero-intervalo, 8s) linear; }
.hero__role {
  position: relative; z-index: 2; align-self: center; margin-top: 10px; padding-bottom: 20px;
  color: var(--texto-3); font-family: var(--fonte-dados); font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase;
  display: none; /* saiu no ajuste de 01/10: o hero termina logo abaixo dos indicadores */ flex-direction: column; align-items: center; gap: 8px;
}
.hero__role::after { content: ''; width: 1px; height: 36px; background: linear-gradient(var(--pv-ciano), transparent); animation: pingar 1.8s infinite; }
@keyframes pingar { 0% { transform: scaleY(0); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

/* Celular/tablet: máquina e pessoa um pouco menores para mostrar mais do equipamento (mesma regra do horizonte) */
@media (max-width: 899px) {
  .hero__palco { --ph: clamp(360px, 105vw, 480px); }
  .hero__cena--1 .hero__camada--maquina { top: calc(var(--ph) * .08); height: var(--ph); right: -2%; }
  .hero__cena--1 .hero__camada--pessoa  { top: calc(var(--ph) * .255); height: calc(var(--ph) * 1.17); left: -4%; }
  .hero__cena--2 .hero__camada--maquina { top: calc(var(--ph) * .16); height: calc(var(--ph) * .84); right: -4%; }
  .hero__cena--2 .hero__camada--pessoa  { top: calc(var(--ph) * .27); height: var(--ph); left: -6%; }
  .hero__cena--3 .hero__camada--maquina { top: calc(var(--ph) * .10); height: var(--ph); right: 0; }
  .hero__cena--3 .hero__camada--pessoa  { bottom: 0; height: calc(var(--ph) * .5); left: -34%; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .hero__cena--3 .hero__camada--pessoa { left: -10%; height: calc(var(--ph) * .56); }
}
@media (min-width: 900px) {
  .hero { min-height: 0; padding-bottom: 0; }
  .hero__grade { grid-template-columns: 1.1fr 0.9fr; gap: 24px; align-items: stretch; }
  .hero__texto { padding-bottom: 0; display: flex; flex-direction: column; justify-content: center; } /* texto centralizado na altura da cena */
  .hero__palco { --ph: clamp(440px, 40vw, 540px); height: auto; min-height: calc(var(--ph) * .9); } /* altura mínima da cena: a linha de corte não sobe quando há pouco texto */
}

/* ---------- 8. FAIXA DE NÚMEROS ---------- */
.numeros { padding: 0; position: relative; z-index: 1; background: var(--fundo); } /* fundo opaco: separa a faixa da mancha do hero e dos blobs de fundo */
.numeros .container { border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.numero { padding: 24px 18px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.numero:nth-child(2n) { border-right: 0; }
.numero:nth-child(n+3) { border-bottom: 0; }
.numero__valor { font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.03em; color: var(--texto); line-height: 1; }
.numero__valor small { font-size: 0.55em; color: var(--pv-ciano); margin-right: 4px; font-weight: 600; }
.numero__rotulo { color: var(--texto-3); font-size: 0.92rem; margin-top: 10px; }
@media (min-width: 900px) {
  .numeros .container { grid-template-columns: repeat(4, 1fr); }
  .numero { padding: 36px 28px; border-bottom: 0; }
  .numero:nth-child(2n) { border-right: 1px solid var(--linha); }
  .numero:last-child { border-right: 0; }
}

/* ---------- 9. POSICIONAMENTO (texto + moldura branca com 4 quadros) ---------- */
.dividido { display: grid; gap: clamp(32px, 6vw, 96px); align-items: center; }
@media (min-width: 900px) { .dividido { grid-template-columns: 1fr 1fr; } }
.dividido h2 { margin-bottom: 18px; }
.dividido .lead { margin-bottom: 28px; }

.identificacao { margin: 0; }
.identificacao__moldura {
  position: relative; background: var(--pv-branco); padding: 10px; border-radius: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
}
.identificacao__quadros { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fundo-2); }
.identificacao__quadros img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s var(--ease); }
.identificacao__quadros img.ativa { opacity: 1; }
.identificacao__legenda {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px;
  font-family: var(--fonte-dados); font-size: .82rem; letter-spacing: .04em; color: var(--pv-ciano);
}
.identificacao__legenda span { transition: opacity .45s var(--ease); }
.identificacao__legenda span.saindo { opacity: 0; }
.identificacao__legenda span::before { content: '_ '; }
.identificacao__passos { display: flex; gap: 8px; }
.identificacao__passo { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--pv-ciano); background: transparent; padding: 0; }
.identificacao__passo[aria-selected="true"] { background: var(--pv-ciano); box-shadow: 0 0 10px var(--pv-ciano); }

/* ---------- 10. CARDS ESCUROS (o que muda) ---------- */
.cartoes { display: grid; gap: 20px; }
@media (min-width: 768px) { .cartoes--3 { grid-template-columns: repeat(3, 1fr); } }
.cartao {
  position: relative; padding: 32px; border-radius: var(--raio); border: 1px solid var(--linha); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  transition: transform .35s var(--ease), border-color .35s;
}
.cartao::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--pv-ciano), transparent); opacity: .7; }
.cartao:hover { transform: translateY(-4px); border-color: rgba(22,172,227,0.4); }
.cartao h3 { margin: 18px 0 12px; }
.cartao p { color: var(--texto-2); margin: 0; }
.cartao__icone { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: rgba(22,172,227,0.12); color: var(--pv-ciano); }
.cartao__icone svg { width: 22px; height: 22px; }

/* ---------- 11. MÁQUINAS (cards claros com arco neon) ---------- */
.maquinas { position: relative; }
.maquinas__brilho {
  position: absolute; left: 50%; top: 36%; width: 100%; height: 90%; max-width: 1500px; transform: translateX(-50%);
  border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(22,172,227,0.55) 0%, rgba(42,65,154,0.6) 40%, transparent 72%);
  animation: brilho-maquinas 16s ease-in-out infinite;
}
@keyframes brilho-maquinas { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.grade-maquinas { display: grid; gap: 28px; }
@media (min-width: 620px) { .grade-maquinas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grade-maquinas { grid-template-columns: repeat(3, 1fr); } }

.card-maquina {
  background: var(--pv-branco); color: var(--pv-marinho); border-radius: var(--raio-p); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(22,172,227,.25), 0 18px 50px rgba(0,0,0,.45);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
}
/* sem deslocamento vertical (fotos não "voam" — Roberta, 01/10, D-21): o destaque é só o brilho */
.card-maquina:focus-within, .card-maquina.ativo {
  box-shadow: 0 0 0 1px rgba(22,172,227,.6), 0 0 40px rgba(22,172,227,.35), 0 28px 60px rgba(0,0,0,.5);
}
/* hover só com mouse: no toque o :hover "gruda" e prende a vista frontal mesmo depois que o site.js tira o .ativo */
@media (hover: hover) {
  .card-maquina:hover { box-shadow: 0 0 0 1px rgba(22,172,227,.6), 0 0 40px rgba(22,172,227,.35), 0 28px 60px rgba(0,0,0,.5); }
  .card-maquina:hover .card-maquina__seta { transform: translateX(6px); }
  .card-maquina:hover .vista-34 { opacity: 0; transform: rotateY(8deg); }
  .card-maquina:hover .vista-frontal { opacity: 1; transform: rotateY(0); }
}
.card-maquina__cabeca {
  background: var(--pv-ciano); color: var(--pv-marinho); display: flex; align-items: center; justify-content: space-between; padding: 14px 22px;
}
.card-maquina__cabeca h3 { font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.75rem; margin: 0; letter-spacing: -0.01em; color: var(--pv-marinho); }
.card-maquina__seta { display: grid; place-items: center; color: var(--pv-marinho); flex: none; transition: transform .4s; }
.card-maquina__seta svg { width: 34px; height: 34px; }
.card-maquina.ativo .card-maquina__seta { transform: translateX(6px); }
.card-maquina__meta { margin: 16px 22px 0; padding-left: 12px; border-left: 4px solid var(--pv-azul); }
.card-maquina__dims { font-family: var(--fonte-dados); font-size: .82rem; color: var(--pv-marinho); font-variant-numeric: tabular-nums; }
.card-maquina__resumo { font-weight: 500; font-size: .98rem; color: var(--pv-ciano); margin: 2px 0 0; }

.card-maquina__palco { position: relative; aspect-ratio: 1000 / 1040; margin: 4px 0 0; overflow: hidden; perspective: 1200px; }
/* sombra no chão */
.card-maquina__sombra {
  position: absolute; left: 18%; width: 64%; top: 83%; height: 11%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(39,42,102,.55) 0%, rgba(39,42,102,.25) 45%, transparent 72%);
  filter: blur(6px); animation: sombra-pulso 4.5s ease-in-out infinite;
}
/* arco neon (anel) — como no card modelo: elipse achatada, centro em ~89 %; os pés da máquina (88,5 %) ficam dentro */
.card-maquina__arco {
  position: absolute; left: 5%; width: 90%; top: 82%; height: 14%; border-radius: 50%;
  border: 2px solid rgba(22,172,227,.95);
  box-shadow: 0 0 8px rgba(22,172,227,.9), 0 0 22px rgba(22,172,227,.45), 0 0 48px rgba(22,172,227,.2), inset 0 0 18px rgba(22,172,227,.3);
  background: radial-gradient(ellipse at center, rgba(22,172,227,.16) 0%, rgba(22,172,227,.06) 55%, transparent 72%);
  animation: arco-pulso 4.5s ease-in-out infinite;
}
@keyframes arco-pulso { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }
@keyframes sombra-pulso { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.card-maquina__palco img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); backface-visibility: hidden; transform-origin: 50% 88%;
  filter: drop-shadow(0 6px 10px rgba(39,42,102,.25));
}
.card-maquina__palco .vista-34 { opacity: 1; transform: rotateY(0); }
.card-maquina__palco .vista-frontal { opacity: 0; transform: rotateY(-8deg); }
.card-maquina.ativo .vista-34 { opacity: 0; transform: rotateY(8deg); }
.card-maquina.ativo .vista-frontal { opacity: 1; transform: rotateY(0); }
.card-maquina__dica { font-family: var(--fonte-dados); font-size: .68rem; color: #8A90A8; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 0 0 12px; margin: 0; }
@media (hover: hover) { .card-maquina__dica { display: none; } }

/* ---------- 12. PASSOS (como funciona) ---------- */
.passos { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.passo { padding: 28px 24px; border-bottom: 1px solid var(--linha); background: rgba(255,255,255,0.02); }
.passo:last-child { border-bottom: 0; }
.passo__n { font-family: var(--fonte-dados); color: var(--pv-ciano); font-size: .8rem; letter-spacing: .1em; }
.passo h3 { font-size: 1.15rem; margin: 14px 0 10px; }
.passo p { color: var(--texto-2); font-size: .95rem; margin: 0; }
@media (min-width: 620px) { .passos { grid-template-columns: repeat(2, 1fr); } .passo { border-right: 1px solid var(--linha); } .passo:nth-child(2n) { border-right: 0; } }
@media (min-width: 1000px) {
  .passos { grid-template-columns: repeat(4, 1fr); }
  .passo { border-bottom: 0; border-right: 1px solid var(--linha); padding: 32px 28px; }
  .passo:nth-child(2n) { border-right: 1px solid var(--linha); }
  .passo:last-child { border-right: 0; }
}

/* ---------- 13. ERPV (painel + notebook em CSS) ---------- */
.erpv { background: linear-gradient(180deg, var(--fundo-2), var(--fundo)); }
.erpv__painel {
  border-radius: 20px; border: 1px solid var(--linha); background: linear-gradient(135deg, rgba(42,65,154,0.35), rgba(13,16,48,0.8));
  padding: clamp(28px, 5vw, 64px); display: grid; gap: 40px; align-items: center; position: relative; overflow: hidden;
}
@media (min-width: 1000px) { .erpv__painel { grid-template-columns: 1fr 1.05fr; } }
.erpv__painel::after { content: ''; position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(22,172,227,0.25), transparent 65%); pointer-events: none; }
.erpv__painel > * { position: relative; z-index: 1; }
.erpv h2 { margin-bottom: 18px; }
.erpv__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.erpv__lista li { display: flex; gap: 12px; color: var(--texto-2); }
.erpv__lista li::before { content: ''; flex: 0 0 8px; height: 8px; margin-top: 10px; border-radius: 50%; background: var(--pv-ciano); box-shadow: 0 0 12px var(--pv-ciano); }

.notebook { margin: 0; width: 100%; max-width: 640px; justify-self: center; }
.notebook__tela {
  position: relative; background: #0B0E24; border: 1px solid rgba(255,255,255,.14); border-bottom: 0;
  border-radius: 14px 14px 0 0; padding: 12px 12px 0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
}
.notebook__tela::before { content: ''; position: absolute; left: 50%; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #1b2040; transform: translateX(-50%); }
.notebook__quadros { position: relative; aspect-ratio: 1400 / 826; overflow: hidden; border-radius: 4px 4px 0 0; background: #F5F7FB; }
.notebook__quadros img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity 1s var(--ease); }
.notebook__quadros img.ativa { opacity: 1; }
.notebook__base {
  position: relative; height: 16px; margin: 0 -4%; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #2a2f4f 0%, #141836 55%, #0b0e24 100%);
  border: 1px solid rgba(255,255,255,.12); border-top: 0; box-shadow: 0 24px 40px -16px rgba(0,0,0,.8);
}
.notebook__base::before { content: ''; position: absolute; left: 50%; top: 0; width: 18%; height: 5px; transform: translateX(-50%); background: #0B0E24; border-radius: 0 0 6px 6px; }
.notebook__legenda {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px;
  font-family: var(--fonte-dados); font-size: .8rem; letter-spacing: .04em; color: var(--pv-ciano);
}
/* altura reservada para a legenda mais longa (1,6 em por linha), para o bloco não "pular" a cada troca de tela */
.notebook__legenda span { flex: 1; min-height: calc(1.6em * 3); transition: opacity .45s var(--ease); }
@media (min-width: 820px) { .notebook__legenda span { min-height: calc(1.6em * 2); } }
.notebook__legenda span.saindo { opacity: 0; }
.notebook__legenda span::before { content: '_ '; }
.notebook__passos { display: flex; gap: 7px; flex: none; }
.notebook__passo { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--pv-ciano); background: transparent; padding: 0; }
.notebook__passo[aria-selected="true"] { background: var(--pv-ciano); box-shadow: 0 0 10px var(--pv-ciano); }

/* ---------- 14. CLIENTES ---------- */
.clientes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 620px) { .clientes { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .clientes { grid-template-columns: repeat(6, 1fr); } } /* 6 clientes oficiais (out/2026) — única edição fora dos itens 2 e 9 da revisão transversal; ver STATUS */
.cliente {
  height: 96px; border: 1px solid var(--linha); border-radius: 12px; display: grid; place-items: center; align-content: center;
  font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.15rem; color: var(--texto-2); background: rgba(255,255,255,0.02); padding: 0 12px; text-align: center;
}
.cliente small { display: block; font-family: var(--fonte-dados); font-weight: 400; font-size: .68rem; color: var(--texto-3); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }

/* ---------- 15. CONTATO + FORMULÁRIO (partials/footer.html) ---------- */
.contato { position: relative; z-index: 1; padding: clamp(72px, 10vw, 140px) 0; background: radial-gradient(ellipse 70% 80% at 50% 100%, rgba(42,65,154,0.45), var(--fundo) 70%); }
.contato__grade { display: grid; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (min-width: 900px) { .contato__grade { grid-template-columns: 1fr 1fr; } }
.contato__texto h2 { margin-bottom: 18px; }
.contato__texto p { color: var(--texto-2); font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.contato__dados { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; color: var(--texto-2); }
.contato__dados li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.contato__dados svg { width: 22px; height: 22px; color: var(--pv-ciano); margin-top: 3px; }
.contato__dados strong { display: block; font-family: var(--fonte-dados); font-weight: 400; font-size: .72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-3); }
.contato__dados a { color: var(--texto); border-bottom: 1px solid var(--linha-forte); }
.contato__dados a:hover { color: var(--pv-ciano); border-color: var(--pv-ciano); }

.form {
  display: grid; gap: 14px; padding: 28px; border-radius: var(--raio); border: 1px solid var(--linha);
  background: rgba(13,16,48,0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.form__grade { display: grid; gap: 14px; }
@media (min-width: 600px) { .form__grade { grid-template-columns: 1fr 1fr; } .form__campo--cheio { grid-column: 1 / -1; } }
.form__campo label { display: block; font-size: .85rem; color: var(--texto-2); margin-bottom: 6px; }
.form__campo input, .form__campo select, .form__campo textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linha-forte);
  background: rgba(255,255,255,0.04); color: var(--texto); font: inherit; font-size: 1rem; min-height: 48px; /* 16 px: o iOS não dá zoom ao focar */
}
.form__campo textarea { min-height: 120px; resize: vertical; }
.form__campo input::placeholder, .form__campo textarea::placeholder { color: var(--texto-3); }
.form__campo input:focus, .form__campo select:focus, .form__campo textarea:focus { outline: none; border-color: var(--pv-ciano); box-shadow: 0 0 0 3px rgba(22,172,227,0.2); }
.form__campo select option { color: #000; }
.form__ajuda { font-size: .78rem; color: var(--texto-3); }
/* .form__campo .form__consentimento: precisa vencer o "display: block" de .form__campo label */
.form__campo .form__consentimento, .form__consentimento { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--texto-3); }
.form__consentimento input { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; min-height: 0; accent-color: var(--pv-ciano); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__rodape { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.form__rodape .botao { flex: 1 1 auto; }
.form__status { display: none; border-radius: 10px; padding: 12px 14px; font-size: .9rem; margin: 0; }
.form__status.visivel { display: block; }
.form__status--ok { display: block; background: rgba(61,220,151,.1); color: var(--cor-ok); border: 1px solid rgba(61,220,151,.4); }
.form__status--erro { display: block; background: rgba(255,123,123,.1); color: var(--cor-erro); border: 1px solid rgba(255,123,123,.4); }

/* ---------- 16. RODAPÉ ---------- */
.rodape { position: relative; z-index: 1; border-top: 1px solid var(--linha); padding: 64px 0 32px; background: var(--fundo-rodape); font-size: .95rem; }
.rodape a { color: var(--texto-2); }
.rodape a:hover { color: var(--pv-ciano); }
.rodape__grade { display: grid; gap: 32px; }
@media (min-width: 768px) { .rodape__grade { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.rodape .marca__img { height: 28px; margin-bottom: 18px; }
.rodape__descricao { color: var(--texto-2); max-width: 42ch; }
.rodape__titulo { font-family: var(--fonte-dados); font-size: .82rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); margin: 0 0 16px; }
.rodape__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.rodape__lista address { color: var(--texto-2); line-height: 1.5; }
.rodape__redes { display: flex; gap: 12px; margin-top: 16px; }
.rodape__redes a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--linha-forte); border-radius: 50%; }
.rodape__redes a:hover { border-color: var(--pv-ciano); }
.rodape__redes svg { width: 20px; height: 20px; }
.rodape__base {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--linha);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--texto-3); font-size: .82rem;
}

/* ---------- 17. REVELAR AO ROLAR (site.js adiciona .visivel) ---------- */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.revelar.visivel { opacity: 1; transform: none; }
.revelar[data-atraso="1"] { transition-delay: .12s; }
.revelar[data-atraso="2"] { transition-delay: .24s; }
.revelar[data-atraso="3"] { transition-delay: .36s; }
/* blocos com foto de máquina/pessoa entram só com fade, sem subir (D-21) */
.card-maquina.revelar, .identificacao.revelar, .notebook.revelar, .erpv__painel.revelar { transform: none; }
/* Hero das páginas internas aparece imediatamente, como na Home (revisão transversal, 06/10/2026):
   nada de revelar ao rolar nos elementos do primeiro bloco de Máquinas, Solução, A Empresa e Privacidade. */
.hero-maquinas .revelar, .hero-pagina .revelar, .empresa-hero .revelar, .hero-interno .revelar {
  opacity: 1; transform: none; transition: none;
}

/* ---------- 18. MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .hero__blob { transform: none !important; }
  .hero__cena, .identificacao__quadros img, .notebook__quadros img, .card-maquina__palco img { transition: none; }
  .hero__indicador[aria-selected="true"]::after { transition: none; }
}