/* Barra superior en TODAS las pantallas (celular, iPad y computador).
   · El selector ES / EN y la casita se quedan arriba, al inicio de la página, y desaparecen al bajar.
   · Solo el menú (tres rayas) queda fijo arriba a la derecha y acompaña todo el recorrido, en su posición de siempre.
   · Detrás de las tres rayas, un círculo discreto del color del fondo: arriba de todo no se ve; aparece (y se va)
     con una transición suave cuando la persona ya bajó (assets/js/menu-circulo.js). La X del menú abierto nunca lo lleva.
   La casita deja libre el hueco del menú para que sigan en fila. */
.lang-switch { position: absolute; }
.nav-icons { position: absolute; padding-right: var(--barra-hueco, 54px); }
#menuBtn {
  position: fixed;
  top: calc(var(--barra-borde, 28px) + env(safe-area-inset-top, 0px));
  right: var(--barra-borde, 28px);
  border-radius: 50%;
  background: rgba(251, 252, 251, 0);
  box-shadow: 0 1px 4px rgba(60, 70, 90, 0);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
html.bajado:not(.menu-activo) #menuBtn {
  background: rgba(251, 252, 251, 0.6); /* ~60 % del color del fondo */
  box-shadow: 0 1px 4px rgba(60, 70, 90, 0.10);
}
html.menu-activo #menuBtn { transition: none; } /* al abrir, el círculo se quita al instante: la X va sola */

/* Celular (hasta 640 px): el menú va a 18 px del borde y la casita deja 54 px (40 + 14 de separación). */
@media (max-width: 640px) {
  .nav-icons { padding-right: 54px; }
  #menuBtn { top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px; }
}

/* ===== ESPACIO BAJO EL ENCABEZADO — AJUSTE ÚNICO PARA TODAS LAS PÁGINAS =====
   Distancia entre la última línea del encabezado (la frase azul; en Contacto, la línea «Have a project in mind…»)
   y el primer contenido: imágenes de la galería, foto de About, postal de Contacto e imagen principal de cada proyecto.
   Cambiar estos dos valores cambia todas las páginas a la vez.
   Computador e iPad: 96 px (1,5 × los 64 px originales). Celular: 50 px (misma proporción respecto al computador que antes). */
:root { --espacio-encabezado: 96px; }
@media (max-width: 640px) { :root { --espacio-encabezado: 50px; } }
/* Bajo la frase azul el navegador deja siempre 2 px (el espacio de la línea de texto que la contiene). En las páginas
   donde el encabezado termina en la frase se descuentan, para que desde la frase haya exactamente --espacio-encabezado,
   igual que en Contacto (que termina en una línea de texto normal). Se calcula solo: no hay que tocarlo. */
:root { --espacio-encabezado-frase: calc(var(--espacio-encabezado) - 2px); }