/* nav-mobile.css — ArkiaOS */
.nav-toggle{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  margin-left:auto;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{
  display:block; width:24px; height:2px; border-radius:2px;
  background:#e5e7eb;
  transition:transform .3s ease, opacity .3s ease;
}
.nav-arkia.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-arkia.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav-arkia.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:768px){
  .nav-arkia .nav-inner{
    padding:0.8rem 1rem !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
  }
  .nav-toggle{ display:flex !important; }
  .nav-arkia .nav-links{
    display:none !important;
    position:absolute !important;
    top:100% !important; left:0 !important; right:0 !important;
    margin:0 !important;
    padding:0.5rem 1.25rem 1.25rem !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    background:rgba(10,10,10,0.98) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    border-bottom:1px solid rgba(45,212,191,0.2) !important;
    box-shadow:0 20px 40px rgba(0,0,0,0.45) !important;
  }
  .nav-arkia.open .nav-links{ display:flex !important; }
  .nav-arkia .nav-links a{
    font-size:0.95rem !important;
    text-align:center !important;
    padding:0.9rem 0.5rem !important;
    border-bottom:1px solid rgba(255,255,255,0.06) !important;
    white-space:normal !important;
  }
  .nav-arkia .nav-links a.active::after{ display:none !important; }
  .nav-arkia .nav-links a.active{
    background:rgba(45, 212, 191, 0.08) !important;
    border-radius:8px !important;
  }
  .nav-arkia .nav-links a.btn-contact{
    border-bottom:none !important;
    margin-top:1rem !important;
    padding:0.7rem 1.25rem !important;
  }
}

/* Enlace "Saltar al contenido": invisible hasta que recibe foco con Tab */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:#2dd4bf; color:#0a0a0a; padding:.6rem 1rem; font-weight:700;
}
.skip-link:focus{ left:0; }

/* ═══════════════════════════════════════════════════════════════
   ESTILO DEL ENLACE ACTIVO (Escritorio)
═══════════════════════════════════════════════════════════════ */
.nav-arkia .nav-links a {
  color: #a0a0a0;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-arkia .nav-links a:hover {
  color: #2dd4bf;
}

.nav-arkia .nav-links a.active {
  color: #2dd4bf !important;
  font-weight: 600;
  position: relative;
}

.nav-arkia .nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2dd4bf;
  border-radius: 2px;
}

.nav-arkia .nav-links a.btn-contact {
  background: #2ca58d;
  color: #fff !important;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

.nav-arkia .nav-links a.btn-contact:hover {
  background: #238a75;
}
/* Enlace "Saltar al contenido": invisible hasta que recibe foco con Tab */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: #2dd4bf;
    color: #0a0a0a;
    padding: 0.6rem 1rem;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    left: 0; /* Solo aparece aquí cuando se presiona Tab */
}