/*
 * funcionalidades.php (CRM para ISP): estilos propios de la página.
 * Se apoya en fisher-ui.css (fn-*) y en noc-orbit.css (la animación del NOC).
 */

/* ===== Aparición escalonada: los hijos entran uno tras otro cuando el bloque entra en pantalla ===== */
html.fn-js .fn-stagger > *{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease;}
html.fn-js .fn-stagger.is-in > *,html.fn-js .is-in .fn-stagger > *{opacity:1;transform:none;}
html.fn-js .fn-stagger.is-in > *:nth-child(2),html.fn-js .is-in .fn-stagger > *:nth-child(2){transition-delay:.08s;}
html.fn-js .fn-stagger.is-in > *:nth-child(3),html.fn-js .is-in .fn-stagger > *:nth-child(3){transition-delay:.16s;}
html.fn-js .fn-stagger.is-in > *:nth-child(4),html.fn-js .is-in .fn-stagger > *:nth-child(4){transition-delay:.24s;}
html.fn-js .fn-stagger.is-in > *:nth-child(5),html.fn-js .is-in .fn-stagger > *:nth-child(5){transition-delay:.32s;}
html.fn-js .fn-stagger.is-in > *:nth-child(6),html.fn-js .is-in .fn-stagger > *:nth-child(6){transition-delay:.4s;}
html.fn-js .fn-stagger.is-in > *:nth-child(n+7),html.fn-js .is-in .fn-stagger > *:nth-child(n+7){transition-delay:.48s;}
@media (prefers-reduced-motion:reduce){
    html.fn-js .fn-stagger > *{opacity:1;transform:none;transition:none;}
    html.fn-js .fn-reveal{opacity:1;transform:none;transition:none;}
}

/* ===== Cifras que cuentan hasta su valor ===== */
.fn-trust__item b[data-count]{font-variant-numeric:tabular-nums;}

/* ===== La órbita del NOC ===== */
.fn-orbit-sec{position:relative;overflow:hidden;padding:76px 0 84px;color:#dbe7f3;
    background:radial-gradient(900px 480px at 8% 0%,rgba(23,184,212,.20),transparent 62%),radial-gradient(800px 460px at 100% 100%,rgba(63,113,255,.22),transparent 60%),#07182b;}
.fn-orbit-sec:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
    background-image:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 78% 14%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 80%,#9fe9f6,transparent),radial-gradient(1px 1px at 90% 66%,#fff,transparent),radial-gradient(1px 1px at 30% 52%,#fff,transparent),radial-gradient(1.5px 1.5px at 62% 38%,#9fe9f6,transparent);}
.fn-orbit-grid{position:relative;display:grid;grid-template-columns:.78fr 1.22fr;gap:44px;align-items:center;}
.fn-orbit-copy h2{color:#fff;font-size:clamp(28px,3.4vw,42px);line-height:1.12;margin:10px 0 14px;}
.fn-orbit-copy > p{color:#b9cbdc;font-size:17px;line-height:1.65;margin:0 0 22px;}
.fn-eyebrow--dark{background:rgba(23,184,212,.14);color:#7ee3f4;border-color:rgba(23,184,212,.35);}
.fn-orbit-points{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px;}
.fn-orbit-points li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:#cfdce9;}
.fn-orbit-points i{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(23,184,212,.14);color:#7ee3f4;font-size:14px;}
.fn-orbit-points b{color:#fff;display:block;font-weight:700;}
.fn-orbit-stage{position:relative;min-width:0;}
.fn-orbit-stage:before{content:"";position:absolute;inset:-6% -4%;border-radius:36px;background:radial-gradient(60% 60% at 50% 50%,rgba(23,184,212,.28),transparent 70%);filter:blur(18px);z-index:0;}
.fn-orbit.nocl{position:relative;z-index:1;border:1px solid rgba(126,227,244,.25);border-radius:20px;padding:16px 16px 14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.75);overflow:hidden;color:#dce5ee;}
.fn-orbit .nocl-topo-wrap{margin:0 -16px;min-height:500px;height:500px;}
.fn-orbit__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:relative;z-index:2;}
.fn-orbit__head .nocl-eyebrow{font:600 10px/1.2 var(--nocl-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--nocl-accent);display:flex;align-items:center;gap:7px;}
.fn-orbit__live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--nocl-ok);box-shadow:0 0 0 0 rgba(45,212,191,.7);animation:fnOrbitPing 2s ease-out infinite;}
.fn-orbit__head h3{margin:4px 0 0;font-size:17px;color:#fff;font-weight:700;}
.fn-orbit .nocl-topo-legend{position:static;display:flex;flex-direction:column;align-items:flex-end;margin:2px 0 0;}
.fn-orbit .nocl-topo-sub{margin:2px 0 0;}
.fn-orbit__hint{position:relative;z-index:1;margin:12px 0 0;text-align:center;font-size:13px;color:#8fa6bb;}
.fn-orbit__hint i{margin-right:6px;color:#7ee3f4;}
.nocl-topo-legend .ln{display:inline-block;width:16px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 0 6px currentColor;}
.nocl-topo-legend .arc{display:inline-block;width:12px;height:8px;border:2px solid var(--nocl-accent);border-bottom:0;border-radius:12px 12px 0 0;}
@keyframes fnOrbitPing{0%{box-shadow:0 0 0 0 rgba(45,212,191,.65);}80%,100%{box-shadow:0 0 0 9px rgba(45,212,191,0);}}
@media (prefers-reduced-motion:reduce){.fn-orbit__live{animation:none;}}
@media (max-width:991px){
    .fn-orbit-grid{grid-template-columns:1fr;gap:30px;}
    .fn-orbit-sec{padding:56px 0 62px;}
}
@media (max-width:767px){
    .fn-orbit .nocl-topo-wrap{min-height:340px;height:340px;}
    .fn-orbit .nocl-topo-legend{display:none;}
    .fn-orbit.nocl{padding:14px 12px 12px;border-radius:16px;}
    .fn-orbit .nocl-topo-wrap{margin:0 -12px;}
}

/* ===== Móvil: el portal del cliente en el teléfono ===== */
.fn-phone{max-width:300px;margin:0 auto;border:9px solid #0f1d2e;border-radius:34px;background:#0f1d2e;box-shadow:var(--fn-sh);overflow:hidden;}
.fn-phone img{display:block;width:100%;height:auto;border-radius:24px;}

/* ===== Galería de capturas con pie ===== */
.fn-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.fn-gallery--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.fn-gallery figure{margin:0;min-width:0;}
.fn-gallery .fn-frame{margin:0;}
.fn-gallery figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--fn-muted);}
.fn-gallery figcaption b{display:block;color:var(--fn-navy-900);font-size:15px;margin-bottom:2px;}
@media (max-width:991px){.fn-gallery--3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:767px){.fn-gallery,.fn-gallery--3{grid-template-columns:1fr;gap:22px;}}

/* ===== Textos que manda el sistema (cita) ===== */
.fn-quote{margin:0 0 14px;padding:14px 16px;border-left:4px solid var(--fn-cyan,#17B8D4);background:#fff;border-radius:0 12px 12px 0;box-shadow:var(--fn-sh-xs);font-size:14.5px;line-height:1.6;color:var(--fn-body);}
.fn-quote b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fn-blue);margin-bottom:4px;}

/* ===== Distintivos de módulo dentro de una sección ===== */
.fn-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none;}
.fn-chiprow li{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--fn-navy-900);background:#fff;border:1px solid var(--fn-line);border-radius:999px;padding:6px 12px;}
.fn-chiprow i{color:var(--fn-blue);}

/* ===== Ajustes de ritmo de la página ===== */
.fn-isp-sub{margin-top:56px;}
.fn-isp-sub:first-child{margin-top:0;}
.fn-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0 0;}
.fn-stats > div{background:#fff;border:1px solid var(--fn-line);border-radius:14px;padding:18px 18px 16px;text-align:center;box-shadow:var(--fn-sh-xs);}
.fn-stats b{display:block;font-family:var(--fn-font-display);font-size:34px;line-height:1;color:var(--fn-navy-900);font-variant-numeric:tabular-nums;}
.fn-stats span{display:block;margin-top:8px;font-size:13.5px;color:var(--fn-muted);}
@media (max-width:767px){.fn-stats{grid-template-columns:repeat(2,1fr);}}