/* Peças das aulas do curso Produtividade Profissional com IA.
 * Carregar depois de apresentacao.css. Vêm da página do curso
 * (enia-html/assets/css/pages/produtividade-ia.css): o fundo escuro do
 * hero, os chips de ferramentas, a linha de fatos e o selo institucional.
 */

/* ---- Slide escuro: o hero da página do curso ------------------------- */

.slide.escura {
  color: #d6d9f0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 92% 8%, rgba(47, 40, 255, 0.72), transparent 34%),
    radial-gradient(circle at 8% 115%, rgba(13, 148, 136, 0.22), transparent 38%),
    linear-gradient(135deg, #060916 0%, #0b1230 46%, #17145f 100%);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  background-position: -1px -1px, -1px -1px, 0 0, 0 0, 0 0;
}

.slide.escura.variante-teal {
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 12% 12%, rgba(13, 148, 136, 0.42), transparent 38%),
    radial-gradient(circle at 92% 104%, rgba(130, 36, 225, 0.48), transparent 42%),
    linear-gradient(160deg, #050814 0%, #0a1430 55%, #101c3f 100%);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  background-position: -1px -1px, -1px -1px, 0 0, 0 0, 0 0;
}

.slide.escura::before { display: none; }
.slide.capa.escura::after { display: none; }

.slide.escura h1,
.slide.escura h2,
.slide.escura h3,
.slide.escura .frase { color: #fff; }
.slide.escura .frase em { color: #b9b5ff; }
.slide.escura .rotulo { color: #b9b5ff; }
.slide.escura .sub { color: #c3c7e4; }
.slide.escura .pequeno { color: #a9afd2; }
.slide.escura .fonte-slide { color: #7f86ad; }
.slide.escura a { color: #d5d2ff; }
.slide.escura code { background: rgba(255, 255, 255, 0.1); color: #e4e2ff; }
.slide.escura .lista > li::before { background: transparent; border-color: #b9b5ff; }

.slide.escura .no {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.slide.escura .no .t { color: #fff; }
.slide.escura .no .s { color: #b9bedf; }
.slide.escura .no.forte { border-color: rgba(185, 181, 255, 0.6); box-shadow: 0 0 0 7px rgba(185, 181, 255, 0.1); }
.slide.escura .ligacoes { --cor-aresta: rgba(185, 181, 255, 0.55); --cor-pacote: #c9c5ff; }
.slide.escura .ligacoes .porta { fill: #0b1230; }
.slide.escura .ligacoes .rotulo-aresta { fill: #c3c7e4; stroke: #0b1230; }

/* Moldura e trilho acompanham o slide escuro. */
body.tema-escuro { background: #04060f; }
body.tema-escuro .trilho {
  background: rgba(6, 9, 22, 0.88);
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #a9afd2;
}
body.tema-escuro .trilho .trilho-titulo b { color: #fff; }
body.tema-escuro .trilho a.trilho-marca { color: #a9afd2; }
body.tema-escuro .trilho .botoes button { color: #a9afd2; }
body.tema-escuro .trilho-pontos button { background: transparent; border-color: rgba(185, 181, 255, 0.45); }
body.tema-escuro .trilho-pontos button.is-visto { background: rgba(185, 181, 255, 0.35); }
body.tema-escuro .trilho-pontos button.is-atual { background: #b9b5ff; border-color: #b9b5ff; }

/* O trilho some quando o mouse fica parado. */
.trilho { transition: opacity 0.6s ease, background 0.4s ease; }
.trilho.ocioso { opacity: 0; }

/* ---- Chips de ferramentas (como no hero da página do curso) ---------- */

.ferramentas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ferramentas li { display: flex; align-items: center; gap: 14px; }

.chip-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 18px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}

.chip-logo img { display: block; height: 26px; width: auto; }
.ferramentas .rotulo-ferramenta { color: #fff; font-size: 23px; font-weight: 600; }

/* ---- Linha de fatos ---------------------------------------------------- */

.fatos {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.fatos > div { padding: 26px 26px 0; text-align: center; }
.fatos > div + div { border-left: 1px solid rgba(255, 255, 255, 0.14); }

.fatos dt {
  color: #b9b5ff;
  font-family: var(--fonte-codigo);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fatos dd {
  margin: 8px 0 0;
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.2;
}

.fatos dd small {
  display: block;
  margin-top: 4px;
  color: #a9afd2;
  font-family: var(--fonte-texto);
  font-size: 18px;
  font-weight: 400;
}

/* ---- Selo institucional ------------------------------------------------ */

.institucional {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.6);
}

.institucional img { display: block; height: 46px; width: auto; }
.institucional i { width: 1px; height: 36px; background: #d7dbe8; }

/* ---- Tráfego: pontos que correm pelas linhas da grade ----------------- */

.slide > .trafego { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.trafego i {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #c9c5ff;
  box-shadow: 0 0 12px 4px rgba(150, 140, 255, 0.5);
  opacity: 0;
}

.trafego i.h { animation: trafego-h var(--dur, 11s) linear infinite; animation-delay: var(--atraso, 0s); }
.trafego i.v { animation: trafego-v var(--dur, 13s) linear infinite; animation-delay: var(--atraso, 0s); }

@keyframes trafego-h {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { transform: translateX(1700px); opacity: 0; }
}

@keyframes trafego-v {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.8; }
  85% { opacity: 0.8; }
  100% { transform: translateY(1000px); opacity: 0; }
}

.sem-movimento .trafego i { animation: none; opacity: 0; }

/* ---- Link para abrir ao vivo ------------------------------------------ */

.link-ao-vivo {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 16px 28px 17px;
  border-radius: 16px;
  background: #fff;
  color: var(--indigo-escuro) !important;
  font-family: var(--fonte-codigo);
  font-size: 30px;
  font-weight: 500;
  text-decoration: none !important;
  box-shadow: 0 0 0 8px rgba(185, 181, 255, 0.16), 0 22px 50px -24px rgba(0, 0, 0, 0.7);
  transition: transform 0.35s var(--mola), box-shadow 0.35s ease;
}

/* translate, e não transform: não briga com .centro-x */
.link-ao-vivo:hover { translate: 0 -2px; }
.link-ao-vivo .seta-link { color: var(--indigo); font-family: var(--fonte-texto); font-weight: 700; }
.slide:not(.escura) .link-ao-vivo { border: 1.3px solid var(--borda-forte); box-shadow: 0 0 0 8px rgb(var(--indigo-rgb) / 0.07), var(--sombra); }

/* ---- Tokens e probabilidades ----------------------------------------- */

.tok {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px 9px;
  border: 1.3px solid rgb(var(--indigo-rgb) / 0.22);
  border-radius: 12px;
  background: #fff;
  color: var(--tinta);
  font-family: var(--fonte-codigo);
  font-size: 28px;
  line-height: 1.2;
  box-shadow: var(--sombra);
}

.tok.vazio { border-style: dashed; color: var(--tinta-4); background: rgb(255 255 255 / 0.6); box-shadow: none; }
.tok.novo { border-color: var(--indigo); background: var(--indigo); color: #fff; box-shadow: 0 0 0 7px rgb(var(--indigo-rgb) / 0.14); }

.probs { display: grid; gap: 14px; }
.probs .p { display: grid; grid-template-columns: var(--colunas-p, 170px) 1fr 74px; align-items: center; gap: 16px; }
.probs .p span:first-child { font-family: var(--fonte-codigo); font-size: 22px; color: var(--tinta); }
.probs .p .trilha-p { height: 14px; border-radius: 99px; background: rgb(var(--indigo-rgb) / 0.08); overflow: hidden; }
.probs .p .trilha-p b { display: block; height: 100%; width: var(--p); border-radius: 99px; background: linear-gradient(90deg, #6f6bff, var(--indigo)); }
.probs .p span:last-child { font-family: var(--fonte-codigo); font-size: 19px; color: var(--tinta-3); text-align: right; }
.probs .p.top span:first-child { color: var(--indigo); font-weight: 600; }

/* ---- Tabela com logotipos -------------------------------------------- */

.tabela-logos { width: 100%; border-collapse: collapse; font-size: 22px; }
.tabela-logos.em { width: calc(var(--w, 1392) * 1px); }
.tabela-logos th { padding: 0 16px 12px; color: var(--tinta-3); font-size: 15px; font-weight: 700; letter-spacing: 0.13em; text-align: left; text-transform: uppercase; border-bottom: 1.6px solid rgb(var(--indigo-rgb) / 0.2); }
.tabela-logos td { height: 72px; padding: 0 16px; border-bottom: 1px solid rgb(var(--indigo-rgb) / 0.08); vertical-align: middle; color: var(--tinta-2); }
.tabela-logos td.logo { width: 250px; }
.tabela-logos td.logo img { display: block; height: 30px; width: auto; max-width: 180px; }
.tabela-logos td.logo small { display: block; margin-top: 4px; color: var(--tinta-4); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.tabela-logos .nada { color: #c3c8d6; }
.tabela-logos .aberto { display: inline-block; margin-left: 8px; padding: 1px 9px 2px; border-radius: 99px; background: #e5f6f3; color: var(--teal-texto); font-size: 14px; font-weight: 600; vertical-align: 3px; }
.tabela-logos .col-agente { color: var(--indigo-escuro); font-weight: 600; }

/* ---- Sumário: os seis encontros -------------------------------------- */

.encontro { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 26px; }
.encontro time { display: block; color: var(--tinta); font-family: var(--fonte-titulo); font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.encontro time small { margin-left: 4px; color: var(--tinta-3); font-size: 20px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.encontro .quando { color: var(--tinta-3); font-size: 18px; font-weight: 600; line-height: 1.3; }
.encontro h3 { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgb(var(--indigo-rgb) / 0.12); font-size: 25px; line-height: 1.16; }
.encontro p { color: var(--tinta-3); font-size: 19px; line-height: 1.4; }
.encontro .pilula { align-self: flex-start; padding: 3px 12px 4px; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.encontro.sabado { background: #f4fbfa; border-color: #c2e9e3; }
.encontro.sabado time small,
.encontro.sabado .quando { color: var(--teal-texto); }
.encontro.sabado h3 { border-top-color: #c2e9e3; }
.encontro.hoje { border-color: var(--borda-forte); box-shadow: 0 0 0 7px rgb(var(--indigo-rgb) / 0.08), var(--sombra-alta); }

.marco {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  color: var(--indigo);
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 700;
}
.marco.sabado { background: #e5f6f3; border-color: #c2e9e3; color: var(--teal-texto); }
.marco.hoje { background: var(--indigo); border-color: var(--indigo); color: #fff; box-shadow: 0 0 0 8px rgb(var(--indigo-rgb) / 0.12); }

/* ---- Janela de contexto ------------------------------------------------ */

.janela-ctx {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 58px 20px 20px;
  border: 2px solid var(--borda-forte);
  border-radius: 22px;
  background: rgb(255 255 255 / 0.75);
  box-shadow: 0 0 0 8px rgb(var(--indigo-rgb) / 0.05);
}

.janela-ctx > .rot {
  position: absolute;
  left: 24px;
  top: 18px;
  color: var(--indigo);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.janela-ctx > .rot b { margin-left: 10px; color: var(--tinta-4); font-weight: 600; letter-spacing: 0.04em; text-transform: none; }

.camada {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  height: calc(var(--alt) * 1px);
  padding: 0 20px;
  border: 1px solid var(--t-borda);
  border-radius: 12px;
  background: var(--t-fundo);
  color: var(--t-texto);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.camada small { display: block; font-size: 17px; font-weight: 500; opacity: 0.85; }
.camada.livre { flex: 1; align-items: center; border: 1.5px dashed #d4d8e8; background: transparent; color: var(--tinta-4); }

/* ---- Janela de aplicativo com menu lateral ---------------------------- */

.janela .principal { position: absolute; left: 230px; top: 44px; right: 0; bottom: 0; padding: 26px 34px; }
.janela .principal h4 { margin: 0 0 6px; color: var(--tinta); font-family: var(--fonte-titulo); font-size: 28px; font-weight: 650; }
.janela .lateral i { display: block; margin: 16px 0 8px; color: var(--tinta-4); font-size: 13px; font-style: normal; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.janela > header .url { margin-left: 18px; padding: 3px 14px; border-radius: 8px; background: #fff; border: 1px solid #e4e6f0; color: var(--tinta-3); font-family: var(--fonte-codigo); font-size: 14px; }

/* ---- Métricas (slide escuro) ------------------------------------------ */

.metrica { text-align: left; }
.metrica .t { font-size: 25px !important; }
.metrica .s { font-size: 19px !important; }
.metrica b { display: block; margin-bottom: 10px; color: #b9b5ff; font-family: var(--fonte-codigo); font-size: 15px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---- Avulsos ---------------------------------------------------------- */

.selo-aula {
  padding: 8px 18px 9px;
  border: 1px solid rgba(185, 181, 255, 0.45);
  border-radius: 999px;
  color: #d5d2ff;
  font-family: var(--fonte-codigo);
  font-size: 17px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.moldura-coluna {
  border: 2px solid var(--borda-forte);
  border-radius: 18px;
  background: rgb(var(--indigo-rgb) / 0.035);
  box-shadow: 0 0 0 7px rgb(var(--indigo-rgb) / 0.05);
  pointer-events: none;
}

.tabela-logos td small.nota { display: block; margin-top: 2px; color: var(--tinta-4); font-size: 16px; }
.aberto-legenda { display: inline-block; margin-right: 8px; padding: 1px 9px 2px; border-radius: 99px; background: #e5f6f3; color: var(--teal-texto); font-size: 14px; font-weight: 600; vertical-align: 2px; }

/* ---- Assinatura × API: dois lados -------------------------------------- */

.lado { display: flex; flex-direction: column; padding: 30px 36px; border-radius: 22px; }
.lado.claro { background: #fff; border: 1.3px solid var(--borda-forte); box-shadow: 0 0 0 7px rgb(var(--indigo-rgb) / 0.06), var(--sombra); }
.lado.noturno { background: linear-gradient(135deg, #0b1230 0%, #17145f 100%); border: 1.3px solid #17145f; box-shadow: var(--sombra-alta); color: #c3c7e4; }
.lado .rot { color: var(--indigo); font-size: 17px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.lado .grande { margin-top: 6px; color: var(--tinta); font-family: var(--fonte-titulo); font-size: 46px; font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; }
.lado .desc { height: 64px; margin-top: 10px; color: var(--tinta-3); font-size: 22px; line-height: 1.4; }
.lado .bloco { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgb(var(--indigo-rgb) / 0.12); }
.lado .bloco > b { display: block; margin-bottom: 10px; color: var(--tinta-4); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.lado .bloco p { color: var(--tinta-2); font-size: 22px; line-height: 1.4; }
.lado.noturno .rot { color: #b9b5ff; }
.lado.noturno .grande { color: #fff; }
.lado.noturno .desc { color: #c3c7e4; }
.lado.noturno .bloco { border-top-color: rgba(255, 255, 255, 0.12); }
.lado.noturno .bloco > b { color: #8f96c2; }
.lado.noturno .bloco p { color: #e4e6f5; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 5px 13px 6px; border-radius: 10px; background: #e9efff; color: #1f4cd6; font-size: 18px; font-weight: 600; line-height: 1.25; }
.chips span.forte { background: var(--indigo); color: #fff; }
.lado.noturno .chips span { border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08); color: #e4e6f5; }
.lado.noturno .chips span.forte { border-color: #b9b5ff; background: #b9b5ff; color: #12142a; }

/* ---- Tokens que saem um a um ------------------------------------------- */

.fluxo-tok { display: flex; flex-wrap: wrap; gap: 8px; }
.fluxo-tok > * { opacity: 0; }
.slide.is-ativo .fluxo-tok.ja > *,
.slide.is-ativo .passo-visivel .fluxo-tok > * {
  animation: tok-entra 0.32s var(--mola) both;
  animation-delay: calc((var(--k0, 0) + var(--k, 0)) * 60ms + 350ms);
}
@keyframes tok-entra {
  from { opacity: 0; transform: translateY(6px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
.sem-movimento .slide .fluxo-tok > *,
.modo-leitura .slide .fluxo-tok > * { opacity: 1; animation: none !important; }
.fluxo-tok > :nth-child(1) { --k: 0; }
.fluxo-tok > :nth-child(2) { --k: 1; }
.fluxo-tok > :nth-child(3) { --k: 2; }
.fluxo-tok > :nth-child(4) { --k: 3; }
.fluxo-tok > :nth-child(5) { --k: 4; }
.fluxo-tok > :nth-child(6) { --k: 5; }
.fluxo-tok > :nth-child(7) { --k: 6; }
.fluxo-tok > :nth-child(8) { --k: 7; }
.fluxo-tok > :nth-child(9) { --k: 8; }
.fluxo-tok > :nth-child(10) { --k: 9; }
.fluxo-tok > :nth-child(11) { --k: 10; }
.fluxo-tok > :nth-child(12) { --k: 11; }
.fluxo-tok > :nth-child(13) { --k: 12; }
.fluxo-tok > :nth-child(14) { --k: 13; }
.fluxo-tok > :nth-child(15) { --k: 14; }
.fluxo-tok > :nth-child(16) { --k: 15; }
.fluxo-tok > :nth-child(17) { --k: 16; }
.fluxo-tok > :nth-child(18) { --k: 17; }
.fluxo-tok > :nth-child(19) { --k: 18; }
.fluxo-tok > :nth-child(20) { --k: 19; }
.fluxo-tok > :nth-child(21) { --k: 20; }
.fluxo-tok > :nth-child(22) { --k: 21; }
.fluxo-tok > :nth-child(23) { --k: 22; }
.fluxo-tok > :nth-child(24) { --k: 23; }
.fluxo-tok > :nth-child(25) { --k: 24; }
.fluxo-tok > :nth-child(26) { --k: 25; }
.fluxo-tok > :nth-child(27) { --k: 26; }
.fluxo-tok > :nth-child(28) { --k: 27; }
.fluxo-tok > :nth-child(29) { --k: 28; }
.fluxo-tok > :nth-child(30) { --k: 29; }
.fluxo-tok > :nth-child(31) { --k: 30; }
.fluxo-tok > :nth-child(32) { --k: 31; }
.fluxo-tok > :nth-child(33) { --k: 32; }
.fluxo-tok > :nth-child(34) { --k: 33; }
.fluxo-tok > :nth-child(35) { --k: 34; }
.fluxo-tok > :nth-child(36) { --k: 35; }
.fluxo-tok > :nth-child(37) { --k: 36; }
.fluxo-tok > :nth-child(38) { --k: 37; }
.fluxo-tok > :nth-child(39) { --k: 38; }
.fluxo-tok > :nth-child(40) { --k: 39; }
.fluxo-tok > :nth-child(41) { --k: 40; }
.fluxo-tok > :nth-child(42) { --k: 41; }
.fluxo-tok > :nth-child(43) { --k: 42; }
.fluxo-tok > :nth-child(44) { --k: 43; }
.fluxo-tok > :nth-child(45) { --k: 44; }
.fluxo-tok > :nth-child(46) { --k: 45; }
.fluxo-tok > :nth-child(47) { --k: 46; }
.fluxo-tok > :nth-child(48) { --k: 47; }
.fluxo-tok > :nth-child(49) { --k: 48; }
.fluxo-tok > :nth-child(50) { --k: 49; }
.fluxo-tok > :nth-child(51) { --k: 50; }
.fluxo-tok > :nth-child(52) { --k: 51; }
.fluxo-tok > :nth-child(53) { --k: 52; }
.fluxo-tok > :nth-child(54) { --k: 53; }
.fluxo-tok > :nth-child(55) { --k: 54; }
.fluxo-tok > :nth-child(56) { --k: 55; }
.fluxo-tok > :nth-child(57) { --k: 56; }
.fluxo-tok > :nth-child(58) { --k: 57; }
.fluxo-tok > :nth-child(59) { --k: 58; }
.fluxo-tok > :nth-child(60) { --k: 59; }
.caixa-tok { padding: 16px 18px 18px; }
.caixa-tok > small { display: block; margin-bottom: 10px; color: var(--tinta-4); font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.caixa-tok.rascunho { border: 1.3px dashed #c4b5fd; background: #faf8ff; box-shadow: none; }
.caixa-tok.rascunho > small { color: #7c3aed; }
.tok.mini { padding: 3px 9px 4px; border-radius: 8px; font-size: 19px; box-shadow: none; }
.tok.pensa { border-color: #ddd5ff; background: #f4f0ff; color: #6d28d9; }
.tok.resp { padding: 6px 13px 7px; font-size: 24px; }

.contador b { display: block; color: var(--tinta); font-family: var(--fonte-titulo); font-size: 42px; font-weight: 700; line-height: 1.05; }
.contador b em { color: var(--violeta); font-style: normal; }
.contador span { display: block; margin-top: 6px; color: var(--tinta-3); font-size: 19px; line-height: 1.35; }
.slide.is-ativo .contador.tarde.passo-visivel { animation: surgir 0.6s var(--mola) both; animation-delay: 3.1s; }

/* ---- Janela de contexto em quadrados ---------------------------------- */

.ctx-grade { display: grid; grid-template-columns: repeat(25, 34px); grid-auto-rows: 34px; gap: 6px; }
.ctx-grade i {
  border: 1.3px dashed #d4d8e8;
  border-radius: 7px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  transition-delay: calc(var(--k, 0) * 14ms);
}
.slide:has(.leg-1.passo-visivel) .ctx-grade i.ins { border: 1.3px solid #c9cddc; background: #dfe2ee; }
.slide:has(.leg-1.passo-visivel) .ctx-grade i.arq { border: 1.3px solid #9fb6f5; background: #c9d7fb; }
.slide:has(.leg-2.passo-visivel) .ctx-grade i.conv { border: 1.3px solid #bfaefc; background: #ddd3ff; }
.slide:has(.leg-2.passo-visivel) .ctx-grade i.msg { border: 1.3px solid #5cc9b8; background: #9fe3d8; }
.slide:has(.leg-3.passo-visivel) .ctx-grade i.resp { border: 1.3px solid var(--indigo); background: var(--indigo); }

.legenda-ctx { display: flex; flex-direction: column; gap: 16px; }
.legenda-ctx > div { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; color: var(--tinta-2); font-size: 21px; line-height: 1.3; }
.legenda-ctx > div > i { width: 26px; height: 26px; margin-top: 1px; border-radius: 6px; }
.legenda-ctx small { display: block; color: var(--tinta-4); font-size: 17px; }
.legenda-ctx .total { display: block; padding-top: 14px; border-top: 1px solid rgb(var(--indigo-rgb) / 0.15); color: var(--tinta); font-family: var(--fonte-titulo); font-size: 28px; font-weight: 700; }
.legenda-ctx .total small { font-family: var(--fonte-texto); font-weight: 500; }
.cor-ins { border: 1.3px solid #c9cddc; background: #dfe2ee; }
.cor-arq { border: 1.3px solid #9fb6f5; background: #c9d7fb; }
.cor-conv { border: 1.3px solid #bfaefc; background: #ddd3ff; }
.cor-msg { border: 1.3px solid #5cc9b8; background: #9fe3d8; }
.cor-resp { background: var(--indigo); }

/* ---- Tabela de preços --------------------------------------------------- */

.tabela.precos { font-size: 32px; }
.tabela.precos th { padding-right: 24px; font-size: 17px; }
.tabela.precos td { padding: 16px 24px 16px 0; vertical-align: middle; }
.tabela.precos td + td { color: var(--tinta); font-family: var(--fonte-titulo); font-weight: 600; white-space: nowrap; }
.tabela.precos td + td + td { color: var(--violeta); }

/* ---- Figura com moldura de navegador ----------------------------------- */

.janela.figura img { display: block; width: 100%; height: auto; }

/* ---- Conta de exemplo -------------------------------------------------- */

.conta { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 20px; }
.conta td { padding: 9px 12px 9px 0; border-bottom: 1px solid rgb(var(--indigo-rgb) / 0.1); color: var(--tinta-3); }
.conta td:last-child { padding-right: 0; color: var(--tinta); font-family: var(--fonte-codigo); font-size: 18px; text-align: right; white-space: nowrap; }
.conta tr:last-child td { padding-top: 12px; border-bottom: 0; color: var(--tinta); font-weight: 700; }

/* ---- HTML, CSS e JavaScript -------------------------------------------- */

.arquivo.compacto pre { padding: 12px 20px 14px; font-size: 17px; line-height: 1.5; font-variant-ligatures: none; }
.arquivo > header .papel { margin-left: auto; padding: 2px 11px 3px; border-radius: 99px; background: var(--t-fundo); color: var(--t-texto); font-family: var(--fonte-texto); font-size: 15px; font-weight: 700; }

.pagina {
  position: absolute;
  inset: 44px 0 0 0;
  padding: 46px 54px;
  background: #fff;
  color: #000;
  font-family: "Times New Roman", Times, serif;
  transition: background-color 0.9s ease;
}
.pagina h1 { margin: 0 0 14px; color: #000; font-family: inherit; font-size: 48px; font-weight: 700; letter-spacing: 0; transition: color 0.9s ease; }
.pagina p { max-width: none; margin: 0 0 24px; color: inherit; font-size: 26px; }
.pagina button { padding: 3px 10px; border: 1px solid #767676; border-radius: 3px; background: #efefef; color: #000; font: 20px Arial, sans-serif; transition: all 0.8s var(--mola); }
.pagina .aviso { min-height: 36px; margin-top: 24px; color: #9a3412; font-weight: 600; opacity: 0; transform-origin: left center; }
.pagina .cursor { position: absolute; left: 0; top: 0; width: 30px; opacity: 0; pointer-events: none; }

.slide:has(.arq-css.passo-visivel) .pagina { background: #fff7ed; font-family: var(--fonte-texto); }
.slide:has(.arq-css.passo-visivel) .pagina h1 { color: #9a3412; }
.slide:has(.arq-css.passo-visivel) .pagina button { padding: 12px 30px; border: 0; border-radius: 99px; background: #9a3412; color: #fff; font: 600 22px var(--fonte-texto); }

.slide:has(.arq-js.passo-visivel) .pagina .cursor { animation: cursor-js 4.8s var(--mola) 0.6s infinite; }
.slide:has(.arq-js.passo-visivel) .pagina button { animation: botao-js 4.8s ease 0.6s infinite; }
/* O aviso aparece no primeiro clique e pulsa a cada clique seguinte. */
.slide:has(.arq-js.passo-visivel) .pagina .aviso { animation: aviso-entra 0.5s ease 2.8s both, aviso-pulso 4.8s ease 0.6s infinite; }

@keyframes cursor-js {
  0% { opacity: 0; transform: translate(560px, 380px); }
  10% { opacity: 1; }
  38% { transform: translate(var(--bx), var(--by)); }
  43% { transform: translate(var(--bx), var(--by)) scale(0.82); }
  48% { transform: translate(var(--bx), var(--by)); }
  85% { opacity: 1; transform: translate(var(--bx), var(--by)); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)); }
}
@keyframes botao-js { 0%, 40%, 50%, 100% { transform: none; } 44% { transform: scale(0.94); } }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aviso-pulso { 0%, 46%, 60%, 100% { scale: 1; } 52% { scale: 1.06; } }
.sem-movimento .pagina .aviso { opacity: 1; animation: none !important; }
.modo-leitura .slide:has(.arq-js.passo-visivel) .pagina .aviso { opacity: 1; animation: none; }

/* ---- Ferramentas: o pedido, a chamada e o resultado -------------------- */

.pedido-ctx > small,
.res-ferr > small { display: block; margin-bottom: 8px; color: var(--tinta-4); font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.menu-ferr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(var(--indigo-rgb) / 0.1); }
.menu-ferr b { width: 100%; color: var(--tinta-4); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.menu-ferr code { padding: 3px 10px 4px; border: 1px solid #f8dfa9; background: #fff5e1; color: #8a5a00; font-size: 16px; }
.caixa-tok.chamada { border: 1.3px dashed #eec46d; background: #fffaf0; box-shadow: none; }
.caixa-tok.chamada > small { color: #8a5a00; }
.tok.ferr { border-color: #f8dfa9; background: #fff5e1; color: #8a5a00; }
.no.res-ferr { border-color: #d3defc; background: #f5f8ff; }
.res-ferr > small { color: #1f4cd6; }
.res-ferr .txt { display: block; color: var(--tinta-2); font-family: var(--fonte-codigo); font-size: 18px; line-height: 1.45; }

/* ---- Harness e o loop -------------------------------------------------- */

.pilula.formula { padding: 9px 26px 10px; font-family: var(--fonte-titulo); font-size: 26px; }
/* Aresta repetida só para o pacote dar mais uma volta: não se desenha. */
.ligacoes .eco > .aresta,
.ligacoes .eco > .porta,
.ligacoes .eco > .seta { visibility: hidden; }

/* ---- Ferramentas do agente: a pasta que muda --------------------------- */

.no.verbo { display: flex; align-items: center; gap: 14px; }
.no.verbo .ponto-cor { flex: none; width: 14px; height: 14px; }
.no.verbo .t { flex: none; width: 190px; }
.no.verbo .s { margin: 0; }

.explorador .cab { display: flex; justify-content: space-between; align-items: center; height: 36px; padding: 0 24px; border-bottom: 1px solid rgb(var(--indigo-rgb) / 0.08); color: var(--tinta-4); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.arq-linha {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid rgb(var(--indigo-rgb) / 0.06);
  transition: background-color 0.4s ease, opacity 0.55s ease, transform 0.65s var(--mola);
}
.arq-linha .ic { flex: none; display: grid; place-items: center; width: 46px; height: 30px; border-radius: 6px; background: var(--c); color: #fff; font: 600 12px/1 var(--fonte-codigo); font-style: normal; text-transform: uppercase; transition: opacity 0.4s ease; }
.arq-linha .nome { color: var(--tinta-2); font-family: var(--fonte-codigo); font-size: 20px; transition: color 0.4s ease; }
.arq-linha .tag { display: none; margin-left: auto; padding: 3px 12px 4px; border: 1px solid var(--t-borda); border-radius: 99px; background: var(--t-fundo); color: var(--t-texto); font-size: 16px; font-style: normal; font-weight: 700; }
.slide:has(.v-ler.passo-visivel) .l-vendas .tag,
.slide:has(.v-criar.passo-visivel) .l-rel .tag,
.slide:has(.v-editar.passo-visivel) .l-notas .tag,
.slide:has(.v-apagar.passo-visivel) .l-rasc .tag,
.slide:has(.v-buscar.passo-visivel) .l-contrato .tag { display: inline-block; animation: surgir 0.5s var(--mola) both; }
.slide:has(.v-apagar.passo-visivel) .l-rasc .nome { color: var(--tinta-4); text-decoration: line-through; }
.slide:has(.v-apagar.passo-visivel) .l-rasc .ic { opacity: 0.3; }
.slide:has(.v-ler.passo-atual) .l-vendas,
.slide:has(.v-criar.passo-atual) .l-rel,
.slide:has(.v-editar.passo-atual) .l-notas,
.slide:has(.v-apagar.passo-atual) .l-rasc,
.slide:has(.v-buscar.passo-atual) .l-contrato { background: rgb(var(--indigo-rgb) / 0.05); }

.term-mini { position: absolute; left: 24px; right: 24px; bottom: 22px; padding: 14px 20px; border-radius: 12px; background: #101327; color: #dfe2f5; font: 19px/1.55 var(--fonte-codigo); }
.term-mini span { display: block; }
.term-mini .sh::before { content: "$ "; color: #7f86ad; }
.term-mini .res { color: #8fe3a0; }
.term-mini .res::before { content: "⎿ "; color: #5b6189; }

/* ---- Tabela das ferramentas por agente --------------------------------- */

.tabela-ferr { border-collapse: collapse; font-size: 21px; }
.tabela-ferr.em { width: calc(var(--w, 1392) * 1px); }
.tabela-ferr th { padding: 0 16px 14px; border-bottom: 1.6px solid rgb(var(--indigo-rgb) / 0.2); text-align: left; vertical-align: bottom; }
.tabela-ferr th img { display: block; height: 26px; width: auto; }
.tabela-ferr th span { display: block; margin-top: 8px; color: var(--tinta-3); font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.tabela-ferr td { height: 48px; padding: 0 16px; border-bottom: 1px solid rgb(var(--indigo-rgb) / 0.08); color: var(--tinta-2); vertical-align: middle; transition: background-color 0.45s ease, box-shadow 0.45s ease; }
.tabela-ferr td:first-child { color: var(--tinta); font-weight: 600; }
.tabela-ferr td code { font-size: 17px; }
.tabela-ferr td.sim { color: var(--teal); font-size: 24px; font-weight: 700; }
.slide:has(.leg-muda.passo-visivel) .tabela-ferr tr.muda td { background: #fff4ef; }
.slide:has(.leg-muda.passo-visivel) .tabela-ferr tr.muda td:first-child { box-shadow: inset 4px 0 0 #e0592c; }
.marca-muda { display: inline-block; width: 18px; height: 18px; margin-right: 10px; border-radius: 4px; background: #fff4ef; box-shadow: inset 4px 0 0 #e0592c; vertical-align: -3px; }

/* ---- Chat ou agente ---------------------------------------------------- */

.mock-chat { display: flex; flex-direction: column; gap: 10px; height: 196px; margin-top: 18px; }
.mock-chat .eu { align-self: flex-end; max-width: 84%; padding: 10px 16px; border-radius: 16px 16px 4px 16px; background: #efebff; color: var(--tinta-2); font-size: 18px; line-height: 1.4; }
.mock-chat .eu .anexo { display: block; width: max-content; margin-top: 6px; padding: 2px 10px; border: 1px solid #ddd5ff; border-radius: 8px; background: #fff; color: var(--tinta-3); font: 14px var(--fonte-codigo); }
.mock-chat .ia { align-self: flex-start; max-width: 92%; padding: 10px 16px; border-radius: 16px 16px 16px 4px; background: #f4f5fa; color: var(--tinta-2); font-size: 18px; line-height: 1.4; }
.mock-chat .ia pre { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: #101327; color: #dfe2f5; font: 14px/1.5 var(--fonte-codigo); white-space: pre; font-variant-ligatures: none; }
.mock-term { height: 196px; margin-top: 18px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(0, 0, 0, 0.28); color: #e4e6f5; font: 17px/1.62 var(--fonte-codigo); }
.mock-term span { display: block; }
.mock-term .eu::before { content: "> "; color: var(--amarelo); }
.mock-term .ferr { color: #86e3d6; }
.mock-term .ferr::before { content: "● "; color: #3fcfb9; }
.mock-term .claude::before { content: "● "; color: #c9b8ff; }

.fatos-lado { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgb(var(--indigo-rgb) / 0.12); }
.fatos-lado dt { padding-top: 5px; color: var(--tinta-4); font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.fatos-lado dd { margin: 0; color: var(--tinta-2); font-size: 21px; line-height: 1.35; }
.lado.noturno .fatos-lado { border-top-color: rgba(255, 255, 255, 0.12); }
.lado.noturno .fatos-lado dt { color: #8f96c2; }
.lado.noturno .fatos-lado dd { color: #e4e6f5; }

/* ---- Conversa: camadas de abstração ------------------------------------ */

.camadas-hist { display: flex; flex-direction: column; gap: 10px; }
.camadas-hist > div { display: flex; align-items: center; gap: 24px; height: 82px; margin: 0 calc(var(--r, 0) * 1px); padding: 0 26px; border: 1.3px solid var(--t-borda, var(--borda)); border-radius: 14px; background: var(--t-fundo, #fff); }
.camadas-hist small { flex: none; width: 110px; color: var(--tinta-4); font: 600 16px var(--fonte-codigo); }
.camadas-hist b { color: var(--t-texto, var(--tinta)); font-family: var(--fonte-titulo); font-size: 27px; font-weight: 650; }
.camadas-hist .agora { border-color: var(--indigo); background: var(--indigo); box-shadow: 0 0 0 8px rgb(var(--indigo-rgb) / 0.12); }
.camadas-hist .agora b { color: #fff; }
.camadas-hist .agora small { color: #c9c5ff; }
.frase-media { color: var(--tinta); font-family: var(--fonte-titulo); font-size: 36px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.frase-media.realce { color: var(--indigo); }

/* ---- Exercício e fecho ------------------------------------------------- */

.pedido-cola > p { max-width: none; padding: 18px 24px 20px; color: var(--tinta-2); font-size: 22px; line-height: 1.45; }
.slide.escura .material > span { color: #c3c7e4; font-size: 26px; }

/* ---- Chat, Work, Codex e Dots ------------------------------------------ */

.no.modo { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; border-top: 4px solid var(--t-forte); }
.modo .nome { color: var(--t-texto); font-family: var(--fonte-titulo); font-size: 32px; font-weight: 700; line-height: 1.1; }
.modo .para { color: var(--tinta); font-size: 21px; font-weight: 600; line-height: 1.32; }
.modo dl { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid rgb(var(--indigo-rgb) / 0.1); }
.modo dt { color: var(--tinta-4); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.modo dd { margin: 3px 0 12px; color: var(--tinta-3); font-size: 19px; line-height: 1.35; }

.lado.dots .grande { display: flex; align-items: center; gap: 18px; }
.bolinhas { display: inline-flex; gap: 8px; }
.bolinhas b { width: 16px; height: 16px; border-radius: 50%; background: #b9b5ff; animation: bolinha 1.8s ease-in-out infinite; }
.bolinhas b:nth-child(2) { background: #86e3d6; animation-delay: 0.2s; }
.bolinhas b:nth-child(3) { background: #f6c35f; animation-delay: 0.4s; }
@keyframes bolinha { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-8px); } }
.sem-movimento .bolinhas b { animation: none; }
.novidades { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.novidades li { position: relative; padding-left: 24px; color: #e4e6f5; font-size: 19px; line-height: 1.3; }
.novidades li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 10px; height: 10px; border-radius: 50%; background: #b9b5ff; }
.lado .rodape-lado { margin-top: auto; color: #8f96c2; font-size: 17px; }

.eixo { display: flex; align-items: center; gap: 18px; color: var(--tinta-3); font-size: 18px; font-weight: 600; }
.eixo i { position: relative; flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #d3defc, var(--indigo) 60%, var(--violeta)); }
.eixo i::after { content: ""; position: absolute; right: 0; top: 50%; width: 11px; height: 11px; border-top: 3px solid var(--violeta); border-right: 3px solid var(--violeta); transform: translateY(-50%) rotate(45deg); }

/* ---- Modelo, harness e agente ------------------------------------------ */

.camada-comp { border: 2px solid var(--t-borda); border-radius: 28px; background: var(--t-fundo); }
.camada-comp > .nome-camada { position: absolute; left: 26px; top: 16px; display: flex; align-items: baseline; gap: 12px; color: var(--t-texto); font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; }
.camada-comp > .nome-camada small { color: var(--tinta-3); font-family: var(--fonte-texto); font-size: 17px; font-weight: 500; }
.camada-comp.tom-teal { background: rgba(255, 255, 255, 0.72); }
.pilula.peca { font-size: 17px; }
.trilha-ag { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--violeta); font-size: 18px; font-weight: 600; }
.trilha-ag span { padding: 6px 14px; border-radius: 99px; background: #fff; border: 1px solid rgb(var(--violeta-rgb, 130 36 225) / 0.3); }
.trilha-ag i { color: var(--tinta-4); font-style: normal; }

.no.defin { display: grid; grid-template-columns: 170px 1fr; column-gap: 22px; align-items: start; padding: 20px 24px; border-left: 5px solid var(--t-forte); }
.defin .nome { grid-row: span 3; color: var(--t-texto); font-family: var(--fonte-titulo); font-size: 31px; font-weight: 700; line-height: 1.1; }
.defin .papel { color: var(--tinta); font-size: 23px; font-weight: 700; line-height: 1.25; }
.defin .desc { margin-top: 4px; color: var(--tinta-3); font-size: 18px; line-height: 1.38; }
.defin .ex { margin-top: 8px; color: var(--t-texto); font-family: var(--fonte-codigo); font-size: 15px; }

/* ---- Carrossel ----------------------------------------------------------- */

.car-cod pre { font-size: 15px !important; line-height: 1.42 !important; }
.car-pag { position: absolute; left: 0; right: 0; top: 44px; bottom: 0; padding: 34px 40px; overflow: hidden; background: #fff; color: #000; font-family: "Times New Roman", serif; transition: background 0.8s ease; }
.car-pag h1 { margin: 0 0 18px; color: #000; font-family: inherit; font-size: 40px; font-weight: 700; letter-spacing: 0; }
.car-pag figure { margin: 14px 40px; font-size: 24px; }
.car-pag figure small { display: none; }
.car-alvo { pointer-events: none; }

.slide:has(.car-css.passo-visivel) .car-pag { background: #fff7ed; font-family: var(--fonte-texto); }
.slide:has(.car-css.passo-visivel) .car-pag h1 { color: #9a3412; font-family: var(--fonte-titulo); }
.slide:has(.car-css.passo-visivel) .carrossel { overflow: hidden; height: 330px; border-radius: 22px; box-shadow: 0 18px 40px rgba(154, 52, 18, 0.18); }
.slide:has(.car-css.passo-visivel) .faixa { display: flex; height: 100%; transition: transform 0.6s var(--mola, ease); }
.slide:has(.car-css.passo-visivel) .car-pag figure { flex: 0 0 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; margin: 0; padding: 34px 40px; color: #fff; font-size: 22px; }
.slide:has(.car-css.passo-visivel) .car-pag figure b { font-family: var(--fonte-titulo); font-size: 52px; line-height: 1; }
.slide:has(.car-css.passo-visivel) .car-pag figure small { display: block; color: rgba(255, 255, 255, 0.85); font-size: 20px; }
.slide:has(.car-css.passo-visivel) .car-pag figure em { align-self: flex-start; margin-top: 8px; padding: 4px 16px; border-radius: 99px; background: rgba(255, 255, 255, 0.92); color: #7c2d12; font-style: normal; font-weight: 700; }
.car-pag figure:nth-child(1) { --g: linear-gradient(135deg, #f59e0b, #c2410c); }
.car-pag figure:nth-child(2) { --g: linear-gradient(135deg, #eab308, #a16207); }
.car-pag figure:nth-child(3) { --g: linear-gradient(135deg, #0d9488, #155e75); }
.slide:has(.car-css.passo-visivel) .car-pag figure { background: var(--g); }
.car-pontos { display: none; }
.slide:has(.car-js.passo-visivel) .car-pontos { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.car-pontos i { width: 11px; height: 11px; border-radius: 50%; background: #fed7aa; transition: background 0.3s ease; }
.car-pontos i.ativo { background: #c2410c; }

/* ---- Markdown ------------------------------------------------------------ */

.md-tabela { width: 100%; border-collapse: collapse; }
.md-tabela th { padding: 0 0 10px; color: var(--tinta-4); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-align: left; text-transform: uppercase; }
.md-tabela td { height: 56px; padding: 0 16px 0 0; border-top: 1px solid rgb(var(--indigo-rgb) / 0.1); vertical-align: middle; }
.md-tabela td:first-child { width: 47%; color: var(--violeta); font-family: var(--fonte-codigo); font-size: 21px; white-space: nowrap; font-variant-ligatures: none; }
.md-tabela td:last-child { color: var(--tinta); font-size: 21px; }
.md-tabela .r-h1 { font-family: var(--fonte-titulo); font-size: 32px; font-weight: 750; }
.md-tabela .r-h2 { font-family: var(--fonte-titulo); font-size: 25px; font-weight: 700; }
.md-tabela .r-li::before { content: "•"; margin-right: 10px; color: var(--indigo); }
.md-tabela a { color: var(--indigo); text-decoration: underline; }
.md-tabela code { padding: 2px 9px; border-radius: 6px; background: #eef0fb; font-size: 18px; }
.md-tabela .r-cit { padding-left: 14px; border-left: 4px solid #c9cdea; color: var(--tinta-3); font-style: italic; }
.md-tabela .r-tab { display: inline-grid; grid-template-columns: auto auto; border: 1px solid #cfd3ea; border-radius: 6px; font-size: 16px; }
.md-tabela .r-tab span { padding: 2px 14px; border-right: 1px solid #cfd3ea; }
.md-tabela .r-tab span:nth-child(2n) { border-right: 0; }
.md-tabela .r-tab span:nth-child(-n+2) { border-bottom: 1px solid #cfd3ea; font-weight: 700; }
.md-onde { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.md-onde li { display: flex; align-items: baseline; gap: 14px; color: var(--tinta-3); font-size: 19px; }
.md-onde code { flex: none; min-width: 150px; color: var(--indigo); font-size: 18px; font-weight: 600; background: none; padding: 0; }

/* ---- Conversa com foto de fundo --------------------------------------- */

.slide.conversa-foto { isolation: isolate; background: #060916; }
.conversa-foto .foto-fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.conversa-foto .foto-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; filter: contrast(1.05); }
.conversa-foto .foto-fundo::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 88% 10%, rgba(47, 40, 255, 0.35), transparent 40%),
  linear-gradient(90deg, rgba(6, 9, 22, 0.9) 0%, rgba(8, 12, 34, 0.8) 50%, rgba(11, 18, 48, 0.6) 100%); }
.conversa-foto .credito { color: rgba(214, 217, 240, 0.62); font-size: 15px; text-align: right; }
.conversa-foto .camadas-hist > div { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px); }
.conversa-foto .camadas-hist b { color: #fff; }
.conversa-foto .camadas-hist small { color: #9fa6d4; }
.conversa-foto .camadas-hist .agora { background: #4f46e5; border-color: #8b85ff; box-shadow: 0 0 0 8px rgba(139, 133, 255, 0.18), 0 18px 40px rgba(47, 40, 255, 0.35); }
.conversa-foto .frase-media { color: #fff; }
.conversa-foto .frase-media.realce { color: #c9c5ff; }
.conversa-foto .lista > li { color: #e4e6f5; }
.conversa-foto .aviso-conversa { padding: 18px 24px; border: 1.5px solid rgba(255, 138, 112, 0.6); border-radius: 16px; background: rgba(255, 112, 84, 0.14); color: #ffc2b3; font-size: 22px; font-weight: 600; }

/* ---- Mãos à massa e doze ideias -------------------------------------- */

.metrica.demo { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 28px; }
.metrica.demo b { color: #86e3d6; }
.metrica.demo .t { font-size: 27px !important; line-height: 1.15; }
.metrica.demo .s { font-size: 21px !important; line-height: 1.42; }
.no.ideia { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; text-align: left; border-top: 4px solid var(--t-forte); }
.ideia .t { color: var(--t-texto); font-size: 23px; }
.ideia .s { margin: 0; color: var(--tinta-2); font-size: 21px; line-height: 1.38; }

/* ---- Quanto custa um agente ------------------------------------------- */

.tabela-planos { border-collapse: collapse; font-size: 20px; }
.tabela-planos.em { width: calc(var(--w, 1392) * 1px); }
.tabela-planos th { padding: 0 14px 12px; color: var(--tinta-3); font-size: 14px; font-weight: 700; letter-spacing: 0.13em; text-align: left; text-transform: uppercase; border-bottom: 1.6px solid rgb(var(--indigo-rgb) / 0.2); }
.tabela-planos td { height: 86px; padding: 0 14px; border-bottom: 1px solid rgb(var(--indigo-rgb) / 0.08); color: var(--tinta-2); line-height: 1.32; vertical-align: middle; }
.tabela-planos .ag { color: var(--tinta); font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; }
.tabela-planos .ag small { display: block; margin-top: 4px; color: var(--tinta-4); font-family: var(--fonte-texto); font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.tabela-planos .preco { color: var(--indigo-escuro); font-weight: 600; white-space: nowrap; }
.tabela-planos .nada { color: #a6adc2; }
.tabela-planos tr.livre td { background: #eefaf7; }
.tabela-planos tr.livre td:first-child { box-shadow: inset 5px 0 0 var(--teal); }
.tabela-planos tr.livre strong { color: var(--teal-texto); }

/* ---- Aula 2 · o que entra na janela ----------------------------------- */

.camadas-janela { display: flex; flex-direction: column; gap: 10px; }
.cj { display: grid; grid-template-columns: 12px 1fr 250px; gap: 18px; align-items: center; padding: 14px 20px; border: 1.3px solid var(--t-borda, var(--borda)); border-radius: 14px; background: #fff; }
.cj > i { align-self: stretch; border-radius: 6px; background: var(--t-forte, var(--indigo)); }
.cj .t { display: block; color: var(--tinta); font-size: 24px; font-weight: 600; }
.cj .t code { font-size: 20px; }
.cj .s { display: block; margin-top: 2px; color: var(--tinta-3); font-size: 18px; }
.cj .quando { justify-self: end; padding: 4px 14px 5px; border-radius: 99px; background: var(--t-fundo, #f4f3ff); color: var(--t-texto, var(--indigo)); font-size: 17px; font-weight: 600; white-space: nowrap; }
.cj.voce { border-style: dashed; background: #fbfbff; }

/* ---- Aula 2 · avaliação dos modelos ----------------------------------- */

.peso-barra { display: flex; height: 92px; overflow: hidden; border-radius: 16px; box-shadow: var(--sombra); }
.peso-barra > div { display: flex; flex-direction: column; justify-content: center; padding: 0 22px; background: var(--t-forte); color: #fff; }
.peso-barra b { font-family: var(--fonte-titulo); font-size: 34px; line-height: 1; }
.peso-barra span { margin-top: 4px; font-size: 18px; font-weight: 600; opacity: 0.92; }
.peso-provas { display: flex; gap: 0; }
.peso-provas > ul { margin: 0; padding: 0 22px 0 0; list-style: none; }
.peso-provas li { margin-bottom: 14px; color: var(--tinta-2); font-size: 19px; line-height: 1.3; }
.peso-provas li b { display: block; color: var(--t-texto); font-size: 20px; }
.peso-provas li small { color: var(--tinta-4); font-size: 16px; }

.barra-tok { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; margin-bottom: 26px; }
.barra-tok .nivel { color: var(--tinta); font-family: var(--fonte-codigo); font-size: 22px; font-weight: 600; }
.barra-tok .trilho-tok { position: relative; height: 58px; }
.barra-tok .enche { position: absolute; inset: 0 auto 0 0; display: flex; align-items: center; justify-content: flex-end; min-width: 92px; padding: 0 14px; border-radius: 12px; background: var(--t-forte); color: #fff; font-size: 19px; font-weight: 600; white-space: nowrap; }
.barra-tok .nota-ponto { position: absolute; top: 50%; transform: translateY(-50%); color: var(--tinta); font-family: var(--fonte-titulo); font-size: 30px; font-weight: 700; white-space: nowrap; }
.barra-tok .nota-ponto small { margin-left: 6px; color: var(--tinta-4); font-family: var(--fonte-texto); font-size: 17px; font-weight: 500; }

.niveis { width: 100%; border-collapse: collapse; font-size: 20px; }
.niveis td { padding: 11px 12px; border-bottom: 1px solid rgb(var(--indigo-rgb) / 0.08); color: var(--tinta-2); line-height: 1.32; vertical-align: top; }
.niveis td:first-child { width: 96px; color: var(--indigo-escuro); font-family: var(--fonte-codigo); font-weight: 600; }

/* ---- Aula 2 · os arquivos se somam ------------------------------------ */

.pasta-nivel { position: absolute; border: 1.6px solid var(--t-borda); border-radius: 22px; background: var(--t-fundo); }
.pasta-nivel > .rot { position: absolute; top: 16px; left: 24px; color: var(--t-texto); font-size: 15px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.pasta-nivel > .cam { position: absolute; top: 44px; left: 24px; right: 24px; color: var(--tinta-2); font-family: var(--fonte-codigo); font-size: 17px; line-height: 1.5; }

.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lado-a-lado .arquivo pre { font-family: var(--fonte-texto); font-size: 20px; line-height: 1.45; }