/* ============================================
   LOGIC ENGINE — PÁGINA HUB
   Builder = azul/índigo (--hair-main → --eye-main, já usado
             em todo o site pro Logic Builder)
   Script  = ciano (--eye-grad), pra ler como "código" sem
             sair da paleta existente
   ============================================ */

:root {
  --eng-script: var(--eye-grad, #5ABEFF);
}

/* --- HERO --- */
.eng-hero {
  padding: 130px 1.5rem 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.eng-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(124, 143, 255, 0.14) 0%, transparent 65%);
  pointer-events: none;
}
.eng-hero-inner { position: relative; z-index: 1; max-width: 760px; }

.eng-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 700;
  color: var(--white);
  margin: 0.75rem 0 1rem;
  letter-spacing: -0.01em;
}
.eng-title .highlight-split {
  background: linear-gradient(90deg, var(--hair-main) 0%, var(--white) 48%, var(--eng-script) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.eng-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* --- ASSINATURA VISUAL: núcleo se dividindo em 2 caminhos --- */
.eng-split {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin: 2.75rem auto 0.5rem;
  max-width: 420px;
}
.eng-split-core {
  position: relative;
  z-index: 2;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #1c2350, var(--bg-card));
  border: 1.5px solid var(--border-gold);
  box-shadow: 0 0 30px rgba(255, 217, 102, 0.25), inset 0 0 12px rgba(255, 217, 102, 0.1);
  animation: eng-core-pulse 3.2s ease-in-out infinite;
}
.eng-split-core-star { font-size: 1.6rem; }
@keyframes eng-core-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 217, 102, 0.25), inset 0 0 12px rgba(255, 217, 102, 0.1); }
  50%      { box-shadow: 0 0 44px rgba(255, 217, 102, 0.4),  inset 0 0 16px rgba(255, 217, 102, 0.18); }
}

.eng-split-beam {
  position: absolute; top: 50%; height: 2px; width: 130px;
  z-index: 1;
}
.eng-split-beam.left  { right: 50%; transform: translateY(-50%); background: linear-gradient(90deg, transparent, var(--hair-main)); }
.eng-split-beam.right { left:  50%; transform: translateY(-50%); background: linear-gradient(90deg, var(--eng-script), transparent); }

.eng-split-node {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  width: 84px; padding: 0.85rem 0.5rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.eng-split-node.left  { left: 0;  border-color: rgba(169, 214, 255, 0.35); }
.eng-split-node.right { right: 0; border-color: rgba(90, 190, 255, 0.35); }
.eng-node-icon  { font-size: 1.4rem; }
.eng-node-label { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }

.eng-hero-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* --- FAIXA "PRÁTICO" --- */
.eng-practical { padding-top: 0; padding-bottom: 0; }
.eng-practical-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.eng-practical-item {
  background: var(--bg-card);
  padding: 1.75rem 1.5rem;
  text-align: center;
}
.eng-practical-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--hair-main), var(--eng-script));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 0.3rem;
}
.eng-practical-label { font-size: 0.85rem; color: var(--text-secondary); }

/* --- CAMINHOS --- */
.eng-path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.eng-path-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex; flex-direction: column;
  transition: var(--transition);
}
.eng-path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.eng-path-card.builder:hover { border-color: rgba(169, 214, 255, 0.4); }
.eng-path-card.script:hover  { border-color: rgba(90, 190, 255, 0.4); }

.eng-path-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.eng-path-icon {
  font-size: 1.6rem; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.eng-path-card.builder .eng-path-icon { background: linear-gradient(135deg, rgba(169,214,255,.18), rgba(124,143,255,.1)); }
.eng-path-card.script  .eng-path-icon { background: linear-gradient(135deg, rgba(90,190,255,.18), rgba(90,190,255,.06)); }
.eng-path-title  { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--white); }
.eng-path-kicker { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }

.eng-path-desc { font-size: 0.92rem; color: var(--text-secondary); margin-bottom: 1.25rem; }
.eng-path-desc code {
  background: rgba(255,255,255,0.06); padding: 0.1rem 0.4rem; border-radius: 5px;
  font-size: 0.85em; color: var(--eng-script);
}

/* Mini prévia — Builder (blocos) */
.eng-preview {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-mid);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.eng-preview-row {
  font-size: 0.78rem; color: var(--text-secondary);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.eng-preview-row .tag {
  font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 6px; white-space: nowrap;
}
.eng-preview-row .tag.trigger { background: rgba(169,214,255,.15); color: var(--hair-main); }
.eng-preview-row .tag.cond    { background: rgba(255,217,102,.15); color: var(--gold); }
.eng-preview-row .tag.action  { background: rgba(124,143,255,.18); color: var(--eye-main); }
.eng-preview-arrow { color: var(--text-muted); font-size: 0.75rem; padding: 0.15rem 0 0.15rem 0.4rem; }

/* Mini prévia — Script (código) */
.script-preview pre {
  margin: 0; font-family: 'Courier New', monospace; font-size: 0.76rem; line-height: 1.6;
  color: var(--text-secondary); white-space: pre; overflow-x: auto;
}
.script-preview .k { color: #c586c0; font-weight: 600; } /* keyword */
.script-preview .f { color: var(--eng-script); }          /* função */
.script-preview .s { color: #57F287; }                    /* string */
.script-preview .n { color: var(--gold); }                /* número */

.eng-path-list { margin-bottom: 1.5rem; flex: 1; }
.eng-path-list li {
  position: relative; padding-left: 1.3rem; margin-bottom: 0.5rem;
  font-size: 0.85rem; color: var(--text-secondary);
}
.eng-path-list li::before { content: '✦'; position: absolute; left: 0; color: var(--eng-script); font-size: 0.7rem; top: 0.2rem; }
.eng-path-card.builder .eng-path-list li::before { color: var(--hair-main); }

.eng-path-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem; border-radius: 50px;
  font-weight: 700; font-size: 0.9rem;
  transition: var(--transition);
}
.eng-path-cta.builder {
  background: linear-gradient(135deg, var(--eye-main), var(--hair-deep));
  color: var(--white); box-shadow: 0 4px 20px rgba(124, 143, 255, 0.3);
}
.eng-path-cta.script {
  background: transparent; color: var(--eng-script);
  border: 1.5px solid rgba(90, 190, 255, 0.4);
}
.eng-path-cta:hover { transform: translateY(-2px); }
.eng-path-cta.script:hover { background: rgba(90, 190, 255, 0.08); border-color: var(--eng-script); }
.eng-cta-arrow { transition: transform 0.25s ease; }
.eng-path-cta:hover .eng-cta-arrow { transform: translateX(3px); }

.eng-paths-footnote {
  text-align: center; margin-top: 2rem; font-size: 0.85rem; color: var(--text-muted);
}
.eng-paths-footnote a { color: var(--eng-script); font-weight: 600; }
.eng-paths-footnote a:hover { text-decoration: underline; }

/* --- RESPONSIVO --- */
@media (max-width: 860px) {
  .eng-path-grid { grid-template-columns: 1fr; }
  .eng-practical-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .eng-hero { padding: 110px 1.25rem 40px; }
  .eng-split { max-width: 280px; height: 130px; }
  .eng-split-beam { width: 70px; }
  .eng-split-node { width: 68px; padding: 0.65rem 0.4rem; }
}

/* --- ACESSIBILIDADE --- */
@media (prefers-reduced-motion: reduce) {
  .eng-split-core { animation: none; }
}