/* =========================================================
   ABOUT / PROYECTO GÉNESIS
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.about-hero {
  position: relative;
  overflow: hidden;

  padding: 110px 20px 70px;

  background: linear-gradient(
    180deg,
    var(--color-sky) 0%,
    var(--color-sky) 80%,
    rgba(255, 255, 255, 0.86) 100%
  );

  text-align: center;
}

.about-hero-content {
  position: relative;
  z-index: 2;

  max-width: 800px;
  margin: 0 auto;
}

.about-hero h1 {
  margin-bottom: 20px;

  color: var(--color-primary);

  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
}

.about-hero h1::after {
  content: "";

  display: block;

  width: 70px;
  height: 4px;

  margin: 18px auto 0;

  background: var(--color-accent);
  border-radius: 4px;
}


/* =========================================================
   ILUSTRACIÓN DEL HERO
   ========================================================= */

.hero-illustration {
  position: absolute;
  right: 6%;
  bottom: -10px;

  width: 340px;

  z-index: 3;

  animation: floatCharacter 6s ease-in-out infinite;
}

.hero-illustration img {
  width: 100%;
  height: auto;
}

.hero-illustration::before {
  content: "";

  position: absolute;

  width: 360px;
  height: 360px;

  top: 60%;
  left: 50%;

  transform: translate(-50%, -50%);

  background: rgba(255, 255, 255, 0.33);
  border-radius: 50%;

  z-index: -1;
}

@keyframes floatCharacter {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(0);
  }
}


/* =========================================================
   VISIÓN Y MISIÓN
   ========================================================= */

.about-values {
  padding: 40px 20px;
  background: #f6f5f2;
}

.values-grid {
  display: grid;

  grid-template-columns: repeat(
    auto-fit,
    minmax(320px, 1fr)
  );

  gap: 40px;

  max-width: 1100px;
  margin: 0 auto;
}

.value-card {
  padding: 28px;

  background: var(--color-white);
  border-radius: 25px;

  box-shadow: var(--shadow-sm);

  text-align: center;

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.value-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.value-card h2 {
  margin-bottom: 20px;

  color: var(--color-primary);

  font-size: 1.8rem;
}

.value-card p {
  margin-bottom: 12px;

  color: var(--text-secondary);
  line-height: 1.7;
}


/* =========================================================
   FUNDADORA / COLABORACIÓN
   ========================================================= */

.founder-collab {
  padding: 50px 20px;

  background: #f8f0e4;
}

.founder-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 60px;

  max-width: 1100px;
  margin: 0 auto;

  align-items: stretch;
}

.founder-card {
  position: relative;

  margin-top: 120px;
  padding: 50px 35px 35px;

  background: var(--color-white);
  border-radius: 25px;

  box-shadow: var(--shadow-sm);

  text-align: center;

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);

  overflow: visible;
}

.founder-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-lg);
}


/* =========================================================
   FOTO DE FUNDADORA
   ========================================================= */

.founder-photo {
  position: absolute;

  top: -180px;
  left: 20%;

  width: 300px;
  height: 300px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateX(-50%);

  animation: float 6s ease-in-out infinite;

  will-change: transform;
}

.photo-bg {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 210px;
  height: 210px;

  transform: translate(-50%, -50%);

  background: var(--color-soft-yellow);
  border-radius: 50%;

  box-shadow: var(--shadow-md);

  animation: floatCircle 5s ease-in-out infinite;
}

.founder-photo img {
  position: relative;
  z-index: 2;

  width: 140px;
  height: 140px;

  border-radius: 50%;

  object-fit: cover;

  transition: transform var(--transition-normal);
}

.founder-card:hover img {
  transform: scale(1.08);
}

.founder-card:hover .photo-bg {
  box-shadow:
    var(--shadow-md),
    0 0 30px rgba(255, 138, 0, 0.5);
}


/* =========================================================
   INFORMACIÓN DEL PERFIL
   ========================================================= */

.founder-card h2 {
  margin: 30px 0;

  color: var(--color-primary);

  font-size: 1.6rem;
}

.role {
  margin-bottom: 15px;

  color: var(--text-secondary);

  font-weight: 600;
}

.quote {
  color: var(--text-secondary);

  line-height: 1.7;
  font-style: italic;
}


/* =========================================================
   DECLARACIÓN DE FE
   ========================================================= */

.faith-section {
  padding: 60px 20px;

  background: var(--color-beige);
}

.faith-card {
  max-width: 900px;

  margin: 0 auto;
  padding: 40px 35px;

  background: var(--color-white);
  border-radius: 26px;

  box-shadow: var(--shadow-sm);

  text-align: center;
}

.faith-card p {
  margin-bottom: 16px;

  color: var(--text-secondary);

  font-size: 0.9rem;
  line-height: 1.7;
}


/* =========================================================
   FUNDAMENTOS
   ========================================================= */

.fundamentos-section {
  padding: 35px 20px;

  background: var(--color-white);

  text-align: center;
}

.fundamentos-grid {
  display: grid;

  grid-template-columns: repeat(
    auto-fit,
    minmax(220px, 1fr)
  );

  gap: 25px;

  max-width: 1000px;

  margin: 20px auto 0;
}

.fundamento-card {
  padding: 35px 30px;

  background: #f7f6f3;
  border-radius: 20px;

  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.fundamento-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-sm);
}

.fundamento-card h3 {
  margin-bottom: 10px;

  color: var(--color-primary);
}


/* =========================================================
   CIERRE
   ========================================================= */

.about-closing {
  padding: 20px;

  background: linear-gradient(
    135deg,
    var(--color-dark) 0%,
    var(--color-secondary) 100%
  );

  text-align: center;
}

.closing-logo {
  display: block;

  width: 110px;
  max-width: 80%;

  margin: 0 auto 20px;

  filter: drop-shadow(
    0 10px 18px rgba(255, 255, 255, 0.25)
  );
}

.about-closing h2 {
  max-width: 850px;

  margin: 0 auto;

  color: var(--color-white);

  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: 600;
}


/* =========================================================
   ANIMACIÓN DE CIERRE
   ========================================================= */

.fade-section {
  opacity: 0;
  transform: translateY(25px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes float {
  0% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-12px);
  }

  100% {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes floatCircle {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-10px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .founder-grid {
    grid-template-columns: 1fr;
  }

  .hero-illustration {
    display: none;
  }
}

@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: 1fr;
  }

  .about-hero {
    padding: 90px 20px 60px;
  }

  .about-highlight {
    padding: 40px 25px;
  }

  .founder-card {
    margin-top: 100px;
  }

  .about-closing {
    padding: 80px 20px;
  }

  .closing-logo {
    width: 150px;
  }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero-illustration,
  .founder-photo,
  .photo-bg,
  .fade-section,
  .value-card,
  .founder-card,
  .fundamento-card {
    animation: none !important;
    transition: none !important;
  }
}
```