/* ==========================================================================
   RAS Produções e Eventos — Design System
   Baseado no documento "Identidade Visual & Estratégia Digital" v1
   Paleta, tipografia e regras de uso conforme seções 07, 08 e 09.
   ========================================================================== */

:root {
  /* --- Cores principais (PDF seção 07) --- */
  --grafite:      #15120F;
  --ouro:         #F5B921;
  --laranja:      #EA7B2C;
  --vermelho:     #C13B3E;

  /* --- Cores de apoio --- */
  --areia:        #F7F3EC;
  --branco:       #FFFFFF;
  --chumbo:       #5B5450;
  --hairline:     #E3DBCB;

  /* --- Derivadas (mesma família, para estados e profundidade) --- */
  --grafite-90:   #201C18;
  --grafite-80:   #2C2721;
  --grafite-line: #38312A;
  --chumbo-claro: #857D77;
  --areia-escura: #EFE9DE;

  /* --- Gradiente da marca --- */
  --grad: linear-gradient(100deg, var(--ouro) 0%, var(--laranja) 52%, var(--vermelho) 100%);
  --grad-suave: linear-gradient(100deg, rgba(245,185,33,.14), rgba(193,59,62,.14));

  /* --- Tipografia (PDF seção 08) --- */
  --titulo: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto:  'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida ancorada na tabela do PDF (H1 48-56, H2 28-32, H3 18-20, corpo 16-17) */
  --t-hero:  clamp(2.35rem, 1.5rem + 3.6vw, 3.5rem);
  --t-h1:    clamp(2rem, 1.45rem + 2.3vw, 2.9rem);
  --t-h2:    clamp(1.55rem, 1.3rem + 1.1vw, 2rem);
  --t-h3:    clamp(1.08rem, 1.02rem + .28vw, 1.25rem);
  --t-corpo: clamp(1rem, .97rem + .16vw, 1.0625rem);
  --t-peq:   clamp(.82rem, .8rem + .1vw, .875rem);
  --t-micro: .75rem;

  /* --- Forma (PDF seção 09: cantos 2-3mm) --- */
  --r:    10px;
  --r-sm: 6px;
  --r-lg: 14px;

  /* --- Ritmo --- */
  --wrap: 1200px;
  --wrap-txt: 68ch;
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --sec: clamp(3.5rem, 8vw, 6.5rem);

  --sombra:    0 1px 2px rgba(21,18,15,.05), 0 8px 24px -12px rgba(21,18,15,.12);
  --sombra-md: 0 2px 4px rgba(21,18,15,.06), 0 18px 44px -20px rgba(21,18,15,.22);

  --ease: cubic-bezier(.22, .68, 0, 1);
}

/* ============================ Reset enxuto ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--areia);
  color: var(--grafite);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--titulo);
  color: var(--grafite);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.02em;
}
h1 { font-size: var(--t-h1); font-weight: 900; line-height: 1.06; }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.12; }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
p  { margin: 0; }

a { color: var(--vermelho); text-decoration-thickness: 1px; text-underline-offset: 3px; }

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

::selection { background: var(--ouro); color: var(--grafite); }

/* ============================ Utilitários ============================ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec); }
.prosa { max-width: var(--wrap-txt); display: flex; flex-direction: column; gap: 1.05rem; }
.centro { margin-inline: auto; text-align: center; }
.centro .prosa { margin-inline: auto; }
.num { font-variant-numeric: tabular-nums; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Gradiente no texto: usar só em títulos e destaques (regra 20%) */
.grad-txt {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Barra de acento em gradiente (PDF seção 09) */
.acento { width: 46px; height: 4px; border-radius: 99px; background: var(--grad); flex: none; }

.eyebrow {
  font-family: var(--titulo);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .19em;
  color: var(--chumbo);
  margin: 0;
}
.escuro .eyebrow { color: var(--ouro); }

.secao-topo { display: flex; flex-direction: column; gap: .95rem; margin-bottom: clamp(2rem, 4.5vw, 3.2rem); }
.secao-topo .sub { color: var(--chumbo); max-width: 60ch; font-size: 1.05rem; }
.escuro .secao-topo .sub { color: #B9B0A6; }

/* ============================ Blocos escuros ============================ */
.escuro { background: var(--grafite); color: #D7D0C7; }
.escuro h1, .escuro h2, .escuro h3, .escuro h4 { color: var(--branco); }

/* ============================ Botões ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--titulo); font-weight: 600; font-size: .9375rem;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .95rem 1.5rem; border-radius: var(--r-sm);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
  line-height: 1.15; text-align: center;
}
/* Botão primário: laranja sólido, com a luz do gradiente crescendo por trás no hover.
   Laranja converte melhor que vermelho, que carrega leitura de alerta. */
.btn-1 {
  background: var(--laranja); color: var(--branco);
  box-shadow: 0 10px 24px -12px rgba(234,123,44,.7);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-1::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad);
  transform: translateY(101%);
  transition: transform .42s var(--ease);
}
.btn-1:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(245,185,33,.6); }
.btn-1:hover::before { transform: translateY(0); }
.btn-1:active { transform: translateY(0); }

/* Secundário: sempre legível, sem depender do hover para aparecer */
.btn-2 { background: rgba(21,18,15,.04); color: var(--grafite); border-color: rgba(21,18,15,.34); }
.btn-2:hover { background: var(--grafite); color: var(--branco); border-color: var(--grafite); transform: translateY(-2px); }
/* Sobre qualquer fundo escuro o secundário vira claro. `.pg-topo` e `.cta-faixa`
   entram aqui porque também são blocos grafite, mesmo sem a classe `.escuro`. */
.escuro .btn-2, .hero .btn-2, .pg-topo .btn-2, .cta-faixa .btn-2, .agente-bloco .btn-2 {
  color: var(--branco); border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.09);
  backdrop-filter: blur(4px);
}
.escuro .btn-2:hover, .hero .btn-2:hover, .pg-topo .btn-2:hover,
.cta-faixa .btn-2:hover, .agente-bloco .btn-2:hover {
  background: var(--branco); color: var(--grafite); border-color: var(--branco);
}

.btn-zap { background: #1FA855; color: #fff; }
.btn-zap:hover { background: #178443; transform: translateY(-2px); }

.btn-bloco { width: 100%; }

/* ============================ Cabeçalho ============================ */
/* No topo da página o cabeçalho é transparente, para a foto do hero aparecer
   inteira por baixo. Ao rolar ele ganha fundo grafite, o tom mais escuro da
   identidade, e não areia claro: a barra clara brigava com o hero preto e
   piscava a cada rolagem. Como as 12 páginas começam com bloco escuro (hero ou
   `.pg-topo`), o texto da barra é claro nos dois estados, o que dispensa a
   troca de esquema de cor no meio do caminho. */
.topo {
  position: sticky; top: 0; z-index: 90;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.topo.rolou {
  background: rgba(21,18,15,.92);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: rgba(234,123,44,.28);
  box-shadow: 0 8px 28px -16px rgba(0,0,0,.7);
}

@media (max-width: 1040px) {
  /* Menu aberto no celular vira card branco, então volta ao texto escuro */
  .topo.menu-on .nav a,
  .topo.menu-on .tem-sub > button { color: var(--grafite); }
  .topo.menu-on .nav a:hover,
  .topo.menu-on .tem-sub > button:hover { background: var(--areia-escura); }
}
.topo-in { display: flex; align-items: center; gap: 1.25rem; min-height: 74px; }

.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.marca-sigla {
  font-family: var(--titulo); font-weight: 900; font-size: 1.32rem; letter-spacing: -.045em;
  line-height: 1;
}
.marca-sub {
  font-family: var(--titulo); font-size: .5625rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .17em; color: rgba(255,255,255,.72); line-height: 1.2; margin-top: 3px;
}
/* O quadrado branco do logotipo saiu por decisão do cliente: a marca no
   cabeçalho é só o letreiro, com RAS no gradiente da identidade. */

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav a {
  font-family: var(--titulo); font-size: .875rem; font-weight: 500; color: var(--branco);
  text-decoration: none; padding: .55rem .7rem; border-radius: var(--r-sm);
  transition: background-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.nav a:hover { background: rgba(255,255,255,.14); }
/* Laranja, não vermelho: vermelho no menu lê como alerta. */
.nav a[aria-current="page"] { color: var(--laranja); font-weight: 600; }

/* Submenu de serviços */
.tem-sub { position: relative; }
.tem-sub > button {
  font-family: var(--titulo); font-size: .875rem; font-weight: 500; color: var(--branco);
  background: none; border: 0; padding: .55rem .7rem; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
}
.tem-sub > button:hover { background: rgba(255,255,255,.14); }
.tem-sub > button svg { transition: transform .25s var(--ease); }
.tem-sub[data-aberto="true"] > button svg { transform: rotate(180deg); }
.sub-menu {
  position: absolute; top: calc(100% + .45rem); left: 0; min-width: 262px;
  background: var(--branco); border: 1px solid var(--hairline); border-radius: var(--r);
  box-shadow: var(--sombra-md); padding: .45rem; display: none; flex-direction: column; gap: 1px;
}
/* A folga de .45rem entre o botão e o card é um vão vazio: o cursor saía do
   `.tem-sub` no meio do caminho e o menu fechava antes de dar para clicar.
   Esta ponte invisível cobre o vão e mantém o ponteiro dentro do item. */
.tem-sub[data-aberto="true"]::after {
  content: ""; position: absolute; left: 0; top: 100%;
  width: 100%; height: .45rem;   /* exatamente o vão, para não cobrir o card */
}
.tem-sub[data-aberto="true"] .sub-menu { display: flex; }
/* Teclado: abre no foco, sem depender do mouse */
.tem-sub:focus-within .sub-menu { display: flex; }
.sub-menu a { display: flex; flex-direction: column; gap: 1px; padding: .6rem .75rem; color: var(--grafite); }
.sub-menu a:hover { background: var(--areia-escura); }
.sub-menu a span { font-family: var(--texto); font-size: .78rem; color: var(--chumbo); font-weight: 400; }
/* Nas páginas de serviço o item ativo mora dentro do submenu, então o menu
   ficava sem nenhuma marcação. O pai "Serviços" acende junto com o filho. */
.tem-sub > button[aria-current="true"] { color: var(--laranja); font-weight: 600; }
.sub-menu a[aria-current="page"] { color: var(--laranja); }
.sub-menu a[aria-current="page"] span { color: var(--laranja); opacity: .8; }

.topo-cta { margin-left: .5rem; flex: none; }
.topo-cta .btn { padding: .72rem 1.1rem; font-size: .8125rem; }

.hamb {
  margin-left: auto; display: none; background: none; border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--r-sm); width: 44px; height: 44px; place-items: center; color: var(--branco);
}

@media (max-width: 1040px) {
  .nav, .topo-cta { display: none; }
  .hamb { display: grid; }
  .topo.menu-on .nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 2px; background: var(--branco); border-bottom: 1px solid var(--hairline);
    padding: .8rem var(--gut) 1.4rem; max-height: calc(100vh - 74px); overflow-y: auto;
    box-shadow: var(--sombra-md);
  }
  .topo.menu-on .nav a { padding: .8rem .5rem; font-size: 1rem; border-bottom: 1px solid var(--areia-escura); border-radius: 0; }
  .topo.menu-on .tem-sub { position: static; }
  .topo.menu-on .tem-sub > button { width: 100%; justify-content: space-between; padding: .8rem .5rem; font-size: 1rem; }
  .topo.menu-on .sub-menu {
    position: static; box-shadow: none; border: 0; border-left: 2px solid var(--hairline);
    border-radius: 0; margin: 0 0 .6rem .5rem; padding: 0 0 0 .6rem; min-width: 0;
  }
  .topo.menu-on .topo-cta { display: block; margin: .9rem 0 0; }
  .topo.menu-on .topo-cta .btn { width: 100%; padding: .95rem 1.2rem; font-size: .9375rem; }
}

/* ============================ Hero ============================
   Texto à esquerda, letreiro RAS em partículas à direita. Fundo preto,
   sem imagem: o letreiro é desenhado em canvas a partir do próprio glifo.
   ============================================================== */
.hero {
  position: relative;
  background: #000;
  color: #D7D0C7;
  overflow: hidden;
  isolation: isolate;
  margin-top: -75px;           /* o cabeçalho transparente flutua por cima */
}

/* Fundo do hero: preto puro, sem nenhum brilho de ambiente.
   O brilho colorido que eu tinha posto aqui era o que criava o corte seco:
   nas faixas que a foto não cobre ele aparecia, e ao lado do preto da foto
   virava uma emenda visível. Agora a única fonte de cor é a própria foto.

   Este véu é diferente: escurece para PRETO, a mesma cor do fundo, então
   dissolve sem emenda. Serve só para o texto da esquerda ter contraste quando o
   brilho da plateia avança sobre ele. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(95deg,
    rgba(0,0,0,.88) 0%, rgba(0,0,0,.72) 26%, rgba(0,0,0,.34) 44%, rgba(0,0,0,0) 58%);
}

/* Brasas: camada acima da foto e do véu, abaixo do texto */
.hero-brasas {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
.hero-brasas.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-brasas { display: none; } }

/* Linha divisória entre o hero e a seção seguinte. Nasce e morre transparente,
   então não bate nas laterais e não vira um traço cortado. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%, rgba(234,123,44,.35) 22%, rgba(245,185,33,.6) 50%,
    rgba(234,123,44,.35) 78%, transparent 100%);
  pointer-events: none;
}

/* Sem z-index aqui de propósito: com z-index o container criaria contexto de
   empilhamento e a foto ficaria presa acima do brilho de ambiente. A ordem
   desejada é foto (0), brilho (1), texto (2), para o brilho passar por cima da
   foto e não sobrar emenda nas faixas que a foto não cobre. */
.hero-in { position: relative; }

.hero-in {
  position: relative;
  padding-block: clamp(7rem, 12vw, 10rem) clamp(3.5rem, 7vw, 5.5rem);
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 980px) {
  /* Duas colunas e duas linhas. O palco divide a linha 1 com o texto, então
     sua altura é exatamente da assinatura até o fim do parágrafo. Os botões
     ficam na linha 2, fora dessa medida. Tudo sai do layout, sem recuo na mão. */
  .hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto;
    align-items: stretch;
    row-gap: 2.1rem;
  }
  .hero-txt    { grid-column: 1; grid-row: 1; }
  .hero-palco  { grid-column: 2; grid-row: 1; }
  .hero-botoes { grid-column: 1; grid-row: 2; margin-top: 0; }
}

/* ---- Coluna de texto ---- */
/* Texto acima da foto, do véu e das brasas. A sombra é o reforço final de
   leitura para quando o brilho da plateia chega perto das linhas de baixo. */
.hero-txt { position: relative; z-index: 3; }
.hero h1 { text-shadow: 0 2px 18px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6); }
.hero .hero-sub { text-shadow: 0 1px 12px rgba(0,0,0,.8), 0 1px 2px rgba(0,0,0,.7); }
.hero-selo { text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.hero-botoes { position: relative; z-index: 3; }

/* Bloco, não `inline-flex`. Como elemento em linha, a assinatura flutuava
   dentro de uma linha de texto bem maior que ela, e sobrava um respiro
   invisível no topo que desalinhava o letreiro ao lado. */
.hero-selo {
  display: flex; width: fit-content; align-items: center; gap: .8rem;
  font-family: var(--titulo); font-size: .72rem; font-weight: 600;
  line-height: 1;
  text-transform: uppercase; letter-spacing: .19em; color: #D8D0C6;
  margin-bottom: 1.6rem;
}
.hero-selo::before {
  content: ""; width: 34px; height: 3px; border-radius: 99px;
  background: var(--grad); flex: none;
}

.hero h1 {
  font-size: var(--t-hero); color: var(--branco); max-width: 15ch;
  line-height: 1.02;
}
.hero .hero-sub {
  margin-top: 1.35rem; max-width: 46ch;
  font-size: 1.075rem; color: #C6BEB4;
}
.hero-botoes { margin-top: 2.1rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---- Palco do letreiro em partículas ---- */
.hero-palco {
  position: relative;
  aspect-ratio: 5 / 4;
  width: 100%;
  cursor: default;
  touch-action: manipulation;
}
/* No desktop a altura vem do bloco de texto, não de uma proporção fixa:
   o topo do R encosta na assinatura e a base do S nos botões.
   E sangra até a borda da tela: sem essa largura extra a peça bate no limite
   horizontal antes de alcançar a altura, e o topo do R não sobe. */
@media (min-width: 980px) {
  /* Sem sangria: a direita do palco é a direita do container, que é exatamente
     onde termina o botão PEDIR ORÇAMENTO do cabeçalho. Mesmo pixel. */
  .hero-palco {
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
    margin-right: 0;
  }
}
/* ---- Foto do letreiro, ancorada pela caixa das letras ----
   Arquivo 2752x1536. Caixa das letras medida por perfil de densidade, com a
   base na linha de brilho do chão, já que a plateia cobre o pé das letras:
     x  0,48333 a 0,89167      y  0,36847 a 0,66791
   A conta abaixo põe as letras exatamente onde o letreiro em partículas ficava.
   Tudo em porcentagem da própria imagem, então vale em qualquer largura.

     width      = K / fw            com K = 1,06 da largura do palco
     translateX = 1 - direita       encosta a direita das letras na borda
     translateY = -centro vertical  centra as letras na vertical do palco   */
.hero-palco { overflow: visible; }
.hero-foto {
  position: absolute;
  right: 0;
  top: 50%;
  width: 259.59%;
  transform: translate(10.833%, -51.819%);
  display: block;
  pointer-events: none;
  z-index: 0;

  /* A foto é mais larga que o hero e era cortada na borda direita, deixando um
     corte seco onde a plateia encontrava o preto. A máscara dissolve a própria
     foto até transparente nos últimos 8% da largura dela.
     A fade começa em 92%, e as letras terminam em 89,167%, então a dissolução
     acontece inteira depois delas e não toca no letreiro.
     No rodapé, os últimos 6% somem também, para a foto não bater na linha
     divisória da seção de baixo. */
  --fade: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%),
          linear-gradient(180deg, #000 0%, #000 94%, transparent 100%);
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-foto img { display: block; width: 100%; height: auto; }

@media (max-width: 979px) {
  /* Em tela estreita a foto vira fundo do bloco, mais contida e discreta */
  .hero-foto { width: 205%; transform: translate(9%, -51.819%); opacity: .9; }
}

/* Sangria do canvas de partículas, mantida para a versão guardada em
   ras-eventos/hero-antiga-particulas */
.hero-palco { --sangria: 44px; --sangria-esq: 80px; }
#ras-particulas {
  position: absolute;
  top: calc(-1 * var(--sangria));
  right: calc(-1 * var(--sangria));
  bottom: calc(-1 * var(--sangria));
  left: calc(-1 * var(--sangria-esq));
  display: block;
  width: calc(100% + var(--sangria) + var(--sangria-esq));
  height: calc(100% + var(--sangria) * 2);
  /* A caixa do canvas avança sobre a área do texto, mas nenhuma partícula é
     desenhada ali. `pointer-events: none` garante que ele não roube o clique
     dos links; a interação fica no palco, que não invade o texto. */
  pointer-events: none;
  opacity: 0; transition: opacity 1s var(--ease);
}
#ras-particulas.on { opacity: 1; }
@media (max-width: 979px) {
  .hero-palco { --sangria: 24px; --sangria-esq: 24px; }
}

@media (max-width: 979px) {
  .hero-palco { aspect-ratio: 16 / 9; max-height: 38vh; order: -1; }
}


/* ---- Círculos de luz de palco (PDF seção 09) ----
   Regra base compartilhada. O tamanho e a cor de cada um ficam na seção que o
   usa: bloco do agente, faixa de CTA e topo das páginas internas. */
.hero-luz {
  position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px);
  opacity: .5; pointer-events: none;
}
.escuro > .wrap, .cta-faixa > .wrap, .pg-topo > .wrap, .agente-bloco > .wrap { position: relative; z-index: 1; }

/* ============================ Slot de foto ============================ */
/* Onde entram as fotos reais do acervo da RAS. Cada slot já carrega a
   proporção e o nome de arquivo sugerido para SEO (PDF seção 10, item 5). */
.slot {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--grafite-90); border: 1px solid var(--grafite-line);
  display: grid; place-items: center; isolation: isolate;
}
.slot.claro { background: var(--areia-escura); border-color: var(--hairline); }
.slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.slot-16-9 { aspect-ratio: 16 / 9; }
.slot-4-3  { aspect-ratio: 4 / 3; }
.slot-1-1  { aspect-ratio: 1 / 1; }
.slot-3-4  { aspect-ratio: 3 / 4; }
.slot-21-9 { aspect-ratio: 21 / 9; }

/* Marca d'água discreta enquanto a foto real não entra. Sem nome de arquivo e
   sem etiqueta de obra: só a sigla da marca, bem apagada. O texto do HTML fica
   oculto para não precisar editar os 47 slots um por um. */
.slot-nota {
  position: relative; z-index: 2; text-align: center; padding: 1.2rem;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
}
.slot-nota .ico { width: 30px; height: 30px; color: var(--laranja); opacity: .38; }
.slot-nota b, .slot-nota code { display: none; }
.slot-nota::after {
  content: "RAS";
  font-family: var(--titulo); font-size: 1.1rem; font-weight: 900; letter-spacing: -.035em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; opacity: .42;
}

/* Grade de pixels sobre a foto: assina o universo de painel de LED */
.slot::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0; transition: opacity .4s var(--ease);
}
.slot:hover::after { opacity: 1; }

/* Movimento na foto: aproximação suave ao passar o mouse.
   Vale para slot solto, cartão de serviço, case e capa de artigo. */
.slot > img { transition: transform .85s var(--ease), filter .5s var(--ease); will-change: transform; }
.slot:hover > img,
.serv:hover .slot > img,
.case:hover .slot > img { transform: scale(1.07); }

/* Brilho quente subindo por trás da foto no hover, sem lavar a imagem */
.slot::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%; z-index: 2;
  background: linear-gradient(to top, rgba(234,123,44,.34), transparent);
  opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
}
.slot:hover::before,
.serv:hover .slot::before,
.case:hover .slot::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .slot > img { transition: none; }
  .slot:hover > img, .serv:hover .slot > img, .case:hover .slot > img { transform: none; }
}

/* ============================ Cartões ============================ */
.grade { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: var(--branco); border: 1px solid var(--hairline); border-radius: var(--r);
  padding: clamp(1.3rem, 2.6vw, 1.9rem); display: flex; flex-direction: column; gap: .8rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); border-color: #D6CCB9; }
.card p { color: var(--chumbo); font-size: var(--t-peq); line-height: 1.62; }
.escuro .card { background: var(--grafite-90); border-color: var(--grafite-line); }
.escuro .card p { color: #A79E94; }
.escuro .card:hover { border-color: #4A423A; }

.card-ico {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--grad); color: var(--branco); flex: none;
}
.card-ico svg { width: 22px; height: 22px; }

/* Cartão de serviço com foto */
.serv { display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.serv:hover { transform: translateY(-5px); box-shadow: var(--sombra-md); }
.serv .slot { border: 0; border-radius: 0; }
.serv-txt { padding: clamp(1.15rem, 2.4vw, 1.6rem); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.serv-txt p { color: var(--chumbo); font-size: var(--t-peq); }
.serv-mais {
  margin-top: auto; padding-top: .6rem; font-family: var(--titulo); font-weight: 600;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em; color: var(--vermelho);
  display: inline-flex; align-items: center; gap: .4rem;
}
.serv:hover .serv-mais svg { transform: translateX(4px); }
.serv-mais svg { transition: transform .25s var(--ease); }

/* Lista com marcador de gradiente */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
/* O marcador é posicionado de forma absoluta, não como célula de grid.
   Se o li fosse grid ou flex, cada <b> e cada trecho de texto viraria um item
   separado e a frase quebraria no meio, deixando vírgulas órfãs. */
.lista li {
  position: relative; padding-left: 1.35rem;
  font-size: var(--t-peq); line-height: 1.62; color: var(--chumbo);
}
.lista li::before {
  content: ""; position: absolute; left: 0; top: .63em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--grad);
}
.escuro .lista li { color: #A79E94; }
.lista b { color: var(--grafite); font-weight: 600; }
.escuro .lista b { color: var(--branco); }

/* ============================ Comparador de painel LED ============================
   A área inteira É a tela. Sem moldura, sem mockup de telão, sem fundo em volta:
   o visitante olha para o conteúdo do painel, não para um painel fotografado. */
.comp { position: relative; user-select: none; touch-action: pan-y; }
.comp-palco {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #0A0705; cursor: ew-resize;
}
.comp-lado { position: absolute; inset: 0; }
.comp-lado picture { display: block; width: 100%; height: 100%; }
.comp-lado img, .comp-lado canvas { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lado ruim: resolução realmente menor, com uma leve perda de cor e brilho.
   O tratamento é sutil de propósito: painel de pitch largo perde definição,
   não vira uma imagem cinza e apagada. */
.comp-ruim canvas { image-rendering: pixelated; }
.comp-ruim { filter: saturate(.88) brightness(.9) contrast(.96); }

/* Lado bom: arte na resolução cheia, cor viva */
.comp-bom { clip-path: inset(0 0 0 var(--corte, 50%)); }

.comp-linha {
  position: absolute; top: 0; bottom: 0; left: var(--corte, 50%); width: 2px;
  background: var(--branco); z-index: 4; transform: translateX(-1px);
  box-shadow: 0 0 20px rgba(255,255,255,.65);
}
.comp-alca {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; background: var(--branco); color: var(--grafite);
  display: grid; place-items: center; box-shadow: 0 6px 22px rgba(0,0,0,.55); cursor: ew-resize;
  transition: transform .25s var(--ease);
}
.comp-palco:hover .comp-alca { transform: translate(-50%, -50%) scale(1.09); }
.comp-tag {
  position: absolute; top: 16px; z-index: 5; font-family: var(--titulo); font-weight: 700;
  font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; padding: .4rem .65rem;
  border-radius: 4px; white-space: nowrap;
}
.comp-tag.esq { left: 16px; background: rgba(10,7,5,.82); color: #B9B0A6; border: 1px solid rgba(255,255,255,.16); }
.comp-tag.dir { right: 16px; background: var(--grad); color: var(--grafite); }
.comp-faixa {
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: space-between;
  padding: 1rem .1rem 0;
}
.comp-faixa span { font-family: ui-monospace, Consolas, monospace; font-size: .72rem; color: #8E857B; letter-spacing: .02em; }
.comp-faixa b { color: var(--ouro); font-weight: 600; }
.comp-input {
  position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; border: 0;
}

/* ============================ Agente de IA ============================ */
.agente-bloco { background: var(--grafite); color: #D7D0C7; position: relative; overflow: hidden; }
/* O topo desta seção continua o preto do hero e vai abrindo até a cor própria,
   levando um resto do laranja com ele. É o que faz a passagem entre as duas
   seções não ter linha de corte. */
.agente-bloco::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 240px; z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #000 0%, rgba(21,18,15,.55) 55%, rgba(21,18,15,0) 100%),
    radial-gradient(70% 130% at 74% 0%, rgba(234,123,44,.13), transparent 70%);
}
.agente-bloco .hero-luz.a { width: 520px; height: 520px; left: -160px; top: -180px; background: radial-gradient(circle, rgba(234,123,44,.34), transparent 68%); }
.agente-grade { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; }
@media (min-width: 940px) { .agente-grade { grid-template-columns: minmax(0, 1fr) minmax(430px, 540px); } }

.chat {
  background: var(--branco); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 34px 80px -30px rgba(0,0,0,.75); display: flex; flex-direction: column;
  height: clamp(500px, 68vh, 700px); color: var(--grafite);
}
.chat-topo { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--hairline); background: var(--branco); }
.chat-av { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: var(--branco); flex: none; }
.chat-av svg { width: 21px; height: 21px; }
.chat-quem b { display: block; font-family: var(--titulo); font-weight: 600; font-size: .9375rem; line-height: 1.2; }
.chat-quem span { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--chumbo); }
.chat-on { width: 7px; height: 7px; border-radius: 50%; background: #1FA855; flex: none; }
.chat-on::after { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: #1FA855; animation: pulso 2s infinite; }
@keyframes pulso { 0% { transform: scale(1); opacity: .8 } 70% { transform: scale(3); opacity: 0 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .chat-on::after { animation: none } }

/* `min-height: 0` é essencial: sem isso o log não encolhe abaixo do próprio
   conteúdo, a soma interna passa da altura do chat e o campo de mensagem some
   cortado no rodapé. `flex: 1 1 auto` deixa o log ser a única parte elástica. */
.chat-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 1.1rem; display: flex; flex-direction: column; gap: .7rem;
  background: var(--areia); scroll-behavior: smooth;
}
.chat-topo, .chat-opcoes, .chat-fechar { flex: 0 0 auto; }
/* Se a conversa acumular muitas opções, elas rolam em vez de empurrar o resto */
.chat-opcoes { max-height: 40%; overflow-y: auto; }
.msg { max-width: 86%; padding: .72rem .95rem; font-size: .875rem; line-height: 1.58; border-radius: var(--r); animation: entra .35s var(--ease) both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none } }
.msg-bot { align-self: flex-start; background: var(--branco); border: 1px solid var(--hairline); border-bottom-left-radius: 3px; }
.msg-eu  { align-self: flex-end; background: var(--grafite); color: #EDE7DE; border-bottom-right-radius: 3px; }
.msg-bot strong { color: var(--grafite); font-weight: 600; }
.msg-bot .tec { font-family: ui-monospace, Consolas, monospace; font-size: .8em; background: var(--areia-escura); padding: .1rem .3rem; border-radius: 3px; color: #8A3E1E; }

.digitando { align-self: flex-start; display: flex; gap: 4px; padding: .85rem .95rem; background: var(--branco); border: 1px solid var(--hairline); border-radius: var(--r); }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--chumbo-claro); animation: salta 1.1s infinite; }
.digitando i:nth-child(2) { animation-delay: .14s } .digitando i:nth-child(3) { animation-delay: .28s }
@keyframes salta { 0%,60%,100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-5px); opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .digitando i { animation: none } }

.chat-opcoes { display: flex; flex-wrap: wrap; gap: .45rem; padding: .8rem 1.1rem; border-top: 1px solid var(--hairline); background: var(--branco); }
.chip {
  font-family: var(--titulo); font-size: .8125rem; font-weight: 500; padding: .5rem .85rem;
  border: 1px solid var(--hairline); border-radius: 99px; background: var(--areia); color: var(--grafite);
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--laranja); background: var(--branco); color: var(--vermelho); transform: translateY(-1px); }
.chip-fim { background: var(--grad); border-color: transparent; color: var(--grafite); font-weight: 600; }

.chat-fechar { padding: 1rem 1.1rem; border-top: 1px solid var(--hairline); background: var(--branco); display: flex; flex-direction: column; gap: .6rem; }
.chat-fechar .aviso { font-size: .72rem; color: var(--chumbo); text-align: center; }
.chat-campo { display: flex; gap: .5rem; align-items: center; }
.chat-campo input {
  flex: 1; font-family: var(--texto); font-size: .875rem; padding: .75rem .9rem;
  border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--areia); color: var(--grafite);
}
.chat-campo input:focus { outline: none; border-color: var(--laranja); background: var(--branco); }
.chat-env { width: 42px; height: 42px; flex: none; border: 0; border-radius: var(--r-sm); background: var(--vermelho); color: #fff; display: grid; place-items: center; }
.chat-env:hover { background: #A93034; }

.agente-pontos { display: flex; flex-direction: column; gap: 1.5rem; }
.ponto { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.ponto-n {
  width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; font-family: var(--titulo); font-weight: 700; font-size: .8125rem;
  color: var(--ouro); flex: none;
}
.ponto h3 { color: var(--branco); font-size: 1.02rem; margin-bottom: .3rem; }
.ponto p { color: #A79E94; font-size: var(--t-peq); }

/* ============================ Números / prova ============================ */
.metricas { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.metrica { background: var(--branco); padding: 1.5rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.metrica b { font-family: var(--titulo); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.35rem); line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
/* Mesmo cuidado do hero: filho direto, para não estragar o contador dentro do <b> */
.metrica > span { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .13em; color: var(--chumbo); font-family: var(--titulo); font-weight: 500; }
.metrica b span { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.metrica small { font-size: .78rem; color: var(--chumbo-claro); line-height: 1.5; }

/* ---------- Logos de clientes: esteira horizontal ----------
   Em repouso a logo fica cinza e sem saturação. No hover ganha o gradiente
   quente da marca, que é a única cor que aparece na faixa. */
.esteira {
  position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.esteira-trilha {
  display: flex; width: max-content; gap: 0;
  animation: corre 38s linear infinite;
}
.esteira:hover .esteira-trilha { animation-play-state: paused; }
@keyframes corre { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) {
  .esteira-trilha { animation: none; }
  .esteira { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}

.logo-slot {
  width: 210px; height: 92px; flex: none; display: grid; place-items: center;
  padding: .9rem 1.4rem; position: relative;
}

/* A logo entra como MÁSCARA, não como imagem. É o que permite pintar a mesma
   arte em cinza no repouso e no gradiente laranja no hover. Um PNG colorido
   não faria isso de forma limpa, viraria uma tinta suja por cima.

   O `mask-image` de cada logo é declarado no atributo style do próprio HTML,
   com caminho relativo. Dois motivos: o Chrome resolve `url()` dentro de
   variável CSS contra o arquivo de estilo, e caminho absoluto quebra quando o
   site é aberto direto do disco, por file://. */
.logo-marca {
  display: block; width: 100%; height: 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background-color: #9A928B;
  opacity: .55;
  transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .35s var(--ease);
}
.logo-slot:hover .logo-marca {
  background-color: transparent;
  background-image: var(--grad);
  opacity: 1;
  transform: scale(1.05);
}

/* Se o cliente enviar a logo como imagem comum, o comportamento se mantém:
   cinza sem saturação em repouso, cor cheia no hover. */
.logo-slot img {
  max-height: 100%; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(1) brightness(.66) contrast(.85); opacity: .58;
  transition: filter .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease);
}
.logo-slot:hover img { filter: none; opacity: 1; transform: scale(1.05); }

/* ============================ Cases ============================ */
.case { position: relative; border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; display: block; background: var(--grafite); }
.case .slot { border: 0; border-radius: 0; }
.case-txt {
  position: absolute; inset: auto 0 0 0; z-index: 3; padding: 1.4rem 1.25rem 1.2rem;
  background: linear-gradient(to top, rgba(21,18,15,.96) 8%, rgba(21,18,15,.72) 55%, transparent);
  display: flex; flex-direction: column; gap: .35rem;
}
.case-tag { font-family: var(--titulo); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ouro); }
.case-txt h3 { color: var(--branco); font-size: 1.05rem; }
.case-txt p { color: #B9B0A6; font-size: .8125rem; }
.case-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .45rem; }
.case-meta span { font-family: ui-monospace, Consolas, monospace; font-size: .68rem; color: #8E857B; }

/* ============================ Processo ============================
   A barra de cada passo se completa em laranja quando o mouse passa. */
/* O número do passo é desenhado acima da caixa, em `top: -1.55rem`. A grade
   reserva essa altura no próprio padding: sem isso o "01" subia para fora e
   encavalava no título logo acima. */
.passos {
  display: grid; gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  counter-reset: p; padding-top: 1.55rem;
}
/* Quando vem logo abaixo de um título de seção, o espaço já existe na margem
   do `.secao-topo`; a margem negativa devolve o padding para não somar duas
   folgas e afastar demais os passos do título. */
.secao-topo + .passos { margin-top: -1.55rem; }
/* São 4 passos. O `auto-fit` abria 3 trilhas em qualquer largura intermediária
   e o quarto caía sozinho na segunda linha, deixando dois buracos ao lado.
   Nessas larguras a grade passa a 2 x 2, que fecha sem sobra. Acima de 1100px
   a largura toda comporta os 4 lado a lado. */
@media (min-width: 620px) and (max-width: 1099px) {
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Na coluna de artigo, com a lateral ao lado, nunca cabem 4: sempre 2 x 2. */
@media (min-width: 620px) {
  .duo .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.passo {
  display: flex; flex-direction: column; gap: .6rem; padding-top: 1.5rem;
  border-top: 2px solid var(--hairline); position: relative; cursor: default;
}
.passo::before {
  counter-increment: p; content: "0" counter(p);
  position: absolute; top: -1.55rem; left: 0; font-family: var(--titulo); font-weight: 800;
  font-size: .8125rem; color: var(--laranja); letter-spacing: .04em;
  transition: transform .35s var(--ease);
}
/* A barrinha nasce com 34px e cresce até a largura toda do passo */
.passo::after {
  content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 34px;
  background: var(--grad); transition: width .55s var(--ease);
}
.passo:hover::after { width: 100%; }
.passo:hover::before { transform: translateY(-2px); }
.passo p { color: var(--chumbo); font-size: var(--t-peq); }
.passo h3 { transition: color .3s var(--ease); }
.passo:hover h3 { color: var(--vermelho); }
.escuro .passo { border-top-color: var(--grafite-line); }
.escuro .passo:hover h3 { color: var(--ouro); }
@media (prefers-reduced-motion: reduce) {
  .passo::after, .passo::before { transition: none; }
  .passo:hover::after { width: 34px; }
}

/* ============================ FAQ ============================ */
.faq { display: flex; flex-direction: column; gap: .6rem; max-width: 860px; margin-inline: auto; }
/* Bloco de perguntas centralizado, com o título acompanhando para não ficar torto */
.faq-sec .secao-topo { align-items: center; text-align: center; }
.faq-sec .secao-topo .sub { margin-inline: auto; }
.faq details {
  background: var(--branco); border: 1px solid var(--hairline); border-radius: var(--r);
  overflow: hidden; transition: border-color .25s var(--ease);
}
.faq details[open] { border-color: #D6CCB9; box-shadow: var(--sombra); }
.faq summary {
  cursor: pointer; padding: 1.1rem 1.25rem; font-family: var(--titulo); font-weight: 600;
  font-size: .9875rem; display: flex; align-items: center; gap: 1rem; list-style: none;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 11px; height: 11px; margin-left: auto; flex: none;
  border-right: 2px solid var(--laranja); border-bottom: 2px solid var(--laranja);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .resp { padding: 0 1.25rem 1.25rem; color: var(--chumbo); font-size: var(--t-peq); line-height: 1.68; max-width: 72ch; }
.faq .resp p + p { margin-top: .7rem; }

/* ==================== Fecho da página: CTA centralizado ====================
   Seção baixa e centrada. A página é longa, então aqui não entra argumento
   novo, só a ação. Substitui a faixa em duas colunas, que ficava com texto
   solto de um lado e botões do outro, sem eixo. */
.cta-fim {
  background: var(--grafite);
  color: #D7D0C7;
  text-align: center;
  padding-block: clamp(2rem, 3.6vw, 2.9rem);
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--grafite-line);
}
.cta-fim::before {
  content: "";
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: min(760px, 86%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,185,33,.55), transparent);
}
.cta-fim .wrap { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
/* Branco explícito. Sem isso o h2 herdava o grafite padrão e ficava da mesma
   cor do fundo da seção, ou seja, invisível. */
.cta-fim h2 {
  max-width: 24ch;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  color: var(--branco);
}
.cta-fim-sub { color: #A79E94; font-size: var(--t-peq); }
.cta-fim-acoes {
  display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center;
  margin-top: .55rem;
}
.cta-fim-nota {
  margin-top: .7rem; font-family: var(--titulo); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: .13em; color: #6E665E;
}

/* ============================ Faixa de CTA ============================ */
.cta-faixa { background: var(--grafite); color: #D7D0C7; position: relative; overflow: hidden; }
.cta-faixa .hero-luz.a { width: 460px; height: 460px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(245,185,33,.32), transparent 68%); }
.cta-in { display: flex; flex-wrap: wrap; gap: 1.8rem 2.5rem; align-items: center; justify-content: space-between; }
.cta-in h2 { max-width: 24ch; }
.cta-in p { color: #A79E94; max-width: 46ch; margin-top: .7rem; font-size: var(--t-peq); }
.cta-acoes { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ============================ Rodapé ============================ */
.rodape { background: #100E0C; color: #948B82; padding-block: clamp(2.8rem, 6vw, 4.2rem) 1.8rem; font-size: var(--t-peq); }
.rodape-grade { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rodape h4 { color: var(--branco); font-family: var(--titulo); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 1rem; }
.rodape a { color: #948B82; text-decoration: none; display: block; padding: .3rem 0; transition: color .2s var(--ease); }
.rodape a:hover { color: var(--ouro); }
.rodape .marca-sigla { color: var(--branco); }
.rodape .sobre-curto { max-width: 34ch; line-height: 1.68; margin-top: 1rem; }
.rodape-base {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid #241F1A;
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  font-size: .75rem; color: #6E665E;
}
.rodape-base a { display: inline; }

/* ============================ Barra fixa mobile ============================ */
.barra-mob {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; display: none;
  gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline);
  box-shadow: 0 -6px 20px -10px rgba(21,18,15,.3);
}
.barra-mob a {
  flex: 1; padding: .85rem .4rem; background: var(--branco); text-align: center; text-decoration: none;
  font-family: var(--titulo); font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--grafite); display: flex; flex-direction: column;
  align-items: center; gap: .2rem;
}
.barra-mob a.destaque { background: var(--vermelho); color: #fff; }
.barra-mob svg { width: 17px; height: 17px; }
@media (max-width: 720px) {
  .barra-mob { display: flex; }
  body { padding-bottom: 62px; }
}

/* ============================ Revelação no scroll ============================ */
.rev { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rev.vis { opacity: 1; transform: none; }
.rev-d1 { transition-delay: .08s } .rev-d2 { transition-delay: .16s } .rev-d3 { transition-delay: .24s }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
}

/* ============================ Página interna: topo ============================ */
/* A margem negativa puxa este bloco para debaixo do cabeçalho transparente,
   o mesmo truque do hero. Sem ela a barra ficava sobre o fundo areia e os
   links brancos do menu desapareciam no topo das 11 páginas internas.
   O padding de cima devolve os 75px, senão a migalha entra embaixo da barra. */
.pg-topo {
  background: var(--grafite); color: #D7D0C7; position: relative; overflow: hidden;
  margin-top: -75px;
}
.pg-topo .hero-luz.a { width: 440px; height: 440px; right: -110px; top: -170px; background: radial-gradient(circle, rgba(245,185,33,.3), transparent 68%); }
.pg-topo-in { padding-block: calc(75px + clamp(2.6rem, 6vw, 4.4rem)) clamp(2.2rem, 5vw, 3.4rem); }
.pg-topo h1 { color: var(--branco); max-width: 24ch; }
.pg-topo .intro { margin-top: 1.1rem; max-width: 62ch; color: #C6BEB4; font-size: 1.06rem; }
.migalhas { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin-bottom: 1.3rem; font-size: .75rem; font-family: var(--titulo); }
.migalhas a { color: #9C938A; text-decoration: none; }
.migalhas a:hover { color: var(--ouro); }
.migalhas span { color: #6E665E; }

/* Duas colunas de conteúdo com lateral fixa.
   `min-width: 0` nos filhos é obrigatório: item de grid não encolhe abaixo do
   próprio conteúdo mínimo, e a tabela técnica empurraria a coluna para fora da tela. */
.duo { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
.duo > * { min-width: 0; }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr) 330px; } }
.lateral { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1rem; }
.lateral-card { background: var(--branco); border: 1px solid var(--hairline); border-radius: var(--r); padding: 1.4rem; display: flex; flex-direction: column; gap: .85rem; }
.lateral-card h3 { font-size: 1.02rem; }
.lateral-card p { font-size: var(--t-peq); color: var(--chumbo); }

/* Tabela técnica: rola dentro do próprio quadro, nunca empurra a página */
.tab-rola {
  overflow-x: auto; max-width: 100%;
  border: 1px solid var(--hairline); border-radius: var(--r); background: var(--branco);
}
table.tec { border-collapse: collapse; width: 100%; min-width: 540px; font-size: var(--t-peq); }
table.tec th, table.tec td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--areia-escura); vertical-align: top; }
table.tec thead th {
  font-family: var(--titulo); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .12em;
  color: var(--chumbo); font-weight: 600; background: var(--areia); border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
table.tec tbody tr:last-child td { border-bottom: 0; }
table.tec td:first-child { font-weight: 600; color: var(--grafite); font-family: var(--titulo); white-space: nowrap; }
table.tec .n { font-variant-numeric: tabular-nums; }

/* Bloco de destaque em citação */
.destaque {
  border-left: 3px solid transparent; border-image: var(--grad) 1;
  padding: .3rem 0 .3rem 1.3rem; font-family: var(--titulo); font-weight: 500;
  font-size: 1.12rem; line-height: 1.5; color: var(--grafite); max-width: 54ch;
}
.escuro .destaque { color: var(--branco); }

/* Nota informativa */
.nota {
  background: var(--branco); border: 1px solid var(--hairline); border-left: 3px solid var(--laranja);
  border-radius: var(--r-sm); padding: 1rem 1.15rem; font-size: var(--t-peq); color: var(--chumbo);
  line-height: 1.65; max-width: 72ch;
}
.nota b { color: var(--grafite); }