/* =========================================================================
   ORÁCULO PCM — EXPERIENCE CENTER
   Design System · Conceito PDCA · Dark Theme Premium / Centro de Comando
   ========================================================================= */

:root {
  /* --- Identidade Elipse (azul corporativo) ---
     Alinhado ao padrão do Elipse Plant Manager: primário #0070B8, azuis de
     apoio #2A9FD6 / #075A91. O PLAN do PDCA passa a ser o azul Elipse, que é a
     cor dominante de marca (botões, links, brilhos, gradientes). */
  --brand:       #0070B8;
  --brand-2:     #2A9FD6;
  --brand-deep:  #075A91;
  --brand-soft:  rgba(0, 112, 184, .14);

  /* --- PDCA core palette (PLAN = azul Elipse) --- */
  --pdca-plan:  #0070B8;   /* PLAN  · Azul Elipse */
  --pdca-do:    #E8533F;   /* DO    · Coral       */
  --pdca-check: #F0B429;   /* CHECK · Âmbar       */
  --pdca-act:   #00A878;   /* ACT   · Verde-azul  */

  --plan-soft:  rgba(0, 112, 184, .14);
  --do-soft:    rgba(232, 83, 63, .14);
  --check-soft: rgba(240, 180, 41, .14);
  --act-soft:   rgba(0, 168, 120, .14);

  /* --- Backgrounds (tema CLARO, padrão Elipse Plant Manager) --- */
  --bg-900: #F2F6FB;   /* fundo da página (azul-claro suave) */
  --bg-800: #FFFFFF;   /* faixas/superfícies */
  --bg-700: #EAF1F8;
  --bg-600: #DCE7F2;
  --surface: #FFFFFF;
  --surface-2: #F4F8FC;
  --stroke: rgba(16, 42, 67, .12);
  --stroke-strong: rgba(16, 42, 67, .22);

  /* --- Text (sobre fundo claro) --- */
  --text: #142A3F;
  --text-soft: #41566C;
  --text-dim: #72869C;

  /* --- Accent / brand gradient --- */
  --grad-neural: linear-gradient(135deg, #0070B8 0%, #16C0C0 100%);
  --grad-command: linear-gradient(135deg, #EAF3FB 0%, #FFFFFF 55%, #F0F6FC 100%);
  --grad-plan-act: linear-gradient(90deg, var(--brand), var(--brand-2));

  /* --- Geometry --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Elevation / glow (suaves, para fundo claro) --- */
  --shadow-1: 0 6px 20px rgba(16, 42, 67, .10);
  --shadow-2: 0 18px 44px rgba(16, 42, 67, .16);
  --glow-plan: 0 0 0 1px rgba(0,112,184,.25), 0 10px 28px rgba(0,112,184,.22);
  --glow-act:  0 0 0 1px rgba(0,168,120,.25), 0 10px 28px rgba(0,168,120,.22);

  /* --- Type --- */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* --- Motion --- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --speed: .45s;

  --header-h: 68px;
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg-900);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 .4em;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--pdca-plan); color: #fff; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-900); }
::-webkit-scrollbar-thumb { background: #1d2840; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #29385a; }

/* --------------------------------------------------------------- layout */
.container-x { width: min(1280px, 92vw); margin-inline: auto; }
.section { padding: clamp(48px, 8vw, 110px) 0; position: relative; }
.section--tight { padding: clamp(32px, 5vw, 64px) 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: var(--grad-plan-act);
}

.section-title { font-size: clamp(1.8rem, 4vw, 3rem); }
.section-lead { color: var(--text-soft); max-width: 62ch; font-size: 1.05rem; }

/* --------------------------------------------------------- PDCA helpers */
.c-plan  { color: var(--pdca-plan); }
.c-do    { color: var(--pdca-do); }
.c-check { color: var(--pdca-check); }
.c-act   { color: var(--pdca-act); }

.pdca-bar { display: flex; height: 4px; border-radius: 4px; overflow: hidden; }
.pdca-bar > i { flex: 1; display: block; }
.pdca-bar > i:nth-child(1){ background: var(--pdca-plan); }
.pdca-bar > i:nth-child(2){ background: var(--pdca-do); }
.pdca-bar > i:nth-child(3){ background: var(--pdca-check); }
.pdca-bar > i:nth-child(4){ background: var(--pdca-act); }

/* -------------------------------------------------------------- buttons */
.btn-x {
  --c: var(--pdca-plan);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .85em 1.5em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed);
  background: var(--c); color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.btn-x:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 26px color-mix(in srgb, var(--c) 50%, transparent); }
.btn-x:active { transform: translateY(0); }
.btn-x--ghost { background: transparent; border-color: var(--stroke-strong); color: var(--text); }
.btn-x--ghost:hover { border-color: var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.btn-x--act { --c: var(--pdca-act); color: #fff; }
.btn-x--check { --c: var(--pdca-check); color: #0b1220; }

/* ---------------------------------------------------------------- cards */
.card-x {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding: 22px;
  backdrop-filter: blur(10px);
  transition: transform var(--speed) var(--ease), border-color var(--speed), box-shadow var(--speed);
}
.card-x:hover { transform: translateY(-4px); border-color: var(--stroke-strong); box-shadow: var(--shadow-2); }

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
}

.chip {
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: .35em .8em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stroke-strong);
  color: var(--text-soft);
  display: inline-flex; align-items: center; gap: .5em;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pdca-act); box-shadow: 0 0 10px var(--pdca-act); }

/* ----------------------------------------------------------- utilities */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; } }

.text-soft { color: var(--text-soft); }
.text-dim { color: var(--text-dim); }
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--gap, 1rem); }

/* reveal-on-scroll (driven by app.js IntersectionObserver) */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}