/* Estilos específicos para dispositivos móviles (hasta 599px) */

/* Ajusta el padding del cuerpo para pantallas pequeñas */
body {
    padding: 0.625rem; /* Reduce el padding en móviles (10px) */
}

/* Ajusta el padding en secciones principales para pantallas pequeñas */
.profile,
.content-section,
.content-section-information {
    padding: 0.9375rem; /* Reduce el padding en móviles (15px) */
}

/* Ajusta el tamaño de la imagen de perfil en pantallas pequeñas */
.profile-header img {
    width: 50%; /* Reduce el ancho en móviles */
    max-width: 10rem; /* Tamaño máximo en móviles (160px) */
    border-width: 0.1875rem; /* Reduce el grosor del borde (3px) */
}

/* Ajusta el tamaño del título del perfil en pantallas pequeñas */
.profile-header h1 {
    font-size: 1.75rem; /* Reduce el tamaño del título */
}

/* Ajusta el tamaño del párrafo del perfil en pantallas pequeñas */
.profile-header p {
    font-size: 0.8rem !important; /* Reduce el tamaño del párrafo */
    max-width: 100%; /* Ocupa todo el ancho disponible */
}

/* Ajusta el tamaño de la biografía en pantallas pequeñas */
.bio {
    font-size: 0.85rem; /* Reduce el tamaño de la biografía */
    padding: 0; /* Elimina el padding horizontal */
    margin-bottom: 0.5rem; /* Reduce el margen inferior (8px) */
}

/* Ajusta los botones para pantallas pequeñas */
.button {
    padding: 0.5rem 1rem; /* Aumenta el padding para mejor toque en móviles (8px y 16px) */
    font-size: 0.9rem; /* Ajusta el tamaño de fuente */
    margin: 0.3125rem 0.3125rem; /* Ajusta los márgenes (5px) */
}

.counter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    color: #fff;
    font-size: 1.300rem;
    font-family: 'Poppins', sans-serif; /* Fuente personalizada */
}

/* Organiza los botones verticalmente en pantallas muy pequeñas */
@media (max-width: 30rem) { /* 480px */
    .botones {
        flex-direction: column; /* Apila los botones verticalmente */
        align-items: center; /* Centra los botones */
    }
}

/* Ajusta el tamaño de los encabezados de sección en pantallas pequeñas */
.content-section h2,
.content-section-information h2 {
    font-size: 1.25rem; /* Reduce el tamaño (20px) */
    margin-bottom: 0.75rem; /* Reduce el espacio inferior (12px) */
}

/* Ajusta las tarjetas de información para pantallas pequeñas */
.information {
    padding: 0.9375rem; /* Reduce el padding (15px) */
    min-height: 10rem; /* Reduce la altura mínima (160px) */
}

/* Ajusta el tamaño de los títulos de las tarjetas en pantallas pequeñas */
.information h1 {
    font-size: 1.1em; /* Reduce el tamaño del título */
    margin-bottom: 0.625rem; /* Reduce el espacio inferior (10px) */
}

/* Ajusta el tamaño de los párrafos de las tarjetas en pantallas pequeñas */
.information p {
    font-size: 0.85em; /* Reduce el tamaño del párrafo */
    line-height: 1.5; /* Ajusta la altura de línea */
}

/* Ajusta el tamaño de las estrellas en pantallas pequeñas */
.clients-stars svg {
    width: 1rem; /* Reduce el ancho (16px) */
    height: 1rem; /* Reduce la altura (16px) */
}

/* Ajusta el tamaño de las caras de clientes en pantallas pequeñas */
.clients-faces img {
    width: 1.875rem; /* Reduce el ancho (30px) */
    height: 1.875rem; /* Reduce la altura (30px) */
}

/* Ajusta las cajas azules en pantallas pequeñas */
.blue-box {
    padding: 0.9375rem; /* Reduce el padding (15px) */
}

/* Permite scroll en la página principal en dispositivos móviles */
body.home-page {
    overflow-y: auto; /* Habilita el scroll vertical en móviles */
}

/* Ajusta el contenedor para permitir scroll */
.home-page .container {
    height: auto; /* Altura automática para permitir scroll */
    min-height: 100%; /* Asegura que ocupe al menos toda la altura */
}

/* Permite scroll en las secciones si es necesario */
.home-page .profile,
.home-page .content-section {
    overflow: visible; /* Permite que el contenido sea visible incluso si excede los límites */
}

/* Mejoras para pantallas muy pequeñas */
@media (max-width: 30rem) { /* 480px */
    .profile-header h1 {
        font-size: 1.5rem; /* Reduce aún más el tamaño del título */
    }
    
    .information {
        padding: 0.75rem; /* Reduce aún más el padding (12px) */
    }
}

/* Ajustes para dispositivos con poca altura */
@media (max-height: 40rem) { /* 640px de altura o menos */
    .profile-header {
        margin-bottom: 0.625rem; /* Reduce el margen inferior (10px) */
    }
    
    .profile-header div {
        margin-bottom: 0.625rem; /* Reduce el margen inferior (10px) */
    }
    
    .bio {
        margin-bottom: 0.3125rem; /* Reduce el margen inferior (5px) */
    }
    
    .button {
        margin: 0.1875rem auto; /* Reduce los márgenes (3px) */
    }
}

/* Ajustes para dispositivos con orientación horizontal (landscape) */
@media (orientation: landscape) and (max-height: 37.5rem) { /* Menos de 600px de alto en landscape */
    .profile-header {
        flex-direction: row; /* Cambia a dirección horizontal */
        justify-content: center; /* Centra los elementos */
        align-items: center; /* Alinea verticalmente */
        gap: 1.25rem; /* Espacio entre elementos (20px) */
    }
    
    .profile-header div {
        order: 1; /* Mantiene el orden */
        margin-bottom: 0; /* Elimina el margen inferior */
        text-align: left; /* Alinea el texto a la izquierda */
    }
    
    .profile-header img {
        order: 2; /* Mantiene el orden */
        width: 30%; /* Reduce el ancho */
        max-width: 7.5rem; /* Limita el tamaño máximo (120px) */
    }
    
    .bio {
        text-align: left; /* Alinea el texto a la izquierda */
        padding: 0 1.25rem; /* Ajusta el padding horizontal (20px) */
    }
}