/* menu-offcanvas.css */

.burger {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 99991;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(24, 24, 24, 0.55); /* Fondo negro semitransparente (puedes ajustar el alfa) */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 18px rgba(0,0,0,0.22);
  transition: background 0.2s;
}

.burger-bar {
  width: 28px;
  height: 3px;
  background: #d7b366;
  margin: 4px auto;
  border-radius: 2px;
  transition: all 0.32s cubic-bezier(.88,-0.49,.18,1.38);
}

.burger.active .burger-bar:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.burger.active .burger-bar:nth-child(2) { opacity: 0; }
.burger.active .burger-bar:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.offcanvas-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(20,20,20,0.82);
  pointer-events: none;
  z-index: 99990;
  transition: opacity 0.2s;
}
.offcanvas-overlay.active {
  display: block;
  pointer-events: auto;
  opacity: 1;
}

.offcanvas-menu {
  position: fixed;
  top: 0;
  right: -100vw;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  background-color: #232323;
  box-shadow: -6px 0 24px rgba(0,0,0,0.44);
  padding: 20px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: right 0.38s cubic-bezier(.78,-0.41,.17,1.43);
  overflow-y: auto;
  z-index: 99991;
}

.offcanvas-menu.open {
  right: 0;
}

.close-menu {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2.7rem;
  padding: 6px 28px;
  cursor: pointer;
  align-self: flex-end;
  margin-bottom: 18px;
}

.offcanvas-menu ul {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 15px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px; /* Reducido de 12px a 8px */
}

.offcanvas-menu li {
  width: 50%; /* Cambiado de 90% a 50% para PC */
}

.offcanvas-menu a {
  display: block;
  width: 100%;
  font-size: 1.1rem; /* Reducido de 1.38rem a 1.1rem */
  letter-spacing: 0.5px;
  font-weight: 500; /* Reducido de 700 a 500 */
  padding: 15px 48px 15px 0;
  color: #fff;
  background: rgba(14,14,14,0.41);
  border-radius: 31px 0 0 31px;
  text-decoration: none;
  text-shadow: 0 2px 8px #000;
  transition: background 0.19s, color 0.18s;
  text-align: right;
}

.offcanvas-menu a:hover,
.offcanvas-menu a.active {
  background: linear-gradient(90deg,rgba(214,214,214,0.38)36%,rgba(214,214,214,0.13)100%);
  color: #f2f2f2;
}

@media (max-width: 600px) {
  .burger { right: 10px; top: 12px; }
  .offcanvas-menu { width: 100vw; max-width: 100vw; }
  
  /* Cambios específicos para móvil */
  .offcanvas-menu ul {
    gap: 6px; /* Reducido aún más para móvil */
  }
  
  .offcanvas-menu li {
    width: 85%; /* 80% para móvil como solicitaste */
  }
  
  .offcanvas-menu a {
    font-size: 1rem; /* Tamaño aún más pequeño para móvil */
    font-weight: 400; /* Peso más ligero para móvil */
    padding: 15px 40px 13px 0; /* Padding ligeramente reducido */
  }
}