/* LANDING BRAND REBUILD PASS — dark premium tech, acentos neon.
   Paleta e tipografia pretendida vêm de core/identity.md (Brand Pivot, 2026-07-27).
   Inspirado no brand book de referência do usuário — CSS escrito do zero, não copiado.
   Sem fonte externa/CDN: "Space Grotesk"/"Inter" são só preferência de nome de fonte
   (fallback silencioso para fontes de sistema se não estiverem instaladas — nenhuma
   rede é acessada). Sem framework, sem dependência.

   DEPLOY CANDIDATE (2026-07-27): cópia deste arquivo, sem alteração de conteúdo,
   preparada para servir como root de um projeto Vercel. Ver README.md desta pasta. */

/* IBM Plex Mono — hospedada localmente (2026-07-29), baixada do repositório
   oficial github.com/IBM/plex (packages/plex-mono/fonts/complete/woff2/),
   licença SIL Open Font License 1.1 em assets/fonts/ibm-plex-mono/LICENSE.txt.
   Sem CDN, sem Google Fonts, sem @import externo — só os 3 pesos usados nos
   seletores já aprovados (memory/products/landing-idistopic/DECISIONS.md). */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --cor-fundo: #05090b;
  --cor-painel: #091014;
  --cor-borda: #263238;
  --linha-fina: rgba(245, 247, 248, 0.08);
  --cor-texto: #f5f7f8;
  --cor-texto-suave: #aeb8bd;
  --cor-ciano: #00f0ff;
  --cor-verde: #39ff14;
  --cor-laranja: #ff8a00;
  --fonte-titulo: "Space Grotesk", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-texto: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --espaco: 1.5rem;
  --raio: 16px;
  --glow-cyan: 0 0 24px rgba(0, 240, 255, 0.08);
  --glow-green: 0 0 24px rgba(57, 255, 20, 0.08);
  --glow-orange: 0 0 24px rgba(255, 138, 0, 0.08);

  /* Design DNA v3 (core/identity.md) — escala de radius v1 e glow "forte",
     introduzidos aditivamente: --raio/--glow-cyan/--glow-green/--glow-orange
     acima continuam existindo, sem mudar de valor. */
  --raio-sm: 12px;
  --raio-md: 16px;
  --raio-lg: 28px;
  --raio-pill: 999px;
  --glow-forte-cyan: 0 0 40px rgba(0, 240, 255, 0.12);
  --glow-forte-green: 0 0 40px rgba(57, 255, 20, 0.12);
  --glow-forte-orange: 0 0 40px rgba(255, 138, 0, 0.12);

  /* Tipografia técnica — teste visual (2026-07-29), sem @font-face ainda,
     sem arquivo local: cai direto no fallback (JetBrains Mono/SFMono-Regular/
     Consolas/Liberation Mono/monospace) até IBM Plex Mono ser aprovada e
     hospedada localmente. Ver memory/products/landing-idistopic/DECISIONS.md. */
  --fonte-mono: "IBM Plex Mono", "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  color: var(--cor-texto);
  background:
    radial-gradient(circle at 15% 10%, rgba(0, 240, 255, 0.08), transparent 25%),
    radial-gradient(circle at 85% 15%, rgba(255, 138, 0, 0.07), transparent 25%),
    radial-gradient(circle at 50% 92%, rgba(57, 255, 20, 0.05), transparent 22%),
    repeating-linear-gradient(0deg, var(--linha-fina) 0, var(--linha-fina) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, var(--linha-fina) 0, var(--linha-fina) 1px, transparent 1px, transparent 64px),
    var(--cor-fundo);
  line-height: 1.6;
}

.container {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--espaco);
}

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  line-height: 1.1;
  margin-top: 0;
  color: var(--cor-texto);
}

/* Teste tipográfico (2026-07-29) — IBM Plex Mono em h2/.servico-destaque h3.
   h1 removido desta regra: aprovado parcialmente, ficou "técnico demais" e
   reduziu a força comercial do Hero — h1 volta a usar --fonte-titulo (regra
   acima), sem mudança. h3 fora da lista continua Space Grotesk também;
   só .servico-destaque h3 muda, se existir. */
h2,
.servico-destaque h3 {
  font-family: var(--fonte-mono);
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 26ch;
  margin: 0.5rem auto 1rem;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
  max-width: 34ch;
  margin: 0 auto 1rem;
}

h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

p {
  margin: 0 0 1rem;
  color: var(--cor-texto-suave);
}

.eyebrow {
  font-family: var(--fonte-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--cor-ciano);
  margin-bottom: 0.5rem;
  text-align: center;
}

.eyebrow-inline {
  margin-bottom: 0.75rem;
}

.accent-line {
  display: block;
  width: 28px;
  height: 2px;
  margin: 0 auto 1.1rem;
  background: var(--cor-ciano);
  opacity: 0.7;
}

.logo-sub {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  font-size: 0.85rem;
  color: var(--cor-verde);
  margin: 0 0 1.5rem;
}

.lead {
  color: var(--cor-texto-suave);
  font-size: 1.1rem;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

header.hero {
  position: relative;
  text-align: center;
  padding: clamp(3rem, 9vw, 6rem) 0 clamp(2.5rem, 7vw, 4.5rem);
  border-bottom: none;
}

/* Design DNA v3 — Fase 1.1: divisor de gradiente sutil no lugar da linha
   neutra, suavizando a transição Hero → Problema. */
header.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--cor-ciano), var(--cor-verde), var(--cor-laranja));
  opacity: 0.35;
}

/* Design DNA v3 — Fase 1 (camada técnica no Hero da homepage), ajustada na
   Fase 1.2: o grid deixou de ser exclusivo do Hero (.hero-tech-grid
   removida) — agora é textura contínua de toda a homepage, aplicada via
   background em body e nas seções com fundo próprio (ver acima). Frame +
   cantos continuam exclusivos do Hero. Sem HUD textual, sem progress dots,
   sem fonte monospace — mesmo padrão já validado no protótipo de carrossel
   (memory/products/carrossel-instagram/prototypes/html-static-poc-1/), via
   core/identity.md v3. Elementos puramente decorativos: aria-hidden,
   pointer-events desativado, z-index negativo (renderizam atrás do
   conteúdo do Hero, nunca sobre texto/CTA). */

.hero-tech-frame,
.hero-tech-corner {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.hero-tech-frame {
  inset: clamp(16px, 3vw, 32px);
  border: 1px solid var(--linha-fina);
}

.hero-tech-corner {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--cor-ciano);
  opacity: 0.5;
}

.hero-tech-corner-tl { top: clamp(16px, 3vw, 32px); left: clamp(16px, 3vw, 32px); border-right: none; border-bottom: none; }
.hero-tech-corner-tr { top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); border-left: none; border-bottom: none; }
.hero-tech-corner-bl { bottom: clamp(16px, 3vw, 32px); left: clamp(16px, 3vw, 32px); border-right: none; border-top: none; }
.hero-tech-corner-br { bottom: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); border-left: none; border-top: none; }

/* CTA primário do Hero (só o do Hero — .cta-primary do CTA final da página
   permanece no glow "sutil" original, sem mudança). */
header.hero .cta-primary {
  box-shadow: var(--glow-forte-cyan);
}

/* Design DNA v3 — Fase 1.1 introduziu cantos de seção em .solucao/.servicos;
   removidos na Fase 1.2 por instrução explícita do usuário — frame/cantos
   ficam exclusivos do Hero, a continuidade visual entre seções agora vem
   do grid global (ver body / .solucao,.servicos,.cta-final acima). */

section {
  padding: clamp(2.75rem, 7vw, 4.5rem) 0;
  border-bottom: 1px solid var(--linha-fina);
  text-align: center;
}

.solucao,
.servicos,
.cta-final {
  background:
    repeating-linear-gradient(0deg, var(--linha-fina) 0, var(--linha-fina) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, var(--linha-fina) 0, var(--linha-fina) 1px, transparent 1px, transparent 64px),
    var(--cor-painel);
}

.problema p {
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
}

.solucao p {
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: var(--espaco);
}

.badge {
  font-family: var(--fonte-mono);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.badge-cyan {
  background: rgba(0, 240, 255, 0.08);
  color: var(--cor-ciano);
  border-color: rgba(0, 240, 255, 0.35);
}

.badge-green {
  background: rgba(57, 255, 20, 0.08);
  color: var(--cor-verde);
  border-color: rgba(57, 255, 20, 0.35);
}

.badge-orange {
  background: rgba(255, 138, 0, 0.08);
  color: var(--cor-laranja);
  border-color: rgba(255, 138, 0, 0.35);
}

/* Reposicionamento (2026-07-29) — variante neutra para status "Em
   desenvolvimento" nos cards de visão futura; deliberadamente sem cor de
   acento (nunca é uma oferta ativa), só tokens já existentes. */
.badge-neutro {
  background: rgba(245, 247, 248, 0.06);
  color: var(--cor-texto-suave);
  border-color: var(--linha-fina);
}

/* Como funciona — timeline de 5 passos */

.timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: calc(var(--espaco) * 1.5);
  text-align: center;
}

.step {
  position: relative;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--cor-ciano), var(--cor-verde), var(--cor-laranja));
  opacity: 0.35;
  z-index: 0;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: var(--cor-fundo);
  position: relative;
  z-index: 1;
  font-family: var(--fonte-titulo);
  font-weight: 700;
}

.step-cyan { color: var(--cor-ciano); }
.step-green { color: var(--cor-verde); }
.step-orange { color: var(--cor-laranja); }

.step h3 {
  margin: 0.75rem 0 0.15rem;
  color: var(--cor-texto);
}

.step p {
  font-size: 0.85rem;
  margin: 0;
}

/* Cards — produtos/capacidades e valores */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espaco);
  margin-top: calc(var(--espaco) * 1.5);
  text-align: left;
}

.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(245, 247, 248, 0.025), rgba(245, 247, 248, 0)),
    var(--cor-fundo);
  border: 1px solid var(--linha-fina);
  border-radius: var(--raio);
  padding: clamp(1.15rem, 3vw, 1.75rem);
}

.card-icon {
  display: inline-block;
  margin-bottom: 0.6rem;
}

.card-icon svg {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}

.icon-cyan { color: var(--cor-ciano); }
.icon-green { color: var(--cor-verde); }
.icon-orange { color: var(--cor-laranja); }

.card p {
  margin-bottom: 0;
  font-size: 0.92rem;
}

a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.card-link {
  font-family: var(--fonte-mono);
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--cor-ciano);
  font-size: 0.88rem;
  font-weight: 600;
}

.cards-grid-servicos {
  grid-template-columns: repeat(4, 1fr);
}

.servico-destaque {
  position: relative;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(245, 247, 248, 0.025), rgba(245, 247, 248, 0)),
    var(--cor-fundo);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: var(--raio-lg);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: var(--glow-forte-cyan);
  margin-top: calc(var(--espaco) * 1.5);
}

/* Design DNA v3 — Fase 1.1: .servico-destaque é o único elemento, além do
   Hero, com o tratamento completo de frame + 4 cantos — é o análogo direto
   do card de destaque do carrossel. Sem status-dot, sem texto de HUD. */
.destaque-tech-frame {
  position: absolute;
  inset: 10px;
  border: 1px solid var(--linha-fina);
  pointer-events: none;
  z-index: -1;
}

.destaque-tech-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--cor-ciano);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

.destaque-tech-corner-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.destaque-tech-corner-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.destaque-tech-corner-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.destaque-tech-corner-br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.badge-destaque {
  font-family: var(--fonte-mono);
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cor-ciano);
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.35);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  margin-bottom: 0.75rem;
}

.servico-destaque .card-icon {
  display: block;
}

/* Reposicionamento (2026-07-29) — lista de bullets dentro de
   .servico-destaque não existia antes; sem isso o navegador renderizaria
   marcadores/indentação padrão, destoando do resto do sistema visual. */
.servico-destaque ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.servico-destaque li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.6rem;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

.servico-destaque li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cor-ciano);
}

/* Design DNA v3 — Fase 1.1: cards de Serviços viram painéis técnicos —
   borda superior colorida (por card) no lugar da tinta nas 4 bordas;
   canto único (.card-tech-corner, markup em index.html) reforça a leitura
   de "painel de sistema", sem repetir o frame completo do Hero. */
.servicos .card:nth-child(1) {
  border-top: 2px solid var(--cor-verde);
  box-shadow: var(--glow-green);
}
.servicos .card:nth-child(1) .card-tech-corner { border-color: var(--cor-verde); }

.servicos .card:nth-child(2) {
  border-top: 2px solid var(--cor-laranja);
  box-shadow: var(--glow-orange);
}
.servicos .card:nth-child(2) .card-tech-corner { border-color: var(--cor-laranja); }

.servicos .card:nth-child(3) {
  border-top: 2px solid var(--cor-ciano);
  box-shadow: var(--glow-cyan);
}
.servicos .card:nth-child(3) .card-tech-corner { border-color: var(--cor-ciano); }

.servicos .card:nth-child(4) {
  border-top: 2px solid var(--cor-verde);
  box-shadow: var(--glow-green);
}
.servicos .card:nth-child(4) .card-tech-corner { border-color: var(--cor-verde); }

.card-tech-corner {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 10px;
  height: 10px;
  border-left: 1.5px solid;
  border-top: 1.5px solid;
  pointer-events: none;
  z-index: -1;
}

.card-compact {
  background: transparent;
  padding: clamp(0.9rem, 2.4vw, 1.25rem);
}

/* Hotfix pontual (2026-08-02) — em /solucoes.html, o badge "Em
   desenvolvimento" quebra em 2 linhas dentro dos cards compactos de 4
   colunas (mais estreitos que os 5 da homepage). Escopado só a
   #em-desenvolvimento (a seção de visão futura de /solucoes) para não
   afetar nenhum outro badge do site, incluindo o mesmo .valores da
   homepage, que já cabe bem com 5 colunas. */
#em-desenvolvimento .card-compact .badge {
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Design DNA v3 — Fase 1.1: cards de Valores recebem tratamento mais leve
   que os de Serviços — só borda superior colorida, sem canto (densidade
   proporcional: 5 cards compactos lado a lado não pedem o mesmo reforço). */
.valores .card:nth-child(1),
.valores .card:nth-child(3) {
  border-top: 2px solid var(--cor-ciano);
}

.valores .card:nth-child(2) {
  border-top: 2px solid var(--cor-verde);
}

.valores .card:nth-child(4),
.valores .card:nth-child(5) {
  border-top: 2px solid var(--cor-laranja);
}

/* CTA final */

.cta-final {
  border-top: 2px solid;
  border-image: linear-gradient(90deg, var(--cor-ciano), var(--cor-verde), var(--cor-laranja)) 1;
}

.lead-invertido {
  color: var(--cor-texto-suave);
}

/* Rodapé */

footer.rodape {
  padding: calc(var(--espaco) * 1.5) 0;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  text-align: center;
}

.footer-inner {
  font-family: var(--fonte-mono);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
}

.footer-logo {
  font-family: var(--fonte-mono);
  letter-spacing: 0.05em;
  color: var(--cor-texto);
}

.cyan { color: var(--cor-ciano); }
.green { color: var(--cor-verde); }

/* CTA (botões) */

.cta {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--raio);
  border: none;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--fonte-texto);
  text-decoration: none;
  cursor: pointer;
}

.cta-primary {
  background: linear-gradient(120deg, var(--cor-ciano), var(--cor-verde));
  color: #04121a;
  box-shadow: var(--glow-cyan);
}

.cta-secondary {
  background: transparent;
  color: var(--cor-ciano);
  border: 1px solid var(--cor-ciano);
}

/* Movimento leve — hover (filter é sempre seguro; transform só sem prefers-reduced-motion) */

.card,
.cta {
  transition: filter 0.2s ease;
}

.card:hover,
.card:focus-visible {
  filter: brightness(1.08);
}

.cta:hover,
.cta:focus-visible {
  filter: brightness(1.06);
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: transform 0.2s ease, filter 0.2s ease;
  }

  .card:hover,
  .card:focus-visible {
    transform: translateY(-4px);
  }

  .cta {
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease;
  }

  .cta:hover,
  .cta:focus-visible {
    transform: translateY(-2px);
  }

  .cta:active {
    transform: scale(0.97);
  }
}

/* Scroll-reveal — visível por padrão; só anima se o usuário não pediu menos movimento
   (progressive enhancement: sem JS ou com prefers-reduced-motion, conteúdo já aparece) */

.reveal {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Motion Design Pass (2026-07-28) — entrada do Hero + scroll suave.
   Plano: memory/products/landing-idistopic (Skill motion-design).
   Conteúdo do Hero é visível por padrão (fora da media query abaixo);
   anima só quando o usuário não pediu menos movimento. CSS puro, sem JS. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@keyframes hero-entrada {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  header.hero h1,
  header.hero .lead,
  header.hero .cta {
    opacity: 0;
    animation: hero-entrada 0.55s ease-out forwards;
  }

  header.hero h1 {
    animation-delay: 0.05s;
  }

  header.hero .lead {
    animation-delay: 0.13s;
  }

  header.hero .cta {
    animation-delay: 0.21s;
  }
}

/* Responsivo */

@media (max-width: 900px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .step::after {
    display: none;
  }
}

@media (max-width: 560px) {
  :root {
    --espaco: 1.15rem;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .cta {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* SOLUÇÕES PASS (2026-07-28) — página /solucoes.html, reaproveita variáveis
   e classes já existentes (.card-icon, .cta, .reveal etc.). Só classes novas
   abaixo, sem alterar nenhuma regra anterior. */

.voltar-home {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  text-decoration: none;
}

.voltar-home:hover,
.voltar-home:focus-visible {
  color: var(--cor-ciano);
}

.solucoes-lista {
  display: flex;
  flex-direction: column;
  gap: calc(var(--espaco) * 1.5);
  margin-top: calc(var(--espaco) * 1.5);
  text-align: left;
}

.solucao-bloco {
  background:
    linear-gradient(180deg, rgba(245, 247, 248, 0.025), rgba(245, 247, 248, 0)),
    var(--cor-fundo);
  border: 1px solid var(--linha-fina);
  border-radius: var(--raio);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

/* Correção de bug de composição (2026-07-29) — títulos de bloco herdavam
   IBM Plex Mono da regra geral de h2 e quebravam mal em títulos longos
   (ex.: "IA" isolado numa linha). .solucao-bloco h2 volta a --fonte-titulo/
   Space Grotesk. .solucao-label (PROBLEMA, PARA QUEM, O QUE ENTREGAMOS,
   EXEMPLO) não tinha font-family própria antes (herdava --fonte-texto/
   Inter do body) e continua exatamente assim — não tocado por esta regra. */
.solucao-bloco h2 {
  font-family: var(--fonte-titulo);
}

.solucao-titulo {
  text-align: left;
  margin: 0.6rem 0 1rem;
}

/* Ajuste visual (2026-07-29) — .badge é <span> inline por padrão; margem
   vertical em elemento inline não empurra os blocos vizinhos, então o
   badge ("Disponível agora"/"Em desenvolvimento") ficava colado no label
   "PROBLEMA" logo abaixo. inline-flex resolve isso sem alterar o tamanho
   visual do badge (continua pill pequeno, não vira CTA). */
.solucao-bloco .badge {
  display: inline-flex;
  width: fit-content;
  margin: 0.75rem 0 1.25rem;
}

.solucao-bloco .cta {
  margin-top: 1.25rem;
}

.solucao-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
}

.solucao-meta p {
  margin-bottom: 0;
  font-size: 0.92rem;
}

.solucao-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--cor-ciano);
  margin-bottom: 0.3rem;
}

.solucao-nota {
  font-size: 0.88rem;
  font-style: italic;
}

@media (max-width: 720px) {
  .solucao-meta {
    grid-template-columns: 1fr;
  }
}