@charset "UTF-8";
/* CSS Document */

*{
   margin: 0;
   padding: 0;
   border:0;
   box-sizing: border-box;
}

:root {
    --principal: #0575bb;
    --secundario: #00478e;
    --terciario: #1595d3;
    --extra: #4abbe8;
    --borde-negro: #00000050;
    --gradiente: linear-gradient(to right, #00478e , #0575bb);
    /* Tipografía */
    --tipografia: 'Roboto', Arial, sans-serif;
  }

  @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,100&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); 

li{
   list-style: none;
}
h1 , h2 , h3 , h4 , h5 , h6 , p, li a{
   font-size: inherit;
   font-weight: inherit;
   font-family: "Roboto", sans-serif;
}

h1{  
font-weight: 900;
font-size:4em;
line-height:8vh;
}

h2{  
    font-weight: 700;
    font-size:3em;
    line-height:7vh;
}

h3{  
    font-weight: 600;
    font-size:2.5em;
    line-height:6.5vh;
}

h4{  
    font-weight: 500;
    font-size:2em;
    line-height:6vh;
}

h5{  
    font-weight: 400;
    font-size:1.2em;
    line-height:3.6vh;
}

h6{  
    font-weight: 300;
    font-size:1.3em;
    line-height:5vh;
}

p{
    font-weight:400;
    font-size:1em;
    line-height:3.5vh;
}

a{
   display: block;
   text-decoration: none;
   color:inherit;
}
p a{
   display: inline;
}

li a{color: var(--secundario);}
li :active{color: var(--principal);}

:root{
   font-size: 100%;
}
html{
   scroll-behavior: smooth;
}

body{
    display:flex;
    flex-flow:wrap;
}

.container{
    width:1200px;
    margin:0 auto;
    display:flex;
    flex-flow:row wrap;
}

header{
    background:#fff; 
    display:flex;
    flex-flow:row nowrap;
    justify-content:flex-start;
    align-items:center;
    width:100%;
    height:17vh;
    

    }

.logo{
    width:25%;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-content:center;
    padding:1%;
 }  

.logo img{max-width:90%;}
 
.menu{
    width:65%;
    display:flex;
    flex-flow:row nowrap;
    justify-content: center;
    align-items: center;
}
.headerNav{
    
    display:inline-flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-content:center;
    align-items:center;
    gap:40px;
    
 } 

 .headerBtn{width:5%;}
 
.itemmenu{
    display:flex;
    flex-flow:row;
    
 }

 .cuerpo{
    width:100%;
    display:flex;
    flex-flow:column nowrap;
    justify-content:center;

 }

 .carrousel {
    width: 90%;
    max-width: 120em;
    padding: 2em;
    color: var(--negro);
    transition: all 0.4s ease;
    border-radius: 1em;
    background-color: var(--blanco);
    box-shadow: 1em 1em 2em var(--sombra-ppal), -1em -1em 2em var(--sombra-sec), inset 0 0 0 transparent, inset 0 0 0 transparent;
    overflow: hidden;
  }
  
  .carrousel .grande {
    width: 200%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    color: var(--negro);
    transition: all 0.4s ease;
    border-radius: 1em;
    background-color: var(--blanco);
    box-shadow: 1em 1em 2em var(--sombra-ppal), -1em -1em 2em var(--sombra-sec), inset 0 0 0 transparent, inset 0 0 0 transparent;
    padding: 2em;
    transition: all 0.5s ease;
    transform: translateX(0%);
  }
  
  .carrousel .img {
    width: calc( 100% / 2 - 2em);
    min-height: 10vh;
    color: var(--negro);
    transition: all 0.4s ease;
    border-radius: 1em;
    background-color: var(--blanco);
    box-shadow: 1em 1em 2em var(--sombra-ppal), -1em -1em 2em var(--sombra-sec), inset 0 0 0 transparent, inset 0 0 0 transparent;
  }
  
  .carrousel .puntos {
    width: 100%;
    margin: 1em 0 0;
    padding: 0.4em;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
  }
  
  .carrousel .punto {
    width: 2em;
    height: 2em;
    margin: 1em 1em 0;
    color: var(--negro);
    transition: all 0.4s ease;
    border-radius: 1em;
    background-color: #000;
    box-shadow: 0.6em 0.6em 1.2em var(--sombra-ppal), -0.6em -0.6em 1.2em var(--sombra-sec), inset 0 0 0 transparent, inset 0 0 0 transparent;
  }
  
  .carrousel .punto.activo {
    background-color: lightblue;
  }

  .acerca{
    display:flex;
    flex-flow:row nowrap;
    width:100%;

}
 .seccionimagen{
    width:50%;
    display:flex;
    flex-flow:row nowrap;
 } 

 .seccionimagen img{max-width:100%;}

.secciontexto{
    width:50%; 
    padding:5%;
 }

 .secciontexto h2{
    color: var(--secundario);
 }

 .enfasis{
    font-size:1.3em;
    color: var(--principal);
}

.secciontexto .boton{
  display:inline-flex; 
  flex-flow:wrap;
}

.boton{
   margin-top:20px;
   padding:5px 10px;
   border:1px solid #000;
}

.separador{
    height:25px;
}

.texto_blanco{color:#fff;}

.alinear_der{
text-align:right;
align-items:flex-end;
}

.servicios{
    width:100%;
}

.items{
    margin-top:40px;
    display:flex;
    flex-flow:row;
    justify-content:center;
    padding:0 10%;
 }

.item{
    
    width:calc(100% / 4);
    margin:0 1%;
    
    justify-content:center;
    
 }


.cuadro1 {
    background:#c0e0ae;
    height:200px;
    margin-bottom:15px;
    overflow:hidden;
 }

.cuadro2{
    text-align:center;
    color:var(--principal);
 }

 .fondo {
    transition: transform .2s;
    overflow:hidden;
    border-radius:17px;
    height:35vh;
}

.fondo:hover{
    transform: scale(1.5);
}

 .fondo1{
    background-image:url("img/230544.jpg");
    background-size:cover;
 

 }
 .fondo2{
    background-image:url("img/correo.jpg");
    background-size:cover;
 
    
 }
 .fondo3{
    background-image:url("img/video-edicion.jpg");
    background-size:cover;
    
 }
 .fondo4{
    background-image:url("img/digital.jpg");
    background-size:cover;
 }

.fondoParallax{
	height:600px;
	background-image:url();
	background-size:cover;
	background-attachment:fixed;
}

 footer{
    background: #e6e6e6;width:100%; margin-top:100px; align-content:center;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-content:center;
}


 .menufooter{
    display:flex;
    flex-flow:column;
    justify-content:center;
    align-items:center;
    max-width:400px;
    height:300px;
    align-content:center;
    text-align:center;
 }

 .copy{
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-content:center;
    text-align:center;
}



@media only screen and (max-width:700px){
.item{width:100%;}

}