/* =====================================================================
   Barra superior y menú — comunes al mapa y a las páginas de texto.
   Usa las variables de color de app.css o paginas.css (mismos nombres).
   Móvil:      [combustible o ‹ MAPA]   [logo] FUELIS   [☰]
   Escritorio: [‹ MAPA]      [logo] FUELIS  CÓMO FUNCIONA · … · ANÚNCIATE      [libre]
               (logo y enlaces juntos, centrados en la pantalla; "‹ MAPA" a la
               izquierda de la columna de 960 px de las páginas de texto; la derecha,
               libre para el buscador de la Fase 2)
   La página actual se marca "hundida", como la pantalla de precios del tótem.
   ANÚNCIATE va destacado: botón con borde en el ordenador y recuadro arriba del
   menú en el móvil.
   La barra y el menú son siempre oscuros, también en las páginas de lectura
   (que son claras): por eso llevan sus propios colores aquí.
   ===================================================================== */
.barra-sup, .menu {
  --n1: #111317; --n2: #181B20; --n3: #20242A;
  --borde1: #1F2227; --borde2: #2B2F35; --borde3: #343940;
  --texto: #EDEBE6; --texto2: #B4B7BC; --texto3: #9A9EA5; --texto4: #8C9198;
  --pantalla: #040506; --n0: #0A0B0D;
}
.menu[hidden], .menu-fondo[hidden], .menu-lista li[hidden], .bs-nav a[hidden], [data-instalar][hidden] { display: none !important; }

.barra-sup {
  flex: none; position: relative; z-index: 6;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--e2);
  min-height: 56px; box-sizing: border-box;
  padding: max(6px, env(safe-area-inset-top)) max(var(--e3), env(safe-area-inset-right)) 6px max(var(--e3), env(safe-area-inset-left));
  background: var(--n1); border-bottom: 1px solid var(--borde1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.bs-izq { justify-self: start; min-width: 0; max-width: 100%; display: flex; }
.bs-der { justify-self: end; display: flex; align-items: center; gap: var(--e2); }

/* Nombre (provisional, hasta tener logotipo) */
.bs-marca {
  justify-self: center; display: inline-flex; align-items: center; gap: var(--e2); padding: var(--e1);
  font-family: var(--estrecha); font-weight: 700; font-size: 18px; letter-spacing: 0.12em;
  color: var(--texto); text-decoration: none; white-space: nowrap;
}

.bs-logo { flex: none; display: block; width: 28px; height: 28px; border-radius: 6px; box-shadow: 0 0 0 1px var(--borde2); }
/* Páginas de texto: la barra se queda fija arriba al desplazar la página */
.barra-sup.en-pagina { position: sticky; top: 0; }
/* Móviles estrechos: un poco menos de margen para que quepa todo */
@media (max-width: 399px) {
  .barra-sup { gap: 6px; padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .bs-marca { gap: 5px; font-size: 16px; letter-spacing: 0.08em; }
  .bs-logo { width: 22px; height: 22px; border-radius: 5px; }
}

/* Botón "‹ MAPA" de las páginas de texto */
.bs-volver {
  display: inline-flex; align-items: center; gap: var(--e1);
  min-height: 44px; padding: 0 var(--e3) 0 var(--e2); box-sizing: border-box;
  background: #1B1E23; border: 1px solid var(--borde2); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--texto); text-decoration: none;
  font-family: var(--estrecha); font-weight: 700; font-size: 13px; letter-spacing: 0.12em;
}
.bs-volver svg, .bs-menu svg, .menu-cerrar svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Botón del menú (tres rayas) */
.bs-menu {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; color: var(--texto); border: 1px solid transparent; border-radius: 4px; cursor: pointer;
}
.bs-menu:hover, .bs-menu[aria-expanded="true"] { background: #1B1E23; border-color: var(--borde2); }

/* Enlaces de la barra (solo en el ordenador) */
.bs-nav { display: none; align-items: center; gap: var(--e1); }
.bs-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e3); border-radius: 4px;
  font-family: var(--estrecha); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto2); text-decoration: none;
}
.bs-nav a:hover { color: var(--texto); background: #1B1E23; }
.bs-nav a[aria-current="page"] { color: var(--texto); background: var(--pantalla); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.05); }
/* Anúnciate: botón con borde blanco, separado de los demás enlaces */
.bs-nav a.bs-destacado { margin-left: var(--e2); min-height: 40px; color: var(--texto); border: 1.5px solid var(--texto); }
.bs-nav a.bs-destacado:hover { background: var(--texto); color: var(--n0); }
.bs-nav a.bs-destacado[aria-current="page"] { border-color: var(--borde3); }

/* Páginas de lectura: raya fina con la escala de precios bajo la barra (azul → crema → naranja) */
.barra-sup.en-pagina::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #5CC8FF, #E6E1D6 50%, #FF9F43);
}

@media (min-width: 900px) {
  /* Cuatro columnas: las dos de los lados miden lo mismo, así logo y enlaces quedan
     centrados. Si "‹ MAPA" no cabe, su columna crece y empuja (nunca se solapan). */
  .barra-sup { grid-template-columns: 1fr auto auto 1fr; gap: var(--e3); padding-left: var(--e4); padding-right: var(--e4); }
  .barra-sup.en-pagina { padding-left: max(var(--e4), calc((100% - 960px) / 2)); padding-right: max(var(--e4), calc((100% - 960px) / 2)); }
  .bs-izq { grid-column: 1; }
  .bs-marca { grid-column: 2; font-size: 17px; margin-right: var(--e3); }
  .bs-der { display: contents; }
  .bs-nav { display: flex; grid-column: 3; }
  .bs-menu { display: none; }
}

/* ---------- Menú (móvil): panel desde la derecha ---------- */
.menu-fondo { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.55); }
.menu {
  position: fixed; z-index: 31; top: 0; right: 0; bottom: 0;
  width: min(340px, 88vw); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  padding: max(var(--e2), env(safe-area-inset-top)) max(var(--e4), env(safe-area-inset-right)) max(var(--e5), env(safe-area-inset-bottom)) var(--e4);
  background: var(--n2); border-left: 1px solid var(--borde2);
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.55), inset 1px 0 0 rgba(255, 255, 255, 0.04);
  animation: menu-entrar 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes menu-entrar { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .menu { animation: none; } }
.menu-cab { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: var(--e2); }
.menu-titulo { margin: 0; font-family: var(--estrecha); font-weight: 700; font-size: 12px; letter-spacing: 0.16em; color: var(--texto3); }
.menu-cerrar {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px;
  background: transparent; border: 0; border-radius: 4px; color: var(--texto2); cursor: pointer;
}
.menu-cerrar:hover { background: #2A2F36; color: var(--texto); }
/* Anúnciate: recuadro destacado arriba del menú (todo él se puede tocar) */
.menu-anunciate {
  display: flex; flex-direction: column; gap: 4px; margin: 0 0 var(--e4); padding: var(--e4);
  background: var(--n3); border: 1px solid var(--borde3); border-radius: 6px; text-decoration: none; color: var(--texto);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.menu-anunciate-etiqueta { font-family: var(--estrecha); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; color: var(--texto3); }
.menu-anunciate-texto { font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.35; }
.menu-anunciate-boton {
  display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: var(--e2);
  background: var(--texto); color: var(--n0); border-radius: 4px;
  font-family: var(--estrecha); font-weight: 700; font-size: 15px; letter-spacing: 0.12em;
}
.menu-anunciate:hover .menu-anunciate-boton { background: #fff; }
.menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-lista li + li { border-top: 1px solid var(--borde1); }
.menu-lista a {
  display: flex; flex-direction: column; gap: 3px; min-height: 64px; justify-content: center;
  padding: var(--e2) var(--e1); color: var(--texto); text-decoration: none; border-radius: 4px;
}
.menu-lista a:hover { background: #1F2329; }
.menu-nombre { font-family: var(--estrecha); font-weight: 700; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; }
.menu-desc { font-family: "Archivo", system-ui, sans-serif; font-size: 13px; line-height: 1.35; color: var(--texto3); }
.menu-lista a[aria-current="page"] {
  padding-left: var(--e3); padding-right: var(--e3);
  background: var(--pantalla); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.menu-lista a[aria-current="page"]:hover { background: var(--pantalla); }
.menu-pie { margin-top: auto; padding-top: var(--e5); font-family: "Archivo", system-ui, sans-serif; font-size: 13px; line-height: 1.5; color: var(--texto4); }
.menu-pie p { margin: 0 0 var(--e2); }
.menu-pie a { display: inline-flex; align-items: center; min-height: 40px; color: var(--texto2); }
/* Con el menú abierto, la página de detrás no se desplaza */
.menu-abierto, .menu-abierto body { overflow: hidden; }

/* Número de versión (al pie del menú y de las páginas de lectura) */
.version-web { margin: var(--e2) 0 0; font-size: 12px; color: var(--texto4); }