/* ═══════════════════════════════════════════════════════════════════════
   LA BARRA DE FUSTESIA EN LAS WEBS ESTÁTICAS DE /sistemas
   Una sola hoja para las cinco páginas (/sistemas, sala, control, cocina y
   carta). Antes cada una llevaba su copia, y las cinco se habían separado de la
   portada: 45 px de alto, el logo pegado al borde (x 20-32 a 1280 px, contra
   128 en la portada), enlaces a 12 px en otro orden y el botón de 28 px.

   Las medidas son las de la barra de la portada, MEDIDAS en fustesia.com el
   05-10-2026 (components/sections/Navbar.tsx + bloque «Navbar» de
   app/globals.css):
     · 48 px de alto en el móvil y 44 desde 768 px; la línea de abajo no suma
       alto (va en una sombra, no en un borde);
     · el contenido, 1.024 px centrados desde 1.024 px de ancho (68 rem con 32 px
       de margen): el logo cae en el mismo píxel que en la portada a cualquier
       ancho (x 128 a 1.280, 448 a 1.920);
     · enlaces a 14 px, #6F6A61, separados 28 px, en el orden de la portada:
       Demo · Cómo funciona · Tus números · Precios · Dudas;
     · «Iniciar sesión» a 14 px y 500; el botón, píldora de tinta de 34 px con
       13 px y 500.
   El selector de idioma de la portada no está: estas páginas no tienen
   traducción y un botón que no traduce nada engaña. Su hueco (67 px + 10 de
   separación) se guarda en blanco para que los enlaces caigan donde en la
   portada.

   Comportamiento por anchos (el de antes): por debajo de 1.024 px no hay
   enlaces (debajo va la subbarra de cada sistema); «Iniciar sesión» desde 768.
   ═══════════════════════════════════════════════════════════════════════ */
.fstnav{position:sticky;top:0;z-index:50;background:#F4EFE6;border:0;box-shadow:0 1px 0 rgba(17,17,17,.06)}
.fstnav-in{box-sizing:border-box;width:100%;max-width:80rem;margin-inline:auto;padding-inline:20px;height:48px;
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.fstnav-marca{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.fstnav-marca img{display:block;height:24px;width:auto}
.fstnav-marca svg{display:block;height:13px;width:auto;color:#111111}
.fstnav-enl{display:flex;align-items:center;gap:28px}
.fstnav-enl a{font-size:14px;line-height:21px;letter-spacing:normal;color:#6F6A61;white-space:nowrap;transition:color .2s cubic-bezier(.16,1,.3,1)}
.fstnav-enl a:hover{color:#111111}
.fstnav-acc{display:flex;align-items:center;gap:6px;flex-shrink:0}
.fstnav-hueco{display:none;width:67px;height:36px}
.fstnav-entrar{display:inline-flex;align-items:center;height:33px;padding:0 10px;border-radius:12px;font-size:14px;font-weight:500;
  color:#3A3528;white-space:nowrap;transition:background-color .22s cubic-bezier(.16,1,.3,1),color .22s cubic-bezier(.16,1,.3,1)}
.fstnav-entrar:hover{background:rgba(17,17,17,.05);color:#111111}
.fstnav-cta{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 16px;border-radius:999px;background:#111111;color:#FFFDF8;
  font-size:13px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;
  transition:background-color .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1)}
.fstnav-cta:hover{background:#3A3528}
.fstnav-cta:active{transform:scale(.97)}
.fstnav-cta:focus-visible,.fstnav-entrar:focus-visible,.fstnav-enl a:focus-visible{outline:2px solid #A37E2C;outline-offset:2px}

@media (min-width:640px){
  .fstnav-in{padding-inline:32px}
  .fstnav-marca{gap:10px}
  .fstnav-marca svg{height:14px}
  .fstnav-acc{gap:10px}
}
@media (min-width:768px){.fstnav-in{height:44px}}
@media (max-width:767px){.fstnav-entrar{display:none}}
@media (max-width:1023px){.fstnav-enl{display:none}}
@media (min-width:1024px){
  .fstnav-in{max-width:68rem}
  .fstnav-hueco{display:block}
}
/* Pantallas dobles (Surface Duo abierto): nada de texto en la bisagra. */
@media (horizontal-viewport-segments:2){.fstnav-enl,.fstnav-hueco{display:none}}
/* En pantallas táctiles, 44 px de toque sin cambiar el dibujo */
@media (pointer:coarse){
  .fstnav-enl a,.fstnav-entrar,.fstnav-cta{position:relative}
  .fstnav-enl a::after,.fstnav-entrar::after,.fstnav-cta::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}