.about-page {
  --about-accent: #D81921;
  --about-ink: #1f2937;
  --about-muted: #6b7280;
}

.about-hero {
  color: #ffffff;
  background: linear-gradient(135deg, #b51218 0%, #D81921 45%, #ef4444 100%);
}

.about-hero.about-hero-pattern {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, #b51218 0%, #D81921 45%, #ef4444 100%);
  background-size: 28px 28px, 36px 36px, auto;
}

.about-hero h1,
.about-hero p,
.about-hero .about-hero-kicker,
.about-hero a.about-hero-link {
  color: #ffffff;
}

.about-hero .about-hero-intro {
  color: rgba(255, 255, 255, 0.92);
}

.about-hero .about-hero-intro strong {
  color: #ffffff;
  font-weight: 800;
}

.about-hero .about-hero-intro em {
  color: rgba(255, 255, 255, 0.88);
}

.about-hero-pattern {
  background-size: 28px 28px, 36px 36px, auto;
}

.about-content-editor [data-panel="preview"]:not(.hidden) {
  display: block;
  min-height: 22rem;
}

.about-page-preview section {
  margin-bottom: 0.75rem;
}

.about-intro p + p {
  margin-top: 1.25rem;
}

.about-value-row {
  position: relative;
}

.about-value-row::before {
  content: '';
  position: absolute;
  top: 2.25rem;
  bottom: 0;
  right: 1.35rem;
  width: 2px;
  background: linear-gradient(to bottom, rgba(216, 25, 33, 0.35), rgba(216, 25, 33, 0.05));
}

.about-value-row:last-child::before {
  display: none;
}

.about-quote {
  position: relative;
}

.about-quote::before {
  content: '“';
  position: absolute;
  top: -0.35rem;
  right: 1rem;
  font-size: 4rem;
  line-height: 1;
  color: rgba(216, 25, 33, 0.12);
  font-weight: 800;
}

.about-contact-section {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.about-contact-intro {
  position: relative;
}

.about-contact-intro::after {
  content: '';
  position: absolute;
  left: -2rem;
  top: 2rem;
  width: 12rem;
  height: 12rem;
  border-radius: 9999px;
  background: rgba(216, 25, 33, 0.06);
  filter: blur(24px);
  pointer-events: none;
}

.about-contact-whatsapp {
  max-width: 100%;
}

.about-contact-row:hover .about-contact-row {
  border-color: rgba(216, 25, 33, 0.2);
}

.about-contact-address {
  background-image: linear-gradient(to left, rgba(216, 25, 33, 0.03), transparent);
}
