/* PATRONES GLOBALES DE CSS */

/* Tipografía Principal */
h1, h2, h3, a, button { font-family: 'Montserrat', sans-serif;}

/* Tipografía Secundaria */
h4, h5, h6, p, form, input, select, option, div, span { font-family: 'Poppins', sans-serif; }

/* Asignación de propiedad display: block; a etiquetas de estructura */
header, section, main, footer, aside, figure, figcaption, nav, div {display: block;}

/* Quitar margen por defecto de varias etiquetas HTML5 */
body, h1, h2, h3, h4, h5, h6, figure, img {  margin: 0;}


/* CSS propio  */

/* Componente Botón Whatsapp Flotante */
aside#boton-wp { float: none;
    width: 45px;
    height: 45px;
    display: block;
    margin: 0;
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 99998 }

aside#boton-wp a { background: #00bb2d;
        float: none;
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
        position: relative;
        border-radius: 50%;
        text-align: center;
        transition: 0.3s ease-in;
        padding: 10px 0;}

 aside#boton-wp a i {    font-size: 1.5em;
    line-height: 1em;
    color: #fff;
    transition: 0.3s ease-in; }
aside#boton-wp a:hover {background: #000; 
    transition: 0.3s ease-in;}
aside#boton-wp a:hover i { color: #00bb2d; 
    transition: 0.3s ease-in;}



/* Componente Menú Responsive */
aside#menu-moviles {     width: 290px;
    height: 100%;
    display: none;
    margin: 0;
    float: none;
    position: fixed;
    right: -290px;
    top: 0;
    z-index: 99999;
    background: #220a5d; }

aside#menu-moviles a#abrir-menu {width: 35px;
    height: auto;
    margin: 0;
    float: none;
    position: absolute;
    top: 25px;
    left: -35px;
    display: block;
    text-decoration: none;
    color: #fff;
    background: #f3114f;
    font-weight: 600;
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px 0 0 5px;
    transition: all 0.3s ease-in}
aside#menu-moviles a#abrir-menu:hover { background: #350a5d; 
    transition: all 0.3s ease-in }

aside#menu-moviles a#cerrar-menu { width: 35px; 
    height: auto; 
    margin: 0; 
    float: none; 
    position: absolute; 
    top: 25px; 
    left: -35px; 
    display: none; 
    text-decoration: none; 
    color: #fff; 
    background: #f3114f; 
    font-weight: 600; 
    font-size: 1em; 
    line-height: 1em; 
    text-align: center; 
    padding: 10px 0; 
    border-radius: 5px 0 0 5px; 
    transition: all 0.3s ease-in; }
aside#menu-moviles a#cerrar-menu:hover { background: #350a5d; 
    transition: all 0.3s ease-in; }

aside#menu-moviles nav { width: 60%; 
    height: auto; 
    margin: 15% auto; 
    float: none; 
    position: relative; }
aside#menu-moviles nav a { width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto; 
    float: none; 
    position: relative;
    color: #fff; 
    font-weight: 600; 
    font-size: 1.25em; 
    padding: 10px 0; 
    text-decoration: none; 
    transition: all 0.3s ease-in; }
aside#menu-moviles nav a:hover { color: #f3114f; 
    transition: all 0.3s ease-in; }

/* Componente header con Logo y Menú */
header{      float: none;
    width: 100%;
    height: 80px;
    display: block;
    margin: 0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99990;
    background: #fff;}
header article{ float: none;
    width: 1100px;
    height: 80px;
    margin: 0 auto;
    position: relative; }
header article figure{     float: left;
    width: 152px;
    height: 60px;
    margin: 0 ;
    position: relative;
    top: 10px; }
header article figure a{ float: none;
    width: 100%;
    height: auto;
    margin: 0;
    position: relative;
    display: block; }
header article figure a img{ float: none;
    width: auto;
    height: 60px;
    margin: 0 auto;
    position: relative;
    display: block; }

header article nav {  float: right;
    width: 308px;
    height: 40px;
    margin: 0;
    position: relative;
    top: 20px;}
header article nav a{ float: left;
    width: auto;
    height: auto;
    margin: 0 15px;
    position: relative;
    text-decoration: none;
    color: #0162b1;
    font-weight: 700;
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    padding: 12px 0;
     border-bottom: solid 2px #fff; 
    transition: 0.3s ease-in;}
header article nav a:hover {color: #002c50 ; 
    border-bottom: solid 2px #0162b1 ;
    transition: 0.3s ease-in;  }

/* Caja main */
main{  width: 100%;
    height: auto;
    margin: 120px auto 0;
    float: none;
    position: relative;}

/* Componente presentación */
main section#empresa{ width: 100%;
    height: auto;
    margin: 0 auto;
    float: none;
    position: relative; }
main section#empresa div#ancla-empresa { width: 100%; 
    height: 1px; 
    margin: 0; 
    float: none; 
    position: absolute; 
    top: -120px; 
    left: 0; }
main section#empresa article {    width: 1100px;
    height: 520px;
    margin: 0 auto;
    float: none;
    position: relative;  }
main section#empresa article figure{  width: 520px;
    height: 520px;
    margin: 0 100px 0 0;
    float: left;
    position: relative;  }
main section#empresa article figure img{ width: 100%;
    height: auto;
    margin: 0 auto;
    float: none;
    position: relative;
    display: block;  }
main section#empresa article div#info-empresa{  width: 480px;
    height: 520px;
    margin: 0;
    float: right;
    position: relative; }
main section#empresa article div#info-empresa h2{      text-decoration: none;
    color: #002c50;
    font-weight: 500;
    font-size: 1.85em;
    line-height: 1em;
    text-align: left;
    padding: 65px 0 17px;
    border-bottom: solid 2px #fff;
    transition: 0.3s ease-in;
    letter-spacing: -0.02em;}
main section#empresa article div#info-empresa h1{ color:#350a5d;
    font-weight: 800;
    font-size: 3.8em;
    line-height: 1em;
    text-align: left;
    letter-spacing: -0.02em;
    text-decoration: none;
    padding: 0px 0px 16px;
    border-bottom: 2px solid rgb(255, 255, 255);
    transition: all 0.3s ease-in 0s }
main section#empresa article div#info-empresa p{ color: #333; 
    font-weight: 400; 
    font-size: 1.05em; 
    line-height: 1.45em; 
    text-align: left; 
    padding: 0 52px 30px 0;
     letter-spacing: 0.015em;  }
main section#empresa article div#info-empresa a{ width: 120px;
    height: auto;
    margin: 0;
    float: none;
    position: relative;
    display: block;
    text-decoration: none;
    color: #fff;
    background: #f3114f;
    font-weight: 600;
    font-size: 1em;
    line-height: 1em;
    text-align: center;
    padding: 12px 22px;
    border-radius: 25px;
    transition: all 0.3s ease-in; }
    main section#empresa article div#info-empresa a:hover {padding: 12px 25px; 
        color: #f3114f; 
        background: #350a5d;
         transition: all 0.3s ease-in; }
/* Componente Servicios 4 columnas */
main section#servicios{ width: 100%; 
    height: auto; 
    margin: 0 auto 90px; 
    float: none; 
    position: relative;   }
 main section#servicios div#ancla-servicios { width: 100%; 
    height: 1px; 
    margin: 0; 
    float: none; 
    position: absolute; 
    top: -120px; 
    left: 0; }
main section#servicios article{ width: 1100px; 
    height: 230px; 
    margin: 0 auto; 
    float: none; 
    position: relative; } 
main section#servicios article figure{   width: 230px; 
    height: 230px; 
    margin: 0 60px 0 0; 
    float: left; 
    position: relative;   }
main section#servicios article figure:last-child { margin: 0; }
main section#servicios article figure img{  width: auto; 
    height: 95px; 
    margin: 0 auto 25px; 
    float: none; 
    position: relative; 
    display: block;  
    padding-top: 40px;  }
main section#servicios article figure h3{color: #350a5d; 
    font-weight: 700; 
    font-size: 1.35em; 
    line-height: 1em; 
    text-align: center; 
    padding: 0 0 20px;   }
main section#servicios article figure p{color: #333;
     font-weight: 400;
      font-size: 1em;
       line-height: 1.45em;
     text-align: center;
      padding: 0;
       letter-spacing: 0.015em;  }
 
/* Componente Footer con 4 columnas  */
footer { width: 100%; 
    height: auto; 
    margin: 0 auto; 
    float: none; 
    position: relative; 
    background: rgb(53,10,93); 
    background: -moz-linear-gradient(top,  rgba(53,10,93,1) 0%, rgba(0,44,80,1) 100%); 
    background: -webkit-linear-gradient(top,  rgba(53,10,93,1) 0%,rgba(0,44,80,1) 100%); 
    background: linear-gradient(to bottom,  rgba(53,10,93,1) 0%,rgba(0,44,80,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#350a5d', endColorstr='#002c50',GradientType=0 ); }

footer div#ancla-footer { width: 100%; 
    height: 1px; 
    margin: 0; 
    float: none; 
    position: absolute; 
    top: -120px; 
    left: 0; }

footer article { width: 1100px;
    height: auto; 
    margin: 0 auto; 
    float: none; 
    position: relative; 
    padding: 90px 0; }

footer article div#superior-footer { width: 100%; 
    height: 200px; 
    margin: 0 auto 30px; 
    float: none; 
    position: relative; }
footer article div#superior-footer div.cajas-footer { width: 230px; 
    height: 200px; 
    margin: 0 60px 0 0; 
    float: left; 
    position: relative; }
footer article div#superior-footer div.cajas-footer:last-child { margin: 0; }

footer article div#superior-footer div.cajas-footer img { width: auto; 
    height: 50px; 
    margin: 0 0 15px; 
    display: block; 
    float: none; 
    position: relative; }
footer article div#superior-footer div.cajas-footer p { width: auto; 
    height: auto; 
    margin: 0; 
    float: none; 
    position: relative; 
    color: #fff; 
    font-weight: 300; 
    font-size: 0.9em; 
    line-height: 1.35em; 
    text-align: left; 
    padding: 0 30px 0 0; 
    letter-spacing: 0.03em; }
footer article div#superior-footer div.cajas-footer h6 { width: auto; 
    height: auto;
    margin: 0; 
    float: none; 
    position: relative; 
    color: #fff; 
    font-weight: 600; 
    font-size: 1.4em; 
    line-height: 1.35em; 
    text-align: left; 
    padding: 0 0 15px 0; 
    letter-spacing: 0.03em; }

footer article div#superior-footer div.cajas-footer nav#links-contacto { width: 200px; 
    height: auto; 
    display: block;
    margin: 0; 
    float: none; 
    position: relative; }

footer article div#superior-footer div.cajas-footer nav#links-contacto a { width: 100%; 
    height: 22px; 
    display: block; 
    margin: 0 auto 5px; 
    float: none; 
    position: relative; 
    transition: all 0.3s ease-in; }
footer article div#superior-footer div.cajas-footer nav#links-contacto a:first-child { height: 40px; }

footer article div#superior-footer div.cajas-footer nav#links-contacto a i { width: 10%;
 height: auto; 
 display: block; 
 margin: 0 2% 0 0; 
 float: left; 
 position: relative; 
 padding: 3px 0 0 0; 
 color: #8bc8f1; 
 transition: all 0.3s ease-in; }
footer article div#superior-footer div.cajas-footer nav#links-contacto a span { width: 88%;
 height: auto; 
 display: block; 
 margin: 0; 
 float: left; 
 position: relative; 
 padding: 0; 
 color: #fff; 
 font-weight: 300; 
 font-size: 0.93em; 
 transition: all 0.3s ease-in; }
footer article div#superior-footer div.cajas-footer nav#links-contacto a:hover { transition: all 0.3s ease-in;  }
footer article div#superior-footer div.cajas-footer nav#links-contacto a:hover i { color: #000; 
 transition: all 0.3s ease-in;  }
footer article div#superior-footer div.cajas-footer nav#links-contacto a:hover span { color: #09f; 
    transition: all 0.3s ease-in;  }



/* componente botones redes sociales */
footer article div#superior-footer div.cajas-footer nav#links-redes { width: 200px; 
    height: 41px; 
    margin: 0; 
    float: none;
    position: relative; }
footer article div#superior-footer div.cajas-footer nav#links-redes a { width: 41px; 
    height: auto; 
    margin: 0; 
    float: left; 
    position: relative; 
    display: block; 
    text-align: center; 
    padding: 10px 0; 
    transition: all 0.3s ease-in; }
/* footer article div#superior-footer div.cajas-footer nav#links-redes a:hover {} */
footer article div#superior-footer div.cajas-footer nav#links-redes a i { font-size: 1.2em; 
    line-height: 1em; 
    color: #fff; 
    transition: all 0.3s ease-in; }
footer article div#superior-footer div.cajas-footer nav#links-redes a:hover i { color: #0981e4; 
    transition: all 0.3s ease-in; }



/* Inferior Footer */
footer article div#inferior-footer { width: 100%; 
    height: auto; 
    margin: 0 auto;
    float: none; 
    position: relative; }
footer article div#inferior-footer p { width: auto; 
    height: auto; 
    margin: 0; 
    float: none; 
    position: relative; 
    color: #fff; 
    font-weight: 300; 
    font-size: 0.9em; 
    line-height: 1.35em; 
    text-align: center; 
    padding: 0; 
    letter-spacing: 0.1em; }
footer article div#inferior-footer p strong { font-weight: 600; }


/* Zona de Media Queries - RESPONSIVE DESIGN */

/* Ajustes para Tablets */
@media only screen and (max-width: 1199px){
    header article { width: 90%; }
    header article figure { margin: 0 auto; float: none; }
    header article nav { display: none; }


    aside#menu-moviles { display: block; }


    main section#empresa { height: auto; }
    main section#empresa article { width: 80%; 
        height: auto; }
    main section#empresa article figure { width: 100%; 
        height: 340px; 
        margin: 0 auto; 
        float: none; }
    main section#empresa article figure img { width: auto; 
        height: 300px; 
        top: 45px; }
    main section#empresa article div#info-empresa { width: 100%; 
        height: auto;
        margin: 0 auto; 
        float: none; }
    main section#empresa article div#info-empresa h2,
    main section#empresa article div#info-empresa h1,
    main section#empresa article div#info-empresa p { text-align: center; }
    main section#empresa article div#info-empresa p { margin: 0 auto; 
        float: none; 
        padding: 0 0 15px; }
    main section#empresa article div#info-empresa a { margin: 10px auto 0 auto; 
        float: none; 
        width: 150px; 
        text-align: center; }


    main section#servicios article { width: 80%; 
        height: auto; }
    main section#servicios article figure { margin: 0 auto 40px; 
        float: none; }
    main section#servicios article figure:last-child { margin: 0 auto; }


    footer article { width: 80%; }
    footer article div#superior-footer { height: auto; }
    footer article div#superior-footer div.cajas-footer { height: auto; 
        margin: 0 auto 60px; 
        float: none; }
    footer article div#superior-footer div.cajas-footer img { margin: 0 auto 15px; 
        float: none; }
    footer article div#superior-footer div.cajas-footer p { text-align: center; 
        padding: 0; }
    footer article div#superior-footer div.cajas-footer h6 { text-align: center; }
    footer article div#superior-footer div.cajas-footer nav#links-redes { width: 168px; 
        height: 41px; 
        margin: 0 auto; 
        float: none; }
    footer article div#superior-footer div.cajas-footer:last-child { margin: 0 auto 40px; }
}

@media only screen and (max-width: 799px){
    
}

/* Ajustes para Móviles Grandes */
@media only screen and (max-width: 499px){
    header article figure { margin: 0; float: left; }
}

/* Ajustes para Móviles Pequeños */
@media only screen and (max-width: 399px){
    
}