/* kit.css = tokens.css + pecas.css copiados da skill professor-tela-visual (references/kit; copia mestre la; inclui L7 lista de topicos). So HTML/CSS/SVG, sem biblioteca. */
/* Kit visual — tokens. Só CSS, sem biblioteca, sem arquivo externo.
   Cores aproximadas (a olho) do infográfico de referência do Gemini da Introdução:
   fundo bege/pêssego, títulos marrons, placas terracota, rótulos cremes. Estimativa visual.
   O efeito "massinha" por claymorphism é INFERÊNCIA minha, não fonte. */

:root {
  /* paleta limitada: referência + neutros (+ 1 verde-argila só para o "B" de pares A vs B) */
  --k-fundo: #F7E8DC;        /* bege/pêssego */
  --k-fundo-2: #F2D5C0;      /* pêssego mais escuro (áreas e caminho) */
  --k-creme: #FBEFE3;        /* cartões */
  --k-creme-rotulo: #EFD3B8; /* rótulos em pílula */
  --k-pergaminho: #E2BE9E;   /* faixa tipo pergaminho */
  --k-caminho: #E6C3A8;
  --k-terracota: #9A5640;    /* placas */
  --k-terracota-esc: #7C4130;
  --k-marrom: #5C2F21;       /* títulos e texto */
  --k-marrom-2: #7A4634;     /* texto secundário */
  --k-verde: #3F6B69;        /* verde-argila: segundo lado de A vs B */
  --k-texto-claro: #FFF6EC;  /* texto sobre terracota/verde */
  --k-destaque: #D9731F;     /* única cor de destaque (ponto-chave); não usar como cor de texto */

  /* contrastes calculados (WCAG, razão):
     marrom/fundo 9,31 · marrom/creme 9,85 · marrom/creme-rotulo 7,79 · marrom-2/fundo 6,37
     texto-claro/terracota 5,20 · texto-claro/terracota-esc 5,87 · texto-claro/verde 5,58  (todas >= 4,5) */

  /* raios */
  --k-raio-sm: 14px;
  --k-raio: 26px;
  --k-raio-lg: 36px;
  --k-raio-pilula: 999px;

  /* sombras em camadas (claymorphism): internas claras/escuras + externas suaves */
  --k-sombra-argila:
    inset 0 4px 6px rgba(255, 255, 255, .38),
    inset 0 -8px 12px rgba(60, 25, 15, .30),
    0 2px 3px rgba(60, 25, 15, .20),
    0 10px 18px rgba(60, 25, 15, .16),
    0 24px 36px rgba(60, 25, 15, .08);
  --k-sombra-suave:
    inset 0 3px 4px rgba(255, 255, 255, .55),
    inset 0 -5px 8px rgba(120, 60, 35, .16),
    0 2px 3px rgba(60, 25, 15, .14),
    0 8px 14px rgba(60, 25, 15, .10);

  /* fontes locais do sistema (nada baixado) */
  --k-fonte: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --k-fonte-titulo: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;

  /* grade e espaçamento (múltiplos de 8) */
  --k-e1: 8px; --k-e2: 16px; --k-e3: 24px; --k-e4: 32px; --k-e5: 48px;

  /* textura leve (ruído por filtro SVG em data URI, aplicada em multiply com baixa opacidade) */
  --k-textura: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .18  0 0 0 0 .1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Kit visual — peças e layouts. Depende de tokens.css. Só CSS/HTML/SVG.
   Convenção: prefixo k-. Um objeto ilustrado por conceito; rótulos curtos. */

.k-tela { background: var(--k-fundo); color: var(--k-marrom); font-family: var(--k-fonte);
  padding: var(--k-e4) var(--k-e3); border-radius: var(--k-raio-lg); line-height: 1.35; }
.k-tela *, .k-tela *::before, .k-tela *::after { box-sizing: border-box; }

/* textura leve em peças de argila (aplicar .k-argila) */
.k-argila { position: relative; }
.k-argila::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: var(--k-textura); mix-blend-mode: multiply; opacity: .10; }

/* ---------- 1. placa de título ---------- */
.k-placa { position: relative; background: linear-gradient(180deg, #A8624B, var(--k-terracota));
  color: var(--k-texto-claro); border-radius: var(--k-raio-lg); padding: var(--k-e3) var(--k-e5);
  font: 800 clamp(1.25rem, 3.2vw, 2rem)/1.15 var(--k-fonte-titulo); text-align: center;
  box-shadow: var(--k-sombra-argila); text-shadow: 0 2px 2px rgba(60, 25, 15, .35); }
.k-placa::before, .k-placa::after { content: ""; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  border: 6px solid var(--k-terracota-esc); box-shadow: inset 0 2px 2px rgba(255, 255, 255, .3); }
.k-placa::before { left: 10px; top: 10px; }
.k-placa::after { right: 10px; bottom: 10px; }
.k-placa > * { position: relative; z-index: 1; }

/* ---------- 1b. faixa (pergaminho) ---------- */
.k-faixa { position: relative; background: linear-gradient(180deg, #E9C9AA, var(--k-pergaminho));
  color: var(--k-marrom); border-radius: var(--k-raio-sm); padding: var(--k-e2) var(--k-e5);
  font: 800 clamp(1.1rem, 2.6vw, 1.5rem)/1.15 var(--k-fonte-titulo); text-align: center;
  box-shadow: var(--k-sombra-suave); margin: 0 14px; }
.k-faixa::before, .k-faixa::after { content: ""; position: absolute; top: -8px; bottom: -8px; width: 22px;
  background: linear-gradient(90deg, #D2AB88, #E9C9AA); border-radius: 12px; box-shadow: var(--k-sombra-suave); }
.k-faixa::before { left: -14px; }
.k-faixa::after { right: -14px; }

/* ---------- 2. cartão de conceito com ícone ---------- */
.k-cartao { position: relative; background: var(--k-creme); border-radius: var(--k-raio); padding: var(--k-e3) var(--k-e2) var(--k-e2);
  box-shadow: var(--k-sombra-suave); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--k-e1); }
.k-icone { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: var(--k-texto-claro);
  background: radial-gradient(circle at 35% 28%, #B9735B, var(--k-terracota) 70%); box-shadow: var(--k-sombra-argila); }
.k-icone svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 1px rgba(60, 25, 15, .35)); }
.k-icone.-verde { background: radial-gradient(circle at 35% 28%, #5A8886, var(--k-verde) 70%); }
.k-rotulo { display: inline-block; background: var(--k-creme-rotulo); color: var(--k-marrom); border-radius: var(--k-raio-pilula);
  padding: 6px 16px; font: 700 1rem/1.2 var(--k-fonte); box-shadow: var(--k-sombra-suave); max-width: 100%; }
.k-legenda { margin: 0; font-size: .875rem; color: var(--k-marrom-2); max-width: 22ch; }

/* ---------- 3. par A vs B ---------- */
.k-par { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--k-e2); align-items: center; }
.k-vs { background: var(--k-creme-rotulo); color: var(--k-marrom); border-radius: var(--k-raio-pilula); padding: 2px 16px;
  font: 800 1.5rem/1.1 var(--k-fonte); box-shadow: var(--k-sombra-suave); white-space: nowrap; }
.k-cartao.-a .k-rotulo { background: var(--k-terracota); color: var(--k-texto-claro); }
.k-cartao.-b .k-rotulo { background: var(--k-verde); color: var(--k-texto-claro); }

/* ---------- 4. caminho sinuoso (SVG; três traços: sombra, base, realce) ---------- */
.k-caminho { display: block; width: 100%; height: 100%; overflow: visible; }
.k-caminho path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.k-caminho .sombra { stroke: rgba(90, 45, 30, .28); stroke-width: 26px; transform: translate(0, 5px); }
.k-caminho .base { stroke: var(--k-caminho); stroke-width: 22px; }
.k-caminho .realce { stroke: #F9EADB; stroke-width: 5px; transform: translate(-3px, -4px); opacity: .85; }

/* ---------- 5. seta / conector ---------- */
.k-seta { width: 72px; height: 32px; flex: none; overflow: visible; }
.k-seta .sombra { stroke: rgba(90, 45, 30, .28); transform: translate(0, 3px); }
.k-seta .base { stroke: var(--k-terracota); }
.k-seta path { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.k-conector { stroke: var(--k-terracota); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 11; vector-effect: non-scaling-stroke; }

/* ---------- 6. selo circular (letra ou número) ---------- */
.k-selo { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: radial-gradient(circle at 35% 28%, #B9735B, var(--k-terracota) 70%); color: var(--k-texto-claro);
  font: 800 1.5rem/1 var(--k-fonte-titulo); box-shadow: var(--k-sombra-argila); text-shadow: 0 2px 2px rgba(60, 25, 15, .35); }
.k-selo.-verde { background: radial-gradient(circle at 35% 28%, #5A8886, var(--k-verde) 70%); }

/* ---------- 7. balão de legenda ---------- */
.k-balao { position: relative; background: var(--k-creme); color: var(--k-marrom); border-radius: var(--k-raio); padding: 12px 18px;
  font: 600 .95rem/1.3 var(--k-fonte); box-shadow: var(--k-sombra-suave); max-width: 30ch; }
.k-balao::after { content: ""; position: absolute; left: 28px; bottom: -9px; width: 20px; height: 20px; background: var(--k-creme);
  transform: rotate(45deg); border-radius: 0 0 6px 0; box-shadow: 3px 3px 4px rgba(60, 25, 15, .08); }

/* estado "em leitura" (quando a peça for ligada ao texto) e movimento sutil e opcional */
.k-ativo { outline: 4px solid var(--k-marrom); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .k-sutil { animation: k-flutuar 6s ease-in-out infinite; }
  @keyframes k-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
}

/* =========================================================
   LAYOUTS-MODELO
   ========================================================= */

/* L1 — duas colunas com caminho central */
.l-duas { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 104px; row-gap: var(--k-e3); }
.l-duas .k-placa, .l-duas .k-faixa { min-height: 76px; display: grid; place-items: center; }
.l-duas .col { display: flex; flex-direction: column; gap: var(--k-e3); position: relative; z-index: 1; }
.l-duas .caminho { position: absolute; left: 50%; top: 0; bottom: 0; width: 96px; transform: translateX(-50%); z-index: 0; }

/* L2 — hub e satélites (caixa proporcional; linhas em SVG atrás) */
.l-hub { position: relative; width: 100%; aspect-ratio: 4 / 3; max-width: 760px; margin: 0 auto; }
.l-hub .linhas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.l-hub .centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 27%; z-index: 2; }
.l-hub .centro .k-placa { border-radius: 50%; aspect-ratio: 1; display: grid; place-items: center; padding: 8px; font-size: clamp(.95rem, 2vw, 1.3rem); }
.l-hub .centro .k-placa::before, .l-hub .centro .k-placa::after { display: none; }
.l-hub .sat { position: absolute; width: 27%; transform: translate(-50%, -50%); z-index: 2; }
.l-hub .sat.s1 { left: 16%; top: 20%; } .l-hub .sat.s2 { left: 84%; top: 20%; }
.l-hub .sat.s3 { left: 16%; top: 80%; } .l-hub .sat.s4 { left: 84%; top: 80%; }
.l-hub .k-cartao { padding: var(--k-e2) var(--k-e1); }
.l-hub .k-icone { width: 56px; height: 56px; } .l-hub .k-icone svg { width: 30px; height: 30px; }

/* L3 — etapas em sequência */
.l-etapas { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: var(--k-e2); }
.l-etapas .etapa { position: relative; flex: 1 1 150px; max-width: 220px; padding-top: 28px; }
.l-etapas .etapa .k-selo { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; }
.l-etapas .etapa .k-cartao { height: 100%; padding-top: 36px; }
.l-etapas .k-seta { align-self: center; }

/* L4 — comparação A vs B (colunas com linhas de critérios) */
.l-comp { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--k-e2); align-items: start; }
.l-comp .lado { display: flex; flex-direction: column; gap: var(--k-e2); align-items: stretch; }
.l-comp .lado .k-placa.-verde { background: linear-gradient(180deg, #4E7C7A, var(--k-verde)); }
.l-comp .linha { background: var(--k-creme); border-radius: var(--k-raio-sm); padding: 12px 16px; box-shadow: var(--k-sombra-suave);
  display: flex; align-items: center; gap: 12px; font-weight: 600; }
.l-comp .linha .k-rotulo { flex: none; font-size: .8rem; padding: 3px 10px; }
.l-comp .meio { align-self: center; }

/* L5 — tabela ilustrada (tabela HTML real; números e valores ficam em texto) */
.l-tabela { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.l-tabela caption { text-align: left; font: 800 1.25rem/1.2 var(--k-fonte-titulo); padding-bottom: var(--k-e1); }
.l-tabela th, .l-tabela td { padding: 12px 16px; text-align: left; }
.l-tabela thead th { background: var(--k-terracota); color: var(--k-texto-claro); font-weight: 800; }
.l-tabela thead th:first-child { border-radius: var(--k-raio-sm) 0 0 var(--k-raio-sm); }
.l-tabela thead th:last-child { border-radius: 0 var(--k-raio-sm) var(--k-raio-sm) 0; }
.l-tabela tbody th, .l-tabela tbody td { background: var(--k-creme); }
.l-tabela tbody tr th:first-child { border-radius: var(--k-raio-sm) 0 0 var(--k-raio-sm); display: flex; align-items: center; gap: 12px; }
.l-tabela tbody tr td:last-child { border-radius: 0 var(--k-raio-sm) var(--k-raio-sm) 0; }
.l-tabela .k-icone { width: 40px; height: 40px; flex: none; } .l-tabela .k-icone svg { width: 22px; height: 22px; }

/* L6 / modo D — sequência progressiva (estilo G3): caixas e linhas que entram conforme a frase avança */
.k-formando { background: transparent; border: 3px dashed var(--k-terracota); box-shadow: none; }   /* tracejado = em formação */
.k-formando .k-rotulo { background: transparent; box-shadow: none; }
.k-ponto { width: 30px; height: 30px; border-radius: 50%; flex: none;                              /* única cor de destaque */
  background: radial-gradient(circle at 35% 28%, #F0A25C, var(--k-destaque) 70%); box-shadow: var(--k-sombra-argila); }
.k-entra { }  /* sem JavaScript (classe .js ausente) tudo fica visível: nada se esconde para sempre */
/* Com JavaScript (a página adiciona a classe js ao <html>): elementos futuros ficam ESMAECIDOS, mas legíveis
   (texto/cartão ~5,7:1 a 80% de opacidade; contorno ~3,3:1 sobre o fundo bege, para não sumir em telas claras). */
.js .k-entra { opacity: .8; filter: grayscale(.6); outline: 2px solid rgba(92, 47, 33, .6); outline-offset: 2px;
  transition: opacity .35s, filter .35s, outline-color .35s; }
.js .k-entra.k-visivel { opacity: 1; filter: none; outline-color: transparent; }
.js svg.k-entra, .js .k-entra.k-formando { outline: none; }  /* linhas não levam contorno; o tracejado já marca o "em formação" */
@media (prefers-reduced-motion: reduce) { .js .k-entra, .js .k-entra.k-visivel { transition: none; } }  /* troca de estado sem efeito */
.l-prog { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--k-e2); }
.l-prog .caixa { min-width: 140px; max-width: 200px; flex: 1 1 140px; }
.l-prog .lig { width: 56px; height: 20px; flex: none; }
.l-prog .alvo { flex-direction: row; align-items: center; justify-content: center; gap: 10px; }
.l-prog-controles { display: flex; gap: 12px; justify-content: center; margin-top: var(--k-e3); }
.l-prog-controles button { font: 700 .95rem var(--k-fonte); color: var(--k-marrom); background: var(--k-creme-rotulo); border: 0; border-radius: var(--k-raio-pilula); padding: 8px 18px; box-shadow: var(--k-sombra-suave); cursor: pointer; }
.l-prog-controles button:focus-visible { outline: 3px solid var(--k-marrom); outline-offset: 2px; }

/* L7 — lista de tópicos (sem ordem entre os itens; sem selos numerados; só o arranjo, com as peças do kit) */
.l-lista { display: flex; flex-direction: column; gap: var(--k-e3); }
.l-lista .cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--k-e2); }
.l-lista .itens { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k-e2); list-style: none; margin: 0; padding: 0; }
.l-lista .item { background: var(--k-creme); border-radius: var(--k-raio); padding: 16px 18px; box-shadow: var(--k-sombra-suave);
  display: flex; align-items: center; gap: 12px; font: 700 1rem/1.25 var(--k-fonte); color: var(--k-marrom); }
.l-lista .item::before { content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none;      /* marcador neutro: não é número */
  background: radial-gradient(circle at 35% 28%, #B9735B, var(--k-terracota) 70%); box-shadow: var(--k-sombra-argila); }

/* telas estreitas */
@media (max-width: 640px) {
  .k-tela { padding: var(--k-e3) var(--k-e2); }
  .l-duas { grid-template-columns: 1fr; gap: var(--k-e3); } .l-duas .caminho { display: none; }
  .l-comp, .k-par { grid-template-columns: 1fr; } .l-comp .meio, .k-par .k-vs { justify-self: center; }
  .l-etapas { flex-direction: column; align-items: center; }
  .l-etapas .etapa { flex: none; width: 100%; max-width: 260px; }
  .l-etapas .k-seta { transform: rotate(90deg); }
  .l-prog { flex-direction: column; } .l-prog .lig { transform: rotate(90deg); }
  .l-prog .caixa { flex: none; width: 100%; max-width: 260px; }
  .l-lista .itens { grid-template-columns: 1fr; }
  .l-hub { aspect-ratio: 3 / 4; } .l-hub .centro { width: 46%; } .l-hub .sat { width: 40%; }
  .l-hub .sat.s1 { left: 22%; top: 15%; } .l-hub .sat.s2 { left: 78%; top: 15%; }
  .l-hub .sat.s3 { left: 22%; top: 85%; } .l-hub .sat.s4 { left: 78%; top: 85%; }
  .l-hub .k-legenda { display: none; }
}