/* ===== NAV ===== */
.nav {
  position: fixed; top:0; width:100%; z-index:1000;
  background: rgba(13,37,53,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: all 0.3s;
}
.nav-inner {
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 24px;
}
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo img { height:48px; width:48px; border-radius:50%; object-fit:cover; border:2px solid var(--sunset); }
.nav-brand { color:white; }
.nav-brand strong { font-family:'Montserrat',sans-serif; font-size:1.25rem; letter-spacing:1px; }
.nav-brand span { display:block; font-size:0.72rem; color:var(--ocean-light); font-weight:300; letter-spacing:2px; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-links a {
  color:rgba(255,255,255,0.85); text-decoration:none; padding:8px 14px;
  border-radius:8px; font-size:0.88rem; font-weight:500; transition:all 0.2s;
}
.nav-links a:hover { color:white; background:rgba(255,255,255,0.1); }
.btn-contact-nav {
  background: linear-gradient(135deg, var(--sunset), var(--sunset-warm));
  color:white !important; padding:9px 20px !important; border-radius:50px !important;
  font-weight:600 !important; font-size:0.85rem !important;
  box-shadow: 0 4px 15px rgba(255,124,56,0.35);
}
.btn-contact-nav:hover { transform:translateY(-1px); box-shadow: 0 6px 20px rgba(255,124,56,0.45) !important; }

.btn-lang-switch {
  /* FIX: usaba var(--dark) (texto casi negro) sobre el fondo del navbar,
     que también es oscuro (rgba(13,37,53,.92)) — el botón quedaba
     prácticamente invisible en escritorio. Ahora usa el mismo esquema
     claro-sobre-oscuro que ya tenía correctamente la versión .mobile. */
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-lang-switch:hover { background: rgba(255,255,255,0.18); border-color: #fff; }
.btn-lang-switch.mobile {
  margin-top: 4px;
  color: #fff;
}
.btn-lang-switch.mobile:hover { background: rgba(255,255,255,0.12); }
.hamburger { display:none; background:none; border:none; color:white; font-size:1.4rem; cursor:pointer; }

/* ===== MOBILE MENU ===== */
.mobile-menu {
  /* FIX: antes era inset:0 (pantalla completa) con contenido centrado
     verticalmente — se comía toda la pantalla para 3 links. Ahora es un
     panel que cuelga justo debajo del navbar (que se queda visible
     arriba, por eso el z-index sigue por debajo de .nav) y solo ocupa
     lo que su contenido necesita, con un tope de altura + scroll por
     si en el futuro se agregan más links. */
  display:none; position:fixed; top:72px; left:0; right:0; z-index:999;
  background:var(--dark); flex-direction:column;
  align-items:center; justify-content:flex-start; gap:20px;
  padding: 28px 24px 32px;
  max-height: calc(100vh - 72px); overflow-y:auto;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.35);
}
.mobile-menu.open { display:flex; animation:fadeIn 0.25s ease; }
.mobile-menu a {
  color:white; text-decoration:none; font-size:1.3rem;
  font-family:'Montserrat',sans-serif; transition:color 0.2s;
}
.mobile-menu a:hover { color:var(--ocean-light); }
.mobile-menu-close {
  position:absolute; top:16px; right:16px;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); border-radius:50%;
  border:none; color:white; font-size:1.1rem; cursor:pointer;
}

@keyframes fadeIn { from{opacity:0} to{opacity:1} }