/* Formulario */
@media (min-width: 768px) {
    .formulario-inicio {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Portfolio */
.portfolio-front {
    margin: 0 auto 4rem auto;
}
.portfolio-front-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .portfolio-front-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 1rem;
}

/* Sobre mi */
.sobremi-front {
    padding-left: 2rem;
}

.sobremi-front-grid {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .sobremi-front-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sobremi-info-front {
    padding-top: 0;
    order: 2;
}

.sobremi-titulo-front {
    margin-top: 0;
}

@media (min-width: 768px) {
    .sobremi-titulo-front {
        font-size: 4rem;
    }
}

.profesional-img-inicio {
    max-width: 80%;
    margin: 0 auto;
}

@media (min-with: 768px) {
    .profesional-img-inicio {
        max-width: 100%;
    }
}

/* Certificaciones */
.certificaciones {
    margin-top: 2rem;
}

.certificaciones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .certificaciones-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.certificacion {
    display: flex;
    align-content: center;
    justify-content: center;
}

.certificacion img {
    max-height: 10rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.certificacion img:hover {
    scale: 1.1;
}

/* Formulario */
.titulo-idea {
    position: relative;
    display: inline-block;
}

.titulo-idea::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px; 
    height: 4px; 
    width: 120%;
    background: linear-gradient(to right, var(--amarillo), transparent); 
    border-radius: 2px; 
}

.info-formulario-inicio {
    margin-bottom: 2rem;
}

.formulario-inicio textarea {
    height: 20rem;
}

.herramientas {
    font-size: 3.6rem;
}

.herramientas {
    font-family: var(--fuente-secundaria); 
    font-size: 2.4rem; 
}

@media (min-width: 768px) {
    .herramientas {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .herramientas {
        font-size: 3.6rem;
    }
}