/*
  MENÚ PRINCIPAL · compartido por todas las páginas
  En computadora: al pasar el mouse por Obra o Trabajo se despliegan sus secciones,
  y al pasar por Fine Art se despliegan sus dos colecciones.
  En celular: un botón "Menú" abre la lista completa.
  Al entrar, el menú flota transparente sobre la foto; al empezar a bajar aparece la barra oscura
  (eso lo hace js/menu.js agregando la clase "solido").
*/
.sitio {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: #EEE9DF; background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}
/* Sombra suave arriba para que el menú se lea sobre cualquier foto */
.sitio::before {
  content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
  transition: opacity .35s ease;
}
.sitio.solido, .sitio.abierto { background: var(--menu-fondo, #121210); color: var(--menu-texto, #EEE9DF); border-bottom-color: var(--menu-linea, #2A2925); }
.sitio.solido .logo img, .sitio.abierto .logo img { filter: var(--menu-logo, none); }
.sitio.solido::before, .sitio.abierto::before { opacity: 0; }
.sitio .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.sitio .logo { display: block; line-height: 0; }
.sitio .logo img { height: 44px; width: auto; }
@media (max-width: 820px) { .sitio .logo img { height: 36px; } }

.nav-lista, .nav-lista ul { list-style: none; margin: 0; padding: 0; }
.nav-lista { display: flex; gap: 36px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.nav-lista > li { position: relative; }
.nav-lista a { display: block; text-decoration: none; color: inherit; }
.nav-lista > li > a { padding-block: 10px; border-bottom: 1px solid transparent; }
.nav-lista > li > a[aria-current="page"],
.nav-lista > li:hover > a { border-bottom-color: currentColor; }

/* Flechita para los que tienen submenú */
.tiene-sub > a::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .7; }

/* Submenús: escondidos hasta que pasás el mouse o llegás con el teclado */
.sub {
  position: absolute; top: 100%; left: -18px; min-width: 230px;
  background: var(--menu-fondo, #1B1B18); border: 1px solid var(--menu-linea, #2A2925); padding: 10px 0;
  font-size: 12px; letter-spacing: 0.12em;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sub li { position: relative; }
.sub a { padding: 10px 18px; color: var(--menu-suave, #C9C4B9); }
.sub a:hover, .sub a[aria-current="page"] { color: var(--menu-texto, #EEE9DF); background: var(--menu-hover, #24241F); }
.sub .tiene-sub > a::after { transform: translateY(-2px) rotate(-45deg); float: right; margin-top: 6px; }
/* El segundo nivel (las colecciones) se abre a la derecha */
.sub .sub { top: -1px; left: 100%; padding-top: 0; }

li:hover > .sub, li:focus-within > .sub { opacity: 1; visibility: visible; transform: translateY(0); }
/* Si el mouse pasa a otro menú, el que quedó abierto (por un clic) se cierra: nunca hay dos abiertos */
@media (min-width: 821px) {
  .nav-lista:hover > li:not(:hover) .sub, .sub:hover > li:not(:hover) > .sub { opacity: 0; visibility: hidden; transform: translateY(6px); }
}

.boton-menu { display: none; }

/* CELULAR */
@media (max-width: 820px) {
  .boton-menu {
    display: block; background: none; border: 0; color: inherit; cursor: pointer;
    font: inherit; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 0 12px 12px;
  }
  .nav-lista { display: none; }
  .sitio.abierto .nav-lista {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--menu-fondo, #121210); border-bottom: 1px solid var(--menu-linea, #2A2925);
    padding: 8px max(20px, env(safe-area-inset-right, 0px)) 24px max(20px, env(safe-area-inset-left, 0px));
  }
  .sitio.abierto .nav-lista > li > a { padding-block: 14px; border-bottom: 1px solid var(--menu-linea, #2A2925); }
  .sitio.abierto .sub, .sitio.abierto .sub .sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; min-width: 0; padding: 4px 0 8px 16px;
  }
  .sitio.abierto .sub a { padding: 9px 0; background: none; }
  .tiene-sub > a::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sub { transition: none; } }