/* ==========================================================================
   Seção "Problema" — título/subtítulo + ilustração interativa e programática
   (100% SVG gerado via JS) que se reorganiza de "caos" para "ordem"
   conforme o usuário rola a página. Ver js/illustration.js.
   ========================================================================== */

.problem-section{
  padding:var(--space-10) 0 var(--space-10);
  background:#FFFFFF;
  text-align:center;
}
@media (max-width:1023px){ .problem-section{ padding:var(--space-6) 0 var(--space-6); } }

.problem-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem); line-height:1.18; letter-spacing:-0.02em;
  color:var(--text-primary);
  max-width:820px; margin:0 auto;
}
.problem-subtitle{
  margin:20px auto 0; max-width:640px;
  font-size:clamp(15px,1.3vw,17px); line-height:1.55; color:var(--text-secondary);
}

/* ---------- Palco scroll-driven ---------- */
/* .ilu-scroll é o "trilho": sua altura em vh define quanto scroll é
   necessário para completar a transição caos → ordem. .ilu-pin gruda
   na tela (position:sticky) enquanto esse trilho passa por trás dele. */
.ilu-scroll{
  position:relative;
  height:340vh;
  margin-top:8px;
}
.ilu-pin{
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#FFFFFF;
}
.ilu-stage{
  position:relative;
  /* o terceiro termo só entra em ação quando a tela é baixa: reserva o espaço
     fixo que o logo+frase+tag abaixo precisam, em vez de tirar uma fatia
     proporcional de vh (que encolhia o palco à toa em telas normais/altas). */
  width:min(1180px, 94vw, calc(187.5vh - 460px));
  aspect-ratio:1200/640;
}
.ilu-stage svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  overflow:visible;
}

.ilu-footer-swap{ position:relative; width:100%; margin-top:8px; min-height:210px; }
.ilu-progress-hint{
  position:absolute; top:0; left:0; right:0; margin:0;
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-secondary); opacity:.55;
}
.ilu-reveal{
  position:absolute; top:0; left:0; right:0;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:0; pointer-events:none;
}
.ilu-reveal-logo{ height:100px; width:auto; }
.ilu-reveal-tagline{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(18px,2.1vw,24px); line-height:1.3; letter-spacing:-0.01em;
  color:var(--text-primary); max-width:560px; margin:0;
}
.ilu-reveal-tag{
  font-size:12.5px; font-weight:700; letter-spacing:.1em;
  color:var(--text-secondary); margin:0;
}
@media (max-width:600px){ .ilu-reveal-logo{ height:64px; } }

/* ---------- elementos do SVG (estilizados via classe, posicionados via JS) ---------- */
.ilu-node-circle{ fill:#FFFFFF; }
.ilu-node-label{
  font-family:var(--font-body, sans-serif); font-weight:800; font-size:15px;
  letter-spacing:.02em; text-anchor:middle;
}

.ilu-conn{ fill:none; stroke-linecap:round; }
.ilu-conn--clean{ stroke:#B9C0CC; stroke-width:2.5; }

.ilu-x-mark{ pointer-events:none; }

.ilu-app-icon{ pointer-events:none; }
.ilu-app-icon rect{ fill:#FFFFFF; }

.ilu-alert{ pointer-events:none; }

.ilu-bubble-bg{ fill:#FFFFFF; stroke:#E3E6EA; stroke-width:1.5; }
.ilu-bubble-text{
  font-family:var(--font-body, sans-serif); font-size:16px; font-weight:600;
  fill:var(--text-primary); text-anchor:middle;
}
.ilu-bubble-tag-bg{ fill:#FF3B3B; }
.ilu-bubble-tag-bg--ok{ fill:#1E9E5A; }
.ilu-bubble-tag-text{
  font-family:var(--font-body, sans-serif); font-size:12.5px; font-weight:700;
  fill:#FFFFFF; text-anchor:middle;
}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .ilu-scroll{ height:300vh; }
  .ilu-node-label{ font-size:12px; }
}
@media (max-width:600px){
  .ilu-scroll{ height:260vh; }
  .ilu-app-icon, .ilu-bubble{ display:none; } /* mantém núcleos, conexões e alertas principais em telas muito estreitas */
}

/* ---------- prefers-reduced-motion: mostra direto o estado organizado, sem scrub ---------- */
@media (prefers-reduced-motion:reduce){
  .ilu-scroll{ height:auto; }
  .ilu-pin{ position:relative; height:auto; padding:24px 0; }
}