/* Integración de la identidad visual del logo original */
.brand {
  gap: 0;
  line-height: 1;
}

.brand img {
  display: block;
  width: 190px;
  height: auto;
}

.portrait-card.brand-showcase {
  width: min(430px, 90%);
  padding: 2.25rem 2.5rem 2.65rem;
  border-radius: 150px 150px 28px 28px;
  border: 1px solid rgba(96, 50, 111, .08);
  background: rgba(255, 255, 255, .95);
}

.logo-kicker {
  display: block;
  margin: 1rem auto .4rem;
  color: var(--turquoise);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero-logo {
  display: block;
  width: min(320px, 100%);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 9px 18px rgba(56, 32, 63, .08));
}

.brand-divider {
  width: 64px;
  height: 3px;
  margin: .2rem auto 1.2rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--turquoise), var(--purple));
}

.brand-showcase blockquote {
  font-size: 1.13rem;
}

.footer-brand img {
  width: 125px;
}

@media (max-width: 560px) {
  .site-header .brand img { width: 142px; }
  .hero-visual { min-height: 430px; }
  .hero-visual::before { height: 375px; }
  .portrait-card.brand-showcase { padding: 2rem 1.45rem 2.2rem; }
  .hero-logo { width: 270px; }
  .footer-brand img { width: 145px; }
}