/* VARIABLES */
:root{
    /* --color-principal:#FFFFFF; 
    --color-secondary:#04B4E0; 

    --color-background:#F2F7F9;
    --color-transparent:transparent;

    --color-icon:#B5B6B7;
    --color-title:#222222;
    --color-subtitle:#888;
    --color-text:#555;
   

    --color-border-reviews:#E5E6E7;
    --color-company:#A5A6A7;

    --color-background-certificate:#f5f5f5;
    --color-background-contact:#FCFCFC; */






 

    --color-principal:#222;
    --color-secondary:cadetblue; 
    

    --color-background:#F2F7F9;
    --color-transparent:transparent;

    --color-icon:#B5B6B7;
    --color-title:white;
    --color-subtitle:#888;
    --color-text:#9f9f9f;
   

    --color-border-reviews:#E5E6E7;
    --color-company:#A5A6A7; 
    --color-background-certificate:#b9b9b9;
    --color-background-contact:#FCFCFC;
}

/*

/* ESTILOS GENERALES */
html{
    font-size: 10px;
    overflow: hidden;
    /* font-size: 62.55%;  */
    /*Poner esto es lo mismo que poner un font-size de 10 px, lo que pasa que con esto, desde el navegador
    puedo modificar el tamaño de la fuente en la accesibilidad (para personas con discapacidad) sin que se desmorone todo*/
}

body{
    width: 100%;
    height: 100%;
    font-family: "Poppins", Helvetica, sans-serif;
    background-color: var(--color-background);
    font-size: 1.5rem;
    color: var(--color-text);
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6{
    color: var(--color-title);
}

/* IMAGEN DE FONDO */
/* body{} */
    /* background-image: url("../img/fondo.png"); */
    /* background-size: cover; Esto es para que la imagen de fondo cubra todo el fondo, es decir, se adapte sin distorsionarse */
    /* background-repeat: no-repeat; */
    /* background-position: -20px -120px;La mueve */


.bordeInverso{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;  
    z-index: -2;
}

.bordeInverso__centro{
    flex-basis: 75%;
    display: flex;
    flex-direction: row;
}

.centro__izquierda{
    flex-basis: 30%;
    background-color: var(--color-principal);
}

.centro__derecha{
    flex-basis: 70%;
    background-color: var(--color-secondary);
}

.bordeInverso__izquierda{
    flex-basis: 12.5%;
    background-color: var(--color-principal);
}

.bordeInverso__derecha{
    flex-basis: 12.5%;
    background-color: var(--color-secondary);
}

/* ESTRUCTURA PRINCIPAL */
.layout{
    position: relative;
    min-width: 1290px;
    width: 75%;
    height: 80vh;
    min-height: 80vh;
    margin: 10vh auto;/*El primer parametro le pone un margen de un 10vh por arriba y por abajo, y como la altura es de 80vh, se queda centrado*/
                      /*El segundo parametro lo dentro horizontalmente.*/

    display: grid;    
    grid-template-areas: "aside content";
    grid-template-columns: 30% 70%;

    border-radius: 4rem;
    box-shadow: 0 0 100px -5px rgba(0, 0 , 0, 0.25);
}

/*BARRA LATERAL AZUL (ASIDE)*/
.layout__aside{
    grid-area: aside;
    border-radius: 4rem 0 0 4rem; /*Esto es para las 4 esquinas, espezando por arriba izquierda y terminando por abajo izquierda, haciendo todo el recorrido*/
    overflow: auto; /*Consigo scroll*/
    overflow-x: hidden;/*Elimino la parte de la imagen que sobresale*/
}

.aside__user-info{
    display: flex;
    flex-direction: column;
    align-items: center;/*Esto es para los elemntos que tiene display block. Actua en el eje perpendicular al flex-direction*/
    text-align: center;/*Esto es para los elementos de texto que no tinene display block*/

    min-height: 100%;
    min-width: 30%;

    background-color: var(--color-secondary);
    color: var(--color-principal);
}

.user-info__container-image{
    position: relative;
    display: inline-block;
    width: 18rem;
    margin-top: 7rem;
    z-index: 1; /*Para decir que es la capa principal. La sobra que crearemos mas abajo estara en la -1, para que este por debajo*/
}

.user-info__image{
    width: 100%;
    background-color: var(--color-principal);
    border: 0.3rem solid var(--color-principal);
    border-radius: 20rem;
}

/*El after es un pseudoelemento. Como es un efecto de css, se usa esto. No esta en el html y no se puede clickar ni nada.*/
/* Esto es para hacer una gradiente de puntitos que conseguiremos con el background-image */
.user-info__container-image::after{
    content:"";
    position: absolute;
    top: 1%;
    left: 9%;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: -webkit-repeating-radial-gradient(center center, #000, #000 1px, transparent 0px, transparent 100%);
    background-size: 0.6rem 0.6rem;
    border-radius: 30rem;
    opacity: 0.3;
}

.user-info__name{
    margin-top: 2.6rem;
    font-size: 3.2;
    font-weight: bold;
    color: var(--color-principal);
}

.user-info__job{
    font-size: 1.7rem;
    font-weight: 200;
    color: var(--color-principal);
}

.user-info__links{
    margin-bottom: 3.6rem;
}

.links__social{
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
}

.social__option{
    height: 3rem;
    width: 3rem;
    font-size: 1.8rem;
    line-height: 3.2rem; /*Con esto conseguimos centrarlos certicalmente*/
    opacity: 0.9;
    border-radius: 3rem;
    transition: all 300ms linear;
}

.social__option:hover{
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.25);
}

.social__link{
    color: var(--color-principal);
}

.user-info__buttons{
    margin-top: 2rem;
    margin-bottom: 4rem;
}

.user-info__btn{
    border: 0.2rem solid var(--color-principal);
    padding: 3rem;
    padding-bottom: 1.3rem;
    padding-top: 1.3rem;
    border-radius: 3.2rem;
    color: var(--color-title);
    /* box-shadow: 0 10px 10px -8px rgba(0, 0 , 0, 0.22); */
    transition: all 300ms ease-in-out;
    background-color: var(--color-principal);
}

.user-info__btn:hover{
    background-color: var(--color-title);
    color: var(--color-secondary);
    font-weight: 700;
}

.user-info__footer{
    /* position: absolute; */
    /* bottom: 3rem; */
    font-size: 1.2rem;
    margin-top: 8rem;
}



/*CONTENEDOR PRINCIPAL (MAIN)*/

.layout__content{
    grid-area: content;
    background-color: var(--color-secondary);
    border-radius: 0 10rem 10rem 0;
    height: 100%;
    min-height: 100%;
}

.content__page{
    width: 100%;
    min-height: 100%;
    background-color: var(--color-principal);
    border-radius: 0 4rem 4rem 0;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page__name{
    display: block;
    font-size: 6rem;
    margin-bottom: 5rem;
    color: var(--color-secondary);
    text-align: center;
}

.page__job{
    display: block;
    font-size: 2.5rem;
    font-weight: lighter;
    margin-bottom: 10rem;
    color: var(--color-title);
    opacity: 0;
    text-shadow: 1px 1px 20px rgba(255, 255, 255, 0.7);
}

.job__visible{
    opacity: 1;
}

.parrafo__maquina{
    display: block;
    height: 1.8rem;
    font-size: 1.9rem;
    font-weight: 500;
    font-family: "Courier New";
    margin-bottom: 3rem;
    }

.parrafo__email{
    display: block;
    font-size: 1.5rem;
}


/* Menu de navegacion lateral */
.layout__menu{
    display: block;
    position: absolute;
    right: -105px;
    background-color: var(--color-transparent);
    min-width: 11rem;
}

.menu__list{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background-color: var(--color-principal);
    width: 60%;
    min-height: 32rem;
    box-shadow: 0 0 3rem -0.5rem rgba(0, 0 , 0, 0.15);
    border-radius: 6rem;
    padding: 2rem 0; /*Si ponemos 2 parametros, uno actua con el margen superior y inferior, y el otro con los de la derecha y izquierda*/
    margin-left: 2.5rem;
}

.menu__option{
    display: block;
    width: 100%;
    text-align: center;
}

.menu__icon{
    color: var(--color-icon);
    font-size: 2.8rem;
    transition: all 300ms ease-in-out;
}

.menu__link--active .menu__icon{
    color: var(--color-secondary);
}

.menu__option:hover .menu__icon{ /*Cuando pase por encima del menu__option, se le aplicaran unos estilos al menu__icon*/
    color: var(--color-secondary);
}

.menu__overlay{
    position: absolute;
    right: 0%;
    margin-top: -3rem;  /*Esto es para que los titulos de los iconos se queden a la misma altura que sus iconos*/
    opacity: 0;
    display: block;
    color: black;
    background-color: var(--color-secondary);
    white-space: nowrap; /*Esto es para que el texto no tenga salto de linea*/
    color: var(--color-principal);
    padding: 0.5rem 1rem;
    border-radius: 5rem;
    transition: all 300ms ease-in-out;
    z-index: 3;
}

.menu__option:hover .menu__overlay{
    opacity: 1;
    right: 100%;
}

/* Estilos generales (sobre mi y todas las paginas)*/

.content__about,
.content__resume,
.content__portfolio,
.content__contact{
    display: block;
    height: 100%;
    overflow: auto;
    padding: 6rem;
    padding-right: 3rem;
}

.about__header,
.resume__header,
.portfolio__header,
.contact__header{
    margin-bottom: 4.5rem;
    display: inline-block;/*Aqui pongo inline-block porque quiero que el pseudoelemento que creamos abajo (.about__title::after) se 
                            posicione al lado, y con el position absolute poder moverlo como quiera. Si tengo display block, el bloque ocupa
                            toda linea y los puntos salen el final del todo, porque los puntos no pertenecen al bloque. Para hacerlo con
                            display block deberia de darle un width de x para que los puntos aparezcan al lado y no al final. Por tanto, necesito 
                            que el display sea inline-block, es decir que se comporte como un bloque pero que no coja toda la linea.*/
}

.about__title,
.resume__title,
.portfolio__title,
.contact__title{
    font-size: 3.2rem;
    position: relative;
    /* z-index: 1; No ponemos el z-index para que los puntitos aparezcan por detras porque al ser un titulo, ya se ven, practicamente no hay diferencia*/
} 

/* After es para agregar un ppsudoelemento que contenga efectos o lo que queramos pero que no conste en el html */
.about__title::after,
.resume__title::after,
.portfolio__title::after,
.contact__title::after{
    content: "";
    position: absolute;
    top: 20px;
    right: -25px;
    width: 50px;
    height: 30px;
    /* Con lo de abajo conseguiremos puntitus de un pixel del color secundario en un fondo transparente que va del pixel 1 al 100% */
    background-image: -webkit-repeating-radial-gradient(center center, var(--color-secondary), var(--color-secondary) 1px, transparent 0px, transparent 100%);
    background-size: 6px 6px;
    /* z-index: -1; */
    opacity: 0.5;
}

.title__color{
    color: var(--color-secondary);
}

/* Informacion personal */
.about__personal-info{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-bottom: 3rem;
    align-items: center;
    justify-content: space-between;
}

.personal-info__bio{
    width: 75%; 
    margin-right: 2rem;
    padding-right: 2rem;
}

.personal-info__container-image{
    width: 19rem;
    height: 22rem;
    /* border: 2px solid red; */
    /* display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 10rem;
    overflow: hidden; */
}

.container-image__img{
    width: 100%;
    height: 100%;
    border-radius: 8rem;
    /* height: 100%; */
}

.personal-info__description{
    font-size: 1.5rem;
    line-height: 2.4rem;
    text-align: justify;
}

.personal-info__data{
    flex-basis: 40%;/*Es como un width*/
    padding: 0 1.5rem;
}

.personal-info__option{
    margin-bottom: 1rem;
}

.personal-info__title{
    color: var(--color-secondary);
    font-weight: 600;
    margin-right: 0.5rem;
}

/* Estilos compartidos about y para otras secciones (sobre mi, curriculum...)*/
.about__services,
.about__reviews,
.about__clients,
.about__prices,
.about__extra{
    width: 100%;
    margin-bottom: 3rem;
}

.services__header,
.reviews__header,
.clients__header,
.prices__header,
.extra__header,
.resume__subheader,
.contact__form-header{
    display: inline-block;
    padding-right: 1.2rem;
    position: relative;
    margin-bottom: 2.5rem;
}

.services__title,
.reviews__title,
.clients__title,
.prices__title,
.extra__title,
.resume__subtitle,
.form-header__title{
    font-size: 2.1rem;
}

.services__title::after,
.reviews__title::after,
.clients__title::after,
.prices__title::after,
.extra__title::after,
.resume__subtitle::after,
.form-header__title::after{
    content: "";
    position: absolute;
    top: 15px;
    right: 0px;
    width: 30px;
    height: 20px;
    /* Con lo de abajo conseguiremos puntitus de un pixel del color secundario en un fondo transparente que va del pixel 1 al 100% */
    background-image: -webkit-repeating-radial-gradient(center center, var(--color-secondary), var(--color-secondary) 1px, transparent 0px, transparent 100%);
    background-size: 6px 6px;
    /* z-index: -1; */
    opacity: 0.5;
}

/* Seccion services */
.services__container{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.services__service{
    flex-basis: calc(50% - 3rem);
    /* margin-right: 3rem; */
    margin-bottom: 2.5rem;
}


.service__real-icon{
    color: var(--color-secondary);
    font-size: 3.8rem;
}

.services__title{
    font-size: 1.8rem;
    margin: 0.5rem 0;
}

.service__description{
    font-size: 1.5rem;
    text-align: justify;
}

/* Estilos reviews */
.reviews__container{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.reviews__title{
    margin-bottom: -1rem;
}

.reviews__title--color{
    color: var(--color-secondary);
}

.reviews__review{
    flex-basis: calc(50% - 2.5rem);
    border: 2px solid var(--color-border-reviews);
    border-radius: 2rem;
    padding-top: 0;
    padding-right: 2.5rem;
    padding-left: 2.5rem;
    padding-bottom: 1.5rem;
    margin-right: 2.5rem;
    margin-top: 4.5rem;
    margin-bottom: 1rem;
}

.review__image-container{
    width: 100%;
}

.review__image{
    max-width: 9rem;
    max-height: 9rem;
    border-radius: 9rem;
    margin: 0 auto;
    margin-top: -4.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 10px -8 rgba(0, 0, 0, 0.22);/*Desplazamiento x, desplazamiento y, difuminado, color, extension*/
}

.review__description{
    margin-bottom: 1rem;
}

.review__text{
    font-size: 1.5rem;
    line-height: 2.4rem;
}

.review__author{
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.review__name{
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.review__company{
    color: var(--color-company);
    font-weight: 300;
    font-size: 1.3rem;
}

.review__icon{
    font-size: 4rem;
    opacity: 0.5;
    color: var(--color-secondary);
}

/* ESTILOS CLIENTS */
.clients__title--color{
    color: var(--color-secondary);
}

.about__clients{
    width: 100%;
    margin-bottom: 2rem;
    margin-top: 5rem;
}

.clients__header{
    margin-bottom: 0.5rem;
}

.clients__container{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.clients__link{
    display: block;
    margin-top: 3rem;
    width: 100%;
    opacity: 0.7;
    transition: all 300ms linear;
}

.clients__link:hover{
    opacity: 1;
    transform: scale(1.2);
}

.clients__img{
    background-color: white;
    width: 210px;
    height: 70px;
    /* height: 110px; */
    /* padding: 1.5rem; */
    margin: 1.5rem 0;
}

/* ESTILOS DE PRECIOS */

.prices__title--color{
    color: var(--color-secondary);
}

.prices__container{
    margin-bottom: 5rem;

    display: flex;
    flex-direction: row;
}

.prices__box{
    flex-basis: 50%;
    height: 100%;
    padding: 3rem;
    margin-right: 3rem;
    border: 2px solid var(--color-border-reviews);
    border-radius: 1.5rem;
    text-align: center;
    transition: all 300ms ease-in-out;
}

.prices__box:last-of-type{ /*La pseudo clase 'last-of-type' es para aplicar unos estilos al ultimo elemento de la clase .prices_box en este caso*/
    margin-right: 0rem;
}

.prices__box:hover{
    box-shadow: 0 18px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-1rem);
}

.prices__subtitle{
    margin-bottom: 3rem;
}

.prices__text{
    position: relative;
    display: inline-block;
}

.prices__box:hover .prices__text::after{/*Cuando uso la pseudoclase after es para añadir un elemento a los elementos de la clase .prices_text, en este caso.
                                        Este elemento añadido no consta en el html (dom) y tiene que tener la propiedad content aunque este vacia*/
    content: "";
    position: absolute;
    height: 0.2rem;
    left: 0;
    right: 0;
    bottom: -0.3rem;
    background-color: var(--color-secondary);
}

.prices__box:hover{
    color: var(--color-title);
}

.prices__price{
    padding-top: 1rem;
}

.prices__number{
    font-size: 4.2rem;
    line-height: 1;
    color: var(--color-title);
    display: block;
}

.prices__advice{
    color: var(--color-subtitle);
    display: block;
}

.prices__buy{
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.prices__btn{
    display: inline-block;
    padding: 1.2rem 3.1rem;
    border: 2px solid var(--color-border-reviews);
    /* box-shadow: 0 10px 1px -8px var(--color-border-reviews); */
    border-radius: 3rem;
    transition: all 300ms ease-in-out;
    color: var(--color-principal);
    background-color: var(--color-secondary);
}

.prices__btn:hover{
    background-color: var(--color-title);
    color: var(--color-secondary);
    font-weight: 700;
    border: 0;
}

.prices__reward{
    font-size: 1.4rem;
    padding: 0.6rem 0;
}

/* ESTILOS EXTRA */

.extra__container{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    /* gap: 2rem; */
    justify-content:space-between;
}

/* .extra__container:last-child {
    justify-content:left; 
  } */


.extra__info{
    flex-basis: 26%;
    border: 2px solid var(--color-border-reviews);
    text-align: center;
    border-radius: 1rem;
    padding: 2.5rem 1rem;
    margin-bottom: 1rem;
    transition: all 300ms ease-in-out;
}



.extra__info:hover{
    box-shadow: 0 18px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-0.5rem);
}

.extra__icon{
    font-size: 3.5rem;
    color: var(--color-secondary);
    margin-bottom: 1rem;
}

.extra__subtitle{
    font-size: 1.5rem;
    margin: 1.5rem;
}

.extra__quantity{
    display: block;
    font-size: 3.6rem;
    line-height: 5rem;
    margin: 1.5rem 1rem;
    margin-bottom: 0;
    color: var(--color-subtitle);
}

/* Estilos para el curriculum*/

.resume__container{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.resume__left{
    flex-basis: 58%;
    margin-right: 1.5rem;
}

.resume__timelines{
    margin-bottom: 5rem;
    display: flex;
    flex-direction: column;
}

.timelines__timeline{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 1.5rem;
}

.timeline__header{
    flex-basis: 33%;
    text-align: right;
    padding-right: 2.3rem;
}

.timeline__year{
    margin: 0.3rem 0;
    line-height: 2rem;
    font-size: 1.4rem;
}

.timeline__company{
    display: block;
    font-size: 1.3rem;
    font-weight: lighter;
    color: var(--color-company);
}

.timeline__description{
    width: 70%;
    padding-left: 0.5rem;
    padding-right: 1.5rem;
}


.timeline__title{
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
}

.timeline__text{
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.timeline__divider{
    position: absolute;
    top: 0;
    left: 30%;
    bottom: -18px;
    width: 1px;
    background-color: var(--color-background-scrollbar);
}

.timeline__divider::before{ /*Para añadir las bolas de los separadores usamos un before para añadir el elemento antes del separador*/
    position: absolute;
    margin-top: 0.4rem;
    margin-left: -0.8rem;
    opacity: 0.25;
    content: '';
    width: 1.7rem;
    height: 1.7rem;
    background-color: var(--color-secondary);
    border-radius: 10rem;
}

.timeline__divider::after{/*Tengo que añadir un pseudoelemento after porque si pongo otro before, me machaca el de arriba*/
    position: absolute;
    margin-top: 0.8rem;
    margin-left: -0.4rem;
    opacity: 1;
    content: '';
    width: 0.9rem;
    height: 0.9rem;
    background-color: var(--color-principal);
    border-radius: 10rem;
    border: 2px solid var(--color-secondary);
}

/* Curriculum parte derecha */

.resume__right{
    flex-basis: 41%;
    padding: 0 1.5rem;
}

.resume__intro{
    color: var(--color-text);
    margin-bottom: 1rem;
}

.resume__skills{
    width: 100%;
    margin-bottom: 3rem;
}

.skills__title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.skills__text{
    font-size: 1.3rem;
    line-height: 1.4rem;
    margin-bottom: 0.4rem;
}

.skills__number{
    font-size: 1.1rem;
    line-height: 1.4rem;
    margin-bottom: 0.4rem;
    color: var(--color-subtitle);
}

.skills__progressbar{
    width: 100%;
    height: 1rem;
    border: 1px solid var(--color-secondary);
    border-radius: 1rem;
    background-color: var(--color-principal);
    margin-bottom: 2rem;
}

.skills__percentage{
    background-color: var(--color-secondary);
    border: 2px solid var(--color-principal);
    height: 0.8rem;
    border-radius: 1rem;
}

.skills__percentage--p1{ width: 90%; }
.skills__percentage--p2{ width: 85%; }
.skills__percentage--p3{ width: 85%; }
.skills__percentage--p4{ width: 75%; }
.skills__percentage--p5{ width: 65%; }
.skills__percentage--p6{ width: 70%; }
.skills__percentage--p7{ width: 90%; }
.skills__percentage--p8{ width: 90%; }
.skills__percentage--p9{ width: 85%; }
.skills__percentage--p10{ width: 50%; }
.skills__percentage--p11{ width: 60%; }
.skills__percentage--p12{ width: 80%; }
.skills__percentage--p13{ width: 60%; }
.skills__percentage--p14{ width: 85%; }
.skills__percentage--p15{ width: 80%; }

.knowledges__list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.knowledges__option{
    background-color: var(--color-secondary);
    border-radius: 0.3rem;
    color: var(--color-principal);
    font-size: 1.3rem;
    padding: 0.4rem 1rem;
    margin: 0.3rem 0.3rem;
}

.knowledges__option:hover{
    transform: scale(1.05);
}

.certificates__container{
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
}

.certificates__certificate{
    width: 30%;
    height: 35rem;
    border: 2px solid var(--color-border-reviews);
    border-radius: 0.8rem;
    display: flex;
    flex-direction: column;

}

.certificate__logo{
    /* width: 40%;
    height: 100%; */
    background-color: var(--color-background-certificate);
    /* padding: 3.5rem; */
    display: flex;
    flex-direction: row;
    align-items: center;
}

.certificate__img{
    width: 100%;
}

.certificate__content{
    width: 100%;
    padding: 2rem 2.5rem;
}

.certificate__title{
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.certificate__id{
    display: block;
    font-size: 1.2rem;
    color: var(--color-subtitle);
    margin-bottom: 0.3rem;
}

.certificate__date{
    font-size: 1.2rem;
    color: var(--color-subtitle);
    opacity: 0.9;
}

@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-10px); }
    80% { transform: translateX(10px); }
    100% { transform: translateX(0); }
  }
  
.shake:hover{
    animation: shake 0.5s ease-in-out; 
}

/* Portfolio */

.portfolio__navbar{
    margin-bottom: 3rem;
}

.portfolio__menu{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.portfolio__option{
    font-size: 1.3rem;
    opacity: 0.7;
    font-weight: 500;
}

.portfolio__option--active{
    opacity: 1;
}

.portfolio__link{
    color: var(--color-subtitle);
    cursor: pointer; 
}

.portfolio__link:hover{
    color: var(--color-secondary);
    text-shadow: 0 0 1px rgba(0, 0 , 0, 0.25);
}

.portfolio__galery{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.galery__item{
    flex-basis: 50%;
    padding: 0.7rem;
    position: relative;
    display: flex;
    flex-direction: column;
}

.galery__tec{
    display: flex;
    flex-direction: row;
    margin-top: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.tec__item{
    background-color: var(--color-secondary);
    color: var(--color-principal);
    padding: 0.3rem;
    border-radius: 1rem;
}

.socket__icon{
    padding-top: 0.3rem;
}

.galery__container-image{
    height: 25rem;
    overflow: hidden;
}

.galery__image{
    width: 100%;
    height: 100%;
    transition: all 300ms ease-in-out;
}

.galery__item:hover .galery__image{
    transform: scale(1.2);
}

.galery__title{
    font-size: 1.6rem;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    font-weight: bold;
}

.gallery__icon{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3rem;
    height: 3rem;
    font-size: 4rem;
    text-align: center;
    line-height: 3rem;
    transition: all 450ms ease-in-out;
    background-color: var(--color-principal);
    color: var(--color-secondary);
}

.galery__category{
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    padding: 0.2rem 0.7rem;
    font-size: 1.1rem;
    transition: all 450ms ease-in-out;
    background-color: var(--color-principal);
    color: var(--color-text);
    opacity: 0;
}

/* .galery__item:hover .galery__category{
    opacity: 1;
} */

/* PAGINA DE CONTACTO */

.contact__container{
    display: flex;
    flex-direction: row;
}

.contact__info{
    flex-basis: 33%;
    padding: 0 1.5rem;
}

.contact__data{
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 2rem 1rem;
    text-align: center;
    background-color: var(--color-background-contact);
    border: 1px solid var(--color-border-reviews);
}

.contact__icon{
    font-size: 3.3rem;
    color: var(--color-secondary);
}

.contact__subtitle{
    font-size: 1.5rem;
    margin-top: 1rem;
    color: var(--color-principal);
}

.contact__form-box{
    flex-basis: 66%;
    padding: 0 1.5rem;
}

.form__container{
    display: flex;
    flex-direction: row;
}

.form__left{
    flex-basis: 47%;
    margin-right: 1.5rem;
}

.form__group{
    position: relative;
    margin-bottom: 2.5rem;
}

.form__input{
    position: relative;
    width: 100%;
    height: 4.2rem;
    display: block;
    border: 0.2rem solid var(--color-border-reviews);
    border-radius: 0.5rem;
    outline: none;
    box-shadow: 0 1rem 1rem -8px rgba(0, 0 , 0, 0.10);
    background-color: transparent;
    font-size: 1.5rem;
    padding: 1rem 1.2rem;
    line-height: 2.1rem;
    color: var(--color-title);
}

.form__input:focus{
    border: 0.2rem solid var(--color-secondary);
    
}

.form__label{/*Le pongo un position relative y una posicion top y left para posicionarlo encima del input.
    Luego haré un efecto para que suba hacia arriba*/
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    color: var(--color-company);
    transition: all 300ms ease-in-out;
    pointer-events: none;/*Esto es para que cuando pulse el label, no interfiera con el input, es decir, como si fuera inclickable*/
}

.form__input:focus~label, /*Cuando usamos el simbolo ~, es para hacer referencia al elemento hermano vinculado, que esta al mismo nivel*/
.form__input:not(:placeholder-shown)~label{ /*Esto es para que cuando hagamos focus en un input y nos salgamos, no vuelva el label a su sitio.
    Usamos la psudofuncion :not() para que sino se cumple lo de dentro del parentesis, hay lo de la regla(entre corchetes). En este caso,
    sino se cumple que el placeholder se vea, es decir, cuando haya texto, que sobre el label hermano, se posicione arriba del input y no que
    vuelva a su posicion normal que es en medio del input. El placeholder esta cuando no hay texto y no está cuando está vacio, aunque sea
    transparente y en este caso no se vea nunca*/
    top: -2rem;
    left: 0;
    font-size: 1.3rem;
    color: var(--color-secondary);
}

.form__input::-webkit-input-placeholder{
    color: transparent;
}

.form__right{
    flex-basis: 50%;
    max-width: 50%;
    width: auto;
    max-height: 100%;
}

.form__group--textarea{
    height: 100%;
}

.form__input--textarea{
    display: block;
    height: 100%;
    resize: none;
}

.form__button{
    padding: 1rem 3rem;
    font-size: 1.5rem;
    border: 0.2rem solid #fff;
    color: var(--color-principal);
    background-color: var(--color-secondary);
    border-radius: 3rem;
    box-shadow: 0 1rem 1rem -8px rgba(0, 0 , 0, 0.22);
    cursor: pointer;
    transition: all 300ms ease-in-out;
    font-weight: 700;
}

.form__button:hover{
    color: var(--color-secondary);
    font-weight: 700;
    background-color: #fff;
    border: 0.2rem solid var(--color-secondary);
}

.contact__map{
    width: 100%;
    min-height: 15rem;
    margin-bottom: 3.5rem;
    overflow: hidden;
}

.contact__iframe{
    width: 100%;
    height: 14rem;
}