@font-face { font-family: 'Jost'; src: url('../fonts/Jost-VariableFont_wght.ttf') format('truetype'); font-weight: 1 999;}

/*
.light { font-weight: 300;}
.regular { font-weight: 400;}
.bold { font-weight: 600;}
.extra-bold { font-weight: 800;}
*/

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* GLOBAL////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ORIENTACION HORIZONTAL////////////////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

@media screen {
/* RESET PAGE */
html, body,
div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img, strong,
dl, dt, dd, ol, ul, li,
form, label, fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none;
                          box-sizing: border-box;}

/*HTML 5*/
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {display: block;}

:root {
  /*colores*/
  --verde: #80AE12;
  --yellow: #F9C332;
  --blanco: #ffffff;
  --grisblanco: #F2F2F2; 
  --grismedio:#b9b9b9;
  --griscemento: #464545;
  --negro: #000;
  
  --grisproyecto:#59605B;
  
  /*animaciones*/
  --easing-classic: ease-in-out;
  --easing: cubic-bezier(.25,.8,.25,1); 
}

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




/*TEXTOS*/
p.general { font-size: 1rem; line-height: 1.7em !important; color: var(--griscemento);}
strong { font-weight: 600;}
h1, h2, h3, h4, h5, h6 { font-weight:normal;}
h2.general {  font-size: 2.5rem; font-weight: 600; color: var(--verde);}
 
ul { list-style: none;}

a { text-decoration:none !important; }
a, figure, img { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/*FORMULARIO:::::::::::::::::::::::::::::::::::::::::::::::::::*/
label {}

::placeholder { color: #6B6B6B; opacity: 1;}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0;
                                    box-sizing: border-box;}
input.general,
textarea.general { font-size:1.1rem; border:1px solid #CFC9C9;  padding:5px 10px; background-color:#FFF;  margin-bottom:10px}

/*focus*/
input.general:focus,
textarea.general:focus { outline:1px solid var(--verde);}   

/*Desktop*/
.Desktop input.general:hover,
.Desktop textarea.general:focus:hover { border-color: var(--verde); }
/*.......*/
                                    
/*BOTONES:::::::::::::::::::::::::::::::::::::::::::::::::::*/
.btn-verde{ display: inline-block; padding: 10px; border-radius: 5px; font-size: 1rem; font-weight:600; color:var(--blanco); background-color: var(--verde); cursor: pointer;
            -webkit-transition:  background-color 0.3s var(--easing-classic);
            transition:  background-color 0.3s var(--easing-classic);}

.Desktop .btn-verde:hover { background-color: #000;}

.btn-verde-out { display: inline-block; padding: 7px; border-radius: 5px; font-size: 0.9rem; font-weight:600; border:1px solid var(--verde); color: var(--grisproyecto); cursor: pointer;
            -webkit-transition:  border-color 0.3s var(--easing-classic);
            transition:  border-color 0.3s var(--easing-classic);}

.Desktop .btn-verde-out:hover { border-color: var(--negro);}

.btn-verde-txt {display: inline-block; font-size: 1rem; font-weight:600; color:var(--verde);
                -webkit-transition: color 0.3s var(--easing-classic);
                transition: color 0.3s var(--easing-classic);}
                
.Desktop .btn-verde-txt:hover { color: #000;}

.btn-verde-wapp {display: inline-block; padding: 10px 10px 10px 35px; border-radius: 5px; font-size: 1.3rem; font-weight:600; color:var(--blanco); background: var(--verde) url("../imagenes/wapp-blanco.svg") no-repeat 10px 50%; cursor: pointer;
            -webkit-transition:  background-color 0.3s var(--easing-classic);
            transition:  background-color 0.3s var(--easing-classic);}

.btn-verde-descargar {display: inline-block; padding: 10px 10px 10px 10px; border-radius: 5px; font-size: 1.3rem; font-weight:600; color:var(--blanco); background: var(--verde) url(".../imagenes/wapp-blanco.svg") no-repeat 0px 50%; cursor: pointer;
            -webkit-transition:  background-color 0.3s var(--easing-classic);
            transition:  background-color 0.3s var(--easing-classic);}
            
.Desktop .btn-verde-wapp:hover { background-color: #000;}

/*TABLAS:::::::::::::::::::::::::::::::::::::::::::::::::::*/ 
table, tr, th, td {  border-collapse: collapse; vertical-align: middle;}
table.general {}

/*MODAL::::::::::::::::::::::::::::::::::::::::::::::::::::*/
.Modal { position:fixed; z-index:9995; top:0; left:0;  overflow-x:hidden; overflow-y: auto;  width:100%; height:100%; padding:40px 20px; background: rgba(0, 0, 0, 0.8); opacity:0; visibility:hidden;
         display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
		 -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
		 transition: opacity 0.3s ease, visibility 0.3s ease;}        
        
/*Mobile*/
.Mobile .Modal { overflow-x: scroll; -webkit-overflow-scrolling: touch;}
/*......*/

    a.cerrarx { position:absolute; z-index: 100; top:30px; right:30px; display: block; cursor:pointer; width:35px; height:35px; background:#000 url("../imagenes/icono-menu-close-blanco.svg") no-repeat 50% 50%; background-size: 15px auto; border-radius: 50%; }
        
    .ContentModal { display: none; /*position: relative; overflow: hidden; opacity: 0; visibility: hidden;*/
                    -webkit-transform: scale(0.5);
                    transform: scale(0.5);
                    -webkit-transition: -webkit-transform 0.3s ease-in-out 0.15s;
                    transition: transform 0.3s ease-in-out 0.15s;}        


/*GLOVAL.................................................................................................................... */
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
html, body { height:100%;}
html { font-size:18px  /*1rem = 18px*/ }

body {
    margin:0 auto;
    text-align:center;
	font-family: 'Jost', sans-serif;  
    overflow-x: hidden;
  }
  
body * {font-family: 'Jost', sans-serif; }

.SafeZone { width:100%; min-height:100%; margin:0 auto; font-size:0;}
     .Viewport { position:relative; width:100%; max-width:1600px; height:100%;  margin:0 auto;}
  
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*HEADER...................................................................................................................................*/
header.general { position: fixed; z-index: 9990; top: 0; left: 0; width: 100%;}
    #TopHeader { display: flex; flex-wrap: wrap; padding: 0 50px;}
        #Logo { flex: 0 0 250px; padding: 20px 20px 20px 0;
                -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;}
                
        #Logo a { display: block; padding:0;}
	    #Logo img { max-width: 100%; display: block;}
        
        #Menus { flex: 1; display: flex; flex-direction: column; text-align: right;
                 -webkit-transform-origin: 100% 0;
                transform-origin: 100% 100%;}
                
            #Menus #Phone { flex: 0 0 50px;}
            #Menus #Phone a { display: inline-block; padding: 10px; font-size: 1rem; font-weight: 600; color: var(--blanco);background-color: var(--verde); 
                        -webkit-transform: skewX(-30deg);
                        transform: skewX(-30deg);
                        -webkit-transition: background-color 0.5s var(--easing);
                        transition: background-color 0.5s var(--easing);}
                        
            #Menus #Phone p {-webkit-transform: skewX(30deg);
                              transform: skewX(30deg);
                              -webkit-transition: opacity 0.5s var(--easing);
                              transition: opacity 0.5s var(--easing);}
            
            #MenuGeneral {flex: 0 0 auto; width: auto; margin-top: 15px;}
                #MenuGeneral { display: flex; align-items: center; justify-content: flex-end;}	    	
				#MenuGeneral > li { position: relative; flex: 0 0 auto; margin-left: 20px;
                                    -webkit-transition: background-color 0.5s var(--easing-classic);
                                    transition: background-color 0.5s var(--easing-classic);}
				
                #MenuGeneral > li a { display: block; padding: 5px 10px;  font-size:1.1rem; font-weight: 600; color: var(--blanco);
                                    -webkit-transition: color 0.3s var(--easing);
                                    transition: color 0.3s var(--easing);}   
                                    
                #MenuGeneral > li > a { text-shadow:rgba(0, 0, 0, 0.4) 0px 0px 3px, rgba(0, 0, 0, 0.1) 0px 2px 0px, rgba(0, 0, 0, 0.1) 0px 0px 2px;}

                    #MenuGeneral > li ul { position: absolute; overflow: hidden; top: 34px; left: 0; text-align: left; width: 200px; max-height: 0; background-color:var(--griscemento);
                                            -webkit-transition: max-height 0.5s var(--easing-classic);
                                            transition: max-height 0.5s var(--easing-classic); }
                                            
                    #MenuGeneral > li ul li { display: block;} 	
                    #MenuGeneral > li ul li a { padding-top: 10px; padding-bottom: 10px;}
                
                /*Desktop*/        
                .Desktop #Menus #Phone a:hover { background-color: var(--negro);}
                .Desktop #Menus #Phone a:hover p { opacity: 0.8;}
                
                .Desktop #MenuGeneral > li a:not(.select):hover { color:#BDBDBD !important;}
                .Desktop #MenuGeneral > li.open > a:hover { color:var(--verde) !important;}
                
                /*select*/
				#MenuGeneral li a.select { color:var(--verde) !important; cursor:default; text-shadow: none !important;}		
                
                /*open*/                
                #MenuGeneral > li.open { background-color:var(--griscemento) !important; }
                #MenuGeneral > li.open > a { color:var(--verde); cursor: default !important;}
                #MenuGeneral > li.open ul { max-height: 200px;}
                /*.....*/
                

        /*Mobile*/
        a#BtnMobile { display:none;}
        /*......*/

        #FlotanteWapp {  position: fixed; z-index: 500; right: 16px; bottom: 40px; }
        #FlotanteWapp a { font-size: 0;  display: block; width: 60px; height: 60px; background: var(--verde) url("../imagenes/wapp-blanco.svg") no-repeat 50% 50%;
            border-radius: 50%; background-size: 30px auto; box-shadow: 0 0 30px rgba(51,51,51,.3);
            -webkit-transition: background-color 0.3s var(--easing-classic);
            transition: background-color 0.3s var(--easing-classic);
          }

        #Contacto #FlotanteWapp { bottom: 100px;}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*CENTER..................................................................................................................................*/
main {}	
    main > .NavSocial { position: fixed; z-index: 1000; top: 50%; right: 20px; margin-top: -120px;
                      -webkit-transition: -webkit-transform 0.5s var(--easing-classic);
                        transition: transform 0.5s var(--easing-classic);}
        
        .NavSocial a { display: block; width: 40px; height: 40px; margin: 10px 0;
                        -webkit-transition: opacity 0.5s var(--easing-classic);
                        transition: opacity 0.5s var(--easing-classic);}
                        
        a[title*="Instagram"] { background: url("../imagenes/instagram.svg") no-repeat 50% 50%; background-size:100% auto;}
        a[title*="Facebook"] { background: url("../imagenes/facebook.svg") no-repeat 50% 50%; background-size:100% auto;}
        a[title*="Linkedin"] { background: url("../imagenes/linkdin.svg") no-repeat 50% 50%; background-size:100% auto;}
     
    main .NavSocial.bottom { -webkit-transform: translateX(250px);
                             transform: translateX(250px);}
                    
    .slide { position:relative; overflow:hidden; width:100%;}        
       .slide .SlideItems { position:relative; overflow:hidden; width:100%;}	
           .SlideItems > div { position:absolute; left:0; top: 0; width:100%; height: 100%; text-align:center; opacity:0; visibility: hidden;
                              -webkit-transition: opacity 1s var(--easing-classic), visibility 1s var(--easing-classic);
                              transition: opacity 1s var(--easing-classic), visibility 1s var(--easing-classic);}
           
           .SlideItems > div:last-child { position: relative;}
            
            .slide .NavArrow { position:absolute; z-index:100; top:50%; left:0; margin-top:-25px; width:100%;}
            .slide .NavArrow a { display: block; width: 30px; height: 30px; cursor:pointer; border-radius: 50%;
                                    -webkit-transition: opacity 0.3s ease-in;
                                    transition:opacity 0.3s ease-in;}

            .slide .NavArrow a.Prev { float:left; margin-left: 15px; background:  var(--verde) url("../imagenes/flecha-left.svg") no-repeat 45% 50%; }									
            .slide .NavArrow a.Next { float:right; margin-right: 15px; background: var(--verde) url("../imagenes/flecha-rigth.svg") no-repeat 50% 50%;}	
               
               
               /*slide*/
               .DiagonalSlide { position: absolute; z-index: 300; top: 0; left: 0; width: 100%; height: 100%; text-align: left; padding:100px 65px; background: url("../imagenes/va.svg") no-repeat 38% 65%, url("../imagenes/diagonal.svg") no-repeat 0 0; background-size:40% auto, auto 100%; opacity:0.9;
                                display: flex; flex-direction: column; justify-content: flex-end;}

                   .DiagonalSlide > div { display: flex; flex-direction: column; justify-content: flex-end;}
                   .ValorDestacado { flex: 1;}
                       p.Valor { flex:0 0 auto; font-size: 3.7vw; font-weight: 600; color: var(--verde);}
                       p.ExtraValor { flex:0 0 auto; font-size: 1.5vw; color: var(--griscemento);}

                   .QuickTestimonio { flex: 1;}
                       p.Autor {  flex:0 0 auto;font-size: 1.7rem; font-weight: 600; color: var(--verde);}
                       p.Testimonio { flex:0 0 auto; font-size: 1.2rem; color: var(--griscemento);}
               
               /*chat*/
               #ChatAnimado { position: absolute; z-index: 200; right: 32%; bottom: 17%;
                             -webkit-transform-origin: 50% 100%;
                             transform-origin: 50% 100%;
                             -webkit-transform: scale(1.2);
                             transform: scale(1.2);}
                             
                   #ChatAnimado > div { display: block; margin-bottom: 10px; }
                   #ChatVerde { width: 185px; padding:7px 45px 7px 0; background: url("../imagenes/chat-verde.svg") no-repeat 0 0; background-size: auto 100%;
                               -webkit-transform-origin: 100% 100%;
                               transform-origin: 100% 100%; }
                               
                   #ChatBlanco { width: 140px; padding:7px 45px 7px 0; background: url("../imagenes/chat-blanco.svg") no-repeat 0 0; background-size: auto 100%;
                                -webkit-transform-origin: 0 100%;
                                transform-origin: 0 100%;}
                                
                       #ChatAnimado p { display: block; font-size: 14px; color: #000;}
               
               /*fotos*/
               .slide picture { position: relative; overflow: hidden; width: 100%;}
               .slide img { max-width: 100%; display: block;}  
               
          .slide .NavBullets { position:absolute; z-index:400; width:100%; left:0; bottom:40px; text-align:center;}
              .slide .NavBullets ul { list-style:none; margin:0 auto;}
              .slide .NavBullets li { display:inline-block; vertical-align:middle; width:15px; height:15px; margin:0 7px;  background-color: #ccc; border: 1px solid #999; border-radius: 50%;  cursor:pointer;                                                      
                                        -webkit-transition: color 0.5s var(--easing-classic);
                                        transition: color 0.5s var(--easing-classic);}
          
          /*select*/
          .SlideItems > div.select { opacity: 1; visibility: visible; } 
          .slide .NavBullets li.select { background-color:var(--verde); border-color:var(--verde);  cursor:default;}
          
          /*Desktop*/
          .Desktop .NavSocial a:hover { opacity: 0.7;}
          /*.......*/
          
          
     #Estadisticas { padding: 50px 0; background-color: #FBFBFB; border-top: 8px solid var(--grisblanco); border-bottom: 8px solid var(--grisblanco);}
         #GrupoEstadisticas { display: flex; flex-wrap: wrap; justify-content: center;}
             #GrupoEstadisticas > div { flex: 1; max-width: 270px; margin:0 20px;}                
                 p.Cifra { font-size: 4.5rem;}
                 p.Categoria { font-size: 1rem; letter-spacing: 6px;}
                 
                 #EstadisticaFamilia p.Categoria { font-size: 1.2rem; padding-bottom: 10px; background: url("../imagenes/filetes.svg") no-repeat 50% 100%; background-size: 250px auto;}
                 span.sup { font-size: 20px; display: inline-block;}
                 
     #Valores { padding: 130px 0; background-color: #E6E6E6;}
         #GrupoValores {display: flex; flex-wrap: wrap; justify-content: space-around; width: 100%; max-width: 1800px; margin: 0 auto;}
             #Valores article { flex: 1; margin:0 45px;}                
                 #Valores header { display: block; text-align: center;}
                 #Valores h2 { display: inline-block; font-size: 2.9rem; padding-bottom: 5px;  background: url("../imagenes/filetes.svg") no-repeat 50% 100%; background-size: 100% auto;}
                 #Valores header p { margin-top: 5px; font-size: 2rem; text-align: center; letter-spacing: 18px; text-indent: 14px;}
        
                 #Valores article > div { margin-top: 20px;}        
                 #Valores h3 {font-weight: 400; font-size: 0.95rem; line-height: 1.5em !important; color: var(--griscemento); text-align: left; padding: 0 5px;}
                
                 #ValorSatisfaccion h2 { letter-spacing: 8px; text-indent: 8px;}
                 #ValorSatisfaccion header p {  letter-spacing: 40px; text-indent: 20px;}
      
     .ModuloProyecto { position: relative; height: 500px; background-color: #fff;}
         .ModuloProyecto header { position: absolute; z-index: 200; top: 0; width: 33.33%; height: 100%; background: url("../imagenes/diagonal-gris.svg") no-repeat 0 0; background-size: 100% 100%;
                                  display: flex; align-items: center; justify-content: center;}

         .ModuloProyecto header div { text-align: left;}

         .ModuloProyecto > div { width: 100%;}
             .ModuloProyecto img { max-width: 100%; display: block;}

         #TrabajosDesarrollo { overflow: hidden; }
             #TrabajosDesarrollo header { left: 0;} 
             #TrabajosDesarrollo h2 { flex: 0 0 auto; font-size: 2.5rem; font-weight: 600; margin-bottom: 15px; color: var(--blanco);}
             
             #VideoDrone { width: 100%; height: auto;}

         #TrabajosFinalizados { overflow: hidden;}
             #TrabajosFinalizados header {right: 0;
                                         -webkkit-transform: scaleX(-1);
                                         transform: scaleX(-1);}
                                         
             #TrabajosFinalizados header div { text-align: right;
                                             -webkkit-transform: scaleX(-1);
                                              transform: scaleX(-1);}
                                              
             #SlideTrabajosFinalizados { height: 100%;}
             #SlideTrabajosFinalizados .SlideItems { height: 100%;}
             #SlideTrabajosFinalizados .SlideItems > div { top: -50%;}
             #SlideTrabajosFinalizados .SlideItems > div:last-child { position: absolute;}
             
/*Autoshow*/
	.autoshow { opacity:0;		
				 -webkit-transform: translateY(30px);
			     transform: translateY(30px);
				 -webkit-transition: -webkit-transform 0.5s  var(--easing-classic), opacity 0.3s var(--easing-classic);
				 transition: transform 0.5s var(--easing-classic), opacity 0.3s var(--easing-classic);}	
				 
	.autoshow.active { opacity:1;
					-webkit-transform: translateY(0);
					transform: translateY(0);}
/*....*/
	

/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*FOOTER...................................................................................................................................*/
footer.general {}
    #QuickContacto { padding: 50px 0; text-align: center; border-top: 1px solid #eaeaea; background-color: var(--blanco);}
        #QuickContacto p { font-weight: 300; font-size: 2rem; margin: 0 auto 10px auto;}
    
    #FooterTop {background: linear-gradient(90deg, #f8f8f7 0%, #f8f8f7 50%, #464545 50%, #464545 100%); }
        #GrupoFooterTop {display: flex; flex-wrap: wrap;}
            #DatosEmpresa { flex: 0 0 auto; display:flex; padding: 50px 100px 25px 0; background: url("../imagenes/foto-footer.jpg") no-repeat 100% 0; background-size: auto 100%;}
                #DatosEmpresa figure { flex: 0 0 auto;}
                    #DatosEmpresa img { width: 130px; display: block;}

                #DatosEmpresa div { flex: 0 0 auto; text-align: left; padding-left: 35px;}
                    #DatosEmpresa address,
                    #DatosEmpresa a { font-size: 0.9rem; font-style: normal; color: #000; padding-left: 25px; display: block;
                                    -webkit-transition: color 0.3s var(--easing-classic);
                                    transition: color 0.3s var(--easing-classic);}

                    #DatosEmpresa address { margin-bottom: 20px; background: url("../imagenes/direccion.svg") no-repeat 0 0; background-size: 13px auto;}
                    #DatosEmpresa a.BtnPhone { margin-bottom: 20px; background: url("../imagenes/telefono.svg") no-repeat 0 0; background-size: 14px auto;}
                    #DatosEmpresa a.BtnMailGeneral { margin-bottom: 10px; background: url("../imagenes/sobre.svg") no-repeat 0 3px; background-size: 17px auto;}
                              
            #SiteMap { flex: 1; display: flex; flex-wrap: wrap; padding-top: 50px; padding-bottom: 50px; background-color: #464545;}
                #FooterValores { flex: 0 0 auto; text-align: left;}
                    #FooterValores p { display: block; margin-bottom: 20px; padding-left: 10px; font-size: 1.2rem; font-weight: 400; color: var(--blanco); border-left: 2px solid var(--verde);}

                #FooterAcceso {flex: 1; display: flex; flex-wrap: wrap; margin:0 15px 0 50px;}
                    #FooterAcceso ul { flex: 0 0 auto; text-align: left; padding-left: 20px; padding-right: 20px;}
                    #FooterAcceso li { display: block; margin-bottom: 10px;}
                    #FooterAcceso a { font-size: 1rem; color: #BCBCBC;
                                      -webkit-transition: color 0.3s var(--easing-classic);
                                      transition: color 0.3s var(--easing-classic);}                                     
                   
                                      
                    #FooterAcceso li.TituloAcceso a,
                    #FooterAcceso li.TituloAcceso p { font-size: 1rem; color: var(--blanco);}
                    
                
                footer .NavSocial { flex: 0 0 auto;}
                   footer .NavSocial a { width: 25px; height: 25px; margin-bottom: 10px;}
                    
                /*Desktop*/
                .Desktop #DatosEmpresa a:hover,
                .Desktop #FooterAcceso a:hover { color: var(--verde);}
                /*.......*/
                
   #Legales { padding: 15px 0;}
       #GrupoLegales { display: flex; flex-wrap: wrap;}
       #GrupoLegales p { flex: 1;}
       #GrupoLegales p,
       #GrupoLegales a { font-size: 11px; color: #000;}
       
       p#Copy { text-align: left;}
       p#CreacionUno { text-align: right;}
	


/*INTERNAS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*.........................................................................................................................................*/
/*header*/
.Interna #Logo { display: none;}

/*SOBRE NOSOTROS:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*header*/
#SobreNosotros #LogoInterna { margin-top: -30px;}

/*main*/    
    article.general { width: 100%; }
        article.general > header { position: relative; width: 100%; }
            #LogoInterna { position: absolute; top: 0; left: 0; width: 470px; height: 100%; background: url("../imagenes/diagonal-interna.svg") no-repeat 100% 0;
                           display: flex; justify-content: center; align-items: center; }

            #LogoInterna a { width: 230px; }         
            #LogoInterna img { max-width: 100%; display: block;}

            #FotoSeccion { width: 100%;}
            #FotoSeccion picture { width: 100%;}
            #FotoSeccion img { max-width: 100%; display: block;}
        
        #IntroduccionNosotros { display: flex; flex-wrap: wrap;}
            .ColGris { position: relative; flex: 1; max-width: 780px; text-align: right; padding:30px 50px 50px 30px; background-color: var(--grisblanco);}
                .ColGris::after { content: ""; position: absolute; top: -30px; left: 0; width: 100%; height: 30px; background-color: var(--grisblanco); }
                
            #CasosExito {}
                #ContentCasosExito { width: 100%; max-width: 500px; margin-left:auto; text-align: left;}
                    #ContentCasosExito img { max-width: 100%; display: block;}
                    
                    #ContentCasosExito h2 { margin: 20px 0; font-size: 1rem; text-align: center; color: var(--griscemento);}
                    
                    #ContentCasosExito ul { display: block; margin-top: 40px;}
                    #ContentCasosExito li { display: block; margin-bottom: 20px; padding-left: 20px; font-size: 0.9rem; line-height: 1.6em !important; color: var(--griscemento); background: url("../imagenes/direccion.svg") no-repeat 0 3px; background-size:10px auto;}
                    #ContentCasosExito li h3 strong { display: block;}
                    
            
            .ColBlanca { flex: 1; padding: 30px 30px 50px 50px;}
            #Carta {}    
                #ContentCarta { width: 100%; max-width: 850px; margin-top: 50px; text-align: left;}                    
                    #ContentCarta > div {}
                        p#TituloCarta { margin-bottom: 20px; font-size: 1.5rem; font-weight: 600; color: var(--griscemento);}
                        #ContentCarta p.general { margin-bottom: 20px;}
                    
                    #PieCarta { display: flex; align-items: center; width: 100%;}
                        #PieCarta figure { flex: 0 0 100px;}
                            #PieCarta img { display: block; max-width: 100%;}
                        
                        p#Firmante { display: block; margin-bottom: 10px; font-size: 1.1rem; color: var(--negro);}
                        #PieCarta a[title="Linkedin"] { font-size: 1rem; color: var(--griscemento); padding:5px 0 5px 25px; background: url("../imagenes/linkdin.svg") no-repeat 0 50%; background-size: 20px auto;}
        
/*CAST*/
    #Cast { padding: 60px 0; background-color: #E6E6E6; text-align: left;}
        #Cast h3 { font-size: 1.5rem; font-weight: 600; color: var(--verde); padding-left: 10px;}
        
        #ContentCast { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); max-width: 1400px; margin-top:20px;}
            #ContentCast article { position: relative; padding: 10px;
                                 -webkit-transition: background-color 0.3s ease-in-out;
                                 transition: background-color 0.3s ease-in-out;}
                
                #ContentCast header { position: relative; width: 100%;}
                #ContentCast header::after { content: ""; position: absolute; top: 0; left: 0; width: 50px; height: 100%; background: url("../imagenes/solapa-mas.svg") no-repeat 0 0; background-size:100% auto; pointer-events: none}
                    #ContentCast header figure { display: block; width: 100%;}
                    #ContentCast header img { max-width: 100%; display: block;}

                    .DatosPerfil { padding: 10px;}
                        #ContentCast h4 { display: block; font-size: 1rem; color: var(--negro);}
                        #ContentCast h5 { display: block; font-size: 0.9rem; color: var(--negro);}                    
                        a.BtnPerfilLinkedin { display: inline-block; margin-top: 10px; font-size: 0.9rem; color: var(--negro); padding:5px 0 5px 20px; background: url("../imagenes/linkdin.svg") no-repeat 0 50%; background-size: 15px auto;}
               
                .AcordeonCast { position: absolute;  overflow: hidden; z-index: 100;  width: 100%; left: 0; background-color: var(--blanco); max-height: 0px; opacity: 0;
                                -webkit-transition: opacity 0.3s var(--easing-classic), max-height 0.5s var(--easing-classic);
                                transition: opacity 0.3s var(--easing-classic), max-height 0.5s var(--easing-classic);}
                                        
                    .AcordeonCast p { font-size: 0.9rem; padding:10px 20px 20px 20px; line-height: 1.6em !important; color: var(--griscemento);}
                    
               /*Desktop*/
               .Desktop #ContentCast article:hover { background-color: var(--blanco);}
               .Desktop #ContentCast article:hover .AcordeonCast {  max-height: 2000px;  opacity: 1;  background-color: var(--blanco);}
                             
               /*open*/
               .Mobile #ContentCast article.open { background-color: var(--blanco);}
               .Mobile #ContentCast article.open .AcordeonCast { max-height: 2000px;  opacity: 1;  background-color: var(--blanco);}
               /*...*/ 
               
/*NOVEDADES*/
    #ContentNovedades { background-color: #F2F2F2; padding: 60px 0 100px 0;}
        #ContentNovedades > div > header { padding-bottom: 40px;}
    
        #ListaNovedades { display: grid; grid-gap: 30px; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); width: 100%; max-width: 1400px; margin:0 auto 30px auto;}
            .Post { display: flex; align-items: center; padding-bottom: 3px; background: #fff url("../imagenes/filete-tricolor.png") no-repeat 0 100%; background-size: 100% 3px;}
            .Post.no { display: none !important;}    
                .Post figure { flex: 1;}
                .Post figure img { max-width: 100%; display: block;}

                .Post div { flex: 1; padding: 15px; text-align: left;}
                    p.FechaNovedades { display: block; font-size: 13px; color: var(--grismedio);}       
                    p.TxtNovedades { display: block; margin: 15px 0; font-size: 1rem; line-height: 1.5em !important;} 
                    
            a.btn-instagram { display: inline-block; padding: 10px 15px 10px 45px; border-radius: 5px; font-size: 1rem; font-weight:600; color:var(--negro); border:1px solid #b0b0b0; background-position: 10px 50%; background-size: 25px auto; cursor: pointer;
                            -webkit-transition:  background-color 0.3s var(--easing-classic);
                            transition:  background-color 0.3s var(--easing-classic);}
            
            /*Desktop*/
            .Desktop a.btn-instagram:hover { background-color: var(--verde);}
            /*............*/
                    
/*PROYECTOS*/          
     .Items { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));  width: 100%;}
        .Items a { color: #000;
                   -webkit-transition: box-shadow 0.3s var(--easing-classic);
                   transition: box-shadow 0.3s var(--easing-classic);}
                   
        .Items article { display: flex; flex-direction: column; height: 100%; background-color: #FFFFFF;}       
            .Items header { position: relative; overflow: hidden; flex: 0 0 auto;}
            
            .BandaDestacada { position: absolute; z-index: 200; top:0; left: 0; width: 500px; display: inline-block; background-color: var(--verde); text-align: center;
                                 -webkit-transform: rotate(-25deg) translate(-120px, 0);
                                 transform: rotate(-25deg) translate(-120px, 0);}
            
            .Items .BandaDestacada { background-color: var(--yellow); box-shadow: 0 2px 5px var(--negro);}
                                 
            .BandaDestacada p { padding: 7px 15px;  font-size:0.9rem; color: var(--negro);}
            .Plantilla > header .BandaDestacada p { font-size: 1rem; color: var(--blanco);}         
            
            
            .Items header img { max-width:100%; display:block; margin: 0 auto;}

           .Items footer { flex: 1; padding: 40px 25px; background: url("../imagenes/filete-tricolor.png") no-repeat 0 0; background-size: 100% 3px;}
               .Items h3 { font-size: 1.1rem; margin-bottom: 5px;}
               .Items h3 br { display: none;}
               .Items address { font-size: 0.9rem; font-style: normal;}
               
     #ProyectosDesarrollo .Items { margin: 0 auto; max-width: 1200px;}
     
     /*Desktop*/
     .Items a:hover {box-shadow: 0 10px 20px rgba(0,0,0,0.25);}
     /*.......*/
               
/*CONTACTO*/
    #IntroduccionContacto { display: flex; flex-wrap: wrap;}
        #DatosContacto{}
            #ContentDatosContacto { width: 100%;  max-width: 470px;  margin-left: auto; text-align: left;}
                #Mapa { width: 100%; border: 1px solid #ccc;}
                #Mapa img { max-width: 100%; display: block;}
                
                #ViasContacto { display: flex; flex-wrap: wrap; margin-top: 25px;}
                    #ContactoFisico { flex: 1; order:1;}
                        #ContactoFisico address,
                        #ContactoFisico a { font-size: 0.9rem; font-style: normal; color: #000; padding-left: 25px; display: block;
                                            -webkit-transition: color 0.3s var(--easing-classic);
                                            transition: color 0.3s var(--easing-classic);}

                        #ContactoFisico address { margin-bottom: 20px; background: url("../imagenes/direccion.svg") no-repeat 0 0; background-size: 13px auto;}
                        #ContactoFisico a.BtnPhone { margin-bottom: 20px; background: url("../imagenes/telefono.svg") no-repeat 0 0; background-size: 14px auto;}
                        #ContactoFisico a.BtnMailGeneral { margin-bottom: 10px; background: url("../imagenes/sobre.svg") no-repeat 0 3px; background-size: 17px auto;}

                    #GerenciaVentas { flex: 1 1 100%; order:3; display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; margin-left: 25px;}
                        #GerenciaVentas > p { flex: 1 1 100%; font-size: 1rem;}

                        .Vendedor {flex: 0 0 auto;}
                        .Vendedor p { font-size: 1rem; display: block; margin-bottom: 0.25rem;}
                        a.BtnWappVendedor { display: inline-block !important; padding: 10px 10px 10px 35px !important; border-radius: 5px; font-size: 0.9rem; font-weight:600; color:#fff ; background: var(--verde) url("../imagenes/wapp-blanco.svg") no-repeat 10px 50%; cursor: pointer;
                                        -webkit-transition:  background-color 0.3s var(--easing-classic);
                                        transition:  background-color 0.3s var(--easing-classic);}

                         .Desktop  a.BtnWappVendedor:hover {  background-color: #000; }

                    #ContactoVirtual { flex: 0 0 auto; order: 2; text-align: right; padding-left: 15px;}
                        #ContactoVirtual .NavSocial a { display: inline-block; width: 35px; height: 35px; margin-left: 10px;}

        #ContactoFormulario { text-align: left; padding-bottom: 140px;}
            #ContentFormulario { width: 100%; max-width: 580px; margin-top: 50px; text-align: left;}
            
            #FormContacto { padding-top: 20px;}
                #FormContacto *.general { width: 100%; display:  block;}
                #FormContacto textarea { height:150px; overflow:auto; margin-bottom:10px;}           
            

    /*footer*/
    #Contacto #QuickContacto { display: none;}    
    #Contacto #DatosEmpresa > div { display: none;}
    
/*OK - FAIL*/
	#RespuestaForm { background-color: #f2f2f2; height: 100%;  }
		#RespuestaForm main { width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
			#ContentRespuesta { }
			#ContentRespuesta h1 { font-size: 2rem; display: block; text-align: center; margin: 10px 0 15px 0; }
			#ContentRespuesta h1 strong { display: block; color: var(--verde);}
            #ContentRespuesta h2 { font-size: 1.5rem; display: block; text-align: center; margin: 10px 0 15px 0;}
            #ContentRespuesta a.BtnFormVolver { display: inline-block; background: none; cursor: pointer; font-size: 1rem; line-height: normal; color:#1F9999; border: 1px solid #1F9999; padding: 10px; }
            
            p#console-captcha { font-size: 0;}
            


.SafeZone * { line-height: 1.2em !important;}

}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*RESPONSIVE///////////////////////////////////////////////////////////////////////////////////////////////*/
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (max-width: 1920px) {
html { font-size: 15px; /*1rem = 15px*/}
    .Viewport { max-width:1360px;}  
/*header*/
	#MenuGeneral > li ul { top: 30px;}

/*main*/
     p.Autor {font-size: 1.9rem;}
     p.Testimonio { font-size: 1.4rem;}
     #GrupoValores { max-width: 1600px;}
     #Valores article { max-width: 420px;}
     
/*QUIENES SOMOS*/
    #ContentCast { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); max-width: none;}
 
/*PROYECTOS*/
    #ProyectosDesarrollo .Items {max-width: none;}
}

@media (max-width: 1600px) {
/*QUIENES SOMOS*/
    #LogoInterna { width: 330px; justify-content: flex-start; padding-left: 70px;} 
    #LogoInterna a { width: 170px;}
    #FotoSeccion img { -webkit-transform-origin: 100% 0;
                       transform-origin: 100% 0;
                       -webkit-transform: translateX(80px);
                       transform: translateX(80px);}
}

@media (max-width: 1470px) {
.Viewport { max-width:1200px;}

/*header*/
    #Logo {  flex: 0 0 200px;}
    #MenuGeneral { margin-top: 0;}

/*main*/
    main .NavSocial a { width: 30px; height: 30px;}
    
    p.Autor { font-size: 1.2rem;}
    p.Testimonio { font-size: 0.9rem;}
    
    p.Cifra { font-size: 3.5rem;}    
    
    #Valores { padding: 70px 0;}
        #GrupoValores { max-width: 1200px;}
        #Valores article { max-width: 360px; margin: 0 20px;}
            #Valores h2 {font-size: 2rem;}
            #Valores header p { font-size: 1.4rem; letter-spacing: 11px;}
            #Valores h3 {padding: 0 25px;}
        
    .ModuloProyecto { height: 350px;}
        .ModuloProyecto h2,
        #TrabajosDesarrollo h2 { font-size: 1.8rem;}
        
/*footer*/
#DatosEmpresa,
#SiteMap { padding-top: 25px; padding-bottom: 25px;}

#DatosEmpresa {}
    #DatosEmpresa div { padding-left: 25px;}
    #DatosEmpresa figure img {  width: 100px;}

    #DatosEmpresa address, 
    #DatosEmpresa a { font-size: 0.8rem;}
    #DatosEmpresa a.BtnMailGeneral { background-position: 0 0;}

    #FooterValores { flex: 1 1 100%; max-width: 500px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content:space-between;}
        #FooterValores p,
        #FooterAcceso a { font-size: 1rem;}  
        
        #FooterValores p { margin-right: 15px; margin-bottom: 0;}
    
    #FooterAcceso { margin:30px 0 10px 0; flex: 1 1 100%;}        
        #FooterAcceso ul { padding-left: 0; padding-right: 25px;}
        #FooterAcceso li { margin-bottom: 5px;}
        
    footer .NavSocial { display: flex; margin-bottom: 0;}
    footer .NavSocial a { margin-right: 10px;}       
        
}


@media (max-width: 1300px) {
.Viewport { padding:0 30px; max-width:none;}

/*main*/
    .ModuloProyecto { height: 250px;}
    
/*QUIENES SOMOS*/    
    #CasosExito { padding-left: 40px; padding-right: 40px;}
        h2.general { font-size: 2rem;}
       
    #Carta { flex: 2; padding-left: 40px; padding-right: 40px;}
        p#TituloCarta { font-size: 1.3rem;}
        p.general { font-size: 0.9rem;}
}

@media (max-width: 1200px) {
/*PROYECTOS*/
    #ProyectosDesarrollo .Items {max-width:800px;}
    
/*NOVEDADES*/      
    p.TxtNovedades { font-size: 0.9rem;}
}

@media (max-width: 1110px) {
/*NOVEDADES*/
    #ListaNovedades {max-width: 650px;} 
}

@media (max-width: 1100px) {
/*header*/
#Logo {  flex: 0 0 180px;}
    #Menus #Phone a { font-size: 0.9rem;}    
    #MenuGeneral > li a { font-size: 1rem;}
    #MenuGeneral > li ul { top: 28px;}
    
/*main*/
    main .NavSocial { display: none;}
    
    #GrupoEstadisticas > div {max-width: 190px; }
        p.Cifra {font-size: 3rem;}
        p.Categoria { font-size: 0.9rem;}
        #EstadisticaFamilia p.Categoria { font-size:1rem;}
    
    #GrupoValores { justify-content: center;}
        #Valores article { max-width: 300px; margin: 0 10px;}
        #Valores h2 { font-size: 1.8rem; background-size: 100% 3px;}        
        #Valores header p { font-size: 1.2rem;}
        #Valores h3 { padding: 0 35px; font-size: 0.8rem;}
        #ValorSatisfaccion h2 { letter-spacing: normal; text-indent: 0;}        


/*QUIENES SOMOS*/
    #SobreNosotros #LogoInterna { margin: 0;}
    
    .ColGris { order: 2; flex: 1 1 100%; max-width: none; background-color: #fff;}
        #ContentCasosExito { margin: 0 auto;}         
    
    .ColBlanca { order: 1; flex: 1 1 100%; padding-top: 0; background-color: #f2f2f2;}
        #ContentCarta { display: flex; flex-wrap: wrap; max-width: none; margin-top: 0;}
            #ContentCarta header { display: block; flex: 0 0 320px; padding-right: 35px;}
            #ContentCarta h2 { margin-bottom: 15px;}
            #ContentCarta header img { max-width: 100%; display: block;}
            
            #ContentCarta > div:not(#PieCarta) { flex: 1; padding-top: 60px;}
            #ContentCarta #PieCarta { flex: 1 1 100%;}
            
/*CONTACTO*/
    #ContactoFormulario,
    #DatosContacto { text-align: center; padding-left: 30px; padding-right: 30px;}    
    #ContactoFormulario { padding-bottom: 30px;}
    
        #ContentFormulario,
        #ContentDatosContacto { margin-left: auto; margin-right: auto;}
        
        #ContentFormulario { max-width: 470px;}
}

@media (max-width: 1023px) {
/*header*/
    a#BtnMobile { display:block; position:absolute; z-index:9900; top:23px; left:15px; width:35px; height:35px; cursor:pointer;
				 background:url(../imagenes/icono-menu-open.svg) no-repeat 50% 50%, url(../imagenes/icono-menu-close.svg) no-repeat 50% 200px;}
    
    #Logo { margin-left: 10px;}
    #Menus { position:fixed; z-index:9000; overflow: hidden; top:0; left:0; display:flex;  align-items:center; justify-content:center; width:100%; height: 0; background:rgba(255, 255, 255, 0.9);
			-webkit-transition:  height 0.3s ease-in-out;
		    transition:  height 0.3s ease-in-out;}
        
        #Menus #Phone { display: none;}
        
		#MenuGeneral { display: flex; flex-direction: column; justify-content:center;}
			#MenuGeneral > li {  flex: 0 0 auto; height:auto; margin:5px 0; text-align:center; opacity: 0; 
							-webkit-transform: translateY(50px);
							transform: translateY(50px);
							-webkit-transition: -webkit-transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
							transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;  }

			#MenuGeneral > li:nth-of-type(1) {}	
			#MenuGeneral > li:nth-of-type(2) { transition-delay:0.15s; }
			#MenuGeneral > li:nth-of-type(3) { transition-delay:0.20s; }
			#MenuGeneral > li:nth-of-type(4) { transition-delay:0.25s; }
			#MenuGeneral > li:nth-of-type(5) { transition-delay:0.30s; }	
            
            #MenuGeneral > li a { color: var(--griscemento);}
			#MenuGeneral > li > a { width:100%; text-align:center; font-size:1.5rem; padding:10px 15px; color: var(--griscemento) !important; text-shadow: none !important;}
            
            #MenuGeneral > li ul { position: relative; top: auto; width: 100%; max-height: none; text-align: center; background: none;}
            #MenuGeneral > li ul a { font-size: 1.1rem;}
            
        /*menumode*/
		.menumode { overflow:hidden;}
		.menumode a#BtnMobile { background-position: 50% -200px, 50% 50%; }
		
		.menumode #Menus { overflow:auto; height: 100%;}

		.menumode #MenuGeneral > li	{-webkit-transform: translateY(-30px);
									 transform: translateY(-30px); }
									 
		/*menumode standby*/
		.menumode.standby #MenuGeneral > li	{ opacity:1;
											-webkit-transform: translateY(0);
									 		transform: translateY(0); }		
		/*........*/
        
/*main*/
    .ModuloProyecto { height: 200px;}
    
    /*reset paralax*/
    #SlideTrabajosFinalizados .SlideItems > div { top: 0;}
    .paralax { -webkit-transform: none;
               transform: none;}
    
        
/*footer*/
#FooterTop {background: none; background-color: var(--griscemento);}    
    #GrupoFooterTop { padding-left: 0; padding-right: 0;}
        #DatosEmpresa { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; padding-left: 30px; padding-right: 30px; background: var(--grisblanco);}
            #DatosEmpresa figure {}
            
            #DatosEmpresa div { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 15px;}
                #DatosEmpresa address, 
                #DatosEmpresa a { margin-left: 10px; margin-right: 10px; margin-bottom: 0 !important;}
                #DatosEmpresa a.BtnMailVentas { background: url("../imagenes/sobre.svg") no-repeat 0 0; background-size: 17px auto;}
        
        #SiteMap {flex: 1 1 100%; flex-wrap: wrap; justify-content: center; padding-left: 30px; padding-right: 30px;}
            #FooterAcceso { justify-content: space-between; max-width: 500px;}
            footer .NavSocial { flex: 1 1 100%; justify-content: center;}
            
/*QUIENES SOMOS*/
.Interna #TopHeader { background: url("../imagenes/diagonal-logo-mobile.svg") no-repeat 0 0; background-size: 270px auto;}

#LogoInterna { display: none;}
#FotoSeccion img { -webkit-transform: none;
                    transform: none;} 
                    
/*PROYECTOS*/
    .BandaDestacada {-webkit-transform: rotate(-25deg) translate(-150px, -30px) !important;
                            transform: rotate(-25deg) translate(-150px, -30px) !important;}

    .Plantilla .BandaDestacada p { font-size: 0.75rem; }
}

@media (max-width: 920px) {
.btn-verde { font-size: 0.8rem;}

/*main*/
    .DiagonalSlide { padding-left: 40px;}
    .DiagonalSlide > div { justify-content:center;}
    .DiagonalSlide > div.QuickTestimonio { display: none;}

    #ChatAnimado { -webkit-transform: translateX(40px) scale(1);
                   transform: translateX(40px) scale(1);}
                   
    #Estadisticas { padding: 20px 0;}
        #Estadisticas p.Categoria { font-size: 0.8rem;}
    
    #GrupoValores { padding-left: 30px; padding-right: 30px;}
        #Valores { padding: 40px 0;}
        #Valores h2 {font-size: 1.4rem;}
        #Valores header p { letter-spacing: 0; text-indent: 0;}
        #Valores h3 { padding: 0;}      
        
    .ModuloProyecto h2,
    #TrabajosDesarrollo h2 { font-size: 1.3rem;}
    
/*footer*/
    #DatosEmpresa div { max-width: 450px;}
        #DatosEmpresa figure { flex: 1 1 100%; text-align: center;}
            #DatosEmpresa figure img { width: 100px; margin: 0 auto;}

        #DatosEmpresa address, 
        #DatosEmpresa a { flex: 1 1 50%; margin: 0 0 30px 0 !important;}

        #QuickContacto p {font-size: 1.5rem;}
        
/*NOVEDADES*/
    a.btn-instagram { font-size: 0.8rem;}
}

@media (max-width: 800px) {
/*main*/ 
    #GrupoEstadisticas > div {  max-width: none; margin: 0; flex: 1 1 50%; padding: 15px;}
    
    #Valores article { max-width: none; flex: 1 1 100%; margin: 15px 0;}
        #Valores article > div { max-width: 300px; margin-left: auto; margin-right: auto;}
        #Valores h3 { text-align: center;}
        
/*QUIENES SOMOS*/
    #ContentCast { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: 5px;}   

/*PROYECTOS*/
    #ProyectosDesarrollo .Items {max-width:400px;}        
}

@media (max-width: 700px) {
/*header*/
    a#BtnMobile { top: 15px;}
    #Logo { flex: 0 0 120px;}

/*main*/
    #ChatAnimado { display: none;}
    p.ExtraValor { font-size: 2.2vw;}    
    .slide .NavBullets { display: none;} 
    
    .ModuloProyecto header { width: 50%;} 
    
/*footer*/
    #GrupoLegales p { flex: 1 1 100%; text-align: center;}
    p#CreacionUno { margin-top: 5px;}
    
/*QUIENES SOMOS*/
    .Interna #TopHeader { background-size: 200px auto;}
}

@media (max-width: 686px) {
/*QUIENES SOMOS*/
    .Mobile .AcordeonCast { position: relative;} 
}

@media (max-width: 640px) {
/*main*/
    #VideoDrone {width: auto; height: 200px;}
}

@media (max-width: 580px) {
/*PROYECTOS*/
.BandaDestacada p { font-size: 0.9rem;}

/*NOVEDADES*/
     #ContentNovedades {padding: 40px 0 30px 0;}
         #ContentNovedades > div > header { padding-bottom: 20px;}
         
         #ListaNovedades {  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px;}
         .Post { align-items: flex-start;}
         .Post figure { padding: 15px 0 15px 15px;}
         .Post div { flex: 2;}
         p.TxtNovedades { margin-top: 5px;}
}

@media (max-width: 550px) {
.btn-verde-txt { font-size: 0.9rem !important;}

/*header*/
    #TopHeader { background: url("../imagenes/diagonal-logo-mobile.svg") no-repeat 0 0; background-size: 200px auto;}
        a#BtnMobile { top: 10px;}
        #Logo { padding-top: 15px;}
    
/*main*/		
    #SlideGeneral {height: 375px;}
        #SlideGeneral .SlideItems { height: 100%;}
            #SlideGeneral .SlideItems > div { display: flex; flex-direction: column;} 
            #SlideGeneral .SlideItems picture { flex: 1;}            
        
        .DiagonalSlide { flex: 0 0 auto; position: relative; height: auto; padding-top: 20px; padding-bottom: 20px; background: #f2f2f2 url("../imagenes/diagonal-mobile.svg") no-repeat 0 50%; background-size: auto 150%;}
            p.Valor { font-size: 2rem;}
            p.ExtraValor { font-size: 1.3rem;}
            
    #Estadisticas { border: none;}
        p.Cifra { font-size: 2.5rem;}
    
    .ModuloProyecto { height: 160px;}    
        .ModuloProyecto header { width: 55%; justify-content: flex-start;}
     
     #TrabajosDesarrollo { border-bottom: 5px solid #f2f2f2;}  
        #TrabajosDesarrollo header { padding-left: 20px;}
        #TrabajosFinalizados header { padding-left: 20px;}
 
    
/*footer*/
    #DatosEmpresa div { display: inline-flex; flex: 0 0 auto; max-width: 220px; padding-left: 0;}
        #DatosEmpresa address, 
        #DatosEmpresa a { flex: 1 1 100%; }
        
    #FooterValores,
    #FooterAcceso {  max-width: none;  flex: 0 0 auto; display: block;}
      
    #FooterValores { padding-bottom: 15px; padding-right: 10px;}
        #FooterValores p { display: block; margin-bottom: 15px;}        
    
    #FooterAcceso { margin-top: 0; justify-content: flex-start;}
        #FooterAcceso ul { flex: 1 1 100%; margin-bottom: 25px;}             
}

@media (max-width: 500px) {
.Viewport { padding:0 15px;}

/*QUIENES SOMOS*/    
    #Carta { padding-left: 20px; padding-right: 20px;}
        #ContentCarta > div:not(#PieCarta) { padding-top: 40px;}
            #ContentCarta h2 { margin-bottom: 5px;}
            p#TituloCarta { margin-bottom: 35px;}
            p.general { font-size: 1rem;}
            
            #PieCarta figure { flex: 0 0 60px; margin-right: 15px; margin-left: 15px;}
            p#Firmante { font-size: 1rem;}
            
    #CasosExito { padding-top: 20px; padding-bottom: 20px;}
    
    #Cast { padding: 30px 0;}

/*CONTACTO*/
    #ContactoFisico { flex: 1 1 100%;}
    #ContactoVirtual { flex: 1 1 100%; text-align: left; margin-top: 15px;}

/*PROYECTOS*/
    #ProyectosDesarrollo .Items { display: block;}    
    #ProyectosDesarrollo #ListaProyectos { padding-left: 0; padding-right: 0;}
    #ProyectosDesarrollo .Items a { margin-bottom: 20px; display: block;} 
    
   .BandaDestacada,
    .Items .BandaDestacada {-webkit-transform:  scale(0.8) rotate(-25deg) translate(-200px, -50px) !important;
                             transform: scale(0.8) rotate(-25deg) translate(-200px, -50px) !important;}
                             
    .Mobile .BandaDestacada p,
    .Mobile .Items .BandaDestacada p { font-size: 10px !important;}
}

#ChatVerde {  animation: chatverde 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;}
#ChatBlanco { animation: chatblanco 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;}

/*ANIMACIONES*/
@keyframes chatverde{
    0%   { opacity: 0; transform: translateY(10px);}  
    20% { opacity: 1; transform: translateY(0);}
    50% { opacity: 1; transform: translateY(0);}
    70% { opacity: 1; transform: translateY(-10px);}
    90% { opacity: 1; transform: translateY(-10px);} 
    100% { opacity: 0; transform: translateY(-20px);}
}

@keyframes chatblanco{
  0%   { opacity: 0; transform: translate(-20px,10px);} 
  50% { opacity: 0; transform: translate(-20px,10px);}
  70% { opacity: 1; transform: translate(-20px,-10px);}
  90% { opacity: 1; transform: translate(-20px,-10px);}
  100% { opacity: 0; transform: translate(-20px,-20px);}
}