/* Mitic Line - CSS de los iconos (marca v2, 2026-09-30)
   Trazo 1.75 en rejilla 24; un solo detalle de acento por icono.
   --ic-acc: color del acento (naranja de marca). Si no se define, el acento hereda currentColor.
   Las reglas por clase no atraviesan <use>: el acento y las animaciones viajan por custom
   properties HEREDADAS (registradas con @property para poder animarse). */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* Tamaños */
.ic-16{width:16px;height:16px;stroke-width:2}      /* a 16px el trazo sube a 2 para no desaparecer */
.ic-20{width:20px;height:20px}
.ic-24{width:24px;height:24px}
.ic-32{width:32px;height:32px;stroke-width:1.5}
.ic-48{width:48px;height:48px;stroke-width:1.25}
/* Monocromo (footer, estados deshabilitados): el acento vuelve a currentColor */
.ic-mono{--ic-acc:currentColor}

/* ===== Propiedades registradas (animables y heredadas hacia dentro del <use>) ===== */
@property --ic-dash{syntax:'<number>';inherits:true;initial-value:0}
@property --ic-rot{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --ic-ring{syntax:'<number>';inherits:true;initial-value:1}
@property --ic-y{syntax:'<length>';inherits:true;initial-value:0px}
@property --ic-s{syntax:'<number>';inherits:true;initial-value:1}

/* ===== Animaciones de 6 iconos clave =====
   Se disparan con .is-on en el icono (JS: al entrar en pantalla, al confirmar) o con :hover /
   :focus-visible del botón/tarjeta que lo contiene. Todas se apagan con prefers-reduced-motion. */

/* 1. check / shield-check / clipboard-check: el trazo se dibuja (lista de ventajas, pago confirmado) */
.ic.is-on,.anim-on .ic{animation:ic-draw .5s cubic-bezier(.22,1,.36,1) both}
@keyframes ic-draw{from{--ic-dash:24}to{--ic-dash:0}}

/* 2. bell-ring: la campana oscila y las ondas aparecen (alertas de vencimiento) */
.ic-bell.is-on,.anim-on .ic-bell{animation:ic-bell 1.1s cubic-bezier(.36,.07,.19,.97) both}
@keyframes ic-bell{0%{--ic-rot:0deg;--ic-ring:0}15%{--ic-rot:14deg}35%{--ic-rot:-11deg;--ic-ring:0}45%{--ic-ring:1}55%{--ic-rot:7deg}75%{--ic-rot:-4deg}100%{--ic-rot:0deg;--ic-ring:1}}

/* 3. zap: destello del rayo (CTA "Empieza gratis") - transforma el <svg> entero */
.btn:hover .ic-zap,.btn:focus-visible .ic-zap,.ic-zap.is-on{animation:ic-zap .5s ease-out both}
@keyframes ic-zap{0%{transform:scale(1)}30%{transform:scale(1.18) rotate(-6deg)}100%{transform:scale(1)}}

/* 4. dumbbell: pequeño "levantamiento" (tarjeta de rutinas) */
.ic-dumbbell.is-on,.anim-on .ic-dumbbell,.card:hover .ic-dumbbell{animation:ic-lift .7s cubic-bezier(.34,1.56,.64,1) both}
@keyframes ic-lift{0%{transform:translateY(0)}40%{transform:translateY(-2.5px)}100%{transform:translateY(0)}}

/* 5. map-pin: cae y el punto pulsa dos veces (asistencia por ubicación) */
.ic-pin.is-on,.anim-on .ic-pin{animation:ic-pin-drop .55s cubic-bezier(.22,1,.36,1) both,ic-pin-pulse 1.4s .5s ease-out 2 both}
@keyframes ic-pin-drop{from{--ic-y:-6px;opacity:0}to{--ic-y:0px;opacity:1}}
@keyframes ic-pin-pulse{0%{--ic-s:1}50%{--ic-s:1.35}100%{--ic-s:1}}

/* 6. arrow-right: se desliza 3px con el botón o enlace que lo contiene */
.ic-arrow{transition:transform .22s cubic-bezier(.22,1,.36,1)}
.btn:hover .ic-arrow,.btn:focus-visible .ic-arrow,a:hover>.ic-arrow,a:focus-visible>.ic-arrow{transform:translateX(3px)}

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