/* Custom PROPERTIES */

:root{
    --color-primario: #323232;
    --color-secundario: #E44848;
    --color-terciario: #FFFEF9;
    --color-cuaternario: #969696;

    --tipo-principal: 'Space Grotesk', sans-serif;;
    --tipo-secundaria:'Space Mono', monospace;
}

/* Las adaptamos al modo oscuro en móviles/tablets */
@media (prefer-color-scheme: dark){
    :root{
        --color-primario: #181818;
    }
}

/* Si se activa el modo de alto contraste */

@media (prefer-contrast: high){
    :root{
        --color-primario: black;
        --color-secundario: white;
    }

}

/* Desactivamos los animations en el caso de que el usuario haya configurado el modo sin animaciones */

@media (prefers-reduced-motion: reduce) {
    *{
        animation: none;
        transition: none;
        /* no se debería poner el asterisco sino el nombre del selector en concreto */
    }
}

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    vertical-align: baseline;
}

img , picture , video , iframe , figure{
    max-width: 100%;
    width: 100%;
    display: block;
    /* Opcional */  object-fit: cover;
    /* Opcional */  object-position: center center;
}

a{
    display: block;
}

p a{
    display: inline;
}

li{
    list-style-type: none;
}

html{
    scroll-behavior: smooth;
}

/* Desactivamos estilos por defecto en las principales etiquetas de texto */

h1 , h2 , h3 , h4 , h5 , h6 , p , span , a , strong , blockquote , i , b , u , em{
    font-size: 1em;
    font-weight: inherit;
    font-style: inherit;
    text-decoration: none;
    color: inherit;
}

/* Evitamos los problemas con los pseudoelementos de quotes */

blockquote:before , blockquote:after , q:before , q:after {
    content: '';
    content: none;
}

/* Seleccionar el color del sombreado al seleccionar texto en nuestra web */
::selection{
    background-color: var(--color-secundario);
    color: var(--color-terciario);
}

/* Problemas de tipografías y colocación de formularios */

form ,  input , textarea , select , button , label {
    font-family: inherit;
    font-size: inherit;
    hyphens: auto;
    background-color: transparent;
    display: block;
    color: inherit;
    /* Opcional */ appearance: none;
}

/* reseteamos las tablas */

table , tr , td {
    border-collapse: collapse;
    border-spacing: 0;
}

/* evcitamos problemas con los SVG */

svg{
    width: 100%;
    display: block;
    fill: currentColor;
}

::-webkit-scrollbar {
    display: none;
}

/* Configurar la tipografía para toda la web */

body{
    min-height: 100vh;
    font-size: 100%;
    font-family: var(--tipo-principal);
    color: var(--color-primario);
    line-height: 1.4em;
    hyphens: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--color-terciario);
}

/* LOADER */

@keyframes scale{
    from{
        transform: scaleX(1);
    }

    to{
        transform: scaleX(0);
    }
}

.Loader-animation{
    animation: scale 0.2s ease forwards;

    height: 100vh;
    width: 100%;
    background-color: var(--color-secundario);

    top: 0;
    left: 0;

    position: fixed;
    z-index: 3;
    transform-origin: right;
}

.Loader-front{
    height: 100vh;
    width: 100%;

    top: 0;
    left: 0;

    position: fixed;
    z-index: 3;

    background-color: var(--color-primario);

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}

.Loader-front.isActive{
    transform: scaleX(1);
}

.Loader-back{
    height: 100vh;
    width: 100%;

    top: 0;
    left: 0;

    position: fixed;
    z-index: 4;

    background-color: var(--color-secundario);

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.2s ease 0.3s;
}

.Loader-back.isActive{
    transform: scaleX(1);
}

/* LOADER */

.Button-fixed{
    position: fixed;
    right: 10%;
    bottom: 10%;
    z-index: 2;

    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--color-secundario);
    padding: 1rem 0 0 01rem;

    transition: all 0.4s ease;
}

.Button-fixed:hover{
    background-color: var(--color-secundario);
    color: var(--color-terciario);

    transform: scale(1.1);
}

.Button-svg{
    width: 2rem;
    height: 2rem;
    fill: var(--color-terciario);
}

/* ------ HEADER ------- */

@keyframes fadeIn{
    from{
        opacity: 0;
        transform: translateY(-3rem);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.Header{
    animation: fadeIn 1s ease backwards 0.5s;
}

.Header-wrapper{
    width: 100%;
    height: 25vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    margin: auto;

    padding: 10vh 15vh;
    max-width: 187.5rem;
}

.Header-button{
    display: none;
    cursor: pointer;
}

/* MENÚ HAMBURGUESA */

.Menu-hamburguesa{
    width: 100%;
    height: 100vh;
    background-color: var(--color-secundario);

    z-index: 3;

    position: fixed;
    top: 0;
    left: 0;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.Menu-hamburguesa.isActive{
    transform: scaleX(1);
}

.Hamburguesa-close{
    position: absolute;
    top: 0;
    right: 0;

    margin: 3.125rem;
    cursor: pointer;
}

.Hamburguesa-svg{
    width: 3.125rem;
    height: 3.125rem;

    fill: var(--color-terciario);
}

.Hamburguesa-enlaces{
    height: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    gap: 3.75rem;
}

.Hamburguesa-a{
    font-size: 1.875rem;
    font-weight: 600;
    font-family: var(--tipo-secundaria);
    color: var(--color-terciario);
    transition: transform 0.3s ease;
}

.Hamburguesa-a:hover{
    transform: scale(1.1);
}



/* MENÚ HAMBURGUESA */

.Header-nav{
    width: 70%;
}

.Header-ul{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    gap: 5.3125rem;
}

.Header-li{
    font-size: 1.25rem;
}

/* Al pasar el ratón por encima el texto cambia de color y aparece una linea desde el centro por debajo */

.Header-li:hover{
    color: var(--color-secundario);
    transition: color 0.3s ease;
}

/* Esta es la línea, que está "colocada" pero en escala 0 */

.Header-li::after{
    content: '';
    display: block;
    width: 100%;
    height: .1875rem;

    transform: scaleX(0);
    transform-origin: center;
    transition: all 0.3s ease;
}

/* Esta es la linea que aparece al hacer hover con una transicion */

.Header-li:hover::after{
    content: '';
    display: block;
    width: 100%;
    height: .1875rem;
    background-color: var(--color-secundario);

    transform: scaleX(1);
}

/* Indicamos en que página de la web nos encontramos dandole color y línea a la sección. En este caso estamos en "Home" */

.Header-li_Active{
    color: var(--color-secundario);
    font-size: 1.25rem;
    font-weight: 800;
}

.Header-li_Active::after{
    content: '';
    display: block;
    width: 100%;
    height: .1875rem;
    background-color: var(--color-secundario);
}

.Header-a{
    font-weight: 500;
}

/* Colocamos los iconos en dos columnas */

.Header-icons{
    width: 30%;
    display: flex;

    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;

    gap: 2.5rem;
}

/* Position relative al contenedor para poder poner un icono encima del otro */

.Header-gitHub{
    position: relative;
}

.Header-linkedin{
    position: relative;
}

/* Llamamos Header-hover al icono que aparecerá dejándo atrás al que está predeterminado al hacer hover */

.Header-hover{
    width: 2.1875rem;
    height: 2.1875rem;
    opacity: 0;
    transform: scale(0);

    transition: all 0.3s ease;
}

/* Al hacer hover en los iconos, el icono predeterminado pasa a opacidad 0 para que no se vea */

.Header-linkedin:hover .Header-svg{
    opacity: 0;
}

.Header-gitHub:hover .Header-svg{
    opacity: 0;
}

/* Al hacer hover en los iconos, el icono con la clase "Header-hover" pasará a tener opacidad 1 y se visualizará de distinto color y con un tamaño algo más grande */

.Header-linkedin:hover .Header-hover{
    opacity: 1;
    transform: scale(1.2);
    fill: var(--color-secundario);
}

.Header-gitHub:hover .Header-hover{
    opacity: 1;
    transform: scale(1.2);
    fill: var(--color-secundario);
}

/* Al pincha en cualquiera de los dos iconos se cambia el color y la escala */

.Header-linkedin:active .Header-hover{
    opacity: 1;
    transform: scale(1.1);
    fill: black;
}

.Header-gitHub:active .Header-hover{
    opacity: 1;
    transform: scale(1.1);
    fill: black;
}


.Header-svg{
    width: 2.1875rem;
    height: 2.1875rem;

    position: absolute;

    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ------ HEADER ------- */


/* ------ TITLE ------- */

/* Le doy un estilo y un tamaño, uso la propiedad column-reverse para que el H1 aparezca antes que el P a nivel de HTML pero visualmente esté arriba de este. */

.Title{
    max-width: 187.5rem;
    height: 50vh;
    display: flex;
    flex-flow: column-reverse nowrap;
    justify-content: center;
    align-items: flex-start;

    gap: 3.125rem;

    padding: 0 15vh;
    margin: auto;
}

.Title-h1{
    font-size: 6.875rem;
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: -0.25rem;
}

/* Con el span le puedo dar un estilo diferente y hacer un salto de línea */

.Title-span{
    display: block;
    color: var(--color-secundario);
}

.Title-p{
    font-size: 1.5625rem;
    font-weight: 500;
    padding: 0 0 0 .625rem;
    font-family: var(--tipo-principal);
    color: var(--color-cuaternario);
}

/* ------ TITLE ------- */

/* ------ RECIENTES ------- */

/* Coloco en columna los elementos y los centro */

@keyframes rebote{
    from{
        transform: translateY(8%);
    }

    to{
        transform: translateY(0);
    }
}

.Recent{
    min-height: 25vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;

    padding: 10vh 0 5vh 0;

    animation: rebote 1s ease infinite alternate;
}

/* Al botón le doy un estilo y una pequeña transformación al hacer HOVER */

.Recent-button{
    border-radius: 50%;
    padding: 0.5rem;
    margin: 0.5rem;
    transition: all 0.2s ease;
    transform: scale(0.9);
    cursor: pointer;
}

.Recent-button:hover{
    transform: scale(1);
    background-color: #f0f0f04e;
    padding: 0.5rem;

}

.Recent-button:active{
    transform: scale(0.9);
    background-color: #f0f0f0;
    padding: 0.5rem;
    color: var(--color-secundario);
}

.Recent-button.isActive{
    transform: rotate( 180deg );
}

.Recent-svg{
    width: 1.875rem;
    height: 1.875rem;
}

.Recent-p{
    font-weight: 500;
}

/* ------ RECIENTES ------- */

/* MAIN */

.Main-projects{

    min-height: 80vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    padding: 10 15vh;

    position: relative;

    overflow: hidden;
    transition: all 0.5s ease;

    gap: 6.25rem;
}

.Main-h1{
    font-size: 6.875rem;
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: -0.25rem;
    font-family: var(--tipo-sec);
    z-index: 1;
}

.Main-h1:hover{
    color: var(--color-terciario);
    font-family: var(--tipo-secundaria);
    font-weight: 600;
}

.Main-img{
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    transition: opacity 0.4s ease, transform 4s ease;

    object-fit: cover;
    height: 100%;
    width: 100%;
}

.Main-h1:hover ~ .Main-img{
    opacity: 1;
    transform: scale(1.3);
}
/* MAIN */


/* ------
FOOTER ------- */

/*
El footer tiene un background-color diferente y los iconos harían el mismo efecto que he explicado en el header. */

.Footer{
    width: 100%;
    min-height: 20vh;
    background-color: var(--color-secundario);
    padding: 10vh 15vh;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

}


.Footer-wrapper{
    max-width: 187.5rem;
    width: 100%;
    margin: auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}




.Footer-nav{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;


}


.Footer-ul{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    gap: 5.3125rem;
}



.Footer-li{
    font-size: 1.25rem;
    background-color: transparent;
    padding: 1rem 2rem;
    border-radius: 1.25rem;

    transition: all 0.5s ease;
    transform-origin: center;
}


.Footer-li:hover{
    background-color: rgba(255, 255, 255, 0.276) ;
    transform: scale(1.1);
    padding: 1rem 2rem;
}


.Footer-a{
    color: var(--color-terciario);
}


.Footer-h3{
    font-family: var(--tipo-principal);
    font-weight: 900;
    font-size: 3.125rem;
}


.Footer-iconos{
    display: grid;
    grid-template-columns: repeat( 2 , 1fr );
    gap: 2.5rem;
}

/*
Position relative al contenedor para poder poner un icono encima del otro */

.Footer-gitHub{
    position: relative;
}


.Footer-linkedin{
    position: relative;
}

/*
Llamamos Header-hover al icono que aparecerá dejándo atrás al que está predeterminado al hacer hover */

.Footer-hover{
    width: 2.1875rem;
    height: 2.1875rem;
    opacity: 0;
    transform: scale(0);

    transition: all 0.3s ease;
}

/*
Al hacer hover en los iconos, el icono predeterminado pasa a opacidad 0 para que no se vea */

.Footer-linkedin:hover .Footer-svg{
    opacity: 0;
}


.Footer-gitHub:hover .Footer-svg{
    opacity: 0;
}

/*
Al hacer hover en los iconos, el icono con la clase "Header-hover" pasará a tener opacidad 1 y se visualizará de distinto color y con un tamaño algo más grande */

.Footer-linkedin:hover .Footer-hover{
    opacity: 1;
    transform: scale(1.2);
    fill: var(--color-terciario);
}


.Footer-gitHub:hover .Footer-hover{
    opacity: 1;
    transform: scale(1.2);
    fill: var(--color-terciario);
}

/*
Al pincha en cualquiera de los dos iconos se cambia el color y la escala */

.Footer-linkedin:active .Footer-hover{
    opacity: 1;
    transform: scale(1.1);
    fill: var(--color-cuaternario);
}


.Footer-gitHub:active .Footer-hover{
    opacity: 1;
    transform: scale(1.1);
    fill: var(--color-cuaternario);
}



.Footer-svg{
    width: 2.1875rem;
    height: 2.1875rem;

    position: absolute;

    opacity: 1;
    transition: opacity 0.3s ease;

    fill: var(--color-terciario);
}

/* RESPONSIVE INDEX */

@media(max-width: 1200px){
    .Header-button{
        display: block;
        width: 2rem;
        height: 2rem;
    }

    .Header-icons{
        width: 95%;
    }

    .Header-nav{
        display: none;
    }

    .Title-h1{
        font-size: 4.6875rem;
    }


    .Footer{
        padding: 10vh 0;
    }

    .Footer-wrapper{
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;

        gap: 3.125rem;
    }


    .Footer-nav{
        justify-content: center;
    }


    .Footer-ul{
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 30px;

    }

}


@media ( max-width: 800px){

    .Header-wrapper{
        height: 15vh;
        padding: 5vh 5vh;
    }

    .Title{
        padding: 15vh 5vh;
        height: 60vh;
    }

    .Title-h1{
        max-width: 25rem;
   }

   .Recent{
        height: 25vh;
        padding: 0 0 10vh 0;
   }

   .Main-projects{
        padding: 15vh 5vh;
   }

    .Main-h1{
        font-size: 6.25rem;
        color: var(--color-terciario);
    }

    .Main-img{
        opacity: 1;
    }
}

@media(max-width: 500px){
    .Title-h1{
        font-size: 3.75rem;
    }

    .Main-projects{
        padding: 0 5vh;
   }
}


/* RESPONSIVE INDEX */


/* ------ MAIN ------- */

/* ABOUT */

.Main-about{
    max-width: 187.5rem;
    min-height: 50vh;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;

    gap: 3.125rem;

    padding: 0vh 15vh 10vh;
    margin: auto;


}

.About-h1{
    font-size: 6.875rem;
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: -0.25rem;

    animation: slideIn 2s ease;
}

.About-buttons{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    gap: 2.5rem;
}

.About-button{
    width: 12rem;
    height: 3rem;
    border: solid white .1875rem;
    border-radius: 2.5rem;
    font-size: 1.25rem;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}



.About-bloques{
    width: 100%;
    max-width: 50rem;
    position: relative;


}

.About-bloque{
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;

    padding: 0 0 5vh 0;
}

.About-p{
    font-size: 1.25rem;
    line-height: 1.6rem;
    width: 100%;
    padding: 0 0 0 2.3rem;
}

.About-button.isActive{
    color: var(--color-secundario);
    border: solid var(--color-secundario);
}

.About-bloque.isActive{
    opacity: 1;
    animation: opacity 1s ease;
}

.About-button:hover{
    transform: scale(1.05);
    border: .1875rem solid var(--color-secundario);
    color: var(--color-secundario);
    background-color: var(--color-terciario);
}

.About-button:active{
    background-color: var(--color-secundario);
    color: var(--color-terciario);
    transform: scale(0.95);
}

.About-button:visited{
    background-color: var(--color-secundario);
    color: var(--color-terciario);
    transform: scale(0.95);
}

.About-mobile{

    width: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;

    gap: 1rem;
    display: none;
}

.About-button_mobile{
    width: 12rem;
    height: 3rem;
    border: solid white .1875rem;
    border-radius: 2.5rem;
    font-size: 1.25rem;
    font-weight: 600;

    transition: all 0.2s ease;
}

.About-bloque_mobile{
    display: none;
}

.About-p_mobile{
    text-align: center;
    font-size: 1rem;
}

.About-button_mobile.isActive{
    background-color: var(--color-secundario);
    color: var(--color-terciario);
    border: solid var(--color-secundario);
}

.About-bloque_mobile.isActive{
    min-height: 30vh;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    margin: 2vh 0 5vh 0;
}

.About-iconos{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    z-index: 1;

    gap: 3.125rem;

    padding: 5vh 0 0 2.3rem;

    animation: fadeIn 1s backwards 0.2s;
}

.About-svg{
    height: 2.5rem;
    opacity: 0.7;


    transition: all 0.3s ease;
}

.About-svg:hover{
    transform: scale(1.2);
    fill: var(--color-secundario);
    opacity: 1;

}

.Linea-temporal{
    width: 100%;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;

    margin: 0 0 0 2.3rem;

    gap: 3.125rem;
}

.Linea-span{
    width: 88%;
    height: .1875rem;
    background-color: var(--color-cuaternario);
    z-index: -1;

    left: 0;
    top: .4rem;

    position: absolute;
}

.Info-text{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;

    position: relative;
    z-index: 2;

    color: var(--color-cuaternario);

    gap: 1.25rem;

    transition: all 0.5s ease;
    cursor: pointer;
}

.Info-h4{
    font-size: 1.25rem;
    font-weight: 500;
}

.Info-p{
    font-size: .875rem;
}

.Info-point{
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--color-cuaternario);

    position: relative;
    transition: all 0.5s ease;
    cursor: pointer;

    z-index: 2;
}

.Info-point:hover{
    background-color: var(--color-secundario);
    transform: scale(1.3);
}

.Info-point:hover ~ .Info-text{
    color: var(--color-terciaro);
    transform: scale(1.2);
}

.Info-text:hover {
    color: var(--color-terciaro);
    transform: scale(1.2);
}

.Linea-info:hover .Info-point{
    background-color: var(--color-secundario);
    transform: scale(1.3);
}

.Linea-info{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;

    gap: 2.5rem;
}


/* ------ ABOUT ------- */

/* ------ SOBRE MI ------ */

.Main-sobre_CV{
    height: 0;
    transform: scale(0);
    transform-origin: top;
    opacity: 0;
    max-width: 120rem;

    transition: all 0.5s ease;
}

.Main-sobre_CV.isActive{
    height: auto;
    transform: scale(1);
    padding: 15vh 20vh;
    opacity: 1;
    margin: auto;

    display: grid;
}

.Cv{
    display: grid;
    grid-template-columns: repeat( 3 , 1fr );
    gap: 3.125rem;

    margin: auto;
}

.Cv-text{
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: flex-start;

    grid-column: span 2;

    gap: 3.125rem;
}

.Cv-h3{
    font-size: 2.5rem;
}

.Cv-p{
    max-width: 62.5rem;
    font-size: 1.25rem;
}

.Cv-span{
    display: block;
    padding: 2rem 0 0 0;
}

.Cv-img{
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;


}

/* SOBRE MI */

/* ------ MAIN ------- */

/* RESPONSIVE MAIN */

@media (max-width: 1300px){
    .Cv{
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

@media(max-width: 1200px){

    .Header-wrapper{
        padding: 0 5vh;
    }

    .Header-button{
        display: block;
        width: 2rem;
        height: 2rem;

    }

    .Header-nav{
        display: none;
    }

    .Main-about{
        padding: 0 5vh;
        justify-content: flex-start;
    }

    .About-h1{
        font-size: 4.6875rem;
    }

    .Main-sobre_CV{
        padding: 0 5vh;
    }

    .Main-sobre_CV.isActive{
        padding: 5vh;
    }

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

    .Footer-wrapper{
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;

        gap: 3.125rem;
    }

    .Footer-nav{
        justify-content: center;
    }

    .Footer-ul{
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        gap: 30px;

    }

}


@media ( max-width: 800px){

    .Header-wrapper{
        height: 15vh;
        padding: 5vh 5vh;
    }

   .Recent{
        height: 25vh;
   }

   .About{

        min-height: 60vh;

        align-items: center;
   }

    .About-h1{
        font-size: 5rem;
        align-self: center;
    }

    .About-buttons{
        display: none;
    }

    .About-bloques{
        display: none;
    }

    .About-mobile{
        display: flex;
    }


    .About-p_mobile{
        padding: 0 3vh;
    }

    .About-iconos{
        padding: 5vh 0 0 0;
    }

    .Button-fixed{
        right: 5%;
        bottom: 5%;
    }

    .Linea-temporal{
        flex-flow: column nowrap;
    }

    .Linea-span{
        width: .1875rem;
        height: 88%;

        margin: 0 0 0 .375rem;
    }

    .Linea-info{
        flex-flow: row nowrap;

    }

    .Info-text{
        color: var(--color--terciaro);
    }

    .Info-point{
        background-color: var(--color-secundario);
    }

    .Info-p{
        max-width: 15.625rem;
    }


    .Footer-wrapper{
        padding: 5vh;
    }

}

@media(max-width: 500px){

    .About{
        padding: 2vh;
    }

    .About-h1{
        font-size: 3.75rem;
    }

    .Main-h1{
        font-size: 3.125rem;
    }

    .Footer{
        padding: 5vh;
    }
}


@media (max-width: 300px){

    .About-iconos{
        display: grid;
        grid-template-columns: repeat( 2 , 1fr );
    }
}

/* RESPONSIVE SOBRE MI */