/* Estilos para la sección de presentación (Hero) */

/* Fondo con gradiente sutil para la sección hero */
.hero-section-bg {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(31, 28, 107, 0.25) 100%);
}

/* Layout principal del Hero: 2 columnas (foto y texto) */
.hero {
    display: grid;
    width: 90%;
    grid-template-columns: 420px 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1200px;
    height: 100% !important;
}

/* Contenedor de la imagen de perfil con transición suave */
.hero__img-container {
    max-width: 100%;
    max-height: 500px;
    display: flex;
    justify-content: center;
    transition: transform 0.25s ease 1s;
    transition: translate 0.5s ease;
}

/* Efecto de zoom y elevación en la foto de perfil */
.hero__img-container:hover {
    transform: scale(1.05);
    translate: 0px -10px;
}

/* Estilo de la imagen de perfil */
.hero__img {
    object-fit: cover;
    border-radius: 19px;
    width: 100%;
    height: auto;
}

/* Ajustes responsivos para tablets */
@media (max-width: 960px) {
    .hero {
        grid-template-columns: 320px 1fr;
        gap: 2rem;
    }
}

/* Ajustes responsivos para móviles (cambio a 1 columna) */
@media (max-width: 768px) {
    .hero-section-bg {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(31, 28, 107, 0.25) 100%);
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 3rem;
        justify-items: center;
    }
}

/* Ajustes finales para pantallas muy pequeñas */
@media (max-width: 425px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 2rem;
        width: 82%;
    }
}