/* SistemaNube — Funcionalidades */
.fn-hero{background:var(--bg);padding:72px 40px 40px;text-align:center}
.fn-hero .lbl{margin-bottom:16px}
.fn-hero h1{font-size:52px;font-weight:800;letter-spacing:-2px;line-height:1.08;text-wrap:pretty;max-width:720px;margin:0 auto}
.fn-hero h1 em{font-style:normal;color:var(--orange)}
.fn-hero p{font-size:17px;color:var(--text2);line-height:1.7;max-width:560px;margin:18px auto 0;text-wrap:pretty}

/* Module rail */
.fn-modnav{position:sticky;top:64px;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.fn-modnav-inner{max-width:1200px;margin:0 auto;display:flex;gap:8px;padding:14px 40px;overflow-x:auto;scrollbar-width:none}
.fn-modnav-inner::-webkit-scrollbar{display:none}
.fn-mod{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;font-size:13.5px;font-weight:600;color:var(--text2);background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:8px 16px;text-decoration:none;transition:all .15s;white-space:nowrap}
.fn-mod:hover{color:var(--blue);border-color:var(--blue)}
.fn-mod.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.fn-mod .fn-mdot{width:7px;height:7px;border-radius:50%;background:#10B981}
.fn-mod.soon{opacity:.7;cursor:default}
.fn-mod.soon .fn-mdot{background:var(--text3)}

/* Module section */
.fn-module{background:var(--bg);padding:84px 40px;scroll-margin-top:128px}
.fn-module.alt{background:var(--surface)}
.fn-inner{max-width:1120px;margin:0 auto}
.fn-mhead{display:flex;align-items:flex-start;gap:18px;max-width:760px}
.fn-micon{width:56px;height:56px;border-radius:16px;background:#F0FDF4;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fn-mtitle-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fn-mtitle{font-size:38px;font-weight:800;letter-spacing:-1.4px;line-height:1}
.fn-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#10B981;background:#F0FDF4;border:1px solid #BBF7D0;padding:4px 11px;border-radius:100px}
.fn-status .fn-ping{width:7px;height:7px;border-radius:50%;background:#10B981;position:relative}
.sn-motion .fn-ping::after{content:'';position:absolute;inset:0;border-radius:50%;background:#10B981;animation:fn-ping 1.8s ease-out infinite}
@keyframes fn-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
.fn-mdesc{font-size:17px;color:var(--text2);line-height:1.65;margin-top:12px;text-wrap:pretty}

/* Steps */
.fn-steps{margin-top:64px;display:flex;flex-direction:column;gap:88px}
.fn-step{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.fn-step.flip .fn-text{order:2}
.fn-step.flip .fn-media{order:1}
.fn-num{font-size:13px;font-weight:800;letter-spacing:2px;color:var(--orange);text-transform:uppercase;margin-bottom:14px}
.fn-step h3{font-size:27px;font-weight:800;letter-spacing:-.8px;line-height:1.15;text-wrap:pretty}
.fn-step .fn-p{font-size:15.5px;color:var(--text2);line-height:1.7;margin-top:14px;max-width:420px;text-wrap:pretty}
.fn-bullets{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.fn-bullet{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text);font-weight:500}
.fn-bullet svg{flex-shrink:0;margin-top:2px}

/* Media frames */
.fn-media{position:relative}
.fn-browser{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:0 18px 60px rgba(70,75,104,.18);transition:transform .3s cubic-bezier(.16,.84,.44,1)}
.fn-browser:hover{transform:translateY(-4px)}
.fn-bbar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#F3F4F8;border-bottom:1px solid var(--border)}
.fn-bbar i{width:11px;height:11px;border-radius:50%;display:block}
.fn-url{flex:1;margin-left:10px;height:22px;background:#fff;border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;padding:0 10px;font-size:11px;color:var(--text3);gap:6px}
.fn-browser img{display:block;width:100%;height:auto}

/* Phone frame */
.fn-phone-wrap{display:flex;justify-content:center}
.fn-phone{width:300px;border-radius:36px;background:#11131f;padding:10px;box-shadow:0 22px 60px rgba(26,29,46,.32);position:relative;transition:transform .3s cubic-bezier(.16,.84,.44,1)}
.fn-phone:hover{transform:translateY(-4px)}
.fn-phone::before{content:'';position:absolute;top:18px;left:50%;transform:translateX(-50%);width:90px;height:6px;background:#2c2f44;border-radius:4px;z-index:2}
.fn-screen{border-radius:28px;overflow:hidden;background:#fff;aspect-ratio:733/1016}
.fn-screen.checkout{aspect-ratio:667/926}
.fn-screen.fit{aspect-ratio:auto}

/* Plain framed card (for cropped widget shots) */
.fn-card-media{display:flex;justify-content:center}
.fn-card{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:0 18px 60px rgba(70,75,104,.18);transition:transform .3s cubic-bezier(.16,.84,.44,1);width:100%}
.fn-card:hover{transform:translateY(-4px)}
.fn-card img{display:block;width:100%;height:auto}
/* Browser frame variant with no top bar (shot already has chrome) */
.fn-browser.bare img{border-radius:14px}
.fn-screen img{display:block;width:100%;height:auto}

/* Floating annotation chips */
.fn-chip{position:absolute;background:#fff;border:1px solid var(--border);border-radius:13px;box-shadow:0 10px 32px rgba(26,29,46,.16);padding:11px 14px;display:flex;align-items:center;gap:10px;z-index:5}
.sn-motion .fn-chip{animation:sn-floaty 6s ease-in-out infinite}
.fn-chip-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fn-chip-l{font-size:10.5px;font-weight:600;color:var(--text2);line-height:1}
.fn-chip-v{font-size:15px;font-weight:800;letter-spacing:-.4px;margin-top:3px;line-height:1}
.fn-cap{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text3);font-weight:600;margin-top:16px}
.fn-cap .fn-livedot{width:7px;height:7px;border-radius:50%;background:var(--orange)}
.sn-motion .fn-cap .fn-livedot{animation:fn-blink 1.6s ease-in-out infinite}
@keyframes fn-blink{0%,100%{opacity:1}50%{opacity:.25}}

/* Why it sells */
.fn-why{background:var(--blue);padding:76px 40px}
.fn-why .fn-inner{max-width:1120px}
.fn-why .lbl{color:rgba(255,255,255,.42)}
.fn-why h2{font-size:34px;font-weight:800;color:#fff;letter-spacing:-1px;text-wrap:pretty}
.fn-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.fn-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:30px 26px}
.fn-stat .num{font-size:46px;font-weight:800;color:#fff;letter-spacing:-2px;line-height:1}
.fn-stat .num .nunit{font-size:24px;color:#FFB4A6}
.fn-stat p{font-size:14px;color:rgba(255,255,255,.65);line-height:1.55;margin-top:12px}

/* reveal (page-local, mirrors sn-motion) */
.sn-motion .fn-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1)}
.sn-motion .fn-reveal.is-in{opacity:1;transform:none}

@media (max-width:980px){
  .fn-hero{padding:52px 28px 32px}
  .fn-hero h1{font-size:40px}
  .fn-modnav-inner{padding:12px 28px}
  .fn-module{padding:64px 28px}
  .fn-why{padding:60px 28px}
  .fn-step{grid-template-columns:1fr;gap:36px}
  .fn-step.flip .fn-text{order:1}
  .fn-step.flip .fn-media{order:2}
  .fn-steps{gap:64px}
  .fn-stats{grid-template-columns:1fr;gap:14px}
}
@media (max-width:620px){
  .fn-hero h1{font-size:30px;letter-spacing:-1px}
  .fn-hero p{font-size:15px}
  .fn-mtitle{font-size:30px}
  .fn-mhead{gap:14px}
  .fn-micon{width:48px;height:48px}
  .fn-step h3{font-size:23px}
  .fn-phone{width:260px}
  .fn-chip{padding:9px 12px}
}

/* ===== PRINT / PDF ===== */
@media print{
  @page{margin:14mm 12mm}
  .nav,.fn-modnav{position:static!important;box-shadow:none!important}
  .sn-motion .fn-reveal,.fn-reveal{opacity:1!important;transform:none!important}
  .fn-chip{animation:none!important}
  .fn-ping::after{animation:none!important}
  .fn-step,.fn-card,.fn-browser,.fn-phone,.fn-mhead,.fn-stat{break-inside:avoid;page-break-inside:avoid}
  .fn-module,.fn-why{break-inside:avoid-page;padding:32px 0!important}
  .fn-why{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .fn-chip{box-shadow:none!important;border:1px solid var(--border)!important}
}