/* ════════════════════════════════════════════════════════
   e-style.css — Sistema visual compartilhado dos slides E1–E52
   "Detalhamento Completo — DEM & LIGGGHTS" · COBEQIC 2026
   Baseado no padrão visual de p1.html / p16.html / p20.html
   ════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d1117;--panel:#161b22;--panel2:#1c2128;
  --border:#30363d;--border2:#21262d;
  --blue:#58a6ff;--blue-d:rgba(88,166,255,.12);
  --orange:#ffa657;--orange-d:rgba(255,166,87,.13);
  --green:#3fb950;--green-d:rgba(63,185,80,.12);
  --purple:#bc8cff;--purple-d:rgba(188,140,255,.12);
  --red:#ff7b72;--red-d:rgba(255,123,114,.12);
  --yellow:#e3b341;--yellow-d:rgba(227,179,65,.12);
  --white:#e6edf3;--gray:#8b949e;--dim:#484f58;
  --fn:'Inter',system-ui,sans-serif;
  --fm:'JetBrains Mono',monospace;
  --fc:'Crimson Pro',Georgia,serif;
}
html,body{width:100%;min-height:100vh;background:var(--bg);color:var(--white);
  font-family:var(--fn);overflow-x:hidden;overflow-y:auto;-webkit-font-smoothing:antialiased}
sub,sup{font-family:var(--fm)}
code{font-family:var(--fm);background:rgba(110,118,129,.16);padding:.08em .38em;border-radius:4px;font-size:.92em;color:var(--orange)}

/* ── SLIDE SHELL ── */
.slide{max-width:1180px;margin:0 auto;padding:46px 58px 96px;
  display:flex;flex-direction:column;gap:16px;min-height:100vh}
@media(max-width:760px){.slide{padding:30px 20px 96px}}

/* ── HEADER ── */
.badge-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:3.5px;
  text-transform:uppercase;padding:3px 12px;border-radius:20px;font-family:var(--fn)}
.badge.b{background:var(--blue-d);color:var(--blue);border:1px solid rgba(88,166,255,.3)}
.badge.o{background:var(--orange-d);color:var(--orange);border:1px solid rgba(255,166,87,.3)}
.badge.g{background:var(--green-d);color:var(--green);border:1px solid rgba(63,185,80,.3)}
.badge.p{background:var(--purple-d);color:var(--purple);border:1px solid rgba(188,140,255,.3)}
.badge.r{background:var(--red-d);color:var(--red);border:1px solid rgba(255,123,114,.3)}
.badge.y{background:var(--yellow-d);color:var(--yellow);border:1px solid rgba(227,179,65,.3)}

.eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:2px;color:var(--dim);text-transform:uppercase}

.slide-title{font-size:clamp(21px,2.9vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.22;color:var(--white)}
.slide-title .hl{color:var(--orange)}
.slide-title .hl.b{color:var(--blue)}
.slide-title .hl.g{color:var(--green)}
.slide-title .hl.p{color:var(--purple)}
.slide-title .hl.r{color:var(--red)}
.slide-title .hl.y{color:var(--yellow)}

.divider{width:64px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--green))}

.lead{font-size:clamp(13px,1.35vw,16px);color:var(--gray);line-height:1.68;max-width:920px}
.lead strong{color:var(--white)}

/* ── GRID LAYOUTS ── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}

/* ── CARD ── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px 17px;
  display:flex;flex-direction:column;gap:6px}
.card.b{border-left:3px solid var(--blue)}
.card.o{border-left:3px solid var(--orange)}
.card.g{border-left:3px solid var(--green)}
.card.p{border-left:3px solid var(--purple)}
.card.r{border-left:3px solid var(--red)}
.card.y{border-left:3px solid var(--yellow)}
.card-title{font-family:var(--fm);font-size:10.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase}
.card.b .card-title{color:var(--blue)}
.card.o .card-title{color:var(--orange)}
.card.g .card-title{color:var(--green)}
.card.p .card-title{color:var(--purple)}
.card.r .card-title{color:var(--red)}
.card.y .card-title{color:var(--yellow)}
.card-text{font-size:clamp(12px,1.15vw,14px);color:var(--gray);line-height:1.62}
.card-text strong{color:var(--white)}
.card-text em{font-style:normal;color:var(--white);font-family:var(--fm);font-size:.94em}

/* ── TERM LIST (definições) ── */
.term-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.term-list li{border-bottom:1px solid var(--border2);padding-bottom:9px;font-size:clamp(12px,1.15vw,14px);
  color:var(--gray);line-height:1.6}
.term-list li:last-child{border-bottom:none;padding-bottom:0}
.term-list .term{font-weight:700;color:var(--orange);font-family:var(--fm);display:inline-block;min-width:150px}
.term-list li strong{color:var(--white)}

/* ── EQUATION BOX ── */
.eq-box{background:var(--panel2);border:1px solid var(--border);border-left:3px solid var(--purple);
  border-radius:10px;padding:14px 18px}
.eq-label{font-family:var(--fm);font-size:9.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--purple);margin-bottom:8px}
.eq-line{font-family:var(--fm);font-size:clamp(12.5px,1.5vw,16px);line-height:2.05;letter-spacing:.3px;color:var(--white)}
.eq-line .v{color:var(--purple)}
.eq-line .c{color:var(--orange)}
.eq-line .d{color:var(--blue)}
.eq-line .g{color:var(--green)}
.eq-line .r{color:var(--red)}
.eq-line .y{color:var(--yellow)}
.eq-line small{color:var(--dim);font-size:.72em}

.formula{text-align:center;background:var(--panel2);border:1px solid rgba(188,140,255,.30);border-radius:10px;
  padding:16px 20px;font-family:var(--fm);font-size:clamp(14px,1.9vw,20px);color:var(--white);letter-spacing:.3px}
.formula strong{color:var(--orange)}

/* ── CODE BLOCK (LIGGGHTS) ── */
.code-block{background:#010409;border:1px solid var(--border);border-left:4px solid var(--green);
  border-radius:0 8px 8px 0;padding:13px 17px;font-family:var(--fm);font-size:clamp(11px,1.05vw,13px);
  color:#c9d1d9;line-height:1.7;white-space:pre-wrap;word-wrap:break-word;overflow-x:auto}
.code-block .cmt{color:var(--dim);font-style:italic}
.code-block .kw{color:var(--orange)}
.code-block .val{color:var(--blue)}
.code-block .str{color:var(--green)}

/* ── ÁRVORE DE DIRETÓRIOS ── */
.tree{background:#010409;border:1px solid var(--border);border-radius:8px;padding:14px 18px;
  font-family:var(--fm);font-size:clamp(11px,1.05vw,13px);line-height:1.65;color:#c9d1d9;overflow-x:auto}
.tree .folder{color:var(--orange);font-weight:700}
.tree .file{color:var(--blue)}
.tree .desc{color:var(--dim);font-style:italic}

/* ── ALERT / DESTAQUE ── */
.alert{border-radius:10px;padding:12px 17px;display:flex;gap:11px;align-items:flex-start;
  font-size:clamp(12px,1.15vw,14px);line-height:1.62;color:var(--white)}
.alert .ic{font-size:17px;flex-shrink:0;line-height:1.3}
.alert.b{background:var(--blue-d);border:1px solid rgba(88,166,255,.30)}
.alert.o{background:var(--orange-d);border:1px solid rgba(255,166,87,.30)}
.alert.g{background:var(--green-d);border:1px solid rgba(63,185,80,.30)}
.alert.p{background:var(--purple-d);border:1px solid rgba(188,140,255,.30)}
.alert.r{background:var(--red-d);border:1px solid rgba(255,123,114,.30)}
.alert.y{background:var(--yellow-d);border:1px solid rgba(227,179,65,.30)}
.alert strong{color:inherit}

/* ── COMPARAÇÃO (2–3 colunas) ── */
.compare{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.compare.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.compare,.compare.c3{grid-template-columns:1fr}}
.compare-item{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.compare-item h4{font-family:var(--fm);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px}
.compare-item.b h4{color:var(--blue)} .compare-item.o h4{color:var(--orange)}
.compare-item.g h4{color:var(--green)} .compare-item.p h4{color:var(--purple)}
.compare-item.r h4{color:var(--red)} .compare-item.y h4{color:var(--yellow)}
.compare-item p,.compare-item li{font-size:clamp(12px,1.1vw,13.5px);color:var(--gray);line-height:1.58}
.compare-item ul{margin-left:1.1em;display:flex;flex-direction:column;gap:5px}
.compare-item strong{color:var(--white)}

/* ── PASSOS / ALGORITMO ── */
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:flex;gap:12px;align-items:flex-start}
.step-num{background:var(--blue-d);color:var(--blue);font-family:var(--fm);font-size:11px;font-weight:700;
  width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.step-body{flex:1;min-width:0}
.step-title{font-size:clamp(12.5px,1.15vw,14px);font-weight:700;color:var(--white);margin-bottom:2px}
.step-code{font-family:var(--fm);font-size:clamp(11px,1.02vw,12.5px);color:var(--gray);line-height:1.55}

/* ── TABELA ── */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:clamp(11.5px,1.05vw,13.5px)}
th{background:var(--panel2);color:var(--gray);text-align:left;padding:.55rem .8rem;
  font-family:var(--fm);font-size:.86em;letter-spacing:.5px;text-transform:uppercase;border-bottom:1px solid var(--border)}
td{padding:.5rem .8rem;border-bottom:1px solid var(--border2);color:var(--white)}
tr:last-child td{border-bottom:none}

/* ── PILL / TAG inline ── */
.pill{display:inline-block;font-family:var(--fm);font-size:.82em;padding:.08em .55em;border-radius:5px;
  background:var(--panel2);border:1px solid var(--border);color:var(--gray)}

/* ── STAT ROW ── */
.stat{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 16px}
.stat-title{font-family:var(--fm);font-size:9.5px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.stat-row{display:flex;justify-content:space-between;gap:10px;font-size:clamp(11.5px,1.05vw,13px);
  padding:4px 0;border-bottom:1px solid var(--border2)}
.stat-row:last-child{border-bottom:none}
.stat-label{color:var(--gray)}
.stat-val{font-family:var(--fm);font-weight:700;color:var(--white)}

/* ── TEXTO utilitário de cor ── */
.t-b{color:var(--blue)} .t-o{color:var(--orange)} .t-g{color:var(--green)}
.t-p{color:var(--purple)} .t-r{color:var(--red)} .t-y{color:var(--yellow)} .t-dim{color:var(--dim)}

/* ── NAV ── */
#nav{position:fixed;top:10px;right:12px;display:flex;align-items:center;gap:5px;z-index:500;
  background:rgba(13,17,23,.75);backdrop-filter:blur(10px);border:1px solid var(--border);
  border-radius:7px;padding:4px 7px}
.nbtn{width:24px;height:24px;border-radius:4px;border:1px solid var(--border);background:transparent;
  color:var(--gray);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .18s;text-decoration:none;line-height:1}
.nbtn:hover{border-color:var(--blue);color:var(--blue)}
.nbtn.dis{opacity:.28;pointer-events:none}
#ctr{font-size:10px;color:var(--dim);min-width:64px;text-align:center;font-family:var(--fm)}
#prog{position:fixed;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--green));
  z-index:500;transition:width .3s}

/* ── RODAPÉ DE CRÉDITO ── */
.foot-credit{margin-top:auto;padding-top:10px;font-size:10.5px;color:var(--dim);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-family:var(--fm)}