/* K.O. Knowledge Owners - camada v2 (22/10/2026)
   Vem DEPOIS do ko-base.css e so sobrescreve. Direcao "Knockout": poster de luta.
   Canto reto, sombra dura deslocada (nada de sombra borrada), papel com grao, selo que e carimbo
   e rabisco a mao (o mesmo traco do logo) para marcar o que importa.
   Movimento mora em js/ko-motion.js. Sem JS ou com reduced-motion, a pagina e esta, parada e completa. */

:root {
  --raio: 0px;
  --sombra-passo: 6px;
  --sombra-tinta: var(--sombra-passo) var(--sombra-passo) 0 var(--tinta);
  --sombra-violeta: var(--sombra-passo) var(--sombra-passo) 0 var(--violeta);
  --sombra-papel: var(--sombra-passo) var(--sombra-passo) 0 var(--papel);
  --canto: 22px;
  --grao: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* ---------- no-ar v2: o que entra de lado (rounds, soco) nao pode abrir rolagem lateral no celular ---------- */
main { overflow-x: clip; }

/* ---------- papel com grao ---------- */
.faixa--papel { background-color: var(--papel); background-image: var(--grao); }

/* ---------- cantos em L: tamanho vira variavel (o motion desenha eles) ---------- */
.cantos::before, .cantos::after { width: var(--canto); height: var(--canto); }
@media (max-width: 719px) { :root { --canto: 14px; } .cantos::before, .cantos::after { width: var(--canto); height: var(--canto); } }

/* ---------- selo = carimbo ---------- */
.selo {
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--noite), 3px 3px 0 1.5px var(--acento);
}

/* ---------- botoes com sombra dura: sobe no hover, afunda no clique ---------- */
.btn {
  border-radius: 0;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.btn--acento, .btn--papel { box-shadow: 4px 4px 0 var(--papel); }
.faixa--papel .btn--acento, .form-cartao .btn--acento { box-shadow: 4px 4px 0 var(--tinta); }
.btn--acento:hover, .btn--papel:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--papel); }
.faixa--papel .btn--acento:hover, .form-cartao .btn--acento:hover { box-shadow: 6px 6px 0 var(--tinta); }
.btn:active, .btn--acento:active, .btn--papel:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--papel); }
.faixa--papel .btn--acento:active, .form-cartao .btn--acento:active { box-shadow: 1px 1px 0 var(--tinta); }
.btn--contorno { border-width: 2px; }

/* ---------- cartoes: borda de verdade e sombra deslocada ---------- */
.cartao { border-radius: 0; }
.faixa--papel .cartao { background: #FBF9F4; border: 2px solid var(--tinta); box-shadow: var(--sombra-tinta); }
.faixa--noite .cartao, .faixa--noite-2 .cartao { border: 1.5px solid rgba(244, 241, 234, .28); box-shadow: var(--sombra-violeta); }
.cartao .etiqueta { border-radius: 0; border-width: 1.5px; }

/* ---------- formulario: o cartao de papel "pousa" com sombra violeta ---------- */
.form-cartao { border-radius: 0; box-shadow: 8px 8px 0 var(--violeta); }
.campo input { border-radius: 0; border-width: 2px; border-color: #A9A397; }
.campo input:focus { border-color: var(--tinta); box-shadow: 4px 4px 0 var(--violeta); }

/* ---------- etiquetas de fato (eram pills) ---------- */
.fatos li { border-radius: 0; border-width: 1.5px; }

/* ---------- capa ---------- */
.heroi-capa { perspective: 1200px; }
.heroi-capa .capa-palco { position: relative; transform-style: preserve-3d; will-change: transform; }
.heroi-capa img { border-radius: 2px; }

/* ---------- rabisco a mao (desenhado pelo ko-motion.js) ---------- */
.rabiscado { position: relative; display: inline-block; white-space: nowrap; }
.rabisco {
  position: absolute; left: -4%; width: 108%; height: .34em; bottom: -.12em;
  overflow: visible; pointer-events: none;
}
.rabisco path { fill: none; stroke: var(--violeta); stroke-linecap: round; stroke-linejoin: round; }
.faixa--papel .rabisco path { stroke: var(--violeta-escuro); }

/* ---------- motion: so esconde o que o JS vai revelar, e so quando o JS esta de pe ---------- */
.km .heroi .marca-barra img,
.km .heroi .selo,
.km .heroi .serie-linha,
.km .heroi h1,
.km .heroi .lead,
.km .heroi .fatos li,
.km .heroi .form-cartao,
.km .heroi .heroi-capa { visibility: hidden; }