/* =========================================================
   WKELNIOR — Tecnologia & Inteligência de Dados
   Folha de estilo principal
   Paleta extraída da marca: azul-marinho profundo, prata
   escovada e acento azul elétrico.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Fundos */
  --ink-900:#04080F;
  --ink-850:#070D18;
  --ink-800:#0A1220;
  --ink-750:#0D1727;
  --ink-700:#111D30;
  --ink-600:#16243A;

  /* Linhas */
  --line:rgba(150,172,205,.13);
  --line-2:rgba(150,172,205,.24);
  --line-3:rgba(150,172,205,.40);

  /* Texto */
  --text:#E9EFF8;
  --text-2:#A7B5CB;
  --text-3:#6E8099;

  /* Acento */
  --accent:#04B2D9;
  --accent-2:#0389AD;
  --accent-3:#045F78;
  --accent-soft:rgba(4,178,217,.11);
  --accent-line:rgba(4,178,217,.32);

  /* Prata escovada (do monograma) */
  --silver:linear-gradient(135deg,#FFFFFF 0%,#D3DDEB 24%,#8B9BB3 48%,#F0F5FC 70%,#A9B8CD 100%);

  /* Formas */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;

  /* Sombras */
  --shadow-md:0 18px 40px -18px rgba(0,0,0,.75);

  /* Ritmo */
  --pad:clamp(20px,5vw,40px);
  --maxw:1220px;
  --sec-y:clamp(76px,10vw,132px);

  /* Tipografia */
  --font-display:'Sora','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;

  color-scheme:dark;

  /* Textura "rede de dados": pontos conectados por linhas finas, no
     estilo do próprio SST Control — substitui a antiga malha quadriculada
     em todo fundo técnico do site. Ladrilho de 640x480 sem elementos
     tocando a borda, para repetir sem cortar linha nenhuma ao meio. */
  --bg-mockup:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgMzYwIiBmaWxsPSJub25lIj48cmVjdCB4PSIyMCIgeT0iMjAiIHdpZHRoPSI2MDAiIGhlaWdodD0iMzIwIiByeD0iMTQiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wMjUpIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4xNCkiIHN0cm9rZS13aWR0aD0iMS41Ii8+PGxpbmUgeDE9IjIwIiB5MT0iNTQiIHgyPSI2MjAiIHkyPSI1NCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPjxjaXJjbGUgY3g9IjQyIiBjeT0iMzciIHI9IjQiIGZpbGw9IiNGRjVGNTciIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9IjU4IiBjeT0iMzciIHI9IjQiIGZpbGw9IiNGRUJDMkUiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxjaXJjbGUgY3g9Ijc0IiBjeT0iMzciIHI9IjQiIGZpbGw9IiMyOEM4NDAiIGZpbGwtb3BhY2l0eT0iMC44NSIvPjxyZWN0IHg9IjEwMCIgeT0iMjkiIHdpZHRoPSIyNDAiIGhlaWdodD0iMTYiIHJ4PSI4IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4xMikiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSIxNTAiIHkxPSI1NCIgeDI9IjE1MCIgeTI9IjM0MCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPjxyZWN0IHg9IjM0IiB5PSI2OCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiByeD0iNCIgZmlsbD0icmdiYSg1OSwxNTcsMjU1LDAuMTgpIiBzdHJva2U9InJnYmEoNTksMTU3LDI1NSwwLjU1KSIgc3Ryb2tlLXdpZHRoPSIxIi8+PHJlY3QgeD0iMzQiIHk9IjEwNC41IiB3aWR0aD0iOTIiIGhlaWdodD0iNyIgcng9IjMuNSIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjE2KSIvPjxyZWN0IHg9IjI2IiB5PSIxMzQiIHdpZHRoPSIxMTgiIGhlaWdodD0iMjAiIHJ4PSI2IiBmaWxsPSJyZ2JhKDU5LDE1NywyNTUsMC4xNCkiLz48cmVjdCB4PSIzNCIgeT0iMTM2LjUiIHdpZHRoPSI3NiIgaGVpZ2h0PSI3IiByeD0iMy41IiBmaWxsPSJyZ2JhKDU5LDE1NywyNTUsMC45KSIvPjxyZWN0IHg9IjM0IiB5PSIxNjguNSIgd2lkdGg9Ijg0IiBoZWlnaHQ9IjciIHJ4PSIzLjUiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xNikiLz48cmVjdCB4PSIzNCIgeT0iMjAwLjUiIHdpZHRoPSI2OCIgaGVpZ2h0PSI3IiByeD0iMy41IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMTYpIi8+PHJlY3QgeD0iMzQiIHk9IjIzMi41IiB3aWR0aD0iODAiIGhlaWdodD0iNyIgcng9IjMuNSIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjE2KSIvPjxyZWN0IHg9IjE4MiIgeT0iNzIiIHdpZHRoPSIxNTAiIGhlaWdodD0iMTAiIHJ4PSI1IiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMjIpIi8+PHJlY3QgeD0iMTgyIiB5PSI5MCIgd2lkdGg9IjIzOCIgaGVpZ2h0PSI2IiByeD0iMyIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIi8+PHJlY3QgeD0iMTgyIiB5PSIxMTgiIHdpZHRoPSIxMzAiIGhlaWdodD0iNTgiIHJ4PSIxMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzMikiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIiBzdHJva2Utd2lkdGg9IjEiLz48cmVjdCB4PSIxOTgiIHk9IjEzNCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUiIHJ4PSIyLjUiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xOCkiLz48cmVjdCB4PSIxOTgiIHk9IjE0OCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjExIiByeD0iNCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjMpIi8+PHJlY3QgeD0iMzI2IiB5PSIxMTgiIHdpZHRoPSIxMzAiIGhlaWdodD0iNTgiIHJ4PSIxMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzMikiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIiBzdHJva2Utd2lkdGg9IjEiLz48cmVjdCB4PSIzNDIiIHk9IjEzNCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUiIHJ4PSIyLjUiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xOCkiLz48cmVjdCB4PSIzNDIiIHk9IjE0OCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjExIiByeD0iNCIgZmlsbD0icmdiYSg1OSwxNTcsMjU1LDAuODUpIi8+PHJlY3QgeD0iNDcwIiB5PSIxMTgiIHdpZHRoPSIxMzAiIGhlaWdodD0iNTgiIHJ4PSIxMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzMikiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIiBzdHJva2Utd2lkdGg9IjEiLz48cmVjdCB4PSI0ODYiIHk9IjEzNCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjUiIHJ4PSIyLjUiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4xOCkiLz48cmVjdCB4PSI0ODYiIHk9IjE0OCIgd2lkdGg9IjcwIiBoZWlnaHQ9IjExIiByeD0iNCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjMpIi8+PHJlY3QgeD0iMTgyIiB5PSIxOTIiIHdpZHRoPSI0MTgiIGhlaWdodD0iMTQ4IiByeD0iMTAiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wMjgpIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wOSkiIHN0cm9rZS13aWR0aD0iMSIvPjxsaW5lIHgxPSIyMDAiIHkxPSIyNDAiIHgyPSI1ODIiIHkyPSIyNDAiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIgc3Ryb2tlLXdpZHRoPSIxIi8+PGxpbmUgeDE9IjIwMCIgeTE9IjI4MCIgeDI9IjU4MiIgeTI9IjI4MCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDUpIiBzdHJva2Utd2lkdGg9IjEiLz48bGluZSB4MT0iMjAwIiB5MT0iMzIwIiB4Mj0iNTgyIiB5Mj0iMzIwIiBzdHJva2U9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiIHN0cm9rZS13aWR0aD0iMSIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYWciIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9InJnYmEoNTksMTU3LDI1NSwwLjMpIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJyZ2JhKDU5LDE1NywyNTUsMCkiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSJNMjAwLDMwNCBDIDI0MCwzMDAgMjYwLDI1MCAzMDAsMjU2IFMgMzYwLDMwMCA0MDAsMjcwIFMgNDYwLDIxNCA1MDAsMjIyIFMgNTYwLDI0MCA1ODIsMjE0IEw1ODIsMzMyIEwyMDAsMzMyIFoiIGZpbGw9InVybCgjYWcpIi8+PHBhdGggZD0iTTIwMCwzMDQgQyAyNDAsMzAwIDI2MCwyNTAgMzAwLDI1NiBTIDM2MCwzMDAgNDAwLDI3MCBTIDQ2MCwyMTQgNTAwLDIyMiBTIDU2MCwyNDAgNTgyLDIxNCIgc3Ryb2tlPSJyZ2JhKDU5LDE1NywyNTUsMC44NSkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGNpcmNsZSBjeD0iMzAwIiBjeT0iMjU2IiByPSIzLjQiIGZpbGw9InJnYmEoNTksMTU3LDI1NSwwLjk1KSIvPjxjaXJjbGUgY3g9IjQwMCIgY3k9IjI3MCIgcj0iMy40IiBmaWxsPSJyZ2JhKDU5LDE1NywyNTUsMC45NSkiLz48Y2lyY2xlIGN4PSI1MDAiIGN5PSIyMjIiIHI9IjMuNCIgZmlsbD0icmdiYSg1OSwxNTcsMjU1LDAuOTUpIi8+PC9zdmc+");

  /* Ilustração única de um dashboard esboçado (janela, barra lateral,
     cartões e gráfico) usada nos três lugares onde o projeto ainda não
     tem print real. Substitui a antiga letra gigante + textura ladrilhada,
     que ficava repetitiva quando encolhida para o tamanho de um card. */
  --bg-network:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNDgwIiBmaWxsPSJub25lIj48bGluZSB4MT0iOTAiIHkxPSI3MCIgeDI9IjIzMCIgeTI9IjEzMCIgc3Ryb2tlPSIjOUFBQ0M1IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIwLjM4Ii8+PGxpbmUgeDE9IjIzMCIgeTE9IjEzMCIgeDI9IjM4MCIgeTI9IjYwIiBzdHJva2U9IiM5QUFDQzUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzgiLz48bGluZSB4MT0iMjMwIiB5MT0iMTMwIiB4Mj0iMTUwIiB5Mj0iMjIwIiBzdHJva2U9IiM5QUFDQzUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzgiLz48bGluZSB4MT0iMTUwIiB5MT0iMjIwIiB4Mj0iMzIwIiB5Mj0iMjUwIiBzdHJva2U9IiM5QUFDQzUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzgiLz48bGluZSB4MT0iMzgwIiB5MT0iNjAiIHgyPSI1MDAiIHkyPSIxNTAiIHN0cm9rZT0iIzlBQUNDNSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4zOCIvPjxsaW5lIHgxPSIzMjAiIHkxPSIyNTAiIHgyPSI1MDAiIHkyPSIxNTAiIHN0cm9rZT0iIzlBQUNDNSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4zOCIvPjxsaW5lIHgxPSI1MDAiIHkxPSIxNTAiIHgyPSI1NjAiIHkyPSIyNzAiIHN0cm9rZT0iIzlBQUNDNSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4zOCIvPjxsaW5lIHgxPSI1MDAiIHkxPSIxNTAiIHgyPSI2MDAiIHkyPSI2MCIgc3Ryb2tlPSIjOUFBQ0M1IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIwLjM4Ii8+PGxpbmUgeDE9IjU2MCIgeTE9IjI3MCIgeDI9IjQzMCIgeTI9IjM0MCIgc3Ryb2tlPSIjOUFBQ0M1IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIwLjM4Ii8+PGxpbmUgeDE9IjQzMCIgeTE9IjM0MCIgeDI9IjI0MCIgeTI9IjM2MCIgc3Ryb2tlPSIjOUFBQ0M1IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIwLjM4Ii8+PGxpbmUgeDE9IjI0MCIgeTE9IjM2MCIgeDI9IjgwIiB5Mj0iMzAwIiBzdHJva2U9IiM5QUFDQzUiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuMzgiLz48bGluZSB4MT0iMTUwIiB5MT0iMjIwIiB4Mj0iODAiIHkyPSIzMDAiIHN0cm9rZT0iIzlBQUNDNSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4zOCIvPjxsaW5lIHgxPSIzMjAiIHkxPSIyNTAiIHgyPSIyNDAiIHkyPSIzNjAiIHN0cm9rZT0iIzlBQUNDNSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC4zOCIvPjxjaXJjbGUgY3g9IjkwIiBjeT0iNzAiIHI9IjEuOCIgZmlsbD0iI0M3RDNFMyIgZmlsbC1vcGFjaXR5PSIwLjUiLz48Y2lyY2xlIGN4PSIyMzAiIGN5PSIxMzAiIHI9IjEuOCIgZmlsbD0iI0M3RDNFMyIgZmlsbC1vcGFjaXR5PSIwLjUiLz48Y2lyY2xlIGN4PSIzODAiIGN5PSI2MCIgcj0iMS44IiBmaWxsPSIjQzdEM0UzIiBmaWxsLW9wYWNpdHk9IjAuNSIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjIyMCIgcj0iMS44IiBmaWxsPSIjQzdEM0UzIiBmaWxsLW9wYWNpdHk9IjAuNSIvPjxjaXJjbGUgY3g9IjMyMCIgY3k9IjI1MCIgcj0iMS44IiBmaWxsPSIjQzdEM0UzIiBmaWxsLW9wYWNpdHk9IjAuNSIvPjxjaXJjbGUgY3g9IjUwMCIgY3k9IjE1MCIgcj0iMTEiIGZpbGw9IiMzQjlERkYiIGZpbGwtb3BhY2l0eT0iMC4xMCIvPjxjaXJjbGUgY3g9IjUwMCIgY3k9IjE1MCIgcj0iNS41IiBmaWxsPSIjM0I5REZGIiBmaWxsLW9wYWNpdHk9IjAuMjIiLz48Y2lyY2xlIGN4PSI1MDAiIGN5PSIxNTAiIHI9IjIuMyIgZmlsbD0iIzNCOURGRiIgZmlsbC1vcGFjaXR5PSIwLjk1Ii8+PGNpcmNsZSBjeD0iNTYwIiBjeT0iMjcwIiByPSIxLjgiIGZpbGw9IiNDN0QzRTMiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PGNpcmNsZSBjeD0iNDMwIiBjeT0iMzQwIiByPSIxLjgiIGZpbGw9IiNDN0QzRTMiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PGNpcmNsZSBjeD0iMjQwIiBjeT0iMzYwIiByPSIxLjgiIGZpbGw9IiNDN0QzRTMiIGZpbGwtb3BhY2l0eT0iMC41Ii8+PGNpcmNsZSBjeD0iODAiIGN5PSIzMDAiIHI9IjEuOCIgZmlsbD0iI0M3RDNFMyIgZmlsbC1vcGFjaXR5PSIwLjUiLz48Y2lyY2xlIGN4PSI2MDAiIGN5PSI2MCIgcj0iMS44IiBmaWxsPSIjQzdEM0UzIiBmaWxsLW9wYWNpdHk9IjAuNSIvPjwvc3ZnPg==");
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--text-2);
  background:var(--ink-850);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- 2b. FUNDO ANIMADO ----------
   A rede de pontos (iniciarRede, em site.js) é um canvas fixo do tamanho da
   tela, atrás de todo o conteúdo — funciona como papel de parede: a página
   rola por cima e a rede continua ali, do topo ao rodapé.
   100lvh (a altura da tela com a barra do navegador recolhida) evita que a
   rede estique quando a barra do celular aparece e some. */
.fundo-rede{
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  display:block;
  width:100%;
  height:100vh;
  height:100lvh;
  pointer-events:none;
  opacity:var(--rede-forca,.8);
}
/* Três botões de ajuste:
   --rede-forca   a força da rede
   --veu-forca    a sombra que protege a leitura atrás do texto do topo
   --fundo-secao  o fundo escuro translúcido das seções (seção 2c) */
:root{--rede-forca:.8;--veu-forca:.5;--fundo-secao:.66}
@media (max-width:760px){
  /* No celular o texto ocupa a largura toda: véu e fundo mais leves, senão a
     rede some justamente onde a pessoa está olhando. */
  :root{--rede-forca:.9;--veu-forca:.28;--fundo-secao:.6}
}

/* ---------- 2c. FUNDO DAS SEÇÕES ----------
   Com a rede atrás do site inteiro, textos e cartões pareciam soltos no ar.
   Cada seção tem o fundo escuro do site, só que translúcido: a rede continua
   aparecendo, mais fraca, e o conteúdo volta a ter chão. O topo de cada página
   (hero da home, topo das páginas de venda e de projeto) fica sem esse fundo,
   com a rede forte, e desce para a primeira seção num degradê. */
.section,
.lp-sec{background-color:rgba(7,13,24,var(--fundo-secao))}

/* Catálogo: a seção é a página inteira; o fundo começa no título e firma
   até a lista de projetos. */
.section.page-top{
  background-color:transparent;
  background-image:linear-gradient(180deg,rgba(7,13,24,0) 0,rgba(7,13,24,var(--fundo-secao)) clamp(420px,52vw,660px));
}

/* Degradê do topo para a primeira seção */
.hero::after,
.lp .page-top::after,
.proj-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:clamp(110px,14vw,210px);
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,13,24,0),rgba(7,13,24,var(--fundo-secao)));
}
.proj-hero{position:relative}

/* O respiro entre a última seção e o rodapé também tem fundo, senão vira
   uma faixa de rede forte no meio do caminho. */
.footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:calc(100% + 1px);
  height:clamp(48px,7vw,90px);
  background:rgba(7,13,24,var(--fundo-secao));
  pointer-events:none;
}

/* Brilho ambiente fixo ao fundo da página inteira */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 560px at 82% -8%,rgba(4,178,217,.02),transparent 62%),
    radial-gradient(1100px 700px at 50% 108%,rgba(4,178,217,.012),transparent 65%);
  pointer-events:none;
}

/* O atributo hidden sempre esconde, mesmo em elementos com display próprio */
[hidden]{display:none!important}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text);
  line-height:1.14;
  letter-spacing:-.022em;
  margin:0;
  font-weight:600;
  text-wrap:balance;
}

p{text-wrap:pretty}

p{margin:0}

::selection{background:rgba(4,178,217,.3);color:#fff}

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

/* Barra de rolagem */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink-900)}
::-webkit-scrollbar-thumb{background:#1E2F49;border-radius:99px;border:3px solid var(--ink-900)}
::-webkit-scrollbar-thumb:hover{background:#2C4569}

/* ---------- 3. LAYOUT ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{padding-block:var(--sec-y);position:relative}
.section--tight{padding-block:clamp(52px,7vw,88px)}

.section-head{max-width:720px;margin-bottom:clamp(36px,5vw,58px)}
.section-head--center{margin-inline:auto;text-align:center}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:26px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent));
}
.section-head--center .eyebrow::after{
  content:"";
  width:26px;
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
}

.section-title{
  font-size:clamp(29px,4.4vw,46px);
  margin-bottom:18px;
}

.section-sub{
  font-size:clamp(15.5px,1.6vw,17.5px);
  color:var(--text-2);
  max-width:62ch;
}
.section-head--center .section-sub{margin-inline:auto}

/* Texto com acabamento metálico */
.metal{
  background:var(--silver);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.accent{color:var(--accent)}

/* ---------- 4. BOTÕES ---------- */
.btn{
  --btn-bg:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 26px;
  border-radius:99px;
  border:1px solid var(--line-2);
  background:var(--btn-bg);
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:-.005em;
  color:var(--text);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s,background-color .28s;
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none}

.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* Primário — azul elétrico com brilho */
.btn--primary{
  border-color:transparent;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);
  color:#fff;
  box-shadow:0 10px 30px -12px rgba(4,178,217,.75);
}
.btn--primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.34) 48%,transparent 62%);
  transform:translateX(-130%);
  transition:transform .75s cubic-bezier(.2,.7,.3,1);
}
.btn--primary:hover::after{transform:translateX(130%)}
.btn--primary:hover{box-shadow:0 18px 44px -14px rgba(4,178,217,.9)}

/* Secundário — vidro */
.btn--ghost{
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.btn--ghost:hover{
  border-color:var(--line-3);
  background:rgba(255,255,255,.075);
}

/* WhatsApp */
.btn--wa{
  border-color:transparent;
  background:linear-gradient(135deg,#2BC468 0%,#12924A 100%);
  color:#fff;
  box-shadow:0 10px 30px -12px rgba(43,196,104,.7);
}
.btn--wa:hover{box-shadow:0 18px 44px -14px rgba(43,196,104,.85)}

.btn--sm{padding:10px 19px;font-size:13.5px}
.btn--lg{padding:17px 34px;font-size:15.5px}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Link com seta */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  color:var(--accent);
  transition:gap .25s;
}
.link-arrow:hover{gap:13px}
.link-arrow svg{width:15px;height:15px}

/* ---------- 5. CABEÇALHO ---------- */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:900;
  transition:background-color .35s,border-color .35s,backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(7,13,24,.82);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom-color:var(--line);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  height:74px;
}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand__mark{
  width:40px;
  height:40px;
  border-radius:50%;
  box-shadow:0 0 0 1px var(--line-2),0 6px 18px -6px rgba(0,0,0,.9);
  transition:box-shadow .3s,transform .3s;
}
.brand:hover .brand__mark{
  box-shadow:0 0 0 1px var(--accent-line),0 8px 26px -6px rgba(4,178,217,.55);
  transform:scale(1.04);
}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  color:var(--text);
}
.brand__tag{
  font-size:9.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--text-3);
  font-weight:500;
}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  padding:9px 15px;
  border-radius:99px;
  font-size:14.5px;
  font-weight:500;
  color:var(--text-2);
  white-space:nowrap;
  transition:color .22s,background-color .22s;
}
/* Os itens do menu são longos ("Quanto custa a mensalidade"): em notebook
   pequeno eles apertam, e abaixo de 1120px o menu vira o botão de três
   linhas, em vez de quebrar cada item em duas linhas. */
@media (max-width:1280px){
  .nav a{padding:9px 11px;font-size:14px}
}
@media (max-width:1120px){
  .nav{display:none}
  .header__cta .burger{display:flex} /* mais específico: a regra base do .burger vem depois */
}
.nav a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav a.is-active{color:var(--text)}
.nav a.is-active::after{
  content:"";
  display:block;
  height:2px;
  width:18px;
  margin:5px auto -4px;
  border-radius:2px;
  background:var(--accent);
}

.header__cta{display:flex;align-items:center;gap:12px;flex:none}

.burger{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  padding:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.burger span{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s;
}
/* Vira um X: a barra do meio some e as outras duas cruzam no centro.
   O deslocamento (7px) é a distância entre os centros: 2px de altura + 5px de gap. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu mobile */
.mobile-menu{
  position:fixed;
  inset:74px 0 auto 0;
  z-index:890;
  background:rgba(7,13,24,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:18px var(--pad) 30px;
  display:none;
  flex-direction:column;
  gap:4px;
}
.mobile-menu.is-open{display:flex}
.mobile-menu a{
  padding:14px 16px;
  border-radius:12px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:500;
  color:var(--text-2);
  border-bottom:1px solid var(--line);
}
.mobile-menu a:last-of-type{border-bottom:0}
.mobile-menu a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.mobile-menu .btn{margin-top:14px}

/* ---------- 6. HERO EDITORIAL ---------- */
.hero{
  position:relative;
  padding-top:clamp(112px,13vw,158px);
  padding-bottom:clamp(56px,7vw,88px);
  overflow:hidden;
  isolation:isolate;
}

/* --- Fundo em camadas: aurora de marca + malha técnica + tela viva --- */

/* 1ª camada: luz de marca, feita à mão (não é gradiente genérico:
   segue o eixo diagonal do monograma, do canto superior direito
   para o inferior esquerdo). */
.hero__aurora{
  position:absolute;
  inset:-30% -10% auto -10%;
  height:135%;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(46% 38% at 78% 12%,rgba(4,178,217,.02),transparent 70%),
    radial-gradient(52% 40% at 14% 30%,rgba(4,95,120,.015),transparent 74%);
  filter:blur(12px);
  animation:auroraDrift 24s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2.5%,1.5%,0) scale(1.06)}
}

/* 2ª camada: a rede animada. Não fica mais presa no topo: é o canvas fixo
   .fundo-rede (seção 2b), atrás do site inteiro, visível do topo ao rodapé. */

/* 3ª camada: a tela que está em foco, desfocada ao fundo */
.hero__bg{
  position:absolute;
  inset:-6% -4% auto -4%;
  height:76%;
  z-index:-4;
  pointer-events:none;
  overflow:hidden;
}
.hero__bg img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  filter:blur(64px) saturate(1.05) brightness(.38);
  transform:scale(1.2);
  transition:opacity 1.2s ease;
}
.hero__bg img.is-on{opacity:.14}
/* A tela desfocada some aos poucos para baixo por máscara, e não por uma
   camada escura por cima: camada escura taparia a rede animada do fundo. */
.hero__bg{
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
}

/* Véu suave atrás do texto do hero: a malha continua aparecendo, mas para
   de disputar com a leitura — sem ele o parágrafo cai para ~2:1 de contraste
   (o mínimo legível é 4,5:1).

   Precisa ser um elemento próprio, e não um ::before na coluna de texto:
   abaixo de 980px essa coluna usa display:contents (para o mosaico entrar no
   meio da sequência), e elemento assim não gera caixa nem pseudo-elemento. */
.hero__veu{
  position:absolute;
  inset:0 34% 0 -14%;
  z-index:-1;
  pointer-events:none;
  background:rgba(7,13,24,var(--veu-forca,.5));
  mask-image:radial-gradient(ellipse 86% 92% at 34% 44%,#000 62%,transparent 96%);
  -webkit-mask-image:radial-gradient(ellipse 86% 92% at 34% 44%,#000 62%,transparent 96%);
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,5.1fr) minmax(0,6.9fr);
  gap:clamp(30px,4vw,58px);
  align-items:center;
}

.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 15px 7px 9px;
  border-radius:99px;
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  font-size:12.5px;
  font-weight:500;
  color:#BFDCFF;
  margin-bottom:24px;
}
.hero__badge b{
  white-space:nowrap;
  display:inline-grid;
  place-items:center;
  padding:3px 9px;
  border-radius:99px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.hero h1{
  font-size:clamp(32px,4vw,50px);
  font-weight:600;
  letter-spacing:-.034em;
  margin-bottom:20px;
}
.hero h1 em{font-style:normal;display:block}

.hero__lead{
  font-size:clamp(15.5px,1.6vw,17.5px);
  color:var(--text-2);
  max-width:52ch;
  margin-bottom:30px;
}

/* Prova concreta, no lugar de selo genérico */
.hero__proof{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px);
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.hero__proof div{position:relative;padding-right:clamp(12px,1.6vw,22px)}
.hero__proof div+div{padding-left:clamp(12px,1.6vw,22px)}
.hero__proof div+div::before{
  content:"";
  position:absolute;
  left:0;top:2px;bottom:2px;
  width:1px;
  background:var(--line);
}
.hero__proof b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(18px,1.9vw,23px);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.1;
  background:var(--silver);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero__proof span{
  display:block;
  font-size:11.8px;
  line-height:1.35;
  color:#8FA0B8;
  margin-top:5px;
}

/* ---------- 6b. MOSAICO DE TELAS ---------- */
.stack{
  position:relative;
  perspective:2000px;
  padding:8px 0 clamp(66px,7vw,90px) clamp(0px,3vw,44px);
}

/* Tela principal */
.stack__main{
  position:relative;
  border-radius:15px;
  overflow:hidden;
  background:#0A121F;
  border:1px solid var(--line-2);
  box-shadow:
    0 2px 0 rgba(255,255,255,.055) inset,
    0 54px 110px -36px rgba(0,0,0,.96),
    0 0 70px -38px rgba(4,178,217,.22);
  transform:rotateY(-9deg) rotateX(3deg);
  transform-origin:right center;
  transition:transform .9s cubic-bezier(.2,.7,.3,1),box-shadow .9s;
  z-index:2;
}
.stack:hover .stack__main{
  transform:rotateY(-3deg) rotateX(1deg);
  box-shadow:
    0 2px 0 rgba(255,255,255,.07) inset,
    0 64px 130px -36px rgba(0,0,0,.96),
    0 0 130px -28px rgba(4,178,217,.66);
}

/* Barra de janela */
.stack__bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:linear-gradient(180deg,#16243A,#101B2C);
  border-bottom:1px solid var(--line);
}
.stack__dot{width:9px;height:9px;border-radius:50%;flex:none}
.stack__dot:nth-child(1){background:#FF5F57}
.stack__dot:nth-child(2){background:#FEBC2E}
.stack__dot:nth-child(3){background:#28C840}
.stack__url{
  flex:1;
  margin-left:8px;
  padding:4px 12px;
  border-radius:6px;
  background:rgba(0,0,0,.34);
  border:1px solid var(--line);
  font-size:10.5px;
  color:var(--text-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stack__stage{position:relative;aspect-ratio:16/9;background:var(--ink-900)}
.stack__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s cubic-bezier(.2,.7,.3,1);
}
.stack__slide.is-on{opacity:1}
.stack__slide img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* Tela secundária, sobreposta no canto — dá profundidade de verdade */
.stack__aside{
  position:absolute;
  left:0;
  bottom:clamp(8px,2vw,20px);
  width:38%;
  max-width:270px;
  border-radius:11px;
  overflow:hidden;
  border:1px solid var(--line-2);
  background:#0A121F;
  box-shadow:0 34px 70px -26px rgba(0,0,0,.96);
  transform:rotateY(-9deg) rotateX(3deg) translateZ(52px);
  transform-origin:right center;
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
  z-index:3;
}
.stack:hover .stack__aside{transform:rotateY(-3deg) rotateX(1deg) translateZ(58px)}
.stack__aside img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;display:block}

/* Etiquetas de vidro flutuando sobre a composição */
.chip{
  position:absolute;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 15px;
  border-radius:13px;
  background:rgba(9,16,28,.78);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--line-2);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  animation:chipFloat 6s ease-in-out infinite;
}
.chip small{
  display:block;
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:400;
  color:var(--text-3);
  margin-top:2px;
  letter-spacing:.01em;
}
.chip i{
  width:30px;height:30px;flex:none;
  border-radius:9px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(4,178,217,.22),rgba(3,137,173,.08));
  border:1px solid var(--accent-line);
  color:var(--accent);
}
.chip i svg{width:15px;height:15px}
.chip--verde i{
  background:linear-gradient(145deg,rgba(43,196,104,.22),rgba(18,146,74,.08));
  border-color:rgba(43,196,104,.4);
  color:#5FE39A;
}

.chip--um{top:clamp(14px,3.4vw,34px);right:clamp(-14px,-1.4vw,0px);animation-delay:-1s}
.chip--dois{bottom:clamp(76px,10.6vw,120px);right:clamp(-6px,-.6vw,0px);animation-delay:-3.4s}

@keyframes chipFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* Navegação do mosaico: fica à direita da tela secundária, embaixo da
   principal. Em cima da miniatura os tracinhos quase não apareciam. */
.stack__nav{
  position:absolute;
  left:calc(min(38%, 270px) + clamp(30px,3.6vw,56px));
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  z-index:4;
}
.stack__pips{display:flex;flex-wrap:wrap;gap:8px}
.stack__pip{
  position:relative;
  width:24px;height:5px;
  border-radius:99px;
  border:0;padding:0;
  background:rgba(150,172,205,.4);
  cursor:pointer;
  transition:background-color .35s,width .35s;
}
/* Área de toque maior que o tracinho */
.stack__pip::before{content:"";position:absolute;inset:-10px -4px}
.stack__pip:hover{background:rgba(150,172,205,.7)}
.stack__pip.is-on{width:38px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.stack__caption{
  margin:0;
  font-size:12.6px;
  line-height:1.55;
  color:var(--text-2);
  transition:opacity .4s;
  max-width:42ch;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.stack__fallback{
  display:grid;
  place-items:center;
  height:100%;
  background:
    radial-gradient(520px 300px at 70% 10%,rgba(4,178,217,.3),transparent 62%),
    linear-gradient(150deg,#0C1728,#060C16);
}
.stack__fallback img{width:44%;max-width:180px;border-radius:50%}

/* ---------- 6c. FAIXA DE CAPACIDADES ---------- */
.marquee{
  position:relative;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,18,32,.7),rgba(7,13,24,.85));
  padding:17px 0;
  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);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marqueeRun 42s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;flex:none}
.marquee__item{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:0 26px;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:500;
  color:var(--text-2);
  white-space:nowrap;
}
.marquee__item::after{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  background:var(--accent);
  opacity:.55;
  margin-left:26px;
}
.marquee__item svg{width:17px;height:17px;color:var(--accent);opacity:.85;flex:none}
@keyframes marqueeRun{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- 7. FAIXA DE NÚMEROS ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.stat{
  background:linear-gradient(180deg,rgba(17,29,48,.92),rgba(10,18,32,.92));
  padding:clamp(24px,3.2vw,34px) clamp(18px,2.4vw,28px);
  text-align:center;
  transition:background-color .3s;
}
.stat:hover{background:linear-gradient(180deg,rgba(22,36,58,.95),rgba(13,23,39,.95))}
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(28px,3.8vw,42px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1;
  margin-bottom:9px;
  background:var(--silver);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.stat__label{
  font-size:12.5px;
  color:var(--text-3);
  letter-spacing:.02em;
}

/* ---------- 8. CARTÕES ---------- */
.card{
  position:relative;
  background:linear-gradient(180deg,rgba(17,29,48,.78),rgba(10,18,32,.72));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,box-shadow .4s;
}
/* Linha de luz no topo, revelada no hover */
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;
  transition:opacity .4s;
  z-index:4;
  pointer-events:none;
}
.card:hover{
  transform:translateY(-5px);
  border-color:var(--line-2);
  box-shadow:var(--shadow-md);
}
.card:hover::before{opacity:1}

/* --- Cartão de serviço --- */
.grid-services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
  gap:20px;
}
.service{padding:clamp(26px,3vw,34px)}
.service__icon{
  width:50px;
  height:50px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(4,178,217,.18),rgba(3,137,173,.07));
  border:1px solid var(--accent-line);
  color:var(--accent);
  margin-bottom:22px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.service:hover .service__icon{transform:scale(1.07) rotate(-4deg)}
.service__icon svg{width:23px;height:23px}
.service h3{font-size:19px;margin-bottom:11px}
.service p{font-size:14.5px;line-height:1.68}
.service__list{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.service__list li{
  font-size:13.5px;
  color:var(--text-3);
  padding-left:20px;
  position:relative;
}
.service__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 9px rgba(4,178,217,.85);
}

/* --- Cartão de projeto --- */
.grid-projects{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(322px,1fr));
  gap:22px;
}

.project{display:flex;flex-direction:column}

.project__thumb{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--ink-900);
  border-bottom:1px solid var(--line);
  display:grid;
  place-items:center;
  isolation:isolate;
}
/* Fundo procedural do card, tonalizado por categoria */
.project__thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 300px at 74% 8%,var(--tint,rgba(4,178,217,.34)),transparent 62%),
    linear-gradient(150deg,#0C1728 0%,#060C16 100%);
}
.project__thumb::after{
  content:"";
  position:absolute;
  inset:12px 12px 0 12px;
  background-image:var(--bg-mockup);
  background-size:contain;
  background-position:center bottom;
  background-repeat:no-repeat;
  opacity:.85;
}
.project__glyph{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:9px;
  background:rgba(9,16,28,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(150,172,205,.22);
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text-2);
  pointer-events:none;
}
.project:hover .project__glyph{background:rgba(9,16,28,.9);border-color:rgba(150,172,205,.35)}

/* Linha de cima do texto do card: categoria à esquerda, selo à direita */
.project__topo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-bottom:11px;
}
.project__topo .project__cat{margin-bottom:0}
.project__flag{
  display:inline-flex;
  align-items:center;
  flex:none;
  gap:7px;
  padding:6px 12px 6px 10px;
  border-radius:99px;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}
/* Mesmas cores dos cartões "Pronto para uso" e "Portfólio" do topo do catálogo */
.project__flag--pronto{
  background:rgba(43,196,104,.2);
  border:1px solid rgba(43,196,104,.55);
  color:#7CEBAA;
}
.project__flag--portfolio{
  background:rgba(4,178,217,.2);
  border:1px solid rgba(4,178,217,.5);
  color:#8FD8F2;
}
.project__flag svg{width:14px;height:14px;flex:none}
.project__flag i{
  width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor;
}

.project__body{
  padding:24px 24px 0;
  display:flex;
  flex-direction:column;
  flex:1;
}
.project__cat{
  font-size:11px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:11px;
}
.project h3{font-size:19.5px;margin-bottom:10px;letter-spacing:-.018em}
.project__desc{
  font-size:14.3px;
  line-height:1.66;
  color:var(--text-2);
  flex:1;
}

.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.tag{
  padding:5px 11px;
  border-radius:7px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.028);
  font-size:11.5px;
  color:var(--text-3);
  letter-spacing:.012em;
}

.project__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:20px 24px;
  margin-top:22px;
  border-top:1px solid var(--line);
}
.project__price{display:flex;flex-direction:column;line-height:1.28}
.project__price small{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.project__price b{
  font-family:var(--font-display);
  font-size:16.5px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.018em;
}

/* Toda a área do cartão fica clicável */
.stretch::after{content:"";position:absolute;inset:0;z-index:3}

/* ---------- 8b. OS DOIS TIPOS DE PROJETO (catálogo) ----------
   Dois cartões grandes no topo do catálogo: explicam as etiquetas
   "Pronto para uso" e "Portfólio" e filtram a lista ao toque. Cada tipo
   tem a sua cor, repetida na etiqueta e na borda dos cartões de projeto. */
.tipos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:0 0 30px;
}
.tipo{
  --cor-rgb:43,196,104;
  --cor-texto:#7CEBAA;
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:18px;
  width:100%;
  padding:24px 26px;
  border-radius:var(--r-lg);
  border:1px solid rgba(var(--cor-rgb),.4);
  background:linear-gradient(135deg,rgba(var(--cor-rgb),.16) 0%,rgba(10,18,32,.86) 62%);
  text-align:left;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s,opacity .3s;
}
.tipo--portfolio{--cor-rgb:4,178,217;--cor-texto:#8FD8F2}
.tipo:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--cor-rgb),.7);
  box-shadow:0 22px 50px -26px rgba(var(--cor-rgb),.6);
}
.tipo:focus-visible{outline:2px solid rgba(var(--cor-rgb),1);outline-offset:3px}
.tipo[aria-pressed="true"]{
  border-color:rgba(var(--cor-rgb),1);
  box-shadow:0 0 0 1px rgba(var(--cor-rgb),1),0 22px 50px -24px rgba(var(--cor-rgb),.65);
}
/* Com um tipo escolhido, o outro recua */
.tipos.tem-filtro .tipo[aria-pressed="false"]{opacity:.55}
.tipos.tem-filtro .tipo[aria-pressed="false"]:hover{opacity:1}

.tipo__icone{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  border-radius:16px;
  background:rgba(var(--cor-rgb),.17);
  border:1px solid rgba(var(--cor-rgb),.5);
  color:var(--cor-texto);
}
.tipo__icone svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tipo__corpo{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.tipo__selo{
  padding:5px 12px;
  border-radius:99px;
  background:rgba(var(--cor-rgb),.2);
  border:1px solid rgba(var(--cor-rgb),.55);
  font-family:var(--font-display);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cor-texto);
}
.tipo__titulo{
  margin-top:3px;
  font-family:var(--font-display);
  font-size:clamp(20px,2.2vw,25px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--text);
}
.tipo__texto{font-size:15px;line-height:1.55;color:var(--text-2)}
.tipo__acao{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:5px;
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  color:var(--cor-texto);
}
.tipo__acao svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.tipo:hover .tipo__acao svg{transform:translateX(3px)}
.tipo[aria-pressed="true"] .tipo__acao svg{display:none}

/* Etiqueta e borda dos cartões de projeto na cor do tipo */
.project[data-tipo="pronto"]{border-color:rgba(43,196,104,.3)}
.project[data-tipo="portfolio"]{border-color:rgba(4,178,217,.26)}
.project[data-tipo="pronto"]:hover{border-color:rgba(43,196,104,.6)}
.project[data-tipo="portfolio"]:hover{border-color:rgba(4,178,217,.55)}

@media (max-width:700px){
  .tipos{grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:24px}
  .tipo{gap:14px;padding:18px 18px 17px}
  .tipo__icone{width:46px;height:46px;border-radius:14px}
  .tipo__icone svg{width:23px;height:23px}
  .tipo__titulo{font-size:19px}
  .tipo__texto{font-size:14.2px}
}

/* ---------- 9. FILTROS ---------- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:34px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}
.filter{
  padding:9px 18px;
  border-radius:99px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);
  font-family:var(--font-display);
  font-size:13.5px;
  font-weight:500;
  color:var(--text-2);
  cursor:pointer;
  transition:all .26s;
}
.filter:hover{border-color:var(--line-3);color:var(--text)}
.filter.is-active{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 24px -10px rgba(4,178,217,.8);
}
.filter span{
  display:inline-block;
  margin-left:7px;
  opacity:.62;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}

.empty-state{
  text-align:center;
  padding:64px 20px;
  border:1px dashed var(--line-2);
  border-radius:var(--r-lg);
  color:var(--text-3);
}

/* ---------- 10. PROCESSO ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:22px;
  counter-reset:step;
}
.step{position:relative;padding-top:32px}
.step::before{
  counter-increment:step;
  content:"0" counter(step);
  position:absolute;
  top:-6px;
  left:0;
  font-family:var(--font-display);
  font-size:clamp(46px,6vw,64px);
  font-weight:700;
  letter-spacing:-.05em;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(150,172,205,.22);
  z-index:0;
}
.step__inner{position:relative;z-index:1;padding-top:22px}
.step h3{font-size:17.5px;margin-bottom:10px}
.step p{font-size:14px;line-height:1.68}
.step__line{
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  margin-bottom:20px;
}

/* ---------- 11. SOBRE ---------- */
.about__text p+p{margin-top:18px}
.about__text p{font-size:15.6px;line-height:1.78}

.pillars{display:flex;flex-direction:column;gap:14px}
.pillar{
  display:flex;
  gap:17px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(17,29,48,.6),rgba(10,18,32,.55));
  transition:border-color .32s,transform .32s;
}
.pillar:hover{border-color:var(--accent-line);transform:translateX(5px)}
.pillar__icon{
  width:42px;height:42px;flex:none;
  border-radius:12px;
  display:grid;place-items:center;
  background:rgba(4,178,217,.1);
  border:1px solid var(--accent-line);
  color:var(--accent);
}
.pillar__icon svg{width:19px;height:19px}
.pillar h4{font-size:15.5px;margin-bottom:6px}
.pillar p{font-size:13.6px;line-height:1.62}

/* ---------- 13. CHAMADA FINAL ---------- */
.cta{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  padding:clamp(42px,6vw,76px) clamp(26px,5vw,64px);
  text-align:center;
  overflow:hidden;
  background:linear-gradient(160deg,rgba(22,36,58,.9),rgba(7,13,24,.94));
}
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(640px 340px at 50% -14%,rgba(4,178,217,.24),transparent 66%);
  pointer-events:none;
}
.cta__inner{position:relative;z-index:1}
.cta h2{font-size:clamp(27px,4vw,42px);margin-bottom:18px}
.cta p{font-size:clamp(15px,1.7vw,17.5px);max-width:58ch;margin:0 auto 34px}
.cta .btn-row{justify-content:center}
.cta__note{
  margin-top:22px;
  font-size:12.8px;
  color:var(--text-3);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
/* Segunda rota da chamada final: o diagnóstico, para quem não quer o WhatsApp agora */
.cta p.cta__diag{margin:16px auto 0;font-size:14px;color:var(--text-2)}
.cta__diag a{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:500}
.cta__diag a:hover{text-decoration:underline}
.cta__diag svg{width:15px;height:15px}

/* ---------- 14. RODAPÉ ---------- */
.footer{
  position:relative;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(4,8,15,.82),rgba(4,8,15,.95));
  padding-top:clamp(48px,6vw,72px);
  margin-top:clamp(48px,7vw,90px);
}
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:clamp(30px,4vw,58px);
  padding-bottom:44px;
}
.footer__about p{font-size:14px;line-height:1.7;margin-top:18px;max-width:40ch}
.footer h4{
  font-size:12px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:18px;
  font-weight:600;
}
.footer__links{display:flex;flex-direction:column;gap:11px}
.footer__links a{
  font-size:14.2px;
  color:var(--text-2);
  transition:color .22s,padding-left .22s;
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.footer__links a:hover{color:var(--accent);padding-left:4px}
.footer__links svg{width:15px;height:15px;flex:none}

.footer__bottom{
  border-top:1px solid var(--line);
  padding-block:22px;
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  align-items:center;
  justify-content:space-between;
  font-size:12.8px;
  color:var(--text-3);
}

/* ---------- 15. BOTÃO FLUTUANTE WHATSAPP ---------- */
.wa-float{
  position:fixed;
  right:clamp(16px,3vw,28px);
  bottom:clamp(16px,3vw,28px);
  z-index:880;
  display:inline-flex;
  align-items:center;
  height:58px;
  padding:0 18px;
  border-radius:99px;
  background:linear-gradient(135deg,#2BC468,#12924A);
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14.5px;
  box-shadow:0 14px 38px -10px rgba(18,146,74,.85),0 0 0 1px rgba(255,255,255,.13) inset;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.wa-float svg{width:27px;height:27px;flex:none}
.wa-float span{
  max-width:0;
  opacity:0;
  white-space:nowrap;
  overflow:hidden;
  transition:max-width .42s cubic-bezier(.2,.7,.3,1),opacity .3s,margin-left .42s;
}
.wa-float:hover{transform:translateY(-3px) scale(1.02)}
.wa-float:hover span{max-width:190px;opacity:1;margin-left:11px}

/* Pulso de atenção */
.wa-float::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:99px;
  border:1.5px solid rgba(43,196,104,.65);
  animation:pulse 2.6s cubic-bezier(.3,0,.6,1) infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.75}
  70%,100%{transform:scale(1.32);opacity:0}
}

/* ---------- 16. PÁGINA DE PROJETO ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  font-size:13px;
  color:var(--text-3);
  margin-bottom:26px;
}
.breadcrumb a{transition:color .22s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb svg{width:13px;height:13px;opacity:.55}

.proj-hero{padding-top:clamp(112px,13vw,146px);padding-bottom:clamp(34px,5vw,52px)}
.proj-hero__grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(32px,4.5vw,60px);
  align-items:start;
}
.proj-hero h1{
  font-size:clamp(31px,4.7vw,50px);
  letter-spacing:-.032em;
  margin-bottom:20px;
}
.proj-hero__lead{font-size:clamp(15.6px,1.7vw,18px);line-height:1.72;margin-bottom:28px}

/* Painel lateral de conversão */
.proj-buy{
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(22,36,58,.92),rgba(8,15,27,.95));
  padding:clamp(24px,3vw,30px);
  position:sticky;
  top:96px;
  box-shadow:var(--shadow-md);
}
.proj-buy__price{
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.proj-buy__price small{
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:7px;
}
.proj-buy__price b{
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,34px);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.1;
  background:var(--silver);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.proj-buy .btn{width:100%}
.proj-buy .btn+.btn{margin-top:11px}
.proj-buy__meta{
  list-style:none;
  margin:22px 0 0;
  padding:20px 0 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:13px;
}
.proj-buy__meta li{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  font-size:13.4px;
}
.proj-buy__meta span{color:var(--text-3);flex:none}
.proj-buy__meta b{color:var(--text);font-weight:500;text-align:right}

.prose h2{
  font-size:clamp(21px,2.6vw,27px);
  margin:clamp(38px,4.5vw,52px) 0 18px;
  padding-top:clamp(30px,4vw,40px);
  border-top:1px solid var(--line);
}
.prose > h2:first-child{border-top:0;padding-top:0;margin-top:0}
.prose p{font-size:15.4px;line-height:1.8;margin-bottom:16px}
.prose ul{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:11px}
.prose ul li{
  position:relative;
  padding-left:29px;
  font-size:15px;
  line-height:1.68;
}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:17px;height:17px;
  border-radius:50%;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
}
.prose ul li::after{
  content:"";
  position:absolute;
  left:5.5px;top:10px;
  width:5px;height:8px;
  border-right:1.6px solid var(--accent);
  border-bottom:1.6px solid var(--accent);
  transform:rotate(42deg);
}
.prose strong{color:var(--text);font-weight:600}

/* Grade de módulos/funcionalidades */
.modules{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:14px;
}
.module{
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.022);
  transition:border-color .3s,background-color .3s;
}
.module:hover{border-color:var(--accent-line);background:rgba(4,178,217,.045)}
.module b{
  display:block;
  font-family:var(--font-display);
  font-size:15px;
  color:var(--text);
  margin-bottom:7px;
}
.module span{font-size:13.4px;line-height:1.6;color:var(--text-2)}

/* Faixa visual do projeto */
.proj-banner{
  aspect-ratio:21/9;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  overflow:hidden;
  position:relative;
  display:grid;
  place-items:center;
  background:var(--ink-900);
}
.proj-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(640px 340px at 72% 4%,var(--tint,rgba(4,178,217,.34)),transparent 62%),
    linear-gradient(150deg,#0C1728,#060C16);
}
.proj-banner::after{
  content:"";
  position:absolute;
  inset:20px;
  background-image:var(--bg-mockup);
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.9;
}
.proj-banner__glyph{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:9px;
  background:rgba(9,16,28,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(150,172,205,.22);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text-2);
  pointer-events:none;
}

/* ---------- 16b. TELA REAL DENTRO DO CARTÃO ---------- */
/* A tela real entra por cima da arte gráfica (z-index maior que o glifo),
   então a troca acontece sem piscar quando a imagem termina de carregar. */
.project__shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  z-index:2;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.project:hover .project__shot{transform:scale(1.055)}
.project__thumb.has-shot .project__glyph{display:none}

/* Com imagem, a tela aparece limpa: o selo saiu de cima dela (fica ao lado da
   categoria), então não precisa mais do degradê escuro de leitura. */
.project__thumb.has-shot::after{content:none}

/* ---------- 16c. COMPROMISSO ---------- */
.promise{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  overflow:hidden;
  background:linear-gradient(150deg,rgba(22,36,58,.86),rgba(7,13,24,.92));
}
.promise::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(760px 380px at 8% 0%,rgba(4,178,217,.2),transparent 62%);
  pointer-events:none;
}
.promise__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(30px,4.5vw,60px);
  padding:clamp(32px,4.5vw,58px);
  align-items:center;
}
.promise h2{
  font-size:clamp(25px,3.4vw,38px);
  margin-bottom:16px;
}
.promise p{font-size:15.6px;line-height:1.75}

.promise__list{
  display:grid;
  gap:14px;
}
.promise__item{
  display:flex;
  gap:16px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.03);
  transition:border-color .3s,transform .3s,background-color .3s;
}
.promise__item:hover{
  border-color:var(--accent-line);
  background:rgba(4,178,217,.055);
  transform:translateX(5px);
}
.promise__num{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  color:var(--accent);
  flex:none;
  width:30px;
  padding-top:1px;
}
.promise__item b{
  display:block;
  font-family:var(--font-display);
  font-size:16px;
  color:var(--text);
  margin-bottom:6px;
  font-weight:600;
}
.promise__item span{font-size:13.8px;line-height:1.65;color:var(--text-2)}

/* ---------- 16e. GALERIA NA PÁGINA DO PROJETO ---------- */
.gallery{display:grid;gap:16px}
.gallery__main{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--ink-900);
  box-shadow:var(--shadow-md);
}
.gallery__main img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:top center;
}
.gallery__cap{
  padding:13px 18px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--text-3);
  background:rgba(10,18,32,.85);
}
.gallery__thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:10px;
}
.gallery__thumb{
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
  background:var(--ink-900);
  cursor:pointer;
  padding:0;
  transition:border-color .3s,transform .3s,opacity .3s;
  opacity:.6;
}
.gallery__thumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.gallery__thumb:hover{opacity:.9;transform:translateY(-2px)}
.gallery__thumb.is-on{
  opacity:1;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 8px 22px -10px rgba(4,178,217,.7);
}

/* ---------- 16f. SHOWCASE EDITORIAL DE PROJETOS ----------
   Cada projeto entregue ganha uma faixa própria, alternando o lado da
   imagem. É o oposto do grid de cards iguais: aqui cada trabalho tem
   espaço para mostrar tela, módulo e resultado. */
.spotlights{display:flex;flex-direction:column;gap:clamp(56px,8vw,104px)}

.spot{
  position:relative;
  /* Respiro reservado acima do quadro da tela, só para o numeral.
     O numeral e a margem usam esta MESMA variável — assim nunca ficam
     fora de sincronia, em nenhum tamanho de tela. */
  --num-gap:clamp(30px,4vw,46px);
  display:grid;
  grid-template-columns:minmax(0,6.6fr) minmax(0,5.4fr);
  gap:clamp(28px,4vw,58px);
  align-items:center;
}
/* Alterna o lado: o segundo, o quarto… invertem a ordem */
.spot:nth-child(even) .spot__visual{order:2}
.spot:nth-child(even) .spot__info{order:1}

/* Folga extra só na primeira faixa: as faixas seguintes já têm bastante
   espaço vindo do "gap" entre uma e outra, mas a primeira depende da
   margem do título da seção, que pode ser mais apertada. */
.spot:first-child{margin-top:clamp(10px,1.6vw,18px)}

/* Número editorial, na folga acima do quadro — nunca por cima da tela,
   nunca embaixo do texto de cima: o tamanho dele é o próprio respiro. */
.spot__num{
  position:absolute;
  top:calc(-1 * var(--num-gap) - 4px);
  left:-4px;
  font-family:var(--font-display);
  font-size:var(--num-gap);
  font-weight:700;
  letter-spacing:-.05em;
  line-height:1;
  color:rgba(150,172,205,.16);
  -webkit-text-stroke:1.3px rgba(150,172,205,.42);
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.spot:nth-child(even) .spot__num{left:auto;right:-4px}

.spot__info{position:relative;z-index:1}

.spot__flag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 13px;
  border-radius:99px;
  font-family:var(--font-display);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.spot__flag i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.spot__flag--pronto{background:rgba(43,196,104,.15);border:1px solid rgba(43,196,104,.42);color:#7CEBAA}
.spot__flag--portfolio{background:rgba(4,178,217,.14);border:1px solid var(--accent-line);color:#9ECBFF}

.spot__cat{
  font-size:11px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
.spot h3{
  font-size:clamp(25px,3.2vw,36px);
  letter-spacing:-.028em;
  margin-bottom:15px;
}
.spot__desc{font-size:15.4px;line-height:1.72;margin-bottom:24px;max-width:46ch}

/* Módulos-chave: prova concreta do que o sistema faz */
.spot__pontos{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:grid;
  gap:10px;
}
.spot__pontos li{
  position:relative;
  padding-left:27px;
  font-size:14.2px;
  line-height:1.6;
  color:var(--text-2);
}
.spot__pontos li::before{
  content:"";
  position:absolute;
  left:0;top:5px;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
}
.spot__pontos li::after{
  content:"";
  position:absolute;
  left:5px;top:8.5px;
  width:5px;height:8px;
  border-right:1.6px solid var(--accent);
  border-bottom:1.6px solid var(--accent);
  transform:rotate(42deg);
}
.spot__pontos b{color:var(--text);font-weight:600}

/* Coluna visual */
.spot__visual{position:relative;z-index:1;margin-top:var(--num-gap)}

.spot__frame{
  position:relative;
  border-radius:15px;
  overflow:hidden;
  border:1px solid var(--line-2);
  background:#0A121F;
  box-shadow:
    0 2px 0 rgba(255,255,255,.05) inset,
    0 44px 90px -34px rgba(0,0,0,.95),
    0 0 80px -34px rgba(4,178,217,.42);
  transition:transform .6s cubic-bezier(.2,.7,.3,1),box-shadow .6s;
}
.spot__frame:hover{
  transform:translateY(-5px);
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 56px 110px -34px rgba(0,0,0,.95),
    0 0 110px -30px rgba(4,178,217,.58);
}
.spot__shot{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:top center;
  display:block;
  background:var(--ink-900);
}

/* Arte gráfica quando o projeto ainda não tem tela */
.spot__art{
  position:relative;
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.spot__art::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(560px 320px at 72% 8%,var(--tint,rgba(4,178,217,.34)),transparent 62%),
    linear-gradient(150deg,#0C1728,#060C16);
}
.spot__art::after{
  content:"";
  position:absolute;
  inset:16px 16px 0 16px;
  background-image:var(--bg-mockup);
  background-size:contain;
  background-position:center bottom;
  background-repeat:no-repeat;
  opacity:.9;
}
.spot__glyph{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 11px;
  border-radius:9px;
  background:rgba(9,16,28,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(150,172,205,.22);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text-2);
  pointer-events:none;
}

/* Miniaturas das outras telas do mesmo projeto */
.spot__tiras{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:10px;
  margin-top:12px;
}
.spot__tira{
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-900);
  cursor:pointer;
  padding:0;
  opacity:.55;
  transition:opacity .3s,border-color .3s,transform .3s;
}
.spot__tira img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.spot__tira:hover{opacity:.85;transform:translateY(-2px)}
.spot__tira.is-on{
  opacity:1;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}

.spot__legenda{
  margin-top:11px;
  font-size:12.6px;
  color:var(--text-3);
  min-height:2.6em;
  transition:opacity .35s;
}

/* ---------- 16g. BENTO DE SERVIÇOS ----------
   Grade assimétrica: a frente principal ocupa o dobro e as demais se
   organizam ao redor. Nada de quatro caixas idênticas. */
.bento{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.bento__card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(17,29,48,.78),rgba(10,18,32,.72));
  padding:clamp(24px,2.8vw,32px);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s,box-shadow .4s;
}
.bento__card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;
  transition:opacity .4s;
}
.bento__card:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:var(--shadow-md);
}
.bento__card:hover::before{opacity:1}

/* O carro-chefe ocupa duas colunas e duas linhas */
.bento__card--hero{
  grid-column:span 2;
  grid-row:span 2;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(520px 300px at 88% 4%,rgba(4,178,217,.16),transparent 64%),
    linear-gradient(165deg,rgba(22,36,58,.9),rgba(8,15,27,.9));
}
.bento__card--wide{grid-column:span 2}

.bento__icon{
  width:46px;height:46px;
  border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(4,178,217,.18),rgba(3,137,173,.07));
  border:1px solid var(--accent-line);
  color:var(--accent);
  margin-bottom:18px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.bento__card:hover .bento__icon{transform:scale(1.08) rotate(-4deg)}
.bento__icon svg{width:21px;height:21px}

.bento__card h3{font-size:18px;margin-bottom:10px}
.bento__card--hero h3{font-size:clamp(21px,2.4vw,26px);margin-bottom:13px}
.bento__card p{font-size:14.2px;line-height:1.68}
.bento__card--hero p{font-size:15.4px;line-height:1.72}

.bento__lista{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:grid;
  gap:9px;
}
.bento__card--hero .bento__lista{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 20px;
  margin-top:auto;
  padding-top:24px;
}
.bento__lista li{
  position:relative;
  padding-left:19px;
  font-size:13.4px;
  color:var(--text-3);
  line-height:1.55;
}
.bento__lista li::before{
  content:"";
  position:absolute;
  left:0;top:8px;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 9px rgba(4,178,217,.8);
}

/* Marca d'água discreta no card principal */
.bento__watermark{
  position:absolute;
  right:-28px;
  bottom:-28px;
  width:190px;
  opacity:.05;
  pointer-events:none;
  border-radius:50%;
}

/* ---------- 16h. BLOCO "A EMPRESA" COM RETRATO ---------- */
.about{
  display:grid;
  grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);
  gap:clamp(30px,4.5vw,64px);
  align-items:start;
}

.portrait{
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.92);
}
.portrait img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 22%;
  filter:saturate(.9) contrast(1.06);
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.portrait:hover img{transform:scale(1.03)}
.portrait::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(4,8,15,.92) 100%);
  pointer-events:none;
}
.portrait figcaption{
  position:absolute;
  inset:auto 0 0 0;
  z-index:1;
  padding:26px 22px 20px;
}
.portrait figcaption b{
  display:block;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  color:var(--text);
}
.portrait figcaption small{
  display:block;
  font-size:12.4px;
  color:var(--text-3);
  margin-top:3px;
}
/* Selo de assinatura sobre o retrato */
.portrait__seal{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 13px;
  border-radius:99px;
  background:rgba(9,16,28,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-2);
  font-family:var(--font-display);
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--text-2);
}
.portrait__seal img{width:20px;height:20px;border-radius:50%;aspect-ratio:auto;filter:none}

/* ---------- 16i. AMPLIAR TELA ----------
   Uma tela de sistema tem 1900px de largura. Exibida num card de 320px,
   nenhum texto sobrevive. O clique abre a imagem no maior tamanho que
   couber na janela, que é onde ela finalmente se lê. */
.zoomable{cursor:zoom-in}

.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  place-items:center;
  padding:clamp(14px,3vw,40px);
  background:rgba(3,7,14,.93);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  opacity:0;
  transition:opacity .28s ease;
}
.lightbox.is-open{display:grid;opacity:1}

.lightbox__palco{
  position:relative;
  max-width:min(1600px,96vw);
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}

/* Área rolável: em modo tamanho real a tela passa a ser percorrida aqui */
.lightbox__viewport{
  width:100%;
  max-height:82vh;
  display:grid;
  place-items:center;
  overflow:auto;
  border-radius:12px;
  overscroll-behavior:contain;
}
.lightbox__viewport::-webkit-scrollbar{width:10px;height:10px}
.lightbox__viewport::-webkit-scrollbar-track{background:rgba(0,0,0,.3)}
.lightbox__viewport::-webkit-scrollbar-thumb{background:#2C4569;border-radius:99px}

.lightbox__img{
  max-width:100%;
  max-height:82vh;
  width:auto;
  border-radius:12px;
  border:1px solid var(--line-2);
  box-shadow:0 50px 110px -30px rgba(0,0,0,.95);
  background:var(--ink-900);
  transform:scale(.97);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.lightbox.is-open .lightbox__img{transform:scale(1)}

/* Tamanho original, com rolagem. É aqui que o texto miúdo se lê. */
.lightbox.pode-ampliar .lightbox__img{cursor:zoom-in}
.lightbox__img.is-real{
  max-width:none;
  max-height:none;
  width:auto;
  cursor:zoom-out;
  border-radius:8px;
}

/* Aviso de que dá para ampliar mais */
.lightbox__legenda::after{
  content:"Clique na tela para ver em tamanho real";
  display:none;
  margin-top:8px;
  font-size:11.6px;
  color:var(--text-3);
  letter-spacing:.02em;
}
.lightbox.pode-ampliar .lightbox__legenda::after{display:block}

.lightbox__legenda{
  text-align:center;
  font-size:13.6px;
  line-height:1.55;
  color:var(--text-2);
  max-width:76ch;
}
.lightbox__legenda b{
  display:block;
  font-family:var(--font-display);
  font-size:15px;
  color:var(--text);
  margin-bottom:4px;
}

/* Controles */
.lightbox__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(12,20,34,.86);
  color:var(--text);
  cursor:pointer;
  padding:0;
  transition:background-color .25s,border-color .25s,transform .25s;
  z-index:2;
}
.lightbox__btn:hover{background:rgba(22,36,58,.96);border-color:var(--line-3)}
.lightbox__btn svg{width:20px;height:20px}
.lightbox__btn--prev{left:clamp(-6px,-1vw,0px)}
.lightbox__btn--next{right:clamp(-6px,-1vw,0px)}
.lightbox__btn--prev:hover{transform:translateY(-50%) translateX(-3px)}
.lightbox__btn--next:hover{transform:translateY(-50%) translateX(3px)}

.lightbox__fechar{
  position:fixed;
  top:clamp(12px,2.5vw,24px);
  right:clamp(12px,2.5vw,24px);
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(12,20,34,.86);
  color:var(--text);
  cursor:pointer;
  padding:0;
  z-index:3;
  transition:background-color .25s,transform .25s;
}
.lightbox__fechar:hover{background:rgba(22,36,58,.96);transform:rotate(90deg)}
.lightbox__fechar svg{width:19px;height:19px}

.lightbox__conta{
  position:absolute;
  top:clamp(12px,2.5vw,24px);
  left:clamp(12px,2.5vw,24px);
  padding:7px 14px;
  border-radius:99px;
  border:1px solid var(--line-2);
  background:rgba(12,20,34,.86);
  font-family:var(--font-display);
  font-size:12px;
  font-weight:600;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
  z-index:3;
}

/* Dica discreta sobre a imagem, só no computador */
.zoom-hint{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border-radius:99px;
  background:rgba(6,12,22,.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line-2);
  font-size:11.5px;
  font-weight:500;
  color:var(--text-2);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s,transform .3s;
  pointer-events:none;
}
.zoom-hint svg{width:13px;height:13px}
.spot__frame:hover .zoom-hint,
.gallery__main:hover .zoom-hint,
.stack__main:hover .zoom-hint{opacity:1;transform:translateY(0)}

/* Na vitrine do topo a dica sobe um pouco, para não brigar com a
   tela secundária sobreposta no canto. */
.stack__stage .zoom-hint{bottom:14px;right:14px;z-index:6}

/* No toque não existe hover: a dica fica sempre visível, porque é ela
   que avisa que a tela abre maior — justamente onde a tela reduzida
   menos se lê. */
@media (hover:none){
  .zoom-hint{opacity:1;transform:none}
  .lightbox__btn{width:42px;height:42px}
}

@media (max-width:620px){
  .lightbox__img{max-height:70vh}
  .lightbox__btn--prev{left:-2px}
  .lightbox__btn--next{right:-2px}
}

/* ---------- 16j. TOPO DAS PÁGINAS INTERNAS ----------
   O catálogo e a página de projeto ganham o mesmo acabamento de fundo da
   home, para o site inteiro parecer a mesma peça — e não uma home bonita
   seguida de páginas cruas. */
.page-top{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
/* Alturas em pixel, não em porcentagem: estas camadas vivem dentro de um
   wrapper que cobre a página inteira, e em % o brilho se espalharia por
   milhares de pixels em vez de ficar no topo. */
.page-top__glow{
  position:absolute;
  inset:-300px -12% auto -12%;
  height:860px;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(42% 34% at 76% 38%,rgba(4,178,217,.02),transparent 70%),
    radial-gradient(36% 40% at 12% 46%,rgba(4,95,120,.015),transparent 72%);
  filter:blur(10px);
}
/* Mesmo véu do hero: z-index igual ao da malha, mas depois dela no HTML,
   então pinta por cima da arte e por baixo do conteúdo. */
.proj-hero .breadcrumb a,
.proj-hero .tag{color:#8FA0B8}

.page-top__veu{
  position:absolute;
  inset:0 34% auto -14%;
  height:620px;
  z-index:-1;
  pointer-events:none;
  background:rgba(7,13,24,var(--veu-forca,.5));
  mask-image:radial-gradient(ellipse 88% 104% at 32% 38%,#000 60%,transparent 96%);
  -webkit-mask-image:radial-gradient(ellipse 88% 104% at 32% 38%,#000 60%,transparent 96%);
}
@media (max-width:980px){
  .page-top__veu{
    inset:0 -14% auto -14%;
    mask-image:radial-gradient(ellipse 80% 96% at 50% 34%,#000 64%,transparent 98%);
    -webkit-mask-image:radial-gradient(ellipse 80% 96% at 50% 34%,#000 64%,transparent 98%);
  }
}

/* ---------- 16k. CARTÃO EM DESTAQUE NO CATÁLOGO ----------
   O primeiro projeto visível ocupa a linha inteira, com a tela à esquerda
   e o texto à direita. Quebra o ritmo do grid e dá ao item mais forte o
   peso que ele merece — inclusive quando o visitante filtra. */
@media (min-width:860px){
  /* O cartão tem três filhos (arte, corpo e rodapé). Em grid, a arte
     ocupa as duas linhas da esquerda e o texto se empilha à direita. */
  .project--destaque{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0,54%) minmax(0,1fr);
    grid-template-rows:1fr auto;
  }
  .project--destaque .project__thumb{
    grid-column:1;
    grid-row:1 / -1;
    aspect-ratio:auto;
    min-height:340px;
    border-bottom:0;
    border-right:1px solid var(--line);
  }
  .project--destaque .project__body{
    grid-column:2;
    grid-row:1;
    padding:clamp(26px,3vw,38px) clamp(26px,3vw,38px) 0;
    justify-content:center;
  }
  .project--destaque .project__foot{
    grid-column:2;
    grid-row:2;
    margin-top:22px;
    padding:20px clamp(26px,3vw,38px) clamp(24px,3vw,32px);
  }
  .project--destaque h3{font-size:clamp(21px,2.4vw,27px)}
  .project--destaque .project__desc{font-size:15px;flex:none}
}

/* Etiqueta de ordem no catálogo */
.filters__resumo{
  margin-left:auto;
  align-self:center;
  font-size:12.8px;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
@media (max-width:700px){
  .filters__resumo{margin-left:0;width:100%;padding-top:4px}
}

/* ---------- 16l. HOME DE CONVERSÃO ----------
   A home recebe tráfego de anúncio no celular. A ordem é: promessa
   ("sem mensalidade / saia das planilhas") com os botões na primeira
   tela, escolha do caso, calculadora da mensalidade, comparativo, prova
   (sistemas entregues), quem faz, como funciona, dúvidas e chamada final.
   Todo botão de conversão abre o WhatsApp com a mensagem da intenção. */

/* Ícones de sprite (<svg><use/></svg>) herdam a cor do texto */
.home svg use{pointer-events:none}

.section--faixa{
  background:linear-gradient(180deg,transparent 0,rgba(13,23,39,.42) 14%,rgba(13,23,39,.42) 86%,transparent 100%),
             rgba(7,13,24,var(--fundo-secao));
}

/* --- Hero --- */
.home .hero h1{font-size:clamp(32px,3.5vw,46px)}  /* título mais longo desde o playbook de 29/09 */
.home .hero h1 em{
  background:linear-gradient(120deg,#5CE6F7 0%,#04B2D9 42%,#2F8FE0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.home .hero__lead{margin-bottom:26px}
.hero__ctas{gap:12px}
.hero__ctas .btn{white-space:normal;text-align:center}

.hero__garantias{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
}
.hero__garantias li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13.6px;
  color:var(--text-2);
}
.hero__garantias svg{width:15px;height:15px;flex:none;color:#34D399}

/* --- Qual é o seu caso --- */
.casos{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,22px);
  align-items:stretch;
  max-width:900px;
  margin-inline:auto;
}
.caso{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(22px,3vw,30px);
  border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(17,29,48,.72),rgba(10,18,32,.6));
}
.caso__icone{
  width:48px;height:48px;
  display:grid;place-items:center;
  margin-bottom:18px;
  border-radius:14px;
  background:rgba(251,113,133,.1);
  border:1px solid rgba(251,113,133,.3);
  color:#FDA4AF;
}
.caso:nth-child(2) .caso__icone{background:rgba(245,165,36,.1);border-color:rgba(245,165,36,.32);color:#FCD34D}
.caso__icone svg{width:23px;height:23px}
.caso h3{font-size:clamp(19px,2vw,22px);margin-bottom:10px;padding-right:0}
.caso p{font-size:14.6px;line-height:1.65;color:var(--text-2);margin:0 0 20px}
.caso__btn{margin-top:auto;width:100%;white-space:normal;text-align:center}
@media (max-width:760px){
  .caso .caso__btn{padding-inline:12px;gap:8px} /* .caso na frente: vence o .btn do celular pequeno (seção 18) */
}
.casos__mais{margin:24px 0 0;text-align:center;font-size:14.6px;color:var(--text-2)}
.casos__mais a{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600}
.casos__mais svg{width:15px;height:15px}

/* --- Calculadora da mensalidade --- */
.calc{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  max-width:1000px;
  margin-inline:auto;
  border-radius:var(--r-xl);
  border:1px solid var(--line-2);
  overflow:hidden;
  background:linear-gradient(160deg,rgba(22,36,58,.88),rgba(7,13,24,.94));
  box-shadow:var(--shadow-md);
}
.calc__form{display:grid;align-content:start;gap:20px;padding:clamp(22px,4vw,40px)}
.calc__campo{display:grid;gap:10px;min-width:0;margin:0;padding:0;border:0}
.calc__rotulo-campo{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--text);padding:0}
.calc__entrada{position:relative;display:flex;align-items:center}
.calc__entrada i{
  position:absolute;
  left:18px;
  font-style:normal;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  color:var(--text-3);
  pointer-events:none;
}
.calc__entrada input{
  width:100%;
  padding:15px 18px 15px 54px;
  border-radius:14px;
  border:1px solid var(--line-2);
  background:rgba(4,8,15,.62);
  color:var(--text);
  font:700 24px/1.2 var(--font-display);
  letter-spacing:-.02em;
  transition:border-color .2s,box-shadow .2s;
}
.calc__entrada input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(4,178,217,.16)}
.calc__chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.calc__chips label{position:relative}
.calc__chips input{position:absolute;opacity:0;pointer-events:none}
.calc__chips span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);
  font:600 14.5px var(--font-display);
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.calc__chips input:checked + span{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.calc__chips input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.calc__anos{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.calc__ano{display:grid;grid-template-rows:auto 84px auto;justify-items:center;gap:6px;min-width:0}
.calc__ano b{font-size:10.6px;font-weight:600;color:var(--text-2);white-space:nowrap}
.calc__trilho{display:flex;align-items:flex-end;width:100%;height:100%}
.calc__ano i{
  display:block;
  width:100%;
  height:var(--h,20%);
  min-height:8px;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,rgba(251,113,133,.9),rgba(251,113,133,.28));
  transition:height .5s cubic-bezier(.2,.7,.3,1),background .3s;
}
.calc__ano small{font-size:10.6px;color:var(--text-3);white-space:nowrap}
.calc__ano.is-fora b{color:var(--text-3)}
.calc__ano.is-fora i{background:linear-gradient(180deg,rgba(150,172,205,.28),rgba(150,172,205,.08))}
.calc__nota{margin:0;font-size:12.6px;color:var(--text-3)}

.calc__res{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:clamp(22px,4vw,40px);
  border-left:1px solid var(--line);
  background:radial-gradient(460px 280px at 85% 0%,rgba(251,113,133,.14),transparent 70%);
}
.calc__rotulo{font-size:14.5px;color:var(--text-2)}
.calc__rotulo b{color:var(--text);font-weight:600}
.calc__total{
  font-family:var(--font-display);
  font-size:clamp(40px,6vw,58px);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.02;
  color:#FB7185;
}
.calc__texto{margin:0 0 8px;font-size:15px;line-height:1.66;color:var(--text-2)}
.calc__texto b{color:var(--text);font-weight:600}
.calc__cta{width:100%;white-space:normal;text-align:center}
.calc__seguro{margin:0;font-size:12.6px;color:var(--text-3);text-align:center}

/* --- Comparativo: uma linha por item, as duas colunas sempre alinhadas --- */
.versus{max-width:900px;margin-inline:auto}
.versus__linha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(8px,1.6vw,18px)}
.versus__cab,
.versus__c{padding:14px clamp(12px,2.2vw,24px)}
.versus__cab{
  padding-top:18px;
  padding-bottom:12px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  font-family:var(--font-display);
  font-size:clamp(13.5px,1.6vw,16px);
  font-weight:700;
}
.versus__c{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border-top:1px solid var(--line);
  font-size:clamp(13.2px,1.5vw,15.5px);
  line-height:1.45;
}
.versus__c svg{width:17px;height:17px;flex:none;margin-top:1px}
.versus__linha:last-child .versus__c{border-radius:0 0 var(--r-lg) var(--r-lg);padding-bottom:20px}
.versus__cab--hoje,
.versus__c--hoje{background:rgba(255,255,255,.022);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.versus__cab--hoje{border-top:1px solid var(--line);color:var(--text-3)}
.versus__c--hoje{color:var(--text-3)}
.versus__c--hoje svg{color:#FB7185}
.versus__linha:last-child .versus__c--hoje{border-bottom:1px solid var(--line)}
.versus__cab--novo,
.versus__c--novo{background:rgba(4,178,217,.075);border-left:1px solid var(--accent-line);border-right:1px solid var(--accent-line)}
.versus__cab--novo{border-top:1px solid var(--accent-line);color:#9EE7F7}
.versus__c--novo{color:var(--text);border-top-color:rgba(4,178,217,.18)}
.versus__c--novo svg{color:#34D399}
.versus__linha:last-child .versus__c--novo{border-bottom:1px solid var(--accent-line)}
.versus__acoes{justify-content:center;margin-top:clamp(24px,3vw,36px)}

/* --- Demais blocos da home --- */
.entregues__mais{margin-top:clamp(44px,6vw,72px);display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.processo__acao{justify-content:center;margin-top:clamp(30px,4vw,46px)}
.pillars--curtos{margin-top:28px}
.pillar__icon svg{width:19px;height:19px}

/* --- Dúvidas --- */
.faq{display:grid;gap:10px;max-width:820px;margin-inline:auto}
.faq details{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.022);
  transition:border-color .2s,background .2s;
}
.faq details[open]{border-color:var(--accent-line);background:rgba(4,178,217,.045)}
.faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  list-style:none;
  cursor:pointer;
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:600;
  color:var(--text);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";
  flex:none;
  width:9px;height:9px;
  margin-top:-4px;
  border-right:2px solid var(--text-3);
  border-bottom:2px solid var(--text-3);
  transform:rotate(45deg);
  transition:transform .25s,margin .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq details p{margin:0;padding:0 20px 18px;font-size:14.6px;line-height:1.7;color:var(--text-2)}

/* --- Barra fixa do celular --- */
.barra-cta{display:none}

@media (max-width:980px){
  /* Primeira tela do celular: promessa, botões e garantias; as telas vêm depois */
  .home .hero{padding-top:104px}
  .home .hero .btn-row{order:4}
  .home .hero__garantias{order:5;justify-content:center;margin-top:2px}
  .home .stack{order:6;margin-top:12px}
  .home .hero__ilus{order:6;margin-top:14px}
  .home .hero__proof{order:7}
  .hero__ctas{flex-direction:column;align-items:stretch;width:100%;max-width:460px;margin-inline:auto}
  .hero__ctas .btn{width:100%}

  .casos{grid-template-columns:1fr}
}

@media (max-width:760px){
  .calc{grid-template-columns:1fr}
  .calc__res{border-left:0;border-top:1px solid var(--line)}

  .barra-cta{
    position:fixed;
    inset:auto 0 0 0;
    z-index:870;
    display:block;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(7,13,24,.94);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--line-2);
    transform:translateY(110%);
    visibility:hidden;
    transition:transform .35s cubic-bezier(.2,.7,.3,1),visibility 0s linear .35s;
  }
  .barra-cta.is-on{transform:none;visibility:visible;transition-delay:0s}
  .barra-cta .btn{width:100%;white-space:normal;padding:15px 16px;font-size:15px}
  /* A barra já leva ao WhatsApp: o botão flutuante sairia por cima dela */
  .tem-barra-cta .wa-float{display:none}
  .tem-barra-cta .footer{padding-bottom:84px}

  /* Sistemas entregues mais enxutos no celular: tela, nome, resumo e botões */
  .home .spot__pontos,
  .home .spot__num,
  .home .spot__legenda,
  .home [data-spot-tiras]{display:none}
  .home .spotlights{gap:52px}
  .home .spot .btn-row{flex-direction:column;align-items:stretch}
  .home .spot .btn-row .btn{width:100%;white-space:normal}
  .home .portrait{max-width:260px}

  /* Botões grandes ocupam a largura toda e quebram linha em vez de vazar do cartão */
  .home .cta .btn-row,
  .home .versus__acoes,
  .home .processo__acao{flex-direction:column;align-items:stretch}
  .home .cta .btn,
  .home .versus__acoes .btn,
  .home .processo__acao .btn,
  .home .entregues__mais .btn{width:100%;white-space:normal;text-align:center}
}

@media (max-width:420px){
  .home .hero h1{font-size:33px}
  .home .btn--lg{padding:16px 18px;font-size:15px}
  .caso{padding:20px}
  .versus__cab,.versus__c{padding-inline:11px}
  .versus__c{gap:7px;font-size:13px}
  .versus__c svg{width:15px;height:15px}
  .calc__anos{gap:5px}
  .calc__ano b{font-size:9.6px}
}

/* ---------- 16m. AVALIAÇÕES (mural único) ----------
   Montado pelo site.js a partir da API (_worker.js + D1). Enquanto não há
   avaliação aprovada, a seção fica com o atributo hidden e não ocupa espaço.
   No computador os cartões formam uma grade; no celular viram um trilho que
   corre para o lado, para a página (já longa) não crescer mais. */
.mural{max-width:1180px;margin-inline:auto}
.mural__cab{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px 28px;
  margin-bottom:26px;
}
.mural__cab .section-title{margin:0 0 10px;font-size:clamp(25px,3.2vw,36px)}
.mural__resumo{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:15px;color:var(--text-2)}
.mural__nota{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mural__nota b{color:var(--text)}
.mural__ponto{color:var(--text-3)}
/* "2 sobre SST Control": etiqueta verde, igual à dos cartões deste projeto */
.mural__deste{
  display:inline-flex;
  align-items:center;
  padding:3px 11px;
  border-radius:99px;
  border:1px solid rgba(43,196,104,.45);
  background:rgba(43,196,104,.1);
  font-size:13px;
  font-weight:600;
  color:#7CEBAA;
  white-space:nowrap;
}
.mural__avaliar{flex:none}
.mural__avaliar svg{width:15px;height:15px}

.estrelas{display:inline-flex;gap:2px;color:rgba(150,172,205,.3)}
.estrelas i{display:block;width:16px;height:16px}
.estrelas i svg{display:block;width:100%;height:100%}
.estrelas i.is-on{color:#FBBF24}

/* Até 3 colunas. Com 1 ou 2 avaliações, a largura acompanha a quantidade
   (--qtd, posto pelo site.js) e os cartões ficam à esquerda, embaixo do
   título, em vez de um cartão sozinho esticar pela largura inteira. */
.mural__trilho{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:16px;
  max-width:calc(var(--qtd,3) * 396px);
}

.aval{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:22px 22px 18px;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(17,29,48,.88),rgba(10,18,32,.84));
}
.aval--este{border-color:var(--accent-line)}
.aval__topo{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:18px}
.aval__aspas{
  display:block;
  height:18px;
  font-family:var(--font-display);
  font-size:46px;
  line-height:.72;
  color:var(--accent);
  opacity:.45;
}
.aval__data{font-size:12.5px;color:var(--text-3);white-space:nowrap}
.aval__texto{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--text);
  white-space:pre-line;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:7;
  line-clamp:7;
  overflow:hidden;
}
.aval__texto.is-aberto{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.aval__ler{
  align-self:flex-start;
  margin-top:-6px;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  color:var(--accent);
  cursor:pointer;
}
.aval__ler:hover{text-decoration:underline}
.aval__resposta{
  padding:12px 14px;
  border-left:2px solid var(--accent);
  border-radius:0 12px 12px 0;
  background:rgba(4,178,217,.07);
}
.aval__resposta b{display:block;margin-bottom:3px;font-size:12.5px;letter-spacing:.04em;color:var(--accent)}
.aval__resposta p{margin:0;font-size:14.3px;line-height:1.6;color:var(--text-2);white-space:pre-line;overflow-wrap:anywhere}
.aval__quem{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.aval__av{
  display:grid;
  place-items:center;
  flex:none;
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-3));
  font-family:var(--font-display);
  font-weight:700;
  color:#fff;
}
.aval__nome{display:flex;flex-direction:column;min-width:0}
.aval__nome b{font-size:15px;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.aval__nome small{font-size:12.8px;color:var(--text-3);overflow-wrap:anywhere}
.aval__rodape{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.aval__sobre{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  padding:5px 11px;
  border-radius:99px;
  border:1px solid var(--line-2);
  background:rgba(4,178,217,.06);
  font-size:12.5px;
  font-weight:600;
  line-height:1.3;
  color:var(--text-2);
  text-decoration:none;
  transition:border-color .2s,color .2s;
}
.aval__sobre small{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.aval__sobre svg{width:13px;height:13px;flex:none}
a.aval__sobre:hover{border-color:var(--accent-line);color:var(--text)}
.aval__sobre.is-este{border-color:rgba(43,196,104,.45);background:rgba(43,196,104,.1);color:#7CEBAA}
.aval__origem{font-size:12px;color:var(--text-3)}

.mural__pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:20px}
.mural__pe:not(:has(> :not([hidden]))){display:none}
.mural__dica{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3)}
.mural__dica svg{width:15px;height:15px}

@media (max-width:760px){
  .mural__cab{align-items:flex-start}
  /* Trilho que sai da margem até a borda da tela, com o próximo cartão
     aparecendo na ponta: é o sinal de que dá para arrastar. */
  .mural__trilho{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:86%;
    align-items:start;   /* cada cartão com a sua altura */
    max-width:none;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);
    padding:2px var(--pad) 8px;
    scrollbar-width:none;
  }
  .mural__trilho::-webkit-scrollbar{display:none}
  .mural__trilho > .aval{scroll-snap-align:start}
  .aval__texto{-webkit-line-clamp:6;line-clamp:6}
  .mural__trilho:has(> .aval:only-child){grid-auto-columns:100%}
  .mural__pe{margin-top:12px}
}

/* ---------- 16n. PÁGINA "AVALIAR" (/avaliar/) ---------- */
.aval-pag{padding-bottom:clamp(64px,8vw,110px)}
.aval-pag__voltar{
  display:inline-flex;
  align-items:center;
  padding:9px 16px;
  border-radius:99px;
  border:1px solid var(--line-2);
  font-size:13.5px;
  font-weight:600;
  color:var(--text-2);
  text-decoration:none;
  transition:border-color .2s,color .2s;
}
.aval-pag__voltar:hover{border-color:var(--accent-line);color:var(--text)}
.aval-pag__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,5vw,64px);
  align-items:start;
}
.aval-pag__intro .section-title{margin-bottom:16px}
.aval-pag__faixa{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  padding:7px 14px;
  border-radius:99px;
  border:1px solid rgba(43,196,104,.45);
  background:rgba(43,196,104,.1);
  font-size:14px;
  color:var(--text-2);
}
.aval-pag__faixa b{color:#7CEBAA}
.aval-pag__lista{display:grid;gap:12px;margin:28px 0 0;padding:0;list-style:none}
.aval-pag__lista li{display:flex;align-items:flex-start;gap:10px;font-size:14.8px;line-height:1.55;color:var(--text-2)}
.aval-pag__lista svg{flex:none;width:18px;height:18px;margin-top:2px;color:#34D399}

.aval-form,
.aval-form__ok,
.aval-form__fechado{
  padding:clamp(22px,3vw,32px);
  border-radius:var(--r-lg);
  border:1px solid var(--accent-line);
  background:linear-gradient(160deg,rgba(4,178,217,.09),rgba(7,13,24,.94) 55%);
}
.aval-form__grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.campo{display:flex;flex-direction:column;gap:7px;margin:0 0 16px;padding:0;border:0;min-width:0}
.campo > span,.campo legend{font-size:13.5px;font-weight:600;color:var(--text)}
.campo legend{padding:0;margin-bottom:7px}
.campo em{font-style:normal;color:var(--accent)}
.campo small{font-weight:400;color:var(--text-3)}
.campo input,
.campo select,
.campo textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:rgba(4,8,15,.7);
  font:inherit;
  font-size:16px; /* 16px evita o zoom automático do iPhone ao tocar no campo */
  color:var(--text);
  transition:border-color .2s,box-shadow .2s;
}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.campo select option{background:#0B1424;color:var(--text)}
.campo textarea{resize:vertical;min-height:140px;line-height:1.55}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(4,178,217,.2)}
.campo__conta{align-self:flex-end;font-size:12px;color:var(--text-3)}

/* Caixa de autorização: o texto vai ao lado, não embaixo */
.campo--marcar{flex-direction:row;align-items:flex-start;gap:12px;cursor:pointer}
.campo--marcar input{flex:none;width:20px;height:20px;margin:1px 0 0;padding:0;accent-color:var(--accent)}
.campo--marcar span{font-size:14px;font-weight:400;line-height:1.5;color:var(--text-2)}

/* Estrelas clicáveis: a ordem do HTML é 5→1 e o flex inverte, assim o
   "acender as anteriores" funciona só com CSS (~ pega os irmãos seguintes). */
.nota-escolha{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.nota-escolha input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nota-escolha label{display:block;width:40px;height:40px;padding:3px;cursor:pointer;color:rgba(150,172,205,.35);transition:color .15s,transform .15s}
.nota-escolha label svg{display:block;width:100%;height:100%}
.nota-escolha label span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nota-escolha input:checked ~ label,
.nota-escolha label:hover,
.nota-escolha label:hover ~ label{color:#FBBF24}
.nota-escolha label:hover{transform:scale(1.1)}
.nota-escolha input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

.aval-form__isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aval-form__robo{margin:0 0 16px}
.aval-form__aviso{margin:0 0 16px;font-size:13px;color:var(--text-3)}
.aval-form__msg{margin:12px 0 0;font-size:14px;color:var(--text-2)}
.aval-form__msg:empty{display:none}
.aval-form__msg.is-erro{color:#FDA4AF}
.aval-form__enviar{min-width:220px}

.aval-form__ok,
.aval-form__fechado{text-align:center}
.aval-form__ok:focus{outline:none}
.aval-form__ok h2,
.aval-form__fechado h2{margin:14px 0 10px;font-size:clamp(22px,2.6vw,28px)}
.aval-form__ok p,
.aval-form__fechado p{margin:0 auto 22px;max-width:44ch;color:var(--text-2)}
.aval-form__ok .btn-row,
.aval-form__fechado .btn-row{justify-content:center}
.aval-form__selo{
  display:inline-grid;
  place-items:center;
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(43,196,104,.14);
  border:1px solid rgba(43,196,104,.45);
  color:#7CEBAA;
}
.aval-form__selo svg{width:26px;height:26px}

@media (max-width:900px){
  .aval-pag__grid{grid-template-columns:minmax(0,1fr)}
  .aval-pag__lista{margin-top:18px}
}
@media (max-width:560px){
  .aval-form__grade{grid-template-columns:minmax(0,1fr)}
  .aval-form__enviar{width:100%}
}

/* ---------- 16o. COMPRA CONFIRMADA (printcontrol-3d/compra-confirmada/) ---------- */
.compra{padding-bottom:clamp(64px,8vw,110px)}
.compra__caixa{max-width:760px;text-align:center}
.compra__selo{
  display:grid;            /* bloco: a tarja "compra confirmada" fica embaixo, e não ao lado */
  place-items:center;
  width:72px;
  height:72px;
  margin:0 auto 20px;
  border-radius:50%;
  border:1px solid rgba(43,196,104,.5);
  background:rgba(43,196,104,.14);
  color:#7CEBAA;
  box-shadow:0 0 60px -10px rgba(43,196,104,.55);
}
.compra__selo svg{width:34px;height:34px}
.compra__caixa .eyebrow::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.compra__sub{margin:0 auto 34px}
.compra__form{
  margin:0 auto;
  padding:clamp(22px,3vw,32px);
  border-radius:var(--r-lg);
  border:1px solid var(--accent-line);
  background:linear-gradient(160deg,rgba(4,178,217,.09),rgba(7,13,24,.94) 55%);
  text-align:left;
}
.compra__form h2{margin:0 0 4px;font-size:clamp(20px,2.4vw,24px)}
.compra__dica{margin:0 0 18px;font-size:14px;color:var(--text-3)}
.compra__grade{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0 14px}
.campo input[type="date"]{color-scheme:dark}
.compra__produto{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 20px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:rgba(4,8,15,.5);
  font-size:14px;
  color:var(--text-2);
}
.compra__produto b{font-family:var(--font-display);color:var(--text)}
.compra__botao{width:100%}
/* "Prefiro esperar": botão discreto, para não competir com o do WhatsApp */
.compra__esperar{
  display:block;
  width:100%;
  margin-top:10px;
  padding:13px 18px;
  border-radius:99px;
  border:1px solid var(--line-2);
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:14.5px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .2s,color .2s;
}
.compra__esperar:hover{border-color:var(--accent-line);color:var(--text)}
.compra__esperar:disabled{opacity:.7;cursor:default}
.compra__lgpd{margin:14px 0 0;font-size:12.5px;line-height:1.5;text-align:center;color:var(--text-3)}
.aval-form__msg.is-ok{color:#7CEBAA}
.compra__passos{
  display:grid;
  gap:14px;
  max-width:620px;
  margin:34px auto 0;
  padding:0;
  list-style:none;
  counter-reset:passo;
  text-align:left;
}
.compra__passos li{position:relative;padding-left:46px;font-size:15px;line-height:1.55;color:var(--text-2);counter-increment:passo}
.compra__passos li::before{
  content:counter(passo);
  position:absolute;
  left:0;
  top:-3px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--accent-line);
  background:rgba(4,178,217,.1);
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  color:var(--accent);
}
.compra__passos b{color:var(--text)}
.compra__nota{max-width:620px;margin:28px auto 0;font-size:13.5px;line-height:1.6;color:var(--text-3)}
@media (max-width:560px){
  .compra__grade{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 17. REVELAÇÃO AO ROLAR ----------
   O estado inicial invisível só é aplicado quando o JavaScript está
   ativo (classe .js no <html>). Se o JS falhar ou for bloqueado, o
   conteúdo aparece normalmente em vez de ficar numa tela vazia. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);
  will-change:opacity,transform;
}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- 18. RESPONSIVO ---------- */
@media (max-width:980px){
  .nav{display:none}
  .burger{display:flex}
  .header__cta .btn{display:none}

  /* HERO — no celular a tela do sistema entra logo depois da apresentação e
     antes dos botões. "display:contents" solta os filhos da coluna de texto
     dentro do grid, o que permite ordenar tudo numa sequência só. */
  .hero__grid{grid-template-columns:1fr;text-align:center;gap:20px}
  .hero__veu{
    inset:0 -14% 0 -14%;
    mask-image:radial-gradient(ellipse 78% 62% at 50% 30%,#000 66%,transparent 98%);
    -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 30%,#000 66%,transparent 98%);
  }
  .hero__grid > div:first-child{display:contents}
  .hero__badge{order:1;margin-bottom:0;justify-self:center}
  .hero h1{order:2;margin-bottom:0}
  .hero__lead{order:3;margin-bottom:0;margin-inline:auto}
  .stack{order:4}
  .hero .btn-row{order:5;justify-content:center}
  .hero__proof{order:6;margin-top:8px;justify-content:center;text-align:left}
  .hero__bg{height:100%;inset:0}

  /* Mosaico: sem perspectiva no toque, e a tela secundária vira miniatura */
  .stack{perspective:none;padding:0 0 44px}
  .stack__main{transform:none}
  .stack:hover .stack__main{transform:none}
  .stack__aside{
    position:static;
    width:100%;
    max-width:none;
    transform:none;
    margin-top:10px;
    display:none;
  }
  .stack:hover .stack__aside{transform:none}
  .chip--um{top:auto;bottom:auto}
  .chip{display:none}
  .stack__nav{
    position:static;
    flex-direction:column-reverse;
    align-items:center;
    gap:12px;
    margin-top:16px;
  }
  .stack__caption{text-align:center}

  /* SHOWCASE EDITORIAL — empilha e traz a imagem primeiro em todos */
  .spot{grid-template-columns:1fr;gap:26px}
  .spot:first-child{margin-top:0}
  .spot__visual{order:1!important;margin-top:0}
  .spot__info{order:2!important}
  .spot__num{
    position:static;
    display:block;
    font-size:clamp(52px,13vw,74px);
    margin-bottom:-14px;
    -webkit-text-stroke:1px rgba(150,172,205,.2);
  }
  .spot:nth-child(even) .spot__num{right:auto}
  .spot__desc{max-width:none}

  /* BENTO — vira coluna única, sem spans */
  .bento{grid-template-columns:1fr}
  .bento__card--hero,
  .bento__card--wide{grid-column:auto;grid-row:auto}
  .bento__card--hero .bento__lista{grid-template-columns:1fr;margin-top:20px}

  .promise__inner{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .portrait{max-width:320px;margin-inline:auto}
  .proj-hero__grid{grid-template-columns:1fr}
  .proj-buy{position:static}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__about{grid-column:1/-1}
}

@media (max-width:700px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid-projects{grid-template-columns:1fr}
  .brand__tag{display:none}
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{justify-content:center;text-align:center}
  .wa-float{height:54px;padding:0 16px}
  .wa-float span{display:none}
  .project__foot{flex-direction:column;align-items:stretch}
  .project__foot .btn{width:100%}
}

@media (max-width:420px){
  .btn{padding:13px 20px;font-size:13.8px}
  .filters{gap:7px}
  .filter{padding:8px 14px;font-size:12.8px}
}

/* ---------- 19. ACESSIBILIDADE ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .js [data-reveal]{opacity:1;transform:none}
}

/* ---------- 20. IMPRESSÃO ---------- */
@media print{
  .header,.wa-float,.mobile-menu,.cta,.footer__bottom{display:none!important}
  body{background:#fff;color:#000}
  body::before,body::after{display:none}
  .card,.proj-buy{border-color:#ccc;background:#fff}
  h1,h2,h3,h4,.metal,.stat__num{color:#000!important;-webkit-text-fill-color:#000!important;background:none!important}
}