/* ============================================================
   LP SPACE — VERSÃO PROVA / MECANISMO
   Página nova, roda ao lado da LP institucional (lp.spacetecnologia.com).

   ⚠️ Toda classe leva prefixo `s-`. Folha autossuficiente: não depende do
   styles.css da LP antiga e nada daqui deve ser colado lá.

   ------------------------------------------------------------
   DIREÇÃO VISUAL — o que foi cortado e por quê
   ------------------------------------------------------------
   A primeira versão tinha cara de template gerado. As cinco causas, todas
   removidas aqui:

   1. GRADIENTE E BRILHO. Botão com degradê ciano→azul e sombra colorida é a
      assinatura de página feita em ferramenta automática. Agora o botão é
      cor sólida, raio pequeno, sem sombra.
   2. NEON. O ciano #27CAFF saturado dominava tudo. O azul agora é um só,
      sóbrio, e aparece em pouca coisa: botão, fio de destaque e link.
   3. CARD EM TUDO. Toda informação vinha dentro de uma caixa arredondada.
      As etapas e o comparativo passaram a usar régua de 1px, que é como
      material impresso separa assunto.
   4. RAIO GRANDE. 16-22px de canto arredondado infantiliza. Caiu para 6-10px.
   5. IMAGEM DE IA CRUA. As fotos são geradas e têm o brilho ciano típico.
      Todas passam por dessaturação e contraste no CSS (.s-foto), o que
      aproxima de registro documental e, de quebra, unifica um acervo que veio
      de gerações diferentes. Não resolve: é remendo até entrarem fotos reais.

   Seção escura é A TELA. Seção clara é O DOCUMENTO. A alternância entre as
   duas é o ritmo da página. Mobile primeiro: o uso principal é anúncio no
   celular.
   ============================================================ */

:root{
  /* escuro: cinza-azulado neutro, sem brilho de fundo */
  --s-fundo:#0B0E13;
  --s-fundo-2:#111621;
  --s-fundo-3:#161C28;
  --s-borda:#212936;
  --s-borda-forte:#334054;
  --s-texto:#E7EAEF;
  --s-fraco:#98A2B3;

  /* claro */
  --s-papel:#FFFFFF;
  --s-papel-2:#F4F6F8;
  --s-papel-linha:#E2E6EB;
  --s-tinta:#0D1117;
  --s-tinta-fraca:#5A6572;

  /* um azul só, e ele aparece pouco */
  --s-azul:#1E6FD9;
  --s-azul-claro:#4C9AEF;
  /* ⚠️ NEON SÓ NO ESCURO. Em fundo branco ele fica lavado e amador, então
     toda regra abaixo é escopada em .s-sec:not(.s-sec--claro).
     E o neon é ACENTO: fio, marcador, filete e halo. Nunca área grande,
     nunca fundo, nunca corpo de texto — foi assim que a primeira versão
     ficou com cara de template. */
  --s-neon:#3ED8FF;
  --s-neon-glow:rgba(62,216,255,.45);

  --s-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
  --s-titulo:"Space Grotesk",system-ui,sans-serif;
  --s-corpo:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;

  --s-container:1080px;
  --s-medida:64ch;      /* medida de leitura: linha longa demais cansa */
  --s-ritmo:clamp(3rem,8vw,6rem);
  --s-raio:8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--s-texto);
  /* chapado ficou sem vida. Volta o degradê, mas discreto: uma luz fria no
     alto da página e um corpo que escurece conforme desce. */
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(46,120,220,.14), transparent 62%),
    linear-gradient(180deg,#0D1119 0%, var(--s-fundo) 42%, #090C11 100%);
  background-attachment:fixed;
  font-family:var(--s-corpo);font-size:17px;line-height:1.65;
  font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.s-container{width:min(100% - 40px,var(--s-container));margin-inline:auto}
.s-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tratamento único de imagem. Sem isso, cada foto gerada traz seu próprio
   brilho ciano e o conjunto parece colagem. */
.s-foto{filter:grayscale(.62) contrast(1.06) brightness(.94)}
.s-sec--claro .s-foto{filter:grayscale(.68) contrast(1.04) brightness(1.02)}

/* ---------- ritmo das seções ---------- */
.s-sec{padding:var(--s-ritmo) 0;position:relative}
/* cada seção escura recebe uma luz fraca no alto — evita o bloco chapado sem
   trazer de volta o brilho de template */
.s-sec:not(.s-sec--claro)::before{
  content:"";position:absolute;inset:0 0 auto 0;height:220px;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0%, rgba(46,120,220,.07), transparent 70%);
}
.s-sec > .s-container{position:relative;z-index:1}
.s-sec + .s-sec:not(.s-sec--claro){
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--s-borda-forte) 25%,var(--s-borda-forte) 75%,transparent) 1;
}
.s-sec--claro{background:var(--s-papel);color:var(--s-tinta);border-top:0}
.s-col{max-width:var(--s-medida)}

/* ---------- tipografia ---------- */
.s-h2{
  text-wrap:balance;
  font-family:var(--s-titulo);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.5rem,1.15rem + 1.5vw,2.1rem);line-height:1.2;margin:0 0 .8rem;
}
.s-lead{font-size:1.05rem;color:var(--s-fraco);margin:0;max-width:60ch;text-wrap:pretty}
.s-sec--claro .s-lead{color:var(--s-tinta-fraca)}
.s-lead b{color:var(--s-texto);font-weight:600}
.s-sec--claro .s-lead b{color:var(--s-tinta)}

/* rótulo: monoespaçada pequena, em cinza. Em azul virava enfeite. */
.s-rotulo,.s-antes{
  display:block;font-family:var(--s-mono);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--s-azul-claro);margin:0 0 1rem;
}
.s-rotulo::before{
  content:"";display:inline-block;width:16px;height:1px;vertical-align:middle;
  margin-right:.6rem;background:currentColor;opacity:.7;
}
.s-sec--claro .s-rotulo,.s-sec--claro .s-antes{color:var(--s-azul)}

/* ---------- botões ---------- */
.s-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:6px;border:1px solid var(--s-azul);cursor:pointer;
  font-family:var(--s-corpo);font-weight:600;font-size:.97rem;line-height:1.2;
  text-decoration:none;color:#fff;border-color:#1B62C4;
  background:linear-gradient(180deg,#2C82E8,#1A62C8);
  box-shadow:0 6px 16px rgba(24,86,180,.28);
  transition:background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.s-btn:hover{background:linear-gradient(180deg,#3A8DEE,#1B69D2);box-shadow:0 8px 22px rgba(24,86,180,.36);transform:translateY(-1px)}
.s-btn:active{transform:translateY(0)}
.s-btn--zap{background:linear-gradient(180deg,#25A059,#1A7C42);border-color:#1A7C42;box-shadow:0 6px 16px rgba(26,124,66,.26)}
.s-btn--zap:hover{background:linear-gradient(180deg,#2AAE61,#1C8848);box-shadow:0 8px 22px rgba(26,124,66,.32)}
.s-btn--linha{background:transparent;color:inherit;border-color:currentColor;opacity:.85}
.s-btn--linha:hover{background:transparent;opacity:1}
.s-btn__icone{width:1.05em;height:1.05em;flex:none}

/* ---------- topo ---------- */
.s-topo{
  position:sticky;top:0;z-index:50;background:rgba(11,14,19,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--s-borda);
}
.s-topo__linha{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0}
.s-topo__marca{display:flex;align-items:center;gap:.85rem;min-width:0}
.s-topo__marca img{height:44px;width:auto}
.s-topo__praca{
  font-family:var(--s-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-fraco);white-space:nowrap;padding-left:.85rem;border-left:1px solid var(--s-borda);
}
.s-topo .s-btn{padding:.62rem 1.05rem;font-size:.9rem}
.s-so-desk{display:none}.s-so-mob{display:inline}
@media (min-width:700px){.s-so-desk{display:inline}.s-so-mob{display:none}}
@media (max-width:560px){.s-topo__praca{display:none}.s-topo__marca img{height:38px}}

/* ---------- hero ---------- */
.s-hero{padding:clamp(2.5rem,6vw,5rem) 0}
.s-hero__grid{display:grid;gap:1.8rem;align-items:center}
.s-hero__titulo{
  text-wrap:balance;
  font-family:var(--s-titulo);font-weight:500;letter-spacing:-.025em;
  font-size:clamp(1.85rem,1.2rem + 2.2vw,2.9rem);line-height:1.15;margin:0 0 1.1rem;
  max-width:20ch;
}
/* o destaque é um fio embaixo, não uma cor gritando no meio da frase */
.s-hero__titulo b{
  font-weight:500;color:inherit;
  background-image:linear-gradient(90deg,rgba(76,154,239,.9),rgba(76,154,239,.25));
  background-repeat:no-repeat;background-size:100% .1em;background-position:0 92%;
}
.s-hero .s-lead{font-size:1.08rem;max-width:52ch;color:var(--s-texto)}
.s-hero .s-cta{margin-top:1.6rem}
/* a headline são duas frases com funções diferentes: a primeira é o problema,
   a segunda é a resposta. Coladas, viravam um bloco só. */
.s-hero__frase{display:block}
.s-hero__frase:first-child{margin-bottom:.5em;opacity:.66}
@media (min-width:920px){
  /* no desktop a prova volta para a coluna da direita e ocupa as duas linhas */
  .s-hero__grid{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:"titulo prova" "texto prova";
    gap:1.6rem clamp(2rem,4vw,3.5rem);
    align-items:center;
  }
  .s-hero__titulo-area{grid-area:titulo;align-self:end}
  .s-hero__texto{grid-area:texto;align-self:start}
  .s-hero__prova{grid-area:prova}
}

/* monitor: moldura fina, sem brilho. A varredura fica quase invisível e serve
   só para lembrar que a imagem veio de uma câmera. */
.s-monitor{
  position:relative;border:1px solid var(--s-borda-forte);border-radius:var(--s-raio);
  overflow:hidden;background:#05070A;aspect-ratio:4/3;
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(76,154,239,.07);
}
/* a gravação real dispensa a varredura: ela já veio de uma câmera de verdade */
.s-monitor--real{aspect-ratio:958/522}
.s-monitor--real::after{opacity:.35}
.s-monitor--real .s-monitor__rec{color:#FF6B60}
.s-monitor video,.s-monitor img{width:100%;height:100%;object-fit:cover}
.s-monitor::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px);
}
.s-monitor__hud{
  position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;align-items:center;
  gap:.6rem;padding:.55rem .7rem;z-index:2;
  font-family:var(--s-mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.45) 55%,transparent);
  color:#C6CEDA;text-shadow:0 1px 3px rgba(0,0,0,.9);
}
.s-monitor__rec{display:inline-flex;align-items:center;gap:.4rem;color:#D96A6A}
.s-monitor__rec::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.s-legenda{margin:.8rem 0 0;font-size:.82rem;line-height:1.5;color:var(--s-fraco)}

/* ---------- etapas: régua, não card ---------- */
.s-passos{list-style:none;margin:2.5rem 0 0;padding:0;counter-reset:passo}
.s-passos li{
  display:grid;grid-template-columns:180px 1fr;gap:1.8rem;align-items:start;
  padding:1.8rem 0;border-top:1px solid var(--s-borda);
}
.s-sec--claro .s-passos li{border-top-color:var(--s-papel-linha)}
.s-passos li:last-child{border-bottom:1px solid var(--s-borda)}
.s-sec--claro .s-passos li:last-child{border-bottom-color:var(--s-papel-linha)}
.s-passos__fig{
  overflow:hidden;border-radius:6px;aspect-ratio:4/3;background:var(--s-fundo-2);
  box-shadow:0 8px 22px rgba(0,0,0,.32);
}
.s-sec--claro .s-passos__fig{box-shadow:0 6px 18px rgba(13,17,23,.10)}
.s-passos__fig img{width:100%;height:100%;object-fit:cover}
.s-passos__etapa{
  display:block;font-family:var(--s-mono);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--s-azul-claro);margin-bottom:.45rem;
}
.s-sec--claro .s-passos__etapa{color:var(--s-azul)}
.s-passos__txt b{
  text-wrap:balance;display:block;font-family:var(--s-titulo);font-weight:500;font-size:1.2rem;
  line-height:1.25;letter-spacing:-.01em;margin-bottom:.4rem;
}
.s-passos__txt > span{display:block;color:var(--s-fraco);font-size:1rem;line-height:1.6}
.s-sec--claro .s-passos__txt > span{color:var(--s-tinta-fraca)}
.s-passos__extra{
  display:block;margin-top:.9rem;padding-left:.9rem;
  border-left:2px solid var(--s-azul);color:var(--s-texto);font-size:.97rem;font-weight:500;
}
.s-sec--claro .s-passos__extra{color:var(--s-tinta)}
/* a fala vai entre aspas em monoespaçada: lê como transmissão, não como texto de site */
.s-fala{
  display:block;margin:.8rem 0 0;font-family:var(--s-mono);font-size:.92rem;
  line-height:1.5;color:var(--s-texto);
}
.s-sec--claro .s-fala{color:var(--s-tinta)}
@media (max-width:720px){
  .s-passos li{grid-template-columns:1fr;gap:1.1rem}
  /* miniatura de 280px no meio de uma coluna larga ficava perdida */
  .s-passos__fig{max-width:none;aspect-ratio:16/9}
}

/* ---------- comparativo pareado ----------
   Cada par na mesma linha, com o × e o ✓ marcando de que lado a frase está.
   Em duas listas soltas ninguém comparava nada: os itens de um lado não
   caíam na altura do outro. */
.s-versus{margin-top:2.4rem}
.s-versus__cab{display:none}
.s-versus__titulo{
  margin:0;font-family:var(--s-mono);font-size:.72rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--s-fraco);
}
.s-sec--claro .s-versus__titulo{color:var(--s-tinta-fraca)}
.s-versus__titulo--space{color:var(--s-neon)}
.s-sec--claro .s-versus__titulo--space{color:var(--s-azul)}

.s-par{display:grid;gap:0;border-top:1px solid var(--s-borda)}
.s-sec--claro .s-par{border-top-color:var(--s-papel-linha)}
.s-par:last-child{border-bottom:1px solid var(--s-borda)}
.s-sec--claro .s-par:last-child{border-bottom-color:var(--s-papel-linha)}

.s-par__lado{
  display:grid;grid-template-columns:22px 1fr;gap:.1rem .8rem;
  align-content:start;padding:1.3rem 0;
}
.s-par__lado b{
  grid-column:2;font-family:var(--s-titulo);font-weight:500;font-size:1.06rem;line-height:1.25;
}
.s-par__lado span:not(.s-marca){grid-column:2;color:var(--s-fraco);font-size:.97rem;line-height:1.55}
.s-sec--claro .s-par__lado span:not(.s-marca){color:var(--s-tinta-fraca)}
.s-par__lado--velho b{color:var(--s-fraco);font-weight:400}
.s-sec--claro .s-par__lado--velho b{color:#8B95A3}

/* marcadores desenhados em CSS: dois riscos para o ×, um tique para o ✓ */
.s-marca{grid-row:1 / span 2;grid-column:1;width:18px;height:18px;position:relative;margin-top:.28rem}
.s-marca::before,.s-marca::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.s-marca--x{color:#6B7382}
.s-marca--x::before,.s-marca--x::after{top:8px;left:2px;width:14px;height:1.6px}
.s-marca--x::before{transform:rotate(45deg)}
.s-marca--x::after{transform:rotate(-45deg)}
.s-marca--ok{color:var(--s-neon)}
.s-sec--claro .s-marca--ok{color:var(--s-azul)}
.s-marca--ok::before{top:10px;left:1px;width:7px;height:1.8px;transform:rotate(45deg)}
.s-marca--ok::after{top:7px;left:5px;width:13px;height:1.8px;transform:rotate(-52deg)}

@media (min-width:840px){
  .s-versus__cab{
    display:grid;grid-template-columns:1fr 1fr;gap:3rem;
    padding-bottom:1rem;
  }
  .s-par{grid-template-columns:1fr 1fr;gap:3rem}
  /* o filete central é o eixo do argumento: de um lado assistir, do outro proteger */
  .s-par__lado--space{
    padding-left:2.2rem;margin-left:-1.1rem;
    border-left:1px solid var(--s-borda);
  }
  .s-sec--claro .s-par__lado--space{border-left-color:var(--s-papel-linha)}
  .s-sec:not(.s-sec--claro) .s-par__lado--space{
    border-left-color:rgba(62,216,255,.45);
    background:linear-gradient(90deg,rgba(62,216,255,.05),transparent 60%);
    box-shadow:-1px 0 16px -8px var(--s-neon-glow);
  }
  .s-sec--claro .s-par__lado--space{background:linear-gradient(90deg,rgba(30,111,217,.04),transparent 60%)}
  .s-versus__cab .s-versus__titulo--space{padding-left:2.2rem;margin-left:-1.1rem}
}
@media (max-width:839px){
  /* empilhado, o par deixava de ser par: some a comparação, que é o conteúdo
     desta seção. Fica lado a lado em qualquer largura, com tipografia menor. */
  .s-versus__cab{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;padding-bottom:.7rem}
  .s-versus__titulo{font-size:.6rem;letter-spacing:.12em;line-height:1.4}
  .s-par{grid-template-columns:1fr 1fr;gap:.9rem}
  .s-par__lado{grid-template-columns:15px 1fr;gap:.1rem .5rem;padding:1rem 0}
  .s-par__lado b{font-size:.92rem}
  .s-par__lado span:not(.s-marca){font-size:.84rem;line-height:1.45}
  .s-marca{width:13px;height:13px;margin-top:.2rem}
  .s-marca--x::before,.s-marca--x::after{top:6px;left:1px;width:11px}
  .s-marca--ok::before{top:8px;left:0;width:5px}
  .s-marca--ok::after{top:5px;left:3px;width:10px}
  .s-par__lado--space{
    padding-left:.9rem;border-left:1px solid var(--s-borda);
  }
  .s-sec--claro .s-par__lado--space{border-left-color:var(--s-papel-linha)}
  .s-sec:not(.s-sec--claro) .s-par__lado--space{border-left-color:rgba(62,216,255,.45)}
}

/* ---------- listas simples ---------- */
.s-pontos{list-style:none;margin:0;padding:0}
.s-pontos li{padding:1rem 0;border-top:1px solid var(--s-borda)}
.s-sec--claro .s-pontos li{border-top-color:var(--s-papel-linha)}
.s-pontos li:first-child{border-top:0}
.s-pontos b{display:block;font-weight:600;font-size:1rem;margin-bottom:.15rem}
.s-pontos span{color:var(--s-fraco);font-size:.96rem;line-height:1.55}
.s-sec--claro .s-pontos span{color:var(--s-tinta-fraca)}

/* ---------- aproveitamos x adicionamos ---------- */
.s-duas{display:grid;gap:2.2rem;margin-top:2.4rem}
@media (min-width:800px){.s-duas{grid-template-columns:1fr 1fr;gap:3rem}}
.s-quadro{padding-top:1.4rem;border-top:1px solid var(--s-borda)}
.s-sec--claro .s-quadro{border-top-color:var(--s-papel-linha)}
.s-quadro--destaque{
  border-top-color:transparent;
  background-image:linear-gradient(90deg,var(--s-azul),rgba(76,154,239,.08));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 0;
}
.s-quadro h3{
  margin:0 0 1.1rem;font-family:var(--s-mono);font-size:.72rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--s-fraco);
}
.s-sec--claro .s-quadro h3{color:var(--s-tinta-fraca)}
.s-quadro--destaque h3{color:var(--s-azul-claro)}
.s-sec--claro .s-quadro--destaque h3{color:var(--s-azul)}
.s-quadro ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.s-quadro li{display:grid;grid-template-columns:16px 1fr;gap:.75rem;align-items:baseline;font-size:1rem}
.s-quadro li svg{width:13px;height:13px;color:var(--s-fraco)}
.s-quadro--destaque li svg{color:var(--s-azul-claro)}
.s-sec--claro .s-quadro--destaque li svg{color:var(--s-azul)}

/* ---------- abas ---------- */
.s-abas{display:flex;gap:1.6rem;flex-wrap:wrap;margin:0 0 1.8rem;border-bottom:1px solid var(--s-borda)}
.s-sec--claro .s-abas{border-bottom-color:var(--s-papel-linha)}
.s-aba{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--s-fraco);
  padding:.6rem 0;cursor:pointer;font-weight:500;font-size:.97rem;margin-bottom:-1px;
}
.s-sec--claro .s-aba{color:var(--s-tinta-fraca)}
.s-aba[aria-selected="true"]{color:var(--s-texto);border-bottom-color:var(--s-azul)}
.s-sec--claro .s-aba[aria-selected="true"]{color:var(--s-tinta)}
.s-painel{display:grid;gap:1.8rem}
.s-painel[hidden]{display:none}
.s-painel__fig{overflow:hidden;border-radius:6px;aspect-ratio:16/10;background:var(--s-fundo-2)}
.s-painel__fig img{width:100%;height:100%;object-fit:cover}
@media (min-width:860px){.s-painel{grid-template-columns:1fr 1fr;gap:2.6rem;align-items:start}}

/* ---------- faq ---------- */
.s-faq{margin-top:2.2rem;border-top:1px solid var(--s-borda)}
.s-sec--claro .s-faq{border-top-color:var(--s-papel-linha)}
.s-faq details{border-bottom:1px solid var(--s-borda)}
.s-sec--claro .s-faq details{border-bottom-color:var(--s-papel-linha)}
.s-faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;position:relative;
  font-family:var(--s-titulo);font-weight:500;font-size:1.03rem;line-height:1.35;
}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{
  content:"";position:absolute;right:.3rem;top:50%;width:9px;height:9px;
  border-right:1.5px solid var(--s-fraco);border-bottom:1.5px solid var(--s-fraco);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.s-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.s-faq p{margin:0 0 1.3rem;color:var(--s-fraco);font-size:.99rem;max-width:62ch}
.s-sec--claro .s-faq p{color:var(--s-tinta-fraca)}

/* ---------- formulário ---------- */
.s-form-bloco{display:grid;gap:2.2rem;margin-top:0}
@media (min-width:900px){.s-form-bloco{grid-template-columns:1fr .85fr;gap:4rem;align-items:start}}
.s-form{
  border:1px solid var(--s-borda);border-radius:var(--s-raio);
  padding:1.6rem 1.4rem;display:grid;gap:1rem;
  background:linear-gradient(180deg,#141B27,#10151E);
  box-shadow:0 18px 46px rgba(0,0,0,.35);
}
.s-sec--claro .s-form{
  /* o formulário é a conversão da página: num card branco sobre fundo branco
     ele desaparecia. Em azul ele vira o único bloco de cor da seção. */
  background:linear-gradient(180deg,#123A6B,#0C2647);
  border-color:#0A2244;color:#EAF2FB;
  box-shadow:0 18px 44px rgba(12,38,71,.30);
}
.s-sec--claro .s-form .s-campo label{color:#9CC4EE}
.s-sec--claro .s-form .s-campo input,
.s-sec--claro .s-form .s-campo select{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#F3F8FF;
}
.s-sec--claro .s-form .s-campo input::placeholder{color:#8FAECE}
.s-sec--claro .s-form .s-lgpd{color:#9CC4EE}
/* botão branco: azul sobre azul não destacaria nada */
.s-sec--claro .s-form .s-btn{
  background:#fff;border-color:#fff;color:#0C2647;
  box-shadow:0 6px 16px rgba(4,17,33,.22);
}
.s-sec--claro .s-form .s-btn:hover{background:#EAF2FB;border-color:#EAF2FB}
.s-sec--claro .s-form .s-btn::before{background:linear-gradient(90deg,transparent,rgba(62,216,255,.7),transparent)}
.s-campo{display:grid;gap:.4rem}
.s-campo label{
  font-family:var(--s-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--s-fraco);
}
.s-sec--claro .s-campo label{color:var(--s-tinta-fraca)}
.s-campo input,.s-campo select{
  background:var(--s-fundo);border:1px solid var(--s-borda);border-radius:6px;
  padding:.78rem .85rem;color:inherit;width:100%;font-size:1rem;
}
.s-sec--claro .s-campo input,.s-sec--claro .s-campo select{background:#fff;border-color:var(--s-papel-linha)}
.s-campo input::placeholder{color:#6E7887}
.s-campo input:focus,.s-campo select:focus{outline:2px solid var(--s-azul);outline-offset:0}
.s-form .s-btn{width:100%;margin-top:.4rem}
.s-lgpd{margin:0;font-size:.8rem;color:var(--s-fraco);text-align:center}
.s-sec--claro .s-lgpd{color:var(--s-tinta-fraca)}
.s-status{margin:0;font-size:.92rem;min-height:1.2em}
.s-status.is-erro{color:#E06A6A}
.s-mel{position:absolute;left:-9999px}
.s-atende{
  margin:1.4rem 0 0;font-family:var(--s-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--s-fraco);
}
.s-sec--claro .s-atende{color:var(--s-tinta-fraca)}

/* ---------- CTA solto ---------- */
.s-cta{margin-top:2rem;display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.s-cta p{margin:0;font-family:var(--s-titulo);font-weight:500;font-size:1.1rem}
.s-fecha .s-col{margin-inline:auto;text-align:center}
.s-fecha .s-lead{margin-inline:auto}
.s-fecha .s-cta{align-items:center}

/* ---------- rodapé ---------- */
.s-rodape{padding:2.6rem 0;border-top:1px solid var(--s-borda);color:var(--s-fraco);font-size:.88rem}
.s-rodape__linha{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center}
.s-rodape img{height:38px;width:auto;opacity:.75}
.s-rodape a{color:var(--s-fraco)}
.s-aviso{margin:2.4rem 0 0;font-size:.79rem;line-height:1.55;color:var(--s-fraco);max-width:68ch}
.s-sec--claro .s-aviso{color:var(--s-tinta-fraca)}

/* ---------- modal do whatsapp ---------- */
.s-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;background:rgba(5,7,10,.78)}
.s-modal[hidden]{display:none}
.s-modal__caixa{
  background:var(--s-fundo-2);border:1px solid var(--s-borda);border-radius:var(--s-raio);
  padding:1.6rem 1.4rem;width:min(100%,410px);position:relative;
}
.s-modal__x{position:absolute;top:.5rem;right:.7rem;background:none;border:0;color:var(--s-fraco);font-size:1.4rem;cursor:pointer;line-height:1}
.s-modal h2{margin:0 0 .3rem;font-family:var(--s-titulo);font-weight:500;font-size:1.15rem}
.s-modal p{margin:0 0 1.2rem;color:var(--s-fraco);font-size:.94rem}

/* ---------- reveal ---------- */
.s-rev{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.s-rev.is-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .s-rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}


/* ============================================================
   CAMADA DE NEON
   Ciano vivo em pouca coisa e sempre em elemento fino: risco, filete, halo,
   marcador. A leitura continua acontecendo no branco e no cinza.
   ============================================================ */

/* rótulo e o risco antes dele */
.s-sec:not(.s-sec--claro) .s-rotulo,
.s-hero .s-rotulo{
  color:var(--s-neon);
  text-shadow:0 0 14px rgba(62,216,255,.30);
}
.s-sec:not(.s-sec--claro) .s-rotulo::before,
.s-hero .s-rotulo::before{
  height:2px;opacity:1;background:var(--s-neon);
  box-shadow:0 0 8px var(--s-neon-glow);
}
.s-sec:not(.s-sec--claro) .s-passos__etapa{
  color:var(--s-neon);text-shadow:0 0 12px rgba(62,216,255,.25);
}

/* o fio sob a headline acende à esquerda e apaga à direita */
.s-hero__titulo b{
  background-image:linear-gradient(90deg,var(--s-neon),rgba(62,216,255,.12));
  background-size:100% .11em;
  filter:drop-shadow(0 2px 10px rgba(62,216,255,.35));
}

/* monitor: halo frio, como tela ligada num ambiente escuro */
.s-monitor{
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(62,216,255,.14),
    0 0 46px -12px rgba(62,216,255,.30);
}
.s-monitor__hud{color:#D6E6F2}

/* comparativo: o filete que separa as duas colunas é o próprio argumento */
@media (min-width:840px){
  .s-sec:not(.s-sec--claro) .s-lado--space{
    border-left-color:rgba(62,216,255,.55);
    box-shadow:-1px 0 18px -6px var(--s-neon-glow);
  }
}
.s-sec:not(.s-sec--claro) .s-lado--space h3{
  color:var(--s-neon);text-shadow:0 0 12px rgba(62,216,255,.25);
}
.s-sec:not(.s-sec--claro) .s-lado--space{
  background:linear-gradient(180deg,rgba(62,216,255,.06),transparent 72%);
}

/* quadro "Adicionamos" */
.s-sec:not(.s-sec--claro) .s-quadro--destaque{
  background-image:linear-gradient(90deg,var(--s-neon),rgba(62,216,255,.04));
}
.s-sec:not(.s-sec--claro) .s-quadro--destaque h3{color:var(--s-neon)}
.s-sec:not(.s-sec--claro) .s-quadro--destaque li svg{color:var(--s-neon)}

/* destaque do "Resultado:" dentro da 2ª etapa */
.s-sec:not(.s-sec--claro) .s-passos__extra{
  border-left-color:var(--s-neon);
  box-shadow:-1px 0 14px -6px var(--s-neon-glow);
}
.s-sec:not(.s-sec--claro) .s-fala{color:#CFEAF7}

/* aba ativa */
.s-sec:not(.s-sec--claro) .s-aba[aria-selected="true"]{
  border-bottom-color:var(--s-neon);
  box-shadow:0 1px 10px -2px var(--s-neon-glow);
}

/* botão: um fio de luz na borda de cima, que é o que dá o brilho de vidro */
.s-btn{position:relative;overflow:hidden}
.s-btn::before{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(62,216,255,.85),transparent);
}
.s-btn:hover{box-shadow:0 8px 24px rgba(24,86,180,.38),0 0 22px -8px var(--s-neon-glow)}
.s-btn--zap::before{background:linear-gradient(90deg,transparent,rgba(180,255,214,.7),transparent)}

/* campo em foco */
.s-campo input:focus,.s-campo select:focus{
  outline:1px solid var(--s-neon);outline-offset:0;
  box-shadow:0 0 0 3px rgba(62,216,255,.14);
}

/* divisor entre seções escuras: acende no meio */
.s-sec + .s-sec:not(.s-sec--claro){
  border-image:linear-gradient(90deg,transparent,rgba(62,216,255,.35) 50%,transparent) 1;
}

/* seta do FAQ */
.s-sec:not(.s-sec--claro) .s-faq summary:hover::after{border-color:var(--s-neon)}

/* topo: fio de luz na base da barra */
.s-topo{box-shadow:0 1px 0 rgba(62,216,255,.10)}


/* ---------- WhatsApp flutuante ----------
   O clique é interceptado pelo pop-up que pede nome e telefone antes de abrir
   a conversa: sem isso, quem abre o WhatsApp e desiste some sem virar lead. */
.s-zap-flutua{
  position:fixed;right:20px;bottom:20px;z-index:55;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.2rem;border-radius:999px;text-decoration:none;
  background:linear-gradient(180deg,#25A059,#1A7C42);color:#fff;font-weight:600;font-size:.95rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06);
  transition:transform .16s ease,box-shadow .16s ease;
}
.s-zap-flutua:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.42)}
.s-zap-flutua svg{width:20px;height:20px;flex:none}
/* no celular quem cumpre esse papel é a barra fixa, e os dois juntos cobrem o conteúdo */
@media (max-width:759px){.s-zap-flutua{display:none}}


/* ---------- WhatsApp flutuante ----------
   O clique é interceptado pelo pop-up que pede nome e telefone antes de abrir
   a conversa: sem isso, quem abre o WhatsApp e desiste some sem virar lead. */
.s-zap-flutua{
  position:fixed;right:20px;bottom:20px;z-index:55;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.2rem;border-radius:999px;text-decoration:none;
  background:linear-gradient(180deg,#25A059,#1A7C42);color:#fff;font-weight:600;font-size:.95rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06);
  transition:transform .16s ease,box-shadow .16s ease;
}
.s-zap-flutua:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.42)}
.s-zap-flutua svg{width:20px;height:20px;flex:none}
/* no celular quem cumpre esse papel é a barra fixa, e os dois juntos cobrem o conteúdo */
@media (max-width:759px){.s-zap-flutua{display:none}}


/* ---------- faixa panorâmica ---------- */
.s-faixa{
  margin:2.6rem 0 0;position:relative;border-radius:var(--s-raio);overflow:hidden;
  border:1px solid var(--s-borda);
}
.s-sec--claro .s-faixa{border-color:var(--s-papel-linha)}
.s-faixa img{
  width:100%;aspect-ratio:960/280;object-fit:cover;object-position:50% 32%;
  /* a faixa é a imagem mais escura do acervo: com o tratamento padrão ela
     virava um retângulo preto */
  filter:grayscale(.45) contrast(1.04) brightness(1.18);
}
.s-faixa figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:1.6rem 1.2rem .9rem;
  font-family:var(--s-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:#D3DEEA;background:linear-gradient(to top,rgba(4,7,11,.9),transparent);
}
.s-sec:not(.s-sec--claro) .s-faixa{box-shadow:0 0 0 1px rgba(62,216,255,.10),0 18px 40px rgba(0,0,0,.4)}


/* ---------- selo ----------
   O título da 1ª etapa era "Detecção na Calçada | Antes do Risco". O pipe
   dava peso igual às duas partes e travava a leitura; a segunda metade é
   qualificação, então vira etiqueta. */
.s-selo{
  display:inline-block;vertical-align:middle;margin-left:.6rem;
  padding:.18rem .55rem;border-radius:3px;
  font-family:var(--s-mono);font-size:.6rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.4;
  color:var(--s-neon);border:1px solid rgba(62,216,255,.4);
  background:rgba(62,216,255,.07);
}
.s-sec--claro .s-selo{color:var(--s-azul);border-color:rgba(30,111,217,.35);background:rgba(30,111,217,.05)}

/* ---------- imagem da câmera ao lado do texto ---------- */
.s-comeca{display:grid;gap:2rem}
@media (min-width:860px){
  .s-comeca{grid-template-columns:1fr minmax(240px,300px);gap:3.4rem;align-items:center}
}
/* no celular a foto em retrato tomaria a tela inteira */
@media (max-width:859px){.s-camera{max-width:420px;aspect-ratio:4/3}}
.s-camera{
  margin:0;position:relative;border-radius:var(--s-raio);overflow:hidden;
  border:1px solid var(--s-borda);
}
.s-sec--claro .s-camera{border-color:var(--s-papel-linha)}
.s-camera{aspect-ratio:3/4}
.s-camera img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.s-camera figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem .9rem .8rem;
  font-family:var(--s-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:#D3DEEA;background:linear-gradient(to top,rgba(4,7,11,.92),transparent);
}
.s-sec:not(.s-sec--claro) .s-camera{box-shadow:0 0 0 1px rgba(62,216,255,.10),0 16px 36px rgba(0,0,0,.4)}