/* ============================================
   SIMÓN FARÍAS — SaaS/Tech Dark Theme v2
   ============================================ */
:root {
  --bg-base:     #050d1a;
  --bg-card:     #0a1628;
  --bg-card2:    #0d1f3c;
  --azul:        #0a2a66;
  --azul-mid:    #1a4ba8;
  --azul-bright: #2563eb;
  --cyan:        #06b6d4;
  --cyan-bright: #22d3ee;
  --cyan-glow:   rgba(6,182,212,0.12);
  --green:       #10b981;
  --white:       #ffffff;
  --white-70:    rgba(255,255,255,0.7);
  --white-40:    rgba(255,255,255,0.4);
  --white-10:    rgba(255,255,255,0.07);
  --border:      rgba(255,255,255,0.08);
  --border-cyan: rgba(6,182,212,0.25);
  --text:        #e2e8f0;
  --text-muted:  #94a3b8;
  --radius:      12px;
  --radius-lg:   20px;
  --shadow-cyan: 0 0 40px rgba(6,182,212,0.15);
  --trans:       all 0.25s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:var(--bg-base);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4,h5{font-weight:700;line-height:1.2}

/* TIPOGRAFÍA */
.sf-h1{font-size:clamp(2rem,5vw,3.6rem);font-weight:800;letter-spacing:-0.03em}
.sf-h2{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;letter-spacing:-0.02em}
.sf-h3{font-size:clamp(1.05rem,2vw,1.25rem);font-weight:600}
.sf-lead{font-size:clamp(0.95rem,1.5vw,1.05rem);color:var(--text-muted);line-height:1.75}
.sf-text-white{color:var(--white)}
.sf-text-cyan{color:var(--cyan)}
.sf-text-center{text-align:center}

/* LAYOUT */
.sf-container{max-width:1140px;margin:0 auto;padding:0 24px}
.sf-container-sm{max-width:780px;margin:0 auto;padding:0 24px}
.sf-section{padding:96px 0}
.sf-section-sm{padding:64px 0}
.sf-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.sf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sf-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* BADGE */
.sf-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(6,182,212,0.1);border:1px solid var(--border-cyan);color:var(--cyan);padding:6px 16px;border-radius:100px;font-size:0.75rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px}
.sf-badge::before{content:'';width:6px;height:6px;background:var(--cyan);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* BOTONES */
.sf-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:8px;font-weight:600;font-size:0.92rem;cursor:pointer;border:none;transition:var(--trans);white-space:nowrap}
.sf-btn-cyan{background:var(--cyan);color:#050d1a;box-shadow:0 0 24px rgba(6,182,212,0.3)}
.sf-btn-cyan:hover{background:var(--cyan-bright);transform:translateY(-2px);box-shadow:0 0 40px rgba(6,182,212,0.5)}
.sf-btn-outline{background:transparent;color:var(--cyan);border:1px solid var(--border-cyan)}
.sf-btn-outline:hover{background:var(--cyan-glow);transform:translateY(-2px)}
.sf-btn-ghost{background:var(--white-10);color:var(--white-70);border:1px solid var(--border)}
.sf-btn-ghost:hover{color:var(--white)}
.sf-btn-lg{padding:16px 32px;font-size:1rem}

/* NAVBAR */
.sf-nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 24px;transition:var(--trans)}
.sf-nav.scrolled{background:rgba(5,13,26,0.95);backdrop-filter:blur(16px);border-bottom:1px solid var(--border)}
.sf-nav-inner{max-width:1140px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:70px}
.sf-nav-logo img{height:52px;width:auto;}
.sf-nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.sf-nav-links>li{position:relative}
.sf-nav-links>li>a{color:var(--white-70);font-size:0.88rem;font-weight:500;padding:8px 14px;border-radius:8px;transition:var(--trans);display:flex;align-items:center;gap:5px}
.sf-nav-links>li>a:hover{color:var(--white);background:var(--white-10)}
.sf-nav-links>li>a.has-sub::after{content:'▾';font-size:0.7rem;opacity:0.6}
/* Submenu */
.sf-submenu{position:absolute;top:calc(100% + 8px);left:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:8px;min-width:250px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all 0.2s ease;box-shadow:0 16px 48px rgba(0,0,0,0.6);z-index:100}
.sf-nav-links>li:hover .sf-submenu{opacity:1;visibility:visible;transform:translateY(0)}
.sf-submenu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--text-muted);font-size:0.84rem;transition:var(--trans)}
.sf-submenu a:hover{background:var(--white-10);color:var(--white)}
.sf-submenu-icon{width:28px;height:28px;border-radius:7px;background:var(--cyan-glow);color:var(--cyan);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.85rem}
/* Mobile */
.sf-nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.sf-nav-toggle span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:var(--trans)}
.sf-nav-mobile{display:none;flex-direction:column;background:var(--bg-card);border-top:1px solid var(--border);padding:20px 24px;gap:4px}
.sf-nav-mobile.open{display:flex}
.sf-nav-mobile a{color:var(--white-70);font-size:0.9rem;padding:10px 0;border-bottom:1px solid var(--border)}
.sf-nav-mobile a:hover{color:var(--cyan)}
.sf-nav-mobile .sub-label{font-size:0.7rem;color:var(--text-muted);letter-spacing:0.1em;text-transform:uppercase;padding:14px 0 6px}

/* CARDS */
.sf-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;transition:var(--trans);position:relative;overflow:hidden}
.sf-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:0;transition:var(--trans)}
.sf-card:hover{border-color:var(--border-cyan);box-shadow:var(--shadow-cyan);transform:translateY(-4px)}
.sf-card:hover::before{opacity:1}
.sf-card-icon{width:48px;height:48px;border-radius:12px;background:var(--cyan-glow);color:var(--cyan);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.sf-card-icon svg{width:22px;height:22px}

/* LOGOS */
.sf-logos-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:28px 44px}
.sf-logos-strip img{height:30px;width:auto;opacity:0.4;filter:brightness(0) invert(1);transition:var(--trans)}
.sf-logos-strip img:hover{opacity:0.85}
/* Logo items con fondo claro (sin filtro invert) */
.sf-logo-item img{filter:none !important;opacity:0.8}
.sf-logo-item img:hover{opacity:1}

/* FOOTER */
.sf-footer{background:var(--bg-card);border-top:1px solid var(--border);padding:64px 0 32px}
.sf-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:48px}
.sf-footer-logo{height:32px;width:auto;margin-bottom:14px}
.sf-footer-desc{font-size:0.86rem;color:var(--text-muted);line-height:1.7}
.sf-footer-col h4{color:var(--white);font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px}
.sf-footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.sf-footer-col ul a{color:var(--text-muted);font-size:0.86rem;transition:var(--trans)}
.sf-footer-col ul a:hover{color:var(--cyan)}
.sf-footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;justify-content:space-between;font-size:0.8rem;color:var(--text-muted)}
.sf-footer-bottom a{color:var(--cyan)}

/* WHATSAPP */
.sf-wa-float{position:fixed;bottom:28px;right:28px;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(37,211,102,0.4);z-index:9999;transition:var(--trans)}
.sf-wa-float:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,0.6)}
.sf-wa-float svg{width:28px;height:28px}

/* DIVIDER */
.sf-divider{width:40px;height:3px;background:var(--cyan);border-radius:2px;margin:14px 0 22px}
.sf-divider-center{margin:14px auto 22px}

/* HERO INTERIOR */
.sf-page-hero{background:linear-gradient(135deg,var(--bg-card) 0%,var(--bg-card2) 100%);border-bottom:1px solid var(--border);padding:130px 0 72px}
.sf-page-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.sf-breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(--text-muted);margin-bottom:18px}
.sf-breadcrumb a{color:var(--cyan)}
.sf-breadcrumb span{color:var(--white-40)}

/* CTA BANNER */
.sf-cta-banner{background:linear-gradient(135deg,var(--bg-card2) 0%,#0a1f4e 100%);border:1px solid var(--border-cyan);border-radius:var(--radius-lg);padding:64px 48px;text-align:center;position:relative;overflow:hidden}
.sf-cta-banner::before{content:'';position:absolute;top:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,rgba(6,182,212,0.1) 0%,transparent 70%)}

/* STATS */
.sf-stat-num{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--cyan);line-height:1}
.sf-stat-label{font-size:0.84rem;color:var(--text-muted);margin-top:6px}

/* ANIMACIONES */
.sf-animate{opacity:0;transform:translateY(28px);transition:opacity 0.6s ease,transform 0.6s ease}
.sf-animate.sf-visible{opacity:1;transform:translateY(0)}
.sf-animate-delay-1{transition-delay:0.1s}
.sf-animate-delay-2{transition-delay:0.2s}
.sf-animate-delay-3{transition-delay:0.3s}
.sf-animate-delay-4{transition-delay:0.4s}

/* CÓDIGO DECORATIVO */
.code-block{font-family:'Courier New',monospace;font-size:0.78rem;line-height:1.9;color:var(--text-muted)}
.code-block .c-cyan{color:var(--cyan)}
.code-block .c-green{color:#10b981}
.code-block .c-purple{color:#a78bfa}
.code-block .c-orange{color:#fb923c}
.code-block .c-dim{opacity:0.4}

/* GLOW LINE */
.sf-glow-line{height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent)}

/* UTILS */
.sf-mb-4{margin-bottom:16px}.sf-mb-6{margin-bottom:24px}.sf-mb-8{margin-bottom:32px}.sf-mb-12{margin-bottom:48px}.sf-mt-8{margin-top:32px}
.sf-flex{display:flex}.sf-flex-center{display:flex;align-items:center;justify-content:center}

/* RESPONSIVE */
@media(max-width:1024px){
  .sf-grid-4{grid-template-columns:repeat(2,1fr)}
  .sf-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .sf-nav-links,.sf-nav-cta{display:none}
  .sf-nav-toggle{display:flex}
  .sf-grid-2,.sf-grid-3,.sf-grid-4{grid-template-columns:1fr}
  .sf-footer-grid{grid-template-columns:1fr;gap:32px}
  .sf-footer-bottom{flex-direction:column;gap:10px;text-align:center}
  .sf-section{padding:64px 0}
  .sf-page-hero-inner{grid-template-columns:1fr}
  .sf-cta-banner{padding:40px 24px}
}
@media(max-width:480px){
  .sf-logos-strip img{height:24px}
}

/* ============================================
   EFECTOS GLOBALES — partículas y glows en
   todas las secciones, no solo el hero
   ============================================ */

/* Canvas de partículas global */
.sf-particles-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Todas las secciones oscuras tienen posición relativa */
.sf-section, .sf-page-hero, .logos-sec, .stats-bar, .sf-footer, .vsl-sec {
  position: relative;
}

/* Glow orbs flotantes decorativos */
.sf-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  animation: sf-orb-float 8s ease-in-out infinite;
  z-index: 0;
}
.sf-orb-cyan  { background: rgba(6,182,212,0.06); }
.sf-orb-blue  { background: rgba(37,99,235,0.05); }
.sf-orb-purple{ background: rgba(167,139,250,0.04); }
@keyframes sf-orb-float {
  0%,100% { transform: translateY(0) scale(1); }
  33%     { transform: translateY(-30px) scale(1.05); }
  66%     { transform: translateY(20px) scale(0.97); }
}

/* Líneas de grid tech en secciones */
.sf-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(6,182,212,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,182,212,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* Asegura que el contenido esté sobre los efectos */
.sf-section > .sf-container,
.sf-page-hero > .sf-container,
.stats-bar > .sf-container {
  position: relative;
  z-index: 1;
}

/* Línea glow animada entre secciones */
.sf-section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(6,182,212,0.4) 50%, transparent 100%);
  animation: sf-line-pulse 4s ease-in-out infinite;
}
@keyframes sf-line-pulse {
  0%,100% { opacity: 0.4; }
  50%     { opacity: 1; }
}

/* Dots grid decorativo */
.sf-dots-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(6,182,212,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}