/* Projeto Empresa Livre — estilo compartilhado
   Tokens da Jornada Proxmox (jornadaproxmox.com.br) para manter a unidade visual. */
:root {
  --bg: #070e1d;          /* oklch(16.5% .035 265) */
  --panel: #0e1626;       /* oklch(20% .035 265) */
  --panel2: #151e31;      /* oklch(23.5% .04 265) — card */
  --text: #f5f7fb;
  --muted: #a3adbf;       /* oklch(72% .025 250) */
  --orange: #fc701f;      /* oklch(70.5% .19 45) — primary/proxmox */
  --orange2: #fd923e;
  --blue: #1d84f5;        /* oklch(62% .19 255) — infra */
  --line: rgba(255, 255, 255, .08);
  --green: #43c251;       /* oklch(72% .19 145) — success */
  --red: #f94144;
  --on-primary: #0b1120;
  --radius: 16px;
  --glow-orange: 0 0 40px -8px rgba(252, 112, 31, .6);
  --glow-blue: 0 0 40px -8px rgba(29, 132, 245, .5);
  --head: "Space Grotesk", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0, rgba(252, 112, 31, .08), transparent 40%),
    radial-gradient(circle at 85% 100%, rgba(29, 132, 245, .08), transparent 40%),
    var(--bg);
  background-color: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: min(1120px, calc(100% - 32px)); margin: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--orange); color: var(--on-primary); padding: 8px 12px; border-radius: 8px; }

/* ---------- Topo ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 14, 29, .82);
  backdrop-filter: blur(12px);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: flex; flex-shrink: 0; white-space: nowrap; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  color: var(--on-primary); background: linear-gradient(135deg, var(--orange2), var(--orange)); font-weight: 950; font-size: 13px;
}
.brand small { display: block; color: var(--muted); font-weight: 500; letter-spacing: .04em; font-size: 10px; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav-link, .nav-drop { padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--muted); font: 600 14px Inter, system-ui, sans-serif; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.nav-link:hover, .nav-link[aria-current="page"], .nav-drop:hover, .nav-drop[aria-expanded="true"], .nav-drop.current { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav-drop::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; vertical-align: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.nav-drop[aria-expanded="true"]::after { transform: rotate(-135deg); vertical-align: 0; }
.nav .btn { margin-left: 6px; min-height: 38px; padding: 8px 12px; font-size: 14px; color: var(--on-primary); white-space: nowrap; }
.nav-group { position: relative; }
.nav-panel { position: absolute; top: calc(100% + 10px); left: -8px; z-index: 60; width: 320px; padding: 8px; display: none; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 22, 38, .98); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.nav-panel::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.nav-group.open .nav-panel { display: flex; }
.nav-panel a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.nav-panel a b { font-size: 14px; color: var(--text); }
.nav-panel a small { font-size: 12.5px; color: var(--muted); }
.nav-panel a:hover, .nav-panel a:focus-visible { background: rgba(255, 255, 255, .06); }
.nav-panel a[aria-current="page"] { background: rgba(252, 112, 31, .1); }
.nav-panel a[aria-current="page"] b { color: var(--orange2); }
.nav-label { display: none; }
.nav-sub { padding: 8px 12px 2px; color: var(--c-virt); font-size: 10px; }
.nav-panel a.nav-all { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
.nav-panel a.nav-all b { font-size: 13px; color: var(--orange2); }
.nav-link.nav-px { color: var(--text); }
.nav-link.nav-px::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 2px; background: var(--orange); transform: rotate(45deg); vertical-align: 1px; }
.nav-toggle { display: none; position: relative; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { position: absolute; left: 11px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
.nav-toggle span { top: 19px; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); background: var(--text); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); background: var(--text); }

@media (max-width: 1240px) {
  .nav-toggle { display: block; }
  .nav {
    /* .topbar tem backdrop-filter, então ela é a referência do fixed: altura calculada pela tela */
    position: fixed; left: 0; right: 0; top: 100%; z-index: 49; height: calc(100vh - 68px); height: calc(100dvh - 68px);
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-top: 1px solid var(--line);
    display: none;
  }
  .nav.open { display: flex; animation: nav-in .2s ease-out; }
  @keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } }
  .nav-drop { display: none; }
  .nav-panel { position: static; display: flex; width: auto; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .nav-panel::before { display: none; }
  .nav-label { display: block; padding: 12px 12px 4px; color: var(--orange2); }
  .nav-panel a { padding: 9px 12px; }
  .nav-panel a b { font-size: 16px; }
  .nav-link { padding: 12px; font-size: 16px; color: var(--text); }
  .nav-link.nav-bn { margin-top: 6px; text-align: center; }
  .nav .btn { margin: 10px 0 0; min-height: 48px; font-size: 16px; }
  body.nav-lock { overflow: hidden; }
}
@media (min-width: 1241px) and (max-width: 1320px) { .brand small { display: none; } }

/* ---------- Tipografia / seções ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid rgba(252, 112, 31, .4); border-radius: 999px; color: #fdb07a;
  background: rgba(252, 112, 31, .08); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--head); letter-spacing: -.03em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(2.4rem, 6.5vw, 4.8rem); letter-spacing: -.06em; line-height: 1; }
h1 span, h2 span { color: var(--orange2); }
h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
h3 { font-size: 1.2rem; letter-spacing: -.02em; }
.lead { color: var(--muted); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 680px; }
.muted { color: var(--muted); }

.hero { padding: 84px 0 64px; text-align: center; }
.hero h1 { max-width: 900px; margin: 20px auto 18px; }
.hero .lead { margin: 0 auto; }
.hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero.left { text-align: left; }
.hero.left h1, .hero.left .lead { margin-left: 0; }
.hero.left .hero-actions { justify-content: flex-start; }

.section { padding: 72px 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { margin-bottom: 36px; max-width: 720px; }
.section-head .kicker { color: var(--orange2); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; }
.section-head p { color: var(--muted); margin: 12px 0 0; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 18px; border: 1px solid transparent; border-radius: 12px;
  text-decoration: none; font-weight: 800; cursor: pointer; font: inherit; font-weight: 800;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn-primary { background: var(--orange); color: var(--on-primary); }
.btn-primary:hover { box-shadow: var(--glow-orange); }
.btn-ghost { border-color: var(--line); background: rgba(255, 255, 255, .03); color: var(--text); }
.btn-ghost:hover { background: rgba(255, 255, 255, .07); }
.btn-block { width: 100%; }
.btn { max-width: 100%; overflow-wrap: anywhere; text-align: center; }

/* ---------- Grid / cards ---------- */
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
}
.card p { margin: 0; color: var(--muted); }
.card .icon { font-size: 26px; line-height: 1; }
.card .tag {
  align-self: flex-start; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line);
}
.card .tag.ok { color: var(--green); border-color: rgba(67, 194, 81, .35); }
.card .tag.hot { color: #fdb07a; border-color: rgba(252, 112, 31, .4); }
.card .actions { margin-top: auto; padding-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.card.link { text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.card.link:hover { border-color: rgba(253, 146, 62, .55); transform: translateY(-3px); }
.card.featured { border-color: rgba(252, 112, 31, .55); box-shadow: 0 20px 60px -30px rgba(252, 112, 31, .5); }
.card .ribbon {
  position: absolute; top: -12px; left: 24px; padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--orange2), var(--orange)); color: var(--on-primary); font-size: 11px; font-weight: 900; letter-spacing: .08em;
}
.more { color: var(--orange2); font-weight: 700; text-decoration: none; font-size: 14px; }

ul.check { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
ul.check li { padding-left: 26px; position: relative; color: var(--text); }
ul.check li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 900; }
ul.check li.no { color: var(--muted); }
ul.check li.no::before { content: "✕"; color: var(--red); }

.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price s { color: var(--muted); }
.price strong { font-size: 2.2rem; letter-spacing: -.04em; }
.price-note { color: var(--muted); font-size: 14px; }

/* ---------- Estatísticas ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stats div { background: var(--panel); padding: 24px; text-align: center; }
.stats strong { display: block; font-size: 2rem; letter-spacing: -.04em; color: var(--orange2); }
.stats span { color: var(--muted); font-size: 14px; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Pílulas de tecnologia ---------- */
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.pills span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 600; }

/* ---------- Depoimentos ---------- */
blockquote { margin: 0; }
.quote p { color: var(--text); font-size: 15px; }
.quote footer { color: var(--muted); font-size: 13px; margin-top: auto; }
.quote footer strong { color: var(--text); display: block; }

/* ---------- Autor ---------- */
.author { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: center; }
.avatar {
  width: 160px; height: 160px; border-radius: 28px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--orange2), var(--orange)); color: var(--on-primary); font-size: 52px; font-weight: 950; letter-spacing: -.06em;
}
@media (max-width: 640px) { .author { grid-template-columns: 1fr; } .avatar { width: 96px; height: 96px; font-size: 34px; border-radius: 20px; } }

/* ---------- Módulos / ementa ---------- */
ol.modules { counter-reset: m; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
ol.modules li { counter-increment: m; display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
ol.modules li::before { content: counter(m, decimal-leading-zero); color: var(--orange2); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- FAQ ---------- */
details { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 0 18px; }
details + details { margin-top: 10px; }
summary { cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--orange2); font-weight: 900; }
details[open] summary::after { content: "−"; }
details p { margin: 0 0 16px; color: var(--muted); }

/* ---------- Faixa CTA ---------- */
.cta-band {
  padding: 48px; border-radius: 24px; text-align: center;
  border: 1px solid rgba(252, 112, 31, .4);
  background: radial-gradient(ellipse at 50% 0%, rgba(252, 112, 31, .18), transparent 60%), var(--panel);
}
.cta-band p { color: var(--muted); max-width: 620px; margin: 12px auto 0; }
@media (max-width: 640px) { .cta-band { padding: 32px 20px; } }

/* ---------- Rodapé ---------- */
.footer { border-top: 1px solid var(--line); padding: 48px 0 32px; margin-top: 24px; color: var(--muted); font-size: 14px; }
.footer .cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.footer li { overflow-wrap: anywhere; }
.footer h4 { color: var(--text); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--text); }
.footer .bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
@media (max-width: 760px) { .footer .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer .cols > :first-child { grid-column: 1 / -1; } }

/* ---------- WhatsApp flutuante ---------- */
.wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .6);
}
.wa svg { width: 28px; height: 28px; }

/* =====================================================================
   Componentes dinâmicos (home e reaproveitáveis)
   ===================================================================== */
:root {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --c-virt: #fd923e;
  --c-net: #319cfc;
  --c-sto: #43c251;
  --c-ges: #b48df4;
}
.mono { font-family: var(--mono); letter-spacing: .2em; text-transform: uppercase; font-size: 11px; color: var(--muted); }

/* Revelação ao rolar */
.reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.wait { opacity: 0; transform: translateY(26px); }
.reveal.in { opacity: 1; transform: none; }

/* Fundo quadriculado sutil */
.gridbg {
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---------- Hero com rede animada ---------- */
.hx { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(7, 14, 29, .75) 38%, rgba(7, 14, 29, .1) 70%), linear-gradient(0deg, var(--bg), transparent 30%); }
.hx .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; min-height: min(80vh, 700px); padding: 44px 0 56px; }
.hx h1 { font-size: clamp(2.3rem, 4.8vw, 4rem); font-weight: 700; letter-spacing: -.04em; margin: 22px 0 16px; }
.hx h1 span { display: block; background: linear-gradient(135deg, var(--orange2), #f94144); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx .lead { font-size: 1.15rem; max-width: 480px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(21, 30, 49, .6); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange2); box-shadow: 0 0 0 0 rgba(253, 146, 62, .6); animation: beacon 2.2s infinite; }
@keyframes beacon { 70% { box-shadow: 0 0 0 9px rgba(253, 146, 62, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 146, 62, 0); } }
.hx .hero-actions { justify-content: flex-start; }
@media (max-width: 900px) { .hx .wrap { grid-template-columns: 1fr; min-height: 0; padding: 56px 0; } .hx::after { background: linear-gradient(0deg, var(--bg), rgba(7, 14, 29, .6)); } }

/* Terminal */
.term { border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 22, 38, .88); backdrop-filter: blur(8px); box-shadow: 0 40px 90px -40px rgba(252, 112, 31, .45); overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.term-bar b { width: 10px; height: 10px; border-radius: 50%; background: #333d52; }
.term-bar b:first-child { background: #ff5f57; } .term-bar b:nth-child(2) { background: #febc2e; } .term-bar b:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 8px; }
.term pre { margin: 0; padding: 18px 18px 22px; min-height: 250px; font: 13px/1.75 var(--mono); color: #cdd5e3; white-space: pre-wrap; }
.term .p { color: var(--orange2); } .term .ok { color: var(--green); } .term .dim { color: #6f7a90; }
.caret { display: inline-block; width: 8px; height: 15px; background: var(--orange2); vertical-align: -2px; animation: blk 1s steps(1) infinite; }
@keyframes blk { 50% { opacity: 0; } }

/* Faixa de tecnologias rolando */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 44px; width: max-content; animation: slide 38s linear infinite; }
.marquee .track span { font: 500 13px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #6f7a90; white-space: nowrap; }
.marquee .track span::before { content: "◆"; color: var(--orange); margin-right: 44px; font-size: 8px; vertical-align: 2px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Escolas (estilo Alura) ---------- */
.schools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .schools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .schools { grid-template-columns: 1fr; } }
.school { --c: var(--orange2); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 20px; border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--panel2)), var(--panel)); text-decoration: none; overflow: hidden; transition: transform .25s ease, border-color .25s ease; }
.school:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.school::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--c); }
.school .art { height: 120px; margin: 4px 0 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); display: grid; place-items: center; }
.school .art svg { width: 100%; height: 100%; }
.school h3 { font-size: 1.25rem; }
.school p { margin: 0; color: var(--muted); font-size: 14px; }
.school .go { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; font: 500 12px var(--mono); color: var(--c); letter-spacing: .08em; }
.school .go::after { content: "→"; font-size: 16px; transition: transform .2s; }
.school:hover .go::after { transform: translateX(4px); }
.s-virt { --c: var(--c-virt); } .s-net { --c: var(--c-net); } .s-sto { --c: var(--c-sto); } .s-ges { --c: var(--c-ges); }

/* Mini animações das escolas */
.vm-move { animation: vmmove 4.5s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes vmmove { 0%, 30% { transform: translateX(0); } 50%, 80% { transform: translateX(58px); } 100% { transform: translateX(0); } }
.node-pulse { animation: npulse 2.4s ease-in-out infinite; }
@keyframes npulse { 50% { opacity: .35; } }
.pk { animation: pk 2.6s linear infinite; }
.pk.b { animation-delay: 1.3s; }
@keyframes pk { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(170px); opacity: 0; } }
.pk-bad { animation: pkbad 2.6s linear infinite .6s; }
@keyframes pkbad { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateX(72px); opacity: 1; } 55%, 100% { transform: translateX(72px); opacity: 0; } }
.fill { transform-box: fill-box; transform-origin: left; animation: fill 3.2s ease-in-out infinite; }
.fill.d2 { animation-delay: .4s; } .fill.d3 { animation-delay: .8s; }
@keyframes fill { 0% { transform: scaleX(.05); } 60%, 100% { transform: scaleX(1); } }
.bar { transform-box: fill-box; transform-origin: bottom; animation: grow 3.4s ease-in-out infinite; }
.bar.d2 { animation-delay: .25s; } .bar.d3 { animation-delay: .5s; } .bar.d4 { animation-delay: .75s; }
@keyframes grow { 0% { transform: scaleY(.15); } 55%, 100% { transform: scaleY(1); } }
.draw { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 3.4s ease-in-out infinite; }
@keyframes draw { 60%, 100% { stroke-dashoffset: 0; } }

/* ---------- Trilha (etapas que avançam) ---------- */
.path { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .path { grid-template-columns: 1fr; } }
.path-board { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); padding: 26px; }
.path-steps { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin: 26px 0 30px; }
.path-steps::before, .path-steps .prog { content: ""; position: absolute; top: 9px; left: 8%; right: 8%; height: 2px; background: var(--line); }
.path-steps .prog { right: auto; width: 0; background: linear-gradient(90deg, var(--orange), var(--orange2)); transition: width .6s ease; }
.path-steps button { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; background: none; border: 0; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .06em; cursor: pointer; padding: 0; }
.path-steps button i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #333d52; background: var(--bg); transition: all .3s; }
.path-steps button.done i { border-color: var(--orange); background: var(--orange); }
.path-steps button.on i { border-color: var(--orange2); background: var(--bg); box-shadow: 0 0 0 6px rgba(253, 146, 62, .18); }
.path-steps button.on { color: var(--text); }
.path-now { min-height: 96px; text-align: center; }
.path-now .mono { color: var(--orange2); }
.path-now h3 { font-size: 1.6rem; margin: 8px 0 6px; font-weight: 600; }
.path-now p { margin: 0; color: var(--muted); }
.path-now > * { animation: rise .45s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 560px) { .path-steps button span { display: none; } }

/* ---------- Carrossel de cursos ---------- */
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 24px; }
.rail-nav { display: flex; gap: 8px; }
.rail-nav button { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 18px; cursor: pointer; }
.rail-nav button:hover { border-color: var(--orange2); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 268px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.course { --c: var(--orange2); scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); text-decoration: none; overflow: hidden; transition: transform .2s, border-color .2s; }
.course:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.course .top { height: 112px; padding: 16px; display: flex; justify-content: space-between; align-items: flex-start;
  background: radial-gradient(circle at 85% 120%, color-mix(in srgb, var(--c) 55%, transparent), transparent 60%), color-mix(in srgb, var(--c) 10%, var(--panel2)); }
.course .top .ic { font-size: 30px; }
.course .top .mono { color: var(--c); }
.course .body { padding: 16px; display: grid; gap: 6px; }
.course h3 { font-size: 1.05rem; }
.course .meta { display: flex; gap: 12px; font: 12px var(--mono); color: var(--muted); }
.c-virt { --c: var(--c-virt); } .c-net { --c: var(--c-net); } .c-sto { --c: var(--c-sto); } .c-ges { --c: var(--c-ges); }

/* ---------- Contadores ---------- */
.counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.counters div { padding: 30px 20px; text-align: center; border-right: 1px solid var(--line); background: var(--panel); }
.counters div:last-child { border-right: 0; }
.counters strong { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .counters { grid-template-columns: 1fr 1fr; } .counters div:nth-child(2) { border-right: 0; } .counters div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ---------- Planos compactos ---------- */
.plans { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.plan.hot { border-color: rgba(252, 112, 31, .6); background: radial-gradient(circle at 50% 0%, rgba(252, 112, 31, .16), transparent 60%), var(--panel2); }
.plan .val { font-size: 2.2rem; font-weight: 600; letter-spacing: -.04em; }
.plan .val small { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.plan .btn { margin-top: auto; }

/* ---------- Depoimentos rolando ---------- */
.quotes { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.quotes .track { display: flex; gap: 16px; width: max-content; animation: slide 60s linear infinite; }
.quotes:hover .track { animation-play-state: paused; }
.quotes figure { margin: 0; width: 340px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); display: grid; gap: 14px; align-content: space-between; }
.quotes blockquote { font-size: 15px; }
.quotes figcaption { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.quotes figcaption b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(253, 146, 62, .15); color: var(--orange2); font-size: 12px; }
.quotes figcaption strong { color: var(--text); display: block; font-weight: 600; }
.stars { color: #ffc861; letter-spacing: 2px; font-size: 13px; }

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

/* ---------- Catálogo com compra direta ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tabs a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.tabs a:hover { color: var(--text); border-color: var(--orange2); }
section[id] { scroll-margin-top: 80px; }
.ccard { border-top: 3px solid var(--c); scroll-margin-top: 90px; }
.ccard:target { box-shadow: 0 0 0 2px var(--c); }
.ccard-top { display: flex; justify-content: space-between; align-items: center; }
.ccard-top .ic { font-size: 26px; }
.ccard-top .mono { color: var(--c); }
.ccard .actions .btn { padding: 10px 14px; min-height: 42px; font-size: 14px; }
.ccard .actions .btn-primary { flex: 1; }
.cprice { margin-left: auto; color: var(--c); font-weight: 600; font-family: var(--mono); }

/* ---------- Painel de compra rápida ---------- */
.qv { width: min(460px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--line);
  background: var(--panel); color: var(--text); overflow-y: auto; }
.qv::backdrop { background: rgba(3, 7, 16, .7); backdrop-filter: blur(3px); }
.qv[open] { animation: qvin .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes qvin { from { transform: translateX(40px); opacity: 0; } }
.qv-x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: rgba(7, 14, 29, .6); color: var(--text); cursor: pointer; font-size: 14px; }
.qv-head { height: 150px; padding: 22px; display: flex; align-items: flex-end; justify-content: space-between;
  background: radial-gradient(circle at 85% 120%, color-mix(in srgb, var(--c) 60%, transparent), transparent 60%), color-mix(in srgb, var(--c) 12%, var(--panel2)); }
.qv-head .ic { font-size: 44px; }
.qv-head .mono { color: var(--c); }
.qv-main { padding: 24px 22px 28px; display: grid; gap: 18px; }
.qv-main h2 { font-size: 1.7rem; }
.qv-main > p { margin: -8px 0 0; color: var(--muted); }
.qv-buy { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel2); }
.qv-buy .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.qv-buy strong { font-size: 1.8rem; font-weight: 600; letter-spacing: -.03em; }
.qv-buy .btn { width: 100%; min-height: 52px; font-size: 16px; }
.qv-up { display: block; text-align: center; font-size: 14px; color: var(--muted); text-decoration: none; }
.qv-up b { color: var(--orange2); }
.qv-trust { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .qv { height: auto; max-height: 92vh; margin: auto 0 0; width: 100%; border-left: 0; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; }
  .qv[open] { animation-name: qvup; }
  @keyframes qvup { from { transform: translateY(60px); opacity: 0; } }
  .qv-head { height: 110px; }
}

/* ---------- Faixa da Jornada Proxmox (topo da home) ---------- */
.mission {
  position: relative; display: grid; grid-template-columns: auto auto 1fr 140px auto; align-items: center; gap: 22px;
  margin: 18px 0 0; padding: 14px 18px; border-radius: var(--radius); text-decoration: none; overflow: hidden;
  border: 1px solid rgba(252, 112, 31, .35);
  background: radial-gradient(circle at 0% 0%, rgba(252, 112, 31, .16), transparent 45%), radial-gradient(circle at 100% 100%, rgba(29, 132, 245, .16), transparent 45%), var(--panel2);
  transition: box-shadow .25s ease, transform .25s ease;
}
.mission:hover { box-shadow: var(--glow-orange); transform: translateY(-2px); }
.mission::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .07) 45%, transparent 60%); transform: translateX(-100%); animation: shine 5s ease-in-out infinite 1.5s; }
@keyframes shine { 40%, 100% { transform: translateX(100%); } }
.mission-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(21, 30, 49, .6); }
.mission-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: beacon-g 2s infinite; }
@keyframes beacon-g { 0% { box-shadow: 0 0 0 0 rgba(67, 194, 81, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(67, 194, 81, 0); } }
.mission-badge .mono { font-size: 10px; color: var(--muted); }
.mission-main { display: grid; line-height: 1.2; }
.mission-main strong { font-family: var(--head); font-size: 1.15rem; letter-spacing: -.02em; }
.mission-main .mono { font-size: 10px; color: var(--orange2); letter-spacing: .28em; }
.mission-text { color: var(--muted); font-size: 14px; }
.mission-xp { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mission-xp span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--orange)); transform-origin: left; animation: xp 3.6s ease-in-out infinite; }
@keyframes xp { 0% { transform: scaleX(.08); } 70%, 100% { transform: scaleX(1); } }
.mission-cta { padding: 9px 14px; border-radius: 12px; background: var(--orange); color: var(--on-primary); font-weight: 700; font-size: 14px; white-space: nowrap; }
@media (max-width: 1000px) { .mission { grid-template-columns: auto 1fr auto; } .mission-text, .mission-xp { display: none; } }
@media (max-width: 560px) { .mission { grid-template-columns: 1fr auto; gap: 12px; } .mission-badge { display: none; } .mission-cta { padding: 8px 12px; font-size: 13px; } }

/* =====================================================================
   Black November (/ofertas, pop-up e destaque no menu)
   ===================================================================== */
.nav .nav-bn { color: var(--orange2); border: 1px solid rgba(252, 112, 31, .45); background: rgba(252, 112, 31, .08); }
.nav .nav-bn::before { content: "●"; font-size: 8px; margin-right: 6px; vertical-align: 2px; animation: blk 1.2s steps(1) infinite; }

.bn-hero { position: relative; overflow: hidden; text-align: center; padding: 70px 0 64px; border-bottom: 1px solid var(--line); }
.bn-grid { position: absolute; inset: -40% -10% 0; pointer-events: none;
  background-image: linear-gradient(rgba(252, 112, 31, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(252, 112, 31, .18) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(600px) rotateX(62deg) translateY(30%); transform-origin: bottom;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 75%); mask-image: linear-gradient(0deg, #000 10%, transparent 75%); animation: gridrun 3s linear infinite; }
@keyframes gridrun { to { background-position: 0 64px, 0 0; } }
.bn-hero .wrap { position: relative; }
.bn-title { margin: 22px auto 10px; line-height: .86; font-size: clamp(3.4rem, 13vw, 9.5rem); letter-spacing: -.05em; }
.bn-title span { display: block; }
.bn-black { color: var(--text); text-shadow: 3px 0 rgba(29, 132, 245, .55), -3px 0 rgba(249, 65, 68, .45); animation: glitch 4s infinite; }
.bn-nov { background: linear-gradient(90deg, var(--orange), #f94144, var(--orange2), var(--orange)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 6s linear infinite; }
@keyframes flow { to { background-position: 300% 0; } }
@keyframes glitch { 0%, 92%, 100% { transform: none; } 93% { transform: translate(-3px, 1px) skewX(-6deg); } 95% { transform: translate(3px, -1px); } 97% { transform: translate(-1px, 0) skewX(4deg); } }
.bn-hl { color: var(--orange2); }
.countdown { display: inline-grid; grid-template-columns: repeat(4, minmax(64px, 96px)); gap: 10px; margin-top: 26px; }
.countdown div { display: grid; gap: 4px; padding: 14px 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: inset 0 -20px 30px -24px rgba(252, 112, 31, .5); }
.countdown b { font: 700 clamp(1.7rem, 5vw, 2.6rem)/1 var(--head); font-variant-numeric: tabular-nums; }
.countdown .tick { animation: tick .35s ease; }
@keyframes tick { from { transform: translateY(-6px); opacity: .3; } }
.bn-ended { margin-top: 18px; color: var(--muted); }

.deal { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.deal h3 { font-size: 1.3rem; }
.deal p { margin: 0; }
.deal .btn { margin-top: auto; }
.deal .more { text-align: center; font-size: 13px; }
.deal-off { position: absolute; top: -14px; right: 18px; padding: 6px 12px; border-radius: 10px; background: var(--orange); color: var(--on-primary); font: 700 1rem var(--head); box-shadow: var(--glow-orange); transform: rotate(3deg); }
.deal-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.deal-price s { color: var(--muted); }
.deal-price strong { font: 700 2rem/1 var(--head); letter-spacing: -.03em; }
.deal-price .mono { flex-basis: 100%; font-size: 10px; }
.deals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
@media (max-width: 960px) { .deals { grid-template-columns: 1fr; } }

.deal-main { display: grid; grid-template-columns: 1.3fr 1fr; gap: 34px; padding: 34px; border-color: rgba(252, 112, 31, .55);
  background: radial-gradient(circle at 0 0, rgba(252, 112, 31, .18), transparent 50%), radial-gradient(circle at 100% 100%, rgba(29, 132, 245, .14), transparent 50%), var(--panel2);
  box-shadow: 0 30px 80px -40px rgba(252, 112, 31, .6); }
.deal-main .deal-off { font-size: 1.5rem; padding: 8px 16px; }
.deal-main h2 { margin: 8px 0 10px; font-size: clamp(2rem, 4vw, 2.8rem); }
.deal-main .check { margin-top: 16px; }
.deal-buy { display: grid; gap: 14px; align-content: center; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: rgba(7, 14, 29, .5); }
.deal-buy .deal-price strong { font-size: 3.2rem; }
.deal-buy .more { text-align: center; font-size: 14px; }
.bn-cta { min-height: 56px; font-size: 17px; animation: pulseglow 2.4s ease-in-out infinite; }
@keyframes pulseglow { 50% { box-shadow: 0 0 34px -4px rgba(252, 112, 31, .75); } }
@media (max-width: 860px) { .deal-main { grid-template-columns: 1fr; padding: 28px 20px 20px; } }

.coupon { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1.5px dashed rgba(252, 112, 31, .55); border-radius: 12px; background: rgba(252, 112, 31, .06); color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.coupon b { font: 600 14px var(--mono); letter-spacing: .06em; overflow-wrap: anywhere; }
.coupon .mono { font-size: 9px; }
.coupon em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--orange2); font-weight: 700; }
.coupon.ok { border-color: var(--green); } .coupon.ok em { color: var(--green); }
.coupon.pix { width: auto; }
.bn-note { margin-top: 26px; text-align: center; color: var(--muted); font-size: 14px; }

.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }
.trust div { display: grid; gap: 2px; padding: 20px; background: var(--panel); text-align: center; }
.trust .icon { font-size: 22px; }
.trust .muted { font-size: 13px; }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr 1fr; } }

.bn-bar { position: fixed; left: 12px; right: 84px; bottom: 14px; z-index: 39; display: none; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
  border: 1px solid rgba(252, 112, 31, .5); border-radius: 14px; background: rgba(14, 22, 38, .94); backdrop-filter: blur(10px); }
.bn-bar b { font: 600 13px var(--mono); }
.bn-bar .btn { margin-left: auto; min-height: 38px; padding: 8px 12px; font-size: 13px; }
@media (max-width: 760px) { .bn-bar.show { display: flex; } .bn-bar .mono { display: none; } }

/* Pop-up da home */
.bnpop { width: min(460px, calc(100% - 32px)); padding: 0; border: 1px solid rgba(252, 112, 31, .55); border-radius: 22px; color: var(--text); overflow: hidden;
  background: radial-gradient(circle at 50% 0, rgba(252, 112, 31, .28), transparent 60%), var(--panel2); box-shadow: 0 40px 120px -30px rgba(252, 112, 31, .55); }
.bnpop::backdrop { background: rgba(3, 7, 16, .72); backdrop-filter: blur(4px); }
.bnpop[open] { animation: popin .4s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes popin { from { transform: scale(.9) translateY(20px); opacity: 0; } }
.bnpop .in { position: relative; padding: 34px 26px 26px; text-align: center; display: grid; gap: 14px; }
.bnpop .bn-title { font-size: clamp(2.6rem, 11vw, 3.6rem); margin: 6px 0 0; }
.bnpop .countdown { grid-template-columns: repeat(4, 1fr); margin: 4px 0 0; gap: 8px; }
.bnpop .countdown div { padding: 10px 4px 8px; }
.bnpop .countdown b { font-size: 1.6rem; }
.bnpop .later { background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.bnpop .qv-x { top: 10px; right: 10px; }

/* Botão flutuante Black November na home */
.bn-fab { position: fixed; right: 84px; bottom: 22px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; text-decoration: none;
  background: var(--orange); color: var(--on-primary); font-weight: 700; font-size: 14px; box-shadow: var(--glow-orange); animation: pulseglow 2.4s ease-in-out infinite; }
.bn-fab small { font: 600 11px var(--mono); opacity: .8; }
@media (max-width: 560px) { .bn-fab { bottom: 22px; right: auto; left: 12px; max-width: calc(100% - 96px); padding: 10px 14px 10px 10px; font-size: 13px; } }

/* =====================================================================
   Ecossistema
   ===================================================================== */
.eco-hero { border-bottom: 1px solid var(--line); overflow: hidden; }
.eco-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; padding: 64px 0; }
@media (max-width: 900px) { .eco-grid { grid-template-columns: 1fr; padding: 48px 0; } }
.eco-info { --c: var(--orange2); margin-top: 28px; min-height: 150px; padding: 20px; border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 14px; background: rgba(21, 30, 49, .7); }
.eco-info > * { animation: rise .4s ease both; }
.eco-info .mono { color: var(--c); }
.eco-info h3 { font-size: 1.4rem; margin: 6px 0; }
.eco-info p { margin: 0 0 10px; color: var(--muted); }
.orbit { position: relative; width: min(520px, 100%); aspect-ratio: 1; margin: auto; }
.orbit svg { width: 100%; height: 100%; display: block; }
.spin-slow { transform-origin: 260px 260px; animation: spin 60s linear infinite; }
.spin-rev { transform-origin: 260px 260px; animation: spin 40s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.core-pulse { transform-origin: 260px 260px; animation: corep 2.8s ease-in-out infinite; }
@keyframes corep { 50% { transform: scale(1.18); opacity: .25; } }
.node { --c: var(--orange2); position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px;
  width: 92px; padding: 10px 6px; border-radius: 16px; border: 1px solid var(--line); background: rgba(21, 30, 49, .9); color: var(--text); cursor: pointer; font: inherit;
  transition: border-color .25s, box-shadow .25s, transform .25s; }
.node span { font-size: 22px; line-height: 1; }
.node b { font-size: 12px; font-weight: 600; }
.node:hover, .node.on { border-color: var(--c); box-shadow: 0 0 30px -6px var(--c); transform: translate(-50%, -50%) scale(1.06); }
@media (max-width: 560px) { .node { width: 74px; padding: 8px 4px; } .node span { font-size: 18px; } .node b { font-size: 10.5px; } }

.rack { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #0a1222, var(--panel));
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .02); }
.unit { --c: var(--orange2); display: grid; grid-template-columns: auto 150px 1fr auto; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 10px; text-decoration: none;
  border: 1px solid var(--line); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 6px), var(--panel2); transition: border-color .2s, transform .2s; }
.unit:hover { border-color: var(--c); transform: translateX(4px); }
.unit .mono { color: var(--c); }
.unit em { font-style: normal; font: 12px var(--mono); color: var(--muted); }
.leds { display: flex; gap: 5px; }
.leds b { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); animation: led 1.6s steps(2) infinite; }
.leds b:nth-child(2) { animation-duration: .9s; background: var(--green); box-shadow: 0 0 8px var(--green); }
.leds b:nth-child(3) { animation-duration: 2.3s; }
@keyframes led { 50% { opacity: .25; } }
@media (max-width: 700px) { .unit { grid-template-columns: auto 1fr; gap: 6px 12px; } .unit strong { grid-column: 1 / -1; } .unit em { display: none; } }

.loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: s; }
.loop div { position: relative; display: grid; align-content: start; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.loop div:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 50%; transform: translate(50%, -50%); z-index: 1; color: var(--orange2); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translate(80%, -50%); } }
.loop .mono { color: var(--orange2); }
.loop b { font-family: var(--head); font-size: 1.2rem; }
.loop .muted { font-size: 14px; }
@media (max-width: 800px) { .loop { grid-template-columns: 1fr 1fr; } .loop div::after { display: none; } }

.sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sites a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; background: var(--panel); color: var(--orange2); transition: border-color .2s; }
.sites a:hover { border-color: var(--orange2); }
.sites .mono { grid-column: 1; font-size: 10px; }
.sites b { grid-column: 1; color: var(--text); font-weight: 600; }
.sites a { align-items: center; }
@media (max-width: 760px) { .sites { grid-template-columns: 1fr; } }

/* =====================================================================
   Página de curso (gerada de courses.json)
   ===================================================================== */
.ccard h3 a { color: inherit; text-decoration: none; }
.ccard h3 a:hover { color: var(--c); }
.course-hero { --c: var(--orange2); position: relative; padding: 36px 0 64px; border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--c) 18%, transparent), transparent 45%); }
.crumbs { margin-bottom: 26px; font-size: 11px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--c); }
.course-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 44px; align-items: start; }
@media (max-width: 900px) { .course-grid { grid-template-columns: 1fr; gap: 28px; } }
.course-hero .chip .mono { color: var(--c); }
.course-hero .chip i { background: var(--c); }
.course-title { margin: 20px 0 14px; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.course-title .ic { display: block; font-size: .8em; margin-bottom: 10px; }
.course-topics { margin-top: 22px; }
.buycard { position: sticky; top: 92px; display: grid; gap: 14px; padding: 24px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 20px;
  background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--c) 16%, transparent), transparent 55%), var(--panel2); box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--c) 70%, transparent); }
.buycard .deal-price strong { font-size: 2.6rem; }
/* Ementa em pipeline: trilho vertical, módulos numerados, aulas em chips */
.syl { position: relative; list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 6px; max-width: 860px; }
.syl::before { content: ""; position: absolute; left: 11px; top: 18px; bottom: 18px; width: 2px;
  background: linear-gradient(180deg, var(--c, var(--orange2)), rgba(29, 132, 245, .5) 60%, transparent); opacity: .5; }
.syl li { position: relative; }
.syl details { border: 0; border-radius: 0; background: none; padding: 0; }
.syl details + details { margin-top: 0; }
.syl summary { justify-content: flex-start; font-weight: inherit; line-height: 1.35; }
.syl details[open] { background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--orange2)) 7%, transparent), transparent 70%); border-radius: 12px; }
.syl summary, .syl .row { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 0; border-radius: 12px; list-style: none; cursor: default; }
.syl summary { cursor: pointer; transition: background .2s; }
.syl summary::-webkit-details-marker { display: none; }
.syl summary::after, .syl details[open] summary::after { content: none; }
.syl summary:hover { background: rgba(255, 255, 255, .03); }
.syl .dot { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #333d52; background: var(--bg); position: relative; z-index: 1; transition: all .25s; }
.syl li:hover .dot { border-color: var(--c, var(--orange2)); }
.syl details[open] .dot { border-color: var(--c, var(--orange2)); background: var(--c, var(--orange2)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c, var(--orange2)) 22%, transparent); }
.syl .num { font: 600 12px var(--mono); color: #6f7a90; min-width: 20px; }
.syl details[open] .num, .syl li:hover .num { color: var(--c, var(--orange2)); }
.syl .mt { flex: 1; font-weight: 600; font-size: 15px; }
.syl .cnt { display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--mono); color: var(--muted); padding: 3px 9px; border: 1px solid var(--line); border-radius: 99px; transition: all .2s; }
.syl .cnt::after { content: "+"; color: var(--c, var(--orange2)); font-weight: 700; transition: transform .25s; }
.syl details[open] .cnt::after { transform: rotate(45deg); }
.syl details[open] .cnt { border-color: color-mix(in srgb, var(--c, var(--orange2)) 50%, transparent); color: var(--text); }
.syl .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 14px 50px; }
.syl .chips > span { animation: chipin .35s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes chipin { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.chip-l { display: inline-block; padding: 5px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); font-size: 13px; color: #cdd5e3; }
.chip-cmd { display: inline-block; padding: 4px 9px; border-radius: 7px; background: #0a1120; border: 1px solid rgba(67, 194, 81, .3); font: 500 12.5px var(--mono); color: var(--green); }
.chip-cmd::before { content: "$ "; color: #6f7a90; }
.syl.clip li:nth-child(n+7) { display: none; }
.syl.clip li:nth-child(6) { -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.syl-more { margin: 10px 0 0 34px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font: 600 14px Inter, sans-serif; cursor: pointer; }
.syl-more:hover { border-color: var(--c, var(--orange2)); }
.syl-more .mono { color: var(--c, var(--orange2)); margin-left: 6px; }
@media (max-width: 560px) { .syl .chips { padding-left: 34px; } .syl .num { display: none; } .syl .mt { font-size: 14px; } }
@media (max-width: 760px) {
  .buybar { display: flex; transition: transform .3s ease, opacity .3s ease; }
  .buybar.off { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .buybar .mono { display: none; }
  .footer { padding-bottom: 96px; }
}

/* =====================================================================
   Painel do laboratório (imitação da interface do Proxmox VE)
   ===================================================================== */
.pve { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #0b1324; font-size: 13px;
  box-shadow: 0 40px 100px -50px rgba(29, 132, 245, .6), 0 0 0 1px rgba(255, 255, 255, .02); }
.pve-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #0e1830; }
.pve-logo { font: 700 13px var(--head); padding: 3px 7px; border-radius: 6px; background: var(--orange); color: var(--on-primary); }
.pve-ver { font-weight: 600; color: var(--muted); }
.pve-search { flex: 1; max-width: 260px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; color: #6f7a90; font-size: 12px; }
.pve-user { margin-left: auto; font-size: 11px; }
.pve-btn { padding: 5px 10px; border-radius: 8px; background: rgba(29, 132, 245, .18); color: #9cc8ff; font-size: 12px; font-weight: 600; }
.pve-body { display: grid; grid-template-columns: 230px 1fr; min-height: 380px; }
.pve-tree { padding: 10px 8px; border-right: 1px solid var(--line); background: #0a1120; }
.pve-dc { padding: 6px 8px; font-weight: 600; }
.pve-dc .mono { font-size: 9px; }
.pve-node { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 4px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.pve-node .mono { margin-left: auto; font-size: 10px; letter-spacing: .05em; }
.pve-node:hover, .pve-node.on { background: rgba(29, 132, 245, .16); }
.pve-vm { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 26px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pve-vm.mig { color: var(--orange2); animation: blk 1s steps(1) infinite; }
.st { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.st.run { background: var(--green); box-shadow: 0 0 6px var(--green); }
.st.mig { background: var(--orange2); box-shadow: 0 0 6px var(--orange2); }
.pve-main { padding: 14px 16px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.pve-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pve-head strong { font: 700 16px var(--head); margin-right: 4px; }
.pve-uptime { margin-left: auto; font-size: 10px; letter-spacing: .06em; }
.pill { padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); font-size: 11px; color: var(--muted); white-space: nowrap; }
.pill.ok { color: var(--green); border-color: rgba(67, 194, 81, .35); }
.pill.warn { color: var(--orange2); border-color: rgba(253, 146, 62, .45); }
.pve-gauges { display: grid; grid-template-columns: repeat(3, 84px) 1fr; gap: 10px; align-items: stretch; }
.gauge { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.gauge svg { width: 52px; height: 52px; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 4; }
.gauge circle.v { stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset .8s ease, stroke .3s; }
.gauge circle.v.hot { stroke: var(--orange); }
.gauge b { position: absolute; top: 24px; font: 600 12px var(--mono); }
.gauge .mono { font-size: 9px; }
.pve-chart { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.pve-chart .mono { font-size: 9px; }
.pve-chart svg { width: 100%; height: 64px; }
#pve-line { fill: none; stroke: var(--blue); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
#pve-area { fill: rgba(29, 132, 245, .14); stroke: none; }
.pve-vms { width: 100%; border-collapse: collapse; }
.pve-vms th { text-align: left; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6f7a90; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.pve-vms td { padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .04); white-space: nowrap; }
.pve-vms tr.mig td { background: rgba(253, 146, 62, .06); }
.mini { display: inline-block; width: 70px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; vertical-align: middle; }
.mini i { display: block; height: 100%; background: var(--blue); transition: width .8s ease; }
.pve-tasks { border-top: 1px solid var(--line); background: #0a1120; padding: 8px 14px 10px; }
.pve-tasks-h { font-size: 9px; margin-bottom: 4px; }
.task { display: grid; grid-template-columns: 70px 52px 1fr 90px; gap: 10px; align-items: center; padding: 4px 0; font-size: 12px; animation: rise .35s ease both; }
.task .mono { font-size: 10px; letter-spacing: .04em; }
.prog { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--orange)); transition: width .9s linear; }
@media (max-width: 860px) {
  .pve-body { grid-template-columns: minmax(0, 1fr); }
  .pve-tree { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .pve-tree #pve-nodes { display: flex; gap: 6px; }
  .pve-dc, .pve-vm { display: none; }
  .pve-node { width: auto; margin: 0; white-space: nowrap; }
  .pve-gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pve-chart { grid-column: 1 / -1; }
  .pve-vms th:nth-child(5), .pve-vms td:nth-child(5) { display: none; }
  .pve-search, .pve-btn, .pve-user { display: none; }
  .task { grid-template-columns: 1fr 70px; }
  .task .mono { display: none; }
}

/* =====================================================================
   Calculadora VMware × Proxmox
   ===================================================================== */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel2); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; padding: 20px; } }
.calc-in { display: grid; gap: 22px; align-content: start; }
.calc-range { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; }
.calc-range b { font: 700 3.2rem/1 var(--head); color: var(--orange2); font-variant-numeric: tabular-nums; }
.calc-range input { grid-column: 1 / -1; width: 100%; accent-color: var(--orange); height: 28px; cursor: pointer; }
.calc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc-opts > div { display: grid; gap: 6px; }
.calc-opts > div:last-child { grid-column: 1 / -1; }
@media (max-width: 480px) { .calc-opts { grid-template-columns: 1fr; } }
.seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.seg button { flex: 1; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 13px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--orange); color: var(--on-primary); }
.calc-out { display: grid; gap: 12px; align-content: start; }
.vs, .save { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.vs strong, .save strong { font: 700 clamp(1.7rem, 4vw, 2.4rem)/1 var(--head); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.vs small, .save small { color: var(--muted); font-size: 12.5px; }
.vs-vmw strong { color: #ff7b7d; }
.vs-pve strong { color: var(--green); }
.bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.vs-vmw .bar i { background: linear-gradient(90deg, #f94144, #ff7b7d); }
.vs-pve .bar i { background: linear-gradient(90deg, #2e9b3c, var(--green)); }
.save { border-color: rgba(67, 194, 81, .45); background: radial-gradient(circle at 100% 0, rgba(67, 194, 81, .16), transparent 60%), var(--panel); }
.save strong { color: var(--green); font-size: clamp(2.1rem, 5vw, 3rem); }
.calc-note { grid-column: 1 / -1; margin: 0; color: #6f7a90; font-size: 11.5px; line-height: 1.5; }

/* =====================================================================
   Consultoria
   ===================================================================== */
.cx-hero { border-bottom: 1px solid var(--line); }
.cx-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 72px 0; }
.cx-grid h1 { margin: 22px 0 18px; }
.cx-grid h1 span { display: block; background: linear-gradient(135deg, var(--orange2), var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-grid .hero-actions { justify-content: flex-start; }
@media (max-width: 900px) { .cx-grid { grid-template-columns: 1fr; padding: 56px 0; } }

/* Painel de atendimento (hero) */
.ops { border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 22, 38, .9); box-shadow: 0 40px 90px -40px rgba(252, 112, 31, .45); overflow: hidden; }
.ops-pool { padding: 18px; border-bottom: 1px solid var(--line); }
.ops-pool > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ops-pool strong { font: 600 1.6rem var(--head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ops-pool small { font-size: 13px; color: var(--muted); font-weight: 400; }
.ops-bar { margin-top: 10px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.ops-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--orange2)); transition: width .9s cubic-bezier(.2, .7, .2, 1); }
.ops-list { list-style: none; margin: 0; padding: 8px; display: grid; gap: 6px; }
.ops-list li { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 10px; background: rgba(255, 255, 255, .025); font-size: 14px; transition: background .4s, transform .4s; }
.ops-list li.flash { background: rgba(252, 112, 31, .12); transform: translateX(4px); }
.ops-list b { font: 700 11px var(--mono); text-align: center; padding: 4px 0; border-radius: 6px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.ops-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-list em { font: 500 11px var(--mono); font-style: normal; color: var(--c); white-space: nowrap; }
.ops-list .p1 { --c: var(--red); } .ops-list .mel { --c: var(--orange2); } .ops-list .ok { --c: var(--green); }
.ops-list .p1 em::before { content: "● "; animation: blk 1s steps(1) infinite; }
.ops-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.ops-foot .led { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
@media (max-width: 480px) { .ops-list li { grid-template-columns: 40px 1fr; } .ops-list em { display: none; } }

/* Etapas */
.cx-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.cx-steps li { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.cx-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 26px; color: var(--orange2); font-weight: 900; z-index: 1; }
.cx-steps b { font: 600 12px var(--mono); color: var(--orange2); letter-spacing: .1em; }
.cx-steps h3 { margin: 10px 0 6px; font-size: 1.15rem; }
.cx-steps p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .cx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-steps li::after { display: none; } }
@media (max-width: 480px) { .cx-steps { grid-template-columns: 1fr; } }

/* Modelos */
.cx-plans .plan h3 { font-size: 1.4rem; }
.cx-plans .plan .check { margin: 6px 0 14px; }
.cx-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 20px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.cx-pick:not(.btn) { background: none; border: 0; padding: 4px; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.cx-pick:not(.btn):hover { color: var(--text); }
.plan.picked, .cx-assess.picked { border-color: var(--orange2); box-shadow: var(--glow-orange); }
@media (max-width: 900px) { .cx-plans { grid-template-columns: 1fr; } }

/* Escopo */
.cx-scope { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cx-scope div { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); border-left: 3px solid var(--c); background: var(--panel); transition: transform .2s, background .2s; }
.cx-scope div:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--c) 7%, var(--panel)); }
.cx-scope span { color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .cx-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cx-scope { grid-template-columns: 1fr; } }

/* Diagnóstico */
.cx-diag { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.cx-asks { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.cx-asks span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font: 500 12px var(--mono); color: var(--muted); background: var(--panel); }
.cx-asks span::before { content: "?"; color: var(--orange2); margin-right: 6px; font-weight: 700; }
.cx-chosen { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(252, 112, 31, .45); background: rgba(252, 112, 31, .08); }
.cx-chosen b { color: var(--orange2); }
.cx-form { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -40px rgba(29, 132, 245, .45); }
.cx-form iframe { display: block; width: 100%; height: 600px; border: 0; }
.cx-open { display: block; padding: 12px; text-align: center; text-decoration: none; background: var(--panel); border-top: 1px solid var(--line); }
.cx-open:hover { color: var(--text); }
@media (max-width: 900px) { .cx-diag { grid-template-columns: 1fr; } }

/* Faixa de consultoria na home */
.cx-band { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: 36px; border-radius: 24px; border: 1px solid rgba(29, 132, 245, .4);
  background: radial-gradient(ellipse at 100% 0%, rgba(29, 132, 245, .18), transparent 60%), var(--panel); }
.cx-band .hero-actions { justify-content: flex-start; margin-top: 22px; }
.cx-band ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cx-band li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.cx-band li b { font: 700 11px var(--mono); color: var(--c); min-width: 44px; }
@media (max-width: 800px) { .cx-band { grid-template-columns: 1fr; padding: 28px 20px; } }
.cx-assess { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-top: 16px; padding: 22px 24px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--c-ges) 40%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--c-ges) 9%, var(--panel2)), var(--panel)); }
.cx-assess h3 { font-size: 1.25rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cx-assess h3 small { color: var(--c-ges); font-size: 10px; }
.cx-assess p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .cx-assess { grid-template-columns: 1fr; } }
.cx-jp { display: grid; gap: 4px; margin: 0 0 18px; padding: 16px 18px; border-radius: 14px; text-decoration: none; border: 1px solid rgba(252, 112, 31, .35); background: radial-gradient(circle at 100% 0, rgba(252, 112, 31, .14), transparent 60%), var(--panel); transition: transform .2s, border-color .2s; }
.cx-jp:hover { transform: translateY(-2px); border-color: var(--orange2); }
.cx-jp .mono { color: var(--orange2); }
.cx-jp b::after { content: " →"; color: var(--orange2); }
.cx-jp span:last-child { color: var(--muted); font-size: 14px; }

/* =====================================================================
   Turmas ao vivo
   ===================================================================== */
.tm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 32px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--line); }
.tm-stats div { background: var(--panel); padding: 14px 10px; text-align: center; }
.tm-stats strong { display: block; font: 600 1.5rem var(--head); color: var(--orange2); letter-spacing: -.03em; }
.tm-stats .mono { font-size: 9px; letter-spacing: .14em; }
@media (max-width: 480px) { .tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tm-map { border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 22, 38, .9); box-shadow: 0 40px 90px -40px rgba(29, 132, 245, .45); overflow: hidden; }
.tm-map svg { display: block; width: 100%; height: auto; padding: 8px 10px 0; }
.tm-map .tm-t { font: 700 13px var(--mono); fill: currentColor; }
.tm-map text.tm-t:not([fill]) { fill: #f5f7fb; }
.tm-map .tm-s { font: 500 8px var(--mono); fill: #8792a8; letter-spacing: .08em; text-transform: uppercase; }
.tm-map .tm-node rect { fill: rgba(252, 112, 31, .12); stroke: #fc701f; }
.tm-map .tm-node { animation: tm-pulse 3s ease-in-out infinite; }
.tm-map .tm-node:nth-of-type(2) { animation-delay: 1s; } .tm-map .tm-node:nth-of-type(3) { animation-delay: 2s; }
@keyframes tm-pulse { 50% { opacity: .7; } }
.tm-spin { transform-origin: 210px 150px; animation: spin 60s linear infinite; }
@media (prefers-reduced-motion: reduce) { .tm-map .tm-node, .tm-spin { animation: none; } }

.tm-formats { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; max-width: 920px; margin: auto; }
.tm-formats .plan h3 { font-size: 1.4rem; }
.tm-formats .plan .check { margin: 6px 0 12px; }
.tm-formats .plan .btn { margin-top: auto; }
.tm-formats .more { text-align: center; }
.tm-next { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(252, 112, 31, .45); font-size: 14px; color: var(--muted); }
.tm-next .mono { color: var(--orange2); display: block; margin-bottom: 2px; }
@media (max-width: 760px) { .tm-formats { grid-template-columns: 1fr; } }

.tm-matrix { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tm-matrix li { display: grid; grid-template-columns: 36px minmax(0, 1.3fr) minmax(0, 1fr) 40px; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.tm-matrix b { font: 600 12px var(--mono); color: var(--c); }
.tm-matrix i { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .05); position: relative; overflow: hidden; }
.tm-matrix i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--h) / 15 * 100%); border-radius: inherit; background: var(--c); }
.tm-matrix em { font: 600 13px var(--mono); font-style: normal; text-align: right; color: var(--text); }
@media (max-width: 600px) { .tm-matrix li { grid-template-columns: 30px minmax(0, 1fr) 36px; } .tm-matrix i { grid-column: 2 / -1; grid-row: 2; } }

.tm-form { display: grid; gap: 14px; padding: 24px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: 0 40px 90px -40px rgba(252, 112, 31, .4); }
.tm-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tm-form input:not([type=radio]):not([type=checkbox]), .tm-form select, .tm-form textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
.tm-form textarea { resize: vertical; }
.tm-form input:focus, .tm-form select:focus, .tm-form textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.tm-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tm-form legend { margin-bottom: 8px; padding: 0; }
.tm-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tm-form [hidden] { display: none !important; }
@media (max-width: 560px) { .tm-row { grid-template-columns: 1fr; } }
.tm-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-seg legend { grid-column: 1 / -1; }
.tm-seg label, .tm-chips label { cursor: pointer; }
.tm-seg input, .tm-chips input { position: absolute; opacity: 0; pointer-events: none; }
.tm-seg span { display: grid; place-items: center; min-height: 46px; padding: 8px 10px; text-align: center; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-weight: 700; font-size: 14px; transition: border-color .2s, background .2s; }
.tm-seg input:checked + span { border-color: var(--orange); background: rgba(252, 112, 31, .12); color: var(--orange2); }
.tm-seg input:focus-visible + span, .tm-chips input:focus-visible + span { outline: 2px solid var(--orange); }
.tm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-chips legend { width: 100%; }
.tm-chips span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 13px; color: var(--muted); transition: all .2s; }
.tm-chips input:checked + span { color: var(--on-primary); background: var(--orange2); border-color: var(--orange2); }
.tm-err { margin: 0; color: var(--red); font-size: 14px; }
.tm-send { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .tm-send { grid-template-columns: 1fr; } }

/* Telas estreitas: laboratório e ciclo do ecossistema cabem sem cortar */
@media (max-width: 480px) {
  .pve-tree #pve-nodes { flex: 1; min-width: 0; }
  .pve-node { flex: 1; justify-content: center; }
  .pve-node .mono { display: none; }
}
@media (max-width: 420px) { .loop { grid-template-columns: 1fr; } }
@media (max-width: 400px) {
  .brand small { display: none; }
  .pve-vms th:nth-child(4), .pve-vms td:nth-child(4) { display: none; }
}

/* ---------- Home: dois caminhos no hero ---------- */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-width: 560px; }
.path { display: flex; flex-direction: column; text-align: left; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, rgba(14, 22, 38, .92)), rgba(14, 22, 38, .92)); backdrop-filter: blur(6px); overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.path:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 20px 50px -24px var(--c); }
.path-main { display: grid; gap: 4px; padding: 16px 16px 12px; text-decoration: none; }
.path-main .mono { color: var(--c); }
.path-main b { font: 600 1.25rem var(--head); letter-spacing: -.02em; }
.path-main b::after { content: " →"; color: var(--c); transition: margin .2s; }
.path-main:hover b::after { margin-left: 4px; }
.path-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 14px; }
.path-links a { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 12.5px; color: var(--muted); text-decoration: none; }
.path-links a:hover { color: var(--text); border-color: var(--c); }
@media (max-width: 480px) { .paths { grid-template-columns: 1fr; } }

/* ---------- Home: escada de ofertas ---------- */
.ladder { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ladder::before { content: ""; position: absolute; left: 4%; right: 4%; top: 22px; height: 2px; background: linear-gradient(90deg, var(--green), var(--blue), var(--orange2), var(--red)); opacity: .5; }
.ladder::after { content: ""; position: absolute; top: 18px; left: 4%; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(253, 146, 62, .7); animation: ladder-run 6s ease-in-out infinite; }
@keyframes ladder-run { 0% { left: 4%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 95%; opacity: 0; } }
.ladder li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 52px 20px 20px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, var(--panel2)), var(--panel)); }
.ladder li::before { content: ""; position: absolute; top: 15px; left: 20px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--c); box-shadow: 0 0 12px var(--c); }
.ladder .lv { position: absolute; top: 16px; right: 18px; font-size: 10px; }
.ladder .tag { align-self: flex-start; padding: 4px 9px; border-radius: 999px; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font-size: 10px; letter-spacing: .1em; }
.ladder h3 { font-size: 1.25rem; }
.ladder p { margin: 0; color: var(--muted); font-size: 14px; }
.ladder .more { margin-top: auto; padding-top: 6px; color: var(--c); }
@media (max-width: 900px) {
  .ladder { grid-template-columns: 1fr; gap: 12px; padding-left: 28px; }
  .ladder::before { left: 8px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: linear-gradient(180deg, var(--green), var(--blue), var(--orange2), var(--red)); }
  .ladder::after { display: none; }
  .ladder li { padding: 18px 18px 18px 20px; }
  .ladder li::before { top: 22px; left: -27px; }
  .ladder .lv { position: static; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .ladder::after { display: none; } }

/* ---------- Aviso de cookies ---------- */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 70; width: min(440px, calc(100% - 32px)); display: grid; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(14, 22, 38, .98); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); font-size: 14px; }
.consent[hidden] { display: none; }
.consent p { margin: 0; color: var(--muted); }
.consent p b { display: block; color: var(--text); margin-bottom: 4px; }
.consent a { color: var(--orange2); }
.consent-opts { display: grid; gap: 8px; }
.consent-opts[hidden] { display: none; }
.consent-opts label { display: flex; gap: 10px; align-items: center; color: var(--text); }
.consent-opts input { width: 18px; height: 18px; accent-color: var(--orange); }
.consent-btns { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; }
.consent-btns .btn { min-height: 40px; padding: 8px 10px; font-size: 13px; }
@media (max-width: 420px) { .consent-btns { grid-template-columns: 1fr 1fr; } .consent-btns .btn-primary { grid-column: 1 / -1; order: -1; } }
.linkish { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; }
.linkish:hover { color: var(--text); }
.footer .bottom a { text-decoration: underline; }

/* ---------- Texto corrido (privacidade) ---------- */
.prose h2 { font-size: 1.4rem; margin: 36px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-left: 20px; display: grid; gap: 8px; }
.prose b { color: var(--text); }
.prose a { color: var(--orange2); }

/* ---------- Vídeo do YouTube com capa (carrega só ao clicar) ---------- */
.yt { position: relative; aspect-ratio: 16 / 9; margin: 22px 0 6px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(252, 112, 31, .45); background: #05070a; box-shadow: 0 30px 70px -30px rgba(252, 112, 31, .55); }
.yt iframe, .yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-poster { padding: 0; cursor: pointer; background: #05070a; display: grid; place-items: center; }
.yt-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .25s, transform .4s; }
.yt-poster:hover img { opacity: 1; transform: scale(1.03); }
.yt-btn { position: relative; width: 74px; height: 74px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 0 rgba(252, 112, 31, .55); animation: yt-pulse 2s infinite; }
.yt-btn::after { content: ""; position: absolute; left: 29px; top: 23px; border-left: 22px solid var(--on-primary); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
@keyframes yt-pulse { 70% { box-shadow: 0 0 0 18px rgba(252, 112, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(252, 112, 31, 0); } }
.yt-cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 26px 16px 12px; text-align: left; background: linear-gradient(0deg, rgba(5, 7, 10, .92), transparent); color: var(--text); }
.yt-cap b { font-size: 15px; }
.yt-cap small { font: 500 11px var(--mono); color: var(--muted); letter-spacing: .06em; }
.yt-poster:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .yt-btn { animation: none; } }

/* =====================================================================
   Customizações (prune, fail2ban)
   ===================================================================== */
.crumbs { display: block; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.cz-formula { margin-top: 20px; padding: 22px 24px; border-radius: 18px; border: 1px dashed rgba(252, 112, 31, .45); background: rgba(252, 112, 31, .05); display: grid; gap: 10px; }
.cz-formula .mono { color: var(--orange2); }
.cz-formula code { font: 600 clamp(14px, 2.4vw, 20px) var(--mono); color: var(--text); overflow-wrap: anywhere; }
.cz-formula p { margin: 0; color: var(--muted); }
.cz-formula b { color: var(--text); }
.cz-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cz-kpis > div { display: grid; gap: 4px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.cz-kpis > div.t { border-color: rgba(67, 194, 81, .4); background: linear-gradient(180deg, rgba(67, 194, 81, .08), var(--panel)); }
.cz-kpis b { font: 600 1.6rem var(--head); letter-spacing: -.03em; }
.cz-kpis .t b { color: var(--green); }
.cz-kpis span { color: var(--muted); font-size: 13px; }
@media (max-width: 800px) { .cz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cz-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 22px 0 12px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.cz-seg button { padding: 8px 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 600 13px Inter, sans-serif; cursor: pointer; }
.cz-seg button.on { background: rgba(252, 112, 31, .16); color: var(--orange2); }
.cz-table { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); -webkit-overflow-scrolling: touch; }
.sim { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; }
.sim.files { min-width: 560px; }
.sim th, .sim td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.sim th { font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: rgba(255, 255, 255, .02); }
.sim .r { text-align: right; }
.sim .m { font-family: var(--mono); font-size: 12px; }
.sim tfoot td { font-weight: 700; border-bottom: 0; background: rgba(255, 255, 255, .03); }
.sim .keep-i { color: var(--green); font-weight: 700; }
.sim .save { color: var(--green); font-weight: 700; }
.sim .zero { color: var(--muted); }
.sim .bars { width: 160px; }
.sim .bars i { display: block; height: 5px; border-radius: 3px; margin: 2px 0; }
.sim .bars i.g { background: var(--orange); }
.sim .bars i.b { background: var(--green); }
.tier { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.t-crit { color: var(--red); background: rgba(249, 65, 68, .12); } .t-prod { color: var(--orange2); background: rgba(253, 146, 62, .12); }
.t-serv { color: var(--blue); background: rgba(29, 132, 245, .14); } .t-apoio { color: var(--c-ges); background: rgba(180, 141, 244, .14); } .t-desc { color: var(--green); background: rgba(67, 194, 81, .12); }
.cz-callout { margin-top: 18px; padding: 16px 18px; border-radius: 14px; border-left: 3px solid var(--green); background: rgba(67, 194, 81, .06); color: var(--muted); }
.cz-callout b { color: var(--text); }
.cz-sub { margin: 40px 0 16px; font-size: 1.35rem; }
.cz-tiers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.cz-tiers > div { display: grid; gap: 4px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); border-top: 3px solid var(--c); background: var(--panel); }
.cz-tiers .mono { color: var(--c); }
.cz-tiers b { font: 600 2rem var(--head); }
.cz-tiers p { margin: 0; color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .cz-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cz-code { border: 1px solid var(--line); border-radius: 14px; background: #0b1324; overflow: hidden; min-width: 0; }
.cz-code pre { margin: 0; padding: 16px; overflow-x: auto; font: 13px/1.7 var(--mono); color: #cdd5e3; }
.cz-code .dim { color: #6f7a90; } .cz-code .p { color: var(--orange2); }
.cz-cons { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cz-cons li { display: grid; gap: 2px; padding: 14px 16px 14px 44px; position: relative; border-radius: 12px; border: 1px solid rgba(249, 65, 68, .3); background: rgba(249, 65, 68, .05); }
.cz-cons li::before { content: "✕"; position: absolute; left: 16px; top: 14px; color: var(--red); font-weight: 900; }
.cz-cons span { color: var(--muted); font-size: 14px; }
.cz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cz-steps li { padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.cz-steps b { font: 600 12px var(--mono); color: var(--orange2); }
.cz-steps h4 { margin: 6px 0 4px; font: 600 1.05rem var(--head); }
.cz-steps p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .cz-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cz-steps { grid-template-columns: 1fr; } }
.cz-cmds { display: grid; gap: 8px; }
.cz-cmds div { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.cz-cmds code { font: 600 13px var(--mono); color: var(--orange2); overflow-wrap: anywhere; }
.cz-cmds span { color: var(--muted); font-size: 13px; }
.cz-gift { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 36px; border-radius: 24px; border: 1px solid rgba(67, 194, 81, .4); background: radial-gradient(ellipse at 0 0, rgba(67, 194, 81, .14), transparent 60%), var(--panel); }
.cz-gift .hero-actions { justify-content: flex-start; }
@media (max-width: 860px) { .cz-gift { grid-template-columns: 1fr; padding: 26px 18px; } }
.cz-warn { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(249, 65, 68, .45); background: rgba(249, 65, 68, .07); }
.cz-warn > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--red); color: #fff; font-weight: 900; }
.cz-warn p { margin: 4px 0 0; color: var(--muted); }
.cz-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cz-flow li { position: relative; padding: 18px; border-radius: 14px; border: 1px solid var(--line); border-top: 3px solid var(--c); background: var(--panel); }
.cz-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -12px; top: 22px; color: var(--c); font-weight: 900; z-index: 1; }
.cz-flow .mono { color: var(--c); }
.cz-flow h4 { margin: 6px 0 4px; font: 600 1.05rem var(--head); }
.cz-flow p { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .cz-flow { grid-template-columns: 1fr 1fr; } .cz-flow li::after { display: none; } }
@media (max-width: 480px) { .cz-flow { grid-template-columns: 1fr; } }
.cz-arch { display: grid; gap: 10px; }
.cz-arch div { padding: 14px 16px; border-radius: 12px; font: 600 13px var(--mono); }
.cz-arch .bad { border: 1px solid rgba(249, 65, 68, .45); background: rgba(249, 65, 68, .06); color: #ffb3b4; }
.cz-arch .good { border: 1px solid rgba(67, 194, 81, .45); background: rgba(67, 194, 81, .06); color: #b6efbe; }
.cz-arch small { display: block; margin-top: 4px; font: 400 13px Inter, sans-serif; color: var(--muted); }
.cz-item { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 20px; text-decoration: none; border: 1px solid var(--line); border-top: 3px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, var(--panel2)), var(--panel)); transition: transform .2s, border-color .2s; }
.cz-item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.cz-item .mono { color: var(--c); }
.cz-item h3 { font-size: 1.4rem; }
.cz-item p { margin: 0; color: var(--muted); }
.cz-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cz-tags i { font: 500 11px var(--mono); font-style: normal; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.cz-item .more { margin-top: auto; padding-top: 6px; }

/* =====================================================================
   /proxmox
   ===================================================================== */
.px-hero { border-bottom: 1px solid var(--line); }
.px-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: center; padding: 56px 0; }
.px-grid h1 { margin: 22px 0 16px; font-size: clamp(2.3rem, 5vw, 4rem); }
.px-grid h1 span { display: block; background: linear-gradient(135deg, var(--orange2), var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.px-grid .hero-actions { justify-content: flex-start; }
.px-pillars { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.px-pillars li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; color: var(--muted); }
.px-pillars b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font: 700 14px var(--mono); color: var(--orange2); border: 1px solid rgba(252, 112, 31, .35); background: rgba(252, 112, 31, .08); }
.px-pillars strong { color: var(--text); }
.px-author { position: relative; margin: 0; border-radius: 24px; overflow: hidden; border: 1px solid rgba(252, 112, 31, .4); box-shadow: 0 40px 90px -40px rgba(252, 112, 31, .55); aspect-ratio: 4 / 5; background: var(--panel); }
.px-author img { width: 100%; height: 100%; object-fit: cover; }
.px-author figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 40px 18px 16px; background: linear-gradient(0deg, rgba(7, 14, 29, .95), transparent); }
.px-author figcaption .mono { display: flex; align-items: center; gap: 8px; color: var(--green); }
.px-author figcaption .mono i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.px-author figcaption b { font: 700 1.4rem var(--head); }
.px-author figcaption span:last-child { color: var(--muted); font-size: 13px; }
@media (max-width: 900px) { .px-grid { grid-template-columns: 1fr; padding: 44px 0; } .px-author { max-width: 360px; } }
.px-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.px-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 20px; text-decoration: none; border: 1px solid var(--line); border-top: 3px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, var(--panel2)), var(--panel)); transition: transform .2s, border-color .2s; }
.px-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.px-card.hot { border-color: rgba(252, 112, 31, .55); box-shadow: 0 24px 60px -30px rgba(252, 112, 31, .6); }
.px-card .mono { color: var(--c); }
.px-card h3 { font-size: 1.3rem; }
.px-card p { margin: 0; color: var(--muted); font-size: 14px; }
.px-card .check { margin: 6px 0 4px; font-size: 14px; }
.px-card .more { margin-top: auto; color: var(--c); }
.px-badge { position: absolute; top: -11px; right: 16px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(135deg, var(--orange2), var(--orange)); color: var(--on-primary); font: 800 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 1000px) { .px-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .px-track { grid-template-columns: 1fr; } }
.px-video { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.px-video .hero-actions { justify-content: flex-start; }
@media (max-width: 860px) { .px-video { grid-template-columns: 1fr; } }
.px-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.px-mini a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; text-decoration: none; border: 1px solid var(--line); border-left: 3px solid var(--c); background: var(--panel); transition: transform .2s; }
.px-mini a:hover { transform: translateY(-3px); }
.px-mini .mono { color: var(--c); }
.px-mini b::after { content: " →"; color: var(--c); }
@media (max-width: 900px) { .px-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .px-mini { grid-template-columns: 1fr; } }