@charset "UTF-8";
@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'); 

/* CSS Document */

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

/* paleta de colores de la marca / principales */
:root {
    --principal: #0575bb;
    --secundario: #00478e;
    --terciario: #1595d3;
    --extra: #4abbe8;
    --blanco:#fff;
    --negro:#000;
    --borde-negro: #00000050;
   
    --gradiente: linear-gradient(to right, #00478e , #0575bb);

    /* Tipografía */
    --tipografia: 'Roboto', Arial, sans-serif;
  }

  
li{
   list-style: none;
}
h1 , h2 , h3 , h4 , h5 , h6 , p, footer, 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.2em;
    line-height:4vh;
}

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

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

.breadcrumb h1{font-size:1.2em;color:#fff;text-transform:uppercase;}

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

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

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

form, input, textarea, select, button, label {
   font-family: "Roboto";
   font-size: inherit;
   background-color: transparent;
   display: block;
   color: inherit;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
 }

 form{width:75%; margin:0 auto;}

 input, textarea{
   border:1px solid rgb(182, 182, 182);
   border-radius:8px;
   padding:1%;
   width:100%;
   
 }
 input{
   display:inline-block;
 }

 .textarea{
   height:20vh;
 }

 label{
   padding:20px 0 4px;

 }

 .radio{
   width:1em;
   height:1em;}

 .inline{
   display:inline-block;
   padding-right:15px;
 }

 .submit:hover{
   cursor:pointer;
   background:var(--principal);
 }

 .submit{
   margin-top:25px;
   width:35%; 
   transition:.3s ease-in; 
   background:var(--secundario);
   color:#fff;
}

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

.container.cabecera{
  width:90%;
  margin:0 auto;
  display:flex;
  flex-flow:row wrap;
}

/*header*/

header{
    background:#fff; 
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
    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 wrap;
    justify-content: flex-end;
    align-items: center;
}
.headerNav{
    
    display:inline-flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-content:center;
    align-items:center;
    gap:40px;
    
 } 

 .headerBtn{
   background:var(--secundario); 
   fill:white;
   display:none;
   border-radius:0.2em;
   
}
 
   header .svg{
      width:2em;
      height:2em;
      fill:white;
   }

   .itemmenu{
         display:flex;
         flex-flow:row; 
         align-items: center;
         height:4vh;
      } 
      
    .submenu{
      position:absolute;
      top:5em;
      display:none;
      background-color:var(--secundario);
      color:white;
      font-weight:300;
      font-size:0.9em;
      z-index:1;
      padding:10px;
      border-radius:4px;
    }  

    .itemmenu:hover .submenu {
      display: block;
    }

    .submenu a{
      color:#fff;
    }
    

  @media screen and (max-width:580px){
   .headerBtn{
      display:block;
      cursor: pointer;
   }
   .nav{
      width:100%;
      height:0;
      pointer-events: none;
      overflow: hidden;
      transition: all .5s ease;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
    }
    .nav.activo{
      height:50vh;
      pointer-events: auto;
      overflow:visible;
      z-index:10;
      background:var(--principal);
      color:#fff;
      transform:translateY(0vh);
      border-radius:15px;
    }
    header .headerNav{
      flex-direction: column;
      gap:0px;
    }
    header .itemmenu{
      margin: 1rem 0;
    }

    li a{color:#fff;}
  
  }   
  
  .breadcrumb{
    background-color:var(--terciario);
    padding: 1% 7%;
    color:white;
    width:42%;
    border-radius:35px;
    margin-left:-3.2%;
  }


  /* Estilos del slider */
  .slider {
    position: relative;
    max-width: 100%;
    margin: auto;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
}

.slide img {
    width: 100%;
    display: block;
}

/* Botones de navegación */
.nav-button {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: bold;
    border-radius: 15px;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.content_slider{
  width:35%;
  top:35%;
  margin-left:10%;
  position:absolute;
}

.blanco h1{
  color:#fff;
}

.blanco h2{
  color:#fff;
}

.blanco p{
  color:#fff;
}

  /*inicio o home*/

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

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

.seccionimagen img{max-width:100%; border-radius:20px;}
.ajusteimagen img{width:75%;margin:auto;}

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

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

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

 .enfasis2{
    font-size:1.3em;
    color: var(--blanco);
    line-height:1.3;
}

.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%;
    padding: 8% 0;
    background-color:#fafafa;
}

.servicios h2{
    color:var(--secundario);
    text-align:center;
}

.servicios h6{
    color:var(--terciario);
    text-align:center;
}

.servicios2{
  width:100%;
  padding: 1% 0 4%;
  
}

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

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

 .item2{
    overflow:hidden;
    border-radius:17px;
 }


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

.cuadro2{
    text-align:center;
    color:var(--principal);
    margin-top:2vh;
   
 }

 .fondo {
    height:30vh;
    transition: transform .2s;
    background-size:cover;
}

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

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

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

.fondoParallax{
	height:600px;
   width:100%;
	background-image:url("../img/banner.jpg");
	background-size:cover;
	background-attachment:fixed;
   display:flex;
   flex-flow:row;
   justify-content:flex-end;
   align-items: center;
   align-content: center;
   
}

.fondoinicio{
    display:flex;
      background-image: linear-gradient(to right, #0575bb, #4abbe8);
      -webkit-background-image: linear-gradient(to right, #0575bb, #4abbe8);
  
}
.seccionFondoParallax{
   width:50%;
   padding:12% 1% 5% 7%;
}
.seccionFondoParallax2{
   width:50%;
   padding:5% 0 0;
}
.seccionFondoParallax2 img{
    max-width:100%;
}

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



 /* Tabs */
.tab {
   overflow: hidden;
   width:100%;
   display:flex;
   justify-content: center;
   margin-top:5%;
 }
 
 /* botones de los tabs */
 .tab button {
   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   
   color:#595959;
 }
 
 .tab button:hover {
   border-bottom: 1px solid #1595d3;
 }
 
 .tab button.active {
   border-bottom: 1px solid #1595d3;
 }
 
 /* contenido de los tabs */
 .tabcontent {
   display: none;
   padding: 6px 12px;
   transition: all 0.5s ease;
   width:100%;
 }

 #defaultOpen{
   display:block;
 }

 .active{display:block;}



 /*servicios*/
 .grid-container{
   display:grid;
   grid-template-columns: repeat(3,1fr);
   gap: 50px;
   padding:3% 0;
   width:100%;
 }

 .grid__container{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
  padding:3% 0;
}

.grid-item{
  margin:3% 0;
}


/*trabajos realizados*/

.trabajos{
   width:100%;
   margin-top:2%;
}

 /*contacto*/
 
 #contacto-fondo{
     background:linear-gradient(45deg,#00478e 0%,#4abbe8 100%);
     padding:4% 0;
     margin-top:1.5%;
    width:100%;
 }
 
 .contacto-todo{
   display:flex;
   flex-flow:row nowrap;
   justify-content:center;
   align-items:center;
   width:100%;
 }

 .contacto{
    
   width:25%; 
   padding:2% 0;
  
}

.bloque-contacto{
   width:100%;
   text-align:center;
   padding:8.5% 0;

}

.bloque-contacto h5{
   padding-top:15px;
   color:var(--blanco);
   font-size:1em;
}

.animacion-lotie{
    width:40%;
}

.formulario{
   width:33%;
   margin:5% auto;
   padding:4% 0 6%;
   border-radius: 5%;
   background:#fff;
   box-shadow: 2px 2px 20px #b0b0b0;
}

/*footer*/

 footer{
    background: var(--secundario); 
    align-content:center;
    padding:3% 0;
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-content:center;
    width:100%;
}


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

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



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

@media only screen and (min-width: 842px) and (max-width: 1078px) {
  .seccionFondoParallax{
    width:65%;
  }

}

@media only screen and (min-width: 500px) and (max-width: 841px) {
	.content_slider{
    width:50%;
    top:25%;
  }
  
  .blanco h1{
  font-size:5vh;
  line-height:3rem;
}

.seccionimagen{
  width:100%;
}

.secciontexto{
  width:100%;
}

.seccionFondoParallax{
  width:100%;
}
.seccionFondoParallax2{
  width:100%;
}
}



@media screen and (max-width:500px){

  h1{  
    font-weight: 900;
    font-size:3em;
    line-height:7vh;
    }
    
    h2{  
        font-weight: 700;
        font-size:2.5em;
        line-height:6vh;
    }
    
    h3{  
        font-weight: 600;
        font-size:2em;
        line-height:5.5vh;
    }
    
    h4{  
        font-weight: 500;
        font-size:1.5em;
        line-height:5vh;
      }
   
    
  
/*header*/

.logo{
  width:50%;
}

.menu{
  width:50%;
}

.submenu{
  transform:translateY(100%) translateX(-110%);
}



.breadcrumb{
  width:75%;
}
.breadcrumb h1{font-size:0.75em;}


.container{
    display:flex;
    flex-flow: column wrap;
}

/*inicio*/

.content_slider{
  width:50%;
  top:30%;
}

.blanco h1{
  font-size:3vh;
  line-height:1.5rem;
}

.blanco h2{
  font-size:3vh;
  line-height:1.5rem;
}

.blanco p{
  line-height:1rem;
}


.fondoParallax{
  display:block;
}

.seccionFondoParallax{
  width:100%;
}

.seccionFondoParallax2{
  width:100%;
}

.fondoinicio{
    display:block;
}    

.items{
  flex-flow:column;
}

.enfasis{
  font-size:1.1em;
}
.enfasis2{
  font-size:1.1em;
  color:var(--blanco);
  line-height:1.3;
}

.seccionFondoParallax2 img{
    max-width:100%;
    -webkit-max-width:100%;
    -moz--max-width:100%;
}

.seccionimagen{
  width:100%;
}
.secciontexto{
  width:100%;
}

/*servicios*/

.grid-container{
  grid-template-columns: repeat(1,1fr);
  padding-top:15%;
}

.grid-container2{
  grid-template-columns: repeat(1,1fr);
  padding-top:15%;
}

/*contacto*/

 .contacto-todo{
   display:block;
   width:100%;
 }
.contacto{

  width:100%;
}

.bloque-contacto{
  padding:5% 0;
}

.animacion-lotie{
    width:100%;
}

.formulario{
  width:100%;
}

form{
  width:90%;
}


}


/*animacion en Home -servicios*/
.item {
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transition-delay: 1s;
}



@keyframes fadeInAnimation {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}