/*

<link rel="STYLESHEET" type="text/css" href="/css.css?v=4">

*/

/* --------- HANDY DANDIES --------- */
.block{display:block}
.none{display:none}
.trans{opacity:0}
.print-only{display:none;}

/* --------- TAGS --------- */

img,svg {
display: block;/* Elimina espacios al rededor de la imagen */
max-width: 100%;
height:auto;
}

HTML {
font-size:16px;
height:100%;
}

BODY {
min-height:100%;
background-color:#F6F8FA;
line-height:1.5rem;
}

* {
font-family: 'Roboto', sans-serif;
text-rendering:optimizeLegibility;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;/* text inflation algorithm used on smartphones */
margin: 0;
outline: none;
transition: all 100ms;
transition-timing-function: ease-in-out;

text-overflow: ellipsis;
color:#606F7C;
}

h1,h2,h3,h4,h5,h6,b{
all:unset;
}

P{margin-bottom:1rem;}

A,
A:visited,
A:active{
color:#006BB4;
font-weight:400;
text-decoration:none;
}
A:hover{
text-decoration:underline;
}

.BUTTON {
padding: 1rem 2rem;
border: 0;
border-radius: 100vw;
cursor: pointer;
}
.BUTTON:hover,
.BUTTON:focus-visible {
background-color: pink;
}

UL{
margin-left:1rem;
padding-left:0rem;
}
LI{
padding-bottom:1.5rem;
}

UL LI:last-of-type{
padding-bottom:0;
}

/* --------- HOME --------- */
.homeBODY{
height:100%;
display:grid;
grid-template-rows: 1fr auto;
}

MAIN {
display:flex;
flex-direction:column;
justify-content:center;
}

MAIN > * {
width:75vw;
max-width:1000px;
margin-inline:auto;
}
.home-topcvs{
padding:5vh;
font-size:1rem;
font-weight:300;
}

.home-topcvs > .home-topcvs-item {

}

/* --------- ESTRUCTURA --------- */
.mainFrameset{ /* top | middle | bottom */
min-height:100%;
display: flex;
flex-direction:column;
min-width: fit-content;/* LOS LETTER SPACING HACEN OVERFLOWN EN ANCHOS ESTRECHOS */
}

.top{
width:94vw;
display:grid;
grid-template-columns: 1fr 12fr 1fr;
padding-block:1rem;
padding-bottom:1.22rem;
}

.middle{
max-width:1000px;/*   *** MAXIMO DE ANCHO DE PAGINA ***   */

flex-grow:1;
border-radius:0.2rem;
box-shadow: 0px 0px 16px 5px rgba(222, 225, 226, 0.39);
-webkit-box-shadow: 0px 0px 16px 5px rgba(222, 225, 226, 0.39);
background-color:white;
}
FOOTER{
display:flex;
align-items:center;
padding-block:0.6rem;
}

.top, .middle, .footer{
margin-inline:auto;
min-width:288px;
}

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

.curricvlum_logo{
height: 1.3rem;
min-height:1.3rem;
width: auto;
min-width:124px;
}

.top_center{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
gap:0.2rem;
font-size:0.9rem;
}

.top_center > div{
width:fit-content;
}

.top_right{
display:flex;
flex-direction:row;
justify-content:right;
position:relative;
}

.header{
display:grid;
grid-template-columns: 1fr 1fr;
align-items:center;
}
.header_logo{
text-align:right;
}
.header_crumbs {
white-space:nowrap;
font-size:1rem;
font-weight:300;
color:#A7AFB8;
}

.header_crumbs a,
.header_crumbs a:visited,
.header_crumbs a:active,
.header_crumbs a:hover {
text-decoration:none;
color:#A7AFB8;
}
.header_crumbs a:hover {
text-decoration:underline;
}

.crumbs-slash{
font-size:0.7em;
padding-inline:0.2rem;
}

/* --------- main --------- */
.sheet{
display:grid;
}

.sheet .sheet-area:first-of-type{
padding-top:1rem;
}

.sheet .sheet-area:last-of-type{
padding-bottom:2rem;
}

.sheet-area-sobremi{
padding-top:3rem;
}

/* --------- CONTENIDO --------- */

.box {
font-weight: 300;
padding-inline:clamp( 1rem,3.5vw,3rem );
}

.box-profesion {
padding-block:1.2rem;
padding-top:0.9rem;
}

.box-intro {
padding-block:1.5rem;
display:grid;
}

.box-intro-tit {
font-weight:400;
font-size:1.2em;
}

.box-intro-nacionalidad {
display: flex;
align-items: center;
line-height:0;/* --------- OJO - Parece que soluciona la alineacion vertical --------- */
}

/* --------- BOX PRINCIPAL --------- */

h1 {/* -- Profesion -- */
font-size:1.4em;
text-transform:uppercase;
letter-spacing:0.1rem;
font-weight:400;
color:#A7AFB8;
}

.box-nombre > h2{/* -- Nombre -- */
font-family: 'Oswald', sans-serif;
text-transform:uppercase;
font-size:3.3em;
line-height:1.15;
letter-spacing:0.1rem;
padding-right:1rem;

}

.icon-inline{
width:auto;
height:1.3rem;
display:inline-block;
filter: invert(76%) sepia(4%) saturate(280%) hue-rotate(163deg) brightness(96%) contrast(87%);

}

.top-icons-container{
display:flex;
flex-direction:row;
align-items:center;
gap:0.9rem;
padding-top:0.8rem;
padding-left:0.4rem;
}

.icon-top{
width:auto;
height:1.8rem;
display:inline-block;
filter: invert(76%) sepia(4%) saturate(280%) hue-rotate(163deg) brightness(96%) contrast(87%);

}
.icon-top:hover{
cursor:pointer;
}

#icon-top-email{
height:1.55rem;
filter: invert(50%) sepia(10%) saturate(2708%) hue-rotate(314deg) brightness(100%) contrast(92%);
}

#icon-top-linkedin{
filter: invert(28%) sepia(79%) saturate(1969%) hue-rotate(179deg) brightness(91%) contrast(101%);
}

#icon-top-whatsapp{
filter: invert(55%) sepia(91%) saturate(387%) hue-rotate(90deg) brightness(100%) contrast(93%);
}

/* --------- boxes --------- */
.box-seccion-tit{
padding-block:1rem;
font-size:2em;
text-transform:uppercase;
letter-spacing:0.1rem;
font-weight:300;
font-family: 'Oswald', sans-serif;
color:#A7AFB8;
}

.box-item{
padding-block:1.5rem;
}

.box-item .cargo{
padding-bottom: 0.7rem;

font-size: 1.3em;
text-transform: uppercase;
letter-spacing: 0.1rem;
font-weight: 400;

}
.box-item .donde{
font-weight:300;
}
.box-item .donde B{
font-weight:500;

}
.donde-direccion{
padding-bottom: 0.7rem;
}

.box-item .duracion{
padding-bottom:0.7rem;
}
.box-item .bullets{
padding-bottom: 0.7rem;
}

/* --------- idiomas --------- */
.box-idiomas ul{
list-style-type: none;
margin-left:0rem;
}
.box-idiomas ul li{
display:flex;
line-height:1.3rem;
}
.box-idiomas ul li SPAN:first-of-type{
display:inline-block;
width:3rem;

font-size: 1.3em;
text-transform: uppercase;
letter-spacing: 0.1rem;
font-weight: 400;

}

/* --------- contacto --------- */
.box-contacto{
position: sticky;
top: 0;
}

.box-contacto ul{
list-style-type: none;
margin-left:0rem;
}
.box-contacto ul li{
padding-left:2.75rem;
background-repeat:no-repeat;
background-position:left top;
background-size: auto 1.35rem;
}
.box-contacto ul li.email{  background-image: url(assets/email.svg) }
.box-contacto ul li.address{  background-image: url(assets/address.svg) }
.box-contacto ul li.phone{  background-image: url(assets/phone.svg) }

/* --------- box-desc-social --------- */
.box-desc-social{
display:grid;
grid-auto-flow:column;
grid-auto-columns: 1fr
}
.box-desc-social > DIV{
align-self: center;
display:flex;
justify-content:center;
}
.icon-social{
cursor:pointer;
height:auto;
width:3rem;
}

/* --------- CONTENIDO --------- */

/* --------- FOTOS --------- */
.box-foto{
width:fit-content;
}
.foto-container{
position:relative;/* --------- hosts foto-browser --------- */
}
.foto-browser{
width: -webkit-fill-available;
position:absolute;
z-index:10;
bottom:0;
left:0;
padding:0.7rem;

display:flex;
flex-direction:row;
justify-content:right;
gap:0.5rem;
}

.foto{
}
.thumb{
width:2.5rem;
height:auto;
border: solid 0.15rem transparent;
border-radius:0.2rem;
cursor:pointer;
filter: brightness(85%);
border-radius:100%;
}
.thumb:hover{
filter: brightness(100%)
}
.currentThumb{
border-color:white;
filter: brightness(100%)
}

.sheet-area-foto,
.box-foto,
.foto-container,
.foto {
border-radius:0.2rem;
}
/* --------- FOTOS --------- */
/* --------- */

/* --------- footer --------- */
.footer{
padding:1rem;
font-size:1rem;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
gap:0.2rem;

}
.footer_year{
font-size:0.8rem;
padding-top: 0.07rem;
font-weight: 400;

}
.footer_brand{
letter-spacing: 0.02rem;

}
.footer_brand A,
.footer_brand A:active,
.footer_brand A:visited,
.footer_brand A:hover {
color:#CBD3DC;
text-decoration:none;
}

.footer_brand b{
letter-spacing: 0.05rem;
font-weight:500;
}

/* --------- MEDIA QUERIES --------- */

@media (max-width: 288px) {
.header_crumbs{
display:none;
}
.header {
display: grid;
grid-template-columns: 1fr;
}
.box-nombre > h2{/* --------- NOMBRE --------- */
font-size:2.2rem;
}

}/* --------- /(max-width: 288px) --------- */



/* ----------------------------------- */
/* --------- DISPLAY DESKTOP --------- */
@media (min-width: 600px) and (max-width: 960px) {

/* --------- grid --------- */

.sheet {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:

   ' principal foto '
   ' intro foto '
   ' sobremi sobremi '
   ' formacion formacion '
   ' experiencia experiencia '
   ' idiomas idiomas '
   ' derecha derecha ';

/*
' principal foto '
' intro intro '
' sobremi derecha '
' formacion derecha '
' experiencia derecha '
' idiomas derecha ';
*/

   /*
   @media (min-width: 940px) {
   grid-template-areas:
   ' principal foto '
   ' intro foto '
   ' sobremi derecha '
   ' formacion derecha '
   ' experiencia derecha '
   ' idiomas derecha ';
   }
   */
   

.middle{
width:93vw;/* MARGENES LATERALES de pagina */
flex-grow:1;
border-radius:0.4rem;
box-shadow: 0px 0px 16px 5px rgba(222, 225, 226, 0.39);
-webkit-box-shadow: 0px 0px 16px 5px rgba(222, 225, 226, 0.39);
}

.sheet-area-principal{
grid-area: principal;
}
.sheet-area-intro{
grid-area: intro;
}
.sheet-area-foto{
grid-area: foto;
}
.sheet-area-sobremi{
grid-area: sobremi;
}
.sheet-area-experiencia{
grid-area: experiencia;
}
.sheet-area-formacion{
grid-area: formacion;
}
.sheet-area-idiomas{
grid-area: idiomas;
}
.sheet-area-derecha{
grid-area: derecha;
}
}/* --------- /grid --------- */


.sheet-area-sobremi,
.sheet-area-derecha{
padding-top:1.3rem;
}
.box{
padding-block:1rem;
padding-inline:2rem;
}
/* foto circular
.foto{
max-height:70%;
border-radius:100%;
}
 */
 
.email{
overflow:hidden;
}
.box-foto, .foto-container, .foto{
height:100%;
object-fit:cover;
}



.box{
padding:3rem;
}

.box-foto{
padding-top:0;
padding-right:0;
padding-bottom:0;
}
}/* --------- /(min-width: 600px) and (max-width: 960px) --------- */



@media (min-width: 961px) {
/* --------- grid --------- */

.sheet {
display: grid;
grid-template-columns: 62% 38%;

   grid-template-areas:
   ' principal foto '
   ' intro foto '
   ' sobremi derecha '
   ' formacion derecha '
   ' experiencia derecha '
   ' idiomas derecha ';

/*
grid-template-areas:
   ' principal foto '
   ' intro foto '
   ' sobremi sobremi '
   ' formacion formacion '
   ' experiencia experiencia '
   ' idiomas idiomas '
   ' derecha derecha ';
*/


/*
' principal foto '
' intro intro '
' sobremi derecha '
' formacion derecha '
' experiencia derecha '
' idiomas derecha ';
*/

   /*
   @media (min-width: 940px) {
   grid-template-areas:
   ' principal foto '
   ' intro foto '
   ' sobremi derecha '
   ' formacion derecha '
   ' experiencia derecha '
   ' idiomas derecha ';
   }
   */



.middle{
width:93vw;/* MARGENES LATERALES de pagina */
flex-grow:1;
border-radius:0.4rem;
box-shadow: 0px 0px 16px 5px rgba(222, 225, 226, 0.39);
-webkit-box-shadow: 0px 0px 16px 5px rgba(222, 225, 226, 0.39);
}

.sheet-area-principal{
grid-area: principal;
}
.sheet-area-intro{
grid-area: intro;
}
.sheet-area-foto{
grid-area: foto;
}
.sheet-area-sobremi{
grid-area: sobremi;
}
.sheet-area-experiencia{
grid-area: experiencia;
}
.sheet-area-formacion{
grid-area: formacion;
}
.sheet-area-idiomas{
grid-area: idiomas;
}
.sheet-area-derecha{
grid-area: derecha;
}
}/* --------- /grid --------- */


.sheet-area-sobremi,
.sheet-area-derecha{
padding-top:1.3rem;
}
.box{
padding-block:1rem;
padding-inline:2rem;
}
/* foto circular
.foto{
max-height:70%;
border-radius:100%;
}
 */
 
.email{
overflow:hidden;
}
.box-foto, .foto-container, .foto{
height:100%;
object-fit:cover;
}

.box-foto{
padding-top:0;
padding-right:0;
padding-bottom:0;
}
}/* --------- /(min-width: 961px) --------- */












/* ----------- --------- */
/* --------- SIEMPRE EN MOBILE --------- */
@media (hover:none){

#icon-top-email{
filter: invert(50%) sepia(10%) saturate(2708%) hue-rotate(314deg) brightness(100%) contrast(92%);
}
#icon-top-linkedin{
filter: invert(28%) sepia(79%) saturate(1969%) hue-rotate(179deg) brightness(91%) contrast(101%);
}
#icon-top-whatsapp{
filter: invert(55%) sepia(91%) saturate(387%) hue-rotate(90deg) brightness(100%) contrast(93%);
}

}
/* --------- SIEMPRE EN MOBILE --------- */
/* ----------- --------- */

/* --------- MEDIA QUERIES --------- */
/* --------- */

/* --------- PRINTING --------- */
@media print {

/* --------- PRINT MARGINS
@page { margin: 2cm; }
*/

.footer_brand A{ color:#606F7C; font-weight:300;}
.print-only{display:inline-block;}

BODY{
background-color:white;
}

/* --------- PRINTING PAGE BREAKS
.sheet-area-formacion {page-break-after: always;}
.sheet-area-experiencia {page-break-after: always;}
.sheet-area-formacion {page-break-after: always;}
*/

/*
.box-seccion-tit {page-break-after: avoid;}
.box-item,
.sheet-area-derecha { break-inside: avoid; }
*/
/* --------- AVOID PAGE-BREAK --------- */

*{
min-height:fit-content;
}

.foto-browser{
display:none;
opacity:0;
}

.sheet {
grid-template-columns: 60% 40%;
grid-template-areas:
' principal foto '
' intro foto '
' sobremi sobremi '
' formacion formacion '
' experiencia experiencia '
' idiomas idiomas '
' derecha derecha ';
}
.foto-container{
padding-top:4rem;
}

.foto{
height:auto;
border-radius:5%;
aspect-ratio: 1/1;
}
.sheet-area-derecha{
padding-left:2rem;
}

.middle{
border-radius:0;
box-shadow: 0px 0px 0px 0px rgba(222, 225, 226, 0);
-webkit-box-shadow: 0px 0px 0px 0px rgba(222, 225, 226, 0);
background-color:white;
}

.box {
padding-block: 0.35rem;
}

.box-contacto ul li{
padding:0;
line-height:2rem;
}

.footer_year{
font-size:1rem;
font-weight: 400;
}

}/* --------- /PRINTING --------- */