/**
 * La cabecera compartida.
 *
 * Vive en su propio fichero porque la usan seis paginas con hojas distintas.
 * Si estuviera dentro de una de ellas, cambiarla obligaria a copiar y pegar,
 * que es exactamente como acabamos con seis navegaciones diferentes.
 */
.cab {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 2rem;
  background: #000;
  border-bottom: 1px solid #1f1f1f;
  position: sticky;
  top: 0;
  z-index: 40;
}

.cab-logo {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
}

.cab-nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.cab-nav::-webkit-scrollbar { display: none; }

.cab-nav a {
  color: #9a938a;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.cab-nav a:hover { color: #fff; }
/* La pagina en la que estas se marca sola, para no perderse entre seis */
.cab-nav a[aria-current="page"] { color: #fff; border-bottom-color: #C9A961; }

.cab-der { display: flex; align-items: center; gap: 0.875rem; flex: 0 0 auto; }

.cab-cta {
  background: #C9A961;
  color: #111;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.cab-cta:hover { background: #b8975a; }

.lang-switch {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  overflow: hidden;
}
.lang-switch button {
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: #C9A961; color: #111; }
.lang-switch button:hover:not([aria-pressed="true"]) { color: #fff; }

@media (max-width: 720px) {
  .cab { padding: 0.75rem 1rem; gap: 1rem; }
  .cab-nav { gap: 1rem; }
  .cab-nav a { font-size: 0.8125rem; }
  /* En telefono el boton ocupa demasiado al lado del selector */
  .cab-cta { display: none; }
}

/* El pie de las pantallas de cuenta. Estrecho a proposito: aqui el cliente
   viene a hacer algo, no a leer. */
.pie {
  margin-top: 3rem;
  padding: 1.5rem 2rem 2rem;
  border-top: 1px solid #1f1f1f;
  text-align: center;
}
.pie-enlaces {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.pie-enlaces a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.8125rem;
}
.pie-enlaces a:hover { color: #C9A961; }
.pie-derechos {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 520px) {
  .pie { padding: 1.25rem 1rem 1.75rem; }
  .pie-enlaces { gap: 1rem; }
}