/* ============================================================================
   Casa da Informática — Sistema visual
   Assistência Técnica de Informática — Araxá/MG
   CSS autoral, sem frameworks. Mobile-first.
   ========================================================================= */

/* ---------- 1. Reset ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  min-height: 100dvh;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
input, button, textarea, select { font: inherit; color: inherit; }
/* Remove o atraso de 300 ms que o toque duplo cria em quem controla zoom. */
a, button, label, summary, input, select, textarea { touch-action: manipulation; }
p, h1, h2, h3, h4, li { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ---------- 2. Tokens --------------------------------------------------- */
/* Paleta neutra fria. Quatro tons, sem matiz de ação:
     #111827 quase-preto azulado — texto e ação
     #6B7280 cinza-ardósia médio — texto de apoio, bordas de campo
     #9CA3AF cinza-azulado claro — apoio leve
     #F3F4F6 branco frio        — fundo da página

   Nota de método: numa paleta sem cor de ação, a hierarquia é carregada por
   VALOR, não por matiz. O botão primário é o quase-preto sobre o branco frio
   (16:1) — é ele que diz "clique aqui", no lugar do laranja de antes.

   Nota de contraste: #9CA3AF sobre branco rende 2,5:1, abaixo dos 3:1 que a
   WCAG 1.4.11 exige para o contorno de um controle. Por isso borda de campo
   usa #6B7280 (4,8:1) e o tom claro fica só em superfície e divisor. */
:root {
  /* Base — branco frio */
  /* Fundo um tom mais fechado que o branco frio da paleta: a aurora é luz,
     e luz sobre branco puro quase não se lê. */
  --bg-900: #e6eef8;
  --bg-800: #ffffff;
  --bg-700: #e8eff8;
  --bg-600: #dbe6f3;
  --surface: #ffffff;
  --surface-2: rgba(11, 20, 38, 0.05);
  --line: #d3e0f0;
  --line-2: #b9cde6;
  --line-campo: #5b7799;

  /* Texto */
  --text: #0b1426;
  --text-2: #26385a;
  /* Fechado de novo ao escurecer o fundo para a aurora: sobre #e7eaef o tom
     anterior caía para 4,46:1, logo abaixo dos 4,5 exigidos. */
  --text-3: #4a5d7e;

  /* Ação — o quase-preto faz o papel que o laranja fazia */
  --accent: #06a0e4;
  --accent-2: #2bb6ef;
  --accent-deep: #045e86;
  --accent-texto: #065f85;
  --accent-forte: #ffffff;
  /* Pontas do degradê do botão primário. Precisam ser tokens: no tema escuro o
     botão inverte (fundo claro, texto escuro) e pontas escuras cravadas deixavam
     as bordas com texto quase invisível. */
  --btn-ponta-1: #1fb0ea;
  --btn-ponta-2: #045e86;
  --accent-soft: rgba(6, 160, 228, 0.09);
  --accent-line: rgba(6, 160, 228, 0.35);

  /* Semânticos */
  /* Interruptor de tema. Estes dois NÃO invertem junto com o tema: ele
     representa dia e noite, e precisa se ler igual nos dois. */
  --switch-dia: #8fb6e0;
  --switch-noite: #0b1426;

  /* Painéis sobrepostos e translúcidos: pílula do cabeçalho sem suporte a
     backdrop-filter, e o menu do celular. Trio RGB porque cada um usa uma
     opacidade diferente da mesma cor. */
  --vidro-rgb: 255, 255, 255;
  /* Pastilha decorativa do "Como funciona": no claro é um véu branco; no
     escuro precisa ser um véu de LUZ, não de tinta, ou some no fundo. */
  --pastilha-fundo: rgba(255, 255, 255, 0.45);

  /* Superfície dos cartões (formulário de OS, fluxo, painel): um degradê
     de cima para baixo, sutil. Token porque no escuro ele inverte inteiro. */
  --superficie-cartao: linear-gradient(180deg, #ffffff, #f6f9fd);

  /* Tinta do circuito do hero: um trio RGB, usado em oito opacidades. */
  --pcb-tinta: 6, 160, 228;

  /* Texto dos títulos pintado por gradiente (ver seção 7). */
  --titulo-base: #0b1426;
  --titulo-brilho: #06a0e4;
  --titulo-2-base: #12467a;
  --titulo-2-brilho: #2a8be0;

  --ok: #12805f;
  --warn: #8a5000;
  --err: #b3261e;

  /* Versão escura do mesmo verde e do mesmo vermelho, para texto pequeno em
     cima de um fundo já tingido com eles. --ok puro sobre esse tingimento dá
     3,56:1, abaixo do mínimo de 4,5:1 para texto normal. */
  --ok-texto: #076046;
  --err-texto: #96201a;

  /* Tipografia */
  --font-display: "Sora", "Segoe UI Variable Display", "Segoe UI", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, monospace;

  /* Ritmo */
  --shell: 1220px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* Sombra */
  --shadow-1: 0 1px 2px rgba(11, 20, 38, 0.08);
  --shadow-2: 0 14px 34px -18px rgba(11, 20, 38, 0.35);
  --shadow-glow: 0 0 0 1px rgba(6, 160, 228, 0.35),
    0 18px 40px -24px rgba(11, 20, 38, 0.6);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ink-rgb: 15, 52, 100;
}

/* ---------- 2b. Tema escuro ------------------------------------------- */
/* Três estados, e a ordem importa:
     1. :root                       — claro, o padrão;
     2. @media prefers-color-scheme — escuro para quem pediu no sistema, mas
        só enquanto a pessoa não escolheu à mão (daí o :not);
     3. [data-tema="escuro"]        — a escolha explícita vence as duas.
   Nenhuma cor tem sua ÚNICA definição dentro de um bloco escuro: tudo nasce
   no :root e aqui é só substituição.

   A inversão central é o par --accent / --accent-forte. No claro o botão é
   quase-preto sobre branco frio; no escuro ele vira quase-branco sobre o
   fundo escuro. O botão continua sendo o elemento de maior contraste da
   página, que era a intenção do sistema original. */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --bg-900: #070d1a;
  --bg-800: #0b1426;
  --bg-700: #0f1b33;
  --bg-600: #14233f;
  --surface: #0e1a2f;
  --surface-2: rgba(180, 215, 250, 0.06);

  --line: #1c3254;
  --line-2: #26446d;
  /* 4,9:1 sobre --surface: borda de campo precisa de 3:1 (WCAG 1.4.11), e
     sobra margem porque ela também carrega o foco. */
  --line-campo: #7391b8;

  --text: #eaf1fb;
  --text-2: #c3d1e6;
  --text-3: #93a6c2;

  --accent: #06a0e4;
  --accent-2: #2bb6ef;
  --accent-deep: #8fd3fa;
  --accent-texto: #3fc0f2;
  --accent-forte: #04101f;
  --btn-ponta-1: #2bb6ef;
  --btn-ponta-2: #0b7fb3;
  --accent-soft: rgba(6, 160, 228, 0.12);
  --accent-line: rgba(6, 160, 228, 0.4);

  /* Semânticas reabertas: as do claro foram escolhidas contra branco e
     ficam ilegíveis contra #0d1117. */
  --superficie-cartao: linear-gradient(180deg, #0f1c33, #0b1628);
  --vidro-rgb: 11, 20, 38;
  --pastilha-fundo: rgba(6, 160, 228, 0.08);

  /* Tinta do circuito, invertida: traço claro sobre fundo escuro. */
  --pcb-tinta: 6, 160, 228;

  /* Títulos: a passagem de brilho vai de claro para branco. */
  --titulo-base: #eaf1fb;
  --titulo-brilho: #5cc2f7;
  --titulo-2-base: #7fb4e6;
  --titulo-2-brilho: #bfe4fd;

  --ok: #3ecfa0;
  --ok-texto: #3ecfa0;
  --err-texto: #ff7a70;
  --warn: #e2a64a;
  --err: #ff7a70;

  /* Sombra preta some no escuro. Aqui ela vira contorno de luz. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 14px 34px -18px rgba(0, 0, 0, 0.75);
  --shadow-glow: 0 0 0 1px rgba(6, 160, 228, 0.3),
    0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --ink-rgb: 4, 10, 24;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;

    --bg-900: #070d1a;
    --bg-800: #0b1426;
    --bg-700: #0f1b33;
    --bg-600: #14233f;
    --surface: #0e1a2f;
    --surface-2: rgba(180, 215, 250, 0.06);

    --line: #1c3254;
    --line-2: #26446d;
    /* 4,9:1 sobre --surface: borda de campo precisa de 3:1 (WCAG 1.4.11), e
       sobra margem porque ela também carrega o foco. */
    --line-campo: #7391b8;

    --text: #eaf1fb;
    --text-2: #c3d1e6;
    --text-3: #93a6c2;

    --accent: #06a0e4;
    --accent-2: #2bb6ef;
    --accent-deep: #8fd3fa;
    --accent-texto: #3fc0f2;
    --accent-forte: #04101f;
  --btn-ponta-1: #2bb6ef;
  --btn-ponta-2: #0b7fb3;
    --accent-soft: rgba(6, 160, 228, 0.12);
    --accent-line: rgba(6, 160, 228, 0.4);

    /* Semânticas reabertas: as do claro foram escolhidas contra branco e
       ficam ilegíveis contra #0d1117. */
    --superficie-cartao: linear-gradient(180deg, #0f1c33, #0b1628);
    --vidro-rgb: 11, 20, 38;
    --pastilha-fundo: rgba(6, 160, 228, 0.08);

    /* Tinta do circuito, invertida: traço claro sobre fundo escuro. */
    --pcb-tinta: 6, 160, 228;

    /* Títulos: a passagem de brilho vai de claro para branco. */
    --titulo-base: #eaf1fb;
    --titulo-brilho: #5cc2f7;
    --titulo-2-base: #7fb4e6;
    --titulo-2-brilho: #bfe4fd;

    --ok: #3ecfa0;
    --ok-texto: #3ecfa0;
    --err-texto: #ff7a70;
    --warn: #e2a64a;
    --err: #ff7a70;

    /* Sombra preta some no escuro. Aqui ela vira contorno de luz. */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 14px 34px -18px rgba(0, 0, 0, 0.75);
    --shadow-glow: 0 0 0 1px rgba(6, 160, 228, 0.3),
    0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --ink-rgb: 4, 10, 24;
}}

/* ---------- 3. Base ----------------------------------------------------- */
body {
  background: var(--bg-900);
  color: var(--text);
  font-family: var(--font-text);
  font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  letter-spacing: -0.008em;
  overflow-x: hidden;
}

/* Halo ambiente — desenhado com CSS puro, sem imagens */
body::before {
  content: "";
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 70vh;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(58% 60% at 22% 0%, rgba(var(--ink-rgb), 0.16), transparent 68%),
    radial-gradient(46% 52% at 82% 8%, rgba(var(--ink-rgb), 0.11), transparent 66%);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }

::selection { background: rgba(var(--ink-rgb), 0.32); color: var(--accent-forte); }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Foco movido por script para um título (leitores de tela) não desenha anel. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

/* Acessibilidade — pular para o conteúdo */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -140%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--accent-forte);
  font-weight: 600;
  border-radius: 0 0 12px 12px;
  transition: translate 0.25s var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; }

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

/* ---------- 4. Layout --------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* A medida em `ch` seguia o tamanho do corpo do texto, não o do título —
   o resultado era um título de 3 rem quebrando em quatro linhas curtas.
   O contêiner passa a ter medida em rem; o parágrafo é que fica limitado. */
.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .section-sub { max-width: 56ch; }
.section-head--center .section-sub { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-texto);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.section-head--center .eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(270deg, transparent, var(--accent));
}

.section-title {
  font-size: clamp(1.85rem, 1.2rem + 2.8vw, 3.1rem);
}
.section-sub {
  margin-top: 1.05rem;
  color: var(--text-2);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  text-wrap: pretty;
}

.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* ---------- 5. Botões --------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.3s var(--ease),
    background-color 0.3s var(--ease), box-shadow 0.35s var(--ease), color 0.3s;
}
.btn svg { width: 19px; height: 19px; flex: none; }

.btn:hover { border-color: var(--line-campo); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn--primary {
  --btn-fg: var(--accent-forte);
  border-color: transparent;
  background-color: var(--accent);
  background-image: linear-gradient(135deg, var(--btn-ponta-1) 0%, var(--accent) 45%, var(--btn-ponta-2) 100%);
  box-shadow: 0 10px 34px -14px rgba(var(--ink-rgb), 0.75);
}
/* Brilho que atravessa o botão no hover (porte do GlareHover, React Bits).
   É CSS puro: um gradiente cuja posição desliza. Sem JavaScript, sem filtro,
   sem mix-blend-mode — nada do que torna esse tipo de efeito caro.
   O `::after` fazia só uma troca de gradiente no hover; o brilho ocupa o lugar
   dele, para o botão não carregar dois pseudo-elementos fazendo o mesmo papel.

   Nota honesta de custo: animar `background-position` é repintura, não só
   composição. Num elemento do tamanho de um botão isso é irrelevante, e só um
   está sob o ponteiro por vez — mas não repita em lista longa. */
.btn--primary::after,
.btn--wa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(
    -30deg,
    transparent 60%,
    var(--brilho, rgba(255, 255, 255, 0.3)) 71%,
    transparent 80%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-position: -120% -120%;
  /* `ease` simples, não a curva do site: var(--ease) é um ease-out forte que
     leva o brilho a 85% do caminho no primeiro terço do tempo — ele passa
     antes de ser visto. Um brilho precisa de passagem regular. */
  transition: background-position 0.75s ease;
}
.btn--primary:hover::after,
.btn--wa:hover::after,
.btn--primary:focus-visible::after,
.btn--wa:focus-visible::after {
  background-position: 120% 120%;
}
/* O verde do WhatsApp é mais claro que o quase-preto: o brilho precisa ser
   mais discreto ali para não estourar. */
.btn--wa { --brilho: rgba(255, 255, 255, 0.34); }
.btn--primary { --brilho: rgba(255, 255, 255, 0.4); }

.btn--primary:hover { box-shadow: 0 16px 46px -14px rgba(var(--ink-rgb), 0.9); }

.btn--ghost {
  background: var(--surface);
}
.btn--ghost:hover { background: var(--surface-2); border-color: var(--accent-line); }

.btn--wa {
  /* Escurecido de #0a3d1f para #082f16. O verde do WhatsApp é fixo pela marca,
     então o contraste só pode subir pelo lado do texto. Contra a parada mais
     escura do degradê (#12ad50), o valor antigo dava 4,19:1 e o texto aqui tem
     15,2 px — abaixo do limite de texto grande, então vale o mínimo de 4,5:1.
     O novo dá 4,98:1 e a mudança é imperceptível a olho. */
  --btn-fg: #082f16;
  background: linear-gradient(135deg, #5ce88f, #25d366 55%, #12ad50);
  border-color: transparent;
  box-shadow: 0 10px 26px -16px rgba(18, 173, 80, 0.85);
}
.btn--wa:hover {
  background: linear-gradient(135deg, #6ff09c, #22c65f 55%, #0f9a47);
  box-shadow: 0 14px 34px -16px rgba(18, 173, 80, 0.95);
}
.btn--lg { min-height: 58px; padding: 1rem 1.7rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- 6. Cabeçalho: barra flutuante de vidro --------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding: calc(14px + env(safe-area-inset-top)) var(--gutter) 14px;
  pointer-events: none;
}

/* Aproximação de "liquid glass".
   Aviso: a Apple documenta Liquid Glass para as plataformas dela; não existe
   implementação oficial na web. Isto é uma aproximação em CSS, montada em
   quatro camadas — não uma reprodução.

     1. base translúcida com degradê (o vidro tem mais luz em cima);
     2. `backdrop-filter` com blur + saturação + brilho (o fosco);
     3. realce especular no topo e sombra interna embaixo, via inset shadows,
        que é o que dá a leitura de espessura;
     4. borda que acende no topo e apaga embaixo, feita com máscara — uma
        borda de cor única mata o efeito na hora.

   O que NÃO dá para reproduzir: refração de verdade (a imagem de trás
   entortando na curvatura). Isso exigiria deslocamento por filtro SVG ou
   WebGL, com custo de sobra para um cabeçalho fixo. */
.header__pill {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-inline: auto;
  padding: 7px 7px 7px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.02) 52%,
      rgba(255, 255, 255, 0.1) 100%
    );
  -webkit-backdrop-filter: blur(14px) saturate(200%) brightness(1.08);
  backdrop-filter: blur(14px) saturate(200%) brightness(1.08);
  box-shadow:
    /* especular: a linha de luz onde a borda superior pega claridade */
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    /* espessura: o vidro escurece por dentro na base */
    inset 0 -1px 1px rgba(var(--ink-rgb), 0.06),
    /* apoio: separa a pílula da página sem pesar */
    0 1px 2px rgba(var(--ink-rgb), 0.05),
    0 8px 24px -12px rgba(var(--ink-rgb), 0.18);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* Borda em degradê: clara no topo, quase sumindo na base. É o detalhe que
   separa "vidro" de "retângulo translúcido". Feita com máscara porque
   border-image não acompanha border-radius. */
.header__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(var(--ink-rgb), 0.14) 55%,
    rgba(var(--ink-rgb), 0.08) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@media (min-width: 62rem) {
  .header__pill { width: fit-content; max-width: 100%; }
}
/* Rolando, a pílula vai a 88% de opacidade e o borrão praticamente não se vê
   mais — mas continuaria custando preço cheio, e borrando o fundo ANIMADO,
   que é o pior caso para o compositor. Some com ele exatamente aí: o vidro
   fica onde ele lê (topo da página, pílula a 55%) e sai de onde ele só pesa. */
/* Rolando, o vidro fecha um pouco — mais opaco, menos blur. Mantém a leitura
   de vidro (que era o pedido) mas baixa o custo justamente onde ele pesa: o
   `backdrop-filter` de um elemento fixo é recalculado a cada quadro de
   rolagem, e o que está atrás dele é o fundo animado. */
.header.is-stuck .header__pill {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.1) 52%,
      rgba(255, 255, 255, 0.2) 100%
    );
  -webkit-backdrop-filter: blur(12px) saturate(180%) brightness(1.06);
  backdrop-filter: blur(12px) saturate(180%) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 1px rgba(var(--ink-rgb), 0.05),
    0 1px 2px rgba(var(--ink-rgb), 0.06),
    0 10px 28px -14px rgba(var(--ink-rgb), 0.22);
}

/* Sem suporte a backdrop-filter o vidro vira leitoso e o texto atrás vaza.
   Aí a pílula fica sólida. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header__pill,
  .header.is-stuck .header__pill { background: rgba(var(--vidro-rgb), 0.96); }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  margin-right: auto;
}
.brand__mark { width: 34px; height: 30px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.brand__tag {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 0.15rem; list-style: none; padding: 0; }
.nav__link {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--text-2);
  transition: color 0.25s, background-color 0.25s;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link[aria-current] { color: var(--text); background: var(--surface-2); }

.header__cta { display: none; }
.btn--sm { min-height: 44px; padding: 0.55rem 1.15rem; font-size: 0.875rem; }
/* Dentro da pílula o brilho do botão competiria com o vidro. */
.header__pill .btn--primary { box-shadow: none; }
.header__pill .btn--primary:hover { box-shadow: 0 8px 22px -12px rgba(var(--ink-rgb), 0.7); }
.btn--sm svg { width: 17px; height: 17px; }

.burger {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--line-campo);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}
.burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.burger span + span { margin-top: 4.5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 78px var(--gutter) auto var(--gutter);
  z-index: 89;
  padding: 0.9rem 1.1rem 1.25rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: rgba(var(--vidro-rgb), 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 24px 60px -28px rgba(var(--ink-rgb), 0.22);
  display: grid;
  gap: 0.15rem;
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  transform-origin: top center;
  pointer-events: none;
  overscroll-behavior: contain;
  transition: opacity 0.28s var(--ease), transform 0.35s var(--ease);
}
.mobile-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* :not(.btn) é essencial. Sem ele esta regra também pegava os dois BOTÕES do
   menu, porque `.mobile-nav a` tem especificidade maior que `.btn--primary`:
   os botões herdavam a cor de texto dos links (--text-2, cinza escuro) sobre
   o próprio fundo escuro, medindo 1,78:1 — e ainda ganhavam o padding e a
   linha divisória que só fazem sentido nos links de navegação. */
.mobile-nav a:not(.btn) {
  padding: 0.85rem 0.35rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 1.02rem;
}
/* A última divisória fica: ela separa a navegação das ações logo abaixo. */
.mobile-nav .btn { margin-top: 0.75rem; }

@media (min-width: 62rem) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
  .mobile-nav { display: none; }
}


/* --- Interruptor de tema ----------------------------------------------- */
/* Porte do switch de andrew-demchenk0 (Uiverse.io). Estrutura, medidas e as
   duas animações são as do original. Quatro coisas mudaram, cada uma com
   motivo:

   1. CORES. O original usa #73C0FC e #183153. A paleta do site é neutra fria
      de propósito — a hierarquia vem do VALOR, não do matiz — e um azul
      saturado seria a única cor forte da página fora do verde do WhatsApp.
      Os tons viraram cinza-ardósia da própria família do site. O sol ficou
      com um amarelo contido, que é o que dá a leitura de "dia".

   2. ALVO DE TOQUE. O desenho tem 34 px de altura; a WCAG 2.5.5 pede 44. Em
      vez de engordar o visual, um ::after invisível estende a área clicável
      para 44 px sem mudar nada do que se vê.

   3. FOCO. O original marca foco com uma sombra de 1 px, que na prática não
      aparece. Trocado por um anel de verdade — é requisito (WCAG 2.4.7).

   4. ONDE A ANIMAÇÃO MORA. No original ela roda no elemento <svg>; aqui roda
      no <span> que o envolve. Foi cautela com o Blink, que não manda
      transform de SVG para o compositor — foi assim que o chip do hero
      passava a refazer layout a cada quadro. MEDIDO depois: aqui não faz
      diferença, as duas formas dão ~0 ms de layout, porque cada ícone é um
      SVG raiz minúsculo e não um <g> dentro de um desenho grande. Ficou no
      <span> por ser o padrão mais seguro, não por ganho medido. */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
  flex: none;
}
/* Área clicável de 44 px de altura, invisível, sem alterar o desenho. */
.switch::after {
  content: "";
  position: absolute;
  inset: -5px 0;
}

.switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--switch-dia);
  transition: background-color 0.4s;
  border-radius: 30px;
}
.slider::before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  border-radius: 20px;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background-color: #f3f4f6;
  transition: transform 0.4s;
}

.switch__sol,
.switch__lua {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.switch__sol {
  top: 5px;
  left: 36px;
  color: #f5c451;
  animation: switch-gira 15s linear infinite;
}
.switch__lua {
  top: 5px;
  left: 5px;
  color: #cbd5e1;
  animation: switch-balanca 5s linear infinite;
}

@keyframes switch-gira {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@keyframes switch-balanca {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-10deg); }
  75%  { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

.switch__input:checked + .slider { background-color: var(--switch-noite); }
.switch__input:checked + .slider::before { transform: translateX(30px); }

/* Anel de foco de verdade, no lugar da sombra de 1 px do original. */
.switch__input:focus-visible + .slider {
  outline: 2px solid var(--accent-texto);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .switch__sol,
  .switch__lua { animation: none; }
  .slider,
  .slider::before { transition: none; }
}

/* ---------- 7. Hero ----------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(7.5rem, 16vw, 11rem);
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
  min-height: min(100svh, 900px);
  display: flex;
  align-items: center;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.95rem 0.42rem 0.5rem;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.badge__dot {
  position: relative;
  width: 16px; height: 16px;
  display: grid; place-items: center;
}
.badge__dot::before,
.badge__dot::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.badge__dot::after { animation: ping 2.6s var(--ease-in-out) infinite; }
@keyframes ping {
  0% { opacity: 0.85; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(3.2); }
}

.hero__title {
  margin-top: 1.6rem;
  font-size: clamp(2.4rem, 1.5rem + 4.3vw, 4.15rem);
  max-width: 16ch;
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.042em;
}
.hero__title .line { display: block; }

/* Brilho que atravessa o texto (porte do ShinyText, React Bits).
   O original depende de `motion` (framer-motion) para mover a posição do
   gradiente quadro a quadro; @keyframes faz o mesmo sem uma linha de JS.

   O brilho NÃO é branco: sobre o branco frio da página, um pico claro no meio
   da manchete derrubaria o contraste. O tom mais claro do ciclo é #4b5563,
   que rende 6,8:1 — sobra folga mesmo no ponto mais claro da passagem.

   A pausa está dentro do próprio keyframe: a passagem ocupa os primeiros 22%
   do ciclo e o resto é descanso. Assim o brilho é periódico sem repintar o
   tempo inteiro. */
.hero__title .accent,
.section-title {
  background-image: linear-gradient(
    100deg,
    var(--titulo-base, #111827) 0%,
    var(--titulo-base, #111827) 38%,
    var(--titulo-brilho, #4b5563) 50%,
    var(--titulo-base, #111827) 62%,
    var(--titulo-base, #111827) 100%
  );
  background-size: 220% auto;
  background-position: 150% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titulo-brilha 11s linear infinite;
}
/* A segunda linha da manchete mantém o degradê de valor que já tinha. Os
   valores vêm de tokens porque no escuro eles invertem: no claro essa linha é
   mais CLARA que a principal; no escuro precisa ser mais ESCURA. */
.hero__title .accent {
  --titulo-base: var(--titulo-2-base);
  --titulo-brilho: var(--titulo-2-brilho);
}

@keyframes titulo-brilha {
  0%   { background-position: 150% center; }
  22%  { background-position: -50% center; }
  100% { background-position: -50% center; }
}

/* Sem gradiente animado não sobra nada para clipar — o título precisa voltar
   a ter cor própria, ou desapareceria. Vale para movimento reduzido e para o
   modo de cores forçadas, onde o navegador descarta background-image. */
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .hero__title .accent,
  .section-title {
    animation: none;
    background-image: none;
    color: var(--text);
    -webkit-text-fill-color: currentColor;
  }
}

.hero__lead {
  margin-top: 1.5rem;
  max-width: 52ch;
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);
  color: var(--text-2);
  text-wrap: pretty;
}

.hero__actions {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.hero__facts {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem 1.5rem;
  list-style: none;
  padding-inline: 0;
}
.hero__facts li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--text-2);
}
.hero__facts svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent-texto); }

/* Ilustração técnica do hero — placa desenhada para o projeto */
.hero__art {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero__art::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--ink-rgb), 0.16), transparent 72%);
  filter: blur(18px);
}
.hero__art svg { width: 100%; height: auto; max-width: 520px; overflow: visible; }

/* Trilhas da placa */
.pcb-trace {
  fill: none;
  stroke: rgba(var(--pcb-tinta), 0.22);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pcb-trace--forte { stroke: rgba(var(--pcb-tinta), 0.4); }

/* Pulsos que percorrem as trilhas */
.pcb-pulso {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 26 620;
  filter: drop-shadow(0 0 5px rgba(var(--ink-rgb), 0.85));
  animation: pcb-correr 4.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.pcb-pulso--b { animation-duration: 5.4s; animation-delay: -1.6s; }
.pcb-pulso--c { animation-duration: 4.8s; animation-delay: -3.1s; }
.pcb-pulso--d { animation-duration: 6.1s; animation-delay: -0.8s; }
@keyframes pcb-correr {
  from { stroke-dashoffset: 646; }
  to { stroke-dashoffset: 0; }
}

.pcb-via { fill: var(--bg-900); stroke: rgba(var(--pcb-tinta), 0.45); stroke-width: 1.4; }
.pcb-pad { fill: rgba(var(--pcb-tinta), 0.16); stroke: rgba(var(--pcb-tinta), 0.3); stroke-width: 1; }
.pcb-comp { fill: rgba(var(--pcb-tinta), 0.08); stroke: var(--line-2); stroke-width: 1.2; }
.pcb-pino { fill: rgba(var(--pcb-tinta), 0.55); }

.pcb-chip { fill: url(#chip-fundo); stroke: rgba(var(--pcb-tinta), 0.35); stroke-width: 1.6; }
.pcb-chip-borda { fill: none; stroke: rgba(var(--pcb-tinta), 0.16); stroke-width: 1.2; }
.pcb-rotulo {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-anchor: middle;
}

/* O chip respira devagar. A pulsação era um scale de 1,2% — invisível a olho
   nu e cara: o Blink não manda transform de SVG para o compositor, então cada
   quadro refazia o layout da página inteira, inclusive durante a rolagem.
   Medido: 58 ms de layout a cada 3 s de rolagem, contra 0 ms em opacity. */
.pcb-chip-grupo { animation: pcb-respirar 6s ease-in-out infinite; }
@keyframes pcb-respirar {
  50% { opacity: 0.82; }
}

/* Legenda abaixo da ilustração */
.hero__art-legenda {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero__art-legenda svg { width: 15px; height: 15px; color: var(--accent-texto); }

@media (prefers-reduced-motion: reduce) {
  .pcb-pulso { animation: none; stroke-dashoffset: 300; opacity: 0.6; }
  .pcb-chip-grupo { animation: none; }
}

/* ---------- 9. Diferenciais -------------------------------------------- */
/* Primeira seção depois do hero: um filete de largura total marca a virada,
   no lugar da antiga faixa deslizante. */
#diferenciais { border-top: 1px solid var(--line); }
#diferenciais::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 50%, transparent);
  opacity: 0.9;
}

/* Sem caixas: só tipografia e um filete que acende. O contraste com a grade
   de cards dos Serviços é proposital — evita a página virar uma sequência
   de retângulos iguais. */

.section-head-split {
  display: grid;
  gap: 1.15rem 3rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head-split .section-title { max-width: 20ch; }
.section-head-split .section-sub { max-width: 42ch; }
@media (min-width: 64rem) {
  .section-head-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .section-head-split .section-sub { margin-top: 0; padding-bottom: 0.4rem; }
}

.perks {
  display: grid;
  gap: clamp(2rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 40rem) { .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .perks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.perk { position: relative; padding-top: 1.7rem; }

/* Filete base */
.perk::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
}
/* Trecho em destaque que cresce quando o bloco entra na tela */
.perk::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    rgba(var(--ink-rgb), 0.45) 55%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(var(--ink-rgb), 0.35);
  transition: width 0.8s var(--ease) 0.15s;
}
.perk.is-inview::after { width: 55%; }
.perk:hover::after { width: 100%; }

.perk__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: 1.2rem;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--accent-texto);
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease),
    background-color 0.4s var(--ease);
}
.perk__icon svg { width: 22px; height: 22px; }
.perk:hover .perk__icon {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.perk__title {
  font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
  margin-bottom: 0.55rem;
}
/* Em quatro colunas alguns títulos ocupam duas linhas — reservar a altura
   mantém os parágrafos alinhados entre si. */
@media (min-width: 68rem) {
  .perk__title { min-height: 2.2em; }
}
.perk__text { font-size: 0.9rem; color: var(--text-2); max-width: 34ch; text-wrap: pretty; }

/* ---------- 10. Serviços ------------------------------------------------ */
.services {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.15rem);
  /* São 9 serviços: três colunas fecham 3×3 certinho no desktop, sem sobrar
     um card órfão na última linha. */
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.service {
  position: relative;
  padding: clamp(1.4rem, 3vw, 1.85rem);
  /* Sobre creme, o filete claro rendia ~1,5:1 e os cards sumiam no fundo.
     O cinza de apoio dá contorno sem pesar. */
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  /* Token, não branco cravado: no tema escuro o cartão precisa escurecer
     junto com o texto, senão o título claro cai sobre fundo branco. */
  background: var(--superficie-cartao);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.5s var(--ease);
}
.service::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, var(--accent-line), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.service::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px 220px at var(--px, 50%) var(--py, 50%), rgba(var(--ink-rgb), 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.service:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}
.service:hover::before, .service:hover::after { opacity: 1; }

.service__head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.service__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: linear-gradient(145deg, rgba(var(--ink-rgb), 0.14), rgba(var(--ink-rgb), 0.06));
  color: var(--accent-texto);
  flex: none;
  transition: transform 0.5s var(--ease);
}
.service__icon svg { width: 22px; height: 22px; }
.service:hover .service__icon { transform: rotate(-4deg) scale(1.06); }
/* Havia aqui um min-height de 2.25em no título para alinhar os parágrafos da
   mesma fileira. Só se paga quando os títulos quebram em número diferente de
   linhas — e em três colunas nenhum quebra, então virava ~20px de vazio nos
   nove cards sem alinhar nada. Os cards já têm altura igual pelo próprio grid. */
.service__title { font-size: 1.06rem; margin-bottom: 0.55rem; }

/* Cartão inteiro clicável, sem transformar o cartão num link.

   O <a> continua no título, então o teclado para uma vez só por cartão e o
   leitor de tela anuncia "Troca de tela de notebook, link" em vez de despejar
   título e descrição juntos como se fossem o nome do link. O ::after abaixo é
   que cobre o cartão e captura o clique.

   Funciona porque .service é `position: relative`. Os pseudo-elementos que o
   cartão já usa para o brilho têm `pointer-events: none`, então não competem
   com este. */
.service__title a {
  color: inherit;
  text-decoration: none;
}
.service__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.service:hover .service__title a { text-decoration: underline; text-underline-offset: 3px; }

/* O anel de foco pertence ao cartão, não ao texto do título: a área clicável é
   o cartão, e um anel só em volta das palavras indicaria o alvo errado. */
.service:has(.service__title a:focus-visible) {
  outline: 2px solid var(--accent-texto);
  outline-offset: 3px;
}
.service__title a:focus-visible { outline: none; }
.service__text { font-size: 0.89rem; color: var(--text-2); text-wrap: pretty; }

/* ---------- 11. Como funciona ------------------------------------------ */
/* Trilha das etapas — uma linha vertical liga os marcadores, e cada passo
   é um cartão à direita. A linha fica atrás dos marcadores; os marcadores
   têm fundo próprio para "cortá-la". */
.flow {
  position: relative;
  display: grid;
  gap: clamp(0.7rem, 2vw, 1rem);
  padding: 0;
  margin: 0;
  list-style: none;
}

.flow::before {
  content: "";
  position: absolute;
  left: calc(var(--no, 52px) / 2 - 1px);
  top: 34px;
  bottom: 34px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    var(--accent) 0%,
    var(--accent-2) 22%,
    rgba(var(--ink-rgb), 0.35) 52%,
    var(--line) 100%
  );
  opacity: 0.55;
}

.flow__item {
  --no: 52px;
  position: relative;
  display: grid;
  grid-template-columns: var(--no) minmax(0, 1fr);
  gap: clamp(0.85rem, 2.5vw, 1.35rem);
  align-items: start;
}
@media (min-width: 48rem) {
  .flow__item { --no: 58px; }
}

.flow__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--no);
  height: var(--no);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(var(--ink-rgb), 0.16), transparent 65%),
    var(--superficie-cartao),
    var(--bg-900);
  color: var(--accent-texto);
  box-shadow: 0 10px 26px -18px rgba(var(--ink-rgb), 0.9);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.flow__node svg { width: 22px; height: 22px; }

.flow__num {
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 24px;
  padding: 1px 5px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--bg-800);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-3);
  text-align: center;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.flow__card {
  position: relative;
  padding: clamp(0.95rem, 2.6vw, 1.35rem) clamp(1.05rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--superficie-cartao);
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
    background-color 0.4s var(--ease);
}
/* O bico que liga o cartão à trilha. */
.flow__card::before {
  content: "";
  position: absolute;
  top: 24px;
  left: -6px;
  width: 10px;
  height: 10px;
  rotate: 45deg;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.4s var(--ease);
}

.flow__item:hover .flow__node {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -16px rgba(var(--ink-rgb), 0.85);
}
.flow__item:hover .flow__num { color: var(--accent-texto); border-color: var(--accent-line); }
.flow__item:hover .flow__card { border-color: var(--line-2); transform: translateX(2px); }
.flow__item:hover .flow__card::before { border-color: var(--line-2); }

.flow__title {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem);
  margin-bottom: 0.35rem;
}
.flow__text { font-size: 0.92rem; color: var(--text-2); max-width: 56ch; text-wrap: pretty; }

/* --- Cartão lateral --- */
.flow-aside {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.2rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--ink-rgb), 0.16), transparent 60%),
    linear-gradient(160deg, rgba(var(--ink-rgb), 0.09), rgba(var(--ink-rgb), 0.04));
  overflow: hidden;
}
.flow-aside::after {
  content: "";
  position: absolute;
  inset: auto -30% -55% auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--ink-rgb), 0.18), transparent 68%);
  pointer-events: none;
}
.flow-aside > * { position: relative; }

.flow-aside__selo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--pastilha-fundo);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-texto);
}
.flow-aside__selo svg { width: 16px; height: 16px; }

.flow-aside__title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem); margin-bottom: 0.7rem; }
.flow-aside__text { color: var(--text-2); font-size: 0.95rem; }

.flow-aside__lista {
  display: grid;
  gap: 0.7rem;
  margin: 1.4rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.flow-aside__lista li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text);
}
.flow-aside__lista svg {
  width: 17px;
  height: 17px;
  margin-top: 0.2em;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.14);
  color: var(--accent-texto);
}
.flow-aside .btn { margin-top: 1.6rem; }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); }
  .split--sticky > :last-child { position: sticky; top: 110px; }
}

/* ---------- 12. FAQ ----------------------------------------------------- */
/* Oito perguntas são uma lista, não oito cartões soltos. Contêiner único com
   filetes internos: o bloco ganha a massa que não tinha, e o item aberto passa
   a ser o único destaque em vez de mais um retângulo igual aos outros.
   A medida fecha em 52rem porque as perguntas são curtas — a 62rem a seta
   ficava órfã, a um palmo do texto a que pertence. */
.faq {
  display: grid;
  max-width: 52rem;
  margin-inline: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.faq__item {
  border-bottom: 1px solid var(--line);
  transition: background-color 0.35s var(--ease);
}
.faq__item:last-of-type { border-bottom: 0; }
.faq__item[open] { background: rgba(var(--ink-rgb), 0.07); }
.faq__item:hover:not([open]) { background: rgba(var(--ink-rgb), 0.025); }
.faq__q {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 0.95rem + 0.2vw, 1.08rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  margin-left: auto;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--text-2);
  border-bottom: 1.5px solid var(--text-2);
  rotate: 45deg;
  translate: 0 -2px;
  flex: none;
  transition: rotate 0.35s var(--ease), border-color 0.3s;
}
.faq__item[open] .faq__q::after { rotate: -135deg; translate: 0 2px; border-color: var(--accent-texto); }
.faq__a { padding: 0 1.25rem 1.25rem; color: var(--text-2); font-size: 0.94rem; max-width: 70ch; text-wrap: pretty; }
.faq__item[open] .faq__a { animation: fadeUp 0.4s var(--ease) both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 13. CTA / Contato ------------------------------------------ */
.cta-panel {
  position: relative;
  padding: clamp(2rem, 6vw, 4rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(var(--ink-rgb), 0.14), transparent 62%),
    var(--superficie-cartao);
  overflow: hidden;
  text-align: center;
}
.cta-panel__title { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.8rem); }
.cta-panel__text { margin: 1rem auto 0; max-width: 54ch; color: var(--text-2); }
.cta-panel__actions {
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center;
}

/* ---------- 14. Formulário de OS --------------------------------------- */
.os-shell { padding-top: clamp(7rem, 15vw, 9.5rem); }

.os-layout { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 70rem) {
  .os-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .os-side { position: sticky; top: 110px; }
}

.os-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--superficie-cartao);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

.stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 1.15rem clamp(1.1rem, 3.5vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.stepper__item { display: grid; gap: 0.5rem; }
.stepper__bar { height: 3px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.stepper__bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: inherit;
  transition: width 0.5s var(--ease);
}
.stepper__item[data-state="done"] .stepper__bar i,
.stepper__item[data-state="current"] .stepper__bar i { width: 100%; }
.stepper__item[data-state="current"] .stepper__bar i { animation: sheen 2.4s ease-in-out infinite; }
@keyframes sheen { 50% { opacity: 0.55; } }
.stepper__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stepper__label b { font-weight: 500; }
.stepper__nome { margin-left: 0.4em; }
@media (max-width: 30rem) { .stepper__nome { display: none; } }
.stepper__item[data-state="current"] .stepper__label { color: var(--accent-texto); }
.stepper__item[data-state="done"] .stepper__label { color: var(--text-2); }

.os-body { padding: clamp(1.35rem, 4vw, 2.4rem); }

.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset[hidden] { display: none; }
.fieldset__head { margin-bottom: 1.6rem; }
.fieldset__step {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-texto);
}
.fieldset__title { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); margin-top: 0.5rem; }
.fieldset__hint { margin-top: 0.55rem; color: var(--text-2); font-size: 0.92rem; }

.grid-2 { display: grid; gap: 1.05rem; }
@media (min-width: 44rem) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.col-span-2 { grid-column: 1 / -1; }
@media (min-width: 44rem) {
  .col-cep { grid-column: span 1; }
  .grid-addr { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-addr .f-cep { grid-column: span 2; }
  .grid-addr .f-rua { grid-column: span 4; }
  .grid-addr .f-num { grid-column: span 2; }
  .grid-addr .f-comp { grid-column: span 4; }
  .grid-addr .f-bairro { grid-column: span 3; }
  .grid-addr .f-cidade { grid-column: span 3; }
}

.field { display: grid; gap: 0.45rem; }
.field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.005em;
}
.field label .req { color: var(--accent-texto); }
.field .opt { color: var(--text-3); font-weight: 400; }

.input, .textarea, .select {
  width: 100%;
  padding: 0.82rem 0.95rem;
  border: 1px solid var(--line-campo);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  /* 16px é obrigatório: abaixo disso o Safari do iPhone e do iPad dá zoom
     sozinho quando a pessoa toca no campo. */
  font-size: 1rem;
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--text-3); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent-texto);
  background: rgba(var(--ink-rgb), 0.045);
  box-shadow: 0 0 0 3px rgba(var(--ink-rgb), 0.14);
}
.textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.select option { background: var(--bg-700); color: var(--text); }

.field[data-invalid="true"] .input,
.field[data-invalid="true"] .textarea,
.field[data-invalid="true"] .select { border-color: var(--err); background: rgba(179, 38, 30, 0.06); }

.error-msg {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--err);
}
.field[data-invalid="true"] .error-msg { display: flex; animation: fadeUp 0.25s var(--ease) both; }
.error-msg svg { width: 14px; height: 14px; flex: none; }

.hp-field,
.hp-field input {
  position: absolute !important;
  left: -9999px;
  width: 1px !important;
  height: 1px !important;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Chips de serviço */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { position: relative; }
.chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%; height: 100%;
  margin: 0;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.88rem;
  color: var(--text-2);
  transition: border-color 0.28s var(--ease), background-color 0.28s var(--ease),
    color 0.28s var(--ease);
  user-select: none;
}
.chip span::before {
  content: "";
  width: 15px; height: 15px;
  border: 1.5px solid var(--line-campo);
  border-radius: 5px;
  flex: none;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.chip input:hover + span { border-color: var(--text-3); color: var(--text); }
.chip input:checked + span {
  border-color: var(--accent-line);
  background: rgba(var(--ink-rgb), 0.11);
  color: var(--accent-deep);
}
.chip input:checked + span::before {
  background: var(--accent);
  border-color: var(--accent-texto);
  box-shadow: inset 0 0 0 2px var(--bg-900);
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Consentimento */
.consent {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 0.3s;
}
[data-campo="consentimento"][data-invalid="true"] .consent { border-color: var(--err); }
.consent input {
  width: 24px;
  height: 24px;
  accent-color: var(--accent-texto);
  flex: none;
  margin-top: 1px;
}
.consent label { font-size: 0.88rem; color: var(--text-2); }
.consent a { color: var(--accent-texto); text-decoration: underline; text-underline-offset: 3px; }

.note {
  display: flex;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: rgba(var(--ink-rgb), 0.035);
  font-size: 0.87rem;
  color: var(--text-2);
}
.note svg { width: 18px; height: 18px; color: var(--accent-texto); flex: none; margin-top: 2px; }

.os-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.os-actions .btn { flex: 1 1 auto; min-width: 150px; }
.os-actions .spacer { flex: 1 1 auto; }

.form-alert {
  display: none;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(179, 38, 30, 0.45);
  background: rgba(179, 38, 30, 0.09);
  font-size: 0.88rem;
  color: #7f1d1d;
}
.form-alert.is-visible { display: flex; animation: fadeUp 0.3s var(--ease) both; }
.form-alert svg { width: 18px; height: 18px; flex: none; color: var(--err); margin-top: 1px; }

/* Botão em carregamento */
.btn.is-loading { pointer-events: none; color: transparent !important; }
.btn.is-loading::before {
  content: "";
  position: absolute;
  width: 19px; height: 19px;
  border: 2px solid rgba(3, 19, 24, 0.35);
  border-top-color: var(--accent-forte);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn--ghost.is-loading::before { border-color: var(--line-2); border-top-color: var(--accent-deep); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Painel lateral resumo */
.os-side__card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1.35rem;
}
.os-side__card + .os-side__card { margin-top: 0.9rem; }
.os-side__title {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 1rem;
}
.os-side__list { display: grid; gap: 0.8rem; list-style: none; padding: 0; margin: 0; }
.os-side__list li { display: flex; gap: 0.65rem; font-size: 0.87rem; color: var(--text-2); }
.os-side__list svg { width: 17px; height: 17px; color: var(--accent-texto); flex: none; margin-top: 2px; }

/* Sucesso */
#os-sucesso { scroll-margin-top: 108px; }
.success { text-align: center; padding: clamp(2rem, 6vw, 3.5rem) clamp(1.2rem, 4vw, 2.5rem); }
.success__ring {
  width: 92px; height: 92px;
  margin: 0 auto 1.75rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: radial-gradient(circle, rgba(var(--ink-rgb), 0.2), transparent 70%);
  animation: pop 0.6s var(--ease) both;
}
.success__ring svg { width: 42px; height: 42px; color: var(--accent-texto); }
.success__ring svg path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw 0.7s var(--ease) 0.25s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.75); } to { opacity: 1; transform: none; } }

.success__title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
.success__text { margin-top: 0.9rem; color: var(--text-2); max-width: 48ch; margin-inline: auto; }
.os-number {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.9rem;
  padding: 1.1rem 2rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: rgba(var(--ink-rgb), 0.07);
}
.os-number span {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3);
}
.os-number strong {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  font-weight: 600;
}
.success__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* Comprovante (impressão) */
.receipt { display: none; }

/* ---------- 15. Footer -------------------------------------------------- */
.footer {
  position: relative;
  /* A última seção já tem folga no rodapé; margem aqui só criaria um vão. */
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.05), transparent);
  padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
}
.footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__desc { margin-top: 1.1rem; color: var(--text-2); font-size: 0.9rem; max-width: 38ch; text-wrap: pretty; }
.footer__title {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: 1.1rem;
}
.footer__list { display: grid; gap: 0.15rem; list-style: none; padding: 0; }
.footer__list a,
.footer__list span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--text-2);
  font-size: 0.9rem;
  transition: color 0.25s;
}
.footer__list a:hover { color: var(--accent-texto); }

.socials { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.social {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text-2);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease),
    border-color 0.35s var(--ease), background-color 0.35s var(--ease);
}
.social svg { width: 20px; height: 20px; }
.social:hover { color: var(--text); transform: translateY(-3px); border-color: var(--accent-line); background: var(--accent-soft); }

.footer__bar {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-3);
}

/* ---------- 16. WhatsApp flutuante ------------------------------------- */
.wa-fab {
  position: fixed;
  right: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-right));
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.25rem 0.85rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(37, 211, 102, 0.45);
  background: linear-gradient(135deg, #1fa855, #25d366);
  color: #04240f;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 16px 40px -16px rgba(37, 211, 102, 0.85);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  opacity: 0;
  translate: 0 20px;
  pointer-events: none;
}
.wa-fab.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.wa-fab:hover { transform: translateY(-3px); box-shadow: 0 22px 52px -18px rgba(37, 211, 102, 1); }
.wa-fab svg { width: 24px; height: 24px; flex: none; }
.wa-fab__text { display: none; }
@media (min-width: 30rem) { .wa-fab__text { display: inline; } }

/* ---------- 17. Reveal / motion ---------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-inview { opacity: 1; transform: none; will-change: auto; }

/* ---------- 18. Página de conteúdo (privacidade) ----------------------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem); margin-top: 2.4rem; margin-bottom: 0.8rem; }
.prose p, .prose li { color: var(--text-2); font-size: 0.96rem; }
.prose p + p { margin-top: 0.9rem; }
/* margin-bottom também, não só top: sem ele um parágrafo logo depois da lista
   encostava no último item, sem respiro nenhum. Colapsa com o margin-top maior
   do h2, então não gera espaço dobrado quando vem um título em seguida. */
.prose ul { margin: 0.9rem 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.prose strong { color: var(--text); font-weight: 600; }
/* :not(.btn) pelo mesmo motivo do menu do celular: `.prose a` tem
   especificidade maior que `.btn`, então sublinhava e recolorava os botões
   dentro do texto. Botão não é link de leitura. */
.prose a:not(.btn) { color: var(--accent-texto); text-decoration: underline; text-underline-offset: 3px; }

.page-head { padding-top: clamp(7rem, 15vw, 9.5rem); }

/* ---------- 19. Impressão ---------------------------------------------- */
@media print {
  :root { --text: #000; --text-2: #333; }
  body { background: #fff !important; color: #000; }
  body::before, #bg-aurora, .header, .mobile-nav, .wa-fab, .footer,
  .os-side, .stepper, .success__actions, .no-print { display: none !important; }
  .os-card { border: 1px solid #ccc; box-shadow: none; background: #fff; }
  .success { text-align: left; padding: 0; }
  .receipt {
    display: block !important;
    color: #000;
    font-family: var(--font-text);
  }
  /* h2/h3 e não h1/h2: o comprovante é seção da página, não documento à parte.
     A aparência impressa continua a mesma — só os níveis mudaram. */
  .receipt h2 { font-size: 20pt; margin-bottom: 4pt; text-transform: none; letter-spacing: normal; color: #000; }
  .receipt h3 { font-size: 10pt; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 16pt; color: #444; }
  .receipt table { width: 100%; border-collapse: collapse; margin-top: 6pt; }
  .receipt td { padding: 4pt 0; vertical-align: top; font-size: 10pt; border-bottom: 1px solid #eee; }
  .receipt td:first-child { width: 34%; color: #555; }
  .success__ring, .os-number { display: none; }
}

/* ---------- 20. Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  #bg-aurora { opacity: 1; }
  .wa-fab { opacity: 1; translate: 0 0; pointer-events: auto; }
}

/* ---------- 21. Alto contraste / forced colors -------------------------- */
@media (forced-colors: active) {
  .btn, .service, .perk, .faq__item, .os-card { border: 1px solid CanvasText; }
  #bg-aurora { display: none; }
}

/* ---------- 18. Painel de Ordens de Serviço ---------------------------- */
/* Página privada (/painel). Reaproveita tokens, botões e campos do site. */

.body--painel { padding-bottom: 3rem; }

/* --- Login --- */
.painel-login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.painel-login__card {
  width: 100%;
  max-width: 26rem;
  display: grid;
  gap: 1rem;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: var(--superficie-cartao);
  box-shadow: var(--shadow-2);
  text-align: center;
}
.painel-login__marca { display: flex; justify-content: center; }
.painel-login__titulo { font-size: 1.35rem; }
.painel-login__texto { color: var(--text-2); font-size: 0.95rem; margin-bottom: 0.25rem; }
.painel-login__card .field { text-align: left; }
.painel-login__erro {
  margin: -0.25rem 0 0;
  color: var(--err);
  font-size: 0.9rem;
}

/* --- Estrutura --- */
.painel {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2rem) var(--gutter) 0;
}

.painel-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.painel-topo__marca { display: inline-flex; align-items: center; gap: 0.65rem; margin-right: auto; }
.painel-topo__nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.painel-topo__acoes { display: flex; gap: 0.5rem; }

/* --- Filtros --- */
.painel-filtros {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem 0;
}
@media (min-width: 62rem) {
  .painel-filtros { grid-template-columns: minmax(0, 1fr) 20rem; align-items: center; }
  /* No desktop os filtros quebram linha em vez de rolar — assim nenhum fica
     escondido atrás do campo de busca. */
  .painel-chips { flex-wrap: wrap; overflow: visible; }
}

.painel-chips {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}
.pchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s, background-color 0.25s;
}
.pchip:hover { color: var(--text); border-color: var(--line-campo); }
.pchip.is-active {
  color: var(--accent-forte);
  background-color: var(--accent);
  background-image: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}
.pchip__n {
  min-width: 1.4em;
  padding: 0 0.3em;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.12);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-align: center;
}
.pchip.is-active .pchip__n { background: rgba(0, 0, 0, 0.18); }

.painel-aviso {
  margin-bottom: 1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  font-size: 0.9rem;
}
.painel-aviso.is-erro {
  border-color: rgba(179, 38, 30, 0.4);
  background: rgba(179, 38, 30, 0.1);
  color: var(--err);
}

/* --- Lista de OS --- */
.painel-lista {
  display: grid;
  gap: 0.75rem;
  padding-bottom: 3rem;
}
@media (min-width: 48rem) { .painel-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .painel-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Cartão da lista do painel. Escopado em .painel-lista: sem isso ele
   sobrescreveria o .os-card do formulário de OS (mesma especificidade,
   declarado depois) e o cartão do formulário ganhava padding, gap,
   cursor de clique e um salto no hover. */
.painel-lista .os-card {
  display: grid;
  gap: 0.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--superficie-cartao);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.painel-lista .os-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.os-card__topo { display: flex; align-items: center; gap: 0.6rem; justify-content: space-between; }
.os-card__numero { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-texto); }
.os-card__nome { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.os-card__equip { color: var(--text-2); font-size: 0.88rem; }
.os-card__rodape {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
  color: var(--text-3);
  font-size: 0.78rem;
  /* Datas empilhadas em grade: os dígitos precisam alinhar entre cartões. */
  font-variant-numeric: tabular-nums;
}

.selo {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.selo--nova { color: var(--accent-texto); border-color: var(--accent-line); background: var(--accent-soft); }
.selo--orcamento,
.selo--aprovado,
.selo--execucao {
  color: var(--warn);
  border-color: rgba(138, 80, 0, 0.4);
  background: rgba(138, 80, 0, 0.1);
}
.selo--pronto,
.selo--devolvido {
  color: var(--ok);
  border-color: rgba(18, 128, 95, 0.35);
  background: rgba(18, 128, 95, 0.1);
}
.selo--cancelado {
  color: var(--err);
  border-color: rgba(179, 38, 30, 0.35);
  background: rgba(179, 38, 30, 0.1);
}

.painel-vazio {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-2);
}
.painel-vazio__dica { margin-top: 0.5rem; color: var(--text-3); font-size: 0.9rem; }

/* --- Detalhe (painel lateral) --- */
.drawer { position: fixed; inset: 0; z-index: 120; }
.drawer__fundo {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.drawer__caixa {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(30rem, 100%);
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line-2);
  background: var(--bg-800);
  box-shadow: -24px 0 60px -30px rgba(var(--ink-rgb), 0.22);
  animation: drawer-entra 0.32s var(--ease);
}
@keyframes drawer-entra { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .drawer__caixa { animation: none; }
}

.drawer__topo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.drawer__titulo { font-family: var(--font-mono); font-size: 1rem; color: var(--accent-texto); margin-right: auto; }
.drawer__fechar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.drawer__corpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 0.9rem 1.25rem;
  display: grid;
  gap: 0.8rem;
  align-content: start;
}
.drawer__rodape {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg-700);
}

.det__cabecalho { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.det__data { color: var(--text-3); font-size: 0.82rem; }
/* Cada seção é um cartão. Eram listas soltas empilhadas, e no celular não
   dava para ver onde "Cliente" acabava e "Equipamento" começava. */
.det__bloco {
  display: grid; gap: 0.5rem;
  padding: 0.9rem 0.95rem;
  background: var(--superficie-cartao, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}
.det__titulo {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Duas colunas para os fatos curtos, largura cheia para texto corrido.
   O erro antigo era usar a MESMA forma para os dois: o rótulo reservava 9rem e
   "O notebook está muito lento..." saía numa coluna estreita, quebrando a cada
   quatro palavras. E o remédio de então — empilhar tudo abaixo de 480px — nem
   entrava em ação, porque a gaveta num celular comum mede pouco mais que isso.
   Agora a coluna do rótulo é enxuta, e quem precisa de espaço pede espaço. */
.det__linha {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.15rem 0.8rem;
  align-items: baseline;
}
/* Descrição do problema, observação e endereço: rótulo em cima, valor solto
   embaixo ocupando tudo. */
.det__linha--longo { grid-template-columns: minmax(0, 1fr); }
/* Em tela bem estreita nem os valores curtos cabem ao lado do rótulo. */
@media (max-width: 24rem) {
  .det__linha { grid-template-columns: minmax(0, 1fr); }
}
.det__rotulo { color: var(--text-3); font-size: 0.76rem; }
.det__valor {
  color: var(--text); font-size: 0.95rem; font-weight: 500;
  overflow-wrap: anywhere; margin: 0;
}
/* Texto que o cliente escreveu, e endereço: parágrafo, não etiqueta. */
.det__valor--longo {
  font-weight: 400; line-height: 1.5; white-space: pre-line;
  overflow-wrap: break-word;
}

/* Telefone, WhatsApp e e-mail viram toque. O painel é usado do celular, com o
   equipamento na mão; um número que só dá para copiar não serve de nada.
   O link ocupa a linha inteira para virar um alvo grande de verdade. */
.det__valor--link {
  display: block; padding: 0.25rem 0; margin: -0.25rem 0;
  color: var(--accent-texto); text-decoration: underline;
  text-underline-offset: 3px;
}
.det__valor--link:hover { color: var(--text); }

.det__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.det__chip {
  padding: 0.22rem 0.6rem; font-size: 0.85rem;
  color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: 999px;
}

.det__hist { display: grid; gap: 0.6rem; padding: 0; list-style: none; }
.det__hist li { display: grid; font-size: 0.88rem; }
.det__hist-data { color: var(--text-3); font-size: 0.8rem; }
.det__hist-nota { color: var(--text-2); font-size: 0.85rem; }

/* O bloco global de movimento reduzido zera a duração das transições. Para o
   brilho isso não basta: sem tempo de percurso ele apareceria parado no fim do
   trajeto, uma faixa clara presa no botão. Aqui ele é removido de vez. */
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after,
  .btn--wa::after { display: none; }
}

/* Sem escalonar, os cinco títulos brilham em uníssono: todos começam no
   carregamento com o mesmo ciclo e nunca dessincronizam. Em tela alta, ou no
   meio de uma rolagem, dois coincidem e o efeito lê como defeito.
   Os atrasos são NEGATIVOS de propósito — assim cada um já entra adiantado no
   ciclo, em vez de esperar para começar. */
#diferenciais .section-title   { animation-delay: -2.2s; }
#servicos .section-title       { animation-delay: -4.4s; }
#como-funciona .section-title  { animation-delay: -6.6s; }
#duvidas .section-title        { animation-delay: -8.8s; }

/* ---------- 23. Equipe: cartão holográfico ----------------------------- */
/* Porte fiel do ProfileCard (React Bits) para HTML + CSS. Estrutura, camadas,
   blends e proporções são as do original; o React só guardava estado, o que
   aqui é um closure em tilt.js.

   É a coisa mais cara da página, e isso é deliberado — foi pedido. Três
   contenções mantêm o custo preso a ela:
     • as camadas de hover (`.pc-shine::before/::after`) só existem em hover,
       exatamente como no original;
     • tudo para quando o cartão sai da tela (ver tilt.js);
     • `prefers-reduced-motion` deixa o cartão parado, sem holografia. */
.equipe {
  display: flex;
  justify-content: center;
  --pc-raio: 26px;
  --pc-x: 50%;
  --pc-y: 50%;
  --pc-do-centro: 0;
  --pc-do-topo: 0.5;
  --pc-da-esquerda: 0.5;
  --pc-rot-x: 0deg;
  --pc-rot-y: 0deg;
  --pc-fundo-x: 50%;
  --pc-fundo-y: 50%;
  --pc-opacidade: 0;
  --sp-1: hsl(2, 100%, 73%);
  --sp-2: hsl(53, 100%, 69%);
  --sp-3: hsl(93, 100%, 69%);
  --sp-4: hsl(176, 100%, 76%);
  --sp-5: hsl(228, 100%, 74%);
  --sp-6: hsl(283, 100%, 73%);
  /* Padrão que mascara o holográfico. No original vem de um PNG; aqui é um
     SVG embutido com motivo de circuito, para não acrescentar arquivo. */
  --pc-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23fff'%3E%3Crect x='304' y='360' width='4' height='4' opacity='0.82'/%3E%3Crect x='300' y='364' width='4' height='4' opacity='0.79'/%3E%3Crect x='296' y='368' width='4' height='4' opacity='0.76'/%3E%3Crect x='296' y='364' width='4' height='4' opacity='0.73'/%3E%3Crect x='300' y='368' width='4' height='4' opacity='0.70'/%3E%3Crect x='304' y='372' width='4' height='4' opacity='0.67'/%3E%3Crect x='304' y='368' width='4' height='4' opacity='0.64'/%3E%3Crect x='308' y='368' width='4' height='4' opacity='0.61'/%3E%3Crect x='312' y='372' width='4' height='4' opacity='0.58'/%3E%3Crect x='308' y='376' width='4' height='4' opacity='0.55'/%3E%3Crect x='312' y='376' width='4' height='4' opacity='0.52'/%3E%3Crect x='316' y='376' width='4' height='4' opacity='0.49'/%3E%3Crect x='68' y='300' width='4' height='4' opacity='0.55'/%3E%3Crect x='72' y='304' width='4' height='4' opacity='0.52'/%3E%3Crect x='76' y='308' width='4' height='4' opacity='0.49'/%3E%3Crect x='80' y='308' width='4' height='4' opacity='0.46'/%3E%3Crect x='76' y='312' width='4' height='4' opacity='0.43'/%3E%3Crect x='80' y='312' width='4' height='4' opacity='0.40'/%3E%3Crect x='80' y='316' width='4' height='4' opacity='0.37'/%3E%3Crect x='80' y='320' width='4' height='4' opacity='0.34'/%3E%3Crect x='76' y='324' width='4' height='4' opacity='0.31'/%3E%3Crect x='80' y='324' width='4' height='4' opacity='0.30'/%3E%3Crect x='192' y='392' width='4' height='4' opacity='0.46'/%3E%3Crect x='192' y='396' width='4' height='4' opacity='0.43'/%3E%3Crect x='268' y='344' width='4' height='4' opacity='0.69'/%3E%3Crect x='272' y='344' width='4' height='4' opacity='0.66'/%3E%3Crect x='276' y='348' width='4' height='4' opacity='0.63'/%3E%3Crect x='280' y='348' width='4' height='4' opacity='0.60'/%3E%3Crect x='280' y='352' width='4' height='4' opacity='0.57'/%3E%3Crect x='280' y='356' width='4' height='4' opacity='0.54'/%3E%3Crect x='276' y='360' width='4' height='4' opacity='0.51'/%3E%3Crect x='276' y='364' width='4' height='4' opacity='0.48'/%3E%3Crect x='224' y='328' width='4' height='4' opacity='0.88'/%3E%3Crect x='228' y='332' width='4' height='4' opacity='0.85'/%3E%3Crect x='232' y='332' width='4' height='4' opacity='0.82'/%3E%3Crect x='236' y='332' width='4' height='4' opacity='0.79'/%3E%3Crect x='232' y='336' width='4' height='4' opacity='0.76'/%3E%3Crect x='236' y='336' width='4' height='4' opacity='0.73'/%3E%3Crect x='392' y='304' width='4' height='4' opacity='0.88'/%3E%3Crect x='396' y='304' width='4' height='4' opacity='0.85'/%3E%3Crect x='384' y='280' width='4' height='4' opacity='0.58'/%3E%3Crect x='384' y='276' width='4' height='4' opacity='0.55'/%3E%3Crect x='380' y='280' width='4' height='4' opacity='0.52'/%3E%3Crect x='376' y='284' width='4' height='4' opacity='0.49'/%3E%3Crect x='376' y='280' width='4' height='4' opacity='0.46'/%3E%3Crect x='372' y='284' width='4' height='4' opacity='0.43'/%3E%3Crect x='376' y='284' width='4' height='4' opacity='0.40'/%3E%3Crect x='380' y='288' width='4' height='4' opacity='0.37'/%3E%3Crect x='376' y='292' width='4' height='4' opacity='0.34'/%3E%3Crect x='380' y='296' width='4' height='4' opacity='0.31'/%3E%3Crect x='384' y='300' width='4' height='4' opacity='0.30'/%3E%3Crect x='384' y='296' width='4' height='4' opacity='0.30'/%3E%3Crect x='8' y='260' width='4' height='4' opacity='0.96'/%3E%3Crect x='12' y='264' width='4' height='4' opacity='0.93'/%3E%3Crect x='12' y='260' width='4' height='4' opacity='0.90'/%3E%3Crect x='16' y='260' width='4' height='4' opacity='0.87'/%3E%3Crect x='20' y='264' width='4' height='4' opacity='0.84'/%3E%3Crect x='20' y='268' width='4' height='4' opacity='0.81'/%3E%3Crect x='24' y='268' width='4' height='4' opacity='0.78'/%3E%3Crect x='28' y='272' width='4' height='4' opacity='0.75'/%3E%3Crect x='32' y='272' width='4' height='4' opacity='0.72'/%3E%3Crect x='36' y='276' width='4' height='4' opacity='0.69'/%3E%3Crect x='40' y='280' width='4' height='4' opacity='0.66'/%3E%3Crect x='40' y='276' width='4' height='4' opacity='0.63'/%3E%3Crect x='40' y='280' width='4' height='4' opacity='0.60'/%3E%3Crect x='68' y='24' width='4' height='4' opacity='0.91'/%3E%3Crect x='72' y='24' width='4' height='4' opacity='0.88'/%3E%3Crect x='72' y='20' width='4' height='4' opacity='0.85'/%3E%3Crect x='68' y='24' width='4' height='4' opacity='0.82'/%3E%3Crect x='72' y='24' width='4' height='4' opacity='0.79'/%3E%3Crect x='72' y='28' width='4' height='4' opacity='0.76'/%3E%3Crect x='76' y='28' width='4' height='4' opacity='0.73'/%3E%3Crect x='80' y='28' width='4' height='4' opacity='0.70'/%3E%3Crect x='80' y='24' width='4' height='4' opacity='0.67'/%3E%3Crect x='84' y='24' width='4' height='4' opacity='0.64'/%3E%3Crect x='300' y='348' width='4' height='4' opacity='0.67'/%3E%3Crect x='304' y='348' width='4' height='4' opacity='0.64'/%3E%3Crect x='308' y='352' width='4' height='4' opacity='0.61'/%3E%3Crect x='312' y='352' width='4' height='4' opacity='0.58'/%3E%3Crect x='312' y='356' width='4' height='4' opacity='0.55'/%3E%3Crect x='328' y='252' width='4' height='4' opacity='0.86'/%3E%3Crect x='328' y='256' width='4' height='4' opacity='0.83'/%3E%3Crect x='332' y='260' width='4' height='4' opacity='0.80'/%3E%3Crect x='332' y='256' width='4' height='4' opacity='0.77'/%3E%3Crect x='336' y='256' width='4' height='4' opacity='0.74'/%3E%3Crect x='112' y='272' width='4' height='4' opacity='0.58'/%3E%3Crect x='112' y='276' width='4' height='4' opacity='0.55'/%3E%3Crect x='116' y='280' width='4' height='4' opacity='0.52'/%3E%3Crect x='120' y='280' width='4' height='4' opacity='0.49'/%3E%3Crect x='120' y='284' width='4' height='4' opacity='0.46'/%3E%3Crect x='124' y='288' width='4' height='4' opacity='0.43'/%3E%3Crect x='124' y='284' width='4' height='4' opacity='0.40'/%3E%3Crect x='128' y='288' width='4' height='4' opacity='0.37'/%3E%3Crect x='124' y='292' width='4' height='4' opacity='0.34'/%3E%3Crect x='128' y='296' width='4' height='4' opacity='0.31'/%3E%3Crect x='132' y='296' width='4' height='4' opacity='0.30'/%3E%3Crect x='4' y='168' width='4' height='4' opacity='0.66'/%3E%3Crect x='4' y='172' width='4' height='4' opacity='0.63'/%3E%3Crect x='8' y='172' width='4' height='4' opacity='0.60'/%3E%3Crect x='8' y='176' width='4' height='4' opacity='0.57'/%3E%3Crect x='4' y='180' width='4' height='4' opacity='0.54'/%3E%3Crect x='8' y='180' width='4' height='4' opacity='0.51'/%3E%3Crect x='8' y='176' width='4' height='4' opacity='0.48'/%3E%3Crect x='4' y='180' width='4' height='4' opacity='0.45'/%3E%3Crect x='8' y='184' width='4' height='4' opacity='0.42'/%3E%3Crect x='12' y='188' width='4' height='4' opacity='0.39'/%3E%3Crect x='256' y='212' width='4' height='4' opacity='0.69'/%3E%3Crect x='260' y='212' width='4' height='4' opacity='0.66'/%3E%3Crect x='260' y='216' width='4' height='4' opacity='0.63'/%3E%3Crect x='260' y='220' width='4' height='4' opacity='0.60'/%3E%3Crect x='264' y='224' width='4' height='4' opacity='0.57'/%3E%3Crect x='264' y='220' width='4' height='4' opacity='0.54'/%3E%3Crect x='268' y='224' width='4' height='4' opacity='0.51'/%3E%3Crect x='272' y='224' width='4' height='4' opacity='0.48'/%3E%3Crect x='276' y='224' width='4' height='4' opacity='0.45'/%3E%3Crect x='276' y='228' width='4' height='4' opacity='0.42'/%3E%3Crect x='280' y='228' width='4' height='4' opacity='0.39'/%3E%3Crect x='276' y='232' width='4' height='4' opacity='0.36'/%3E%3Crect x='280' y='232' width='4' height='4' opacity='0.33'/%3E%3Crect x='280' y='236' width='4' height='4' opacity='0.30'/%3E%3Crect x='280' y='240' width='4' height='4' opacity='0.30'/%3E%3Crect x='288' y='324' width='4' height='4' opacity='0.92'/%3E%3Crect x='288' y='328' width='4' height='4' opacity='0.89'/%3E%3Crect x='288' y='324' width='4' height='4' opacity='0.86'/%3E%3Crect x='288' y='328' width='4' height='4' opacity='0.83'/%3E%3Crect x='292' y='328' width='4' height='4' opacity='0.80'/%3E%3Crect x='372' y='364' width='4' height='4' opacity='0.61'/%3E%3Crect x='368' y='368' width='4' height='4' opacity='0.58'/%3E%3Crect x='364' y='372' width='4' height='4' opacity='0.55'/%3E%3Crect x='368' y='376' width='4' height='4' opacity='0.52'/%3E%3Crect x='372' y='376' width='4' height='4' opacity='0.49'/%3E%3Crect x='376' y='376' width='4' height='4' opacity='0.46'/%3E%3Crect x='380' y='376' width='4' height='4' opacity='0.43'/%3E%3Crect x='380' y='380' width='4' height='4' opacity='0.40'/%3E%3Crect x='384' y='384' width='4' height='4' opacity='0.37'/%3E%3Crect x='380' y='388' width='4' height='4' opacity='0.34'/%3E%3Crect x='52' y='148' width='4' height='4' opacity='0.99'/%3E%3Crect x='56' y='152' width='4' height='4' opacity='0.96'/%3E%3Crect x='56' y='156' width='4' height='4' opacity='0.93'/%3E%3Crect x='60' y='156' width='4' height='4' opacity='0.90'/%3E%3Crect x='64' y='156' width='4' height='4' opacity='0.87'/%3E%3Crect x='60' y='160' width='4' height='4' opacity='0.84'/%3E%3Crect x='60' y='164' width='4' height='4' opacity='0.81'/%3E%3Crect x='60' y='168' width='4' height='4' opacity='0.78'/%3E%3Crect x='172' y='176' width='4' height='4' opacity='0.68'/%3E%3Crect x='176' y='180' width='4' height='4' opacity='0.65'/%3E%3Crect x='180' y='184' width='4' height='4' opacity='0.62'/%3E%3Crect x='184' y='188' width='4' height='4' opacity='0.59'/%3E%3Crect x='188' y='192' width='4' height='4' opacity='0.56'/%3E%3Crect x='192' y='192' width='4' height='4' opacity='0.53'/%3E%3Crect x='32' y='60' width='4' height='4' opacity='0.63'/%3E%3Crect x='32' y='64' width='4' height='4' opacity='0.60'/%3E%3Crect x='32' y='60' width='4' height='4' opacity='0.57'/%3E%3Crect x='36' y='64' width='4' height='4' opacity='0.54'/%3E%3Crect x='40' y='64' width='4' height='4' opacity='0.51'/%3E%3Crect x='44' y='64' width='4' height='4' opacity='0.48'/%3E%3Crect x='44' y='60' width='4' height='4' opacity='0.45'/%3E%3Crect x='48' y='60' width='4' height='4' opacity='0.42'/%3E%3Crect x='52' y='60' width='4' height='4' opacity='0.39'/%3E%3Crect x='56' y='64' width='4' height='4' opacity='0.36'/%3E%3Crect x='56' y='68' width='4' height='4' opacity='0.33'/%3E%3Crect x='60' y='68' width='4' height='4' opacity='0.30'/%3E%3Crect x='64' y='68' width='4' height='4' opacity='0.30'/%3E%3Crect x='64' y='72' width='4' height='4' opacity='0.30'/%3E%3Crect x='176' y='316' width='4' height='4' opacity='0.64'/%3E%3Crect x='180' y='316' width='4' height='4' opacity='0.61'/%3E%3Crect x='184' y='320' width='4' height='4' opacity='0.58'/%3E%3Crect x='188' y='324' width='4' height='4' opacity='0.55'/%3E%3Crect x='192' y='324' width='4' height='4' opacity='0.52'/%3E%3Crect x='192' y='328' width='4' height='4' opacity='0.49'/%3E%3Crect x='196' y='332' width='4' height='4' opacity='0.46'/%3E%3Crect x='200' y='332' width='4' height='4' opacity='0.43'/%3E%3Crect x='200' y='336' width='4' height='4' opacity='0.40'/%3E%3Crect x='204' y='340' width='4' height='4' opacity='0.37'/%3E%3Crect x='200' y='344' width='4' height='4' opacity='0.34'/%3E%3Crect x='56' y='332' width='4' height='4' opacity='0.70'/%3E%3Crect x='60' y='332' width='4' height='4' opacity='0.67'/%3E%3Crect x='64' y='332' width='4' height='4' opacity='0.64'/%3E%3Crect x='68' y='336' width='4' height='4' opacity='0.61'/%3E%3Crect x='64' y='340' width='4' height='4' opacity='0.58'/%3E%3Crect x='68' y='344' width='4' height='4' opacity='0.55'/%3E%3Crect x='24' y='208' width='4' height='4' opacity='0.86'/%3E%3Crect x='20' y='212' width='4' height='4' opacity='0.83'/%3E%3Crect x='24' y='212' width='4' height='4' opacity='0.80'/%3E%3Crect x='20' y='216' width='4' height='4' opacity='0.77'/%3E%3Crect x='24' y='216' width='4' height='4' opacity='0.74'/%3E%3Crect x='24' y='212' width='4' height='4' opacity='0.71'/%3E%3Crect x='28' y='212' width='4' height='4' opacity='0.68'/%3E%3Crect x='32' y='212' width='4' height='4' opacity='0.65'/%3E%3Crect x='36' y='216' width='4' height='4' opacity='0.62'/%3E%3Crect x='180' y='296' width='4' height='4' opacity='0.74'/%3E%3Crect x='184' y='300' width='4' height='4' opacity='0.71'/%3E%3Crect x='184' y='304' width='4' height='4' opacity='0.68'/%3E%3Crect x='184' y='308' width='4' height='4' opacity='0.65'/%3E%3Crect x='188' y='308' width='4' height='4' opacity='0.62'/%3E%3Crect x='192' y='308' width='4' height='4' opacity='0.59'/%3E%3Crect x='192' y='312' width='4' height='4' opacity='0.56'/%3E%3Crect x='192' y='316' width='4' height='4' opacity='0.53'/%3E%3Crect x='188' y='320' width='4' height='4' opacity='0.50'/%3E%3Crect x='188' y='324' width='4' height='4' opacity='0.47'/%3E%3Crect x='192' y='324' width='4' height='4' opacity='0.44'/%3E%3Crect x='192' y='328' width='4' height='4' opacity='0.41'/%3E%3Crect x='196' y='332' width='4' height='4' opacity='0.38'/%3E%3Crect x='196' y='328' width='4' height='4' opacity='0.35'/%3E%3Crect x='372' y='148' width='4' height='4' opacity='0.96'/%3E%3Crect x='376' y='148' width='4' height='4' opacity='0.93'/%3E%3Crect x='380' y='152' width='4' height='4' opacity='0.90'/%3E%3Crect x='384' y='156' width='4' height='4' opacity='0.87'/%3E%3Crect x='380' y='160' width='4' height='4' opacity='0.84'/%3E%3Crect x='376' y='164' width='4' height='4' opacity='0.81'/%3E%3Crect x='376' y='168' width='4' height='4' opacity='0.78'/%3E%3Crect x='376' y='172' width='4' height='4' opacity='0.75'/%3E%3Crect x='372' y='176' width='4' height='4' opacity='0.72'/%3E%3Crect x='372' y='180' width='4' height='4' opacity='0.69'/%3E%3Crect x='84' y='240' width='4' height='4' opacity='0.70'/%3E%3Crect x='80' y='244' width='4' height='4' opacity='0.67'/%3E%3Crect x='84' y='244' width='4' height='4' opacity='0.64'/%3E%3Crect x='84' y='248' width='4' height='4' opacity='0.61'/%3E%3Crect x='80' y='252' width='4' height='4' opacity='0.58'/%3E%3Crect x='84' y='256' width='4' height='4' opacity='0.55'/%3E%3Crect x='88' y='256' width='4' height='4' opacity='0.52'/%3E%3Crect x='92' y='256' width='4' height='4' opacity='0.49'/%3E%3Crect x='92' y='252' width='4' height='4' opacity='0.46'/%3E%3Crect x='88' y='256' width='4' height='4' opacity='0.43'/%3E%3Crect x='88' y='260' width='4' height='4' opacity='0.40'/%3E%3Crect x='92' y='264' width='4' height='4' opacity='0.37'/%3E%3Crect x='116' y='228' width='4' height='4' opacity='0.56'/%3E%3Crect x='116' y='224' width='4' height='4' opacity='0.53'/%3E%3Crect x='116' y='228' width='4' height='4' opacity='0.50'/%3E%3Crect x='120' y='228' width='4' height='4' opacity='0.47'/%3E%3Crect x='124' y='228' width='4' height='4' opacity='0.44'/%3E%3Crect x='124' y='232' width='4' height='4' opacity='0.41'/%3E%3Crect x='124' y='236' width='4' height='4' opacity='0.38'/%3E%3Crect x='128' y='240' width='4' height='4' opacity='0.35'/%3E%3Crect x='132' y='244' width='4' height='4' opacity='0.32'/%3E%3Crect x='260' y='260' width='4' height='4' opacity='0.56'/%3E%3Crect x='256' y='264' width='4' height='4' opacity='0.53'/%3E%3Crect x='256' y='268' width='4' height='4' opacity='0.50'/%3E%3Crect x='260' y='272' width='4' height='4' opacity='0.47'/%3E%3Crect x='264' y='272' width='4' height='4' opacity='0.44'/%3E%3Crect x='264' y='276' width='4' height='4' opacity='0.41'/%3E%3Crect x='268' y='276' width='4' height='4' opacity='0.38'/%3E%3Crect x='272' y='280' width='4' height='4' opacity='0.35'/%3E%3Crect x='216' y='16' width='4' height='4' opacity='0.78'/%3E%3Crect x='220' y='16' width='4' height='4' opacity='0.75'/%3E%3Crect x='224' y='16' width='4' height='4' opacity='0.72'/%3E%3Crect x='228' y='16' width='4' height='4' opacity='0.69'/%3E%3Crect x='232' y='20' width='4' height='4' opacity='0.66'/%3E%3Crect x='232' y='24' width='4' height='4' opacity='0.63'/%3E%3Crect x='236' y='24' width='4' height='4' opacity='0.60'/%3E%3Crect x='232' y='28' width='4' height='4' opacity='0.57'/%3E%3Crect x='384' y='12' width='4' height='4' opacity='0.67'/%3E%3Crect x='384' y='16' width='4' height='4' opacity='0.64'/%3E%3Crect x='384' y='20' width='4' height='4' opacity='0.61'/%3E%3Crect x='384' y='24' width='4' height='4' opacity='0.58'/%3E%3Crect x='388' y='28' width='4' height='4' opacity='0.55'/%3E%3Crect x='384' y='32' width='4' height='4' opacity='0.52'/%3E%3Crect x='388' y='36' width='4' height='4' opacity='0.49'/%3E%3Crect x='388' y='40' width='4' height='4' opacity='0.46'/%3E%3Crect x='392' y='44' width='4' height='4' opacity='0.43'/%3E%3Crect x='396' y='44' width='4' height='4' opacity='0.40'/%3E%3Crect x='396' y='48' width='4' height='4' opacity='0.37'/%3E%3Crect x='212' y='296' width='4' height='4' opacity='0.69'/%3E%3Crect x='216' y='296' width='4' height='4' opacity='0.66'/%3E%3Crect x='220' y='296' width='4' height='4' opacity='0.63'/%3E%3Crect x='224' y='296' width='4' height='4' opacity='0.60'/%3E%3Crect x='224' y='300' width='4' height='4' opacity='0.57'/%3E%3Crect x='228' y='300' width='4' height='4' opacity='0.54'/%3E%3Crect x='196' y='248' width='4' height='4' opacity='0.54'/%3E%3Crect x='200' y='248' width='4' height='4' opacity='0.51'/%3E%3Crect x='200' y='244' width='4' height='4' opacity='0.48'/%3E%3Crect x='204' y='248' width='4' height='4' opacity='0.45'/%3E%3Crect x='208' y='248' width='4' height='4' opacity='0.42'/%3E%3Crect x='208' y='252' width='4' height='4' opacity='0.39'/%3E%3Crect x='212' y='256' width='4' height='4' opacity='0.36'/%3E%3Crect x='212' y='252' width='4' height='4' opacity='0.33'/%3E%3Crect x='212' y='256' width='4' height='4' opacity='0.30'/%3E%3Crect x='216' y='260' width='4' height='4' opacity='0.30'/%3E%3Crect x='212' y='264' width='4' height='4' opacity='0.30'/%3E%3Crect x='216' y='268' width='4' height='4' opacity='0.30'/%3E%3Crect x='228' y='144' width='4' height='4' opacity='0.68'/%3E%3Crect x='232' y='148' width='4' height='4' opacity='0.65'/%3E%3Crect x='232' y='144' width='4' height='4' opacity='0.62'/%3E%3Crect x='232' y='140' width='4' height='4' opacity='0.59'/%3E%3Crect x='232' y='136' width='4' height='4' opacity='0.56'/%3E%3Crect x='236' y='140' width='4' height='4' opacity='0.53'/%3E%3Crect x='236' y='144' width='4' height='4' opacity='0.50'/%3E%3Crect x='240' y='144' width='4' height='4' opacity='0.47'/%3E%3Crect x='240' y='140' width='4' height='4' opacity='0.44'/%3E%3Crect x='88' y='172' width='4' height='4' opacity='0.55'/%3E%3Crect x='88' y='176' width='4' height='4' opacity='0.52'/%3E%3Crect x='92' y='176' width='4' height='4' opacity='0.49'/%3E%3Crect x='92' y='180' width='4' height='4' opacity='0.46'/%3E%3Crect x='96' y='180' width='4' height='4' opacity='0.43'/%3E%3Crect x='92' y='184' width='4' height='4' opacity='0.40'/%3E%3Crect x='96' y='188' width='4' height='4' opacity='0.37'/%3E%3Crect x='96' y='192' width='4' height='4' opacity='0.34'/%3E%3Crect x='100' y='196' width='4' height='4' opacity='0.31'/%3E%3Crect x='32' y='160' width='4' height='4' opacity='0.71'/%3E%3Crect x='32' y='164' width='4' height='4' opacity='0.68'/%3E%3Crect x='32' y='160' width='4' height='4' opacity='0.65'/%3E%3Crect x='36' y='160' width='4' height='4' opacity='0.62'/%3E%3Crect x='32' y='164' width='4' height='4' opacity='0.59'/%3E%3Crect x='36' y='164' width='4' height='4' opacity='0.56'/%3E%3Crect x='32' y='168' width='4' height='4' opacity='0.53'/%3E%3Crect x='32' y='164' width='4' height='4' opacity='0.50'/%3E%3Crect x='36' y='168' width='4' height='4' opacity='0.47'/%3E%3Crect x='40' y='168' width='4' height='4' opacity='0.44'/%3E%3Crect x='44' y='172' width='4' height='4' opacity='0.41'/%3E%3Crect x='40' y='176' width='4' height='4' opacity='0.38'/%3E%3Crect x='40' y='180' width='4' height='4' opacity='0.35'/%3E%3Crect x='216' y='112' width='4' height='4' opacity='0.59'/%3E%3Crect x='220' y='116' width='4' height='4' opacity='0.56'/%3E%3Crect x='224' y='120' width='4' height='4' opacity='0.53'/%3E%3Crect x='220' y='124' width='4' height='4' opacity='0.50'/%3E%3Crect x='224' y='124' width='4' height='4' opacity='0.47'/%3E%3Crect x='228' y='124' width='4' height='4' opacity='0.44'/%3E%3Crect x='224' y='128' width='4' height='4' opacity='0.41'/%3E%3Crect x='16' y='232' width='4' height='4' opacity='0.82'/%3E%3Crect x='16' y='228' width='4' height='4' opacity='0.79'/%3E%3Crect x='12' y='232' width='4' height='4' opacity='0.76'/%3E%3Crect x='16' y='236' width='4' height='4' opacity='0.73'/%3E%3Crect x='20' y='240' width='4' height='4' opacity='0.70'/%3E%3Crect x='24' y='244' width='4' height='4' opacity='0.67'/%3E%3Crect x='28' y='248' width='4' height='4' opacity='0.64'/%3E%3Crect x='32' y='248' width='4' height='4' opacity='0.61'/%3E%3Crect x='32' y='252' width='4' height='4' opacity='0.58'/%3E%3Crect x='32' y='248' width='4' height='4' opacity='0.55'/%3E%3Crect x='28' y='252' width='4' height='4' opacity='0.52'/%3E%3Crect x='32' y='256' width='4' height='4' opacity='0.49'/%3E%3Crect x='32' y='260' width='4' height='4' opacity='0.46'/%3E%3Crect x='60' y='120' width='4' height='4' opacity='0.98'/%3E%3Crect x='64' y='120' width='4' height='4' opacity='0.95'/%3E%3Crect x='68' y='124' width='4' height='4' opacity='0.92'/%3E%3Crect x='68' y='120' width='4' height='4' opacity='0.89'/%3E%3Crect x='64' y='124' width='4' height='4' opacity='0.86'/%3E%3Crect x='64' y='128' width='4' height='4' opacity='0.83'/%3E%3Crect x='68' y='132' width='4' height='4' opacity='0.80'/%3E%3Crect x='72' y='136' width='4' height='4' opacity='0.77'/%3E%3Crect x='76' y='140' width='4' height='4' opacity='0.74'/%3E%3Crect x='80' y='140' width='4' height='4' opacity='0.71'/%3E%3Crect x='80' y='144' width='4' height='4' opacity='0.68'/%3E%3Crect x='84' y='144' width='4' height='4' opacity='0.65'/%3E%3Crect x='84' y='140' width='4' height='4' opacity='0.62'/%3E%3Crect x='88' y='140' width='4' height='4' opacity='0.59'/%3E%3Crect x='212' y='248' width='4' height='4' opacity='0.98'/%3E%3Crect x='216' y='252' width='4' height='4' opacity='0.95'/%3E%3Crect x='216' y='256' width='4' height='4' opacity='0.92'/%3E%3Crect x='220' y='256' width='4' height='4' opacity='0.89'/%3E%3Crect x='224' y='260' width='4' height='4' opacity='0.86'/%3E%3Crect x='224' y='264' width='4' height='4' opacity='0.83'/%3E%3Crect x='228' y='264' width='4' height='4' opacity='0.80'/%3E%3Crect x='228' y='260' width='4' height='4' opacity='0.77'/%3E%3Crect x='16' y='228' width='4' height='4' opacity='0.99'/%3E%3Crect x='20' y='228' width='4' height='4' opacity='0.96'/%3E%3Crect x='24' y='228' width='4' height='4' opacity='0.93'/%3E%3Crect x='24' y='224' width='4' height='4' opacity='0.90'/%3E%3Crect x='28' y='224' width='4' height='4' opacity='0.87'/%3E%3Crect x='24' y='228' width='4' height='4' opacity='0.84'/%3E%3Crect x='28' y='228' width='4' height='4' opacity='0.81'/%3E%3Crect x='32' y='228' width='4' height='4' opacity='0.78'/%3E%3Crect x='36' y='228' width='4' height='4' opacity='0.75'/%3E%3Crect x='40' y='232' width='4' height='4' opacity='0.72'/%3E%3Crect x='224' y='328' width='4' height='4' opacity='1.00'/%3E%3Crect x='228' y='328' width='4' height='4' opacity='0.97'/%3E%3Crect x='224' y='332' width='4' height='4' opacity='0.94'/%3E%3Crect x='220' y='336' width='4' height='4' opacity='0.91'/%3E%3Crect x='224' y='340' width='4' height='4' opacity='0.88'/%3E%3Crect x='228' y='340' width='4' height='4' opacity='0.85'/%3E%3Crect x='232' y='344' width='4' height='4' opacity='0.82'/%3E%3Crect x='236' y='344' width='4' height='4' opacity='0.79'/%3E%3Crect x='236' y='348' width='4' height='4' opacity='0.76'/%3E%3Crect x='232' y='352' width='4' height='4' opacity='0.73'/%3E%3Crect x='236' y='352' width='4' height='4' opacity='0.70'/%3E%3Crect x='240' y='352' width='4' height='4' opacity='0.67'/%3E%3Crect x='244' y='356' width='4' height='4' opacity='0.64'/%3E%3Crect x='248' y='356' width='4' height='4' opacity='0.61'/%3E%3Crect x='252' y='360' width='4' height='4' opacity='0.58'/%3E%3Crect x='128' y='44' width='4' height='4' opacity='0.81'/%3E%3Crect x='132' y='48' width='4' height='4' opacity='0.78'/%3E%3Crect x='136' y='48' width='4' height='4' opacity='0.75'/%3E%3Crect x='140' y='48' width='4' height='4' opacity='0.72'/%3E%3Crect x='144' y='52' width='4' height='4' opacity='0.69'/%3E%3Crect x='148' y='52' width='4' height='4' opacity='0.66'/%3E%3Crect x='148' y='56' width='4' height='4' opacity='0.63'/%3E%3Crect x='148' y='52' width='4' height='4' opacity='0.60'/%3E%3Crect x='148' y='56' width='4' height='4' opacity='0.57'/%3E%3Crect x='148' y='60' width='4' height='4' opacity='0.54'/%3E%3Crect x='152' y='64' width='4' height='4' opacity='0.51'/%3E%3Crect x='156' y='68' width='4' height='4' opacity='0.48'/%3E%3Crect x='156' y='72' width='4' height='4' opacity='0.45'/%3E%3Crect x='156' y='76' width='4' height='4' opacity='0.42'/%3E%3Crect x='16' y='88' width='4' height='4' opacity='0.48'/%3E%3Crect x='20' y='92' width='4' height='4' opacity='0.45'/%3E%3Crect x='24' y='96' width='4' height='4' opacity='0.42'/%3E%3Crect x='28' y='100' width='4' height='4' opacity='0.39'/%3E%3Crect x='28' y='104' width='4' height='4' opacity='0.36'/%3E%3Crect x='32' y='104' width='4' height='4' opacity='0.33'/%3E%3Crect x='36' y='104' width='4' height='4' opacity='0.30'/%3E%3Crect x='40' y='104' width='4' height='4' opacity='0.30'/%3E%3Crect x='36' y='108' width='4' height='4' opacity='0.30'/%3E%3Crect x='40' y='108' width='4' height='4' opacity='0.30'/%3E%3Crect x='44' y='108' width='4' height='4' opacity='0.30'/%3E%3Crect x='292' y='132' width='4' height='4' opacity='0.87'/%3E%3Crect x='292' y='128' width='4' height='4' opacity='0.84'/%3E%3Crect x='296' y='128' width='4' height='4' opacity='0.81'/%3E%3Crect x='300' y='128' width='4' height='4' opacity='0.78'/%3E%3Crect x='304' y='132' width='4' height='4' opacity='0.75'/%3E%3Crect x='304' y='136' width='4' height='4' opacity='0.72'/%3E%3Crect x='128' y='232' width='4' height='4' opacity='0.83'/%3E%3Crect x='132' y='232' width='4' height='4' opacity='0.80'/%3E%3Crect x='136' y='236' width='4' height='4' opacity='0.77'/%3E%3Crect x='136' y='240' width='4' height='4' opacity='0.74'/%3E%3Crect x='136' y='236' width='4' height='4' opacity='0.71'/%3E%3Crect x='136' y='240' width='4' height='4' opacity='0.68'/%3E%3Crect x='136' y='236' width='4' height='4' opacity='0.65'/%3E%3Crect x='136' y='232' width='4' height='4' opacity='0.62'/%3E%3Crect x='284' y='212' width='4' height='4' opacity='0.81'/%3E%3Crect x='280' y='216' width='4' height='4' opacity='0.78'/%3E%3Crect x='280' y='220' width='4' height='4' opacity='0.75'/%3E%3Crect x='284' y='220' width='4' height='4' opacity='0.72'/%3E%3Crect x='284' y='216' width='4' height='4' opacity='0.69'/%3E%3Crect x='284' y='220' width='4' height='4' opacity='0.66'/%3E%3Crect x='280' y='224' width='4' height='4' opacity='0.63'/%3E%3Crect x='280' y='228' width='4' height='4' opacity='0.60'/%3E%3Crect x='276' y='232' width='4' height='4' opacity='0.57'/%3E%3Crect x='272' y='236' width='4' height='4' opacity='0.54'/%3E%3Crect x='276' y='236' width='4' height='4' opacity='0.51'/%3E%3Crect x='276' y='240' width='4' height='4' opacity='0.48'/%3E%3Crect x='276' y='244' width='4' height='4' opacity='0.45'/%3E%3Crect x='280' y='248' width='4' height='4' opacity='0.42'/%3E%3Crect x='272' y='288' width='4' height='4' opacity='0.77'/%3E%3Crect x='268' y='292' width='4' height='4' opacity='0.74'/%3E%3Crect x='264' y='296' width='4' height='4' opacity='0.71'/%3E%3Crect x='264' y='300' width='4' height='4' opacity='0.68'/%3E%3Crect x='260' y='304' width='4' height='4' opacity='0.65'/%3E%3Crect x='264' y='304' width='4' height='4' opacity='0.62'/%3E%3Crect x='264' y='308' width='4' height='4' opacity='0.59'/%3E%3Crect x='268' y='308' width='4' height='4' opacity='0.56'/%3E%3Crect x='272' y='308' width='4' height='4' opacity='0.53'/%3E%3Crect x='192' y='396' width='4' height='4' opacity='0.82'/%3E%3Crect x='196' y='396' width='4' height='4' opacity='0.76'/%3E%3Crect x='272' y='352' width='4' height='4' opacity='0.72'/%3E%3Crect x='276' y='356' width='4' height='4' opacity='0.69'/%3E%3Crect x='280' y='356' width='4' height='4' opacity='0.66'/%3E%3Crect x='280' y='360' width='4' height='4' opacity='0.63'/%3E%3Crect x='280' y='356' width='4' height='4' opacity='0.60'/%3E%3Crect x='88' y='320' width='4' height='4' opacity='0.69'/%3E%3Crect x='92' y='320' width='4' height='4' opacity='0.66'/%3E%3Crect x='92' y='316' width='4' height='4' opacity='0.63'/%3E%3Crect x='88' y='320' width='4' height='4' opacity='0.60'/%3E%3Crect x='92' y='324' width='4' height='4' opacity='0.57'/%3E%3Crect x='92' y='328' width='4' height='4' opacity='0.54'/%3E%3Crect x='96' y='328' width='4' height='4' opacity='0.51'/%3E%3Crect x='100' y='332' width='4' height='4' opacity='0.48'/%3E%3Crect x='100' y='336' width='4' height='4' opacity='0.45'/%3E%3Crect x='100' y='340' width='4' height='4' opacity='0.42'/%3E%3Crect x='96' y='344' width='4' height='4' opacity='0.39'/%3E%3Crect x='96' y='348' width='4' height='4' opacity='0.36'/%3E%3Crect x='96' y='352' width='4' height='4' opacity='0.33'/%3E%3Crect x='96' y='356' width='4' height='4' opacity='0.30'/%3E%3Crect x='96' y='360' width='4' height='4' opacity='0.30'/%3E%3Crect x='220' y='256' width='4' height='4' opacity='0.55'/%3E%3Crect x='224' y='256' width='4' height='4' opacity='0.52'/%3E%3Crect x='228' y='256' width='4' height='4' opacity='0.49'/%3E%3Crect x='232' y='260' width='4' height='4' opacity='0.46'/%3E%3Crect x='232' y='264' width='4' height='4' opacity='0.43'/%3E%3Crect x='228' y='268' width='4' height='4' opacity='0.40'/%3E%3Crect x='232' y='268' width='4' height='4' opacity='0.37'/%3E%3Crect x='232' y='264' width='4' height='4' opacity='0.34'/%3E%3Crect x='236' y='264' width='4' height='4' opacity='0.31'/%3E%3Crect x='240' y='264' width='4' height='4' opacity='0.30'/%3E%3Crect x='244' y='268' width='4' height='4' opacity='0.30'/%3E%3Crect x='248' y='268' width='4' height='4' opacity='0.30'/%3E%3Crect x='248' y='272' width='4' height='4' opacity='0.30'/%3E%3Crect x='108' y='164' width='4' height='4' opacity='0.54'/%3E%3Crect x='112' y='164' width='4' height='4' opacity='0.51'/%3E%3Crect x='116' y='164' width='4' height='4' opacity='0.48'/%3E%3Crect x='116' y='160' width='4' height='4' opacity='0.45'/%3E%3Crect x='120' y='164' width='4' height='4' opacity='0.42'/%3E%3Crect x='124' y='164' width='4' height='4' opacity='0.39'/%3E%3Crect x='124' y='160' width='4' height='4' opacity='0.36'/%3E%3Crect x='124' y='164' width='4' height='4' opacity='0.33'/%3E%3Crect x='284' y='336' width='4' height='4' opacity='0.64'/%3E%3Crect x='284' y='340' width='4' height='4' opacity='0.61'/%3E%3Crect x='288' y='344' width='4' height='4' opacity='0.58'/%3E%3Crect x='292' y='344' width='4' height='4' opacity='0.55'/%3E%3Crect x='288' y='348' width='4' height='4' opacity='0.52'/%3E%3Crect x='292' y='348' width='4' height='4' opacity='0.49'/%3E%3Crect x='296' y='348' width='4' height='4' opacity='0.46'/%3E%3Crect x='300' y='348' width='4' height='4' opacity='0.43'/%3E%3Crect x='304' y='348' width='4' height='4' opacity='0.40'/%3E%3Crect x='304' y='352' width='4' height='4' opacity='0.37'/%3E%3Crect x='300' y='356' width='4' height='4' opacity='0.34'/%3E%3Crect x='300' y='360' width='4' height='4' opacity='0.31'/%3E%3Crect x='300' y='356' width='4' height='4' opacity='0.30'/%3E%3Crect x='300' y='360' width='4' height='4' opacity='0.30'/%3E%3Crect x='300' y='364' width='4' height='4' opacity='0.30'/%3E%3Crect x='284' y='312' width='4' height='4' opacity='0.68'/%3E%3Crect x='288' y='316' width='4' height='4' opacity='0.65'/%3E%3Crect x='292' y='320' width='4' height='4' opacity='0.62'/%3E%3Crect x='296' y='320' width='4' height='4' opacity='0.59'/%3E%3Crect x='296' y='316' width='4' height='4' opacity='0.56'/%3E%3Crect x='296' y='320' width='4' height='4' opacity='0.53'/%3E%3Crect x='0' y='232' width='4' height='4' opacity='0.71'/%3E%3Crect x='0' y='240' width='4' height='4' opacity='0.65'/%3E%3Crect x='4' y='244' width='4' height='4' opacity='0.62'/%3E%3Crect x='4' y='240' width='4' height='4' opacity='0.59'/%3E%3Crect x='8' y='244' width='4' height='4' opacity='0.56'/%3E%3Crect x='12' y='248' width='4' height='4' opacity='0.53'/%3E%3Crect x='12' y='244' width='4' height='4' opacity='0.50'/%3E%3Crect x='8' y='248' width='4' height='4' opacity='0.47'/%3E%3Crect x='12' y='252' width='4' height='4' opacity='0.44'/%3E%3Crect x='16' y='252' width='4' height='4' opacity='0.41'/%3E%3Crect x='20' y='252' width='4' height='4' opacity='0.38'/%3E%3Crect x='20' y='248' width='4' height='4' opacity='0.35'/%3E%3Crect x='0' y='268' width='4' height='4' opacity='0.57'/%3E%3Crect x='4' y='268' width='4' height='4' opacity='0.54'/%3E%3Crect x='8' y='268' width='4' height='4' opacity='0.51'/%3E%3Crect x='12' y='272' width='4' height='4' opacity='0.48'/%3E%3Crect x='8' y='276' width='4' height='4' opacity='0.45'/%3E%3Crect x='8' y='272' width='4' height='4' opacity='0.42'/%3E%3Crect x='12' y='276' width='4' height='4' opacity='0.39'/%3E%3Crect x='16' y='276' width='4' height='4' opacity='0.36'/%3E%3Crect x='16' y='272' width='4' height='4' opacity='0.33'/%3E%3Crect x='20' y='276' width='4' height='4' opacity='0.30'/%3E%3Crect x='24' y='276' width='4' height='4' opacity='0.30'/%3E%3Crect x='28' y='276' width='4' height='4' opacity='0.30'/%3E%3Crect x='32' y='276' width='4' height='4' opacity='0.30'/%3E%3Crect x='28' y='280' width='4' height='4' opacity='0.30'/%3E%3Crect x='16' y='80' width='4' height='4' opacity='0.75'/%3E%3Crect x='16' y='76' width='4' height='4' opacity='0.72'/%3E%3Crect x='16' y='80' width='4' height='4' opacity='0.69'/%3E%3Crect x='16' y='84' width='4' height='4' opacity='0.66'/%3E%3Crect x='20' y='84' width='4' height='4' opacity='0.63'/%3E%3Crect x='24' y='88' width='4' height='4' opacity='0.60'/%3E%3Crect x='28' y='88' width='4' height='4' opacity='0.57'/%3E%3Crect x='24' y='92' width='4' height='4' opacity='0.54'/%3E%3Crect x='20' y='96' width='4' height='4' opacity='0.51'/%3E%3Crect x='24' y='100' width='4' height='4' opacity='0.48'/%3E%3Crect x='24' y='96' width='4' height='4' opacity='0.45'/%3E%3Crect x='28' y='100' width='4' height='4' opacity='0.42'/%3E%3Crect x='24' y='104' width='4' height='4' opacity='0.39'/%3E%3Crect x='28' y='104' width='4' height='4' opacity='0.36'/%3E%3Crect x='148' y='180' width='4' height='4' opacity='0.85'/%3E%3Crect x='152' y='180' width='4' height='4' opacity='0.82'/%3E%3Crect x='152' y='184' width='4' height='4' opacity='0.79'/%3E%3Crect x='156' y='188' width='4' height='4' opacity='0.76'/%3E%3Crect x='160' y='188' width='4' height='4' opacity='0.73'/%3E%3Crect x='164' y='192' width='4' height='4' opacity='0.70'/%3E%3Crect x='168' y='196' width='4' height='4' opacity='0.67'/%3E%3Crect x='168' y='200' width='4' height='4' opacity='0.64'/%3E%3Crect x='172' y='204' width='4' height='4' opacity='0.61'/%3E%3Crect x='172' y='208' width='4' height='4' opacity='0.58'/%3E%3Crect x='284' y='56' width='4' height='4' opacity='0.83'/%3E%3Crect x='288' y='56' width='4' height='4' opacity='0.80'/%3E%3Crect x='292' y='60' width='4' height='4' opacity='0.77'/%3E%3Crect x='296' y='60' width='4' height='4' opacity='0.74'/%3E%3Crect x='292' y='64' width='4' height='4' opacity='0.71'/%3E%3Crect x='292' y='68' width='4' height='4' opacity='0.68'/%3E%3Crect x='28' y='272' width='4' height='4' opacity='0.46'/%3E%3Crect x='116' y='24' width='4' height='4' opacity='0.32'/%3E%3Crect x='272' y='316' width='4' height='4' opacity='0.46'/%3E%3Crect x='308' y='4' width='4' height='4' opacity='0.31'/%3E%3Crect x='236' y='160' width='4' height='4' opacity='0.77'/%3E%3Crect x='144' y='0' width='4' height='4' opacity='0.51'/%3E%3Crect x='360' y='80' width='4' height='4' opacity='0.49'/%3E%3Crect x='56' y='132' width='4' height='4' opacity='0.59'/%3E%3Crect x='4' y='332' width='4' height='4' opacity='0.67'/%3E%3Crect x='84' y='76' width='4' height='4' opacity='0.41'/%3E%3Crect x='300' y='176' width='4' height='4' opacity='0.56'/%3E%3Crect x='164' y='272' width='4' height='4' opacity='0.45'/%3E%3Crect x='204' y='120' width='4' height='4' opacity='0.67'/%3E%3Crect x='136' y='112' width='4' height='4' opacity='0.84'/%3E%3Crect x='376' y='136' width='4' height='4' opacity='0.41'/%3E%3Crect x='204' y='144' width='4' height='4' opacity='0.54'/%3E%3Crect x='12' y='48' width='4' height='4' opacity='0.52'/%3E%3Crect x='360' y='248' width='4' height='4' opacity='0.82'/%3E%3Crect x='364' y='72' width='4' height='4' opacity='0.65'/%3E%3Crect x='180' y='240' width='4' height='4' opacity='0.37'/%3E%3Crect x='312' y='56' width='4' height='4' opacity='0.83'/%3E%3Crect x='396' y='396' width='4' height='4' opacity='0.58'/%3E%3Crect x='56' y='16' width='4' height='4' opacity='0.57'/%3E%3Crect x='200' y='56' width='4' height='4' opacity='0.59'/%3E%3Crect x='212' y='180' width='4' height='4' opacity='0.45'/%3E%3Crect x='160' y='80' width='4' height='4' opacity='0.75'/%3E%3Crect x='100' y='32' width='4' height='4' opacity='0.81'/%3E%3Crect x='280' y='176' width='4' height='4' opacity='0.69'/%3E%3Crect x='32' y='160' width='4' height='4' opacity='0.58'/%3E%3Crect x='304' y='336' width='4' height='4' opacity='0.59'/%3E%3Crect x='320' y='324' width='4' height='4' opacity='0.49'/%3E%3Crect x='308' y='144' width='4' height='4' opacity='0.77'/%3E%3Crect x='144' y='356' width='4' height='4' opacity='0.74'/%3E%3Crect x='52' y='272' width='4' height='4' opacity='0.62'/%3E%3Crect x='80' y='364' width='4' height='4' opacity='0.67'/%3E%3Crect x='292' y='304' width='4' height='4' opacity='0.34'/%3E%3Crect x='356' y='364' width='4' height='4' opacity='0.49'/%3E%3Crect x='8' y='88' width='4' height='4' opacity='0.32'/%3E%3Crect x='156' y='148' width='4' height='4' opacity='0.72'/%3E%3Crect x='196' y='224' width='4' height='4' opacity='0.71'/%3E%3Crect x='268' y='52' width='4' height='4' opacity='0.64'/%3E%3Crect x='120' y='208' width='4' height='4' opacity='0.33'/%3E%3Crect x='56' y='156' width='4' height='4' opacity='0.43'/%3E%3Crect x='324' y='148' width='4' height='4' opacity='0.70'/%3E%3Crect x='164' y='372' width='4' height='4' opacity='0.81'/%3E%3Crect x='236' y='240' width='4' height='4' opacity='0.74'/%3E%3Crect x='4' y='300' width='4' height='4' opacity='0.71'/%3E%3Crect x='292' y='44' width='4' height='4' opacity='0.48'/%3E%3Crect x='188' y='88' width='4' height='4' opacity='0.32'/%3E%3Crect x='240' y='356' width='4' height='4' opacity='0.39'/%3E%3Crect x='140' y='152' width='4' height='4' opacity='0.77'/%3E%3Crect x='20' y='32' width='4' height='4' opacity='0.44'/%3E%3Crect x='180' y='248' width='4' height='4' opacity='0.40'/%3E%3Crect x='228' y='276' width='4' height='4' opacity='0.65'/%3E%3Crect x='88' y='148' width='4' height='4' opacity='0.60'/%3E%3Crect x='140' y='104' width='4' height='4' opacity='0.78'/%3E%3Crect x='332' y='252' width='4' height='4' opacity='0.73'/%3E%3Crect x='388' y='360' width='4' height='4' opacity='0.60'/%3E%3Crect x='148' y='388' width='4' height='4' opacity='0.68'/%3E%3Crect x='144' y='252' width='4' height='4' opacity='0.44'/%3E%3Crect x='52' y='208' width='4' height='4' opacity='0.84'/%3E%3Crect x='56' y='160' width='4' height='4' opacity='0.67'/%3E%3Crect x='72' y='168' width='4' height='4' opacity='0.72'/%3E%3Crect x='156' y='188' width='4' height='4' opacity='0.73'/%3E%3Crect x='304' y='68' width='4' height='4' opacity='0.63'/%3E%3Crect x='112' y='176' width='4' height='4' opacity='0.68'/%3E%3Crect x='48' y='296' width='4' height='4' opacity='0.85'/%3E%3Crect x='184' y='100' width='4' height='4' opacity='0.72'/%3E%3Crect x='216' y='168' width='4' height='4' opacity='0.58'/%3E%3Crect x='384' y='248' width='4' height='4' opacity='0.51'/%3E%3Crect x='148' y='232' width='4' height='4' opacity='0.51'/%3E%3Crect x='24' y='16' width='4' height='4' opacity='0.67'/%3E%3Crect x='184' y='260' width='4' height='4' opacity='0.52'/%3E%3Crect x='240' y='324' width='4' height='4' opacity='0.39'/%3E%3Crect x='376' y='156' width='4' height='4' opacity='0.66'/%3E%3Crect x='380' y='76' width='4' height='4' opacity='0.49'/%3E%3Crect x='132' y='100' width='4' height='4' opacity='0.52'/%3E%3Crect x='48' y='364' width='4' height='4' opacity='0.51'/%3E%3Crect x='116' y='64' width='4' height='4' opacity='0.50'/%3E%3Crect x='156' y='76' width='4' height='4' opacity='0.37'/%3E%3Crect x='372' y='272' width='4' height='4' opacity='0.43'/%3E%3Crect x='376' y='320' width='4' height='4' opacity='0.66'/%3E%3Crect x='24' y='124' width='4' height='4' opacity='0.69'/%3E%3Crect x='84' y='48' width='4' height='4' opacity='0.49'/%3E%3Crect x='132' y='40' width='4' height='4' opacity='0.66'/%3E%3Crect x='92' y='212' width='4' height='4' opacity='0.72'/%3E%3Crect x='56' y='220' width='4' height='4' opacity='0.44'/%3E%3Crect x='40' y='84' width='4' height='4' opacity='0.45'/%3E%3Crect x='128' y='124' width='4' height='4' opacity='0.71'/%3E%3Crect x='356' y='60' width='4' height='4' opacity='0.60'/%3E%3Crect x='240' y='96' width='4' height='4' opacity='0.49'/%3E%3Crect x='172' y='144' width='4' height='4' opacity='0.32'/%3E%3Crect x='20' y='76' width='4' height='4' opacity='0.55'/%3E%3Crect x='208' y='200' width='4' height='4' opacity='0.56'/%3E%3Crect x='340' y='36' width='4' height='4' opacity='0.65'/%3E%3Crect x='208' y='196' width='4' height='4' opacity='0.82'/%3E%3Crect x='236' y='188' width='4' height='4' opacity='0.67'/%3E%3Crect x='384' y='164' width='4' height='4' opacity='0.44'/%3E%3Crect x='12' y='352' width='4' height='4' opacity='0.38'/%3E%3Crect x='180' y='152' width='4' height='4' opacity='0.47'/%3E%3Crect x='104' y='192' width='4' height='4' opacity='0.84'/%3E%3Crect x='396' y='388' width='4' height='4' opacity='0.37'/%3E%3Crect x='388' y='244' width='4' height='4' opacity='0.40'/%3E%3Crect x='0' y='264' width='4' height='4' opacity='0.79'/%3E%3Crect x='120' y='272' width='4' height='4' opacity='0.42'/%3E%3Crect x='108' y='364' width='4' height='4' opacity='0.70'/%3E%3Crect x='284' y='160' width='4' height='4' opacity='0.73'/%3E%3Crect x='296' y='204' width='4' height='4' opacity='0.78'/%3E%3Crect x='284' y='200' width='4' height='4' opacity='0.61'/%3E%3Crect x='376' y='308' width='4' height='4' opacity='0.37'/%3E%3Crect x='48' y='344' width='4' height='4' opacity='0.77'/%3E%3Crect x='20' y='124' width='4' height='4' opacity='0.56'/%3E%3Crect x='152' y='56' width='4' height='4' opacity='0.82'/%3E%3Crect x='160' y='208' width='4' height='4' opacity='0.33'/%3E%3Crect x='296' y='132' width='4' height='4' opacity='0.40'/%3E%3Crect x='56' y='292' width='4' height='4' opacity='0.58'/%3E%3Crect x='252' y='388' width='4' height='4' opacity='0.73'/%3E%3Crect x='144' y='368' width='4' height='4' opacity='0.69'/%3E%3Crect x='56' y='372' width='4' height='4' opacity='0.82'/%3E%3Crect x='164' y='48' width='4' height='4' opacity='0.49'/%3E%3Crect x='288' y='348' width='4' height='4' opacity='0.84'/%3E%3Crect x='244' y='56' width='4' height='4' opacity='0.78'/%3E%3Crect x='384' y='132' width='4' height='4' opacity='0.37'/%3E%3Crect x='0' y='276' width='4' height='4' opacity='0.61'/%3E%3Crect x='160' y='304' width='4' height='4' opacity='0.53'/%3E%3Crect x='304' y='164' width='4' height='4' opacity='0.57'/%3E%3Crect x='300' y='260' width='4' height='4' opacity='0.66'/%3E%3Crect x='64' y='164' width='4' height='4' opacity='0.64'/%3E%3Crect x='324' y='144' width='4' height='4' opacity='0.47'/%3E%3Crect x='328' y='236' width='4' height='4' opacity='0.48'/%3E%3Crect x='280' y='380' width='4' height='4' opacity='0.55'/%3E%3Crect x='224' y='116' width='4' height='4' opacity='0.63'/%3E%3Crect x='288' y='68' width='4' height='4' opacity='0.72'/%3E%3Crect x='0' y='176' width='4' height='4' opacity='0.78'/%3E%3Crect x='76' y='340' width='4' height='4' opacity='0.71'/%3E%3Crect x='136' y='180' width='4' height='4' opacity='0.31'/%3E%3Crect x='300' y='152' width='4' height='4' opacity='0.31'/%3E%3Crect x='44' y='112' width='4' height='4' opacity='0.38'/%3E%3Crect x='176' y='156' width='4' height='4' opacity='0.71'/%3E%3Crect x='236' y='8' width='4' height='4' opacity='0.31'/%3E%3Crect x='272' y='376' width='4' height='4' opacity='0.80'/%3E%3Crect x='208' y='280' width='4' height='4' opacity='0.53'/%3E%3Crect x='276' y='192' width='4' height='4' opacity='0.49'/%3E%3Crect x='304' y='328' width='4' height='4' opacity='0.47'/%3E%3Crect x='184' y='56' width='4' height='4' opacity='0.32'/%3E%3Crect x='372' y='152' width='4' height='4' opacity='0.76'/%3E%3Crect x='276' y='320' width='4' height='4' opacity='0.38'/%3E%3Crect x='252' y='256' width='4' height='4' opacity='0.71'/%3E%3Crect x='380' y='92' width='4' height='4' opacity='0.38'/%3E%3Crect x='20' y='224' width='4' height='4' opacity='0.41'/%3E%3C/g%3E%3C/svg%3E");
}
@media (min-width: 64rem) {
  .equipe { justify-content: flex-end; }
}

.pc-wrap {
  position: relative;
  perspective: 600px;
  transform: translate3d(0, 0, 0.1px);
  touch-action: pan-y;
  width: min(var(--pc-largura, 300px), 100%);
}
.pc-wrap:hover,
.pc-wrap.esta-ativo { --pc-opacidade: 1; }

.pc-atras {
  position: absolute;
  inset: 6%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--pc-x) var(--pc-y),
    rgba(125, 190, 255, 0.67) 0%,
    transparent 50%
  );
  filter: blur(46px) saturate(1.15);
  opacity: calc(0.8 * var(--pc-opacidade));
  transition: opacity 220ms ease;
}

.pc-shell { position: relative; z-index: 1; }

.pc-card {
  display: grid;
  aspect-ratio: 0.718;
  border-radius: var(--pc-raio);
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.9);
  backface-visibility: hidden;
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  transition: transform 0.9s var(--ease);
  box-shadow: rgba(0, 0, 0, 0.55) calc((var(--pc-da-esquerda) * 10px) - 3px)
    calc((var(--pc-do-topo) * 20px) - 6px) 20px -5px;
}
.pc-wrap.esta-ativo .pc-card {
  transition: none;
  transform: translateZ(0) rotateX(var(--pc-rot-y)) rotateY(var(--pc-rot-x));
}
.pc-wrap.esta-entrando .pc-card { transition: transform 180ms ease-out; }

.pc-card > * { grid-area: 1 / -1; border-radius: var(--pc-raio); }
.pc-dentro {
  position: absolute;
  inset: 0;
  display: grid;
  background-image: linear-gradient(145deg, #60496e8c 0%, #71c4ff44 100%);
  background-color: rgba(0, 0, 0, 0.9);
}
.pc-dentro > * { grid-area: 1 / 1; border-radius: var(--pc-raio); }

/* --- camada holográfica --- */
.pc-shine {
  pointer-events: none;
  z-index: 3;
  mask-image: var(--pc-icone);
  mask-mode: luminance;
  mask-repeat: repeat;
  mask-size: 150%;
  mask-position: top calc(200% - (var(--pc-fundo-y) * 5)) left calc(100% - var(--pc-fundo-x));
  -webkit-mask-image: var(--pc-icone);
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: 150%;
  filter: brightness(0.72) contrast(1.4) saturate(0.5) opacity(0.8);
  transition: filter 0.8s ease;
  animation: pc-holo 18s linear infinite;
  mix-blend-mode: color-dodge;
}
.pc-shine,
.pc-shine::before,
.pc-shine::after {
  --space: 5%;
  --angle: -45deg;
  display: grid;
  grid-area: 1 / 1;
  transform: translate3d(0, 0, 1px);
  overflow: hidden;
  border-radius: var(--pc-raio);
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--sp-1) calc(var(--space) * 1),
      var(--sp-2) calc(var(--space) * 2),
      var(--sp-3) calc(var(--space) * 3),
      var(--sp-4) calc(var(--space) * 4),
      var(--sp-5) calc(var(--space) * 5),
      var(--sp-6) calc(var(--space) * 6),
      var(--sp-1) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--pc-x) var(--pc-y),
      hsla(0, 0%, 0%, 0.1) 12%,
      hsla(0, 0%, 0%, 0.15) 20%,
      hsla(0, 0%, 0%, 0.25) 120%
    );
  background-position: 0 var(--pc-fundo-y), var(--pc-fundo-x) var(--pc-fundo-y), center;
  background-blend-mode: color, hard-light;
  background-size: 500% 500%, 300% 300%, 200% 200%;
  background-repeat: repeat;
}
.pc-shine::before,
.pc-shine::after {
  content: "";
  opacity: 0;
  transition: opacity 0.8s ease;
}
.pc-wrap.esta-ativo .pc-shine {
  filter: brightness(0.85) contrast(1.5) saturate(0.5);
  animation-play-state: paused;
}
.pc-wrap.esta-ativo .pc-shine::before,
.pc-wrap.esta-ativo .pc-shine::after { opacity: 1; }

.pc-shine::before {
  background-image:
    linear-gradient(45deg, var(--sp-4), var(--sp-5), var(--sp-6), var(--sp-1), var(--sp-2), var(--sp-3)),
    radial-gradient(circle at var(--pc-x) var(--pc-y), hsl(0, 0%, 70%) 0%, hsla(0, 0%, 30%, 0.2) 90%);
  background-size: 250% 250%, 100% 100%;
  background-position: var(--pc-x) var(--pc-y), center;
  background-blend-mode: color-dodge;
  filter: brightness(calc(2 - var(--pc-do-centro))) contrast(calc(var(--pc-do-centro) + 2))
    saturate(calc(0.5 + var(--pc-do-centro)));
  mix-blend-mode: luminosity;
}
.pc-shine::after {
  background-position: 0 var(--pc-fundo-y), calc(var(--pc-fundo-x) * 0.4) calc(var(--pc-fundo-y) * 0.5), center;
  background-size: 200% 300%, 700% 700%, 100% 100%;
  mix-blend-mode: difference;
  filter: brightness(0.8) contrast(1.5);
}

.pc-glare {
  pointer-events: none;
  z-index: 4;
  transform: translate3d(0, 0, 1.1px);
  overflow: hidden;
  background-image: radial-gradient(
    farthest-corner circle at var(--pc-x) var(--pc-y),
    hsl(248, 25%, 80%) 12%,
    hsla(207, 40%, 30%, 0.8) 90%
  );
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.2);
}

/* --- retrato: recorte ancorado na base, ocupando a largura toda --- */
.pc-retrato {
  position: relative;
  z-index: 2;
  mix-blend-mode: luminosity;
  overflow: visible;
  pointer-events: none;
}
.pc-retrato .pc-foto {
  width: 100%;
  /* `height: auto` é essencial: sem ele o atributo height do <img> vira dica
     de apresentação e estica a foto. */
  height: auto;
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform-origin: 50% 100%;
  transform: translateX(calc(-50% + (var(--pc-da-esquerda) - 0.5) * 6px)) translateZ(0)
    scaleY(calc(1 + (var(--pc-do-topo) - 0.5) * 0.02))
    scaleX(calc(1 + (var(--pc-da-esquerda) - 0.5) * 0.01));
  backface-visibility: hidden;
  transition: transform 120ms ease-out;
}
.pc-iniciais {
  position: absolute;
  inset: auto 0 22%;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.22);
}

/* --- nome e cargo, no TOPO como no original --- */
.pc-texto {
  position: relative;
  z-index: 5;
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  pointer-events: none;
  mix-blend-mode: luminosity;
  transform: translate3d(
    calc(var(--pc-da-esquerda) * -6px + 3px),
    calc(var(--pc-do-topo) * -6px + 3px),
    0.1px
  );
}
.pc-detalhes {
  width: 100%;
  position: absolute;
  top: 3em;
  display: flex;
  flex-direction: column;
}
.pc-nome {
  margin: 0;
  font-weight: 600;
  font-size: min(5svh, 2.1em);
  line-height: 1.1;
  /* Fim do degradê clareado em relação ao original (#6f6fbe): sobre o cartão
     escuro aquele roxo deixava a base das letras no limite da leitura. */
  background-image: linear-gradient(to bottom, #fff, #a8a8e0);
  background-size: 1em 1.5em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* O brilho global dos títulos não vale aqui: fundo escuro, regra própria. */
  animation: none;
}
.pc-cargo {
  margin: 0 auto;
  position: relative;
  top: -6px;
  width: min-content;
  white-space: nowrap;
  font-weight: 600;
  font-size: 15px;
  background-image: linear-gradient(to bottom, #fff, #8e8ede);
  background-size: 1em 1.5em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes pc-holo {
  0%   { background-position: 0 var(--pc-fundo-y), 0 0, center; }
  100% { background-position: 0 var(--pc-fundo-y), 90% 90%, center; }
}

/* Fora da tela nada precisa existir: o cartão para de custar quadro. */
.pc-wrap.fora-da-tela .pc-shine { animation-play-state: paused; }
.pc-wrap.fora-da-tela .pc-shine,
.pc-wrap.fora-da-tela .pc-glare,
.pc-wrap.fora-da-tela .pc-atras { visibility: hidden; }

/* Sem holografia para quem pediu menos movimento: sobra o cartão escuro com
   a foto, o nome e o cargo — legível e parado. */
@media (prefers-reduced-motion: reduce) {
  .pc-shine,
  .pc-glare,
  .pc-atras { display: none; }
  .pc-card { transform: none; transition: none; }
}

/* ---------- 24. Fundo aurora ------------------------------------------- */
/* Porte do AuroraBackground (aceternity / React Bits).

   Por que não instalei o componente: ele é React + Tailwind, e o demo ainda
   traz framer-motion. Nada disso participa do efeito — a aurora é um par de
   `repeating-linear-gradient` com um filtro e uma animação de posição. O
   React só embrulha, e o site já tem `[data-reveal]` para a entrada do texto.

   Como funciona, em três camadas:
     1. o gradiente branco cria as FAIXAS (as listras diagonais);
     2. o gradiente colorido pinta a cor por baixo delas;
     3. o `::after` repete os dois em outra escala, com `mix-blend-mode:
        difference`, e é ELE que anima — a interferência entre as duas
        camadas é o que faz a luz parecer viva em vez de deslizar.
   O `invert` no pai transforma o resultado em luz sobre claro.

   Substituiu o campo de pixels em WebGL. É ganho de desempenho grande: some
   todo o custo de GPU por pixel, os dois passes de shader e o arquivo de
   19 KB de JavaScript. Isto aqui é CSS, roda no compositor. */
#bg-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  /* Mesma entrada suave que o canvas tinha. */
  opacity: 0;
  animation: aurora-entra 1.4s var(--ease) 0.15s forwards;
}

.aurora {
  /* Faixas de luz. No original elas são listras duras que um `blur(10px)`
     amacia depois; aqui a suavidade está nas próprias paradas do gradiente.
     Mesmo resultado, sem filtro. */
  --faixas: repeating-linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 9%,
    rgba(255, 255, 255, 0) 19%,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, 0.28) 34%,
    rgba(255, 255, 255, 0) 44%
  );
  /* Cores já no tom final. O original pinta azul/violeta e inverte tudo
     depois; inverter em tempo real custa caro, então o valor invertido está
     escrito direto. Puxado para o azul-ardósia do site. */
  --cores: repeating-linear-gradient(
    100deg,
    rgba(23, 108, 183, 0.24) 12%,
    rgba(70, 150, 215, 0.14) 26%,
    rgba(120, 185, 235, 0.18) 38%,
    rgba(23, 90, 160, 0.14) 52%
  );
  /* O esmaecimento vinha de `mask-image`, que também custava caro. Aqui é uma
     camada normal por cima, na cor do fundo: mesmo efeito, pintura comum. */
  --esmaece: radial-gradient(
    ellipse at 100% 0%,
    rgba(230, 238, 248, 0) 8%,
    rgba(230, 238, 248, 0.55) 42%,
    var(--bg-900) 72%
  );

  position: absolute;
  inset: 0;
  background-image: var(--esmaece), var(--faixas), var(--cores);
  background-size: 100% 100%, 300% 200%, 200% 150%;
  background-position: 0 0, 50% 50%, 50% 50%;
  opacity: 0.5;
}

.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--faixas), var(--cores);
  background-size: 200% 130%, 140% 110%;
  mix-blend-mode: difference;
  opacity: 0.22;
  /* Anima background-position, e não transform, de propósito. Trocar por uma
     camada promovida que desliza parece a otimização óbvia — e é pior: medido,
     cai de 60 para 39 fps. A rasterização é multithread e sai do caminho
     crítico, enquanto uma camada COM mix-blend-mode que se move obriga a
     recompor a tela inteira a cada quadro, isso sim no caminho crítico. */
  animation: aurora 60s linear infinite;
}


/* ---------- Aurora azul (paleta da placa da loja) ------------------------ */
:root[data-tema="escuro"] .aurora {
  --faixas: repeating-linear-gradient(100deg,
    rgba(56, 178, 242, 0) 0%, rgba(56, 178, 242, 0.34) 9%, rgba(56, 178, 242, 0) 19%,
    rgba(56, 178, 242, 0) 26%, rgba(56, 178, 242, 0.2) 34%, rgba(56, 178, 242, 0) 44%);
  --cores: repeating-linear-gradient(100deg,
    rgba(6, 160, 228, 0.3) 12%, rgba(23, 108, 183, 0.24) 26%,
    rgba(88, 183, 239, 0.16) 38%, rgba(14, 60, 120, 0.3) 52%);
  --esmaece: radial-gradient(ellipse at 100% 0%,
    rgba(7, 13, 26, 0) 8%, rgba(7, 13, 26, 0.55) 42%, var(--bg-900) 72%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .aurora {
    --faixas: repeating-linear-gradient(100deg,
      rgba(56, 178, 242, 0) 0%, rgba(56, 178, 242, 0.34) 9%, rgba(56, 178, 242, 0) 19%,
      rgba(56, 178, 242, 0) 26%, rgba(56, 178, 242, 0.2) 34%, rgba(56, 178, 242, 0) 44%);
    --cores: repeating-linear-gradient(100deg,
      rgba(6, 160, 228, 0.3) 12%, rgba(23, 108, 183, 0.24) 26%,
      rgba(88, 183, 239, 0.16) 38%, rgba(14, 60, 120, 0.3) 52%);
    --esmaece: radial-gradient(ellipse at 100% 0%,
      rgba(7, 13, 26, 0) 8%, rgba(7, 13, 26, 0.55) 42%, var(--bg-900) 72%);
  }
}

@keyframes aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}

/* No celular a aurora fica parada. Animar background-position obriga a
   repintar o viewport inteiro a cada quadro; medido em emulacao de Pixel 5,
   sao 1733 ms de rasterizacao a cada 2,5 s de rolagem, contra 409 ms com a
   animacao desligada — 76% do custo. Num aparelho real e a rolagem
   engasgando. O gradiente continua ali: o que sai e so a deriva de 60 s, que
   ninguem acompanha numa tela de celular. */
@media (max-width: 63.99rem) {
  .aurora::after { animation: none; }
}
@keyframes aurora-entra {
  to { opacity: 1; }
}

/* Sem movimento: a aurora fica parada, não some. O fundo continua tendo
   textura, só não anda. */
@media (prefers-reduced-motion: reduce) {
  #bg-aurora { opacity: 1; animation: none; }
  .aurora::after { animation: none; }
}

/* O nome e o cargo do cartão usam `-webkit-text-fill-color: transparent` com
   degradê recortado no texto. Se o degradê não pintar, o texto some — foi o
   mesmo risco tratado nos títulos de seção. Aqui a rede de proteção cobre os
   dois casos reais: modo de cores forçadas (o navegador descarta
   background-image) e navegador sem suporte a background-clip. */
@media (forced-colors: active) {
  .pc-nome, .pc-cargo {
    background-image: none;
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
  }
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .pc-nome, .pc-cargo {
    background-image: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
}

/* Duas colunas na seção Equipe. Um cartão de 340px centralizado numa seção de
   largura inteira ficava perdido, com vazio grande dos dois lados; o texto
   passa a ocupar a esquerda e o cartão a direita. Mesma estrutura que a seção
   "Como funciona" já usa. */
.equipe-split {
  --pc-largura: 300px;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 64rem) {
  /* A coluna vale exatamente a largura do cartao. Com uma fracao (0.62fr)
     sobravam ~135 px vazios dentro dela, somados ao gap; com `auto` a coluna
     colapsava para zero, porque o cartao mede `min(largura, 100%)` e o 100%
     ficava circular. */
  .equipe-split { grid-template-columns: minmax(0, 1fr) var(--pc-largura); }
}

.equipe-texto .section-head { margin-bottom: clamp(1.5rem, 3vw, 2rem); }

.equipe-lista {
  display: grid;
  gap: 0.75rem;
  padding: 1.4rem 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.equipe-lista li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
  font-size: 0.94rem;
  color: var(--text-2);
  text-wrap: pretty;
}
.equipe-lista svg {
  width: 17px;
  height: 17px;
  margin-top: 0.2em;
  padding: 3px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-texto);
}

/* No celular a coluna vira uma só e o cartão fica no lugar de sempre. */
.equipe { justify-content: center; }
@media (min-width: 64rem) {
  .equipe { justify-content: flex-end; }
}

/* ---------- 22. Vistoria de entrada e saída ----------------------------- */
/* Tela cheia, não gaveta dentro de gaveta: isto é preenchido em pé, na porta
   do cliente, com o equipamento numa das mãos. */

/* Cartão por vistoria, com assinatura e fotos VISÍVEIS. Antes eram só dois
   botões: para conferir a assinatura era preciso abrir a tela de edição, o que
   convida a alterar sem querer o que já foi assinado. */
.det__vist {
  margin-top: 0.6rem; padding: 0.85rem 0.95rem;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
}
.det__vist.esta-feita { border-color: var(--accent-line); }
.det__vistTopo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.det__vistNome { font-weight: 600; display: block; }
.det__vistEstado { font-size: 0.8rem; color: var(--text-3); }
/* Resumo do que está negativo. Dezessete itens em ordem não dizem nada de
   relance; "2 problemas" com a lista embaixo diz tudo. */
.det__vistResumo {
  margin-top: 0.55rem; font-size: 0.85rem; color: var(--text-3);
}
.det__vistResumo.tem-problema { color: var(--err); }

/* Anotação por item na gaveta. É o detalhe que ganha a discussão, então
   aparece inteiro aqui em vez de exigir abrir o formulário item por item. */
.det__notas {
  margin: 0.5rem 0 0; padding-left: 1.05rem;
  display: grid; gap: 0.25rem;
  font-size: 0.84rem; color: var(--text-2);
}
.det__notas li::marker { color: var(--text-3); }
.det__notas li.tem-problema::marker { color: var(--err); }

.det__vistObs {
  margin-top: 0.6rem; font-size: 0.87rem; color: var(--text-2);
  padding-left: 0.7rem; border-left: 2px solid var(--line-2);
}

/* Fundo branco fixo: a assinatura é traço escuro em PNG transparente, e no
   tema escuro ela sumiria sobre o cartão. */
.det__ass { margin: 0.75rem 0 0; }
.det__ass img {
  width: 100%; max-width: 260px; height: auto; display: block;
  background: #ffffff; border: 1px solid var(--line-2);
  border-radius: var(--r-sm, 8px);
}
.det__ass figcaption {
  font-size: 0.75rem; color: var(--text-3); margin-top: 0.3rem;
}

.det__fotos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.4rem; margin-top: 0.75rem;
}
.det__foto { display: block; border-radius: var(--r-sm, 8px); overflow: hidden; }
.det__foto img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border: 1px solid var(--line-2); border-radius: inherit;
}

.det__dif {
  margin-top: 0.85rem; padding: 0.8rem 0.95rem;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-size: 0.88rem; color: var(--text-2);
}
/* Diferença entre entrada e saída é o achado que exige ação antes de devolver,
   então ganha destaque. Não só cor: o título diz o que é, para quem não
   distingue as duas bordas. */
.det__dif.tem-diferenca { border-color: var(--err); }
.det__difTitulo { font-weight: 600; color: var(--text); margin-bottom: 0.4rem; }
.det__dif ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; }

.vist {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(3, 7, 18, 0.55);
  display: grid; place-items: end center;
}
.vist__caixa {
  width: min(100%, 40rem); max-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--bg-800); border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
}
@media (min-width: 40rem) {
  .vist { place-items: center; }
  .vist__caixa { max-height: 92svh; border-radius: var(--r-xl); }
}

.vist__topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.vist__eyebrow {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
}
.vist__titulo { font-size: 1.1rem; }
.vist__fechar {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-2); background: transparent;
  color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer;
}

.vist__corpo { overflow-y: auto; padding: 0 0.9rem 1.15rem; display: grid; gap: 1.5rem; }

/* O cabeçalho do grupo gruda no topo enquanto se rola. Numa lista de vinte e
   três itens no celular, some a noção de em que parte da vistoria você está —
   e o contador ao lado responde "quanto falta aqui" sem ter que voltar. */
.vist__grupoTopo {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; padding: 0.9rem 0 0.5rem;
  background: var(--bg-800);
}
.vist__grupoTitulo { font-size: 1.02rem; }
.vist__grupoContagem {
  flex: none; font-size: 0.78rem; font-variant-numeric: tabular-nums;
  color: var(--text-3); padding: 0.15rem 0.5rem;
  border: 1px solid var(--line-2); border-radius: 999px;
}
.vist__grupoTopo.esta-completo .vist__grupoContagem {
  color: var(--ok-texto); border-color: var(--ok);
}
.vist__ajuda { font-size: 0.82rem; color: var(--text-3); margin-bottom: 0.8rem; }

/* 48px de altura mínima: isto é tocado com o dedo, em pé, às vezes na chuva. */
/* Dois botões por item, não uma caixa de marcar: desmarcado não distinguia
   "conferi e está ruim" de "não conferi", e é essa diferença que decide uma
   discussão com o cliente depois. Não responder é o estado dos dois apagados. */
/* Cada item é um CARTÃO, não uma linha separada por um fio. Vinte e três
   linhas de altura igual, divididas por 1px, viram uma parede sem forma no
   celular — que foi exatamente a reclamação. Superfície própria, respiro entre
   uma e outra, e a borda esquerda colorida pelo estado. */
.vist__item {
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.55rem;
  background: var(--superficie-cartao, var(--surface-2));
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--line-2);
  border-radius: var(--r-md);
}
.vist__item:last-child { margin-bottom: 0; }

/* A cor do estado vai no cartão inteiro: rolando a lista dá para ver o que já
   foi conferido e o que continua em branco sem ler item por item. */
.vist__item[data-estado='ok'] { border-left-color: var(--ok); }
.vist__item[data-estado='ruim'] { border-left-color: var(--err); }

.vist__itemRotulo { font-size: 0.95rem; line-height: 1.35; margin-bottom: 0.6rem; }
.vist__itemAjuda {
  display: block; margin-top: 0.25rem;
  font-size: 0.76rem; color: var(--text-3); font-weight: 400;
}

/* Botões embaixo do rótulo e em linha própria, dividindo a largura. Ao lado do
   texto eles espremiam o rótulo em três linhas e ficavam com 49px de largura. */
.vist__itemAcoes {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
/* O min-width faz o par OK/Problema exigir 190px. Em tela estreita esse
   pedido nao cabe junto do botao de anotacao, e o flex-wrap do pai joga a
   anotacao para a linha de baixo sozinho — sem media query chutada. Sem isso,
   a 320px os tres controles dividiam a largura e "Problema" em negrito
   transbordava a propria borda. */
.vist__escolha { display: flex; gap: 0.4rem; flex: 1 1 auto; min-width: 190px; }
.vist__op {
  flex: 1 1 0; min-width: 0;
  min-height: 46px; padding: 0 0.6rem;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: transparent; color: var(--text-3);
  font: inherit; font-size: 0.88rem; cursor: pointer;
  white-space: nowrap;
}
.vist__op:hover { border-color: var(--accent-line); color: var(--text); }

/* Ativo não é só cor. O botão escolhido fica preenchido e em negrito, para
   quem não distingue verde de vermelho enxergar qual está valendo. */
.vist__op.esta-ativo { font-weight: 700; }
.vist__op--ok.esta-ativo {
  color: var(--ok-texto); border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.vist__op--ruim.esta-ativo {
  color: var(--err-texto); border-color: var(--err);
  background: color-mix(in srgb, var(--err) 14%, transparent);
}

/* ---- Anotação por item ----
   Fechada por padrão: vinte e três caixas de texto abertas fariam a tela virar
   um rolo no celular, e na maioria dos itens não há nada a dizer. O botão fica
   discreto quando vazio e ganha marca quando tem texto, para dar de relance o
   que já foi anotado. */
.vist__notaBtn {
  flex: none; min-height: 46px; padding: 0 0.7rem;
  border: 1px dashed var(--line-2); border-radius: var(--r-md);
  background: none; cursor: pointer;
  font: inherit; font-size: 0.8rem; color: var(--text-3);
}
.vist__notaBtn:hover { color: var(--text); }
.vist__notaBtn.tem-nota {
  color: var(--accent-texto); font-weight: 600;
  border-style: solid; border-color: var(--accent-line);
}
.vist__notaArea { margin-top: 0.55rem; }
.vist__nota { width: 100%; resize: vertical; font-size: 0.88rem; }

/* Itens do outro equipamento: escondidos, não removidos. */
.vist__verTudo {
  justify-self: start; padding: 0.55rem 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--text-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.vist__verTudo:hover { color: var(--text); }

.vist__obs { width: 100%; resize: vertical; }

.vist__fotos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
/* Miniatura de verdade, não o nome do arquivo: quem acabou de fotografar
   quer conferir se a foto saiu tremida antes de guardar a vistoria. */
.vist__foto {
  position: relative; width: 92px;
  border-radius: var(--r-md); font-size: 0.85rem;
}
.vist__fotoLink { display: block; border-radius: inherit; overflow: hidden; }
.vist__fotoLink img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border: 1px solid var(--line-2); border-radius: inherit;
  background: var(--surface-2);
}
.vist__fotoNome {
  display: grid; place-items: center; aspect-ratio: 1;
  border: 1px solid var(--line-2); border-radius: inherit;
  color: var(--text-3); font-size: 0.8rem;
}
.vist__fotoRemover {
  position: absolute; top: -8px; right: -8px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg-800);
  color: var(--text); cursor: pointer; font-size: 1rem; line-height: 1;
}

/* touch-action: none impede a página de rolar enquanto o dedo assina. Sem
   isso, a tela arrasta junto e a assinatura sai picada. */
.vist__assinatura {
  width: 100%; height: 170px; touch-action: none;
  border: 1px dashed var(--line-2); border-radius: var(--r-md);
  background: #ffffff; display: block;
}
.vist__assAcoes { display: flex; justify-content: flex-end; margin-top: 0.5rem; }

.vist__rodape {
  padding: 0.8rem 1.15rem calc(0.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); display: grid; gap: 0.6rem;
}

/* Quantos itens faltam, junto do botão de salvar. Numa vistoria de dezessete
   itens é fácil perder a conta e salvar pela metade sem perceber. */
.vist__progresso { display: grid; gap: 0.4rem; }
.vist__contador {
  font-size: 0.78rem; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.vist__contador.esta-completo { color: var(--ok-texto); font-weight: 600; }
.vist__trilho {
  height: 4px; border-radius: 999px;
  background: var(--surface-2); overflow: hidden;
}
.vist__barra {
  height: 100%; width: 0%;
  background: var(--ok);
  transition: width 160ms ease-out;
}
@media (prefers-reduced-motion: reduce) { .vist__barra { transition: none; } }
.vist__aviso { font-size: 0.85rem; color: var(--err); }

/* ---------- 25. Avaliações do Google ------------------------------------ */
/* Copiadas à mão para src/content.js. A seção inteira só existe quando há
   avaliação de verdade — ver o comentário em src/pages/home.js. */

/* Carrossel: um trilho que rola na horizontal e para sempre no começo de um
   cartão (scroll-snap). Isso já é o carrossel inteiro no celular — o dedo
   passa de uma avaliação para a outra sem JavaScript. O script em
   /assets/js/carrossel.js acrescenta a barra de progresso, a rolagem com o
   mouse parado perto da borda e as setas do teclado. Não há botões de seta.

   Substituiu a grade com "ver mais": com oito avaliações a grade ocupava duas
   telas de rolagem no celular. O trilho tem sempre a altura de UMA linha, não
   importa quantas avaliações cheguem.

   Uma ponta do próximo cartão aparece na borda, esmaecida. É o que avisa,
   sem texto nenhum, que dá para arrastar. */
.aval-carrossel {
  position: relative;
  /* Faixa de cada lado onde aparece a pontinha esmaecida do cartão vizinho —
     é ela que avisa que dá para arrastar. No computador é também a zona onde
     o mouse parado faz o carrossel andar.

     Era mais larga quando abrigava as setas. Sem elas a faixa encolheu no
     celular — mas não demais: com 24px sobravam só 10px de ponta visível
     (o resto é o vão entre cartões), e sem seta essa ponta é o ÚNICO aviso de
     que dá para arrastar. Com 40px a ponta fica em torno de 26px. */
  --respiro: clamp(2.5rem, 6vw, 3.5rem);
}

/* Duas linhas: o trilho enche por COLUNA — dois cartões empilhados, depois
   a próxima dupla ao lado.

   A altura de cada linha é a do cartão mais alto dela no carrossel inteiro,
   então um texto longo deixa a linha um pouco mais alta em todas as colunas.
   É o que mantém as duas linhas alinhadas ao passar.

   O trilho avança sobre a margem da página (margin-inline negativa do tamanho
   do gutter) e devolve esse espaço como respiro interno. Assim as faixas
   laterais saem da margem e não comem a largura dos cartões — no computador
   continuam cabendo três colunas inteiras. */
.aval-trilho {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: min(100%, 22rem);
  gap: 0.9rem;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--respiro);
  scroll-padding-inline: var(--respiro);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-block: 0.3rem 0.4rem;
  scrollbar-width: none;
  align-items: stretch;

  /* Esmaecido só dentro das faixas laterais, e só do lado onde ainda há
     cartão. O script troca as larguras conforme a posição. */
  --fade-esq: 0px;
  --fade-dir: var(--respiro);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-esq), #000 calc(100% - var(--fade-dir)), transparent 100%);
}
.aval-trilho[data-inicio='false'] { --fade-esq: var(--respiro); }
.aval-trilho[data-fim='true'] { --fade-dir: 0px; }
.aval-trilho::-webkit-scrollbar { display: none; }
.aval-trilho > .aval { scroll-snap-align: start; }

/* Por dentro, e não por fora: a máscara recorta tudo além da borda do trilho,
   inclusive um contorno de foco desenhado do lado de fora. */
.aval-trilho:focus-visible {
  outline: 2px solid var(--accent-texto);
  outline-offset: -2px;
  border-radius: var(--r-lg, 16px);
}

.aval {
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
@media (hover: hover) {
  .aval:hover { transform: translateY(-2px); border-color: var(--accent-line); }
}

/* Abaixo do trilho, só a barra de progresso. */
.aval-rodape {
  display: flex;
  justify-content: center;
  margin-top: 1.1rem;
}
.aval-rodape[hidden] { display: none; }

.aval-progresso {
  flex: 0 1 10rem;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  overflow: hidden;
}
/* Largura = fração visível; posição = quanto rolou. As duas vêm do script
   como variáveis, e o transform desliza sem recalcular layout. */
.aval-progresso__barra {
  display: block;
  height: 100%;
  width: calc(var(--tam, 0.3) * 100%);
  transform: translateX(calc(var(--x, 0) * 100%));
  border-radius: inherit;
  background: var(--text-2);
  transition: transform 0.12s linear, width 0.2s;
}


@media (prefers-reduced-motion: reduce) {
  .aval, .aval-progresso__barra { transition: none; }
  .aval:hover { transform: none; }
}

.aval {
  margin: 0;
  padding: 1.15rem 1.2rem;
  background: var(--superficie-cartao, var(--surface-2));
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg, 16px);
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

/* O helper de ícones monta tudo com fill="none"; estrela vazada lê como
   estrela que faltou marcar, então aqui ela é preenchida. */
.aval__estrelas { display: flex; gap: 0.1rem; color: var(--warn); }
.aval__estrelas svg { fill: currentColor; stroke-width: 1; }

/* Aspas de verdade, em vez de itálico: itálico em bloco inteiro cansa, e a
   aspa diz "isto é fala de outra pessoa" sem custar legibilidade. */
.aval__texto {
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}
.aval__texto::before { content: '\201C'; }
.aval__texto::after { content: '\201D'; }

.aval__pe {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  padding-top: 0.2rem;
  border-top: 1px solid var(--line-2);
}
.aval__autor { font-weight: 600; font-size: 0.9rem; }
.aval__quando { color: var(--text-3); font-size: 0.8rem; }

.aval__link { margin-top: 1.1rem; text-align: center; }


/* Rolagem ao pairar o mouse perto da borda (ver carrossel.js). Enquanto o
   trilho desliza sozinho o encaixe fica desligado — com ele, cada passinho de
   poucos pixels seria puxado de volta ao cartão anterior. Ao parar, volta, e
   o navegador acomoda no cartão mais próximo. */
.aval-trilho.esta-deslizando { scroll-snap-type: none; }