/* ============================================================
   Base e keyframes: verbatim do protótipo do handoff.
   Nenhum valor foi reinterpretado.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
  html { -webkit-font-smoothing: antialiased; }
  body { margin: 0; background: #0E0A07; color: #FBF7F2; font-family: 'Figtree', system-ui, sans-serif; overflow-x: hidden; }
  a { color: #EE7A2E; text-decoration: none; transition: color .34s cubic-bezier(.33,1,.68,1); }
  a:hover { color: #FFE7C9; }
  html, body { margin: 0 !important; padding: 0 !important; background: #0E0A07 !important; }
  ::selection { background: rgba(238,122,46,.32); color: #FFE7C9; }
  :focus-visible { outline: 2px solid #EE7A2E; outline-offset: 3px; }
  button { font-family: inherit; }
  input, textarea, select { font-family: inherit; }
  @keyframes exSweep { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
  @keyframes exMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  @keyframes exBreathe { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
  @keyframes exBlink { 0%,44% { opacity: 1; } 56%,100% { opacity: .28; } }
  @keyframes exBootOff { 0%,72% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
  @keyframes exArrow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
  @media (prefers-reduced-motion: reduce) {
    html:not(.ex-motion-full) *, html:not(.ex-motion-full) *::before, html:not(.ex-motion-full) *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }

/* ------------------------------------------------------------
   Celular — escrito à mão, não sai do compilador do handoff.

   O site nasceu de um protótipo desktop e não tinha NENHUMA media
   query. Onde o layout é fluido (clamp) isso funcionou; onde havia
   uma fileira rígida, não: o header do /sistema/ (marca + 6 âncoras
   + botão) pedia 581px num aparelho de 390px e fazia a página
   inteira rolar de lado.

   As âncoras de seção são navegação secundária num documento de
   referência — somem no celular, onde a rolagem já resolve. A marca
   e o botão de voltar pra home continuam.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .ex-sistema-nav { display: none !important; }
}

/* ------------------------------------------------------------
   Grids de contagem fixa — o segundo defeito da mesma origem.

   Nenhum destes estourava a largura da página, então a varredura
   de bugs (que procura rolagem lateral) passava batido. O que
   acontecia era pior de ver e mais difícil de medir: a coluna
   encolhia e o texto virava uma palavra por linha. A 390px, a
   fileira de tecnologias dava 114px de coluna e a faixa de
   números da cláusula, 68px.

   O `!important` não é preguiça: a contagem de colunas mora em
   `style=""` inline (o site veio de um protótipo desktop), e
   atributo inline ganha de qualquer seletor de classe.
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  .ex-grid-tec { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  .ex-grid-tec { grid-template-columns: minmax(0,1fr) !important; }
}

@media (max-width: 900px) {
  .ex-grid-prova { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 560px) {
  .ex-grid-prova { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  /* célula estreita pede respiro menor, senão sobra moldura e falta texto */
  .ex-grid-prova > div { padding: 22px 16px !important; }
  /* são cinco números em duas colunas: sem isto, a quinta célula deixa um
     buraco cinza do lado, que lê como card que não carregou */
  .ex-grid-prova > div:last-child { grid-column: 1 / -1 !important; }
}

/* /sistema/ — documento interno, mesmo defeito, mesma régua. */
@media (max-width: 900px) {
  .ex-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .ex-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 560px) {
  .ex-grid-3, .ex-grid-4 { grid-template-columns: minmax(0,1fr) !important; }
}

/* A tabela de tipografia tem cabeçalho e corpo em grids separados: se
   empilhasse, a coluna perderia o próprio título. Rola de lado dentro
   da moldura, com as duas grades no mesmo min-width pra seguirem alinhadas. */
@media (max-width: 760px) {
  .ex-tabela { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .ex-tabela-linha { min-width: 520px !important; }
}

/* ------------------------------------------------------------
   O CTA do topo. Era "WhatsApp"; virou o diagnóstico em 25/07/2026,
   a pedido do Matheus. A troca faz sentido de funil: WhatsApp é
   conversa fria com quem ainda não sabe o que quer, e diagnóstico
   é a pessoa chegando já respondida. O WhatsApp continua no menu,
   no bloco de contato e no rodapé — não sumiu, saiu da frente.

   A frase longa só entra onde cabe. A barra do topo tem 520px no
   desktop e ~157px de sobra no celular: lá a promessa inteira vira
   uma palavra por linha, que é exatamente o defeito que a gente
   acabou de consertar na página. No celular ela reaparece inteira
   na barra fixa de baixo, que é larga.
   ------------------------------------------------------------ */
@keyframes exCtaPulsa {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,231,201,.3), 0 8px 30px -8px rgba(238,122,46,.8); }
  50%      { box-shadow: 0 0 0 1px rgba(255,231,201,.55), 0 10px 44px -6px rgba(238,122,46,1),
                         0 0 22px 2px rgba(238,122,46,.55); }
}
@keyframes exCtaSeta {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(3px, -3px); }
}
.ex-cta-diag { position: relative; animation: exCtaPulsa 2.8s ease-in-out infinite; }
.ex-cta-diag .ex-cta-seta { display: inline-block; animation: exCtaSeta 2.8s ease-in-out infinite; }
.ex-cta-diag .ex-cta-curto { display: none; }
@media (max-width: 900px) {
  .ex-cta-diag .ex-cta-longo { display: none; }
  .ex-cta-diag .ex-cta-curto { display: inline; }
}

/* As duas vagas abertas em Cases são links de verdade desde
   25/07/2026 (antes eram caixas tracejadas pedindo print, que
   liam como site inacabado). Como `a`, herdariam o laranja de
   link — daí o color:inherit no atributo e o realce só na borda. */
.ex-vaga { transition: border-color .34s ease, transform .34s cubic-bezier(.33,1,.68,1); }
.ex-vaga:hover { border-color: rgba(238,122,46,.5) !important; transform: translateY(-3px); color: inherit; }

/* ------------------------------------------------------------
   Ícones dos cards de tecnologia.

   Tudo em CSS, sem uma linha de JS: são seis cards com dez SVGs
   inline, e nada aqui precisa saber de rolagem ou de estado.
   Vantagem prática — a vida começa antes de o GSAP baixar, e o
   CSP não tem o que reclamar.

   As marcas saem na cor real (é o que faz o olho reconhecer sem
   legenda); os genéricos herdam o acento do próprio card via
   `currentColor`. O halo lê a mesma cor pela variável --cor.
   ------------------------------------------------------------ */
@keyframes exIconeFlutua {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-2.5deg); }
}
@keyframes exIconeHalo {
  0%, 100% { opacity: .34; transform: scale(1); }
  50%      { opacity: .72; transform: scale(1.16); }
}

.ex-tec-icones { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

.ex-tec-icone {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border-radius: 10px;
  background: rgba(251,247,242,.045);
  border: 1px solid rgba(251,247,242,.1);
  /* a defasagem é o truque: dois ícones subindo no mesmo compasso
     parecem GIF; meio segundo de diferença parece vivo */
  animation: exIconeFlutua 4.6s ease-in-out infinite;
  transition: transform .34s cubic-bezier(.33,1,.68,1),
              border-color .34s ease, background-color .34s ease;
}
.ex-tec-icone:nth-child(2) { animation-duration: 5.4s; animation-delay: -1.7s; }

/* o brilho mora atrás, num ::before, pra não lavar o desenho:
   filtro em cima do SVG borraria o traço do próprio ícone */
.ex-tec-icone::before {
  content: ''; position: absolute; inset: -7px; border-radius: 14px;
  background: radial-gradient(circle, var(--cor, #EE7A2E) 0%, transparent 68%);
  opacity: .34; filter: blur(7px); pointer-events: none; z-index: 0;
  animation: exIconeHalo 3.8s ease-in-out infinite;
}
.ex-tec-icone:nth-child(2)::before { animation-duration: 4.7s; animation-delay: -2.1s; }
.ex-tec-icone > svg { position: relative; z-index: 1; display: block; }

/* o card inteiro é a área de toque: passar o mouse (ou tocar, no
   celular, que dispara :hover uma vez) acende os dois de uma vez */
.exph-15:hover .ex-tec-icone, .exph-16:hover .ex-tec-icone,
.exph-17:hover .ex-tec-icone, .exph-18:hover .ex-tec-icone,
.exph-19:hover .ex-tec-icone, .exph-20:hover .ex-tec-icone {
  transform: translateY(-4px) scale(1.09);
  border-color: color-mix(in srgb, var(--cor, #EE7A2E) 55%, transparent);
  background: rgba(251,247,242,.08);
}
.exph-15:hover .ex-tec-icone::before, .exph-16:hover .ex-tec-icone::before,
.exph-17:hover .ex-tec-icone::before, .exph-18:hover .ex-tec-icone::before,
.exph-19:hover .ex-tec-icone::before, .exph-20:hover .ex-tec-icone::before {
  opacity: .92; inset: -11px; filter: blur(10px);
}

/* ------------------------------------------------------------
   Pseudo-estados compilados de style-hover / style-active.
   !important porque o estilo base mora em atributo inline,
   que ganha de qualquer seletor de classe.
   ------------------------------------------------------------ */
.exph-0:hover{background:#FFE7C9 !important}
.exph-1:hover{border-color:#EE7A2E !important}
.exph-2:hover{color:#EE7A2E !important}
.exph-3:hover{color:#EE7A2E !important}
.exph-4:hover{color:#EE7A2E !important}
.exph-5:hover{color:#EE7A2E !important}
.exph-6:hover{color:#EE7A2E !important}
.exph-7:hover{color:#FFE7C9 !important}
.exph-8:hover{color:#EE7A2E !important}
.exph-9:hover{color:#EE7A2E !important}
.exph-10:hover{background:#FFE7C9 !important;transform:translateY(-2px) !important}
.exph-11:hover{border-color:#EE7A2E !important;color:#EE7A2E !important;background:rgba(238,122,46,.08) !important}
.exph-12:hover{border-color:rgba(238,122,46,.5) !important;box-shadow:inset 0 1px 0 rgba(255,231,201,.2),0 18px 60px -18px rgba(238,122,46,.7) !important;transform:translateY(-4px) !important}
.exph-13:hover{border-color:rgba(238,122,46,.5) !important;box-shadow:inset 0 1px 0 rgba(255,231,201,.2),0 18px 60px -18px rgba(238,122,46,.7) !important;transform:translateY(-4px) !important}
.exph-14:hover{border-color:rgba(238,122,46,.5) !important;box-shadow:inset 0 1px 0 rgba(255,231,201,.2),0 18px 60px -18px rgba(238,122,46,.7) !important;transform:translateY(-4px) !important}
.exph-15:hover{background:#17110C !important}
.exph-16:hover{background:#17110C !important}
.exph-17:hover{background:#17110C !important}
.exph-18:hover{background:#17110C !important}
.exph-19:hover{background:#17110C !important}
.exph-20:hover{background:#17110C !important}
.exph-21:hover{background:#FFE7C9 !important}
.exph-22:hover{color:#EE7A2E !important}
.exph-23:hover{color:#EE7A2E !important}
.exph-24:hover{color:#EE7A2E !important}
.exph-25:hover{color:#EE7A2E !important}
.exph-26:hover{color:#EE7A2E !important}
.exph-27:hover{color:#EE7A2E !important}
.exph-28:hover{color:#EE7A2E !important}
.exph-29:hover{color:#EE7A2E !important}
.exph-30:hover{color:#EE7A2E !important}
.exph-31:hover{color:#EE7A2E !important}
.exph-32:hover{color:#EE7A2E !important}
.exph-33:hover{background:#FFE7C9 !important;transform:translateY(-2px) !important}
.exph-34:hover{color:#EE7A2E !important}
.exph-35:hover{color:#EE7A2E !important}
.exph-36:hover{color:#EE7A2E !important}
.exph-37:hover{color:#EE7A2E !important}
.exph-38:hover{color:#EE7A2E !important}
.exph-39:hover{color:#EE7A2E !important}
.exph-40:hover{color:#EE7A2E !important}
.exph-41:hover{color:#EE7A2E !important}
.expa-42:active{transform:translateY(1px) !important;background:#C85A1E !important}

/* ------------------------------------------------------------
   Pseudo-estados do documento Sistema.
   ------------------------------------------------------------ */
.exsh-0:hover{color:#FBF7F2 !important}
.exsh-1:hover{color:#FBF7F2 !important}
.exsh-2:hover{color:#FBF7F2 !important}
.exsh-3:hover{color:#FBF7F2 !important}
.exsh-4:hover{color:#FBF7F2 !important}
.exsh-5:hover{color:#FBF7F2 !important}
.exsh-6:hover{background:#FFE7C9 !important;box-shadow:0 0 0 1px rgba(255,231,201,.5),0 10px 44px -6px rgba(238,122,46,.95) !important}
.exsh-7:hover{background:#17110C !important}
.exsh-8:hover{background:#17110C !important}
.exsh-9:hover{background:#17110C !important}
.exsh-10:hover{background:#17110C !important}
.exsh-11:hover{background:#17110C !important}
.exsh-12:hover{background:#17110C !important}
.exsh-13:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-14:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-15:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-16:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-17:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-18:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-19:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-20:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-21:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-22:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-23:hover{border-color:#EE7A2E !important;color:#EE7A2E !important}
.exsh-24:hover{background:#FFE7C9 !important;box-shadow:0 0 0 1px rgba(255,231,201,.55),0 14px 60px -8px rgba(238,122,46,1) !important;transform:translateY(-1px) !important}
.exsh-25:hover{border-color:#EE7A2E !important;color:#EE7A2E !important;background:rgba(238,122,46,.08) !important}
.exsh-26:hover{color:#EE7A2E !important}
.exsh-27:hover{border-color:#EE7A2E !important;color:#EE7A2E !important;background:rgba(238,122,46,.08) !important}
.exsh-28:hover{border-color:rgba(238,122,46,.5) !important;box-shadow:inset 0 1px 0 rgba(255,231,201,.18),0 14px 50px -14px rgba(238,122,46,.75) !important;transform:translateY(-3px) !important}
.exsh-29:hover{color:#EE7A2E !important}
.exsh-30:hover{color:#EE7A2E !important}
.exsh-31:hover{background:#FFE7C9 !important}
.exsh-32:hover{color:#EE7A2E !important}
.exsa-33:active{transform:translateY(1px) !important;background:#C85A1E !important}
.exsa-34:active{background:rgba(238,122,46,.18) !important}