/* =========================
   Header / Menú
   ========================= */
/* header{ position: sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid rgba(0,0,0,.06); backdrop-filter: saturate(180%) blur(6px); } */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-color);
  border-bottom: 1px solid var(--border-subtle);
}

.nav{ display:flex; align-items:center; justify-content:space-between; height:65px; }
.logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}

.logo img {
  width: 4em;
  height: 4em;
  display: block;
}

.logo .tech-by {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;      /* más pequeño, queda perfecto junto al logo */
  color: #999;             /* gris claro elegante */
  opacity: 0.9;            /* un poco más tenue que el texto normal */
  letter-spacing: 0.5px;   /* mejora la legibilidad en esta fuente */
  white-space: nowrap;     /* evita saltos de línea */
  margin-left: .2rem;      /* separa un poco del logo */
}

.logo a {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: inherit;
  text-decoration: none;
}
.menu{ display:flex; gap:1rem; align-items:center; }
.menu a{ padding:.45rem .6rem; border-radius:.5rem; opacity:.9; }
.menu a:not(.btn):hover,
.menu a:not(.btn):focus-visible{ background: rgba(0,0,0,.04); outline:none; }

/* Botón "Contacto" dentro del menú: usa el mismo hover por sombra, sin desplazamiento */
.menu .btn-primary:hover,
.menu .btn-primary:focus-visible{
  background: var(--secondary-color);
  color:#fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Menú “Más” (desplegable) */
.menu-more{ position: relative; }
.menu-more button{
  all: unset;
  cursor: pointer;
  padding:.45rem .6rem;
  border-radius:.5rem;
  font: inherit;
  color: inherit;
  opacity:.9;
}
.menu-more button:hover,
.menu-more button:focus-visible{ background: rgba(0,0,0,.04); outline:none; }
.menu-more__panel{
  position:absolute; top:100%; left:0; min-width:180px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:none; padding:.35rem; z-index:100;
}
.menu-more__panel a{ display:block; padding:.5rem .6rem; border-radius:.35rem; }
.menu-more__panel a:hover{ background: rgba(0,0,0,.04); }
.menu-more[aria-expanded="true"] .menu-more__panel{ display:block; }

/* El contenedor del header debe permitir posicionamiento absoluto */
.nav { position: relative; }

/* Botón de idioma: estilo compacto */
.lang-btn{
  padding:.45rem .8rem;
  font-size:.9rem;
  font-weight:600;
  line-height:1;
}

/* En móvil/tablet vertical: posición fija arriba dcha */
@media (max-width:980px){
  .lang-btn{
    position:absolute;
    top:.6rem;
    right: max(1rem, env(safe-area-inset-right));
    z-index:60; /* por encima del contenido del header */
  }
}

/* En escritorio: que quede al lado del menú */
@media (min-width:981px){
  .lang-btn{ margin-left:.5rem; }
  .language-switcher{
        margin-left: 2rem;
    }
}

/* =========================
   Menú responsive
   ========================= */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-left: auto;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
}

.menu-toggle:hover {
  background: rgba(16, 91, 99, .08);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  border-radius: 999px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 980px) {
  .menu-toggle {
    display: block;
  }

  .menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: #fff;
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }

  .menu.is-open {
    display: flex;
  }

  .menu > a,
  .menu .menu-more {
    width: 100%;
  }

  .menu > a {
    padding: .9rem 0;
    border-bottom: 1px solid rgba(0,0,0,.07);
  }
}