body, html {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
  font-family: 'Cabin Condensed', sans-serif, 'Open Sans', sans-serif;
}

#logo-container img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 60vh;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  animation: fadeIn 4s;
  margin: auto;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Nueva clase para fade out */
.fade-out {
  animation: fadeOut 0.6s forwards; /* forwards mantiene el estado final después de completar la animación */
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

#info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

#foto-contacto img {
  width: 300px; /* Ajustable manualmente */
  height: 300px; /* Ajustable manualmente */
  border-radius: 100%;
  margin-bottom: 5px;
}

#social-icons {
  display: flex;
  justify-content: center;
  gap: 35px;
  margin-top: 30px;
}

#social-icons img {
  width: 50px; /* Tamaño inicial, ajustable manualmente */
  cursor: pointer;
  margin-bottom: 30px;
}

/* Para hacer los iconos más pequeños o más grandes, ajusta el valor de width aquí */
.icono-pequeno {
  width: 30px; /* Cambia este valor para ajustar el tamaño */
}

@media (max-width: 600px) {
  #social-icons img {
    width: 30px; /* Ajusta este valor para tamaños de pantalla pequeños */
  }
}

.puesto-persona {
  font-weight: bold; /* Aplica negrita */
  font-size: 35px; /* Ajusta el tamaño de la fuente, cambia según necesites */
  font-family: 'Cabin Condensed', sans-serif;
  color: #4E5A62;
}


.nombre-persona {
  font-weight: bold; /* Aplica negrita */
  font-size: 55px; /* Ajusta el tamaño de la fuente, cambia según necesites */
  font-family: 'Cabin Condensed', sans-serif;
  color: #DB2D7E;
}



.correo-persona {
  font-weight: bold; /* Aplica negrita */
  font-size: 18px; /* Ajusta el tamaño de la fuente, cambia según necesites */
  font-family: 'Open Sans', sans-serif;
}

.telefono-persona {
  font-weight: bold; /* Aplica negrita */
  font-size: 18px; /* Ajusta el tamaño de la fuente, cambia según necesites */
  font-family: 'Open Sans', sans-serif;
}

.boton-descargar {
  font-size: 20px; /* Aumenta el tamaño de la fuente */
  padding: 15px 30px; /* Aumenta el relleno para hacer el botón más grande */
  background-color: #68d2df; /* Color de fondo del botón */
  color: white; /* Color del texto del botón */
  border: none; /* Opcional: quita el borde del botón */
  border-radius: 5px; /* Opcional: bordes redondeados */
  cursor: pointer; /* Cambia el cursor a una mano al pasar sobre el botón */
  transition: background-color 0.3s; /* Efecto de transición suave al cambiar el color de fondo */
}

.boton-descargar:hover {
  background-color: #5CC6D0; /* Cambia el color de fondo al pasar el ratón por encima */
}