/* Estilos dos templates de templates/Sections.jsx (ver AGENTS.md, regra
   templates-first). Hoje só a página /sobre/ os consome. Grades, fios e
   degradês moram aqui e não no JSX: o prerender serializa o atributo `style`
   do React e rejeita declaração vazia, que é o que o Chromium produz quando
   `background` (atalho) convive com `background-clip` no mesmo estilo
   inline. Em classe, o problema não existe. */

.grad-text{
  background-image:var(--gradient-main);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.sobre-hero{
  padding:120px 0 96px;
  background:radial-gradient(120% 130% at 12% 0%,var(--bg-card) 0%,var(--bg-primary) 55%);
  position:relative;
  overflow:hidden;
}
.sobre-stamp{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px;margin-bottom:24px;
  border:1px solid rgba(76,204,17,.3);border-radius:var(--radius-pill);
  background:rgba(4,34,44,.6);
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--green-400);
}
.sobre-stamp-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--green-500);box-shadow:0 0 8px var(--green-500);
}
.sobre-h1{
  font-family:var(--font-display);font-size:var(--fs-display);font-weight:var(--fw-display);
  text-transform:uppercase;letter-spacing:var(--ls-display);line-height:var(--lh-display);
  color:var(--text-primary);margin:0 0 20px;
}
.sobre-lead{
  font-size:var(--fs-body-lg);color:var(--text-secondary);
  line-height:var(--lh-relaxed);max-width:62ch;margin:0;text-wrap:pretty;
}

.sobre-h2{
  font-family:var(--font-display);font-size:var(--fs-section-title);font-weight:var(--fw-display);
  text-transform:uppercase;letter-spacing:var(--ls-display);line-height:var(--lh-display);
  color:var(--text-primary);margin:0 0 16px;
}
.sobre-rec{padding:120px 0;background:var(--bg-secondary)}
.rec-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start;margin-top:44px}
.rec-figure{
  display:block;font-family:var(--font-display);font-size:6.4rem;font-weight:900;
  line-height:.82;letter-spacing:var(--ls-display);color:var(--text-primary);
  font-variant-numeric:tabular-nums;
}
.rec-figure-sm{font-size:3.2rem}
.rec-label{
  display:block;margin-top:10px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--text-muted);
}
.rec-rule{border:0;height:1px;background:var(--border);margin:24px 0}
.rec-note{font-size:var(--fs-body-sm);color:var(--text-secondary);line-height:var(--lh-relaxed);margin:24px 0 0;text-wrap:pretty}

.rec-table{width:100%;border-collapse:collapse;text-align:left}
.rec-table th{
  padding:0 0 10px;border-bottom:1px solid var(--border-strong);
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--text-muted);
}
.rec-table td{padding:14px 0;border-bottom:1px solid var(--border);vertical-align:baseline}
.rec-table tr:last-child td{border-bottom:0}
.rec-veh{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-primary)}
.rec-loc{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);white-space:nowrap}
.rec-status{
  font-family:var(--font-mono);font-size:.65rem;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:var(--green-500);text-align:right;white-space:nowrap;
}

@media (max-width:900px){
  .rec-wrap{grid-template-columns:1fr;gap:40px}
}
/* A tabela vira lista de fichas. Os três dados continuam todos na tela: o
   celular recebe a mesma informação, só reorganizada para caber. */
@media (max-width:560px){
  .rec-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .rec-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--border)}
  .rec-table td{padding:0;border:0}
  .rec-veh{grid-column:1;grid-row:1}
  .rec-status{grid-column:2;grid-row:1;text-align:right}
  .rec-loc{grid-column:1 / -1;grid-row:2}
}

.sobre-empresa{padding:120px 0;background:var(--bg-primary)}
.empresa-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:stretch;margin-top:44px}
.empresa-p{font-size:var(--fs-body);color:var(--text-secondary);line-height:var(--lh-relaxed);margin:0 0 16px;text-wrap:pretty}
.empresa-p:last-child{margin-bottom:0}

.ficha{
  display:flex;flex-direction:column;height:100%;
  padding:28px;border:1px solid var(--border);border-radius:var(--radius-2xl);
  background:linear-gradient(160deg,var(--bg-card),var(--bg-secondary));
}
.ficha-title{
  padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--border-strong);
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:var(--cyan-400);
}
/* Duas colunas: é isso que faz o cartão acabar junto com o texto ao lado. Em
   coluna única ele descia muito além e abria um buraco embaixo à esquerda. */
.ficha-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin:0;flex:1;align-content:start}
.ficha-item-largo{grid-column:1 / -1}
.ficha-grid dt{
  margin-bottom:5px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-muted);
}
.ficha-grid dd{margin:0;font-size:.9rem;font-weight:var(--fw-medium);line-height:1.4;color:var(--text-primary)}
.ficha-foot{
  display:flex;align-items:center;gap:10px;
  margin-top:22px;padding-top:16px;border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--green-400);
}

@media (max-width:900px){
  .empresa-wrap{grid-template-columns:1fr;gap:36px}
}
@media (max-width:480px){
  .ficha-grid{grid-template-columns:1fr}
}

.sobre-tl{padding:120px 0;background:var(--bg-secondary)}
.tl-rail{
  position:relative;display:grid;grid-template-columns:repeat(6,1fr);
  list-style:none;margin:44px 0 0;padding:0;
}
.tl-rail::before{
  content:'';position:absolute;left:0;right:0;top:9px;height:1px;
  background:linear-gradient(90deg,var(--green-500),var(--cyan-400));
}
.tl-node{position:relative;padding-right:16px}
.tl-dot{
  position:relative;z-index:2;display:block;width:19px;height:19px;border-radius:50%;
  background:var(--bg-secondary);border:2px solid var(--cyan-400);
}
.tl-dot::after{
  content:'';position:absolute;inset:0;margin:auto;
  width:6px;height:6px;border-radius:50%;background:var(--cyan-400);
}
.tl-node-atual .tl-dot{border-color:var(--green-500);box-shadow:0 0 0 5px rgba(76,204,17,.14)}
.tl-node-atual .tl-dot::after{background:var(--green-500)}
.tl-when{
  display:block;margin:18px 0 6px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--green-400);
}
.tl-what{display:block;font-size:var(--fs-body-sm);color:var(--text-secondary);line-height:1.45}
.tl-node-atual .tl-what{color:var(--text-primary);font-weight:var(--fw-semibold)}

/* O trilho gira 90 graus. Os seis marcos continuam todos lá: o celular recebe
   a mesma cronologia, na vertical. */
@media (max-width:820px){
  .tl-rail{grid-template-columns:1fr}
  .tl-rail::before{left:9px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,var(--green-500),var(--cyan-400))}
  .tl-node{padding:0 0 26px 36px}
  .tl-node:last-child{padding-bottom:0}
  .tl-dot{position:absolute;left:0;top:2px}
  .tl-when{margin-top:0}
}

.sobre-central{padding:120px 0;background:var(--bg-primary)}
.central-pontos{display:flex;flex-direction:column;gap:24px;margin-top:32px}
.central-ponto{display:flex;gap:16px;align-items:flex-start}
/* O `font-size` é o tamanho do ícone: o SVG mede 1em, então sem esta linha ele
   herdava os 16px do corpo do texto e ficava com 16 de desenho dentro de um
   chip de 44, com o traço em 0,70px. O kit inteiro foi julgado na folha de
   contato, que desenha a 32; em produção nada chegava perto disso, e a régua de
   valores da /sobre/ publicava manchinhas. 24px põe o traço em 1,05px, acima do
   pixel, e ocupa 55% do chip, que é a proporção de ícone em ladrilho. Olhados
   16, 22, 24, 26 e 28 lado a lado a 1x: em 16 a antena e o headset são borrão,
   de 26 para cima o desenho começa a encostar na borda do chip.
   Ver .valor-icone e .palco-evento-icone: os três andam juntos. */
.central-icone{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:var(--radius-md);font-size:24px;
  background:rgba(16,193,213,.08);border:1px solid rgba(16,193,213,.15);color:var(--cyan-400);
}
.central-titulo{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-primary);margin:0 0 4px}
.central-texto{font-size:var(--fs-body-sm);color:var(--text-secondary);line-height:1.55;margin:0}
.central-fone{
  display:inline-flex;align-items:center;gap:10px;margin-top:32px;
  font-family:var(--font-mono);font-size:1.05rem;font-weight:600;
  letter-spacing:1px;color:var(--green-400);text-decoration:none;
}
.central-fone:hover{color:var(--green-300)}

.sobre-clientes{padding:120px 0;background:var(--bg-secondary)}
.clientes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:44px;background:var(--border)}
.cliente-nome{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:92px;padding:18px 24px;
  background:var(--bg-secondary);
}
.cliente-rotulo{
  font-family:var(--font-display);font-size:1.25rem;font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.01em;line-height:1.08;
  color:var(--text-primary);text-wrap:balance;
}
.cliente-glyph{
  flex:none;color:var(--green-500);
  transition:color var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
/* O traçado se desenha quando a seção entra na tela. `pathLength="1"` normaliza
   todos os caminhos, então um mesmo par dasharray/dashoffset serve para os
   nove glifos, sem medir comprimento de curva. */
.cliente-glyph path{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 900ms var(--ease-out);
  transition-delay:var(--glyph-delay,0ms);
}
.reveal.is-visible .cliente-glyph path{stroke-dashoffset:0}
.cliente-nome:hover .cliente-glyph{color:var(--cyan-400);transform:translateX(-3px)}

@media (prefers-reduced-motion:reduce){
  .cliente-glyph path{stroke-dashoffset:0;transition:none}
  .cliente-glyph{transition:none}
}
.clientes-fecho{display:flex;align-items:baseline;gap:14px;margin-top:40px;flex-wrap:wrap}
.clientes-total{
  font-family:var(--font-display);font-size:2.6rem;font-weight:var(--fw-extrabold);
  line-height:1;color:var(--green-400);font-variant-numeric:tabular-nums;
}
.clientes-nota{font-size:var(--fs-body-lg);color:var(--text-secondary)}

/* Nove clientes só fecham linha em 3 colunas ou em 1: nove não é divisível
   por 2, então um estágio intermediário de 2 colunas sempre sobra uma célula
   vazia na última linha, e essa célula vazia vira um retângulo sólido da cor
   do fio da grade (`background:var(--border)` + `gap:1px`). Não reintroduza
   um corte de 2 colunas aqui. */
@media (max-width:700px){
  .clientes-grid{grid-template-columns:1fr}
  .cliente-nome{min-height:0;padding:16px 0}
  .cliente-rotulo{font-size:1.1rem}
}

/* A largura acompanha a viewport para o corte na borda continuar sendo um
   corte em qualquer tela, em vez de virar a imagem inteira encolhida. */
.sobre-hero-relief{
  position:absolute;
  right:clamp(-160px,-8vw,-60px);
  top:50%;
  transform:translateY(-50%);
  width:clamp(320px,42vw,620px);
  height:auto;
  opacity:.09;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.sobre-hero .wrap{position:relative;z-index:1}

/* No celular o relevo desce para trás da régua de medidas, onde há espaço, em
   vez de brigar com o título. Continua na tela: é atmosfera, não conteúdo
   escondido. */
@media (max-width:820px){
  .sobre-hero-relief{
    top:auto;
    bottom:-40px;
    right:-70px;
    transform:none;
    width:300px;
    opacity:.07;
  }
}

.sobre-valores{padding:120px 0;background:var(--bg-primary)}
.mv-wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:44px}
.mv-bloco{padding-top:20px;border-top:2px solid var(--green-500)}
.mv-titulo{
  font-family:var(--font-display);font-size:1.6rem;font-weight:var(--fw-extrabold);
  text-transform:uppercase;letter-spacing:var(--ls-display);color:var(--text-primary);margin:0 0 12px;
}
.mv-texto{font-size:var(--fs-body);color:var(--text-secondary);line-height:var(--lh-relaxed);margin:0;text-wrap:pretty}
.valores-lista{margin:56px 0 0;border-top:1px solid var(--border)}
.valor-linha{
  display:grid;
  grid-template-columns:44px minmax(180px,220px) minmax(0,1fr);
  gap:20px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--border);
  position:relative;
}
/* O traço verde na borda de cima é a mesma abertura das células de números da
   home. Repete o gesto em vez de inventar um enfeite novo para esta seção. */
.valor-linha::before{
  content:'';position:absolute;top:-1px;left:0;width:44px;height:2px;background:var(--green-500);
}
/* Mesmo chip de 44 do .central-icone, mesmo tamanho de ícone: ver o porquê lá. */
.valor-icone{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-md);font-size:24px;
  background:rgba(76,204,17,.08);border:1px solid rgba(76,204,17,.18);color:var(--green-400);
}
.valor-nome{
  font-family:var(--font-display);font-size:1.5rem;font-weight:var(--fw-extrabold);
  text-transform:uppercase;letter-spacing:var(--ls-display);line-height:1.05;
  color:var(--text-primary);margin:6px 0 0;
}
.valor-texto{
  font-size:var(--fs-body);color:var(--text-secondary);
  line-height:var(--lh-relaxed);margin:8px 0 0;max-width:62ch;text-wrap:pretty;
}

@media (max-width:820px){
  .mv-wrap{grid-template-columns:1fr;gap:36px}
}

@media (max-width:820px){
  .valor-linha{grid-template-columns:44px minmax(0,1fr);gap:14px 16px;padding:22px 0}
  .valor-nome{font-size:1.25rem;margin:8px 0 0}
  /* O texto passa para a linha de baixo, ocupando as duas colunas, para não
     ficar espremido ao lado do ícone. Nada some. */
  .valor-texto{grid-column:1 / -1;margin:10px 0 0}
}

/* Botões de loja do TextoComPainel. Mesma altura e mesmo raio do .central-fone
   logo abaixo, porque os três são a mesma coisa: a saída da coluna de texto.
   Envolvem em vez de espremer: em 390px os dois ficam um sobre o outro em
   largura cheia, e nenhum nome de loja é abreviado. */
.central-acoes{
  display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 4px;
}
.central-loja{
  display:inline-flex;align-items:center;gap:12px;
  padding:10px 18px;border-radius:var(--radius-lg);
  border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:#fff;text-decoration:none;
  transition:border-color var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.central-loja:hover{
  border-color:var(--green-500);background:rgba(76,204,17,.08);
  color:#fff;transform:translateY(-2px);
}
.central-loja i{font-size:1.5rem;color:var(--green-400)}
.central-loja-texto{display:flex;flex-direction:column;line-height:1.15}
.central-loja-topo{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-muted);
}
.central-loja-nome{font-size:.95rem;font-weight:600}

@media (max-width:480px){
  .central-acoes{flex-direction:column}
  .central-loja{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .central-loja,
  .central-loja:hover{transition:none;transform:none}
}

/* ---- PalcoDeCameras ---------------------------------------------------- */

.palco-cam{
  padding:120px 0;
  background:var(--bg-secondary);
}
.palco-lead{
  font-size:var(--fs-body-lg);color:var(--text-secondary);
  line-height:var(--lh-relaxed);max-width:62ch;margin:16px 0 48px;text-wrap:pretty;
}

/* `stretch`, e não `start`, pelo mesmo motivo de .empresa-wrap: com três
   eventos a coluna da direita terminava uns 270px antes do vídeo e deixava um
   rombo vazio ao lado do palco em telas largas. O conteúdo dentro do cartão
   continua alinhado ao topo sozinho, porque .palco-eventos é bloco. */
.palco-wrap{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:28px;align-items:stretch;
}

.palco-abas{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.palco-aba{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  background:rgba(4,34,44,.55);
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;
  color:var(--text-secondary);cursor:pointer;transition:200ms;
}
.palco-aba:hover{color:#fff;border-color:var(--border-strong)}
.palco-aba.is-ativa{
  color:var(--navy-900);background:var(--green-500);
  border-color:var(--green-500);box-shadow:var(--shadow-glow-green);
}
.palco-aba:focus-visible{outline:2px solid var(--cyan-400);outline-offset:3px}
/* O caso mais apertado do kit: o rótulo da aba é mono de 0,72rem, e o ícone
   herdando isso saía com 11,5px de desenho e 0,50px de traço, ou seja, meio
   pixel. Aqui o tamanho vai só no desenho, porque o invólucro é a pílula com o
   texto dentro. 16px foi escolhido olhando 11,5, 14, 16, 18 e 20 lado a lado a
   1x: até 14 a estrada ainda é borrão, em 16 as duas margens e o tracejado se
   separam, e de 18 para cima o ícone passa a pesar mais que o rótulo, que é
   quem manda na pílula. Continua sendo o ícone mais fino que publicamos, com
   0,70px de traço; é o preço de conviver com um rótulo de 0,72rem. */
.palco-aba .icone{font-size:16px}

.palco-quadro{
  border:1px solid var(--border);border-radius:var(--radius-3xl);
  background:var(--navy-900);box-shadow:var(--shadow-media);overflow:hidden;
}
/* Envolve em vez de espremer: no celular o nome da câmera, o tipo e o botão de
   pausa não cabem numa linha só, e nenhum deles pode sumir. */
.palco-barra{
  display:flex;align-items:center;justify-content:space-between;gap:12px 16px;
  flex-wrap:wrap;
  padding:12px 18px;border-bottom:1px solid var(--border);
  background:rgba(4,34,44,.75);
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;
}
.palco-cam-nome{display:inline-flex;align-items:center;gap:9px;color:var(--text-primary)}
.palco-barra-dir{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.palco-cam-tipo{color:var(--text-muted)}
/* O controle de pausa mora na barra mono junto do nome da câmera, e não sobre
   a imagem: WCAG 2.2.2 pede que dê para parar o vídeo a qualquer momento, não
   só quando ele já está parado. Herda a tipografia da barra de propósito. */
.palco-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  background:rgba(4,34,44,.55);
  font-family:inherit;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;text-transform:inherit;
  color:var(--text-secondary);cursor:pointer;transition:200ms;
}
.palco-toggle:hover{color:#fff;border-color:var(--border-strong)}
.palco-toggle i{color:var(--green-400)}
.palco-toggle:focus-visible{outline:2px solid var(--cyan-400);outline-offset:3px}
.palco-rec{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--green-500);box-shadow:0 0 8px var(--green-500);
  animation:palco-pulso 1.8s ease-in-out infinite;
}
@keyframes palco-pulso{0%,100%{opacity:1}50%{opacity:.25}}

.palco-tela{position:relative;background:#000}
.palco-video{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover}
.palco-play{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:12px;
  border:0;background:rgba(4,34,44,.55);
  color:var(--text-primary);font-family:var(--font-sans);
  font-size:1rem;font-weight:600;cursor:pointer;
}
.palco-play i{font-size:1.4rem;color:var(--green-400)}

.palco-eventos{
  border:1px solid var(--border);border-radius:var(--radius-3xl);
  background:var(--bg-card);padding:28px;
}
.palco-eventos-titulo{
  display:block;margin-bottom:20px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--green-400);
}
.palco-lista{list-style:none;margin:0;padding:0}
.palco-evento{
  display:flex;align-items:center;gap:14px;
  padding:16px 0;border-top:1px solid var(--border);
  color:var(--text-primary);font-size:var(--fs-body);line-height:1.4;
}
.palco-evento:first-child{border-top:0;padding-top:0}
.palco-evento:last-child{padding-bottom:0}
/* Chip de 40, ícone de 22: dois a menos que os chips de 44 dos outros dois,
   pela mesma razão de proporção. Ver .central-icone para o porquê da linha. */
.palco-evento-icone{
  width:40px;height:40px;flex:none;border-radius:var(--radius-md);font-size:22px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(76,204,17,.08);border:1px solid rgba(76,204,17,.18);
  color:var(--green-400);
}

.palco-selos{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:28px;
}
.palco-selo{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:rgba(4,34,44,.45);
  font-size:var(--fs-body-sm);color:var(--text-secondary);
}
/* Aqui a cor fica no ícone, e não no invólucro como em .central-icone,
   .valor-icone e .palco-evento-icone: aqueles três envolvem só o ícone, e o
   .palco-selo é a pílula inteira, texto junto. Pintar o invólucro pintaria
   também o texto, que é --text-secondary de propósito. Os dois seletores
   porque o selo convive com os dois: nome com desenho vira .icone, nome sem
   desenho ainda cai no <i> do Font Awesome, e os dois têm que sair verdes. */
.palco-selo i,
.palco-selo .icone{color:var(--green-400)}
/* O tamanho vai só no desenho, e não no invólucro como em .central-icone: aqui
   o invólucro é a pílula inteira e mexer no font-size dela mexeria no texto.
   Sem esta linha o ícone herdava os 14,4px do texto do selo e o traço saía a
   0,63px, e as duas ondas do tower-broadcast fechavam numa mancha só. 18px é
   1,25 vez o texto do selo, que é a proporção normal de ícone ao lado de
   rótulo; 20 ainda cabe na pílula mas já domina o texto, e 22 quebra a régua de
   selos em mais linhas. O <i> do Font Awesome fica de fora de propósito: ele só
   aparece quando falta desenho, e glifo de fonte já é sólido nesse tamanho. */
.palco-selo .icone{font-size:18px}
.palco-nota{
  margin:20px 0 0;
  font-size:var(--fs-caption);color:var(--text-muted);line-height:1.5;
}

@media (max-width:900px){
  .palco-wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  .palco-cam{padding:80px 0}
  .palco-aba{flex:1 1 auto;justify-content:center}
  .palco-eventos{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  .palco-rec{animation:none}
}

/* ---- GradeDeVideos ------------------------------------------------------ */

.grade-video{padding:120px 0;background:var(--bg-primary)}
.grade-video-grid{margin-top:44px}
.grade-video-cartao{display:flex;flex-direction:column}
.grade-video-legenda{padding:20px 22px}
.grade-video-titulo{
  font-family:var(--font-display);font-size:1.05rem;font-weight:var(--fw-extrabold);
  text-transform:uppercase;letter-spacing:var(--ls-display);color:var(--text-primary);margin:0 0 8px;
}
.grade-video-texto{font-size:var(--fs-body);color:var(--text-secondary);line-height:var(--lh-relaxed);margin:0;text-wrap:pretty}

@media (max-width:560px){
  .grade-video{padding:80px 0}
}

/* ---- QuadroDePlanos ---------------------------------------------------- */

.planos{padding:120px 0;background:var(--bg-secondary)}
.planos-lead{
  font-size:1.125rem;color:var(--text-secondary);max-width:640px;
  line-height:1.7;margin:16px 0 0;text-wrap:balance;
}

/* `auto-fit` com mínimo de 280px, e não um número fixo de colunas: o quadro
   nasce com dois planos e o dia em que virar três não pode exigir CSS novo. */
.planos-grade{
  list-style:none;margin:56px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;
}
.plano{
  display:flex;flex-direction:column;
  padding:32px;border-radius:var(--radius-2xl);
  border:1px solid var(--border);background:var(--bg-primary);
}
/* A borda em degradê vai por classe, nunca por `background` inline junto de
   `background-clip` (ver AGENTS.md): o Chromium serializa como declaração
   vazia e o prerender derruba o build. */
.plano-destaque{
  border:1px solid transparent;
  background:linear-gradient(var(--bg-primary),var(--bg-primary)) padding-box,
             var(--gradient-main) border-box;
}
/* Slot de altura mínima: reservado em todo cartão quando qualquer plano do
   quadro tem selo (ver `algumSelo` em QuadroDePlanos, Sections.jsx), para
   que nome, preço e cada linha de especificação fiquem na mesma altura
   entre colunas, com ou sem selo naquele cartão específico. A margem que
   separava o selo do nome do plano mora aqui, não em `.plano-selo`, para
   valer também quando o slot está vazio. 27.61px é a altura renderizada de
   um `.plano-selo` de uma linha só (medida com Playwright,
   `getBoundingClientRect()`) e é um piso, não um teto: um selo que quebra
   linha numa largura estreita cresce o slot em vez de colidir com o nome do
   plano abaixo. Mudar o padding ou o font-size do selo exige medir de novo
   e atualizar este valor. */
.plano-selo-faixa{
  display:block;align-self:flex-start;
  min-height:27.61px;margin-bottom:16px;
}
.plano-selo{
  padding:5px 12px;border-radius:var(--radius-pill);
  background:rgba(76,204,17,.12);border:1px solid rgba(76,204,17,.3);
  font-family:var(--font-mono);font-size:.65rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--green-400);
}
.plano-nome{
  font-size:1rem;font-weight:600;color:#fff;margin:0 0 12px;
  letter-spacing:.2px;
}
.plano-preco{
  font-family:var(--font-display);font-size:3rem;font-weight:800;
  color:#fff;letter-spacing:var(--ls-display);line-height:1;margin:0;
}
.plano-periodo{
  font-family:var(--font-sans);font-size:1rem;font-weight:500;
  color:var(--text-secondary);letter-spacing:0;margin-left:6px;
}
.plano-adesao{
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.5px;
  color:var(--text-muted);margin:10px 0 0;
}
.plano-specs{margin:24px 0 0;border-top:1px solid var(--border)}
.plano-spec{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.plano-spec dt{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-muted);flex:none;
}
.plano-spec dd{
  margin:0;font-size:.9rem;color:var(--text-secondary);
  text-align:right;line-height:1.4;
}
/* `auto` empurra o botão para o pé do cartão: sem isso, cartões de altura
   diferente terminam com o botão em alturas diferentes. */
.plano-resumo{
  font-size:.9rem;color:var(--text-secondary);line-height:1.6;
  margin:20px 0 24px;
}
.plano-acao{margin-top:auto;width:100%;justify-content:center}

.planos-condicoes{
  list-style:none;margin:40px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;
  border-top:1px solid var(--border);padding-top:28px;
}
.plano-condicao{
  display:flex;align-items:flex-start;gap:12px;
  font-size:.88rem;color:var(--text-secondary);line-height:1.5;
}
/* Chip menor que o .central-icone de 44: aqui a linha é de rodapé, e um chip
   grande faria a condição competir com o preço logo acima. */
.plano-condicao-icone{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:9px;font-size:19px;
  background:rgba(16,193,213,.08);border:1px solid rgba(16,193,213,.15);
  color:var(--cyan-400);
}

.plano-faixa{
  margin-top:40px;padding:32px;border-radius:var(--radius-2xl);
  border:1px solid var(--border);
  background:linear-gradient(140deg,rgba(16,193,213,.06),transparent 60%),var(--bg-primary);
}
.faixa-cabeca{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.faixa-selo{
  padding:5px 12px;border-radius:var(--radius-pill);
  background:rgba(16,193,213,.12);border:1px solid rgba(16,193,213,.3);
  font-family:var(--font-mono);font-size:.65rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--cyan-400);
}
.faixa-nome{font-size:1.35rem;font-weight:700;color:#fff;margin:0}
.faixa-texto{
  font-size:1rem;color:var(--text-secondary);line-height:1.7;
  margin:16px 0 0;max-width:640px;
}
.faixa-itens{
  display:flex;flex-wrap:wrap;gap:12px 40px;margin:24px 0 0;
}
.faixa-item dt{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--text-muted);
}
.faixa-item dd{margin:4px 0 0;font-size:.9rem;color:#fff}
.faixa-nota{
  font-size:.82rem;color:var(--text-muted);line-height:1.6;
  margin:24px 0 0;max-width:640px;
}
.faixa-acao{margin-top:20px}

.planos-fecho{
  margin:40px 0 0;font-size:.95rem;color:var(--text-secondary);line-height:1.6;
}
.planos-fecho-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--green-400);font-weight:600;text-decoration:none;
}
.planos-fecho-link i{transition:transform var(--dur-slow) var(--ease-out)}
.planos-fecho-link:hover i{transform:translateX(4px)}

@media (max-width:820px){
  .planos{padding:80px 0}
  .plano{padding:26px}
  .plano-faixa{padding:26px}
}
@media (max-width:480px){
  .plano-preco{font-size:2.5rem}
  .plano-spec{flex-direction:column;gap:4px}
  .plano-spec dd{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .planos-fecho-link i,
  .planos-fecho-link:hover i{transition:none;transform:none}
}

/* ---- Icone (templates/Icones.jsx) -------------------------------------- */

/* O ícone nasce visível e só é escondido enquanto espera um Reveal acender.
   O contrário, que é o que .cliente-glyph faz, deixaria invisível para sempre
   todo ícone posto fora de um Reveal, e as abas do palco são exatamente esse
   caso. */
.icone{
  display:inline-block;vertical-align:-.125em;flex:none;
  transition:color var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.icone path{
  stroke-dasharray:1;
  stroke-dashoffset:0;
  transition:stroke-dashoffset 900ms var(--ease-out);
  transition-delay:var(--icone-delay,0ms);
}
.reveal:not(.is-visible) .icone path{stroke-dashoffset:1}

/* O ícone não inventa interação própria: quem dispara é a linha ou o cartão
   que já responde ao mouse, como .cliente-nome faz com o glifo de setor. */
.central-ponto:hover .icone,
.valor-linha:hover .icone,
.palco-evento:hover .icone{color:var(--cyan-400);transform:scale(1.08)}

@media (prefers-reduced-motion:reduce){
  .icone,
  .icone path{transition:none}
  .reveal:not(.is-visible) .icone path{stroke-dashoffset:0}
  .central-ponto:hover .icone,
  .valor-linha:hover .icone,
  .palco-evento:hover .icone{transform:none}
}

/* ---- ConsultaPorDocumento (templates/Sections.jsx) ---------------------- */

/* Área do cliente: o campo de consulta.
   O bloco é estreito de propósito. Um campo só, centralizado, sem nada
   competindo: quem chega aqui já sabe o que quer fazer. */
.consulta{background:var(--bg-primary);padding:120px 0 80px}
.consulta .wrap{max-width:560px;margin:0 auto;padding:0 24px;text-align:center}
.consulta-titulo{font-family:var(--font-display);font-size:var(--fs-section-title);font-weight:800;text-transform:uppercase;color:#fff;margin:0 0 16px;letter-spacing:var(--ls-display);line-height:.98}
.consulta-lead{font-size:1.0625rem;color:var(--text-secondary);margin:0 0 36px;line-height:1.6}
.consulta-forma{display:flex;flex-direction:column;gap:16px;text-align:left}
.consulta-campo{display:flex;flex-direction:column;gap:8px}
.consulta-rotulo{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.consulta-entrada{width:100%;box-sizing:border-box;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:16px 18px;color:#fff;font-size:1.25rem;font-family:var(--font-mono);letter-spacing:.04em;transition:border-color .2s,box-shadow .2s}
.consulta-entrada::placeholder{color:var(--text-muted);letter-spacing:.04em}
.consulta-entrada:focus{outline:none;border-color:var(--green-500);box-shadow:var(--focus-ring)}
.consulta-entrada:disabled{opacity:.6}
.consulta-entrada-erro{border-color:var(--danger)}
.consulta-erro{margin:0;color:var(--danger);font-size:.9375rem}
.consulta-desafio:empty{display:none}
.consulta-acao{width:100%;justify-content:center}
.consulta-aviso{margin:28px 0 0;color:var(--text-secondary);font-size:1rem;line-height:1.6;text-align:center}
@media (max-width:600px){
  .consulta{padding:96px 0 64px}
  .consulta-entrada{font-size:1.125rem}
}

/* Texto que só existe para leitor de tela: mesma técnica de .rec-table
   thead, sem duplicar aqui a decisão de como esconder. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Ícone de carregamento (IconeRastreando, em Sections.jsx): a via rola
   para os lados, dois "veículos" percorrem o trajeto em sequência, e um
   radar pulsa no destino. `currentColor` puxa a cor de texto de quem o usa
   (botão primário ou pill verde da fatura), sem precisar de variante. */
.rastreio-icone{display:inline-block;vertical-align:middle;overflow:visible;color:currentColor}
.rastreio-icone-md{width:64px;height:15px}
.rastreio-icone-sm{width:46px;height:11px}
.rastreio-via{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-dasharray:4 6;opacity:.3;animation:rastreio-via-mover 900ms linear infinite}
.rastreio-carro{fill:currentColor;animation:rastreio-carro-mover 1700ms ease-in-out infinite}
.rastreio-carro-2{animation-delay:850ms}
.rastreio-radar{fill:currentColor}
.rastreio-radar-onda{fill:none;stroke:currentColor;stroke-width:1.5;animation:rastreio-radar-onda 1700ms ease-out infinite}
@keyframes rastreio-via-mover{to{stroke-dashoffset:-20}}
@keyframes rastreio-carro-mover{
  0%{cx:4;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{cx:112;opacity:0}
}
@keyframes rastreio-radar-onda{
  0%{r:3;opacity:.8}
  100%{r:9;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .rastreio-via,.rastreio-carro,.rastreio-radar-onda{animation:none}
  .rastreio-carro-1{cx:44;opacity:1}
  .rastreio-carro-2{cx:80;opacity:1}
  .rastreio-radar-onda{opacity:0}
}

/* ---- FaixaDeAssinatura, ListaDeFaturas (templates/Sections.jsx) --------- */

/* Área do cliente: a faixa da assinatura e a lista de faturas. */
.assinatura{max-width:760px;margin:0 auto 40px;padding:24px 26px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px}
.assinatura-cabeca{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.assinatura-rotulo{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.assinatura-plano{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:#fff;margin:0;letter-spacing:-.01em}
.assinatura-itens{display:flex;flex-wrap:wrap;gap:28px;margin:0}
.assinatura-item{display:flex;flex-direction:column;gap:2px}
.assinatura-item dt{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.assinatura-item dd{margin:0;color:#fff;font-size:1.0625rem;font-weight:600;font-variant-numeric:tabular-nums}
.assinatura-extras{margin:18px 0 0;color:var(--text-secondary);font-size:.9375rem}

.faturas{max-width:760px;margin:0 auto}
.faturas-titulo{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:#fff;margin:0 0 6px;letter-spacing:-.01em}
.faturas-resumo{color:var(--text-secondary);margin:0 0 20px;font-size:.9375rem}
.faturas-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fatura{background:rgba(255,255,255,.03);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:10px;padding:18px 20px}
.fatura-vencida{border-left-color:var(--danger)}
.fatura-aberta{border-left-color:var(--green-500)}
.fatura-paga{opacity:.62}
.fatura-linha{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.fatura-texto{min-width:0}
.fatura-descricao{margin:0 0 4px;color:#fff;font-weight:600;font-size:1rem;overflow-wrap:anywhere}
.fatura-frase{margin:0;color:var(--text-secondary);font-size:.875rem}
.fatura-valores{text-align:right;flex:none}
.fatura-valor{margin:0;color:#fff;font-size:1.125rem;font-weight:700;font-variant-numeric:tabular-nums}
.fatura-juros{margin:2px 0 0;color:var(--text-muted);font-size:.8125rem;font-variant-numeric:tabular-nums}
.fatura-acoes{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.fatura-acao{background:rgba(76,204,17,.1);border:1px solid var(--green-500);color:var(--green-500);border-radius:8px;padding:9px 18px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:background .2s}
.fatura-acao:hover:not(:disabled){background:rgba(76,204,17,.2)}
.fatura-acao:disabled{opacity:.55;cursor:default}
.fatura-acao:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
/* O erro da ação fica logo abaixo dos botões da própria fatura, no mesmo
   lugar onde o painel abriria: é a resposta ao clique que acabou de
   acontecer, e precisa estar no campo de visão de quem clicou. */
.fatura-erro{margin:12px 0 0;color:var(--danger);font-size:.9375rem;line-height:1.5}
.faturas-vazio{max-width:560px;margin:0 auto;text-align:center;color:var(--text-secondary);font-size:1.0625rem;line-height:1.6}
@media (max-width:600px){
  .fatura-linha{flex-direction:column;gap:10px}
  .fatura-valores{text-align:left}
  .fatura-acao{flex:1 1 auto;text-align:center}
}

/* Área do cliente: o painel de PIX ou boleto, aberto dentro da fatura. */
.pagamento{margin-top:16px;padding:18px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.25);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pagamento-cabeca{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px}
.pagamento-titulo{margin:0;font-size:1rem;font-weight:700;color:#fff}
.pagamento-fechar{background:none;border:none;color:var(--text-muted);font-size:1rem;cursor:pointer;padding:4px 6px;line-height:1}
.pagamento-fechar:hover{color:#fff}
.pagamento-fechar:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.pagamento-instrucao{margin:0;color:var(--text-secondary);font-size:.9375rem;line-height:1.55}
.pagamento-qrcode{align-self:center;border-radius:8px;background:#fff;padding:10px;max-width:100%;height:auto}
/* A caixa cresce até caber o código inteiro, sem depender de
   `field-sizing` (suporte parcial: a re-revisão da Tarefa 4 mediu corte a
   partir de ~220 caracteres com a propriedade desligada, e um PIX real
   chega a 250) nem de JavaScript. É o truque de grade CSS com um
   pseudo-elemento espelho: o `<div>` de fora é uma grade de uma célula só,
   e a `<textarea>` e o `::after` (que espelha o mesmo texto via
   `attr(data-valor)`, com a MESMA fonte/tamanho/entrelinha/`padding`, para
   quebrar linha exatamente igual) ocupam essa célula sobrepostos. O
   `::after` fica invisível (`visibility:hidden`) mas participa do layout
   normal, então dita a altura da célula pelo próprio texto; a `textarea`
   estica (comportamento padrão de item de grade) para preencher essa
   altura. Nenhum efeito, nenhuma medição em JavaScript, nenhuma corrida
   entre o primeiro paint e um `useEffect` — a altura já nasce certa. */
.pagamento-codigo-cresce{display:grid;width:100%}
.pagamento-codigo-cresce::after{content:attr(data-valor) " ";grid-area:1/1/2/2;visibility:hidden;white-space:pre-wrap;overflow-wrap:anywhere;box-sizing:border-box;border:1px solid transparent;font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;padding:12px}
.pagamento-codigo{grid-area:1/1/2/2;width:100%;box-sizing:border-box;resize:vertical;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:8px;color:#fff;font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;padding:12px;overflow-wrap:anywhere}
.pagamento-codigo:focus{outline:none;border-color:var(--green-500)}
.pagamento-acoes{display:flex;gap:10px;flex-wrap:wrap;width:100%}
.pagamento-copiar{background:var(--green-500);border:none;color:#04141b;border-radius:8px;padding:11px 20px;font-size:.9375rem;font-weight:700;cursor:pointer}
.pagamento-copiar:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pagamento-link{display:inline-flex;align-items:center;padding:11px 20px;border:1px solid var(--border);border-radius:8px;color:#fff;text-decoration:none;font-size:.9375rem;font-weight:600}
.pagamento-link:hover{border-color:var(--green-500)}
.pagamento-nota{margin:0;color:var(--text-muted);font-size:.8125rem}
@media (max-width:600px){
  .pagamento-copiar,.pagamento-link{flex:1 1 auto;justify-content:center;text-align:center}
}

/* Área do cliente: o invólucro do que aparece depois da consulta. */
.area-resultado{background:var(--bg-primary);padding:0 0 100px}
.area-resultado .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* Confirma qual documento voltou nesta consulta — não é o nome do cliente
   (a API de faturas não devolve isso hoje), é o próprio CPF/CNPJ digitado,
   como garantia de que é a conta certa. Frase corrida usa a fonte de texto
   do site: a monoespaçada é reservada aqui para rótulo curto em caixa alta
   (ver .consulta-rotulo, .assinatura-rotulo), não para frase normal. */
.area-resultado-doc{max-width:760px;margin:0 auto 24px;color:var(--text-muted);font-size:.9375rem}