/*
 * redes-sociales.php: estilos propios de la página.
 * Se apoya en fisher-ui.css (fn-*), promo.css (pr-*) y isp-page.css (fn-stagger).
 * Las animaciones son ligeras y se apagan con prefers-reduced-motion.
 */

/* ===== Redes disponibles: píldoras que flotan despacio ===== */
.sp-nets{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:40px 0 0;padding:0;list-style:none;}
.sp-nets li{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;background:#fff;border:1px solid var(--fn-line);box-shadow:var(--fn-sh-xs);font-size:14px;font-weight:600;color:var(--fn-navy-900);}
.sp-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c,#0E9F96);box-shadow:0 0 0 0 var(--c,#0E9F96);}
html.fn-js .sp-nets.is-in li,html:not(.fn-js) .sp-nets li{animation:spFloat 6s ease-in-out infinite;}
.sp-nets li:nth-child(2n){animation-delay:-1.4s !important;}
.sp-nets li:nth-child(3n){animation-delay:-2.9s !important;}
.sp-nets li:nth-child(5n){animation-delay:-4.2s !important;}
.sp-nets li:hover .sp-dot{animation:spPing 1.1s ease-out infinite;}
@keyframes spFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes spPing{0%{box-shadow:0 0 0 0 rgba(14,159,150,.45);}100%{box-shadow:0 0 0 9px rgba(14,159,150,0);}}

/* ===== Pasos del flujo: los números se encienden uno tras otro ===== */
html.fn-js .pr-flow.is-in .pr-flow__step span{animation:spStep .7s ease both;}
html.fn-js .pr-flow.is-in .pr-flow__step:nth-child(2) span{animation-delay:.15s;}
html.fn-js .pr-flow.is-in .pr-flow__step:nth-child(3) span{animation-delay:.3s;}
html.fn-js .pr-flow.is-in .pr-flow__step:nth-child(4) span{animation-delay:.45s;}
html.fn-js .pr-flow.is-in .pr-flow__step:nth-child(5) span{animation-delay:.6s;}
@keyframes spStep{0%{transform:scale(.6);opacity:.2;}60%{transform:scale(1.12);opacity:1;}100%{transform:scale(1);}}

/* ===== Capturas: se acercan un poco al pasar el ratón ===== */
.fn-modrow__media .fn-frame{transition:transform .35s ease,box-shadow .35s ease;}
@media (hover:hover){.fn-modrow__media .fn-frame:hover{transform:translateY(-4px);}}

@media (max-width:767px){.sp-nets{gap:8px;margin-top:28px;}.sp-nets li{font-size:13px;padding:7px 12px;}}
@media (prefers-reduced-motion:reduce){
    html.fn-js .sp-nets.is-in li,.sp-nets li{animation:none !important;}
    .sp-nets li:hover .sp-dot{animation:none;}
    html.fn-js .pr-flow.is-in .pr-flow__step span{animation:none;}
    .fn-modrow__media .fn-frame{transition:none;}
    .fn-modrow__media .fn-frame:hover{transform:none;}
}