/* ============================================================
   THM — Founder Component (Quién está detrás / autoridad)
   ============================================================ */

.founder {
  background: var(--color-bg-elevated);
  position: relative;
}

.founder::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent 100%);
}

.founder__card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-10);
}

.founder__photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

/* Marca de THM: se ve mientras no haya foto, y queda debajo cuando sí la hay */
.founder__photo--placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12) 0%, rgba(6, 182, 212, 0.08) 100%);
  border: 1px dashed var(--color-border-hover);
}

.founder__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  /* El recorte cuadrado se sesga hacia arriba: en una foto de equipo
     conserva las caras y el rótulo de pared en lugar de cortarlos. */
  object-position: 50% 40%;
}

.founder__photo--placeholder span {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-accent-1);
}

.founder__content h2 {
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  margin-bottom: var(--space-4);
}

.founder__content > p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

.founder__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin-bottom: var(--space-6);
}

.founder__stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-accent-1);
  line-height: 1.1;
}

.founder__stat span {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

.founder__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--transition-fast);
}

.founder__link:hover {
  gap: var(--space-2);
}

@media (max-width: 768px) {
  .founder__card {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-6);
    text-align: center;
  }
  .founder__photo {
    max-width: 200px;
    margin: 0 auto;
  }
  .founder__stats {
    justify-content: center;
  }
}