/* Chrome de cabecera: barra fija, menú de escritorio y panel de móvil.
   Portado de kocsa-design-hub/docs/assets/styles.css.
   Vive en el tema y no en un bloque porque es el chrome del sitio: el bloque
   kocsa/cabecera lo instancia dentro de parts/cabecera.html. */

.kcs-cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--kcs-color-neutral-velo-nav);
  backdrop-filter: blur(11px);
  border-bottom: 1px solid var(--kcs-color-neutral-canvas);
  padding: var(--kcs-espaciado-03);
  /* El frame de 375 da 80 px de alto para el Nav y el relleno con el logo da 77. Se
     probó fijar 80 y empeoró siete de las nueve pantallas: el render de la referencia
     sitúa el contenido de la página como si el nav midiera 77, así que manda el render
     y no la caja del componente. Pendiente de que Narita confirme cuál manda. */
}
.kcs-cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcs-espaciado-04);
  width: 100%;
  max-width: var(--kcs-layout-ancho-80);
  margin-inline: auto;
}
.kcs-logo { display: block; width: 122.9px; }
.kcs-logo img { width: 100%; height: auto; }
.kcs-menu { display: none; }
.kcs-menu__enlace {
  font-size: var(--kcs-font-escala-l100);
  font-weight: var(--kcs-font-pesos-bold);
  text-transform: uppercase;
  text-decoration: none;
}
.kcs-menu-movil {
  padding: var(--kcs-espaciado-005) 0;
  font-family: var(--kcs-font-body);
  font-size: var(--kcs-font-escala-l100);
  font-weight: var(--kcs-font-pesos-bold);
  text-transform: uppercase;
  color: var(--kcs-color-brand-primary);
  background: none;
  border: 0;
}

/* Menú desplegado en móvil · componente Nav / Dimensions=xs, State=Open ---- */
/* Medidas del componente: panel de 441 px con relleno de 20, barra superior de 40 con el
   logotipo a 109x32 y el cierre a la derecha, y la lista con 32 de separación más 20 de
   relleno propio. El fondo es el azul de marca al 80 % con desenfoque de fondo, y el logo y
   el enlace de cierre van en naranja, no en blanco. */
.kcs-menu-desplegado {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: var(--kcs-espaciado-015);
  padding: var(--kcs-espaciado-03);
  background: var(--kcs-color-neutral-surface-velo);
  backdrop-filter: blur(11px);
  border-bottom: 1px solid var(--kcs-color-neutral-canvas);
}
.kcs-menu-desplegado[hidden] { display: none; }
.kcs-menu-desplegado__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}
.kcs-menu-desplegado__logo { display: block; width: 109.2px; }
.kcs-menu-desplegado__logo img { width: 100%; height: auto; }
.kcs-menu-desplegado__cerrar {
  padding: var(--kcs-espaciado-005) 0;
  font-family: var(--kcs-font-body);
  font-size: var(--kcs-font-escala-l100);
  font-weight: var(--kcs-font-pesos-bold);
  text-transform: uppercase;
  color: var(--kcs-color-brand-primary);
  background: none;
  border: 0;
  cursor: pointer;
}
.kcs-menu-desplegado__enlaces {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kcs-espaciado-05);
  padding-block: calc(var(--kcs-espaciado-05) + var(--kcs-espaciado-03));
  font-size: var(--kcs-font-escala-l100);
  font-weight: var(--kcs-font-pesos-bold);
  text-transform: uppercase;
}
.kcs-menu-desplegado__enlaces a { text-decoration: none; }
.kcs-menu-desplegado__enlaces .kcs-btn { text-transform: uppercase; }

/* Escritorio: 1024 px en adelante --------------------------------------- */

@media (min-width: 1024px) {
  .kcs-cabecera { padding: var(--kcs-espaciado-04) var(--kcs-espaciado-03); }
  .kcs-menu { display: flex; align-items: center; gap: 45px; }  /* medida propia del diseño */
  .kcs-menu-movil { display: none; }
  .kcs-menu-desplegado { display: none; }
}