/*FICHERO HTML:PORTAFOLIO*/

/*ESTILOS EN LAS VARIABLES*/
/*PSEUDOCLASE (:ROOT) PARA CREAR VARIABLES,GUARDAN UN VALOR(UN DATO) Y DAR ESTILOS GENERALES,
Y CUANDO QUERAMOS CAMBIAR EJEMPLO COLORES,LE PONDREMOS DE ESTILO LA VARIABLE,Y PODEMOS IR MODIFICANDO COLORES AQUI,Y CAMBIARAN LOS ESTILOS
EN TODOS LOS VALORES QUE TENGAN ALGUNA DE ESTAS VARIABLES DE VALOR.EJEMPLO:SI TENEMOS QUE CAMBIAR ALGUN COLOR REPETIDO Y LO QUIERO CAMBIAN,NO TENGO
QUE IR UNO POR UNO,LO CAMBIO AQUI,Y LE DA LA ORDEN AL RESTO*/
:root{
    /*VARIABLE CON SU VALOR DE COLOR*/
    --color-principal:#FFFFFF;/*VARIABLE CON SU VALOR DE COLOR*/
    --color-secondary:#04B4E0;/*VARIABLE CON SU VALOR DE COLOR*/

    --color-background:#F2F7F9;/*VARIABLE CON SU VALOR DE COLOR*/
    --color-transparent:transparent;/*VARIABLE CON SU VALOR DE COLOR*/

    --color-icon:#B5B6B7;/*VARIABLE CON SU VALOR DE COLOR*/
    --color-subtitle:#888;/*VARIABLE CON SU VALOR DE COLOR*/
    --color-titles:#222222;/*VARIABLE CON SU VALOR DE COLOR*/
    --color-text:#555;/*VARIABLE CON SU VALOR DE COLOR*/
    --color-background-contact:#FCFCFC;
    --color-border-reviews:#E5E6E7;



}

/*ESTILOS GENERALES*/
html{/*ESTILO A TODO EL HTML*/
    font-size:10px;/*LE DOY ESTE TAMAÑO DE FUENTE GENERAL FIJO DE 10PX,ASI AHORA CUANDO TRABAJE CON LO (REM)1rem=10px/UN REM SERA IGUAL A 10PX.
    Y SI DESPUES QUIERO CAMBIAR LOS TAMAÑOS DE LOS REM,PODRIA MODIFICAR SU VALOR AQUI,DANDOLE LOS PX EQUIVALENTES AL REM QUE YO QUIERA.
    NOTA:PARA TRABAJAR CON REM,LA MEDIDA GENERAL QUE VALDRA UN REM,SE LE PONE EN EL HTML,PUEDO PONER LA MEDIDA QUE QUIERA AL REM,
    EN ESTE CASO LE PONGO QUE 1REM SEA IGUAL A 10PX*/

}


body{/*ESTILO A TODO EL BODY*/

    width: 100%;/*PARA QUE EN TODO MOMENTO EL BODY OCUPE EL ANCHO EL 100% DE LA PAGINA*/
    height: 100%;/*PARA QUE EN TODO MOMENTO EL BODY OCUPE LA ALTURA DEL 100% DE LA PAGINA*/
   font-family:"poppins", helvetica, sans-serif;/*FUENTE DE LAS LETRAS,LA 1ºPOPPINS,SI NO SALE, PONDRA LAS SIGUIENTES POR ORDEN*/
    font-size: 1.5rem;/*TAMAÑO DE LAS LETRAS CON MEDIDA REM,QUE EQUIVALE A 1rem = 10px ,1.5rem = 15px*/
    background-color: var(--color-background);/*LE DOY COLOR DEL FONDO DEL BODY CON LA VARIABLE*/
    color:var(--color-text);/*LE DOY EL COLOR A LAS LETRAS DEL BODY CON LA VARIABLE*/
    overflow: hidden;/*PARA QUE NO AHIGA NINGUN TIPO DE SCROLL,RESPECTO A LOS FONDOS QUE LE METAMOS Y ESO*/
   

}




h1, h2, h3, h4, h5, h6{/*ESTILO A TODAS ESTAS ETIQUETAS*/
   color:var(--color-titles);/*LE DOY EL COLOR A LAS LETRAS DE LAS ETIQUETAS <h> CON LA VARIABLE*/

}

/*IMAGEN DE FONDO*/
body{/*ESTILO AL BODY*/
    background-image: url(../img/fondo.png);/*USO UN FONDO QUE TENGO GUARDADO EN LAS CARPETAS,URL(PARA ENLAZAR)*/
    background-size: cover;/*PERMITE COLOCAR BIEN EL FONDO,DISTORSIONA(OCUPA)EL TAMAÑO QUE LE PONGA*/
    background-repeat: no-repeat;/*PARA QUE LA IMAGEN DE FONDO NO SE REPITA*/
    background-position:-20px -120px;/*MUEBO LA POSICION DE LOS EJES DEL FONDO= X  Y   -=ES A LA IZ  +=ES A LA DERECHA*/
}
body:hover{
    animation: fondo 10s linear;
    -webkit-animation: fondo 10s linear;
    animation-iteration-count: infinite;
   
    background-image: url(../img/fondo.png);
  
    
}
@keyframes fondo{
    0%{
        background-position:-20px -120px;
       
    }
    50%{
        background-position:0px 0px;
       
    }
   
    100%{
        background-position:-20px -120px;
       
    }
    50%{
        background-position:0px 0px;
       
    }
    0%{
        background-position:-20px -120px;
       
    }

}

#header{
    display: flex;
}



/*ESTRUCTURA PRINCIPAL*/

.layout{/*ESTILO A LA CAJA DE TODO EL LAYOUT*/
    position:relative;/*POSICION RELATIVA/PARA QUE SE COMPORTE DE ESTA MANERA LA CAJA COMPLETA*/
    min-width: 1290px;/*ANCHURA MINIMA*/
    width: 75%;/*ANCHO DEL 75% DEL TOTAL DE LA PAGINA*/
    height: 80vh;/*ALTURA/80vh=SIGNIFICA QUE OCUPE EL 80% DE LA ALTURA VERTICAL QUE TIENE LA PAGINA,EL BODY,LA WEB */
    min-height:80vh;/*ALTURA MINIMA/80vh=SIGNIFICA QUE OCUPE EL 80% DE LA ALTURA VERTICAL QUE TIENE LA PAGINA,EL BODY,LA WEB */
    margin:10vh;/*MARGEN/10vh=PARA QUE TENGA UN MARGEN DEL 10% DE LA ALTURA VERTICAL QUE TIENE LA PAGINA,EL BODY,LA WEB */

    display: grid;/*EL ELEMENTO SE COMPORTA COMO UN ELEMENTO DE BLOQUE Y DEACUERDO CON EL MODELO CUADRICULA*/
    grid-template-areas:"aside content";/*VA A INDICAR CUANTAS AREAS VA A TENER MI TEMPLATE,MI GRID MI CUADRICULA DE LA WEB/aside y content*/
    grid-template-columns:30% 70%;/*PERMITE CONTROLAR EL ANCHO DE LOS ELEMENTOS,EN AUTO="TODOS IGUALES"
    O DARLE DIFERENTES ANCHOS  A LAS CAJAS POR SEPARADO CON PX O PORCENTAJES/CAJA<asise>30% CAJA<content>70%*/

    box-shadow:0 0 100px -5px rgba(0, 0, 0, 0.25);/*SOMBRA DE LA CAJA/SOMBRAS EN EL EJE/COLORES Y OPACIDAD DEL 25% */
   



}
/*LA SOMBRA QUE ESTA DETRAS DEL LAYOUT/PONGO OTRA CLASE LAYOUT APARTE PARA DAR ESTILO PORQUE AL PONER BORDER RADIUS SE ME MUEVEN LOS COMENTARIOS*/
.layout{
    border-radius:4rem ;
    -webkit-border-radius:4rem ;
    -moz-border-radius:4rem ;
    -ms-border-radius:4rem ;
    -o-border-radius:4rem ;
    -webkit-border-radius:4rem ;
}


/*BARRA LATERAL AZUL 1º AREA*/  
/*NOTA:SIEMPRE HAY QUE INDICAR EL AREA A CADA CAJA EN PARTICULAR,PARA QUE EL GRID-TEMPLATE-AREA HAGA BIEN SU TRABAJO*/
.layout__aside{/*ESTILO A LA CAJA <aside class="layout__aside">ESTILO AL (aside)*/
    grid-area:aside;/*PARA QUE ESTA AREA VA A VINCULARSE CON EL AREA DEL ASIDE QUE LE PUSE EN EL LAYOUT GENERAL DE ARRIBA,QUE LE PUSE EL 30%
    Y LUEGO VA A TENER LA ANCHURA CORRECTA DEL 30% COMO PUSE EN EL AREA DEL LAYOUT GENERAL*/
    overflow: auto;/*POR SI ACASO SUCEDE EN ALGUN MOMENTO,ALGUN TIPO DE SCROLL AQUI DENTRO SALDRA BARRA DE SCROLL,MIENTRAS QUE NO SALGA NADA NO.*/
    overflow-x: hidden;/*TODO LO QUE SOBRESALGA A NIVEL LATERAL,EN EL EJE X VA A SER OCULTADO*/
}
.layout__aside{
    border-radius: 4rem 0 0 4rem;/*4rem=SI REDONDEAR ESQUINA (SUPERIOR IZQUIERDA)/0=NO ESQUINA (SUPERIOR DERECHA),0=NO ESQUINA (INFERIOR DERECHA),4rem=SI (INFERIOR IZQUIERDA)*/
    -webkit-border-radius: 4rem;
    -moz-border-radius: 4rem 0 0 4rem;
    -ms-border-radius: 4rem 0 0 4rem;
    -o-border-radius: 4rem 0 0 4rem;
    -webkit-border-radius: 4rem 0 0 4rem;
}

.aside__user-info{/*ESTILO A LA CAJA<section class="aside__user-info">ESTILO AL ELEMENTO user-info*/
    display: flex;/*QUE SE COMPORTE COMO UN BLOQUE Y QUE LOS ELEMTOS DE DENTRO SEAN FLEXBOX OCUPANDO TODO EL ANCHO DE LA CAJA*/
    flex-direction:column;/*LOS ELEMENTOS DE DENTRO SE COMPORTARAN COMO  EN COLUMA*/
    align-items: center;/*SI YO LE DOY UNA ALTURA A LA CAJA,Y PARA QUE LAS CAJAS DEL INTERIOR NO SE ALARGEN HACIA ABAJO/
    LOS (ELEMENTOS QUE SE COMPORTEN COMO UN BLOQUE), SE ALINEARAN EN EL CENTRO´
    NOTA:EJEMPLO=LOS H1 ETC,NO TIENEN DISPLAY BLOCK Y NO SE MOVERA SU TEXTO,POR ESO PONGO APARTE TEXT-ALINE:CENTER PARA LOS TEXTOS*/

    text-align: center;/*(LOS TEXTOS) QUE TENGA LA CAJA SE ALINEARAN EN EL CENTRO*/
    min-height: 100%;/*ALTURA MINIMA,AHORA OCUPARA LA ALTURA DEL 100% DE LA CAJA*/
    min-width: 30rem;/*ANCHURA MINIMA*/

    background-color:var(--color-secondary);/*COLOR DE FONDO DE LA CAJA*/
    color:var(--color-principal);/*COLOR DE LAS LETRAS*/

}

.user-info__container-image{/*ESTILO A LA CAJA<div class="user-info__container-image">ESTILO AL ELEMENTO container-image*/

 display: inline-block;/*PARA QUE SE COMPORTE COMO UN BLOQUE EN LINEA,OCUPA EN HORIZONTAL ES ESPACIO NECESARIO */
 width:15rem;/*ANCHO DE 15REM=150PX*/
 margin-top:5rem;/*MARGEN SUPERIOR DE 5REM=50PX*/
 
 position: relative;/*NO MODIFICA LAS OTRAS CAJAS AL MOVERSE.*/
 z-index: 1;/*ESTA CAJA ESTARA EN LA CAPA 1/PARA PODER METER DESPUES LA SOMBRA D LA CAJA, DETRAS DE LA CAJA EN LA CAPA -1*/

}

.user-info__container-image{/*BORDER RADIOUS A LA CAJA QUE CONTIENE LA IMAGEN*/
    border-radius:20rem ;
    -webkit-border-radius:20rem ;
    -moz-border-radius:20rem ;
    -ms-border-radius:20rem ;
    -o-border-radius:20rem ;
}

.user-info__image{/*ESTILO A LA ETIQUETA <img src="assets/img/mi-foto.jpg" class="user-info__image">ESTILO AL ELEMENTO image*/
    width:100%;/*ANHO DEL 100%/ASI DE ESTA MANERA VA A TENER SIEMPRE EL TAMAÑO DEL 100% DE LA CAJA QUE LA CONTIENE*/
    background-color:var(--color-principal);/*COLOR DEL FONDO DE LA CAJA QUE CONTIENE LA IMAGEN,POR SI SE VE ALGO FUERA DE LA FOTO O ..
    SINO SE CARGARA LA IMAGEN EN ALGUN MOMENTO SE VERIA EL FONDO BLANCO*/
    border:3px solid var(--color-principal);/*BORDE DE LA CAJA DE LA IMAGEN*/
   
}

.user-info__image{/*BORDER RADIUS A LA IMAGEN EN SI*/
    border-radius:20rem ;
    -webkit-border-radius:20rem ;
    -moz-border-radius:20rem ;
    -ms-border-radius:20rem ;
    -o-border-radius:20rem ;
}

/*PSEUDOELEMENTOS:
-UN ELEMENTO QUE PUEDO CREAR MEDIANTE CSS,QUE ES EL (ULTIMO HIJO DE LA CAJA) CUAL YO LE APLICO ESTE PSEUDOELENTO,NORMARMENTE SE UTILIZA PARA AÑADIR
MEJORAS ESTETICAS,O AÑADIR ELEMENTOS O CONTENIDO QUE VA A SER (UNICAMENTE CONTENIDO ESTETICO PARA LA PAGINA)NO SE PUEDE TOCAR,CLIKAR,MODIFICAR,ETC.
-USAREMOS EL  PSEUDOELEMENTO ::after,DA ESTILO ESTETICO NO PULSABLE  DELANTE DE LA(CAJA) DONDE PONGO ::AFTER */
.user-info__container-image::after{/*AGREGAR UN HIJO A LA CAJA<div class="user-info__container-image">CREO UNA CAJA ESTETICA A (container-image)
    -SERA COMO AGREGAR UNA SOMBRA JUSTO DESPUES E LA IMAGEN*/
    content:"";/*COMO NO QUIERO METER UN CONTENIDO DELANTE DE LA IMG,CAJA, ECT, LE PONGO CONTENT:"" VACIO PARA HACERLE OTRA COSA UN DEGRADADAO*/
    position: absolute;/*SIRVE PARA DESPLAZAR UNA CAJA,MEDIANTE LAS REGLAS:LEFT,BUTON,TOP,ETC,POSITION= ABSOLUTE AL MOVERLA,MODIFICA EL RESTO 
    DE LAS CAJAS QUE SE MOVERAN PARA OCUPAR SU SITIO,A DIFERENCIA DE POSITION=RELATIVE QUE NO MODIFICA LAS OTRAS CAJAS AL MOVERSE Y DEJAN SU HUECO LIBRE.*/
    top:5%;/*QUE SE POSICIONE A UN 5% DESDE LA PARTE DE ARRIBA DE LA CAJA*/
    left:9%;/*QUE SE POSICIONE A UN 9% DESDE LA PARTE DE IZQUIERDA DE LA CAJA*/
    z-index:-1;/*PARA LA CAJA ESTETICA QUE HIZE CON ::AFTER QUE ES ULTIMO HIJO ,SE COLOQUE DETRAS DE LA CAJA PADRE container-image
     QUE LE PUSE Z-INDEX=1*/
    width: 100%;/*QUE OCUPE EL ANCGO DEL 100%(ESENCIAL PARA QUE APAREZCA LA CAJA CREADA)*/
    height: 100%;/*ALTURA DEL 100%(ESENCIAL PARA QUE APAREZCA LA CAJA CREADA)*/
    opacity:0.5;/*PARA QUE SE VEAN LOS COLORES DE ESTA CAJA MAS DIFUMINADOS*/
    /*AHORA EMPEZAMOS EL (DEGRADADO) QUE LE QUEREMOS HACER A LA CAJA ESTETICA*/
    background-image: -webkit-repeating-radial-gradient(center center, var(--color-principal),  var(--color-principal) 1.4px,transparent 0px, transparent 100%);/*LO GENERAMOS NOSOTROS: 
    CON ESTA FUNCION QUE ME PERMITE GENERAR DEGRADADOS PUROS CON PUNTITOS,PODEMOS METER VARIOS PARAMETROS,(center center)=ESTABLECE PUNTO CENTRAL
    DE LA AGARADIENTE,ES DECIR SI ESTA MAS A LA IZQUIERDA MAS A LA DERECHA.#fff, #fff,=COLOR DE LOS PUNTOS.1px=TAMAÑO DE LOS PUNTOS .
    transparet 0px=COLOR TRANSPARENTE DEL AGRADIENTE COMO TAL DESDE EL PUNTO 0 PARA EMPEZAR.transparent 100%=COLOR TRANSPARENTE DEL AGRADIENTE
     COMO TAL DESDE EL PUNTO 100% PARA TERMINAR*/
    background-size: 0.6rem 0.6rem;/*TAMAÑO DEL FONDO del eje x, y del eje y.(ESENCIAL PARA QUE APAREZCA LA CAJA CREADA)*/

    }
.user-info__container-image::after{/*BORDE REDONDEADO A ESTA CAJA ESTETICA*/
    border-radius: 30rem;
   -webkit-border-radius: 30rem;
    -moz-border-radius: 30rem;
    -ms-border-radius: 30rem;
    -o-border-radius: 30rem;
}    

.user-info__name{/*ESTILO A LA ETIQUETA <h2 class="user-info__name">ESTILO AL ELEMENTO NAME*/
    color:var(--color-principal);/*COLOR DE LAS LETRAS*/
    font-size: 3.2rem;/*TAMAÑO DE LA FUENTE*/
    font-weight: bold;/*ANCHO DE LA FUENTE*/
    margin-top: 2.6rem;/*MARGEN SUPERIOR*/
   

}

.user-info__job{/*ESTILO A LA ETIQUETA <h4 class="user-info__job">ESTILO AL ELEMENTO JOB*/
    font-size: 1.7rem;/*TAMAÑO DE LA FUENTE*/
    font-weight: 200;/*ANCHO DE LA FUENTE*/
    color:var(--color-principal);


}



.user-info__links{/*ESTILO A LA CAJA <div class="user-info__links">ESTILO AL ELEMENTO links*/

    margin-bottom: 3.6rem;/*MARGEN INFERIOR*/

}

.links__social{/*ESTILO A LA CAJA <ul class="links__social">ESTILO AL ELEMENTO social*/
    text-align: center;/*ALINEAR EL TEXTO DE LA CAJA EN EL CENRO*/
    margin-top: 2rem;/*MARGEN SUPERIOR*/

    display: flex;/*LA CAJA SE COMPORTE COMO UN BLOQUE,OCUPE TODO EL ESPACIO HORIZONTAL,LOS ELEMENTOS DE LA CAJA QUE SEAN FLEXIBLES*/
    flex-direction: row;/*LAS CAJAS DE DENTRO SE COLOQUEN EL FILA HORIZONTAL COMO ESTAN POR DEFECTO*/
    
}

.social__option{/*ESTILO A LAS CAJAS <li class="social__option">ESTILO A LOS ELEMENTOS option*/
    height: 3rem;/*ALTURA*/
    width: 3rem;/*ANCHO*/
    font-size: 3.5rem;/*TAMAÑO DE LA FUENTE*/
    line-height: 3.2rem;/*ALTURA DE LINEA*/
    opacity:0.9;/*PARA QUE SE VEAN LOS COLORES DE ESTA CAJA MAS DIFUMINADOS,QUE ESTEA EL COLOR BLANCO UN POCO MAS APAGADO*/

}
.social__option{
    border-radius: 3rem;/*BORDE REDONDEADO A LAS CAJAS option*/
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    -ms-border-radius: 3rem;
    -o-border-radius: 3rem;
    transition:all 300ms ;
    
    -webkit-transition:all 300ms linear ;/*TRANSICION A TODO CON ESE TIEMPO DE 300MS,Y LINEAR PARA QUE SEA UNA TRANSICION LINEAR*/
    -moz-transition:all 300ms linear;
    -ms-transition:all 300ms linear;
    -o-transition:all 300ms linear;
    -webkit-transition:all 300ms linear;
    
}



.social__option:hover{/*LE DOY ESTILO CUANDO PASE POR ENCIMA CON EL RATON A LAS CAJAS <li class="social__option">ESTILO A LOS ELEMENTOS option*/
    opacity:1;/*COLORES MAS DIFUMINADOS,CUANDO PASE POR ENCIMA CON EL RATON*/
    background-color:rgba(255, 255, 255, 0.20);/*COLOR DEL FONDO,CUANDO PASE POR ENCIMA CON EL RATON*/
}

.user-info__buttons{/*ESTILO A LA CAJA <div class="user-info__buttons">ESTILO AL ELEMENO buttons*/
    margin-top: 2rem;/*MARGEN SUPERIROR*/
    margin-bottom: 4rem;/*MARGEN INFERIOR*/
}

.user-info__btn{/*ESTILO A LA ETIQUETA <a class="user-info__btn">ESTILO AL ELEMENTO btn*/
   
    padding: 3rem;/*MARGEN INTERIOR*/
    padding-top: 1.3rem;/*MARGEN INTERIOR SUPERIOR*/
    padding-bottom: 1.3rem;/*MARGEN INTERIOR POR ABAJO*/
    color:var(--color-principal);
    box-shadow: 0 10px 10px -8px rgba(0, 0, 0, 0.22);/*SOMBRA A LA CAJA DEL BOTON*/
    border:2px solid var(--color-principal);/*BORDE TIPO SOLIDO COLOR BLANCO*/
}

.user-info__btn{
    border-radius: 3.2rem; /*BORDE REDONDEADO*/
   -webkit-border-radius: 3.2rem;
    -moz-border-radius: 3.2rem;
    -ms-border-radius: 3.2rem;
    -o-border-radius: 3.2rem;

    transition:all 300ms ease-in-out;/*/*TRANSICION A TODO CON ESE TIEMPO DE 300MS,*/
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
} 

.user-info__btn:hover{/*ESTILO CUANDO PASE POR ENCIMA CON EL RATON A LA ETIQUETA DEL BOTON <a class="user-info__btn">*/
    background-color: var(--color-principal);/*COLOR DEL FONDO CUANDO PASE POR ENCIMA CON EL RATON*/
    color:var(--color-secondary);/*COLOR DE LAS LETRAS CUANDO PASE POR ENCIMA CON EL RATON*/

}

.user-info__footer{/*ESTILO A LA CAJA DEL FOOTER <footer class="user-info__footer">*/
    position: absolute;/*PARA QUE SE QUEDE SIEMPRE FIJO HAY ABAJO,SI LO MUEVO E RESTO DE LAS CAJAS SE ADAPTARAN Y OCUPARAN EL SITIO VACIO*/
    bottom: 2rem;/*PARA QUE SE QUEDE FIJO ABAJO*/
    font-size: 1.2rem;/*TAMAÑO A A LA FUENTE*/


}





/*## CONTENEDOR PRINCIPAL 2º AREA ###*/



.layout__content{/*ESTILO A LA CAJA <main class="layout__content" ESTILO AL ELEMENTO (content)ES LA 1º CAJA,ENVUELVE LA CAJA DE LOS ELEMENTOS*/
    grid-area:content;/*PARA QUE ESTA AREA VA A VINCULARSE CON EL AREA DEL CONTENT QUE LE PUSE EN EL LAYOUT GENERAL DE ARRIBA,QUE LE PUSE EL 70%
    Y LUEGO VA A TENER LA ANCHURA CORRECTA DEL 70% COMO PUSE EN EL AREA DEL LAYOUT GENERAL*/
    
    background-color: var(--color-secondary);/*COLOR DEL FONDO DE ESTA CAJA*/
    height: 100%;/*DEJAMOS CLARO QUE LA ALTURA SEA SIEMPRE DEL 100%*/
    min-height: 100%;/*DEJAMOS CLARO QUE LA ALTURA MINIMA SEA SIEMPRE DEL 100%*/
    overflow: auto;

}
.layout__content{   /*BORDES REDONDEADOS PERO SOLO LAPARTE DERECHA*/
 border-radius: 0 4rem 4rem 0; /*0=(SUPERIORIZQUIERDA),4REM=(SUPERIORDERECHA),4REM=(INFERIORDERECHA),0=(INFERIORIZQUIERDA)*/
   -webkit-border-radius: 04rem 4rem 0;
    -moz-border-radius: 0 4rem 4rem 0;
    -ms-border-radius: 0 4rem 4rem 0;
    -o-border-radius: 0 4rem 4rem 0;
    -webkit-border-radius: 0 4rem 4rem 0;
}

.content__page{/*ESTILO A LA CAJA <section class="content__page">ESTILO AL ELEMENTO PAGE, ES LA 2º CAJA, CONTIENE LOS ELEMENTOS*/
    background-color: var(--color-principal);/*COLOR AL FONDO DE LA CAJA*/
    min-height: 100%;/*ALTURA MINIMA DEL 100%,PARA QUE OCUPE LO MISMO QUE LA 1º CAJA CONTENT,Y PUEDA AHORA REDONDEAR POR ENCIMA DE CONTENT*/
    
    
    display: flex;/*PARA QUE SEA UNA CAJA FLEXIBLE Y SE COMPORTE COMO UN BLOQUE,Y ORGANIZAR SUS ELEMENTOS COMO CONTENEDORES FLEXIBLES*/
    flex-direction: column;/*QUE SE COLOQUEN LOS ELEMENTOS EN FORMA DE COLUMNA*/
    align-items: center;/*QUE LOS ELEMENTOS SE COLOQUEN EN (VERTICAL) AL CENTRO*/
    justify-content: center;/*QUE LOS ELEMENTOS HIJOS SE COLOQUEN EN (HORIZONTAL) AL CENTRO*/

}
.content__page{/*REDONDEO TODAS LAS ESQUINAS DE LA 2º CAJA PAGE PARA LOGRAR EL EFECTO QUE QUERIA CON LA CAJA 1º CONTENT*/
    border-radius:3.2rem ;
    -webkit-border-radius:3.2rem ;
    -moz-border-radius:3.2rem ;
    -ms-border-radius:3.2rem ;
    -o-border-radius:3.2rem ;
}

/*.page__name{/*ESTILO A LA ETIQUETA <h1 class="page__name">*
    font-size: 6rem;/*TAMAÑO DE LA FUENTE*/
    /*margin-bottom: 1rem;/*MARGEN POR ABAJO PARA SEPARARSE DEL JOB

}*/

.page__name {
  font-size: 4rem;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(90deg, #04B4E0, #0ff, #04B4E0);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 4s linear infinite;
  letter-spacing: 2px;
  text-align: center;
  margin: 0 auto;
}

.info-highlight {/*CAJA DE EL MENSAJE DEL CONTADOR DE MENSAJES*/
  font-size: 1.2rem;
  font-weight: 600;
  background: linear-gradient(90deg, #04B4E0, #0ff, #04B4E0);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 4s linear infinite;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 1rem;
}


@keyframes shine {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}


.page__job{/*ESTILO A LA ETIQUETA <h2 class="page__job">*/
    font-size: 2.1rem;/*TAMAÑO DE LA FUENTE*/
    font-weight: lighter;/*PARA QUE SEA LA FUENTE UN POQUITO MAS FINA*/
    color:var(--color-subtitle);/*COLOR DE LAS LETRAS*/

}





/*MENU NAVEGACION LATERAL*/
.layout__menu{/*ESTILO A LA CAJA <nav class="layout__menu">ESTILO AL ELEMENTO menu*/
    display: block;/*PARA QUE SE COMPORTE COMO UN BLOQUE,OCUPE EN HORIZONTAL TODO EL ANCHO DE LA CAJA QUE ESTEA*/
    position: absolute;/*SIRVE PARA DESPLAZAR UNA CAJA,MEDIANTE LAS REGLAS:LEFT,BUTON,TOP,ETC,POSITION= ABSOLUTE AL MOVERLA,MODIFICA EL RESTO */
    top:0;/*ME LO LLEVARA AL PIXEL 0 DESDE ARRIBA*/
    right:-110px;/*ME LO LLEVARA A LA PARTE DERECHA A -110PX*/
    background-color: var(--color-transparent);/*COLOR DEL FONDO TRANSPATENTE*/
    min-width: 11rem;/*ANCHO MINIMO*/



}

.menu__list{/*ESTILOS A LA CAJA <ul class="menu__list">ESTILO A LA CLASE list*/
    position: relative;/*NO MODIFICA LAS OTRAS CAJAS AL MOVERSE.*/
    background-color: var(--color-principal);/*COLOR DEL FONDO*/
    width: 60%;
    min-height: 32rem;/*ALTURA MINIMA*/
    box-shadow: 0 0 3rem -0.5rem rgba(0, 0, 0, 0.15);/*SOMBRA A LA CAJA*/
    padding: 2rem 0;/*MARGEN INTERIOR,/ 2rem=POR ARRIBA Y ABAJO/0=MARGEN LOS LADOS,IZ,DER*/
    margin-left: 2.5rem;/*MARGEN IZ*/

    display: flex;/*QUE SE COMPORTE COMO UN BLOQUE Y QUE LOS ELEMTOS DE DENTRO SEAN FLEXBOX OCUPANDO TODO EL ANCHO DE LA CAJA*/
    flex-direction: column;/*LOS ELEMENTOS DE DENTRO SE COMPORTEN COMO UNA COLUMNA */
    justify-content: space-between;/*PARA QUE SE ORGANICEN LOS ELEMENTOS DE FORMA VERTICAL EN EL CENTRO/MISMO ESPACIO ENTRE ELLOS*/
    align-items: center;/*PARA QUE SE ORGANICEN LOS ELEMENTOS DE FORMA VERTICAL EN EL CENTRO*/

}
.menu__list{
    border-radius: 6rem;
    -webkit-border-radius: 6rem;
    -moz-border-radius: 6rem;
    -ms-border-radius: 6rem;
    -o-border-radius: 6rem;
}


.menu__option{/*ESTILO A LA CAJA <li class="menu__option">*/
    display: block;/*PARA QUE SE COMPORTE COMO UN BLOQUE,OCUPE EN HORIZONTAL TODO EL ANCHO DE LA CAJA QUE ESTEA*/
    width: 100%;/*QUE OCUPE EL 100% DEL ANCHO DE LA CAJA DONDE ESTEA*/
    text-align: center;/*PARA ALINEAR EL TEXTO QUE AHIGA EN LA CAJA*/

}
.menu__option:hover .menu__icon{/*CUANDO PASE POR LA CAJA DE LAS LISTAS menu__option,DARA ESTILO CON HOVER A <i class="menu__icon>*/
    color: var(--color-secondary);/*COLOR A LOS ICONOS DE LAS LISTAS CUANDO PASE POR ENCIMA CON EL RATON*/
}

.menu__link--active .menu__icon{/*LE METO LA SUBCLASE ACTIVE DE MODIFICADOR EN EL HTML,LE DA ESTILO AL LINK Y EL ICONO
    CUANDO PASE POR  class="menu__link LA SUBCLASE :ACTIVE, DARA ESTILO A <i class="menu__icon*/
    color:var(--color-secondary);
}


.menu__icon{/*ESTILO A LA ETIQUETA <i class="menu__icon>*/
    color:var(--color-icon);/*COLOR DE LETRAS,ICONOS,*/
    font-size: 2.8rem;/*TAMAÑO DE LAS FUENTES*/
}
.menu__icon{
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
}


.menu__overlay{/*ESTILO A LA ETIQUETA <span class="menu__overlay">/
    1ºPASO EFECTO QUE APAREZLA LAS LETRAS AL LADO DEL ICONO AL HACER HOVER:
    POSICIONAMOS LAS LERTAS ENCIMA DEL ICONO,Y LO OCULTAMOS CON OPACITY 0*/
    position: absolute;/*PARA PODER MOVERLO COMO YO QUIERA*/
    right: 0;/*SE PONDRA LA CAJITA A LA DERECHA PERO A NIVEL 0,PEGADA,DE LA CAJA QUE LO CONTIENE*/
    margin-top: -3rem;/*MARGEN POR ARRIBA,PARA QUE SUBA LA CAJITA Y TAPE LOS ICONOS*/
    opacity: 0;/*COLORES MAS DIFUMINADOS,AQUI SIEMPRE A 0 Y AL HOVER LE PONEMOS  1,ASI SOLO SE VA A VER CUANDO HAGAMOS HOVER*/
    padding:0.5rem 1rem;/*MARGEN INTERIOR,/0.5rem=ARRIBA Y ABAJO,/1rem=IZQUIERDA Y DERECHA*/
    display:block;
    color:var(--color-principal);/*COLOR DE LAS LETRAS*/
    background-color: var(--color-secondary);/*COLOR DEL FONDO DE LA CAJITA DEL SPAN */
    white-space:nowrap;/*PARA QUE NO AHIGA SALTO DE LINEA/QUE TODAS LAS LETRAS DE LA CAJITA SE PONGAN TODAS EN UNA LINEA*/
}
.menu__overlay{
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
}



.menu__option:hover .menu__overlay{/*CUANDO PASE POR LA CAJA DE .menu__option, LE DARA ESTILO A <span class="menu__overlay
2º PASO=AL HACER HOVER LO MOSTRAMOS DANDOLE OPACITY 1 Y LO ARRIMAMOS DONDE QUEREMOS QUE APAREZCA,
EN ESTE CASO DESDE PIXEL 0% DERECHA, AL 100% IZ.DE LA CAJA QUE OCUPA*/
    opacity: 1;/*PARA QUE SE VEA LAS LETRAS CUANDO HAGAMOS EL HOVER*/
    right: 100%;/*SE COLOCARA AL 100% DE LA IZQUIERDA DE LA CAJA DE LA LISTA CUANDO HAGAMOS EL HOVER*/


}

/*####################################################*/
/*FICHERO HTML:SOBRE MI(ESTILOS GENERALES IGUALES PARA OTROS FICHEROS)COMPARTO ESTILOS ENTRE LOS  FICHEROS*/
.content_about, .content_resume{/*ESTILO A LA CAJA <section class="content__page (content_about)">Y <section class="content__page content_resume">
    (LA CAJA QUE CAMBIA EN CADA FICHERO*/
    height: 100%;/*ALTURA 100% DEL LAYAUT-CONTENT*/
    min-height: 100%;/*PARA QUE TENGA ESA MEDIDA SIEMPRE FIJA*/
    padding: 6rem;/*MARGEN INTERIOR A TODOS LOS LADOS DE 6REM*/
    padding-right: 3rem;/*MARGEN INTERIOR DERECHO*/
   overflow:auto;/*SCROLL EN CASO EN CASO QUE SEA NECESARIO,SI NO CABE  EL CONTENIDO.*/
   
   /*PEGO ALGUNOS ESTILOS QUE TENIA EN <section class="content__page>(MODIFICO AQUI ALGUNO)*/
   background-color: var(--color-principal);/*COLOR AL FONDO DE LA CAJA*/
   min-height: 100%;/*ALTURA MINIMA DEL 100%,PARA QUE OCUPE LO MISMO QUE LA 1º CAJA CONTENT,Y PUEDA AHORA REDONDEAR POR ENCIMA DE CONTENT*/
   display: block;/*PARA QUE SE COMPORTE COMO UN BLOQUE,Y OCUPE TODO EL ANCHO DE LA PAGINA .*/
   
}

.about__header, .resume__header{/*ESTILO A LA CAJA <header class="about__header">Y <header class="resume__header">*/
    margin-bottom: 4.5rem;/*MARGEN POR ABAJO*/
    display: inline-block;/*QUE SE COMPORTE COMO UN BLOQUE EN LINEA/CAJA OCUPE EL ANCHO NECESARIO*/

}

.about__title, .resume__title{/*ESTILO A LA ETIQUETA <h2 class="about__title">Y  <h1 class="resume__title">*/
    font-size: 3.2rem;/*TAMAÑO DE FUENTE*/
    position: relative;/*NO MODIFICA LAS OTRAS CAJAS AL MOVERSE.*/

}

/*::AFTER=PSEUDOELEMENTO PARA DAR ESTILOS DE ESTETICA,NO SELECCIONABLES,AÑADE UN CONTENIDO "DESPUES" DE LA CAJA JUSTO DONDE PONGO ::AFTER
EJEMPLO:MÍ"AQUI CONTENIDO DEL ::AFTER"*/
/*NOTA:NO SE ESTA APLICANDO EL ESTILO AFTER(NO SE PORQUE)*/
.about__title::after, .resume__title::after{
    content: "";/*COMO NO QUIERO METER UN CONTENIDO DELANTE DE LA PALABARA(MÍ) LE PONGO CONTENT:"" VACIO PARA HACERLE OTRA COSA:
     UN DEGRADADAO POR EJEMPLO,SI VACIO EL CONTENT:"",CREO OTROS ELEMENTOS Y APERECEN DONDE QUIERA,PARA ESO ES ::AFTER*/
    position: absolute;/*PARA PODER MOVER LA CAJA CREADA CON LETF,TOP,ETC Y DESPUES EL RESTO DE CAJAS SE ADAPTEN PARA OCUPAE EL ESPACIO */
    opacity: 0.5;/*DIFUMINADO*/
    top:20px;/*MUEVETE 20PX DESDE LA PARTE DE ARRIBA */
    right: -25px;/*MUEVETE DESDE LA DERECHA */
    width: 50px;/*WIDTH:ESENCIAL PARA QUE APAREZCA EL ELEMENTO CREADO*/
    height: 30px;/*HEIGHT:ESENCIAL PARA QUE APAREZCA EL ELEMENTO CREADO*/
    font-size: 6px 6px;/*TAMAÑO DE FUENTE:ESENCIAL PARA QUE APAREZCA EL ELEMENTO CREADO*/
    background-image:-webkit-repeating-radial-gradient(center center, var(--color-secondary), var(--color-secondary) 1px,transparent 0, transparent 100%);
    /*FONDO DE IMAGEN CREADA CON REPEATING-RADIAL-GRANDIENT/DEGRADADO/QUE SURGA DESDE EL CENTRO,*/
  
   
}
.about__title::after{
    border-radius: 30rem;
    -webkit-border-radius: 30rem;
    -moz-border-radius: 30rem;
    -ms-border-radius: 30rem;
    -o-border-radius: 30rem;
}


.title__color{/*ESTILO A LA ETIQUETA <span class="title__color" LA PALABRA (MI)*/
    color:var(--color-secondary);


}

/*###INFORMACION PERSONAL*/
.about__personal-info{/*ESTILO A LA CAJA <section class="about__personal-info">*/
    display: flex;/*PARA QUE LAS CAJAS QUE TINE DENTRO SE POSICIONEN UNA AL LADO DE LA OTRA*/
    flex-direction: row;/*LO PONEMOS PARA ESPECIFICAR PERO ESA POSICION YA LA PONE DISPLAY:FLEX*/
    width: 100%;/*ANCHO DEL 100% DE LA PAGINA QUE OCUPA*/
    margin-bottom: 5rem;/*margen por abajo PARA QUE SE SEPARE DE LA CAJA E ABAJO*/
}

.personal-info__bio{/*ESTILO A LA CAJA <article class="personal-info__bio">*/

    flex-basis: 50%;/*ANCHO TIPO FLEXBOX, REPARTO DE ANCHO EN PORCENTAJES A LAS DOS CAJAS*/

}

.personal-info__data{/*ESTILO A LA CAJA <div class="personal-info__data">*/

    flex-basis: 44%;/*ANCHO TIPO FLEXBOX, REPARTO DE ANCHO EN PORCENTAJES A LAS DOS CAJAS*/
    padding: 0 1.5rem;/*MARGEN INTERIOR,0=ARRIBA ,ABAJO.1,5REM=A LA IZ Y A LA DERECHA*/

}

.personal-info__description{/*ESTILO AL PARRAFO <p class="personal-info__description">*/
    
    line-height: 2,4rem;/*ALTURA DE LINEA*/
    font-size: 1.5rem;/*TAMAÑO DE LA FUENTE */
    text-align:justify;/*EL TEXTO SE ALINEARA EN CUADRADO EXACTO*/

   

}

.personal-info__option{/*ESTILO A LAS CAJAS <li class="personal-info__option">*/
    margin-bottom: 1rem;/*MARGENES POR ABAJO*/
}

.personal-info__title{/*ESTILO A LAS ETQUETAS <span class="personal-info__title">*/
  margin-right: 0.5rem;/*MARGEN POR LA DERECHA*/
  color:var(--color-secondary);
  font-weight: 600;/*ANCHO DE LAS LETRAS*/
  

}

.personal-info__title--color{
    color:var(--color-secondary);
   
    text-shadow: 1px 0.5px 2px green;
}

.personal-info__title--color:hover{
    color:green;
}


.personal-info__email:hover{
  color:green;
}

/*##  SERVICIOS ##*/

.about__services{/*ESTILO A LA CAJA <section class="about__services">*/
   width:100%;/*ANCHO DEL 100% DE LA CAJA DONDE ESTA about*/
   margin-bottom: 3rem;/*MARGEN POR ABAJO*/
}


.services__header{/*ESTILO A LA CAJA  <header class="services__header">*/
    display:block;/*QUE SE COMPORTE COMO UN BLOQUE Y OCUPE TODO EL ANCHO DE LA PAGINA*/
    padding-right: 1.2rem;/*MARGEN INTERIOR DERECHO*/
    margin-bottom: 2.5rem;/*MARGEN POR ABAJO*/

}

.services__title{/*ESTILO A LA ETIQUETA <h3 class="services__title">*/
    font-size: 2.1rem;/*TAMAÑO DE LA PALABRA*/

}

/*NOTA:NO SE ESTA APLICANDO EL ESTILO AFTER(NO SE PORQUE)*/
.services__title::after{/*ESTILO A LA ETIQUETA <h3 class="services__title" PERO AÑADIENDOLE UN ELEMENTO DELANTE ESTETICO CON AFTER>*/
    content:"";/*COMO NO QUIERO METER UN CONTENIDO DELANTE DE LA PALABARA(MÍ) LE PONGO CONTENT:"" VACIO PARA HACERLE OTRA COSA:
     UN DEGRADADAO POR EJEMPLO,SI VACIO EL CONTENT:"",CREO OTROS ELEMENTOS Y APERECEN DONDE QUIERA,PARA ESO ES ::AFTER*/
    position: absolute;/*PARA PODER MOVER LA CAJA CREADA CON LETF,TOP,ETC Y DESPUES EL RESTO DE CAJAS SE ADAPTEN PARA OCUPAE EL ESPACIO */
    opacity: 0.8;/*DIFUMINADO*/
    top:15;/*MUEVETE 15PX DESDE LA PARTE DE ARRIBA */
    
    right: 0;/*MUEVETE DESDE 0 LA DERECHA */
    width: 30px;/*WIDTH:ESENCIAL PARA QUE APAREZCA EL ELEMENTO CREADO*/
    height: 20px;/*HEIGHT:ESENCIAL PARA QUE APAREZCA EL ELEMENTO CREADO*/
    font-size: 6px 6px;/*TAMAÑO DE FUENTE:ESENCIAL PARA QUE APAREZCA EL ELEMENTO CREADO*/
    background-image:-webkit-repeating-radial-gradient(center center, var(--color-secondary), var(--color-secondary) 1px,transparent 0, transparent 100%);
    /*FONDO DE IMAGEN CREADA CON REPEATING-RADIAL-GRANDIENT/DEGRADADO/QUE SURGA DESDE EL CENTRO,*/
  
   
}

.services__container{/*ESTILO A LA CAJA QUE CONTIENE LOS ARTICULOS  <div class="services__container">*/
    width: 100%;/*QUE OCUPE EL 100% DE LA CAJA DONDE ESTA*/
    display:flex;/*SE PONDRAN LAS CAJAS UNA AL LADO DE LA OTRA EN HORIZONTAL/U SUS CAJAS DE DENTRO SERAN FLEXBOX */
    flex-direction:row;/*QUE NO FUNCIONE COMO COLUMNA,AUNQUE CON DIDPLAY:FLEX,YA ACTUA EN HORIXONTAL POR DEFECTO*/
    flex-wrap: wrap;/*PARA QUE LOS ELEMENTOS QUE SOBRESALGAN SE PONGAN EN OTRA LINEA DENTRO DE LA CAJA,LOS ENVUELVA*/
   
    
}

.services__service{/*ESTILO A LAS CAJAS <article class="services__service"> LAS CAJAS ARTICULO*/
    /*CADA CAJA ARTICULO OCUPARA UN 45% DEL ANCHO DEL CONTAINER CON ANCHO FLEXBOX,ESE 5% LO DEJO PARA MARGENES*/
    /*NOTA:PERO SI QUIERO QUE OCUPE EL 50% DEL ANCHO Y APARTE METER LOS MARGENES,QUE SE PASARIAN DEL 50% Y ME LO PONDRIA EN COLUMNA,
    PUES USO LA FUNCION  calc()  */
    flex-basis:calc(50% - 3rem);/*USAMOS LA FUNCION CALC() PARA PODER METER UN ANCHO DEL 50% A CADA CAJA EN HORIZONTAL Y APARTE MARGEN*/
    margin-right: 3rem;/*MARGEN DERECHO*/
    margin-bottom: 2.5rem;/*MARGEN POR ABAJO*/
   flex-wrap: wrap;
    flex-grow: 1;/*EL CONTENIDO DE DENTRO SE VA ADAPTANDO A LA CAJA AL REDUCIR PANTALLA*/


}

.services__real-icon{/*ESTILO A LAS ETIQUETAS <i class="services__real-icon */
    color:var(--color-secondary);
    font-size: 3.8rem;

}
/*ICONO QUE DESAPAREZCA Y APAREZCA DESDE LA DERECHA CUANDO HAGA HOVER*/
.services__real-icon{
    display:inline-block;
    position:relative;
    transition: transform 0.5s ease-in-out;
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -ms-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
}
.services__real-icon:hover{
    animation:mueveDerecha 0.5s ease-in-out;
    -webkit-animation:mueveDerecha 0.5s ease-in-out;
}
@keyframes mueveDerecha{
    0%{
        opacity: 1;/*VISIBLE*/
        transform:translateX(0)    ;/*EN 0% LA TRANSFORMACION DE TRASLADARSEX (HORIZONTALMENTE) SE QUE EN SU LUGAR DE ORIGEN*/
        -webkit-transform:translateX(0)    ;
        -moz-transform:translateX(0)    ;
        -ms-transform:translateX(0)    ;
        -o-transform:translateX(0)    ;
    }
    50%{
        opacity: 0;/*OCULTO*/
        transform: translateX(3rem);/*EN 50% LA TRANSFORMACION DE TRASLADARSEX (HORIZONTALMENTE) SE MUEVE 30PX A LA DERECHA DE SU ORIGEN*/
        -webkit-transform: translateX(3rem);
        -moz-transform: translateX(3rem);
        -ms-transform: translateX(3rem);
        -o-transform: translateX(3rem);
    }
    100%{
        opacity: 1;/*VISIBLE*/
        transform: translateX(0);/*EN 50% LA TRANSFORMACION DE TRASLADARSEX (HORIZONTALMENTE) VUELVE A SU ORIGEN*/
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }
}

.service__title{/*ESTILO A LAS ETIQUETAS <h4 class="service__title">*/
    font-size: 1.8rem;/*TAMAÑO DE FUENTE(PALABRA)*/
    margin:0.5rem 0;/*MARGEN A NIVEL VERTIVAL 0.5 Y A NIVEL HORIZONTA 0*/

}

.service__content{
    flex-wrap: wrap;
  
   
}

.service__description{/*ESTILO A LAS ETIQUETAS <p class="service__description">*/
    font-size: 1.5rem;/*TAMAÑO DE LA FUENTE */
    text-align: justify;/*EL TEXTO SE ALINEARA EN CUADRADO EXACTO*/
    
    
}

/*#### CURRICULUM ######*/

.resume__subheader{/*ESTILO A LA ETIQUETA <header class="resume__subheader"> */
    display: inline-block;/*QUE SE COMPORTE COMO UN BLOQUE PERO EN LINEA,EL ANCHO DE LA CAJA OCUPE EL ESPACIO NECESARIO*/
    padding-right: 1.2rem;/*MARGEN INTERIOR INTERNO DERECHA*/
    margin-bottom: 2.5rem;/*MARGEN POR ABAJO*/
    position:relative;/*PARA PODER MANIPULARLO SI SE MUEVE NO MODIFICA LAS OTRAS CAJAS DEJAN EL HUECO LIBRE*/
    
}

.resume__subtitle{/*ESTILO A LA ETIQUETA <h1 class="resume__title">*/

    font-size: 2.1rem;/*TAMAÑP DE LAS LETRAS*/

}

.resume__subtitle::after{/*ESTILO A LA ETIQUETA <h1 class="resume__title">CON EL PSEUDOELEMENTO ::after*/
    content:"";/*COMO NO QUIERO METER UN CONTENIDO DELANTE DE LA PALABARA(MÍ) LE PONGO CONTENT:"" VACIO PARA HACERLE OTRA COSA:
    UN DEGRADADAO POR EJEMPLO,SI VACIO EL CONTENT:"",CREO OTROS ELEMENTOS Y APERECEN DONDE QUIERA,PARA ESO ES ::AFTER*/
   position:absolute;/*PARA PODER MOVER LA CAJA CREADA CON LETF,TOP,ETC Y DESPUES EL RESTO DE CAJAS SE ADAPTEN PARA OCUPAE EL ESPACIO */
  
   top:20px;/*MUEVETE 20PX DESDE LA PARTE DE ARRIBA */
   right: 5px;/*MUEVETE DESDE LA DERECHA */
   width: 30px;/*WIDTH:30pxESENCIAL PARA QUE APAREZCA EL ELEMENTO CREADO*/
   height: 20px;/*HEIGHT:20pxESENCIAL PARA QUE APAREZCA EL ELEMENTO CREADO*/
   font-size: 8px 8px;/*TAMAÑO DE FUENTE:ESENCIAL PARA QUE APAREZCA EL ELEMENTO CREADO*/
   background-image:-webkit-repeating-radial-gradient(center center, var(--color-secondary), var(--color-secondary) 1px,transparent 0, transparent 100%);
   /*FONDO DE IMAGEN CREADA CON REPEATING-RADIAL-GRANDIENT/DEGRADADO/QUE SURGA DESDE EL CENTRO,*/
  opacity: 0.5;/*DIFUMINADO*/
    
}

.subtitle__color{/*ESTILO A LAS LETRAS <span class="subtitle__color">diseño</span>*/
    color:var(--color-secondary);

}

.resume__container{/*ESTILO A LA CAJA <div class="resume__container">EL CONTENEDOR DE LAS CAJAS IZ Y DER*/
     width: 100%;/*QUE OCUPE EL 100% DE SU CAJA PADRE*/
    display: flex;/*CAJA FLEXBOX Y SE COLOQUE LAS CAJAS DE DENTRO EN HORIZONTAL*/
    flex-direction: row;/*ORDEN PARA QUE SE COLOQUEN EN HORIZONTAL, COMO FILA SUS CAJAS DE DENTRO*/
}

.resume__left{ /*<section class="resume__left"><!--1º SUBCAJA CONTAINER IZQUIERDA-->*/

  flex-basis: 58%; /*ANCHO A LA CAJA IZQUIERDA DEL 58%*/
  margin-right: 1.5rem;/*MARGEN DERECHO */
}

.resume__timelines{/*<div class="resume__timelines"><!--1º y 2º CAJA DE INFORMACION DE LA CAJA FORMACION-->*/
   margin-bottom: 5rem;/*MARGEN POR LA PARTE DE ABAJO*/

}

.timelines__timeline{/*<article class="timelines__timeline"><!-- CUATRO ARTICULOS DE LA CAJA DE FORMACION-->*/
    position: relative;/*SI LO MOVEMOS LAS OTRA CAJAS NO OCUPAN SU SITIO*/
    width: 100%;/*ANCHO TOTAL DE SU CAJA PADRE DE <RESUME__TIMELINES*/
    display: flex;/*SUS CAJAS DE DENTRO SE COLOCARAN EN HORIZONTAL EN FILA*/
    flex-direction: row;/*CAJAS SE COLOCAN EL HORIZONTAL*/
    margin-bottom: 1rem;/*MARGEN ENTRE CAJAS POR ABAJO*/

}

.timeline__header{/*CAJA <header class="timelines__header"><!--PODEMOS METER MUCHAS CAJAS HEADER,AQUI METEMOS LOS TITULOS Y SPAN.-->*/
   flex-basis: 30%;/*ESTA CAJA HEADER QUE OCUPE UN 30% DE LA CAJA ARTICLE*/
   text-align: right;/*PARA QUE SE ALINEE A LA DERECHA*/
   padding-right: 2.5rem;/*MARGEN INTERIOR DERECHA*/

}

.timeline__year{/*ETIQUETA <h4 class="timeline__year"></h4><!-- LOS TITULOS-->*/
  margin: 0.3rem 0;/*MARGEN ARRIBA/ABAJO=0.3rem  IZ/DER=0*/
  line-height: 1.9rem;/*PARA SUBIR UN POCO LA LINEA*/
  font-size: 1.4rem;/*TAMAÑO DE LETRAS*/

}

.timeline__company{/*ETIQUETA  <span class="timeline__company">......</span>*/

    display: block;/*COMO ES UN SPAN LO TRASFORMAMOS EN UN BLOQUE PARA PODER MANIPULARLO FACILMENTE*/
   font-size: 1.3rem;/*TAMAÑO DE LAS LETRAS*/
   font-weight: lighter;/*GROSOR DE LAS LETRAS/ MAS FINO*/
   color:var(--color-subtitle);
   opacity: 0.9;


}

.timeline__description{/*CAJA <div class="timeline__description"><!--CAJA PARA UN TITULO Y LA DESCRIPCION-->*/
    width: 70%;/*ANCHO DEL 70% QUE ES EL RESTANTE A LA CAJA <header class="timelines__header"> QUE TIENE EL 30% */
    padding-left: 2.5rem;/*MARGEN INTERIOR IZ PARA EL ESPACIO DE LA BARRA */
    padding-right: 1.5rem;/*MARGEN INTERIOR DERECHO PARA QUE AHIGA UN POCO DE AIRE RESPECTO A LA CAJA 2º DERECHA */

}

.timeline__title{/*ETIQUETA <h3 class="timeline__title">Edicion de video</h3><!--TITULO-->*/
    font-size: 1.6rem;/*TAMAÑO DE LETRAS*/
    margin-bottom: 0.3rem;/*MARGEN POR ABAJO*/



}

.timeline__text{ /*ETIQUETA<p class="timeline__text"><!--DESCRIPCION -->*/
    font-size: 1.4rem;/*TAMAÑO DE LETRAS*/
    margin-bottom: 1rem;/*MARGEN POR ABAJO PARA SEPARARLO DE LA SIGUIENTE FORMACION*/
    text-align: justify;


}

.timeline__divider{/*CAJA <div class="timeline__divider"><!--CAJA PARA HACER LA LINEA DIVISORA-->*/
   width:1px;/*ANCHO DE 1PX PARA QUE SOLO SE VEA UNA LINEA AL METERLE UN COLOR DE FONDO */
   background-color: var(--color-secondary);/*COLOR DE FONDO Y AHORA SOLO SE VERA UNA LINEA*/
   opacity: 0.7;
   position: absolute;/*PARA MOVER LAS CAJAS COMO QUIERA,ASI LAS JUNTO Y NO DEJO ESE HUECO ENTRE RAYAS*/
    left:30%;
   top:0;/*NOTA:CONSIGO QUE LA LINEA SOBREPASE EL 100% DE LA CAJA.(SE SALGA FUERA)PORQUE COMBINO (top CON botton)LE DIGO QUE EMPIECE
   DESDE EL TOP DEL PUNTO 0 PIXEL DE LA CAJA POR ARRIBA, HASTA LA PARTE DE ABAJO QUE SERIA -18 COMO SI LE DIERA 118% DESDE EL PUNTO 0 DE ARRIBA*/
   bottom:-18%;/*AL PONER -18 POR ABAJO SE JUNTARAN LAS CAJAS Y QUEDARAN LAS LINEAS PEGADAS PORQUE SOBRESALE DE LA CAJA POR PARTE DE ABAJO*/
}

/*PSEUDOELEMENTO ::BEFORE=COLOCA UN ELEMENTO(UN CONTENIDO) ANTES DE LA CAJA,CON EL ATRIBUTO content="..",UN ELEMENTO VISUAL,SOLO ESTETICO,NO TOCAR NI CLIKAR*/
.timeline__divider::before{
    content: "";  /*EN ESTE CASO EL CONTENIDO LO DEJO VACIO PARA HACER OTRA COSA UNA BOLA*/
    position:absolute;/*PARA QUE APAREZCA LA BOLA Y MOVERLA COMO QUERAMOS Y QUE LAS OTRAS CAJAS SE ADAPTEN A SU HUECO QUE DEJE*/
  width:1.7rem; /*ANCHO DE LA BOLA*/
   height: 1.7rem;/*ALTURA DE LA BOLA*/
   background-color: var(--color-secondary);/*COLOR DEL FONDO*/
   margin-top: 0.4rem;/*PARA MOVERLA UN POQUITO HACIA ABAJO*/
   margin-left: -0.8rem;/*MOVERLA UN POQUITO HACIA EL CENTRO*/
   opacity: 0.25;/*PARA QUE SE VEA UN POCO MAS APAGADO,PARA ASI METERLE EL OTRO CIRCULO ENCIMA */

   border-radius:10rem ; 
    -webkit-border-radius:10rem;
    -moz-border-radius:10rem;
    -ms-border-radius:10rem;
    -o-border-radius:10rem;
}


/*PSEUDOELEMENTO ::AFTER=COLOCA UN ELEMENTO(UN CONTENIDO) DESPUES DE LA CAJA,CON EL ATRIBUTO content="..",UN ELEMENTO VISUAL,SOLO ESTETICO,NO TOCAR NI CLIKAR*/
.timeline__divider::after{/*-NOTA:EL ::after Y EL ::before SE PONDRIAN EN EL MISMO SITIO EN ESTE CASO,VALDRIA CUALQUIERA PERO:
    SI TUVIERA DOS BEFORE IGUALES SE MACHACARIAN,LO CORRECTO SI HAGO DOS PSEUDOELEMENTOS UNO ENCIMA DEL OTRO PONER UN ::before Y UN ::after
    -NOTA:PUEDO EXPANDIR LOS ELEMENTOS:POR EJEMPLO DE ALTO,PONGO UN HEIGT:AUTO,Y AHORA DESDE EL TOP:0 PIXEL 0 DE ARRIBA,HASTA BOTON:-10PX
    PUES HARIA UNA CAJA DE ALTURA DE 110% DE ALTO,SOBREPASARIA LA CAJA,ASI PUEDO JUGAR CON LOS ANCHOS Y ALTOS.*/
    content: "";  /*EN ESTE CASO EL CONTENIDO LO DEJO VACIO PARA HACER OTRA COSA UNA BOLA*/
    position:absolute;/*PARA QUE APAREZCA LA BOLA Y MOVERLA COMO QUERAMOS Y QUE LAS OTRAS CAJAS SE ADAPTEN A SU HUECO QUE DEJE*/
  width:0.9rem; /*ANCHO DE LA BOLA*/
   height: 0.9rem;/*ALTURA DE LA BOLA*/
   background-color: var(--color-principal);/*COLOR DEL FONDO BLANCO*/
   border:2px solid var(--color-secondary);/*CREO UN BORDE CON ESE COLOR PARA CONSEGUIR EL EFECTO*/
   margin-top: 0.8rem;/*PARA MOVERLA UN POQUITO HACIA ABAJO*/
   margin-left: -0.4rem;/*MOVERLA UN POQUITO HACIA EL CENTRO*/
   opacity:1;/*PARA QUE SE VEA MAS DIFUMINADO,Y AL SER ESTA BOLA MAS PEQUEÑA DESTACAR DENTRO DE LA OTRA*/

   border-radius:10rem ; 
    -webkit-border-radius:10rem;
    -moz-border-radius:10rem;
    -ms-border-radius:10rem;
    -o-border-radius:10rem;
}

/*## CURRICULUM DERECHA ##*/
.resume__rigth{/*<section class="resume__rigth"><!-- INICIO 2º SUBCAJA CONTAINER DERECHA-->*/

  flex-basis: 41%;/*ANCHO DE LA CAJA DERECHA DEL 41%*/
  padding: 0 1.5rem;/*MARGEN INTERIOR ARRIBA/ABAJO=0  IZ/DER=1.5REM*/
}

.resume__skills{/*DOS CAJAS <div class="resume__skills"><!--CAJAs PARA LOS ARTICULOS Y BARRA DE PROGRESO-->*/
   width:100%;/*QUE OCUPE EL 100% DEL ANCHO DE LA CAJA PADRE*/
   margin-bottom: 3rem;/*MARGEN POR ABAJO PARA SEPARARLAS DE LAS CAJAS DE ABAJO*/

}

.skills__title{/*CAJA <article class="skills__title">*/
  display: flex;/*SUS CAJAS DE DENTRO EN HORIZONTAL*/
  flex-direction: row;/*COMFIRMO QUE SE PONGAN EN LINEA*/
  justify-content: space-between;/*ORGANIZAR EN HORIZONTAL UNO AL PRICIPIO Y OTRO AL FINAL*/


}

.skills__text{/*<h4 class="skills__text">....</h4><!--TITULO DE HABILIDADES-->*/
   font-size: 1,3rem;/*TAMAÑO DE LETRAS*/
   line-height: 1.4rem;/*ALTURA DE LINEA*/
   margin-bottom: 0.5rem;/*MARGEN POR ABAJO*/

}

.skills__number{/* <span class="skills__number">90%</span><!--NUMERO DE PORCENTAJE-->*/
    font-size: 1,1rem;/*TAMAÑO DE LETRAS*/
    line-height: 1.4rem;/*ALTURA DE LINEA*/
    margin-bottom: 0.4rem;/*MARGEN*/
    color:rgb(18, 232, 18);


}

.skills__progressbar{/*<div class="skills__progressbar"><!--CAJA PARA (ENVOLVER) LA BARRA DE PROGRESO-->ES LA CAJA PADRE Y LE DAREMOS UN POCO
    MAS ALTO PARA QUE LA CAJA HIJO PODAMOS DARLE OTRO ANCHO MENOR CON COLOR Y ASI HACER BARRA DE PORCENTAJE*/
    width: 100%;/*MARCO EL ANCHO DE LA CAJA PADRE PARA A LA CAJA BARRA PODER DARLE MENOS ANCHO DE ESTA CAJA Y SE VEA CON UN FONDO COLOR*/
    margin-bottom: 1rem;
    height: 1rem;
    border: 1px solid var(--color-secondary);
    background-color: white;

}
.skills__progressbar{
    border-radius:1rem ;
    -webkit-border-radius:1rem ;
    -moz-border-radius:1rem ;
    -ms-border-radius:1rem ;
    -o-border-radius:1rem ;
}


.skills__percentage{/*<div class="skills__percentage"></div><!--CAJA PARA LA BARRA DE PROGRESO-->*/
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);/*PARA HACER LA BARRA DE PROGRESO*/
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/


}

.skills__percentage{
   border-radius: 1rem;
   -webkit-border-radius: 1rem;
   -moz-border-radius: 1rem;
   -ms-border-radius: 1rem;
   -o-border-radius: 1rem;
}

.skills__percentage--one{

    width: 90%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}
.skills__percentage--two{

    width: 65%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}
.skills__percentage--three{

    width: 80%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}
.skills__percentage--four{

    width: 90%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}
.skills__percentage--html-css{

    width: 98%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}

.skills__percentage--java{

    width: 80%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}

.skills__percentage--spring{

    width: 75%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}

.skills__percentage--angular{

    width: 90%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}


.skills__percentage--javascript{

    width: 92%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}

.skills__percentage--nodejs{

    width: 80%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}

.skills__percentage--php{

    width: 90%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}

.skills__percentage--laravel{

    width: 80%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}

.skills__percentage--mysql{

    width: 90%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}



.skills__percentage--mongodb{

    width: 80%;
    height: 0.8rem;/*PARA HACER LA BARRA DE PROGRESO*/
    background-color: var(--color-secondary);
    border:1px solid var(--color-principal);/*PARA HACER LA BARRA DE PROGRESO*/
}

/*####  PORTAFOLIO  #####*/
 .resume__proyects{
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
   
 }

 .proyects__proyect{

    width: 48%;
    height: 50%;
    margin: 0.7rem;
    flex-wrap: wrap;
 }

 .image__img{

    width: 100%;
    height: 100%;
 }

 .proyect__parrafo{
   
    flex-wrap: wrap;
    display: block;

 }

 .proyect__parrafo:hover{
    color:#04B4E0;
 }

/*## BLOG ##*/
 .page__img{
  width:70%;
  min-height:70%;
 
}

 .page__notas{
    width: 100%;
    height: 100%;
    margin: 0 auto;

 
 }


/*RESPONSIVE*/
 @media(max-width:990px){

    .proyects__proyect{
        flex-direction: column;
        width: 90%;
        
    
    
    }

  }
 

  @media(max-width:450px){

    .proyect__parrafo{
  
        font-size:15px;
    
     }

    
}

/*### CONTACTO ####*/
.content_contact{/*<section class="content__page content_contact">*/

    display: block;
    height: 100%;
    min-height: 100%;
    padding: 6rem;
    padding-right: 3rem;
    overflow: auto;
}

.contact_header{/*<header class="contact_header">*/
    display: inline-block;
    margin-bottom: 4.5rem;
}

.contact_title{/* <h1 class="contact_title">Contacto</h1>*/

    font-size: 3.2rem;
    position: relative;
}

.contact__container{/* <div class="contact__container"><!--CAJA PRINCIPAL PARA METER DOS SECCIONES EN HORIZONTAL, Y CADA SECCION SUS CAJAS EN COLUMNA-->*/
    display: flex;/*COLOCAMOS SUS CAJAS DE DENTRO EN HORIZONTAL*/
    flex-direction: row;/*LE DAMOS LA ORDEN POR SI ACASO EN HORIZONTAL*/
}


.contact__info{/*<section class="contact__info"><!--PRIMERA CAJA IZQUIERDA PARA METER CUATRO CAJAS EN COLUMNA-->*/
    flex-basis: 33%;/*ANCHO*/
    padding: 0 1.5rem;/*ARRIBA,ABAJO =0 / IZ,DER=1.5rem*/

}
.contact__data{/* <div class="contact__data"><!--CAJITAS DENTRO DE LA CAJA IZQUIERDA-->*/
    width: 100%;/*QUE OCUPE TODO EL ANCHO TOTAL DE LA CAJA contact__info*/
    margin-bottom: 1.5rem;
    padding: 2rem 1rem;/*arriba,abajo=2rem/iz,der=1rem*/
    text-align: center;/*CENTRAR TODO EL TEXTO EN EL CENTRO DE LAS CAJITAS*/
    background-color:var(--color-background);
    border:1px solid var(--color-border-reviews);

}
.contact__icon{/* <i class="contact__icon fa-solid fa-location-dot"></i>*/
    font-size: 3.3rem;/*TAMAÑO DEL ICONO*/
    color:var(--color-secondary);
}

/*ICONO QUE DESAPAREZCA Y APAREZCA DESDE ABAJO CUANDO HAGA HOVER*/
.contact__icon{
    display:inline-block;
    position:relative;
    transition: transform 0.5s ease-in-out;
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -ms-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
}
.contact__icon:hover{
    animation:mueveArriba 0.5s ease-in-out;
    -webkit-animation:mueveArriba 0.5s ease-in-out;
}
@keyframes mueveArriba{
    0%{
        opacity: 1;/*VISIBLE*/
        transform:translateX(0)    ;/*EN 0% LA TRANSFORMACION DE TRASLADARSEY (VERTICALMENTE) SE QUE EN SU LUGAR DE ORIGEN*/
        -webkit-transform:translateY(0)    ;
        -moz-transform:translateY(0)    ;
        -ms-transform:translateY(0)    ;
        -o-transform:translateY(0)    ;
    }
    50%{
        opacity: 0;/*OCULTO*/
        transform: translateX(3rem);/*EN 50% LA TRANSFORMACION DE TRASLADARSEY (VERTICALMENTE) SE MUEVE 30PX HACIA ABAJO DE SU ORIGEN*/
        -webkit-transform: translateY(3rem);
        -moz-transform: translateY(3rem);
        -ms-transform: translateY(3rem);
        -o-transform: translateY(3rem);
    }
    100%{
        opacity: 1;/*VISIBLE*/
        transform: translateX(0);/*EN 50% LA TRANSFORMACION DE TRASLADARSEY (VERTICALMENTE) VUELVE A SU ORIGEN*/
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
}
.contact__subtitle{
    font-size: 1.5rem;/*TAMAÑO DE FUENTE*/
    margin-top: 1rem;
}

.contact__form-box{/*<section class="contact_form-box"><!--SEGUNDA CAJA DERECHA PARA METER TRES CAJAS EN COLUMNA-->*/
    flex-basis: 66%;/*ANCHO QUE LE FALTA PARA COMPLETAR */
    padding: 0 1.5rem;/*ARRIBA,ABAJO =0 / IZ,DER=1.5rem*/

}

.contact__form-header{/* <header class="contact__form-header"><!--PONEMOS UN <header> PORQUE VOY A PONER UN ENCABEZADO-->*/
    display: inline-block;/*BLOQUE EN LINEA,OCUPA EL ESPACIO NECESARIO EN HORIZONTAL*/
    padding-right: 1.2rem;
    margin-bottom: 2.5rem;
    position: relative;/*SI SE CAMBIA DE SITIO LAS OTRAS CAJAS NO SE ADAPTAN,DEJAN SU HUECO LIBRE*/


}
.form-header__title{/*<h3 class="form-header__title">*/
    font-size: 2.1rem;
}
.form__container{/* <div class="form__container"><!--CONTENEDOR PARA DIVIDIR EN DOS SUS CAJAS DE DENTRO EN HORIZONTAL-->*/
    display: flex;
    flex-direction: row;
}
.form__left{/*<section class="form__left"><!--1º CAJA IZ DEL FORMLARIO-->*/
    flex-basis: 47%;/*ANCHO QUE OCUPA ESA SECCION IZQUIERDA*/
    margin-right: 1.5rem;
}

.form__left--private{

    margin-top: 3rem;
}

.form__group{/*LOS  <div class="form__group">*/
    position: relative;/*SI MUEVO LAS CAJAS SU ESPACIO QUEDA VACIO,LAS OTRAS CAJAS NO SE ADAPTAN A OCUPAR SU LUGAR*/
    margin-bottom: 2.5rem;/*MARGEN POR ABAJO ENTRE DIV*/

}
.form__input{/* <input type="text" class="form__input/ <input type="email" class="form__input"/ <input type="text" class="form__input"*/
    line-height: 2.1rem;/*ALTURA DE LINEA DE LOS INPUT*/
    position: relative;/*SI MUEVO LAS CAJAS SU ESPACIO QUEDA VACIO,LAS OTRAS CAJAS NO SE ADAPTAN A OCUPAR SU LUGAR*/
    width:100%;
    height: 4.2rem;
    display: block;/*PARA PODER MANIPULARLOS FACIMENTE Y METERLE ESPACIOS Y TAL*/
    border: 0.2rem solid var(--color-border-reviews);
    font-size: 1.5rem;
    padding:1rem 1.2rem;/*ARRIBA,ABAJO= 1REM / IZ,DER=1.2REM*/
    outline: none;/*TODO/NO QUEREMOS QUE AHIGA UN REMARCADO,UNOS BORDES QUE EL ORDENADOR DE FORMA FORZADA LE META*/
    box-shadow: 0 1rem 1rem -8px rgba(0, 0, 0, 0.10);/*rgba ES LA OPACIDAD*/
    background-color: transparent;/*PARA QUE EL FONDO DE LOS INPUTS SEA TOTALMENTE TRANSPARENTE,Y SE VEA LA CAPA DE ATRAS*/
}
.form__input:focus{/*PSEUDOCLASE PARA DAR ESTILO CUANDO ME POSE DENTRO DEL INPUT CON EL RATON*/
    border: 0.2rem solid var(--color-secondary);
}
.form__input,
.form__input--textarea{
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
}

.form__label{/*NOMBRES QUE ESTAN ENCIMA DE LOS INPUT(DE LOS CAMPOS)*/
    /*VOY A COLOCAR LOS LABEL DETRAS DE LAS LETRAS DEL placeorder DENTRO DE LOS INPUT,Y DESPUES AL HACER FOCUS QUE APAREZCAN EN SU SITIO ACTUAL*/
    position: absolute;/*PARA PODER MOVER LIBREMENTE LOS NOMBRES CON left,rigth,botton,top,Y LAS OTRAS CAJAS SE ADAPTEN A SU HUECO BACIO*/
    top:1rem;/*1REM DESDE LA PARTE DE ARRIBA HACIA ABAJO*/
    left:1.5rem;/*1.5rem DESDE LA PARTE IZ HACIA LA DERECHA*/
    z-index:1;/*TENIA EL -1,PERO AL HACER ::WEKIT-INPUT-PLACEHOLDER YA OCULTA EL PLACEHOLDER AL HACER FOCUS PONIENDO EL 1*/
    /*PARA HACER HACER UN EFECTO CUANDO HAGA :focus EN EL INPUT Y APAREZCAN LOS LABEL*/
    color:#A5A6A7;
    pointer-events: none;/*todo/CUANDO LE DEA AL LABEL ,NO VA A INTERFERIR EN EL ELEMENTO QUE HAY DETRAS,*/
    /*ES COMO SI LE DIERA CLICK A ESE ELEMENTO LABEL Y NO EXISTIERA ESE ELEMENTO,SI NO QUE LE DOY CLICK A LO QUE HAY DETRAS.*/
}
.form__label{
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
}
.form__input:focus~label,/*todo/FOCUS AL ELEMENTO HERMANO DEL LABEL,USO LA VIRULILLA,SELECCIONA LOS ELEMENTOS HERMANOS A ESE INPUT ~*/
/*PARA CUANDO ESCRIBA DENTRO DEL INPUT,EL EFECTO DEL LABEL QUE SUBE ARRIBA NO VUELVA Y SE PONGA ENCIMA DE LAS LETRAS QUE ESCRIBA DENTRO 
-SI ELEMENTO HERMANO TIENE CONTENIDO,EL LABEL NO VUELVE,SI ESTA VACIO SI.USAMOS LA FUNCION :not(:placeholder-show)~label*/
.form__input:not(:placeholder-shown)~label{/*todo/FUNCION :not()CUANDO NO SE ESTE MOSTRANDO HAZ ESTO..FUNCION PARA  UNA NEGACION*/
 /*:placeholder-show=PLACEHOLDER-MOSTRADO=cuando hay contenido dentro del input, mi label la voy a poner en su posicion original,no vuelve*/
 /*todo/AL HACER FOCUS HARA EFECTO DE APARECER EL LABEL ENCIMA DEL INPUT,DESDE EL PLACEHOLDER HASTA ENCIMA DEL INPUT DONDE ESTABA POR DEFECTO*/
    top:-2rem;/*AL HACER FOCUS SUBIRA AL SITIO DONDE ESTABA POR DEFECTO ENCIMA DE LOS INPUT*/
    left:0;/*AL HACE FOCUS QUE SE COLOQUE EN SU LADO IZ QUE TENIA POR DEFECTO*/
    z-index: 1;/*AL HACER FOCUS SE PONDRA EN LA CAPA PRINCIPAL QUE TENIA POR DEFECTO,APARECERA EL NOMBRE LABEL*/
    font-size: 1.3rem;
    color: var(--color-secondary);


}

.form__input::-webkit-input-placeholder{/*VAMOS A OCULTAR LOS PLACEHOLDER DE LOS INPUT AL HACER :FOCUS/PARA GOOGLE*/
    color:transparent;/*PARA OCULTAR EL VALOR DE LOS INPUT*/


}
.form__input::-moz-placeholder{/*VAMOS A OCULTAR LOS PLACEHOLDER DE LOS INPUT AL HACER :FOCUS/PARA MOZILLA*/
    color:transparent;/*PARA OCULTAR EL VALOR DE LOS INPUT*/

}


.form__right{/*<section class="form__right"><!--2º CAJA DER DEL FORMULARIO-->*/
    flex-basis: 50%;/*ANCHO DE LA CAJA DERECHA*/
    max-width: 50%;/*QUE OCUPE DE MAXIMO EL 50% DE LA CAJA QUE OCUPA*/
    max-height: 100%;
   /*NOTA:TODAS ESTAS MEDIDAS PARA MANEJAR EL FORMULARIO TEXTAREA CON LAS MEDIDAS QUE YO LE PONGA*/

}
.form__group--textarea{/* <div class="form__group form__group--textarea">*/
    height: 100%;/*QUE OCUPE EL ALTO DEL 100% DE LA CAJA SECTION QUE LA OCUPA*/

}


.form__input--textarea{/*<textarea class="form__input form__input--textarea"*/
   
    
    display: block;
    resize: none;/*TODO /CON EL resize:none EL INPUT TEXTAREA NO SE PODRA MOVER,COMO SE ABRE Y SE CIERRA POR DEFECTO ,QUEDARA BLOQUEADO*/
    height:100%;/*ALTURA TOTAL DE LA CAJA QUE OCUPA*/

}

.form__button{/* <input class="form_button" type="submit" value="Enviar mensaje"/>*/
   
    padding: 1rem 3rem;/*ARRIBA,ABAJO=1rem / IZ,DER=3rem*/
    font-size: 1.5rem;
    border: 0.2rem solid var(--color-secondary);
    color:var(--color-titles);
    background-color: var(--color-principal);
    box-shadow: 0 1rem 1rem -8px rgba(0, 0, 0, 0.22);
    cursor: pointer;/*QUE APAREZCA EL DEDO EN EL RATON AL PASAR POR ENCIMA*/
}
.form__button{
   border-radius: 3rem;
   -webkit-border-radius: 3rem;
   -moz-border-radius: 3rem;
   -ms-border-radius: 3rem;
   -o-border-radius: 3rem;

   transition:all 300ms ease-in-out ;
   -webkit-transition:all 300ms ease-in-out ;
   -moz-transition:all 300ms ease-in-out ;
   -ms-transition:all 300ms ease-in-out ;
   -o-transition:all 300ms ease-in-out ;
}
.form__button:hover{/*ESTILO AL PASAR POR ENCIMA CON EL RATON*/
    background-color: var(--color-secondary);
    color:var(--color-principal);


}

/* MAPA*/
.contact__map{/*<div class="contact__map"><!--CAJA DEL MAPA/BUSCAMOS EN GOOGLE MAPS,BUSCAMOS LA CIUDAD,LE DAMOS A COMPARTIR,INSERTAR UN MAPA,COPIAR IFRAME-->*/
    width: 100%;/*QUE OCUPE TODO EL ANCHO DE LA CAJA QUE LO CONTIENE LA SEGUNDA SECTION */
    min-height: 15rem;
    margin-bottom: 3.5rem;
    overflow: hidden;/*LO QUE SOBRESALGA DE LA CAJA QUE SE OCULTE*/

}
.contact__iframe{/* <iframe class="contact__iframe"*/
    width:100%;/*QUE OCUPE EL MAPA TODO EL ANCHO DE LA CAJA QUE LO CONTIENE*/
    height:14rem;

}

/*ALERTAS DE VARIABLES DE SESSION*/
.alerta{
    display:flex;
    text-align: center;
    box-sizing: border-box;
    padding: 6px;
    flex-wrap: wrap;
    background-color: green;
    margin-bottom: 10px;
     border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    color:white;

    
}

.alerta-error{ 
    display:flex;
    text-align: center;
    box-sizing: border-box;
    padding: 6px;
   flex-wrap: wrap;
    background-color: red;
    margin-bottom: 10px;
    color:white;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    
}
#contenedor{
  
    display:flex;
    flex-direction: column;
    background-color:#04B4E0;
    color:black
}


/*###  CERTIFICADOS ###*/

.certificates__certificate{

    margin-bottom: 2rem;
    display: flex;
    flex-direction: row;
}