/* ============================ */
/* Sección PERFIL               */
/* ============================ */

#perfil {
  padding: 0;                     /* anulamos el padding de .snap-section */
  display: flex;
}

.perfil-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Columna foto */
.perfil-photo {
  flex: 1;
  background-image: url("../images/perfil.jpg"); /* <-- poné acá el path de esa foto */
  background-size: cover;
  background-position: center;
}

/* Columna texto */
.perfil-bio {
  flex: 1;
  background-color: #333333;      /* gris oscuro como en el PDF */
  color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.perfil-bio-inner {
  max-width: 520px;
  padding: 40px 48px;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Opcional: misma fuente que el resto */
.perfil-bio-inner p {
  margin-bottom: 1.2rem;
}

/* ==================== */
/* Responsive móvil     */
/* ==================== */

@media (max-width: 900px) {
  .perfil-wrapper {
    flex-direction: column;
  }

  .perfil-photo {
    height: 45vh;                 /* foto arriba, tipo hero */
  }

  .perfil-bio {
    height: auto;
  }

  .perfil-bio-inner {
    padding: 32px 20px;
    max-width: 100%;
    font-size: 1rem;
  }
}

/* ============================== */
/* Ajuste extra para móviles muy chicos */
/* ============================== */
@media (max-width: 600px) {

  .perfil-photo {
    height: 38vh;            /* 🔥 menos alto para que entre más contenido */
    background-size: cover;
    background-position: top center;
  }

  .perfil-bio-inner {
    padding: 22px 18px;      /* 🔥 menos padding */
    font-size: 0.92rem;      /* 🔥 tipografía un toque más chica */
    line-height: 1.55;
  }

  .perfil-bio-inner p {
    margin-bottom: 0.9rem;   /* 🔥 reduce saltos */
  }
}