/* ================================================================
   Iconos de sección — KAP.iconos (09-oct-2026)
   Placa de grafito de marca (#151c25 → #090b0f) con hilo dorado y el
   dibujo en el degradado de su acento. Solo colores de /marca:
   oro, verde (--ok), rojo (--mal) y azul claro (--azul-claro).
   Movimiento: brillo diagonal que pasa solo cada pocos segundos, y una
   animación propia de cada icono al pasar, al tocar, en la sección
   activa y en el título. Con «reducir movimiento» todo queda quieto.
   ================================================================ */
.kico{
  --kc:url(#kgOro); --kb:rgba(242,200,59,.34); --kg:rgba(242,200,59,.45);
  display:inline-grid; place-items:center; flex:none; position:relative; overflow:hidden;
  width:30px; height:30px; border-radius:9px; vertical-align:middle;
  background:radial-gradient(120% 90% at 30% 0%, #1a2230 0%, #151c25 45%, #090b0f 100%);
  border:1px solid var(--kb);
  box-shadow:0 2px 6px rgba(12,17,24,.30), inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s cubic-bezier(.22,1,.36,1);
}
.kico svg{ width:74%; height:74%; overflow:visible; position:relative; z-index:1; }
.kico .p{ fill:var(--kc); }
.kico .l{ stroke:var(--kc); stroke-linecap:round; stroke-linejoin:round; }
.kico .s{ fill:#fff; }
.kico .d{ fill:#0a0c10; }
.kico-verde{ --kc:url(#kgVerde); --kb:rgba(34,197,94,.40); --kg:rgba(34,197,94,.45); }
.kico-rojo { --kc:url(#kgRojo);  --kb:rgba(222,67,58,.42); --kg:rgba(222,67,58,.45); }
.kico-azul { --kc:url(#kgAzul);  --kb:rgba(78,147,192,.45); --kg:rgba(78,147,192,.5); }

/* Tamaños */
.kico-md{ width:44px; height:44px; border-radius:13px; }
.kico-lg{ width:46px; height:46px; border-radius:14px; }
.kico-xl{ width:58px; height:58px; border-radius:17px; }
.kico-md svg, .kico-lg svg, .kico-xl svg{ width:68%; height:68%; }

/* Brillo diagonal que cruza la placa de vez en cuando (desfasado por icono) */
.kico::after{
  content:''; position:absolute; inset:-30%; z-index:2; pointer-events:none;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.26) 50%, transparent 58%);
  transform:translateX(-120%); animation:kicoBrillo 7s cubic-bezier(.22,1,.36,1) infinite; animation-delay:var(--kd, 0s);
}
@keyframes kicoBrillo{ 0%, 78%{ transform:translateX(-120%); } 92%, 100%{ transform:translateX(120%); } }

/* Cuándo «juega» cada icono */
.nav-item:hover .kico, .nav-item:focus-visible .kico, .acc-kap:hover .kico, .acc-kap:focus-visible .kico{
  transform:translateY(-1px) scale(1.08); box-shadow:0 6px 16px var(--kg), inset 0 1px 0 rgba(255,255,255,.12);
}
.nav-item.active .kico, .bn-item.active .kico{ box-shadow:0 0 0 2px rgba(242,200,59,.35), 0 6px 18px var(--kg); }
.con-kico{ display:flex; align-items:center; gap:12px; }
.con-kico .kico{ animation:kicoEntra .6s cubic-bezier(.3,1.5,.5,1) both; box-shadow:0 8px 22px var(--kg), inset 0 1px 0 rgba(255,255,255,.12); }
@keyframes kicoEntra{ from{ transform:scale(.4) rotate(-12deg); opacity:0; } to{ transform:none; opacity:1; } }

/* Piezas animadas. Cada ciclo se mueve al principio y descansa el resto:
   repetido, se ve como un gesto de vez en cuando, no como un parpadeo. */
.kico [class*="a-"]{ transform-box:fill-box; transform-origin:center; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico [class*="a-"]{
  animation-duration:3.2s; animation-iteration-count:infinite; animation-timing-function:cubic-bezier(.22,1,.36,1);
  animation-delay:var(--kd, 0s);
}
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-techo{ animation-name:kSalta; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-luz{ animation-name:kLate; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-sube{ animation-name:kSube; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-cae{ animation-name:kCae; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-porcion{ animation-name:kPorcion; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-check{ animation-name:kTrazo; stroke-dasharray:40; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-tarjeta{ animation-name:kInclina; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-columnas{ animation-name:kColumnas; transform-origin:bottom; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-chispa{ animation-name:kChispa; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-punto{ animation-name:kLatePunto; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-chancho{ animation-name:kMenea; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-moneda{ animation-name:kMoneda; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-flecha{ animation-name:kDiana; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-hoja1{ animation-name:kHojaI; transform-origin:right bottom; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-hoja2{ animation-name:kHojaD; transform-origin:left bottom; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-aguja{ animation-name:kAguja; transform-origin:left bottom; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-medalla{ animation-name:kGira; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-borla{ animation-name:kBorla; transform-origin:top; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-p1{ animation-name:kEscribe; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-p2{ animation-name:kEscribe; animation-delay:calc(var(--kd, 0s) + .15s); }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-p3{ animation-name:kEscribe; animation-delay:calc(var(--kd, 0s) + .3s); }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-renglones{ animation-name:kRenglones; transform-origin:left; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-hoja{ animation-name:kAsoma; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico :is(.a-b1, .a-b2, .a-b3){ animation-name:kBarra; transform-origin:bottom; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-b2{ animation-delay:calc(var(--kd, 0s) + .12s); }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-b3{ animation-delay:calc(var(--kd, 0s) + .24s); }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-teclas{ animation-name:kLate; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-cabeza{ animation-name:kSalta; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-engranaje{ animation-name:kGira; }
:is(.nav-item:hover, .nav-item:focus-visible, .nav-item.active, .bn-item.active, .acc-kap, .rapida-kap, .con-kico, .kico-juega) .kico .a-mas{ animation-name:kGiraCuarto; }
.nav-mas[open] > summary .kico .a-mas{ transform:rotate(45deg); }

@keyframes kSalta{ 0%{ transform:none; } 8%{ transform:translateY(-12%) scale(1.04,.96); } 16%{ transform:translateY(0) scale(.98,1.03); } 24%, 100%{ transform:none; } }
@keyframes kLate{ 0%, 30%, 100%{ opacity:1; transform:none; } 12%{ opacity:.55; transform:scale(1.18); } }
@keyframes kSube{ 0%{ transform:translateY(18%); opacity:.3; } 18%{ transform:translateY(-6%); opacity:1; } 28%, 100%{ transform:none; opacity:1; } }
@keyframes kCae{ 0%{ transform:translateY(-30%); opacity:0; } 14%{ opacity:1; } 30%{ transform:translateY(150%); opacity:0; } 31%{ transform:translateY(-30%); opacity:0; } 42%, 100%{ transform:none; opacity:1; } }
@keyframes kPorcion{ 0%, 34%, 100%{ transform:none; } 14%, 24%{ transform:translate(9%, -9%); } }
@keyframes kTrazo{ 0%{ stroke-dashoffset:40; } 22%, 100%{ stroke-dashoffset:0; } }
@keyframes kInclina{ 0%, 36%, 100%{ transform:none; } 10%{ transform:rotate(-10deg) translateY(-4%); } 22%{ transform:rotate(6deg); } }
@keyframes kColumnas{ 0%, 34%, 100%{ transform:none; } 12%{ transform:scaleY(.82); } 22%{ transform:scaleY(1.08); } }
@keyframes kChispa{ 0%, 34%, 100%{ transform:none; opacity:1; } 14%{ transform:scale(1.5) rotate(45deg); opacity:.7; } }
@keyframes kLatePunto{ 0%, 36%, 100%{ transform:none; } 10%{ transform:scale(1.35); } 20%{ transform:scale(.9); } }
@keyframes kMenea{ 0%, 34%, 100%{ transform:none; } 8%{ transform:rotate(-7deg); } 16%{ transform:rotate(6deg); } 24%{ transform:rotate(-3deg); } }
@keyframes kMoneda{ 0%{ transform:translateY(-70%); opacity:0; } 12%{ opacity:1; } 26%{ transform:translateY(120%); opacity:0; } 27%{ transform:translateY(-70%); opacity:0; } 40%, 100%{ transform:none; opacity:1; } }
@keyframes kDiana{ 0%{ transform:translate(40%, -40%); opacity:0; } 14%{ transform:none; opacity:1; } 18%{ transform:translate(-4%, 4%); } 22%, 100%{ transform:none; opacity:1; } }
@keyframes kHojaI{ 0%, 40%, 100%{ transform:none; } 14%{ transform:rotate(-12deg); } 28%{ transform:rotate(5deg); } }
@keyframes kHojaD{ 0%, 40%, 100%{ transform:none; } 14%{ transform:rotate(12deg); } 28%{ transform:rotate(-5deg); } }
@keyframes kAguja{ 0%{ transform:rotate(-95deg); } 22%{ transform:rotate(8deg); } 30%, 100%{ transform:none; } }
@keyframes kGira{ 0%{ transform:none; } 30%, 100%{ transform:rotate(360deg); } }
@keyframes kGiraCuarto{ 0%{ transform:none; } 24%, 100%{ transform:rotate(90deg); } }
@keyframes kBorla{ 0%, 40%, 100%{ transform:none; } 10%{ transform:rotate(22deg); } 22%{ transform:rotate(-14deg); } 32%{ transform:rotate(6deg); } }
@keyframes kEscribe{ 0%, 26%, 100%{ transform:none; } 9%{ transform:translateY(-35%); } }
@keyframes kRenglones{ 0%{ transform:scaleX(0); } 24%, 100%{ transform:none; } }
@keyframes kAsoma{ 0%, 36%, 100%{ transform:none; } 14%, 24%{ transform:translateY(-18%); } }
@keyframes kBarra{ 0%{ transform:scaleY(.15); } 22%, 100%{ transform:none; } }

/* Menú lateral y barra inferior */
.nav-item .nav-ico{ width:30px; display:inline-grid; place-items:center; opacity:1; }
.nav-item.active .nav-ico{ transform:none; }
.bn-ico .kico{ width:30px; height:30px; border-radius:10px; }
.bn-item.active .bn-ico .kico{ transform:translateY(-3px) scale(1.1); }
.bn-item:active .kico{ transform:scale(.88); }

/* Inicio: accesos con placa grande */
.acc-kap .kico{ margin-bottom:2px; }

@media (prefers-reduced-motion:reduce){
  .kico, .kico::after, .kico [class*="a-"], .con-kico .kico{ animation:none !important; transition:none !important; }
}