:root {
  --brand-accent: var(--jorsa-rojo);
}

.navbar.py-3 {
  padding-top: .7rem !important;
  padding-bottom: .7rem !important;
}

.navbar-brand.brand {
  max-width: calc(100% - 64px);
  margin-right: 1.35rem;
  padding: .2rem 0;
}

.navbar-brand.brand > strong {
  overflow: hidden;
  font-size: clamp(1.25rem, 2.1vw, 1.72rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-logo {
  display: block;
  width: 136px;
  height: auto;
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
  filter: none;
}

.quote-count {
  background: var(--brand-accent);
}

.navbar .nav-link {
  position: relative;
}

.navbar .nav-link::after {
  position: absolute;
  right: .5rem;
  bottom: .2rem;
  left: .5rem;
  height: 2px;
  background: var(--brand-accent);
  content: '';
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .18s ease, transform .18s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .nav-link.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.section-kicker::after {
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-left: 9px;
  background: var(--brand-accent);
  vertical-align: middle;
  content: '';
}

.category-card:hover i,
.benefit:hover i {
  color: var(--brand-accent);
}

@media (max-width: 767.98px) {
  .navbar-brand.brand {
    margin-right: .75rem;
  }

  .navbar-brand.brand > strong {
    font-size: clamp(1.2rem, 5vw, 1.38rem);
  }

  .site-logo {
    width: 108px;
    max-width: 100%;
    max-height: 66px;
  }
}