/* Cabecera de las fichas tecnicas.

   Es la misma barra del sitio, con la misma marca, los mismos enlaces y el
   mismo boton de cotizar, para que pasar de la pagina a una ficha no se sienta
   como salir a otro lado. Va aparte y no enlazando estilos.css porque esa hoja
   trae tambien el cuerpo, los titulares y las secciones del sitio, y pisaria
   el diseno propio de la ficha.

   Los valores estan copiados de estilos.css: si alli cambia la barra, hay que
   traer el cambio aqui. */

.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px clamp(20px, 4vw, 52px);
  transition: background-color 220ms cubic-bezier(0.23, 1, 0.32, 1),
              padding 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.barra--pegada {
  background: rgba(1, 27, 38, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #123B4F;
  padding-top: 12px; padding-bottom: 12px;
}
.barra__marca img { width: 170px; height: auto; display: block; }

.barra__nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.barra__nav a {
  font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.94rem; text-decoration: none; color: #A9BCC6;
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.barra__nav a:not(.boton):hover { color: #EEF3F5; }

.boton {
  display: inline-block;
  background: #F0A202; color: #17140A;
  font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600; font-size: 1rem;
  padding: 15px 30px; border: 1px solid #F0A202; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.boton--chico { padding: 9px 20px; font-size: 0.9rem; }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { transform: translateY(-2px); background: #FFB520; }
}
.boton:active { transform: translateY(0); }

@media (max-width: 780px) {
  .barra__nav a:not(.boton) { display: none; }
  .barra__marca img { width: 140px; }
}

/* La barra flota encima del hero, como en el sitio. El hero de la ficha tenia
   apenas 72 px de holgura arriba y la barra mide 95: sin este respiro el
   antetitulo y el filo del titular quedaban debajo de la marca. */
.hero { padding-top: 120px; }