@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

:root{
    --bg1:#FFFFFF;
    --bg2:#F5F5F5;
    --bg3:#151515;
    --text1: #333333;
    --font1: 'Poppins', sans-serif;
    --font2: 'Montserrat', sans-serif;
    --radius1: 30px;
    --aspeed1: .3s;
    --cubic1: cubic-bezier(.25,.96,.42,.93);
    --bounce1: cubic-bezier(0.175, 0.885, 0.32, 1.5);
    --shadow1: 5px 40px 30px -20px rgba(0,0,0,.5);
    --shadow2: 0px 5px 20px -15px rgba(0,0,0,.5);
    --shadow3: 0px -25px 20px -15px rgba(0,0,0,.2);
    --high1: rgba(0,102,151,1);
    --high2: rgba(122,211,44,1);
    --grad1: linear-gradient(45deg,var(--high1), var(--high2));
}


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
body{line-height:1;text-align:left; border-top:0px solid #01005E;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
:focus {outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}


/*404*/
.wrapper-404{width: 100%; height: calc(100vh - 80px);display: flex; flex-direction: column; justify-content: center; align-items: center;}
.container-404{width: 80%;}
.txts-404 h1{text-transform: uppercase; margin-bottom: 10px;}
.txts-404 h2{text-transform: uppercase; font-weight: normal; letter-spacing: .2em; font-size: .8em; line-height: 1.5em;}


/*MISC*/
div{position: relative; float: left;}
.pos{position:relative;float:left;}
.safe-bg{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
/*** Main ***/
body {
font-family:var(--font1);
background: #FFF;
padding: 0px 0;color:rgba(0,0,0,.75);}
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.left {float: left;}
.right {float: right;}

.wrapper {width: 100%; background: transparent;margin: 0 auto; border:0px solid #090909;padding-top: 40px;}
#container{width: 100%;}

/*GLOBAL*/
.fullsize{position: absolute; width: 100%; height: 100%; top:0; left: 0;}

/*HEADER*/
.ir-a-sitio{position: fixed; right: 20px; top:20px; background: #FFFFFFCC; border:1px solid #FFFFFFAA; box-shadow: var(--shadow2); font-weight: 600; color: var(--text1); border-radius: var(--radius1); padding: 15px 25px; z-index: 1000; backdrop-filter: blur(10px); cursor: pointer; text-decoration: none; transition: transform var(--aspeed1) var(--cubic1);}
.ir-a-sitio:hover{transform: scale(1.05);transition: transform var(--aspeed1) var(--cubic1);}

/*HOME*/
.home{min-height: 100vh; background:red; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; background: var(--grad1);}
.home-content{width: 90%; min-height: 100px;}
.home-logos{width: 100%; display: flex; flex-direction: column; gap:50px; align-content: center; justify-content: center;}
.logo-home{width: 90%; height: 200px;}
.logo-explora{background: url('images/etm/logo-explora.svg') bottom no-repeat; background-size: contain;}
.logo-etmday{background: url('images/etm/logo-etmday.png') left top no-repeat; background-size: contain;}
.scroll-arrow{position: absolute; left: calc(50% - 25px); bottom:20px; width: 50px; height: 50px; background: url('images/etm/scroll.svg') center no-repeat; background-size: contain; z-index: 100;animation: scroll-arrow .5s alternate infinite; }

@keyframes scroll-arrow {
    0%{transform: translateY(0);}
    100%{transform: translateY(-20px);}
    
}

.responsive{width: 100%; display: flex; flex-direction: column;}

/*QUIENES-SOMOS*/
.quienes-somos-left{width: calc(100% - 80px); padding: 60px 40px 0 40px;}
.quienes-somos-left-h1{font-size: 3em; font-weight: 800; letter-spacing: -.1em; padding-right: .1em; margin-bottom: 60px; background: var(--grad1); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--font1);}
.quienes-somos-left-txt{line-height: 1.5em; font-family: var(--font2);}
.quienes-somos-left-txt > p{margin-bottom: 30px; font-size: 1.2em; font-weight: 300; opacity: .9;}
.quienes-somos-left-txt > p > strong{font-weight: 600; opacity: .9;}
.quienes-somos-right{width: calc(100% - 60px); margin: 30px; margin-top: 0; aspect-ratio:1; background:var(--high1); background: url('images/etm/nosotros.jpg') center; background-size: cover; border-radius: var(--radius1);}

/*QUE-HACEMOS*/
.que-hacemos-header{width: 100%; padding: 60px 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.que-hacemos-header-h1{font-size: 2.5em; font-weight: 800; letter-spacing: -.1em; padding-right: .1em; background: var(--grad1); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--font1); text-align: center; width: 90%;}
.que-hacemos-header-h2{font-size:1em; font-family: var(--font2); background: var(--grad1); padding: .8em 1.5em; color:var(--bg1); font-weight: 600; box-shadow: var(--shadow3); margin-top: 10px; border-radius: var(--radius1);}
.que-hacemos{width: calc(100% - 60px); margin-left: 30px; min-height: 400px; flex-wrap: nowrap; gap: 30px;}
.que-hacemos-item{width: calc(100% - 0px); aspect-ratio: auto; background: var(--grad1); border-radius: var(--radius1); overflow: hidden;}
.que-hacemos-content{width: calc(100% - 60px); height: calc(100% - 100px); padding: 50px 30px;}
.que-hacemos-h1{color: var(--bg1); font-size: 1.8em; font-weight: 200; font-style: italic; font-family: var(--font2);}
.que-hacemos-h1 > strong{font-weight: 700; font-style: normal; font-size: 1.2em;}
.que-hacemos-txt{color:var(--bg1); line-height: 1.4em; font-size: 1.1em; font-weight: normal; font-family: var(--font1); margin-top: 60px; opacity: .9;}

.que-hacemos-1{background: url('images/etm/que-hacemos-1.jpg'); background-size: cover; opacity: .2; filter: grayscale(1);}
.que-hacemos-2{background: url('images/etm/que-hacemos-2.jpg'); background-size: cover; opacity: .2; filter: grayscale(1);}
.que-hacemos-3{background: url('images/etm/que-hacemos-3.jpg'); background-size: cover; opacity: .2; filter: grayscale(1);}

/*CONTACTO*/
.contacto{width: 100%; display: flex; flex-direction: row; background: var(--grad1); margin-top: 50px;}
.contacto-left{width: calc(100% - 120px); padding: 60px; display: flex; gap:30px; justify-content: center;}
.rrss-etm-icon{display:flex; width: 60px; aspect-ratio: 1;}
.rrss-etm-icon > svg{width: 100%; height: 100%; fill:var(--bg1); transition: transform var(--aspeed1) var(--cubic1);}
.rrss-etm-icon > svg:hover{transform: scale(1.2); transition: transform var(--aspeed1) var(--cubic1);}
.contacto-right{width: 0%;}




/**********************************/
/**DESKTOP*************************/
/**********************************/


@media screen and (min-width:800px){
/*HOME*/
.home-logos{flex-direction: row; gap:100px;}
.logo-home{width: 30%; height: 300px;}
.logo-explora{background: url('images/etm/logo-explora.svg') center no-repeat;}
.logo-etmday{background: url('images/etm/logo-etmday.png') center no-repeat; background-size: contain;}

.responsive{flex-direction: row;}

/*QUIENES-SOMOS*/
.quienes-somos-left{width: calc(50% - 240px); padding: 120px; }
.quienes-somos-left-h1{font-size: 5em; font-weight: 800; letter-spacing: -.1em; padding-right: .1em; margin-bottom: 60px;}
.quienes-somos-left-txt{line-height: 1.5em;}
.quienes-somos-left-txt > p{margin-bottom: 30px; font-size: 1.2em; font-weight: 300;}
.quienes-somos-right{width: calc(50% - 60px); margin: 30px;}

/*QUE-HACEMOS*/
.que-hacemos-header{padding: 60px 0;}
.que-hacemos-header-h1{font-size: 5em;}
.que-hacemos-header-h2{font-size:1.5em; padding: .5em 2em;}
.que-hacemos{width: calc(100% - 60px); margin-left: 30px; flex-wrap: nowrap; gap: 30px;}
.que-hacemos-item{width: calc(100% - 30px); aspect-ratio: 1;}
.que-hacemos-content{width: calc(100% - 120px); height: calc(100% - 120px); padding: 60px;}
.que-hacemos-h1{font-size: 2.5em;}
.que-hacemos-txt{line-height: 1.4em; font-size: 1.3em; font-weight: 400;margin-top: 60px;}


}



/* inicio barra desplazamiento*/
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar:hover {
	opacity:.1;
}
::-webkit-scrollbar-track {
	background:#eee;

}
::-webkit-scrollbar-thumb {
background: var(--high1); opacity: .8;

}
::-webkit-scrollbar-thumb:hover {
    background: var(--high1); opacity: 1;
}

/* Fin barra desplazamiento */

/* webkit, opera, IE9 */
::selection { 
background:var(--high1); 
color:#333; 
}
/* mozilla firefox */
::-moz-selection { 
background:var(--high1); 
color:#333;}