/* KlipTok v132 · Calculadoras de animales y criaturas — diseño de la infografía (banner morado, paneles por categoría, tarjetas ilustradas). */
.kc2{--ink:#1b1f3b;--mute:#5b6285;--card:#fff;--line:#e4e8f5;--acc:#6d3df5;--acc2:#ec4899;--gold:#ffc83d;
  color:var(--ink);font:14px/1.45 "Nunito","Trebuchet MS",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;max-width:1240px;margin:0 auto;padding:.4rem 0 2rem}
.kc2 *{box-sizing:border-box}
.kc2 [hidden]{display:none!important}
html.dark .kc2{--ink:#eceeff;--mute:#a4abd0;--card:#161c3d;--line:#2a3262}
.kc2 button{font:inherit;cursor:pointer}
.kc2 :focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---- banner ---- */
.kc2-hero{position:relative;display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1.5fr) minmax(0,1fr) minmax(0,.8fr);gap:14px;align-items:center;padding:16px 18px;border-radius:26px;color:#fff;overflow:hidden;
  background:radial-gradient(900px 300px at 85% 0,rgba(236,72,153,.45),transparent 60%),linear-gradient(110deg,#4527a0 0%,#6d28d9 45%,#9333ea 100%);box-shadow:0 10px 30px rgba(76,29,149,.28)}
.kc2-hero-art{width:100%;max-width:230px;height:auto;border-radius:20px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.kc2-hero-tx h1{margin:0;font:900 clamp(1.7rem,3.2vw,2.6rem)/1.05 "Baloo 2","Nunito","Trebuchet MS",system-ui,sans-serif;letter-spacing:.2px;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.kc2-hero-tx h1 span{display:block;margin-top:.25rem;font-size:.78em;color:var(--gold)}
.kc2-hero-tx p{margin:.7rem 0 0;max-width:34em;color:#ede9ff;font-weight:600}
.kc2-hero-box{align-self:stretch;background:#fff;color:#1b1f3b;border-radius:18px;padding:14px 16px;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.kc2-hero-box.pink{background:#ffe9f3}
.kc2-hero-box h3{margin:0 0 .35rem;font:900 1rem/1.2 "Nunito","Trebuchet MS",system-ui,sans-serif;color:#4527a0}.kc2-hero-box.pink h3{color:#c2185b}
.kc2-hero-box p{margin:0;font-size:.82rem;color:#3b3f63}
@media(max-width:1020px){.kc2-hero{grid-template-columns:150px 1fr}.kc2-hero-box{grid-column:1/-1}}
@media(max-width:560px){.kc2-hero{grid-template-columns:1fr;text-align:center}.kc2-hero-art{max-width:150px;margin:0 auto}}

/* ---- cabecera de tipos + filtros ---- */
.kc2-types{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:16px 0 8px;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:18px}
.kc2-types-i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#e0ecff;color:#2563eb;font-size:24px}
.kc2-types h2{margin:0;font:900 1.15rem/1.1 "Nunito","Trebuchet MS",system-ui,sans-serif;letter-spacing:.3px}.kc2-types p{margin:.15rem 0 0;font-size:.82rem;color:var(--mute);max-width:46em}
.kc2-chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.kc2-chips button{padding:.4rem .85rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:800;font-size:.8rem}
.kc2-chips button[aria-pressed=true]{background:linear-gradient(100deg,#6d3df5,#ec4899);border-color:transparent;color:#fff}

/* ---- paneles por categoría ---- */
.kc2-sec{margin:14px 0;padding:14px 16px 16px;border-radius:22px;border:1px solid var(--bd);background:var(--bg)}
.kc2-sec.real{--bg:#e8f4fe;--bd:#cfe6fb;--tt:#1565c0}.kc2-sec.myth{--bg:#f2eafd;--bd:#dccaf7;--tt:#6a1b9a}.kc2-sec.social{--bg:#e4f8ec;--bd:#c4eed5;--tt:#1b7f4a}
html.dark .kc2-sec.real{--bg:#10233d;--bd:#1d3c66;--tt:#7db8ff}html.dark .kc2-sec.myth{--bg:#231638;--bd:#41286a;--tt:#d0a8ff}html.dark .kc2-sec.social{--bg:#0f2a1f;--bd:#1d5238;--tt:#6ee7a6}
.kc2-sec>header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.kc2-sec-i{font-size:26px}
.kc2-sec h2{margin:0;font:900 1.2rem/1.1 "Nunito","Trebuchet MS",system-ui,sans-serif;color:var(--tt)}.kc2-sec header p{margin:.1rem 0 0;font-size:.8rem;color:var(--mute)}
.kc2-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(104px,1fr);gap:9px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.kc2-sec.social .kc2-row{grid-auto-columns:minmax(128px,1fr)}
.kc2-row.wrap{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-auto-columns:auto;overflow:visible}
@media(min-width:1100px){.kc2-sec.myth .kc2-row,.kc2-sec.real .kc2-row{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));grid-auto-columns:auto}.kc2-sec.social .kc2-row{grid-auto-flow:row;grid-template-columns:repeat(8,1fr);grid-auto-columns:auto}}
.kc2-card{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:0 0 9px;text-align:center;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 8px rgba(30,40,90,.08);transition:transform .16s,box-shadow .16s}
.kc2-card:hover,.kc2-card:focus-visible{transform:translateY(-4px);box-shadow:0 10px 20px rgba(60,40,140,.2)}
.kc2-card b{padding:0 6px;font:900 .84rem/1.15 "Nunito","Trebuchet MS",system-ui,sans-serif;margin-top:3px}
.kc2-card small{padding:0 6px;font-size:.7rem;color:var(--mute);line-height:1.2}
.kc2-img{display:block;width:100%;aspect-ratio:1/.93;object-fit:cover;background:linear-gradient(135deg,#fde68a,#fbcfe8)}
.kc2-sec.social .kc2-img{aspect-ratio:1/.62;object-fit:contain;background:linear-gradient(160deg,#e9ffd8,#c6f3e2);padding:6px}
.kc2-emo{display:grid;place-items:center;font-size:2.4rem;background:linear-gradient(135deg,#ede9fe,#fce7f3)}

/* ---- paneles informativos ---- */
.kc2-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:14px 0}
.kc2-info section{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.kc2-info h3{margin:0 0 .5rem;font:900 1rem/1.2 "Nunito","Trebuchet MS",system-ui,sans-serif;color:var(--acc)}
.kc2-info ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.kc2-info li{position:relative;padding-left:22px;font-size:.84rem;color:var(--mute)}
.kc2-info li:before{content:"✓";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#22c55e;color:#fff;font-size:11px;line-height:16px;text-align:center}

/* ---- banner final ---- */
.kc2-end{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:14px;align-items:center;padding:20px 22px;border-radius:24px;color:#fff;text-align:center;background:linear-gradient(160deg,#4a1d96 0%,#7c3aed 55%,#db2777 130%);box-shadow:0 10px 26px rgba(76,29,149,.3)}
.kc2-end h2{margin:0;font:900 clamp(1.4rem,2.6vw,2rem)/1.1 "Baloo 2","Nunito",system-ui,sans-serif}.kc2-end p{margin:.2rem 0 0;font-weight:700}
.kc2-end-l{transform:rotate(-5deg);font-style:italic;font-weight:700;color:#f3e8ff}
.kc2-end-r{transform:rotate(4deg);background:var(--gold);color:#3b2a00;padding:12px 16px;border-radius:22px;font-weight:900;font-style:italic}
.kc2-av{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.kc2-av img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:3px solid #fff;background:#fff}.kc2-av i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#7c3aed;font:900 24px/1 system-ui}
@media(max-width:760px){.kc2-end{grid-template-columns:1fr}.kc2-end-l,.kc2-end-r{transform:none}}

/* ---- ejecución del test ---- */
.kc2-back{margin:0 0 8px;padding:.35rem .8rem;border:0;border-radius:999px;background:rgba(109,61,245,.12);color:var(--acc);font-weight:800}
.kc2-run{max-width:760px;margin:0 auto;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 8px 24px rgba(40,30,100,.1)}
.kc2-run-h{display:flex;align-items:center;gap:14px;margin-bottom:10px}.kc2-run-h h2{margin:0;font:900 1.35rem/1.15 "Nunito","Trebuchet MS",system-ui,sans-serif}.kc2-run-h p{margin:.15rem 0 0;color:var(--mute)}
.kc2-run-img{width:76px;height:76px;border-radius:18px;object-fit:cover;flex:none}
.kc2-bar{height:8px;border-radius:9px;background:rgba(109,61,245,.14);margin:6px 0 14px}.kc2-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#6d3df5,#ec4899);transition:width .25s}
.kc2-q{margin:.2rem 0 .8rem;font:900 1.15rem/1.3 "Nunito","Trebuchet MS",system-ui,sans-serif}
.kc2-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:9px;margin:.4rem 0 1rem}
.kc2-opt{padding:.8rem 1rem;border-radius:14px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-weight:800;text-align:left;transition:border-color .12s,transform .12s}
.kc2-opt:hover{border-color:var(--acc);transform:translateY(-1px)}.kc2-opt.on{background:linear-gradient(100deg,#6d3df5,#8b5cf6);border-color:transparent;color:#fff}
.kc2 input:not([type=checkbox]){width:100%;max-width:420px;padding:.7rem .9rem;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:inherit}
.kc2 input:focus{border-color:var(--acc);outline:0}
.kc2-lab{display:grid;gap:5px;margin:.6rem 0;font-weight:800}
.kc2-mode{display:flex;gap:8px;flex-wrap:wrap;margin:.8rem 0}.kc2-mode button{padding:.55rem 1rem;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font-weight:800}.kc2-mode button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.kc2-names{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}.kc2-names input{max-width:none}
.kc2-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.kc2-btn{padding:.7rem 1.4rem;border-radius:999px;border:0;background:linear-gradient(100deg,#6d3df5,#ec4899);color:#fff;font-weight:900;box-shadow:0 4px 12px rgba(109,61,245,.35)}.kc2-btn.ghost{background:rgba(109,61,245,.12);color:var(--acc);box-shadow:none}
.kc2-err{min-height:1.2em;margin:.4rem 0 0;color:#dc2626;font-size:.85rem;font-weight:700}
.kc2-sub{margin:.4rem 0;color:var(--mute)}.kc2-sub.c{text-align:center}
.kc2-mid{text-align:center}.kc2-mid h2{margin:.2rem 0;font:900 1.4rem/1.2 "Nunito","Trebuchet MS",system-ui,sans-serif}.kc2-mid .kc2-act{justify-content:center}.kc2-link{margin:.6rem auto;display:block;text-align:center}

/* ---- resultados ---- */
.kc2-res{text-align:center;max-width:620px;margin:0 auto;padding:22px 18px;border-radius:24px;background:linear-gradient(160deg,rgba(109,61,245,.1),rgba(236,72,153,.12));border:1px solid var(--line)}
.kc2-res-img{width:130px;height:130px;border-radius:26px;object-fit:cover;margin:0 auto 6px;display:block}
.kc2-res small{display:block;color:var(--mute);font-weight:800}
.kc2-res strong{display:block;font:900 3rem/1.05 "Nunito","Trebuchet MS",system-ui,sans-serif;color:var(--acc)}.kc2-res span{color:var(--mute);font-weight:700}
.kc2-res em{display:block;margin-top:.3rem;font:900 1.25rem/1.2 "Nunito","Trebuchet MS",system-ui,sans-serif;font-style:normal;color:var(--acc2)}.kc2-res em.big{font-size:1.7rem;margin-bottom:.2rem}
.kc2-res p{margin:.5rem 0 0}
.kc2-vs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.kc2-vs-t{text-align:center;font:900 1.25rem/1.2 "Nunito","Trebuchet MS",system-ui,sans-serif}
.kc2-traits{max-width:620px;margin:12px auto 0;display:grid;gap:7px}
.kc2-trait{display:grid;grid-template-columns:110px 1fr 46px;gap:8px;align-items:center;font-weight:800;font-size:.85rem}.kc2-trait>div{height:10px;border-radius:9px;background:rgba(109,61,245,.14);overflow:hidden}.kc2-trait i{display:block;height:100%;background:linear-gradient(90deg,#6d3df5,#ec4899)}.kc2-trait b{text-align:right}
.kc2-how{max-width:620px;margin:12px auto 0;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:.85rem}.kc2-how summary{cursor:pointer;font-weight:900;color:var(--acc)}
.kc2-tb{width:100%;border-collapse:collapse;margin-top:6px}.kc2-tb td,.kc2-tb th{padding:4px 6px;border-bottom:1px solid var(--line);text-align:left}.kc2-tb td:last-child,.kc2-tb th:last-child{text-align:right;font-weight:800}
.kc2-ring{--p:50;width:150px;height:150px;margin:10px auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ec4899 calc(var(--p)*1%),rgba(109,61,245,.15) 0)}.kc2-ring b{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--card);font:900 2.1rem/1 "Nunito","Trebuchet MS",system-ui,sans-serif;color:var(--acc)}
.kc2-lv{display:block;font:900 1.3rem/1.2 "Nunito","Trebuchet MS",system-ui,sans-serif;font-style:normal;color:var(--acc2)}
@media(prefers-reduced-motion:reduce){.kc2 *{transition:none!important}}

/* la Red social limita el ancho a 780px: la portada de calculadoras necesita todo el ancho */
.k54:has(.kc2){max-width:1280px}
.kc2-res~.kc2-act,.kc2-how~.kc2-act{justify-content:center;max-width:620px;margin-inline:auto}