/* ==========================================================================
   Sobre a CR (claro) e chamada para contato (preto e vermelho)
   ========================================================================== */

/* ---------- sobre ---------- */
.about {
  position: relative; overflow: hidden;
  background: #000; color: #fff;
  border-top: 2px solid var(--red);
  padding-block: clamp(5rem, 12vw, 10rem);
}
@supports (overflow: clip) { .about { overflow: clip; } }
.about__grid { position: relative; z-index: 1; }
/* logo como marca-d'água: grande, cortada pela borda, com baixa opacidade */
.about__mark {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: min(44rem, 92vw); height: auto;
  right: max(-14rem, -18vw); top: 50%; transform: translateY(-50%);
  opacity: 0.08;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
@media (max-width: 760px) {
  .about__mark { width: 120vw; right: -48vw; top: 48%; opacity: 0.07; }
}
.about__body { display: grid; gap: 1.25rem; max-width: 38rem; }
.about__body .display { margin-bottom: 0.5rem; }
.about__body > p { font-size: var(--fs-lg); line-height: 1.6; color: #fff; }
.about__body > .about__place {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding-top: 1.25rem;
  border-top: 2px solid var(--red);
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff;
}
.about__place .icon { color: var(--red); }

/* ---------- contato ---------- */
.cta {
  position: relative; overflow: hidden;
  background: var(--black); color: var(--white);
  padding-block: clamp(6rem, 14vw, 11rem);
}
.cta__slash {
  position: absolute; top: -10%; bottom: -10%; right: -8%; width: 44%;
  background: linear-gradient(180deg, var(--red), var(--red-deep));
  transform: skewX(var(--slant));
}
.cta__inner { position: relative; display: grid; gap: 1.6rem; justify-items: start; }
.cta .display { max-width: 11ch; }
.cta__text { font-size: var(--fs-lg); line-height: 1.5; color: #fff; max-width: 30rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 0.75rem; padding-left: 0.45rem; }
.icon--wa { color: #fff; }
@media (max-width: 760px) {
  .cta__slash { width: 46%; right: -34%; opacity: 0.9; }
  .cta__actions { display: grid; width: 100%; padding-inline: 0.45rem; }
  .cta__actions .btn { width: 100%; }
}

/* ---------- assinatura: logo em tamanho moderado antes do rodapé ---------- */
.signature {
  display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 2.5rem);
  padding: clamp(3.5rem, 8vw, 5.5rem) max(var(--gutter), env(safe-area-inset-left, 0px));
  background: #000;
}
.signature::before, .signature::after {
  content: ''; flex: 0 1 9rem; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red));
  transform: skewX(var(--slant));
}
.signature::after { background: linear-gradient(90deg, var(--red), transparent); }
.signature__logo {
  width: clamp(6.5rem, 22vw, 9rem); height: auto; border-radius: 50%;
  filter: drop-shadow(0 10px 30px rgba(227, 6, 19, 0.28));
}