/* ~~~~~~~~~~~~~~~~~~~~~~~ Inicio Animacion icono fuego ~~~~~~~~~~~~~~~~~~~~~~~ */
:root{
    --btn-bg:#0C2D57;     /* color del botón */
    --btn-text:#ffffff;    /* texto */
}
.badge-float{
    display:inline-flex; align-items:center; gap:.6rem;
    font:600 14px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    cursor:pointer; box-shadow:0 6px 18px rgba(12,45,87,.25);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.badge-float:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(12,45,87,.28); }
.badge-float:active{ transform:translateY(0); filter:brightness(.95); }
.badge-float .fire{ display:block; }

.flame{ transform-origin: 32px 48px; }
.flame-outer{ animation: flicker 1.1s infinite ease-in-out; }
.flame-mid{ animation: flicker 0.9s infinite ease-in-out reverse; }
.flame-inner{ animation: flicker 0.7s infinite ease-in-out; }

/* Chispas */
.spark-a, .spark-b, .spark-c{ opacity:.9; }
.spark-a{ animation: rise 1.8s infinite ease-in-out; }
.spark-b{ animation: rise 2.1s .2s infinite ease-in-out; }
.spark-c{ animation: rise 1.6s .4s infinite ease-in-out; }

@keyframes flicker{
    0%,100%{ transform: translateY(0) scale(1); filter:drop-shadow(0 0 0 rgba(255,145,0,.0)); }
    50%  { transform: translateY(-1px) scale(1.03); filter:drop-shadow(0 4px 6px rgba(255,145,0,.25)); }
}

@keyframes rise{
    0%{ transform: translateY(0) scale(1); opacity:.95; }
    70%{ transform: translateY(-6px) scale(1.1); opacity:.7; }
    100%{ transform: translateY(-10px) scale(0.9); opacity:0; }
}

/* Accesibilidad: respeta reducción de movimiento */
@media (prefers-reduced-motion: reduce){
    .flame, .spark-a, .spark-b, .spark-c{ animation: none !important; }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Fin Animacion icono fuego ~~~~~~~~~~~~~~~~~~~~~~~ */