/* JAML CODE — íconos de línea y animaciones compartidas por todas las páginas.
   Regla: el contenido es visible sin JS. Solo se oculta para animar cuando
   <html> tiene la clase .js (la añade un script inline en el <head>). */

/* ── ÍCONOS ─────────────────────────────────────────────────────────── */
.ico {
  width: 22px; height: 22px; flex-shrink: 0; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 15px; height: 15px; stroke-width: 1.9; color: #6366f1; vertical-align: -2px; }

.icon-box {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6366f1;
  background: linear-gradient(135deg, rgba(99,102,241,0.11) 0%, rgba(139,92,246,0.08) 55%, rgba(6,182,212,0.08) 100%);
  border: 1px solid rgba(99,102,241,0.14);
  transition: transform 420ms cubic-bezier(0.34,1.56,0.64,1), color 260ms ease,
              background 260ms ease, border-color 260ms ease, box-shadow 320ms ease;
}
:is(.card, .sol-card, .blog-card):hover .icon-box {
  color: #ffffff; border-color: transparent;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow: 0 10px 24px rgba(99,102,241,0.32);
  transform: translateY(-2px) scale(1.06);
}

/* Ícono grande en las miniaturas del blog */
.thumb-ico {
  width: 76px; height: 76px; border-radius: 22px; margin: 0;
  background: #ffffff; border-color: rgba(99,102,241,0.12);
  box-shadow: 0 10px 30px rgba(99,102,241,0.12);
}
.thumb-ico .ico { width: 34px; height: 34px; stroke-width: 1.6; }
.blog-card.featured .thumb-ico { width: 104px; height: 104px; border-radius: 28px; }
.blog-card.featured .thumb-ico .ico { width: 46px; height: 46px; }

@media (prefers-reduced-motion: no-preference) {
  /* Trazo que se dibuja al entrar en pantalla */
  .js .icon-box .ico > * {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 1100ms cubic-bezier(0.65,0,0.35,1);
  }
  .js .icon-box.on .ico > * { stroke-dashoffset: 0; }
  .js .icon-box .ico > :nth-child(2) { transition-delay: 110ms; }
  .js .icon-box .ico > :nth-child(3) { transition-delay: 220ms; }
  .js .icon-box .ico > :nth-child(4) { transition-delay: 330ms; }
  .js .icon-box .ico > :nth-child(5) { transition-delay: 440ms; }
  .js .icon-box .ico > :nth-child(n+6) { transition-delay: 550ms; }

  /* Gesto propio de cada ícono al pasar el mouse */
  .ico { transform-box: fill-box; transform-origin: center; }
  :is(.card, .sol-card, .blog-card):hover .m-pop    { animation: ico-pop 700ms cubic-bezier(0.34,1.56,0.64,1); }
  :is(.card, .sol-card, .blog-card):hover .m-swing  { animation: ico-swing 900ms ease-in-out; transform-origin: 50% 10%; }
  :is(.card, .sol-card, .blog-card):hover .m-ring   { animation: ico-ring 900ms ease-in-out; transform-origin: 50% 15%; }
  :is(.card, .sol-card, .blog-card):hover .m-slide  { animation: ico-slide 900ms ease-in-out; }
  :is(.card, .sol-card, .blog-card):hover .m-spin   { animation: ico-spin 900ms cubic-bezier(0.65,0,0.35,1); }
  :is(.card, .sol-card, .blog-card):hover .m-bounce { animation: ico-bounce 800ms cubic-bezier(0.34,1.56,0.64,1); }
  :is(.card, .sol-card, .blog-card):hover .m-grow   { animation: ico-grow 800ms cubic-bezier(0.34,1.56,0.64,1); transform-origin: 50% 100%; }
  :is(.card, .sol-card, .blog-card):hover .m-pulse  { animation: ico-pulse 900ms ease-in-out; }
}
@keyframes ico-pop    { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.14) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ico-swing  { 0%,100% { transform: rotate(0); } 25% { transform: rotate(9deg); } 55% { transform: rotate(-7deg); } 80% { transform: rotate(3deg); } }
@keyframes ico-ring   { 0%,100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
@keyframes ico-slide  { 0%,100% { transform: translateX(0); } 45% { transform: translateX(4px); } 70% { transform: translateX(-1px); } }
@keyframes ico-spin   { from { transform: rotate(0); } to { transform: rotate(90deg); } }
@keyframes ico-bounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 70% { transform: translateY(1px); } }
@keyframes ico-grow   { 0% { transform: scaleY(1); } 35% { transform: scaleY(0.75); } 70% { transform: scaleY(1.08); } 100% { transform: scaleY(1); } }
@keyframes ico-pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* ── ENTRADA DEL HERO (solo CSS: sin parpadeo y sin depender de JS) ── */
@media (prefers-reduced-motion: no-preference) {
  :is(.hero-local, .nf) .container > * {
    animation: rise-in 900ms cubic-bezier(0.16,1,0.3,1) both;
  }
  :is(.hero-local, .nf) .container > :nth-child(2) { animation-delay: 80ms; }
  :is(.hero-local, .nf) .container > :nth-child(3) { animation-delay: 160ms; }
  :is(.hero-local, .nf) .container > :nth-child(4) { animation-delay: 240ms; }
  :is(.hero-local, .nf) .container > :nth-child(5) { animation-delay: 320ms; }
  :is(.hero-local, .nf) .container > :nth-child(n+6) { animation-delay: 400ms; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ── APARICIÓN AL HACER SCROLL (motion.js marca los elementos con .rv) ── */
@media (prefers-reduced-motion: no-preference) {
  .js .rv {
    opacity: 0; transform: translateY(22px);
    transition: opacity 800ms cubic-bezier(0.16,1,0.3,1), transform 800ms cubic-bezier(0.16,1,0.3,1);
  }
  .js .rv.in { opacity: 1; transform: none; }
}

/* Flecha de los enlaces de tarjeta que avanza al pasar el mouse */
.sol-link, .card-more { display: inline-block; transition: transform 260ms cubic-bezier(0.34,1.56,0.64,1); }
:is(.sol-card, .blog-card):hover :is(.sol-link, .card-more) { transform: translateX(4px); }