#inicio {
    border-bottom: 0;
}

#texto_inicio {
    margin-left: 15rem;
    position: relative;
    z-index: 9999;
}

#texto_inicio h2 {
    color: white;
    font-size: 2.5rem;
}

#texto_inicio p {
    font-size: 2rem;
    color: #8e8e8e;
    margin-bottom: 1rem;
}

#info_texto {
    width: 30%;
    border-width: 0 1px 0 0;
}



#cursos {
    flex-direction: column;
    display: flex;
    position: relative;
    padding: 0 0 4rem 4rem;
    width: 70%;
	color: #3A3617;
	color: var(--color_p);
}

#cursos h2 {
    font-size: 2rem;
}

.deficion {
    font-size: 1.4rem;
    color: var(--color_p_dos);
}

.curso_texto p {
    font-size: 1rem;
}

#tests {
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
    overflow: hidden;
    border-radius: 16px;
    border: var(--border);
    position: relative;
    height: 15rem;
    width: 100%;
    border-radius: 16px;
}

#todos_cursos {
    margin-top: 0.5rem;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

#categorias {
    margin-top: 1rem;
    flex-direction: column;
    display: flex;
    gap: 1rem;
}

.categoria {
    gap: 0.5rem;
    display: flex;
    flex-direction: row;
    color: var(--color_p);
    text-decoration: none;
    border: var(--border);
    border-radius: 16px;
    padding: 1rem;
}

.categoria:hover {
    cursor: pointer;
    background: white;
    color: black;
}


.categoria i {
    height: fit-content;
    width: min-content;
    display: flex;
    box-sizing: border-box;
    font-size: 1rem;
    color: var(--color_p);
    border: var(--border);
    border-radius: 10px;
    padding: 0.5rem;
}

.categoria p {
    color: var(--color_p_dos)
}

.curso {
    position: relative;
    overflow: hidden;
    background: var(--background_div);
    text-decoration: none;
    border: var(--border);
    border-radius: 16px;
}



.imagen_curso {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.curso_texto {
    margin-top: 4rem;
    position: relative;
    z-index: 11;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
    color: white;
    text-decoration: none;
    padding: 1rem;
}


.curso i {
    backdrop-filter: blur(50px);
    margin-bottom: 0.5rem;
    width: min-content;
    display: flex;
    box-sizing: border-box;
    font-size: 1rem;
    color: white;
    border: solid white 1px;
    border-radius: 10px;
    padding: 0.5rem;
}

.curso p {
    color: var(--color_p_dos);
}
 
 
 
 /* SERVICIOS */
#imagen_inicio {
	pointer-events: none;
	user-select: none;
	width: 100%;
	position: absolute;
}

#imagen_fondo_uno {
	position: absolute;
	top: 35rem;
	left: 5rem;
	width: 40rem;

	z-index: -2;
	pointer-events: none;
	user-select: none;
	opacity: 0.5;
	filter: blur(12rem);
}

#imagen_fondo_dos {
	position: absolute;
	top: 60rem;
	left: 55rem;
	width: 40rem;

	z-index: -2;
	pointer-events: none;
	user-select: none;
	opacity: 0.5;
	filter: blur(10rem);
}

#resumen_row {
	margin: 2rem 0 2rem 10rem;
	width: 100%;
	display: flex;
	flex-direction: row;
}

.caja_resumen {
	position: relative;
}

.caja_resumen img {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	border: solid rgb(43, 43, 43) 1px;
	margin: 0 1rem;
	border-radius: 0.5rem;
	width: 8rem;
}

.caja_resumen img:first-child {
    margin-left: 0;
}

#seccion {
    display: flex;
    flex-direction: row;
    
    position: relative;
    background: var(--fondo);
	max-width: 1200px;
    margin: 0 auto;
	color: white;
}


/* RESPONSIVE */
@media (max-width: 800px) {
    #texto_inicio {
        margin: 1rem;
    }
    
    #seccion {
        gap: 1rem;
        padding: 1rem;
        grid-template-columns: repeat(1, 1fr);
    }
    
    #preguntas {
        padding: 1rem;
    }
    
    #info_texto {
        display: none;
    }
    
    #cursos {
        padding: 0;
        width: 100%;
    }

}