/* ============================================================
   FEBRES 360° · ICONOS ANIMADOS (CSS)
   Funciona con el markup de html/iconos.html.
   Todos los iconos se dibujan trazo a trazo al entrar y cada
   uno tiene una micro-interacción propia en hover/touch.
   Requiere tokens.css.
   ============================================================ */

.f-ico{width:46px;height:46px;overflow:visible;display:block;margin:auto}

/* Trazo base: dibujo de entrada */
.f-ico .tz{
  fill:none;stroke:var(--f360-neon);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:240;stroke-dashoffset:240;
  animation:fDibujo 1.3s ease forwards;
}
.f-ico .tz2{stroke:var(--f360-azul)}      /* trazo secundario azul */
.f-ico .tz3{stroke:var(--f360-oro)}       /* detalle dorado */
@keyframes fDibujo{to{stroke-dashoffset:0}}

/* Escalonar entrada cuando hay varios en una grilla */
.f-ico-item:nth-child(1) .tz{animation-delay:.05s}
.f-ico-item:nth-child(2) .tz{animation-delay:.15s}
.f-ico-item:nth-child(3) .tz{animation-delay:.25s}
.f-ico-item:nth-child(4) .tz{animation-delay:.35s}
.f-ico-item:nth-child(5) .tz{animation-delay:.45s}
.f-ico-item:nth-child(6) .tz{animation-delay:.55s}
.f-ico-item:nth-child(7) .tz{animation-delay:.65s}
.f-ico-item:nth-child(8) .tz{animation-delay:.75s}

/* ---------- Micro-interacciones por icono ---------- */
/* El hover se aplica al contenedor .f-ico-item (la tarjeta) */

/* SALUD · electrocardiograma latiendo */
.ani-pulso{
  stroke-dasharray:90;stroke-dashoffset:90;
  animation:fLatido 2.4s ease-in-out infinite 1.1s;
}
.f-ico-item:hover .ani-pulso{animation-duration:1s}
@keyframes fLatido{
  0%{stroke-dashoffset:90}
  45%{stroke-dashoffset:0}
  70%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:-90;opacity:.15}
}

/* VIDA · ondas de protección */
.ani-onda{
  fill:none;stroke:var(--f360-neon);stroke-width:1.3;opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.f-ico-item:hover .ani-onda{animation:fOnda 1.6s ease-out infinite}
.f-ico-item:hover .ani-onda.o2{animation-delay:.5s}
@keyframes fOnda{0%{opacity:.7;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}

/* DENTAL · destello que parpadea */
.ani-brillo{
  fill:var(--f360-azul);opacity:0;
  transform-box:fill-box;transform-origin:center;
  animation:fBrillo 3s ease-in-out infinite 1.6s;
}
.f-ico-item:hover .ani-brillo{animation-duration:1.2s}
@keyframes fBrillo{
  0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}
  50%{opacity:1;transform:scale(1.1) rotate(90deg)}
}

/* VISIÓN · parpadeo del ojo */
.ani-ojo{transform-box:fill-box;transform-origin:center}
.f-ico-item:hover .ani-ojo{animation:fParpadeo 2.2s ease-in-out infinite .3s}
@keyframes fParpadeo{
  0%,86%,100%{transform:scaleY(1)}
  92%{transform:scaleY(.08)}
}

/* MEDICARE · cruz que late */
.ani-cruz{transform-box:fill-box;transform-origin:center}
.f-ico-item:hover .ani-cruz{animation:fCruz 1.4s ease-in-out infinite}
@keyframes fCruz{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* SUPLEMENTARIOS · el "+" gira y se acomoda */
.ani-mas{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.f-ico-item:hover .ani-mas{transform:rotate(180deg) scale(1.15)}

/* ACCIDENTES · la curita se ajusta */
.ani-curita{transform-box:fill-box;transform-origin:center}
.f-ico-item:hover .ani-curita{animation:fAjuste .7s ease-in-out}
@keyframes fAjuste{
  0%,100%{transform:rotate(0deg)}
  30%{transform:rotate(-9deg)}
  65%{transform:rotate(7deg)}
}

/* FAMILIA · el corazón flota */
.ani-corazon{
  fill:var(--f360-neon);opacity:0;
  transform-box:fill-box;transform-origin:center;
}
.f-ico-item:hover .ani-corazon{animation:fFlota 1.5s ease-out infinite}
@keyframes fFlota{
  0%{opacity:0;transform:translateY(4px) scale(.6)}
  25%{opacity:1}
  100%{opacity:0;transform:translateY(-9px) scale(1.05)}
}

@media (prefers-reduced-motion: reduce){
  .f-ico .tz{animation:none;stroke-dashoffset:0}
  .ani-pulso,.ani-onda,.ani-brillo,.ani-ojo,.ani-cruz,.ani-curita,.ani-corazon{animation:none!important}
}