:root {
    --fuenteheading: "PT Sans", sans-serif;
    --fuenteParrafo: "Open Sans", sans-serif;

    
    --primario: #394867;
    --texto: #212A3E;
    --secundario: #F1F6F9;
    --link: #9BA4B5;
   

}

html{
    box-sizing: border-box;
    font-size: 62.5%; /* 1 rem = 10 px */
    scroll-behavior: smooth;
}

*, *:before, *:after{
    box-sizing: inherit;
}

body { 
    background: rgb(240,236,229);
    background: linear-gradient(0deg, rgba(240,236,229,1) 0%, rgba(255,255,255,1) 70%);
    font-family: var(--fuenteParrafo);
    font-size: 1.6rem; 
    line-height:2; /*interlineado*/

}

/** Globales  **/


.contenedor{
    max-width: 120rem;
    width: 90%;
    margin: 0 auto;

}

a { 
text-decoration: none;


}

h1,h2,h3,h4 { 

    font-family: var(--fuenteheading);
    line-height: 1.2;


}
h1{
    font-size: 4.8rem;

}

h2{ 
    font-size: 4rem;
}
h3{ 
    font-size: 3.2rem;

}

h4{ 
    font-size: 2.8rem;
}

img{
    max-width: 100%;
}


/** utilidades **/

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;


}

.centrar-texto { 
    text-align: center;
}
/** barra **/
.button__oscuro {
    
    color: var(--primario);
   
   
    cursor: pointer;
    position: relative;
    border: none;
    background: none;   
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: color;
  }
  
  .button__oscuro:focus,
  .button__oscuro:hover {
    color: var(--primario);
  }
  
  .button__oscuro:focus:after,
  .button__oscuro:hover:after {
    width: 100%;
    left: 0%;
  }
  
 .button__oscuro:after {
    content: "";
    pointer-events: none;
    bottom: -2px;
    left: 50%;
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: var(--primario);
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: width, left;
  }
.barra{ 
    color: var(--primario);
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    
}

.navegacion__enlace{
    margin-left:30px;
    text-align: center;
    font-size: 1.8rem;
    color:var(--primario);

}
.logo__texto{
   font-size: 40px;
   color: var(--primario);


}


/** header **/
.header__contenido{ 

display:flex;
justify-content: flex-end;


    
   



}
.logo_img {
    background-color: var(--texto);
    z-index: 1;
    height: 600px;
    width: 65%;
}

.header__contenido-texto{
    display: block;
    z-index: 4;
    margin-right: 20px;

}

.contenido__texto{
    padding-top: 20px;
    margin-top: 130px;
    width: 600px;
    margin-right:-100px;
    margin-bottom: -300px;
    height: 400px;
    font-size: 55px;
    background-color:var(--secundario);
    font-family: var(--fuenteheading);
    text-align: center;
    color: var(--texto);
}

.contenido_texto-semana{
    text-align: center;
    padding: 0;
    font-size: 30px;
    margin-top: -40px;
    color: var(--texto);
    font-family: var(--fuenteheading);
    margin-right:-40px;
    

}


@media (min-width:360px) and (max-width:768px) {
 
    .header{
       width: 100%;
       margin:0 auto;

    }
    .logo__texto{
        display: inline-block;
        font-size:8vw;
        margin-bottom: 40px;
    }
    .barra{ 
      display: flex;
      flex-direction: column;
    }
    .navegacion{
      display: flex;
      flex-direction:column;
      justify-content: center;
    }
   .navegacion__enlace{
    font-size: 25px;
    margin-bottom: 20px;

   }
    .header__contenido{
        flex-direction: column-reverse;
        margin:0 auto;
        width: 100%;
        background-color: var(--secundario);
       
    }
    .logo_img{
      width:100%;
      height: 300px;
      align-items: center;
      justify-content: space-around; 
      margin-top: 30px;   
     
    }
    
    .contenido__texto{
        margin-top: 20px;
        background: none;
        font-size: 8vw;      
        width:100%;
    }
    .contenido_texto-semana{
        margin-bottom: 100px;
        font-size:25px;
        margin: 0;
        margin-bottom: 40px;
    }
}



/** main **/
.texto__serv{

   
 
  

    font-size: 50px;
    font-family: var(--fuenteheading);
    margin-top: 120px;
    color: var(--texto);
    text-align: center;


}
.main{
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 2rem;
   

}
.img_serv{
height: 350px;


}

.arituclo__serv{
    text-wrap: balance;
    margin-top:-5px;
    font-family: var(--fuenteheading);
    color: var(--primario);
}

.articulo_serv-text{
    margin-top:-25px;
    font-family: var(--fuenteParrafo);
    color:var(--texto);
    width: 750px;
    text-align: left;
    
   

}


@media (min-width:360px) and (max-width:768px) {
    .main{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:space-around;
        width: 95%;
    }

    .img_serv{
        margin-top:15px;
     
    }
    .articulo{
        text-align: center;
    }
    .arituclo__serv{
        text-align: center;
    }
    .articulo_serv-text{
        padding: 15px;
        text-align: justify;
        width: 100%;
        font-size: 15px;
        
    }
}

.contacto{
    display: flex;
    justify-content: center;
    align-items: center;   
    color: var(--primario);
}
.articulo__contacto{
    text-align: center;
    margin: 20px;
}

.artiuclo__contacto-serv{

font-size: 40px;
font-family: var(--fuenteheading);
padding: 2rem;
color: var(--primario);
}

.copiarpegar{
    display: flex;
    height: 30px;
    justify-content: center;
    align-items:center;
}

.arituclo__contacto-text{
    font-size:20px;
    margin-right: 10px;
    color:var(--texto);

}


.telefono{
    margin-top: 40px;
    text-align:center;
    margin-bottom: 0;
}

.arituclo__contacto-telefono{
    font-size:20px;
    margin-top: 0;
    color:var(--texto);
}



@media (min-width:360px) and (max-width:768px) {
    .contacto{
        flex-direction: column;
    }

    .articulo__contacto{
        margin-bottom: 50px;
    }
    .artiuclo__contacto-serv{

        font-size: 30px;
        

        }
    .arituclo__contacto-text{ 
        margin-top: 30px;
    }
     
}
/** ubicacion **/


.ubicacion{
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 2rem;
    background-color: var(--texto);

}
.articulo__ubicacion-texto{

    margin-top: 200p;
    text-align: center;
    font-size: 40px;
    font-family: var(--fuenteheading);
    padding: 2rem;
    color: var(--primario);
    }

   .articulo__ubicacion{
    height: 500px;
    width: 100%;
      
    }
.mapa{
    
    width: 100%;
    height: 500px;
}

.contenido_texto-ubicacion{
    text-align: center;
    margin-top:100px;
    font-size: 25px;
    text-wrap: balance;
    color: var(--texto);
    font-family: var(--fuenteheading);
    color: var(--secundario);
  
    

}
@media (min-width:360px) and (max-width:768px) {
    .ubicacion {
        display: flex;
        flex-direction: column;
    }
    .contenido_texto-ubicacion{
        margin-bottom: 100px;
    }
}
/** enlaces **/

/* ----------------------------------------------
  Generated by AnimatiSS
  Licensed under FreeBSD License
  URL: https://xsgames.co/animatiss
  Twitter: @xsgames_
---------------------------------------------- */

.scale-up-vertical-top:active{animation:scale-up-vertical-bottom 0.5s linear} @keyframes scale-up-vertical-bottom{0%{transform:scaleY(.4);transform-origin:center bottom}100%{transform:scaleY(1);transform-origin:center bottom}}
.texto__enlaces{
text-align: center;
font-size: 40px;
font-family: var(--fuenteheading);
padding: 2rem;
color: var(--primario);
margin-top: 150px;
}
 .link{
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items:center;
    margin:auto;
    margin-top: 100px;

    
 }


 .img_link { 
   
    height: 70px;

    
 }

 /** footer **/ 

.footer{
    background-color: var(--texto);
    margin-top:300px;
    
    
}

.navegacion__enlace-footer{
    margin-left:30px;
    text-align: center;
    font-size: 1.8rem;
    color:var(--secundario);

}
.logo__texto-footer{
   font-size: 40px;
   color: var(--secundario);


}

.barra__footer{ 
    color: var(--primario);
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    

    
    
}

.button__blanco {
    
    color: #e1e1e1;
   
   
    cursor: pointer;
    position: relative;
    border: none;
    background: none;
   
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: color;
  }
  
  .button__blanco:focus,
  .button__blanco:hover {
    color: var(--secundario);
  }
  
  .button__blanco:focus:after,
  .button__blanco:hover:after {
    width: 100%;
    left: 0%;
  }
  
 .button__blanco:after {
    content: "";
    pointer-events: none;
    bottom: -2px;
    left: 50%;
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: #fff;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-duration: 400ms;
    transition-property: width, left;
  }

  @media (min-width:360px) and (max-width:768px) {
      .link{
    
        display: flex;
        flex-direction: column;
      }
      svg{
        margin-bottom: 50px;

      }
      .img_link{ 
        margin-top: 50px;
        
      }
      .barra__footer{
        display: flex;
        flex-direction: column;
      }

      .logo__texto-footer{
        display: inline-block;
        font-size:8vw;
        margin-bottom: 40px;
    }
      .navegacion__enlace-footer{
        font-size: 20px;
        margin-bottom: 20px;


      }
    
  }