/* definicion variables */
:root {
  --color-principal: #ffffff;
  --color-secondario:#06B3DE ; /* color de fondo del aside de informacion personal - 04b4e0 */

  --color-background: #f2f7f9; /* color de fondo de la tarjeta- f2f7f9 */
  --color-transparent: transparent;

  --color-icon: #e4b66a; /*b5b6b7*/
  --color-title: #222222;
  --color-subtitle: #92732b; /*color del subtitulo - #888*/
  --color-text: #555;

  --color-border-reviews:#e5e6e7;
  --color-company:#a5a6a7;
}

/* estilos generales */
/* 1ro estilos a la etiqueta html para definir el font-size que va a tener la raiz del documento para a partir de alli usar las medidas en REM */
html {
  font-size: 10px;
}

body {
  width: 100%; /*todo el ancho de la pantalla*/
  height: 100%; /*se adapta a la altura*/
  font-family: "poppins", Arial, Helvetica, sans-serif;
  font-size: 1.5rem;
  background-color: var(--color-background); /*color de fondo de la tarjeta*/
  color: var(--color-text);
}

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

/* imagen de fondo, se separa porque es la parte especifica del fondo y si lo quiero cambiar modifico solo esta parte */
body {
  background-image: url("../img/fondo.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: -20px -120px;
}

/* estructura principal */

/* se va a trabajar en el contenedor en forma de tarjeta con el aside de enlaces */

.layout {
  position: relative; /*para que se comporte de esa manera la caja completa*/
  min-width: 1290px;
  width: 75%;
  height: 80vh;
  min-height: 80vh;
  margin: 10vh auto;

  display: grid; /*para empezar a hacer mi cuadricula que sera de dos columnas*/
  grid-template-areas: "aside content"; /*defino dos areas*/
  grid-template-columns: 30% 70%; /*le doy anchura a cada columna*/

  /*sombra detras del layout*/
  border-radius: 4rem;
  box-shadow: 0 0 100px -5px rgba(0, 0, 0, 0.25);

  /* border: 1px solid black; */
}


/* barra lateral de info de usuario */

.layout__aside{
    grid-area: aside;
    border-radius: 4rem 0 0 4rem;
    overflow: auto;
    overflow-x: hidden;
}

/* contendo del contenedor de la informacin de usuario */
.aside__user-info{
    display: flex; /* hago el contenedor flexible pero abajo especifico que sea en columna */
    flex-direction: column;
    align-items: center; /*centra elementos pero no texto*/
    text-align: center; /*centra el texto*/
    min-height: 100%;
    min-width: 30rem;
    background-color: VAR(--color-secondario);
    color: var(--color-principal);
}


.user-info__container-image{
   position: relative; 
 display: inline-block;
 /* al dar width y height creo una base cuadrada   */
 width: 28rem;
 height:28rem;
 margin-top: 7rem;

z-index:1;
}




.user-info__image{
   width: 100%;
    height: 100%;
    background-color: var(--color-principal);
border: 1px solid var(--color-principal);
border-radius: 50%; /*como el cuadrado es perfecto en 50% se garantiza un circulo perfecto*/

/* como la base es cuadrada se escala la imagen de manera uniforme hasta que todo el cuadro este lleno y recorta lo que sobra */
object-fit: cover;
object-position: left center; /*con esta propiedad logre correr la imagen a la izquierda*/
}

/* uso de pseudo elemento para añadir mejoras esteticas, en este caso una sombra al lado de la imagen: */
.user-info__container-image::after{
    content: "";
    position:absolute;
    top: 7%;
    left: 10%;
    z-index: -1;
    width:100%;
    height:100%;
    background-image: -webkit-repeating-radial-gradient(center center, #fff, #fff 1px, transparent 0px, transparent 100%);
    background-size: 0.6rem 0.6rem;
    opacity: 0.3;
    border-radius: 30rem;

}

.user-info__name{
font-size: 3rem;
font-weight: bold;
color: var(--color-principal);
margin-top: 3.6rem;


}


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

}


/* redes sociales */

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

}

.links__social{
    margin-top: 2rem;
    /* text-align: center; */
    display: flex;
    /* flex-direction: row; */

}

.social__option{
    height: 3rem;
    width:3rem;
    font-size: 1.8rem;
    line-height: 3rem;
    opacity:0.9;
    border-radius: 3rem;
    transition: all 300ms linear;
}

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

}

/* boton descarga cv */

.user-info__buttons{
    margin: 2rem 0 4rem 0;
}
.user-info__btn{
padding: 1.3rem 3rem; 
border: 2px solid white;
border-radius: 3.2rem;
color: var(--color-principal);
/* propagacion horizontal, vertical, difuminado, escondida o mas sobresaliente, estos son los valores de la siguiente sombra:*/
box-shadow: 0 10px 10px -8px rgba(0, 0, 0, 0.25);


}

.user-info__btn:hover{
   background-color:   var(--color-principal);
   color: var(--color-secondario);
   transition: all 300ms ease-out;
}

/*footer*/
.user-info__footer{
    position: absolute;
    bottom: 2rem;
    font-size: 1.2rem;

}


/* contenedor principal */
/* esta clase es de main y envuelve esta seccion del layout del contenido principal */
.layout__content{
    grid-area: content;
/*aseguro el tamaño del contenedor siempre en 100%*/
height: 100%;
min-height: 100%;
    /*se va a ajustar un color igual al aside del menu para que paresca que se integran ambos contenedores. El contenedor main tendra el mismo color del aside de menu pero en la estructura dentro de main hay un contenedor content__page que llevara el color del contenido principal.*/
    background-color: var(--color-secondario);
    border-radius: 0 10rem 10rem 0;

}

/* Esta clase esta dentro del main, la caja que tiene el contenido  */
.content__page{
background-color: var(--color-principal);
height: 100%;
border-radius: 3.2rem;
 
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}


.page__name{
    font-size: 6rem;
    margin-bottom: 1rem;

}


.page__job{
    font-size: 2.1rem;
    font-weight: lighter ;
color: var(--color-subtitle);
}



/* menu navegacion lateral */

.layout__menu{
    display: block;
    position: absolute;
    top:0;
    right: -110px;
    min-width: 11rem;
    background-color: transparent;
}

.menu__list{
 position: relative;   
 display: flex;
    flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: var(--color-principal);
width:60%;
min-height: 32rem;
padding: 2rem 0;
margin-left: 2.5rem;

box-shadow: 0 0 3rem -0.5rem rgba(0, 0, 0, 0.15);
border-radius: 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;

}

.menu__option:hover .menu__icon{
    color:var(--color-secondario)
}

.menu__overlay{
    position: absolute; /*para especificar la posicion de ubicacion del texto*/
    right: 0;
margin-top:-3rem;
    display: block;
    opacity: 0;
    padding: 0.5rem 1rem;
    color: var(--color-principal);
    background-color: var(--color-secondario);
    white-space: nowrap; /*para que el texto me quede en una sola linea*/
transition: all 300ms ease-in ;


}

.menu__option:hover .menu__overlay{
opacity: 1;
right: 100%; /*posiciono el texto separado de los iconos en la totalidad de espacio del contenedor*/



}



/* SOBRE MI */

.content__about{
    display: block;
    height:100%;
    min-height: 100%;
    padding: 6rem;
    padding-right: 3rem;
     overflow:auto; /*con esto conseguimos que el scroll este dentro del contenedor */
}


.about__header{
    display: inline-block;
    margin-bottom: 4.5rem;
}

.about__title{
    font-size: 3.2rem;
    position: relative;
}

.about__title::after{
    content:"";
    position:absolute;
    top: 20px;
    right: -25px;
    width: 50px;
    height: 30px;
    background-image: -webkit-repeating-radial-gradient(center center, var(--color-secondario), var(--color-secondario) 1px, transparent 0px, transparent 100%);
background-size: 6px 6px;


}


.title__color{
color:var(--color-secondario)
}


/* informacion personal */

.about__personal-info{
    display: flex;
    flex-direction: row;

    width: 100%;
    margin-bottom: 5rem;

}

.personal-info__bio{
    flex-basis: 56%;
}


.personal-info__description{
    font-size:1.5rem;
    line-height: 2.4rem;
}
.personal-info__data{
    flex-basis: 44%;
    padding: 0 1.5rem;
}

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

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


/*Estilos compartidos*/
.about__services,
.about__reviews,
.about__clients{
    width: 100%;
    margin-bottom:3rem ;
}

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

.services__title::after,
.reviews__title::after,
.clients__title::after{
    content: "";
    position: absolute; 
    top:15px;
    right: 0px;
    width:30px;
    height: 20px;
      background-image: -webkit-repeating-radial-gradient(center center, var(--color-secondario), var(--color-secondario) 1px, transparent 0px, transparent 100%);
background-size: 6px 6px;
opacity: 0.5;
}
 /* servicios header  */
.services__container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.services__service{
    flex-basis: calc(50% - 3rem);
    margin-right: 3rem;
    margin-bottom: 1.5rem;
}
.service__real-icon  {
    color: var(--color-secondario);
    font-size: 3.8rem;
}

.service__title,
.reviews__title,
.clients__title{
    font-size: 1.8rem;
    margin: 0.5rem 0;
}

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


/* reviews */

.reviews__container{
  
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

.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;
   

    margin: 0 auto;
    margin-top: -4.5rem;
    margin-bottom: 2rem;
     border-radius: 9rem;
     box-shadow: 0 10px 10px -1px rgba(0, 0, 0, 0.21);
}


.review__description{
    margin-bottom: 1rem;
}

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


.review__autor{
    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-secondario);
}

/* clientes */

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

.clients__header{
   margin-bottom: 3rem; 
}

.clients__container{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}
.clients__image{
    width: 150px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}