/* index.css (FIX: navbar unificada y bug de coma) */
:root{ --nav-h: 80px; }
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ font-family:'Segoe UI', sans-serif; height:100%; }
/* Compensación por navbar fija */
body{ padding-top: var(--nav-h); }

/* NAVBAR (fija y encima) */
.navbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 40px; background-color:#010717;
  position:fixed; top:0; left:0; right:0; width:100%; z-index:1000;
}
.logo-container{ display:flex; align-items:center; gap:10px; }
.logo-img{ height:60px; width:auto; }
.logo-text{ color:#fff; font-size:24px; font-weight:bold; }
.nav-links{ list-style:none; display:flex; gap:60px; }
.nav-links a{ color:#ffffff; text-decoration:none; font-weight:500; position:relative; transition:color 0.3s ease; }
.nav-links a::after{ content:''; position:absolute; width:0%; height:2px; bottom:-4px; left:0; background-color:#fff; transition:width 0.3s ease; }
.nav-links a:hover{ color:#ff0000; }
.nav-links a:hover::after{ width:100%; }

/* HERO */
.hero{ background:url('keyboard-background.png') no-repeat center center/cover; height:100vh; display:flex; align-items:center; justify-content:center; position:relative; }
.hero::before{ content:''; position:absolute; inset:0; background:rgba(0,0,0,0.6); z-index:0; }
.hero-text{ color:#fff; text-align:center; position:relative; z-index:1; }
.hero-text h1{ font-size:75px; margin-bottom:10px; animation:fadeIn 2s ease-in-out forwards; opacity:0; }
.hero-text p.slide-left{ font-size:22px; font-style:italic; font-family:'Courier New', Courier, monospace; animation:slideLeftRight 4s ease-in-out infinite alternate; opacity:1; }

/* Animaciones */
@keyframes fadeIn{ to{ opacity:1; transform:scale(1.05);} }
@keyframes slideUp{ from{ transform:translateY(30px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
@keyframes slideLeftRight{ 0%{ transform:translateX(0);} 50%{ transform:translateX(-30px);} 100%{ transform:translateX(0);} }

/* FIX de sintaxis: quitar coma sobrante y definir .logo-link correctamente */
.logo-link{ display:flex; align-items:center; gap:10px; text-decoration:none; }

/* Responsivo */
@media(max-width:900px){ :root{ --nav-h: 68px; } .nav-links{ gap:20px; } .logo-img{ height:48px; } .logo-text{ font-size:20px; } .navbar{ padding:10px 20px; } }


/* === ENHANCE: landing effects (no DOM changes) === */
/* 1) Hero Ken Burns (suave) */
.hero{ overflow:hidden; }
.hero::before{ /* existing dark overlay ya definido */ }
.hero::after{
  content:''; position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background: radial-gradient(800px 500px at 20% 10%, rgba(35,182,255,.10), transparent 60%),
              radial-gradient(600px 400px at 80% 20%, rgba(255,59,48,.10), transparent 55%),
              radial-gradient(700px 480px at 50% 85%, rgba(107,118,255,.10), transparent 60%);
  animation: orbsFloat 14s ease-in-out infinite;
}
@keyframes orbsFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
/* Ken Burns del fondo */
.hero{ animation: kenBurns 16s ease-in-out infinite; }
@keyframes kenBurns{ 0%{ background-size: 100% auto; } 50%{ background-size: 108% auto; } 100%{ background-size: 100% auto; } }

/* 2) Título con shine + neón sutil (fallback a text-shadow) */
.hero-text h1{
  background: linear-gradient(90deg,#fff 0%, #dbe8ff 20%, #ffffff 40%, #dbe8ff 60%, #fff 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 10px rgba(219,232,255,.35), 0 0 24px rgba(107,118,255,.25);
  background-size: 200% 100%;
  animation: fadeIn 2s ease-in-out forwards, titleShine 5.5s linear infinite 2s;
}
@keyframes titleShine{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }

/* 3) Subtítulo estilo terminal con caret */
.hero-text p.slide-left{
  position:relative; padding-right:10px;
}
.hero-text p.slide-left::after{
  content:''; position:absolute; right:0; top:50%; width:6px; height:1.2em; transform:translateY(-55%);
  background:#dbe8ff; box-shadow:0 0 10px rgba(219,232,255,.8);
  animation: caretBlink 1s steps(1,end) infinite;
}
@keyframes caretBlink{ 0%,40%{ opacity:1 } 50%,100%{ opacity:.05 } }

/* 4) Navbar links: subrayado degradado y hover glow */
.nav-links a::after{ background: linear-gradient(90deg,#23b6ff,#6b76ff,#ff3b30); }
.nav-links a:hover{ text-shadow: 0 0 10px rgba(255,255,255,.25); }

/* 5) Cards genéricos: si existen, elevación y shine al hover sin tocar HTML */
section .card, .card, .tile, .feature{
  position:relative; 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; backdrop-filter: blur(6px);
  transition: transform .2s ease, box-shadow .2s ease;
}
section .card:hover, .card:hover, .tile:hover, .feature:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
section .card:hover::after, .card:hover::after, .tile:hover::after, .feature:hover::after{
  content:''; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: shineSweep 1.1s ease forwards;
}
@keyframes shineSweep{ to{ transform: translateX(120%); } }

/* 6) Reduced-motion: desactiva animaciones intensas */
@media (prefers-reduced-motion: reduce){
  .hero, .hero::after, .hero-text h1, .hero-text p.slide-left, .nav-links a::after{ animation: none !important; }
}