/* Iconos propios de Articulado (js/lib/iconos-propios.mjs).
   Se animan una vez al pasar por encima o enfocar, en la sección en la que estás y en los avisos
   vacíos. Con «reducir movimiento» activado en el sistema se quedan quietos. */

.ip { display: block; flex: none; width: 24px; height: 24px; overflow: visible; }
.ip * { transform-box: view-box; }
.ip-l { fill: none; stroke: var(--marino-profundo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ip-f { stroke: var(--marino-profundo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ip-cara { fill: none; stroke: var(--marino-profundo); stroke-width: 2; stroke-linecap: round; }
.vacio > .ip { width: 72px; height: 72px; }

/* Lo que solo se ve durante la animación */
.ip-chispa, .ip-sol-brillo, .ip-hola, .ip-reloj-vib { opacity: 0; }

/* Puntos de giro de cada pieza (en coordenadas de la rejilla 48 × 48) */
.ip-sol-rayos, .ip-lupa { transform-origin: 24px 24px; }
.ip-sol-cabeza { transform-origin: 24px 34px; }
.ip-persona-brazo { transform-origin: 31.8px 33.5px; }
.ip-persona-cabeza { transform-origin: 24px 25px; }
.ip-persona-ojo { transform-origin: 26.7px 18.6px; }
.ip-libros-medio { transform-origin: 23px 40px; }
.ip-libros-dcha { transform-origin: 38px 40px; }
.ip-temario-hoja { transform-origin: 24px 27px; }
.ip-test-lapiz { transform: translate(32px, 21px); }
.ip-reloj, .ip-reloj-aguja { transform-origin: 24px 28px; }
.ip-marca-estrella { transform-origin: 24px 19px; }
.ip-barra-1 { transform-origin: 15px 40px; }
.ip-barra-2 { transform-origin: 24px 40px; }
.ip-barra-3 { transform-origin: 33px 40px; }
.ip-bandera { transform-origin: 33px 15px; }
.ip-bandera-tela { transform-origin: 33px 7px; }
.ip-moneda { transform-origin: 24px 25px; }
.ip-doc-hoja, .ip-bajar-bandeja, .ip-papelera, .ip-movil { transform-origin: 24px 41px; }
.ip-doc-sello, .ip-doc-ok { transform-origin: 30.5px 33.5px; }
.ip-libro-candado { transform-origin: 30px 30px; }
.ip-cal { transform-origin: 24px 40px; }
.ip-salir-puerta { transform-origin: 11px 25px; }
.ip-papelera-tapa { transform-origin: 10px 14px; }
.ip-portatil-pantalla { transform-origin: 24px 30px; }
.ip-movil-burbuja { transform-origin: 24px 17px; }
.ip-bombilla { transform-origin: 24px 22px; }
.ip-ch-sol { transform-origin: 34px 16.5px; }
.ip-ch-libros { transform-origin: 31px 7px; }
.ip-ch-tem1 { transform-origin: 15px 7px; }
.ip-ch-tem2 { transform-origin: 35px 6px; }
.ip-ch-mon1 { transform-origin: 39px 9px; }
.ip-ch-mon2 { transform-origin: 9px 13px; }

/* Cuándo se animan: el padre del icono con el ratón encima o con el foco, la sección actual y los avisos vacíos. */
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-sol-rayos { animation: ip-gira 1.4s cubic-bezier(.3, .7, .3, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-sol-cabeza { animation: ip-ladea 1.4s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-sol-gafas { animation: ip-gafas 1s cubic-bezier(.3, .7, .3, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-sol-brillo { animation: ip-destello .5s .9s ease-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-chispa { animation: ip-chispa .7s ease-out both; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-chispa.ip-c1 { animation-delay: .45s; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-chispa.ip-c2 { animation-delay: .6s; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-chispa.ip-c3 { animation-delay: .75s; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-chispa.ip-c4 { animation-delay: .95s; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-persona-brazo { animation: ip-saluda 1.6s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-persona-cabeza { animation: ip-asiente 1.6s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-persona-ojo { animation: ip-guina 1.6s; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-hola { animation: ip-aparece 1.6s ease-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-libros-medio { animation: ip-salta .9s cubic-bezier(.3, .7, .3, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-libros-dcha { animation: ip-inclina .9s .1s cubic-bezier(.3, .7, .3, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-temario-hoja { animation: ip-pasa 1.2s cubic-bezier(.5, 0, .3, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-test-check { animation: ip-traza .9s linear both; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-test-lapiz { animation: ip-escribe .9s linear; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-reloj { animation: ip-vibra .8s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-reloj-vib { animation: ip-aparece .8s ease-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-reloj-aguja { animation: ip-tic 1.4s .2s cubic-bezier(.4, 0, .2, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-marca { animation: ip-cae .8s cubic-bezier(.3, 1.6, .5, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-marca-estrella { animation: ip-estrella 1.1s cubic-bezier(.3, 1.4, .5, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-barra-1 { animation: ip-crece .6s ease-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-barra-2 { animation: ip-crece .6s .12s ease-out both; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-barra-3 { animation: ip-crece .6s .24s ease-out both; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-bandera { animation: ip-bandera 1.4s ease-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-bandera-tela { animation: ip-ondea 1.4s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-moneda-salto { animation: ip-brinca 1.1s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-moneda { animation: ip-gira-moneda 1.1s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-doc-hoja { animation: ip-golpe .9s ease-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-doc-sello { animation: ip-sello .9s cubic-bezier(.3, .7, .3, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-doc-ok { animation: ip-pop .7s cubic-bezier(.3, 1.5, .5, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-doc-ok-check { animation: ip-traza-corta .6s .35s ease-out both; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-libro { animation: ip-brinca-suave .9s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-libro-candado { animation: ip-abre 1s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-cal { animation: ip-brinca-suave .8s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-cal-marca { animation: ip-traza-dia .8s .25s ease-out both; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-bajar-flecha { animation: ip-baja .9s cubic-bezier(.3, .7, .3, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-bajar-bandeja { animation: ip-aplasta .9s ease-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-salir-puerta { animation: ip-puerta 1.2s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-salir-flecha { animation: ip-sale 1.2s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-papelera-tapa { animation: ip-tapa 1s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-papelera { animation: ip-tiembla .5s .35s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-portatil-pantalla { animation: ip-abre-pantalla .8s cubic-bezier(.3, 1.3, .5, 1); }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-movil { animation: ip-vibra-suave .6s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-movil-burbuja { animation: ip-pop .7s .3s cubic-bezier(.3, 1.5, .5, 1) both; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-lupa { animation: ip-busca 1.4s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-bombilla { animation: ip-late .9s ease-in-out; }
:is(:hover, :focus-visible, [aria-current="page"], .vacio) > .ip .ip-bombilla-rayos { animation: ip-parpadea .9s linear; }

@keyframes ip-gira { to { transform: rotate(90deg); } }
@keyframes ip-ladea { 50% { transform: rotate(-8deg); } }
@keyframes ip-gafas { 0% { transform: translateY(-16px); opacity: 0; } 55% { transform: translateY(1.5px); opacity: 1; } 75% { transform: translateY(-1px); } 100% { transform: none; } }
@keyframes ip-destello { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
@keyframes ip-chispa { 0% { transform: scale(0) rotate(0); opacity: 0; } 45% { transform: scale(1.2) rotate(45deg); opacity: 1; } 100% { transform: scale(0) rotate(90deg); opacity: 0; } }
@keyframes ip-saluda { 0% { transform: rotate(105deg); } 22% { transform: rotate(-10deg); } 36% { transform: rotate(16deg); } 50% { transform: rotate(-10deg); } 64% { transform: rotate(16deg); } 80% { transform: rotate(-4deg); } 100% { transform: none; } }
@keyframes ip-asiente { 20%, 80% { transform: rotate(7deg); } }
@keyframes ip-guina { 0%, 62%, 82%, 100% { transform: none; } 70% { transform: scaleY(.12); } }
@keyframes ip-aparece { 0%, 15% { opacity: 0; } 30%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ip-salta { 30% { transform: translateY(-10px) rotate(-7deg); } 60% { transform: scaleY(.9); } 78% { transform: scaleY(1.05); } 100% { transform: none; } }
@keyframes ip-inclina { 50% { transform: rotate(-9deg); } }
@keyframes ip-pasa { 0% { transform: scaleX(1); opacity: 1; } 55% { transform: scaleX(-1); opacity: 1; } 70% { transform: scaleX(-1); opacity: 0; } 71% { transform: scaleX(1); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } }
@keyframes ip-traza { from { stroke-dashoffset: 21; } to { stroke-dashoffset: 0; } }
@keyframes ip-escribe { 0% { transform: translate(17.5px, 26.5px); } 35% { transform: translate(22.5px, 31.5px); } 100% { transform: translate(32px, 21px); } }
@keyframes ip-vibra { 0%, 100% { transform: none; } 12%, 37%, 62% { transform: rotate(-11deg); } 25%, 50%, 75% { transform: rotate(11deg); } 88% { transform: rotate(-3deg); } }
@keyframes ip-tic { to { transform: rotate(360deg); } }
@keyframes ip-cae { 0% { transform: translateY(-12px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes ip-estrella { 0%, 40% { transform: scale(0) rotate(-140deg); } 80% { transform: scale(1.3) rotate(10deg); } 100% { transform: none; } }
@keyframes ip-crece { from { transform: scaleY(.12); } to { transform: scaleY(1); } }
@keyframes ip-bandera { 0%, 45% { transform: scaleY(0); } 65% { transform: scaleY(1.12); } 100% { transform: none; } }
@keyframes ip-ondea { 0%, 60% { transform: skewY(0); } 72% { transform: skewY(-14deg); } 86% { transform: skewY(9deg); } 100% { transform: none; } }
@keyframes ip-brinca { 50% { transform: translateY(-7px); } }
@keyframes ip-gira-moneda { 0%, 100% { transform: scaleX(1); } 25%, 75% { transform: scaleX(.06); } 50% { transform: scaleX(-1); } }
@keyframes ip-golpe { 0%, 45% { transform: none; } 55% { transform: scaleY(.94); } 70% { transform: scaleY(1.02); } 100% { transform: none; } }
@keyframes ip-sello { 0% { transform: translateY(-8px) scale(1.7); opacity: 0; } 50% { transform: scale(.88); opacity: 1; } 68% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
@keyframes ip-pop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes ip-traza-corta { from { stroke-dashoffset: 10; } to { stroke-dashoffset: 0; } }
@keyframes ip-brinca-suave { 40% { transform: translateY(-3px); } }
@keyframes ip-abre { 0%, 100% { transform: none; } 40%, 70% { transform: translateY(-3px) rotate(-28deg); } }
@keyframes ip-traza-dia { from { stroke-dashoffset: 25.2; } to { stroke-dashoffset: 0; } }
@keyframes ip-baja { 0% { transform: translateY(-12px); opacity: 0; } 50% { transform: translateY(2px); opacity: 1; } 70% { transform: translateY(-1px); } 100% { transform: none; } }
@keyframes ip-aplasta { 0%, 45% { transform: none; } 55% { transform: scaleY(.9); } 75% { transform: scaleY(1.03); } 100% { transform: none; } }
@keyframes ip-puerta { 0%, 100% { transform: none; } 30%, 70% { transform: scaleX(.35); } }
@keyframes ip-sale { 0%, 20% { transform: translateX(-6px); opacity: 0; } 50% { transform: translateX(2px); opacity: 1; } 80%, 100% { transform: none; opacity: 1; } }
@keyframes ip-tapa { 0%, 100% { transform: none; } 25% { transform: translateY(-4px) rotate(-28deg); } 45% { transform: translateY(-3px) rotate(-18deg); } 60% { transform: translateY(-4px) rotate(-26deg); } 85% { transform: none; } }
@keyframes ip-tiembla { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes ip-abre-pantalla { 0% { transform: scaleY(.1); } 100% { transform: none; } }
@keyframes ip-vibra-suave { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(-6deg); } 40%, 80% { transform: rotate(6deg); } }
@keyframes ip-busca { 0%, 100% { transform: none; } 25% { transform: translate(-3px, 2px) rotate(-8deg); } 50% { transform: translate(3px, 3px) rotate(6deg); } 75% { transform: translate(2px, -3px) rotate(-4deg); } }
@keyframes ip-late { 50% { transform: scale(1.08); } }
@keyframes ip-parpadea { 0% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: .2; } 45%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ip * { animation: none !important; }
}