:root{
  --nav-h-desktop: 80px;
  --nav-h-mobile: 68px;
  --bg0:#050816; --bg1:#0a1023; --bg2:#111a39;
  --txt:#eaf2ff; --muted:#bcd0e6;
  --accent-red:#ff3b30; --accent-cyan:#23b6ff; --accent-indigo:#6b76ff; --green:#22c55e;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:'Segoe UI',sans-serif;color:var(--txt)}

/* ===== NAVBAR (estable y a prueba de conflictos) ===== */
body.sobre-page{ padding-top: var(--nav-h-desktop); }
@media(max-width:900px){ body.sobre-page{ padding-top: var(--nav-h-mobile); } }
.sobre-page .navbar{
  position:fixed; top:0; left:0; right:0; width:100%;
  z-index:1100; min-height: var(--nav-h-desktop);
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 40px; background:#010717;
}
@media(max-width:900px){ .sobre-page .navbar{ min-height: var(--nav-h-mobile); padding:10px 20px } }
.sobre-page .logo-container{ display:flex; align-items:center }
.sobre-page .logo-link{ display:flex; align-items:center; gap:10px; text-decoration:none }
.sobre-page .logo-img{ height:60px; width:auto; display:block }
@media(max-width:900px){ .sobre-page .logo-img{ height:48px } }
.sobre-page .logo-text{ color:#fff; font-size:24px; font-weight:700; line-height:1; white-space:nowrap }
@media(max-width:900px){ .sobre-page .logo-text{ font-size:20px } }
.sobre-page .nav-links{ list-style:none; display:flex; gap:60px; align-items:center }
@media(max-width:900px){ .sobre-page .nav-links{ gap:20px } }
.sobre-page .nav-links a{ color:#fff; text-decoration:none; font-weight:500; position:relative; transition:color .25s ease }
.sobre-page .nav-links a::after{ content:''; position:absolute; width:0%; height:2px; bottom:-4px; left:0; background:#fff; transition:width .25s ease }
.sobre-page .nav-links a:hover{ color:#ff0000 }
.sobre-page .nav-links a:hover::after{ width:100% }
.sobre-page .nav-links a.active{ color:#ff4d4d }

/* Capa del hero por debajo de la navbar, sin solapes */
.sobre-page .hero, .sobre-page .hero::before, .sobre-page .bg, .sobre-page .orb{ z-index:0 }
.sobre-page .hero{ margin-top:0 }

/* ===== HERO sin imagen ===== */
.hero{ position:relative; min-height:72vh; display:grid; place-items:center; isolation:isolate; background:
  radial-gradient(1200px 700px at 85% -10%, rgba(35,182,255,.10), transparent 60%),
  radial-gradient(900px 600px at 15% 10%, rgba(255,59,48,.10), transparent 55%),
  linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 60%);
  overflow:hidden }
.bg{ position:absolute; inset:0; z-index:0; pointer-events:none }
.orb{ position:absolute; width:38vmin; height:38vmin; filter: blur(36px); border-radius:50%; opacity:.35; animation: float 14s ease-in-out infinite; will-change: transform }
.orb-red{ background: radial-gradient(circle at 30% 30%, rgba(255,59,48,.55), transparent 60%); top:8%; left:6%; animation-delay:0s }
.orb-cyan{ background: radial-gradient(circle at 70% 40%, rgba(35,182,255,.55), transparent 55%); top:18%; right:8%; animation-delay:2s }
.orb-indigo{ background: radial-gradient(circle at 40% 60%, rgba(107,118,255,.55), transparent 60%); bottom:10%; left:22%; animation-delay:4s }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) translateX(6px) } }

.container{ width:min(1120px,92%); margin-inline:auto }
.hero-inner{ position:relative; z-index:1; text-align:center; padding: 40px 0 56px }
.title{ font-size:clamp(36px,6vw,56px); margin-bottom:8px }
.subtitle{ color:#cfe1ff; font-size:clamp(16px,2.6vw,20px) }
.hero-badges{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:16px }
.badge{ display:inline-flex; align-items:center; gap:8px; background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 75%); background-size:200% 100%; animation: shimmerMove 5.5s linear infinite; border:1px solid rgba(255,255,255,.1); padding:8px 12px; border-radius:999px; color:#eaf2ff }
@keyframes shimmerMove{ 0%{ background-position: 200% 0 } 100%{ background-position: -200% 0 } }
.i{ width:18px; height:18px; display:inline-block; border-radius:4px }
.i-perf{ background: linear-gradient(135deg,#ff7a59,#ff3b30) }
.i-sec{ background: linear-gradient(135deg,#23b6ff,#6b76ff) }
.i-support{ background: linear-gradient(135deg,#22c55e,#16a34a) }

/* QUIÉNES SOMOS */
.about{ padding: 48px 0 }
.about-grid{ display:grid; gap:22px; grid-template-columns: 1fr; }
@media(min-width:980px){ .about-grid{ grid-template-columns: 1.1fr .9fr } }
.about-text h2{ margin-bottom:8px }
.about-text p{ color:#dbe8ff }
.pill-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.pill{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:6px 10px; border-radius:999px; color:#cfe1ff; font-size:13px }
.about-cards{ display:grid; gap:14px; align-content:start }
.mini-card{ background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:16px; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.25); transition: transform .2s ease }
.mini-card:hover{ transform: translateY(-1px) }
.mini-card h3{ margin:6px 0 6px }
.mini-card p{ color:#bcd0e6 }
.mini-icon{ width:42px; height:42px; border-radius:12px }
.i-uptime{ background:linear-gradient(135deg,#22c55e,#16a34a) }
.i-shield{ background:linear-gradient(135deg,#6b76ff,#23b6ff) }
.i-rocket{ background:linear-gradient(135deg,#ff7a59,#ff3b30) }

/* MÉTRICAS */
.metrics{ padding: 28px 0; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) }
.metrics-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px; justify-items:center }
@media(min-width:800px){ .metrics-grid{ grid-template-columns: repeat(4,1fr) } }
.metric-value{ font-size: clamp(28px,5.2vw,40px); font-weight:800; letter-spacing:.5px }
.metric-label{ color:#cfe1ff }

/* DIFERENCIADORES */
.features{ padding: 48px 0 }
.section-title{ text-align:center; margin-bottom:18px }
.features-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:16px }
@media(min-width:980px){ .features-grid{ grid-template-columns: repeat(4,1fr) } }
.feature{ text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:18px; box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px rgba(0,0,0,.25); transition: transform .25s ease, box-shadow .25s ease }
.feature:hover{ transform: translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.3) }
.feature p{ color:#bcd0e6 }
.f-icon{ width:42px; height:42px; border-radius:12px; margin-inline:auto; margin-bottom:8px; transition: transform .25s ease }
.feature:hover .f-icon{ transform: scale(1.05) }
.i-global{ background:linear-gradient(135deg,#23b6ff,#6b76ff) }
.i-automation{ background:linear-gradient(135deg,#ff7a59,#ff3b30) }
.i-observ{ background:linear-gradient(135deg,#22c55e,#16a34a) }
.i-green{ background:linear-gradient(135deg,#00e1a0,#16a34a) }

/* TIMELINE */
.timeline{ padding:48px 0; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) }
.timeline-list{ list-style:none; display:grid; gap:16px; position:relative }
.timeline .timeline-list::before{
  content:''; position:absolute; top:0; bottom:0; left:16px; width:2px;
  background: linear-gradient(180deg, rgba(35,182,255,.65), rgba(107,118,255,.65));
  transform-origin: top; transform: scaleY(0); transition: transform 1200ms cubic-bezier(.2,.65,.3,1);
  box-shadow: 0 0 14px rgba(35,182,255,.45);
}
.timeline .timeline-list.in-view::before{ transform: scaleY(1); }
.tl-item{ display:grid; grid-template-columns: 28px 1fr; gap:12px; align-items:flex-start }
.dot{ width:12px; height:12px; border-radius:50%; background: var(--accent-cyan); margin-top:10px; box-shadow: 0 0 14px rgba(35,182,255,.6) }
.tl-content h4{ margin:0 0 2px }
.tl-content p{ color:#cfe1ff; margin:0 }

/* EQUIPO */
.team{ padding:48px 0 }
.team-grid{ display:grid; grid-template-columns: repeat(1,1fr); gap:16px; }
@media(min-width:800px){ .team-grid{ grid-template-columns: repeat(3,1fr) } }
.person{ text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:18px; transition: transform .25s ease, box-shadow .25s ease; transform-style:preserve-3d }
.person:hover{ transform: rotateX(2deg) rotateY(-2deg); box-shadow:0 10px 30px rgba(0,0,0,.35) }
.person .avatar{ width:72px; height:72px; border-radius:50%; margin:0 auto 8px; background: radial-gradient(circle at 30% 30%, #6b76ff, transparent), radial-gradient(circle at 70% 70%, #23b6ff, transparent); box-shadow: 0 0 16px rgba(35,182,255,.35) }
.person p{ color:#bcd0e6 }

/* CTA FINAL */
.cta{ padding:48px 0; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) }
.cta-inner{ text-align:center }
.cta .btn{ margin: 8px 6px }

/* BOTONES */
.btn{ appearance:none; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition: transform .18s ease, filter .18s ease }
.btn:hover{ filter:brightness(1.08); transform: translateY(-1px) }
.btn-ghost{ background:transparent }
.btn-primary{ background: linear-gradient(90deg,var(--accent-red),#ff7a59); border-color: transparent; box-shadow: 0 2px 22px rgba(255,59,48,.35); animation: glowPulse 3.8s ease-in-out infinite }
@keyframes glowPulse{ 0%,100%{ box-shadow:0 2px 22px rgba(255,59,48,.35)} 50%{ box-shadow:0 4px 28px rgba(255,59,48,.5)} }

/* REVEAL */
.reveal-up{ opacity:0; transform:translateY(16px); animation: none }
.reveal-up.in-view{ animation: fadeUp .7s cubic-bezier(.2,.65,.3,1) forwards }
.reveal-up.delay-1{ animation-delay:.12s }
.reveal-up.delay-2{ animation-delay:.24s }
.reveal-up.delay-3{ animation-delay:.36s }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0) } }

/* RESPONSIVO */
@media(max-width:900px){ :root{ --nav-h-desktop: var(--nav-h-mobile) } }

/* Reduced motion */
.reduce-motion *{ animation: none !important; transition: none !important }


/* === FULL CANVAS BACKGROUND === */
html, body { min-height: 100%; background: var(--bg0); }
body.sobre-page{
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg1) 0%, var(--bg0) 100%) no-repeat fixed;
  background-size: cover;
}


/* === STICKY FOOTER (stable + centered) === */
html, body { height: 100%; }
body.sobre-page, body.contact-page { min-height: 100vh; display: flex; flex-direction: column; }
.footer{
  margin-top: auto; position: relative; z-index: 2;
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px;
  padding:14px 16px; line-height:1.4; text-align:center;
  color:#c9d6ea; background:#020614; border-top:1px solid rgba(255,255,255,.08);
}
.footer .link{ color:#dbe8ff; text-decoration:none; border-bottom:1px dashed rgba(219,232,255,.45); }
.footer .link:hover{ color:#ffffff; border-bottom-color: currentColor; }