/* =========================
   SOBRE NOSOTROS
========================= */

.about {
  background-color: var(--bg-main, #f8fafc);
}

/* Hero */
.about-hero {
  position: relative;
  padding: 90px 20px 70px;
  text-align: center;

  background:
    radial-gradient(
      circle at top center,
      rgba(255, 255, 255, 0.25),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      var(--primary-dark),
      var(--primary)
    );
}

.about-hero h1 {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 700;
  color: var(--light);
  letter-spacing: 1px;
}

.about-hero h1 span {
  color: var(--secondary);
  font-weight: 600;
}
/* =========================
   HERO – Animación de entrada
========================= */

.hero {
  position: relative;
  overflow: hidden;
}

.hero-content {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp 1s ease forwards;
}

.hero-content.delay-1 {
  animation-delay: 0.2s;
}

.hero-content.delay-2 {
  animation-delay: 0.4s;
}

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contenido */
.about-content {
  padding: 80px 20px;
  display: flex;
  justify-content: center;
}

.about-card {
  max-width: 900px;
  background: var(--bg-white, #ffffff);
  padding: 50px 50px;
  border-radius: 22px;

  box-shadow:
    0 25px 60px rgba(15, 23, 42, 0.08);

  animation: fadeUp 0.9s ease forwards;
}

.about-card p {
  font-size: 1.05rem;
  color: var(--dark);
  line-height: 1.8;
}

.about-card p + p {
  margin-top: 28px;
}

.about-card strong {
  color: var(--primary-dark);
  font-weight: 600;
}

/* Animación */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .about-card {
    padding: 36px 26px;
  }
}