/* ============================================================
   WRSC — a camada do site institucional
   ============================================================
   A IDENTIDADE (cores, fontes, logo, temas) mora em wrsc.css, irmão
   do que roda no Timesheet e no Portal. Aqui fica a linguagem do
   SITE, que é outra coisa.

   ------------------------------------------------------------
   POR QUE ELA NÃO PARECE COM A DOS SISTEMAS -- NEM COM A DE TODO
   MUNDO
   ------------------------------------------------------------
   A primeira versão deste site era o desenho padrão de 2026: capa
   escura, mancha de gradiente, pílula com bolinha piscando, três
   cartões arredondados com ícone de traço. Bonito e ANÔNIMO -- trocar
   o logotipo dava o site de qualquer empresa de software.

   Esta versão empresta a linguagem de quem trabalha em galpão e em
   linha de produção: papel quadriculado de planta, cota e chamada de
   desenho técnico, índice de peças, numeração de estação, rótulo em
   monoespaçada, canto reto. Nada de bolinha piscando, nada de blob.

   A regra de bolso: se dá para trocar o logotipo e virar o site de
   outra empresa, o desenho ainda não é nosso.
   ============================================================ */

:root {
  --topo-h: 66px;
  /* O AR ENTRE SEÇÕES.
     Medido: a 1280px o vão entre o fim de uma seção e o rótulo da
     seguinte chegava a 300px -- duas vezes o ar de cima com o de
     baixo, mais a margem do cabeçalho. Numa tela de 900px de altura,
     isso é um terço da tela sem nada. Era clamp(76, 9vw, 140). */
  --secao: clamp(46px, 5.2vw, 84px);
  --tinta-tec: color-mix(in srgb, var(--wr-azul) 34%, transparent);
  /* A tinta do numero vazado e mais forte que a das linhas de desenho:
     linha fina e decoracao, numero e texto -- e texto grande ainda
     precisa de 3:1. Medido: 34% dava 2.34. */
  --tinta-num: color-mix(in srgb, var(--wr-azul) 66%, transparent);
  --grade: color-mix(in srgb, var(--texto) 7%, transparent);
  --grade-forte: color-mix(in srgb, var(--texto) 12%, transparent);
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  /* A marca do fundo. A opacidade NAO e gosto: e o quanto de tinta pode
     entrar embaixo do texto sem derrubar o contraste. Medida com a marca
     composta como fundo de TODO texto -- o pior caso possivel. */
  /* O RECUO DO COMPONENTE.
     A pagina tem DUAS reguas verticais e nao mais: a borda da faixa,
     onde mora todo texto de secao, e este recuo, onde mora todo texto
     que esta dentro de um componente (ficha, bloco, chamada, caixa
     lateral). Antes cada componente tinha o seu -- 38, 40, 66 e 28 --
     e o olho lia quatro colunas comecando em lugares diferentes na
     mesma pagina. Medido: 14 bordas esquerdas distintas a 1440px. */
  --recuo: clamp(24px, 3vw, 38px);
  /* A MEDIDA DA LINHA.
     Prosa em 56, 58, 60 e 62 caracteres na mesma pagina da quatro
     raggings diferentes -- a borda direita do texto muda de bloco para
     bloco, e e isso que o olho le como desalinhado mesmo quando toda
     linha comeca no mesmo lugar. Uma medida para prosa; titulo tem a
     dele, porque titulo quebra por outra razao. */
  /* EM REM, E NAO EM ch. `ch` e a largura do zero na fonte do
     ELEMENTO: 62ch num subtitulo de 19px sao 749px, e num paragrafo de
     15px sao 552px. Medido: a mesma regra dava quatro larguras fisicas
     diferentes na mesma pagina, e a borda direita do texto mudava de
     bloco para bloco. Em rem ela e uma so, e a prosa termina na mesma
     coluna em que comecou alinhada. 36rem = 576px: 70 caracteres no
     corpo do texto, 55 no subtitulo -- dentro da faixa legivel nos
     dois. */
  --medida: 36rem;
  /* O titulo continua em ch: titulo quebra por contagem de palavra, e
     nao por largura de coluna -- e o `balance` abaixo faz o resto. */
  --medida-titulo: 18ch;
  --marca-fundo-tinta: var(--wr-azul);
  /* 5%, e nao 7%: a 7% a margem do texto menor caiu para 1,004 do
     minimo -- um centesimo de falhar. A marca nao paga com o texto. */
  --marca-fundo-op: .05;
}
:root[data-theme="dark"] { --tinta-tec: color-mix(in srgb, var(--wr-azul-300) 40%, transparent);
  --tinta-num: color-mix(in srgb, var(--wr-azul-300) 62%, transparent);
  --marca-fundo-tinta: var(--wr-azul-300); --marca-fundo-op: .07; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --tinta-tec: color-mix(in srgb, var(--wr-azul-300) 40%, transparent);
    --tinta-num: color-mix(in srgb, var(--wr-azul-300) 62%, transparent);
    --marca-fundo-tinta: var(--wr-azul-300); --marca-fundo-op: .07;
  }
}

/* ============================================================
   A MARCA NO FUNDO — viva, e atras de tudo
   ============================================================
   Duas camadas de proposito. A de fora recebe o movimento do ponteiro
   (variaveis --mx/--my, escritas pelo site.js); a de dentro recebe a
   animacao presa a rolagem. Fossem a mesma, uma transform apagaria a
   outra -- animacao ganha de estilo em linha, e o ponteiro sumiria.

   z-index -1 e pointer-events none: ela nunca pega clique e nunca fica
   na frente de texto nenhum. aria-hidden no HTML, porque para quem ouve
   a pagina ela nao existe. */
.marca-fundo {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; contain: strict;
  transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 10px), 0);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.marca-fundo::before {
  content: ''; position: absolute; right: -7vmin; bottom: -9vmin;
  width: 48vmin; height: 37vmin;
  background-color: var(--marca-fundo-tinta);
  opacity: var(--marca-fundo-op);
  /* DUAS mascaras, cruzadas: o simbolo E um degrade que dissolve na
     direcao do conteudo. Com a mascara do simbolo sozinha, o desenho
     atravessava a coluna de texto e passava por baixo dos cartoes --
     opaco, entao nao vazava, mas lia como falha. Agora ele e o que
     sempre foi para ser: uma marca que some no canto. */
  -webkit-mask-image: url('logo/wrsc-simbolo.svg'),
                      linear-gradient(302deg, #000 0%, #000 34%, transparent 76%);
          mask-image: url('logo/wrsc-simbolo.svg'),
                      linear-gradient(302deg, #000 0%, #000 34%, transparent 76%);
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
          mask-position: center, center;
  -webkit-mask-size: contain, 100% 100%;
          mask-size: contain, 100% 100%;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  transform-origin: 70% 70%;
  will-change: transform;
}
/* Viva conforme a rolagem, sem um unico ouvinte de scroll em JS: quem
   anda com a pagina e o compositor, e nao a thread principal. */
@supports (animation-timeline: scroll()) {
  .marca-fundo::before {
    animation: marca-viva linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes marca-viva {
    from { transform: translate3d(0, 4vmin, 0) rotate(-7deg) scale(1); }
    to   { transform: translate3d(-9vmin, -13vmin, 0) rotate(8deg) scale(1.14); }
  }
}
/* Onde nao ha animacao presa a rolagem, o site.js escreve --rol (0..1) e
   a marca anda pelo mesmo caminho, so que por variavel. */
@supports not (animation-timeline: scroll()) {
  .marca-fundo::before {
    transform: translate3d(calc(var(--rol, 0) * -9vmin), calc(4vmin + var(--rol, 0) * -17vmin), 0)
               rotate(calc(-7deg + var(--rol, 0) * 15deg))
               scale(calc(1 + var(--rol, 0) * .14));
  }
}

/* ---------- esqueleto ---------- */
body { background: var(--fundo); color: var(--texto); }
.faixa { max-width: var(--largura-larga); margin: 0 auto; padding: 0 var(--e-5); }
section { padding: var(--secao) 0; position: relative; }

/* O PAPEL. Quadriculado de planta, não gradiente: é o fundo em que
   layout de armazém e roteiro de produção são desenhados desde sempre. */
.papel { position: relative; }
.papel::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, var(--grade) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grade) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 80% at 18% 0%, #000 12%, transparent 72%);
          mask-image: radial-gradient(120% 80% at 18% 0%, #000 12%, transparent 72%); }
.papel > * { position: relative; z-index: 1; }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: var(--e-4); top: var(--e-4); z-index: 99; background: var(--wr-azul);
  color: #fff; padding: 10px 16px; }

/* ---------- rótulo técnico: o tipo de letra da casa de engenharia ---------- */
.rot { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3); display: inline-flex; align-items: center; gap: 10px; }
.rot::before { content: ''; width: 26px; height: 1px; background: var(--tinta-tec); }
.rot-az { color: var(--wr-azul); }
:root[data-theme="dark"] .rot-az { color: var(--wr-azul-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .rot-az { color: var(--wr-azul-300); }
}

/* ---------- barra do topo: reta, sem vidro fosco ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--fundo);
  border-bottom: 1px solid transparent; transition: border-color .18s; }
.topo.desceu { border-bottom-color: var(--borda); }
.topo-in { max-width: var(--largura-larga); margin: 0 auto; padding: 0 var(--e-5);
  min-height: var(--topo-h); display: flex; align-items: center; gap: var(--e-5); }
.marca { display: inline-flex; align-items: center; color: var(--texto); flex: 0 0 auto; }
.marca .wr-logo-horizontal { width: 112px; height: 26px; }

.nav { display: flex; gap: var(--e-2); margin-inline: auto; }
.nav-i { font: 500 var(--t-sm)/1 var(--fonte-titulo); color: var(--texto-2);
  text-decoration: none; padding: 10px 12px; position: relative; white-space: nowrap;
  transition: color .14s; }
.nav-i:hover { color: var(--texto); }
.nav-i.ativo { color: var(--texto); }
/* marcação de cota, e não pílula: dois tiques e uma linha */
.nav-i.ativo::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 5px; border: 1px solid var(--tinta-tec); border-top: 0; }

.topo-dir { display: flex; align-items: center; gap: var(--e-3); flex: 0 0 auto; }
.idi { display: inline-flex; border: 1px solid var(--borda); }
.idi-b { font: 600 11px/1 var(--mono); letter-spacing: .06em; color: var(--texto-3);
  text-decoration: none; padding: 8px 9px; transition: .14s; }
.idi-b + .idi-b { border-left: 1px solid var(--borda); }
.idi-b:hover { color: var(--texto); background: var(--superficie-2); }
.idi-b.on { background: var(--texto); color: var(--fundo); }
/* O alternador de tema herda o desenho do sistema, mas sem raio: no
   site ele convive com canto reto, e uma pílula sozinha entrega o
   desenho emprestado. */
.topo .wr-tema { border-radius: 0; }
.topo .wr-tema button { border-radius: 0; }

/* ---------- gaveta ---------- */
.gaveta-bt { display: none; width: 38px; height: 38px; border: 1px solid var(--borda);
  background: transparent; cursor: pointer; padding: 11px 9px; flex-direction: column;
  justify-content: space-between; }
.gaveta-bt span { display: block; height: 1.5px; background: var(--texto);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .16s; }
.gaveta-bt[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.gaveta-bt[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gaveta-bt[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.gaveta { position: fixed; inset: var(--topo-h) 0 auto 0; z-index: 49; background: var(--fundo);
  border-bottom: 1px solid var(--borda); padding: var(--e-3) var(--e-5) var(--e-6); }
.gaveta nav { display: flex; flex-direction: column; max-width: var(--largura-larga); margin: 0 auto; }
.gaveta a { display: flex; align-items: baseline; gap: var(--e-4);
  font: 500 var(--t-lg)/1.4 var(--fonte-titulo); color: var(--texto); text-decoration: none;
  padding: 15px 0; border-bottom: 1px solid var(--borda); }
.gaveta a i { font: 600 11px/1 var(--mono); color: var(--texto-3); font-style: normal; }
.gaveta[hidden] { display: none; }

/* ============================================================
   A CAPA — desenho técnico, com cota e chamada
   ============================================================ */
.capa { padding-top: clamp(38px, 4.4vw, 64px); padding-bottom: clamp(32px, 3.8vw, 58px);
  overflow: clip; border-bottom: 1px solid var(--borda); }
.capa-in { max-width: var(--largura-larga); margin: 0 auto; padding: 0 var(--e-5); }

.capa h1 { font: 700 clamp(36px, 6.4vw, 82px)/1.0 var(--fonte-titulo);
  letter-spacing: -.035em; margin: 0 0 var(--e-6); max-width: var(--medida-titulo); }
/* A terceira linha recebe a cor da marca: o título vira uma frase com
   um destaque, e não um bloco chapado. */
.capa h1 b { font-weight: 700; color: var(--wr-azul); }
:root[data-theme="dark"] .capa h1 b { color: var(--wr-azul-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .capa h1 b { color: var(--wr-azul-300); }
}
.capa .sub { font-size: clamp(16px, 1.45vw, 19px); color: var(--texto-2);
  max-width: var(--medida); line-height: 1.64; margin: 0 0 var(--e-6); }

/* A COTA. Uma linha com dois tiques e um rótulo embaixo, como num
   desenho de peça. Três delas dizem, sem adjetivo, o que a empresa
   faz: escopo total, foco onde decide, mercado brasileiro. */
.cotas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-5); max-width: 720px; margin-top: var(--e-8); }
.cota { padding-top: var(--e-3); position: relative; }
.cota::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  border: 1px solid var(--tinta-tec); border-bottom: 0; }
.cota b { display: block; font: 600 var(--t-sm)/1.35 var(--fonte-titulo); color: var(--texto);
  margin-top: 9px; }
.cota span { font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-3); }

.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* ---------- botões: canto reto ---------- */
.bt { display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--t-md)/1 var(--fonte-titulo); padding: 15px 22px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; border-radius: 2px;
  transition: background .15s, border-color .15s, color .15s, transform .15s; }
.bt svg { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.bt:hover svg { transform: translateX(4px); }
.bt-p { background: var(--wr-azul); color: #fff; }
.bt-p:hover { background: var(--wr-azul-900); }
.bt-2 { background: transparent; color: var(--texto); border-color: var(--texto-3); }
.bt-2:hover { background: var(--texto); color: var(--fundo); border-color: var(--texto); }

/* ============================================================
   O ÍNDICE DE ESCOPO — lista de peças, não grade de cartões
   ============================================================
   Doze módulos em cartão dariam doze caixas iguais e nenhuma
   hierarquia. Como índice numerado, a lista mostra ABRANGÊNCIA de
   relance, e o realce nos quatro focos faz o trabalho que o texto
   faria em três parágrafos.
   ============================================================ */
.indice { border-top: 1px solid var(--borda); margin-top: var(--e-6); }
/* A coluna do nome era 1fr para textos de uma palavra: "Finanças"
   ocupava meia faixa e a descrição começava a 630px, com o vazio entre
   as duas. Agora o nome pede o que usa e a descrição vem junto. */
.item { display: grid; grid-template-columns: 74px minmax(0, 210px) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--e-4); padding: 15px 0; border-bottom: 1px solid var(--borda);
  position: relative; transition: background .15s; }
.item:hover { background: var(--superficie-2); }
/* --texto-2, e nao --texto-3: a linha marcada ja tem 5% de azul no
   fundo, e com a marca do fundo por baixo sao tres camadas de tinta
   somadas embaixo de 11px. Medido, --texto-3 caia para 4,33 contra o
   minimo de 4,5. O texto tem prioridade sobre a delicadeza do tom. */
.item i { font: 500 11px/1 var(--mono); color: var(--texto-2); font-style: normal;
  letter-spacing: .06em; }
.item b { font: 600 var(--t-md)/1.3 var(--fonte-titulo); color: var(--texto); }
.item span { color: var(--texto-2); font-size: var(--t-sm); line-height: 1.45; }
.item em { font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  font-style: normal; color: var(--texto-2); }
.item.marcado { background: color-mix(in srgb, var(--wr-azul) 5%, transparent); }
.item.marcado::before { content: ''; position: absolute; left: 0; top: -1px; bottom: -1px;
  width: 2px; background: var(--wr-azul); }
.item.marcado b { color: var(--wr-azul); }
.item.marcado em { color: var(--wr-azul); }
:root[data-theme="dark"] .item.marcado b,
:root[data-theme="dark"] .item.marcado em { color: var(--wr-azul-300); }
:root[data-theme="dark"] .item.marcado::before { background: var(--wr-azul-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .item.marcado b,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .item.marcado em { color: var(--wr-azul-300); }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .item.marcado::before { background: var(--wr-azul-300); }
}

/* ============================================================
   AS ESTAÇÕES — os quatro focos
   ============================================================
   Numeradas como posto de linha de produção, com o número em
   contorno e uma lista de itens que prova conhecimento de detalhe.
   ============================================================ */
.estacoes { display: grid; gap: 0; border-top: 1px solid var(--borda); }
.estacao { display: grid; grid-template-columns: 120px 1fr 260px; gap: clamp(20px, 3vw, 48px);
  padding: clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid var(--borda);
  align-items: start; }
.estacao-n { font: 700 clamp(44px, 6vw, 76px)/.85 var(--fonte-titulo); color: transparent;
  -webkit-text-stroke: 1.4px var(--tinta-num); letter-spacing: -.04em; }
.estacao h3 { font: 600 clamp(21px, 2.6vw, 30px)/1.16 var(--fonte-titulo); margin: 0 0 var(--e-4);
  letter-spacing: -.02em; }
.estacao p { color: var(--texto-2); font-size: var(--t-lg); line-height: 1.64; margin: 0;
  max-width: var(--medida); }
.estacao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--borda); border: 1px solid var(--borda); }
.estacao li { background: var(--fundo); padding: 11px 14px;
  font: 500 var(--t-sm)/1.3 var(--mono); color: var(--texto-2); }

/* ============================================================
   COMO O TEXTO QUEBRA
   ============================================================
   Nao e enfeite: e a outra metade do alinhamento. Uma linha pode
   comecar exatamente no lugar certo e ainda assim o bloco parecer
   torto, porque a ULTIMA linha ficou com uma palavra sozinha ou
   porque o titulo de duas linhas ficou com sete palavras em cima e
   uma embaixo.

   - `balance` no titulo: o navegador distribui as palavras entre as
     linhas em vez de encher a primeira e sobrar a ultima.
   - `pretty` na prosa: evita a viuva -- a palavra solta no fim do
     paragrafo.
   - `hyphens: none`: hifenizacao automatica muda de idioma para
     idioma, e a mesma pagina teria tres raggings diferentes em
     portugues, ingles e espanhol.
   Onde o navegador nao conhece, nada acontece -- e o texto fica como
   sempre foi. */
h1, h2, h3, .capa .sub { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
body { hyphens: none; -webkit-hyphens: none; }

/* ============================================================
   PRODUTOS — a ficha, no sentido de desenho tecnico
   ============================================================ */
.prod { border: 1px solid var(--borda); margin-top: var(--e-7); background: var(--fundo); }
.prod-cab { display: flex; align-items: center; justify-content: space-between;
  /* O recuo horizontal e o MESMO do corpo da ficha: com var(--e-5) o
     codigo PRD-01 nascia 14px a esquerda do titulo logo abaixo dele,
     dentro do mesmo cartao. */
  gap: var(--e-4); padding: 12px var(--recuo); border-bottom: 1px solid var(--borda);
  background: var(--superficie-2); }
.prod-cab i { font: 500 11px/1 var(--mono); color: var(--texto-2); font-style: normal;
  letter-spacing: .1em; }
/* A estampa de estado. Tres estados fechados, e nada de texto livre: a
   primeira pressa transformaria "em construcao" em "quase pronto". */
.estampa { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid currentColor; white-space: nowrap; }
.estampa-producao   { color: var(--wr-azul); }
.estampa-construcao { color: var(--texto-2); }
.estampa-desenho    { color: var(--texto-2); border-style: dashed; }
:root[data-theme="dark"] .estampa-producao { color: var(--wr-azul-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .estampa-producao { color: var(--wr-azul-300); }
}
.prod-in { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.prod-txt { padding: var(--recuo); min-width: 0; }
.prod-txt h2 { font-size: clamp(25px, 3vw, 34px); margin: 0; letter-spacing: -.02em; }
.prod-tipo { font: 500 var(--t-sm)/1.3 var(--mono); color: var(--wr-azul);
  margin: var(--e-2) 0 var(--e-4); }
:root[data-theme="dark"] .prod-tipo { color: var(--wr-azul-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prod-tipo { color: var(--wr-azul-300); }
}
.prod-d { color: var(--texto-2); line-height: 1.64; margin: 0; max-width: var(--medida); }
.prod-para { display: grid; grid-template-columns: 96px 1fr; gap: var(--e-3);
  margin: var(--e-5) 0 0; padding-top: var(--e-4); border-top: 1px solid var(--borda); }
.prod-para dt { font: 500 10px/1.4 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--texto-2); }
.prod-para dd { margin: 0; color: var(--texto-2); font-size: var(--t-sm); line-height: 1.55; }
.prod-a { list-style: none; margin: var(--e-5) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--borda); border: 1px solid var(--borda); }
.prod-a li { background: var(--fundo); padding: 11px var(--e-4);
  font-size: var(--t-sm); color: var(--texto-2); }
/* A barrinha do agente sai para FORA do fluxo do texto: com
   padding-left sozinho, o texto dela nascia numa terceira regua, 18px a
   direita do resto da ficha. */
.prod-ag { margin-top: var(--e-5); margin-left: calc(var(--e-4) * -1);
  padding-left: calc(var(--e-4) - 2px);
  border-left: 2px solid var(--tinta-num); }
.prod-ag p { margin: var(--e-2) 0 0; color: var(--texto-2); font-size: var(--t-sm);
  line-height: 1.6; max-width: var(--medida); }
.prod-acoes { margin-top: var(--e-6); }
.prod-tela { margin: 0; border-top: 1px solid var(--borda);
  background: var(--superficie-2); padding: var(--recuo); min-width: 0; }
.prod-tela img { display: block; width: 100%; height: auto; border: 1px solid var(--borda); }

/* O ESBOCO DA TELA.
   Desenho, e nao captura -- e a legenda diz isso. Pinta com os tokens
   da identidade, entao vira escuro junto com a pagina: um PNG exigiria
   dois arquivos por produto, e o botao de tema nao alcancaria nenhum
   dos dois. */
.esboco { display: block; width: 100%; height: auto; border: 1px solid var(--borda);
  background: var(--fundo); }
.esboco .e-rot { font: 500 11px var(--mono); letter-spacing: .14em;
  text-transform: uppercase; fill: var(--texto-2); }
.esboco .e-div { fill: var(--borda); }
.esboco .e-cx  { fill: none; stroke: var(--borda); stroke-width: 1; }
.esboco .e-tx  { fill: color-mix(in srgb, var(--texto) 22%, transparent); }
.esboco .e-mk  { fill: color-mix(in srgb, var(--wr-azul) 45%, transparent); }
.esboco .e-cel { fill: color-mix(in srgb, var(--wr-azul) 14%, transparent);
  stroke: color-mix(in srgb, var(--wr-azul) 34%, transparent); stroke-width: 1; }
.esboco .e-bar { fill: color-mix(in srgb, var(--wr-azul) 34%, transparent); }
.esboco .e-lin { fill: var(--borda); }
.esboco .e-cur { fill: none; stroke: var(--wr-azul); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; opacity: .62; }
.esboco .e-cur-2 { stroke: var(--texto-2); opacity: .34; stroke-dasharray: 5 4; }
.esboco .e-bal  { fill: color-mix(in srgb, var(--texto) 9%, transparent); }
.esboco .e-bal-2 { fill: color-mix(in srgb, var(--wr-azul) 18%, transparent); }
.esboco .e-doc  { fill: var(--superficie); stroke: var(--borda); stroke-width: 1; }
:root[data-theme="dark"] .esboco .e-mk,
:root[data-theme="dark"] .esboco .e-cel,
:root[data-theme="dark"] .esboco .e-bar,
:root[data-theme="dark"] .esboco .e-bal-2 { fill: color-mix(in srgb, var(--wr-azul-300) 26%, transparent); }
:root[data-theme="dark"] .esboco .e-cur { stroke: var(--wr-azul-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .esboco .e-mk,
  :root:not([data-theme="light"]) .esboco .e-cel,
  :root:not([data-theme="light"]) .esboco .e-bar,
  :root:not([data-theme="light"]) .esboco .e-bal-2 { fill: color-mix(in srgb, var(--wr-azul-300) 26%, transparent); }
  :root:not([data-theme="light"]) .esboco .e-cur { stroke: var(--wr-azul-300); }
}
.prod-tela figcaption { margin-top: var(--e-3); font: 500 10px/1.4 var(--mono);
  letter-spacing: .06em; color: var(--texto-2); }
@media (min-width: 1000px) {
  .prod-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }
  .prod-tela { border-top: 0; border-left: 1px solid var(--borda);
    display: flex; flex-direction: column; justify-content: center; }
  /* ZIGUE-ZAGUE: a ficha par troca as colunas de lado.
     `order` e nao reordenacao no HTML: a ordem de leitura continua
     texto -> ilustracao, que e a ordem certa para quem ouve a pagina e
     para quem navega por teclado. No celular a coluna e uma so e o
     zigue-zague simplesmente nao existe. */
  .prod:nth-of-type(even) .prod-in { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
  .prod:nth-of-type(even) .prod-tela { order: -1;
    border-left: 0; border-right: 1px solid var(--borda); }
}

/* ============================================================
   COMO TRABALHAMOS
   ============================================================ */
/* A malha e desenhada por sombra de cada celula, nunca por um fundo atras
   da grade: assim uma linha incompleta nao deixa um retangulo cinza sobrando. */
.blocos { display: grid; gap: 0; background: var(--fundo);
  border: 1px solid var(--borda); margin-top: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.bloco { background: var(--fundo); padding: var(--recuo);
  box-shadow: 1px 0 0 var(--borda), 0 1px 0 var(--borda); }
.bloco i { font: 500 11px/1 var(--mono); color: var(--texto-3); font-style: normal;
  letter-spacing: .1em; }
.bloco h3 { font: 600 var(--t-lg)/1.3 var(--fonte-titulo); margin: var(--e-4) 0 var(--e-3); }
.bloco p { color: var(--texto-2); margin: 0; line-height: 1.64; }

.princ { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-top: var(--e-8); }
.princ > div { border-top: 2px solid var(--texto); padding-top: var(--e-4); }
.princ h3 { font: 600 var(--t-md)/1.3 var(--fonte-titulo); margin: 0 0 7px; }
.princ p { color: var(--texto-2); margin: 0; font-size: var(--t-sm); line-height: 1.6; }

/* ============================================================
   A CHAMADA FINAL
   ============================================================ */
/* O ar vertical da chamada continua maior -- ela e o fim da pagina e
   precisa respirar. O recuo HORIZONTAL entra na mesma regua de todo
   componente: era 66px, contra 38 do resto. */
.chamada { background: var(--topo-fundo); color: #f2f2f2;
  /* A moldura de 1px existe para a chamada cair na MESMA regua dos
     outros componentes: eles tem borda, ela nao tinha, e o texto dela
     nascia 1px a esquerda de todo o resto. Da cor do proprio fundo --
     invisivel, e alinhada. */
  border: 1px solid var(--topo-fundo);
  padding: clamp(34px, 5vw, 66px) var(--recuo); position: relative; overflow: hidden; }
.chamada::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 44px 44px; }
.chamada > * { position: relative; }
.chamada .rot { color: #9a9aa8; }
.chamada .rot::before { background: var(--wr-azul-300); }
.chamada h2 { font: 700 clamp(25px, 3.2vw, 42px)/1.1 var(--fonte-titulo); margin: var(--e-4) 0;
  letter-spacing: -.025em; max-width: var(--medida-titulo); }
.chamada p { color: #c2c2cf; max-width: var(--medida); line-height: 1.64; margin: 0 0 var(--e-6); }
.chamada .bt-2 { color: #f2f2f2; border-color: #4a4a57; }
.chamada .bt-2:hover { background: #f2f2f2; color: #161616; border-color: #f2f2f2; }

/* ---------- cabeçalho de seção ----------
   DUAS COLUNAS na tela larga: título à esquerda, texto à direita.
   Empilhados, o título ocupava a metade esquerda e a metade direita da
   faixa ficava vazia -- e a lista logo abaixo usa a largura inteira, o
   que fazia o vazio saltar. Lado a lado, o mesmo conteúdo cabe em
   menos altura E preenche a linha. É o carimbo de uma prancha: nome à
   esquerda, nota à direita. */
.cab { max-width: var(--medida); }
.cab h2 { font: 700 clamp(26px, 3.4vw, 42px)/1.1 var(--fonte-titulo); letter-spacing: -.028em;
  margin: var(--e-3) 0 var(--e-3); text-wrap: balance; }
.cab p { color: var(--texto-2); font-size: var(--t-lg); line-height: 1.62; margin: 0; }
/* 900px é o mesmo ponto em que o menu vira gaveta: acima disso há
   largura para duas colunas de cabeçalho, abaixo não há. */
@media (min-width: 900px) {
  /* Meio a meio, com o respiro padrão. A primeira versão usava
     1.04fr/1fr e o texto caía a 677,2px -- 0,8px do bloco logo abaixo,
     a 678. Quase-encontro é o pior desalinhamento que existe:
     proposital demais para parecer acaso, perto demais para ler como
     outra coluna. Meio a meio o olho confere sozinho. */
  .cab { max-width: none; display: grid; align-items: start;
    grid-template-columns: 1fr 1fr; column-gap: var(--e-6); }
  .cab .rot { grid-column: 1; }
  .cab h2  { grid-column: 1; margin: var(--e-3) 0 0; max-width: var(--medida-titulo); }
  /* O texto começa na linha do rótulo, e não embaixo do título: é
     assim que as duas colunas terminam juntas em vez de uma sobrar. */
  .cab p   { grid-column: 2; grid-row: 1 / span 2; max-width: var(--medida);
    padding-top: 2px; }
}

/* ---------- texto corrido ---------- */
.texto { max-width: var(--medida); }
.texto p { font-size: var(--t-lg); line-height: 1.72; color: var(--texto-2); }
.duas { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px, 6vw, 88px);
  align-items: start; }
.lado-fixo { position: sticky; top: calc(var(--topo-h) + var(--e-6)); }

/* ---------- formulário ---------- */
.form-grade { display: grid; gap: var(--e-4); grid-template-columns: 1fr 1fr; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3); }
.campo input, .campo select, .campo textarea { font: 400 var(--t-md)/1.5 var(--fonte-texto);
  color: var(--texto); background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 2px; padding: 11px 13px; transition: border-color .14s, box-shadow .14s; }
.campo textarea { min-height: 124px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none;
  border-color: var(--wr-azul); box-shadow: inset 0 0 0 1px var(--wr-azul); }
.campo .dica { font-size: var(--t-xs); color: var(--texto-3); line-height: 1.5; }
.mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lateral-cx { border: 1px solid var(--borda); padding: var(--recuo); }
.lateral-cx + .lateral-cx { border-top: 0; }
.lateral-cx h3 { font: 600 var(--t-md)/1.3 var(--fonte-titulo); margin: var(--e-3) 0 var(--e-2); }
.lateral-cx p { color: var(--texto-2); margin: 0 0 var(--e-4); font-size: var(--t-sm); line-height: 1.6; }
.lista-lig { display: flex; flex-direction: column; gap: 8px; }
.lista-lig a { color: var(--texto-2); text-decoration: none; font: 500 var(--t-sm)/1 var(--mono);
  width: fit-content; border-bottom: 1px solid var(--borda); padding-bottom: 3px; transition: .14s; }
.lista-lig a:hover { color: var(--wr-azul); border-color: var(--wr-azul); }
:root[data-theme="dark"] .lista-lig a:hover { color: var(--wr-azul-300); border-color: var(--wr-azul-300); }

/* ---------- rodapé ---------- */
.pe { border-top: 1px solid var(--borda); padding: var(--e-10) 0 var(--e-5); }
.pe-in { max-width: var(--largura-larga); margin: 0 auto; padding: 0 var(--e-5);
  display: grid; gap: var(--e-8); grid-template-columns: 1.7fr 1fr 1fr 1fr; }
.pe-marca .wr-logo-horizontal { width: 104px; height: 24px; color: var(--texto-2); }
.pe-frase { color: var(--texto-3); font: 500 11px/1.7 var(--mono); margin: var(--e-4) 0 0;
  /* 13rem, e nao 30ch: mesma familia de medida do resto. Aqui e uma
     coluna de rodape, e nao prosa -- por isso nao usa --medida. */
  max-width: 13rem; letter-spacing: .04em; }
.pe-col { display: flex; flex-direction: column; gap: 9px; }
.pe-col h2 { font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-3); margin: 0 0 5px; }
.pe-col a { color: var(--texto-2); text-decoration: none; font-size: var(--t-sm);
  width: fit-content; transition: color .14s; }
.pe-col a:hover { color: var(--wr-azul); }
:root[data-theme="dark"] .pe-col a:hover { color: var(--wr-azul-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pe-col a:hover { color: var(--wr-azul-300); }
}
.pe-cidade { color: var(--texto-3); font-size: var(--t-sm); margin: 4px 0 0; }
.pe-fim { max-width: var(--largura-larga); margin: var(--e-8) auto 0;
  padding: var(--e-5) var(--e-5) 0; border-top: 1px solid var(--borda);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e-3);
  color: var(--texto-3); font: 500 11px/1 var(--mono); letter-spacing: .04em; }

/* ============================================================
   O MOVIMENTO
   ============================================================
   Duas implementações do mesmo efeito, nunca as duas ao mesmo tempo:
   timeline de rolagem onde o navegador tem (roda na composição), e
   IntersectionObserver onde não tem. Sob `prefers-reduced-motion`,
   nada se mexe -- e a página aparece inteira.

   O movimento aqui é de DESENHO SENDO TRAÇADO: a linha corre, o
   número aparece, a peça entra. Não é o "fade up" de todo mundo.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .sobe { opacity: 0; transform: translateY(14px);
    transition: opacity .45s ease-out, transform .45s cubic-bezier(.2,.8,.2,1); }
  .sobe.vista { opacity: 1; transform: none; }
  .item { opacity: 0; transform: translateX(-10px);
    transition: opacity .38s ease-out, transform .38s cubic-bezier(.2,.8,.2,1); }
  .item.vista { opacity: 1; transform: none; }
  .item:nth-child(2n) { transition-delay: .03s; }
  .item:nth-child(3n) { transition-delay: .06s; }
  /* a cota se desenha: a linha cresce do meio para fora */
  .cota::before { transform: scaleX(0); transform-origin: 50% 50%;
    transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .cota.vista::before { transform: none; }

  @supports (animation-timeline: view()) {
    .sobe, .item { opacity: 1; transform: none; transition: none;
      animation: entra linear both; animation-timeline: view();
      animation-range: entry 6% cover 22%; }
    .item { animation-name: entra-lado; }
    @keyframes entra      { from { opacity: 0; transform: translateY(16px); } }
    @keyframes entra-lado { from { opacity: 0; transform: translateX(-12px); } }
    .cota::before { animation: risca linear both; animation-timeline: view();
      animation-range: entry 10% cover 28%; }
    @keyframes risca { from { transform: scaleX(0); } to { transform: none; } }
  }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: sai .14s ease-in both; }
  ::view-transition-new(root) { animation: chega .24s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes sai   { to { opacity: 0; } }
  @keyframes chega { from { opacity: 0; transform: translateY(6px); } }
}

@media (prefers-reduced-motion: reduce) {
  .sobe, .item { opacity: 1 !important; transform: none !important; animation: none !important; }
  /* A marca fica, o movimento sai: quem pediu menos movimento pediu
     menos movimento, e nao menos marca. */
  .marca-fundo, .marca-fundo::before { transition: none !important; animation: none !important; }
  .marca-fundo { transform: none !important; }
  .marca-fundo::before { transform: rotate(-7deg) !important; }
  .cota::before { transform: none !important; animation: none !important; }
  * { scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }

/* ---------- telas menores ---------- */
@media (max-width: 1080px) {
  .duas { grid-template-columns: 1fr; }
  .lado-fixo { position: static; }
  .estacao { grid-template-columns: 76px 1fr; }
  .estacao ul { grid-column: 2; }
  .pe-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .gaveta-bt { display: flex; }
  .topo-dir { margin-left: auto; }
  .item { grid-template-columns: 58px 1fr; row-gap: 4px; }
  .item span { grid-column: 2; }
  .item em { grid-column: 2; }
}
/* O formulário vira coluna única só no CELULAR. Colapsar já em 900px
   fazia oito campos empilhados num tablet, com metade da largura vazia
   ao lado -- e a página do contato ficava com o dobro da altura que
   precisava. */
@media (max-width: 560px) {
  .form-grade { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .cotas { grid-template-columns: 1fr; gap: var(--e-4); }
  .pe-in { grid-template-columns: 1fr; gap: var(--e-6); }
  .idi { display: none; }
  .estacao { grid-template-columns: 1fr; gap: var(--e-4); }
  .estacao ul { grid-column: 1; }
  .estacao-n { font-size: 40px; }
}
@media print {
  .topo, .gaveta, .pe, .wr-tema, .papel::before { display: none !important; }
}

/* Página interna não tem botões na capa, e sobrava um vão morto entre
   o subtítulo e a primeira seção. `:has()` resolve sem classe nova. */
.capa:not(:has(.acoes)) { padding-bottom: clamp(26px, 3.5vw, 52px); }
.capa:not(:has(.acoes)) h1 { font-size: clamp(32px, 4.6vw, 58px); }