/* ==========================================================================
   BAAN PHO — menu.css  ·  menú fullscreen móvil (componente 2, parte móvil)
   Valores de "Baan Pho - Home v4.dc.html", líneas 666–712.
   Estados: .abierto la pone js; el acordeón de Masajes es .bp-menu-acordeon
   con .abierto (max-height 0 → 900px, como el prototipo).
   ========================================================================== */

.bp-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  overflow-y: auto;
  background-image: linear-gradient(rgba(var(--verde-panel-1), 0.985), rgba(var(--verde-panel-2), 0.99)), var(--trama-masaje);
  background-size: auto, 560px;
}

.bp-menu.abierto {
  opacity: 1;
  pointer-events: auto;
}

.bp-menu-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 26px 40px;
}

.bp-menu-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bp-menu-cabecera img {
  width: 34px;
  height: 30px;
}

/* botón de idioma dentro del menú (variante grande del bp-lang-btn) */
.bp-menu-lang { position: relative; }

.bp-menu-lang-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid rgba(var(--oro-rgb), 0.45);
  border-radius: var(--r-pastilla);
  padding: 11px 17px;
  cursor: pointer;
  color: var(--oro-200);
  font-family: var(--font-sans);
  font-size: var(--fs-nav-compacta);
  letter-spacing: var(--ls-boton);
  font-weight: var(--fw-negrita);
}

.bp-menu-lang-btn .bp-chevron { font-size: var(--fs-chevron-menu); }

@media (hover: hover) {
  .bp-menu-lang:hover .bp-chevron,
  .bp-menu-lang:focus-within .bp-chevron { transform: rotate(180deg); }
}
.bp-menu-lang.abierta .bp-chevron { transform: rotate(180deg); }

.bp-menu-lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 190px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s var(--ease-panel);
  background-image: linear-gradient(rgba(var(--verde-panel-1), 0.99), rgba(var(--verde-panel-2), 0.995)), var(--trama-hojas);
  background-size: auto, 320px;
  border: 1px solid var(--linea-inv);
  border-radius: var(--r-md);
  padding: 8px;
  box-shadow: var(--sombra-desplegable-menu);
}

@media (hover: hover) {
  .bp-menu-lang:hover .bp-menu-lang-menu,
  .bp-menu-lang:focus-within .bp-menu-lang-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}
.bp-menu-lang.abierta .bp-menu-lang-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.bp-menu-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border-radius: var(--r-xs);
  color: var(--texto-inv-2);
  font-size: var(--fs-menu-item);
}
.bp-menu-lang-item:hover { color: var(--texto-inv-2); }
.bp-menu-lang-item--activo,
.bp-menu-lang-item--activo:hover {
  background: rgba(var(--oro-rgb), 0.14);
  color: var(--beige);
}

.bp-menu-lang-check { color: var(--oro-500); font-size: var(--fs-sm); }
.bp-menu-lang-badge {
  color: var(--texto-inv-suave);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-nav);
}

.bp-menu-cerrar {
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--icono-inv);
  font-size: var(--fs-icono-cerrar);
  line-height: 1;
  padding: 0;
}

/* ---- Navegación ---- */
.bp-menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  padding: 44px 0 30px;
  text-align: center;
}

.bp-menu-link {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  letter-spacing: var(--ls-logo);
  color: var(--titular-inv);
  text-transform: uppercase;
}
.bp-menu-link:hover { color: var(--titular-inv); }

/* ---- Acordeón Masajes ---- */
.bp-menu-acordeon {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.bp-menu-acordeon-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
  position: relative;   /* referencia del chevron, que va fuera del flujo */
}

/* el único .bp-menu-link dentro del acordeón es el del botón, así que no hace
   falta encadenar .bp-menu-acordeon-btn para llegar a él */
.bp-menu-acordeon-btn .bp-menu-link { transition: color .3s ease; }
.bp-menu-acordeon.abierto .bp-menu-link { color: var(--oro-200); }

/* El chevron sale del flujo a propósito. Dentro, ocupaba sitio y empujaba
   "Masajes" unos 10px a la izquierda: como el menú centra todos sus rótulos,
   ese era el único que no quedaba alineado con los demás. Fuera del flujo se
   centra la palabra y la flecha la acompaña, colgada a su derecha. */
.bp-menu-acordeon-chevron {
  position: absolute;
  left: 100%;
  top: 50%;
  margin-left: 12px;
  transform: translateY(-50%);
  transition: transform .35s ease;
  color: var(--oro-500);
  font-size: var(--fs-xl);
}
.bp-menu-acordeon.abierto .bp-menu-acordeon-chevron {
  transform: translateY(-50%) rotate(180deg);
}

.bp-menu-despliegue {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .5s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
  width: 100%;
}
.bp-menu-acordeon.abierto .bp-menu-despliegue {
  max-height: 900px;
  opacity: 1;
}

.bp-menu-despliegue-lista {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 0 10px;
}

.bp-menu-cat {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  letter-spacing: var(--ls-cta);
  color: var(--oro-200);
  text-transform: uppercase;
  padding: 4px 0;
}
.bp-menu-cat:hover { color: var(--oro-200); }

.bp-menu-ver {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-cta);
  color: var(--texto-inv-3);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  margin-top: 8px;
}
.bp-menu-ver:hover { color: var(--texto-inv-3); }

/* ---- Reservar (botón contorno) ---- */
.bp-menu-reservar {
  display: block;
  text-align: center;
  border: 1.5px solid var(--oro-500);
  color: var(--oro-200);
  padding: 16px;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-boton-contorno);
  text-transform: uppercase;
  font-weight: var(--fw-fuerte);
  border-radius: var(--r-pastilla);
}
.bp-menu-reservar:hover { color: var(--oro-200); }