/* CSS GENERALES DEL CUERPO */
body {
    font-family: var(--font-f-letrabase);
    background-color: var(--col-base-background);
    color: var(--col-font-background);
}

.padding {
    padding-bottom: 7vw;
}






/* CSS PARA LOS TÍTULOS DIVISORIOS */
h1 {
    font-family: var(--font-f-title);
    font-size: var(--font-s-title);
}

/* ESTILOS DEL H2 */
h2 {
    font-size: 2vw;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 1em;
}

h3 {
    font-family: var(--font-f-letrabase);
    font-size: 1em;
    padding-bottom: 0.5em;
}

/* ESPACIO PARA EL CORREO */
.correo {
    font-family: var(--font-f-letrabase);
    font-weight: 350;
    font-size: 2vw;
}

.correo a {
    text-decoration: underline;
}

.correo a:hover {
    color: #8263bb;
    transition: 0.4s ease-in-out;
}





/* SEPARACIÓN DE LA CAJA DE INFORMACIÓN */
.datos-contacto {
    font-size: var(--font-s-body);
    font-weight: 250;
    padding-top: 2em;
    line-height: 1.3em;
    display: grid;
    gap: 7em;
}

/* GRID DE LOS TEXTOS */
.titulos-proyectos {
    display: grid;
    grid-template-columns: repeat(2, max-content); /* Ajusta el tamaño de las columnas al contenido */
    gap: 2em; /* Ajusta el espacio entre las columnas según sea necesario */
    justify-content: end; /* Alinea el grid hacia la derecha */
    text-align: left; /* Alinea el texto dentro de los bloques a la izquierda */
    width: auto; /* Asegura que el contenedor se ajuste al contenido */
}

/* Asegura que el correo esté en una columna y Ajusta el espacio inferior según sea necesario */
.bloque-correo {
    display: flex;
    gap: 1em;
}

/* EFECTO CUADRADO */
.efecto > a {
    padding: 5px;
	box-shadow: inset 0 0 0 0 white;
	transition: all 0.5s ease-in-out 0s;
	&:hover{
		box-shadow: inset 300px 0 0 0 white;
		color: black;
	}
}





/* DENTRO DE LA SECCIÓN QUE NO TENGA NINGUNA DECORACIÓN */
section a {
    color: var(--col-font-background);
    text-decoration: none;
}

/* QUITAMOS EL ESPACIO INSERVIBLE DEL EFECTO DEL FONDO */
.svg-fondo {
    height: 104px;
}

/* ESCALAMOS LA IMAGEN EN UN PORCENTAGE ADECUADO PARA ORDENADOR */
.img-background img {
    width: 650px;
}

/* CON LA NUEVA IMAGEN APLICAMOS EL EFECTO DE WRAP, LA POSICIÓN FIXED, LA ELEVAMOS, DEJAMOS UNA OPACIDAD BAJA Y EL Z INDEX BAJO */
.background-atajos {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: -1;
    filter: url(#wavy);
}