/* Componentes del sistema: botones, tarjetas, insignias, campos y logo. */

/* ---------- Logo ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-cream);
}

.logo__marca {
  width: 34px;
  height: auto;
}

.logo__texto {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.2em;
  white-space: nowrap;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  font-family: var(--font-arial);
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* En pantallas muy angostas el texto del botón puede partirse, pero el de la nav no */
.nav__cta {
  white-space: nowrap;
}

.btn--primario {
  background: var(--color-powder-blue);
  color: var(--color-on-accent);
}

.btn--primario:hover {
  background: var(--color-blue-hover);
}

.btn--primario:active {
  background: var(--color-blue-pressed);
}

.btn--fantasma {
  background: transparent;
  border-color: var(--color-mid-slate);
  color: var(--color-cream);
}

.btn--fantasma:hover {
  background: var(--color-hover-slate);
}

/* Flecha ↗ de los enlaces que salen del sitio */
.btn svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* ---------- Tarjetas ---------- */

.tarjeta {
  background: var(--color-slate);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}

.tarjeta--hundida {
  background: var(--color-deep-ink);
}

/* ---------- Insignias ---------- */

.insignia {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-small);
  background: var(--color-blue-tint-dark);
  color: var(--color-powder-blue);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.insignia--clara {
  background: var(--color-blue-tint-light);
  color: var(--color-blue-deep);
}