/* RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Roboto',sans-serif;
  color: var(--text-primary);
  background: var(--bg-dark);
  /* Scroll nativo del sistema operativo — más suave en móvil y trackpad */
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ===== CAPAS DE FONDO (slideshow) ===== */
.bg-layer{
  position:fixed;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
  opacity:0;
  transition:opacity 1.1s ease;
  pointer-events:none;
}

.bg-layer.visible{
  opacity:1;
}

body.home{
  overflow:hidden;
}

/* NAV */
.sidenav{
  position:fixed;
  left:0;
  top:0;
  height:100vh;
  width:220px;
  padding:40px 30px;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--border-subtle);
  background: var(--bg-dark);
  z-index:10;
  /* Promueve el nav a su propia capa GPU — al hacer scroll en el main
     el navegador no tiene que repintar el nav en cada frame */
  will-change: transform;
  transform: translateZ(0);
}

.nav-top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.menu-toggle{
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:5px;
  width:20px;
  height:20px;
  position:relative;
}

.menu-toggle span{
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background: var(--color-logo);
  display:block;
  transition:0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin:center;
}

/* posición inicial */
.menu-toggle span:nth-child(1){
  top:6px;
}

.menu-toggle span:nth-child(2){
  top:12px;
}

/* estado activo (X centrada) */
.sidenav.active .menu-toggle span:nth-child(1){
  top:9px;
  transform:rotate(45deg);
}

.sidenav.active .menu-toggle span:nth-child(2){
  top:9px;
  transform:rotate(-45deg);
}

/* LOGO */
.logo{
  text-decoration:none;
  font-weight:var(--font-logo);
  font-size:14px;
  letter-spacing:4px;
  margin-bottom:10px;
  color: var(--color-logo);
}

/* LINKS */
.nav-links{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:25px;
  margin-top:40px;

  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
  transition:0.4s ease;
}

.sidenav.active .nav-links{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.nav-links a{
  position:relative;
  text-decoration:none;
  font-size:11px;
  letter-spacing:2px;
  color: var(--text-muted-3);
  transition:0.3s;
}

/* Línea animada */
.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0%;
  height:1px;
  background: var(--text-primary);
  transition:0.3s ease;
}

/* Hover */
.nav-links a:hover{
  color: var(--text-primary);
  text-shadow:0 0 6px rgba(255,255,255,0.4); /* glow sutil */
}

/* Activación de la línea */
.nav-links a:hover::after{
  width:100%;
}

/* MAIN */
.main{
  margin-left:220px;
  height:100vh;
  position:relative;
  z-index:1;
}

/* HERO */
.hero{
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}

/* GRID FUTURISTA */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--hero-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid-color) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:0.08;
}

/* CONTENIDO */
.hero-content{
  text-align:center;
  z-index:1;
}

/* TITULO */
.hero-title{
  font-size:clamp(80px, 12vw, 160px);
  font-weight:var(--font-title);
  letter-spacing:10px;
  color: var(--color-logo);
}

/* DESCRIPCIÓN */
.hero-desc{
  margin-top:25px;
  font-size:14px;
  color: var(--text-muted-4);
  letter-spacing:1px;
  line-height:1.6;
  max-width: 400px;    /* o el ancho que quieras */
  margin-left: auto;
  margin-right: auto;
}

/* =============================================
   RESPONSIVE — TOP BAR EN MÓVIL (<= 768px)
   Desktop no cambia absolutamente nada.
============================================= */
@media (max-width: 768px){

  /* Sidenav → top bar horizontal fija */
  .sidenav{
    width: 100%;
    height: 56px;
    min-height: 56px;
    flex-direction: row;
    align-items: center;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    overflow: hidden;
    gap: 0;
    justify-content: flex-start;
  }

  /* Ocultar hamburguesa */
  .menu-toggle{
    display: none;
  }

  /* nav-top (logo): mismo flex que cada link, siempre primero a la izquierda */
  .nav-top{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 1;
  }

  /* Logo: mismo tamaño visual que los links */
  .logo{
    margin-bottom: 0;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-align: center;
    white-space: nowrap;
  }

  /* nav-links: display:contents sube los li al nivel del sidenav para que order funcione */
  .nav-links{
    display: contents;
  }

  /* Cada li: flex item directo del sidenav */
  .nav-links li{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .nav-links a{
    font-size: 9px;
    letter-spacing: 1.5px;
    text-align: center;
    white-space: nowrap;
  }

  /* Main: sin margin-left, con padding-top por el top bar */
  .main{
    margin-left: 0;
    padding-top: 56px;
    height: 100vh;
  }

  /* Hero title escala en móvil */
  .hero-title{
    font-size: clamp(44px, 14vw, 90px);
    letter-spacing: 5px;
  }

  .hero-desc{
    font-size: 12px;
    padding: 0 20px;
  }
}