/**/
/*tenemos que normalizar las propiedades descargar normalize.ca*//*https://necolas.github.io/normalize.css/8.0.1/normalize.css*/
/*necesitamos utilizar TIPOGRAFIAS google fonts  https://fonts.google.com/  EJM ROOBOTO */
/*necesitamos utilizar ICONOS en vez de letras tiene iconos FONTWEBSOME https://fontawesome.com/ */

/* *..selector general*/
/* p...selector de tipo etiqueta*/
/* .container...selector de tipo clase, puede tener, pueden tener todos los elementos que queramos*/
/* #inicio...selector de tipo id* mas especifico, no puede existir un elemento con mas elementos*/

/*etiquetas son elementos de tipo inline, un elemento alado del otro*/

/*posicione
fixed: elemento fijo
relative: puedo mover elemento cn las propiedades el espacio se mantiene
absoluto: se puede mover pero el espacio resrvado de este elemento ya no existe
*/

*  /* selector //////////////////////////GENERAL////////////////////////////////////////////////////*/
{
 box-sizing: border-box;/*trabaja como caja, y se trabaja el tamaño original*/
}
--------------------------

----------------------------
body
{
    font-family: "Roboto";/*fuente tipografica roboto*/
}

p
{
    color: black;/*TODOS LOS PARRAFOS COLOR NEGRO*/
    text-decoration: none;/*para que todas las lineas de link no salgan*/
    
}

/*la hamburgea que no se vea, ojo este codigo lo puse cuando estava para visualizar en moviles*/
header .container .hamb{
    display: none;
    position: relative;
}


/*//////////////////////////////////////////////menu lado izquierdo //////////////////////////////////////*/
.menuizq{
    margin-top: 60px;
    margin-left: 10px;
    width:20%;
    position: fixed;/*permite siempre estar en la ventana*/
    background-image: linear-gradient(-60deg,linear-gradient(-60deg,#056b2c 0%,#915701 100% )0%,#f5aa0a 100%,);
  
}
.menuizq .textos{
    padding-top:20px;
    padding-left: 20px;
    padding-bottom: 10px;
}
.menuizq .textos a{
    color: white;/*darles un color verde*/
    text-decoration: none;/*quitarles la linea de subrrayado*/
}

/*/////////////////////////////////////////////////////////HEADER/////////////////////////////////////////////*/
/*HEADER MENU DESPLEGABLE*/
.nav-bar{
    background: linear-gradient(0.25turn,#056b2c,#915701, #f5aa0a);/*color de fondo*/
    padding:20px;/*margen hacia adentro*/
    display: block;/*tipo de menu bloque*/
    color: white;/*color contenido blanco (letra hamb) */
    cursor: pointer;/*señala con la manito al seleccionado*/
    font-size: 1.5em;/*tamaño de la fuente*/
    width: 100%;/*ancho al 100%*/
}

.menu, .submenu{
    list-style: none;/*quitamos el estilo*/
    padding: 0;/*quitamos el pading, espacio hacia adentro*/
    margin: 0;/*margen hacia afuer,*/
}
.menu{
    /*background:#555;/*color del menu*/
    background-image: linear-gradient(-30deg, #915701 20%,#056b2c 100%,#f5aa0a 40% );
    width: 100%;/*ancho ocupa todo la pantalla*/
    margin-left: -100%;/*ocultar de izq a derecha---- no se ve el menu--/////////////ocultar menu////////////*/
    transition: all 1s;/*tiempo en que tarda en desaparecer menu*/
}
.menu__link{
    display: block;/*ya que son elementos a*/
    padding: 5px;/*justa espacion entre los menus*/
    color: white;/*color blanco*/
    font-size: 1.4;/*tamanño de la fuete*/
    text-decoration: none;/*decoracion del texto ningun*/
}
/*/////////////////////////////////////////   submenu  ///////////////////////////////////////////////*/
.submenu .menu__link{
    background:#333;/*color diferente del menu*/
    padding-left: 50px;/*margen de la izquierda*/
}
        /*vamos a ocultar el submenu*/
.submenu{
    height: 0;/*alto nada*/
    overflow: hidden;/*para que no se vea--no se ve submenu--//////ocultar submenu/////////////*/
    transition: all 0.5s;/*tiempo en hacer la desaparcion////////////ocultar submenu/////////*/
}
.menu__link:hover{
    background: #444;
}
.submenu .menu__link:hover{
    background: #111;
}
.mostrar{/*para mostrar el menu cuando le de cli a la ham esto va con js..uno.js*/
 margin-left: 0%;
}


@media(min-width:1024px){
    .nav-bar{
        display: none;/*desaparecer narvar, queda normal*/
    }
    .menu{
        
        margin-left: 0;/*mostramos el contenido*/
        display: flex;/*para que se mire uno a lado del otro*/

    }
    .main-nav .menu .logo{
        width: 50px; height: 50px;/*se le da un ancho de 50 px */
    }
    .container-submenu{
        position: relative;
    }
    .submenu{
        position: absolute;
        top: 50px;
        width: 200px;
        overflow: visible;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
    }
    .container-submenu:hover .submenu{
        opacity: 1;
        visibility: visible;
    }
}

/*////HEADER/////*/
header {
/*background-image: linear-gradient(-30deg, #915701 20%,#056b2c 100%,#f5aa0a 40% );*/
/*background-color: rgb(67,121,78);/*color de fondo*/
padding: 50px -10px;/*margen arriba y abajo espacio hacia dentro*/
position: fixed;/*POSICION FIJA EN LA PAGINA, Si movmos la pagina se mueve este campo*/
top: 0;/*Posicion de arriba va ha ser 0*/
width: 100%;/*el ancho, para que ocupe todo el ancho*/
z-index: 2;/*como si fueran capas, para que el header se ponga encima, inicio abajo, header encima*/
}
section{
    justify-content: space-evenly;
}

.container/*clase container*/
{
 width: 1140px;/*todos los elementos que tengan clase container,van a tener 1140px ancho*/
 margin: 0 auto 0 auto;/*arriba y abajo tengan o px*/
 padding-right: 15px;/*espacio a la derecha hacia adentro del container*/
 padding-left: 15px;/*espacio hacia la izq del container*/

 position: relative;/*//////////ojo para contactenos///////////**/
 
}
header .container
{
    display: flex;/*aprobecha el espacio para acomodar sus elementos hijos.. ente caso es el a y img*/
    justify-content: space-between;
    justify-content: space-between;/*alinear los elemntos al eje x, espacio de cada elemento es el mismo, iz centro der*/
    align-items: center;/*alinear centrado con respeto al eje y inicio,nosotros,servicio,galeria,contactenos*/
}
header .container .logo/*elemento que este en la clase logo, dentro clase container , dntro del elemento header*/
{
    width: 50px; height: 50px;/*se le da un ancho de 50 px */
}
a/*todos los a//////////////////////////////////////////////////////////GENERAL//////////////////////*/
{
    display: inline-block;/*para darles un alto*/
}
header .container nav a/* a todos los a que estan dentro de container*/
{
 color: white;/*darles un color verde*/
 text-decoration: none;/*quitarles la linea de subrrayado*/
 margin: 0 15px;/*para darles mas espacio a los elementos, inicio,nostros,servicio,galeria,contactenos*/
}

/*modal header*/
.modal-container
{
   opacity: 0;/*ojo en javascrip*/
    visibility: hidden;/*ojo en javascrip*/
   position: fixed;/*elemento fijo*/
   z-index: 1000;
   width: 100%;
   height: 100vh;
   top: 0;
   left: 0;
   background:rgba(0,0,0,0.5) ;
   display: flex;
   justify-content: center;
   align-items: center;
}
.modal
{
    width: 40%;
    height: 50%;
    background-image: linear-gradient(-60deg, #16a085 0%, #f70000 100%);
    /*overflow: hidden;*/
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    transition: transform 1s;
    transform: translateY(0%);
    border-radius: 10px;
}
.modal > img{
   height: 50%; 
}
.close{/*para poscionar el icono cerrar el modal*/
    position: absolute;
    top:5px;
    right: 5px;
    display: inline-block;
    width: 25px;
    height: 25px;
    background:red;/*color del boton cerrar*/
    color: white;
    line-height: 25px;
    cursor: pointer;
    border-radius: 50%;/*radio bordes del boton cerrar*/
}
.modal-close{
  transform:translateY(-200%);/**/
}


/*///////////////////////////////////////////INICIO PUBLICIDAD   BASEDEDATOS//////////////////////////////////////////////////*/
.cta_poblacion{/*BOTON DEL LINK PARA LA POBLACION*/
    display: inline-block;
    padding:7px 0;/*7px arriba y abajo y 0 a los lados*/
   /* width: 100px;/*ancho*/
   width: 100%;
    border: 1px solid #fff; /*border de 1 px solido blanco*/
    border-radius: 50px;/*para que el borde quede redondo*/
  /*  text-align: center;/*con el texto encentrado*/
    text-decoration: none;/*text decoration nada*/
    color:#283773;/*color azul del texto, ojo no cambia de color por que esta en el nav*/
    background:rgb(39, 9, 121);/*fondo del boton blanco*/
}
.modal_container_poblacion{/*PARA EL CONTENEDOR DEL MODAL*/
            opacity: 0;/*12 la opasidad va a desaparecer el modal*/
            visibility: hidden;/*vamos a poder dar clic en elcontenido de la pagina web*/
position: fixed;/*1 para que se salga del flujo, no se puede ver*/
z-index: 1000;/*2 aun asi no aparece*/
width: 100%;/*3 ancho del 100%*/
height: 100vh;/*4 es decir de todo el tamaño*/
top: 0;/*5 alto cero, ojo aqui ya aparece*/
left: 0;/*6 margen a la iz 0*/
    background:rgba(0, 0, 0, 0.5);/*8 oscurecer todo menos el modal*/
    display: flex;/*9 para centrar el elmento modal*/
    justify-content: center;/* 10 centra*/
    align-items: center;/*11 centra*/
}
.modal_poblacion{/**/
    padding-top: 3%; /*alto del modal con respecto al container*/
    padding-right: 4%;/*el modal margenderecha interna*/
    width: 70%; /*ancho 40%... determina el ancho del contenido*/
    height: 90%;/*alto del 50%.. determina el largo del contenido*/
    background:#fff;/*color de fondo blanco*/
    overflow: hidden;/*para que nada se salga del CONTENEDOR*/
    
    transition: transform 2s;/*tiempo animacion en desarparcer modal*/
    transform: translateY(0%);/*en -200 desapareceria modal hacia arriba en 0 no*/
    border-radius: 10px;
}
.modal_close_poblacion{/*cuando queremos cerrar el modal*/
    transform: translateY(-200%);/*desarparecer hacia arriba el modal*/
}

.close_poblacion{
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-block;
    width: 25px;
    height: 25px;
    background:red;
    color: white;
    line-height: 25px;
    cursor: pointer;
    border-radius: 50%;

}

/*///////////////////////////////////////////INICIO//////////////////////////////////////////////////*/
/*fixed: elemento fijo
relative: puedo mover elemento cn las propiedades el espacio se mantiene
absoluto: se puede mover pero el espacio resrvado de este elemento ya no existe*/
/*SECCION CARUCEL*/

/*SECCION DE INICIO*/
#inicio/*id*/
{
    position: relative;/*todos los elementos por defecto tiene posicion estatica, le cambiamos posicion relativa*/
    
}
#inicio img/*imagen tipo inlie, tiene un espacio en los costados*/
{
    
    width: 100%;/*tamaño de la imagen 100%*/
    display: block;/*para quitar ese pequeño espacio en los costados de la imagen*/
    opacity:0.8;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

#inicio .bloque-inicio/*aqui esta la posicion del texto del bloque inicio*/
{
    /* background-color: black;      /*color del bloque*/
    position: absolute;/*no va a ocupar un espacio, posiciona encima de la imagen*/
    top: 20%;/*posicion de arriba */
    left: 30%;/*posicion lado izq*/
    width: 500px;/*ancho del bloque*/
    text-align: center;/*alinear texto a la izq*/
    margin-left: -100;/*mover elemento para atras, margin trabaja en px % y negativos*/
    background: rgba(67,121,78,0.70);
}

#inicio .bloque-inicio h1/*el h1 que este entro del bloque-inico en idinicio*/
{
    color: white; /*color blanco*/
    font-size: 35px;/*tamaño */
}

#inicio .bloque-inicio p/*todos los elementos p que esten entro bloque-inicio en idinico*/
{
    color: white;/*color balnco*/
    font-size: 17px;/*tamaño 14px*/
    font-weight: bold;/*NEGRITA LA FUENTE*/
}
.boton/*CLASE BOTON*/
{
    text-align: center;/*CENTRADO*/
    text-decoration: none;/*NINGUNA DECORACION*/
    padding: 15px 20px;/*TAMAÑO, ESPACION DEL TEXTO EN EL CONTAINER*/
}

.boton.boton-rojo/*PARA ELEMENTO BOTON-ROJO QUE TIENE CLASE BOTON, OJO SIN ESPACION PARA NO DECIR QUE ESTA ENTRO DEL ELEMENTO BOTON*/
{
    background-color: green;/*COLOR VERDE*/
    color: white;/*COLOR TEXTO BLANCO*/
    font-size: 20px;/*TAMAÑO*/
    font-weight: bold;/*NEGRITA LA FUENTE*/
}


/*////NOSOTROS/////*/
.seccion/*SECCION ES DE TIPO BLOQUE*/
{
    padding-top: 60px;
    padding-bottom: 60px;
}
#nosotros
{
    background-image: url(img/nosotros.jpg);/*imagen de fondo para nosotros*//* si se pone el stily.css en una carpeta css no aparece la imagen*/
    background-size: cover;/*propiedad: aprovecha tamaño fondo y cubre todo el espacio que tenga */
    color: white;/*color de texto blanco*/
    text-align: center;/*alinear texto al centro*/
}
#nosotros p/* a los p que estn dentro de nosotros*/
{
    color: white;/*color texto blanco */
    text-align: center;/* alineacion texto centrado */
    font-size: 17px;/*tamaño 16 pixeles*/
    font-weight: bold;/*NEGRITA LA FUENTE*/
    /*margin:0;*/
}


/*////SERVICIOS/////*/
.row/*clase row, clase padre*/
{
    display: flex;/*una columna aldo de la otra,ponemos al elemneto donde queremos que los hijos se distribuyan de la mejor maner*/
    flex-wrap: wrap;/*si una de las columnas por su ancho no llega a entrar dentro de la clase row, esa colmna se va hacia abajo*/
    margin-left: -15;/*restamos alinear,,, ojo este es un truco para linear*/
    margin-right: -15;/*restamos para alinear*/
}
.columna/*clase columna hijos*/
{
    padding-right: 15px;/*pading a los lados de 15 px*/ /*ojo poner en porcentaje para celulares*/
    padding-left: 15px;/*pading a lado izq*/
}
.columna-33
{
    width: 33.33%;/*abarcar todo el espacio para que  tenga 3 columnas y tegn un33%*/
}

#servicios .bloque-servicio/*blque servicio que esta en idservicio*/
{
 border: 2px solid grey;/*border 2px color gris*/
 height: 600px; /*alto de los bloques*/
}
#servicios .bloque-servicio .bloque-img-servicio img/*IMAGEN bloqueimgservico que esta en bloqueservico que estaen idservicio*/
{
width:100%;
 /*width: 30%;*//*tamaño d la imagen 50%*/
 /*height: auto;*//*alto de la imagen automatico*/
}
#servicios .bloque-servicio .bloque-contenido-servicio 
{
    padding: 15px;/**/
    text-align: center;/*alinear textos al centro*/
   
}
#servicios .bloque-servicio .bloque-contenido-servicio h3
{
margin-top: 0;
font-size: 25px;
}
.boton.boton-blanco{/*botones en los servicios*/
    background-color:grey;/*color del boton gris*/
    color:peru;/*color letra del boton azul*/
    font-size: 20px;/*tamaño*/
    font-weight: bold;/*negrita*/
    border: 1px solid red;/*borde del boton y color*/
    padding: 10px;
   
}
/*QUE LA IMAGEN SIEMPRE SEA UN RECTANGULO*/
.cuadrado-perfecto
{
width:100%;
padding-bottom: 100%;
position:relative;/*quiero que ocupe una posicion en el espacio*/
}
.cuadrado-perfecto img/*imagen que va a estar dentro de cuadrado perfecto*/
{
    width: 100%;/**/
    height: 100%;/**/
    object-fit: cover;/*va a cubrir todo el espacio que tenga con la imagen*/
    object-position: center;/*vamos a centrarla*/
    position: absolute;/*si un elemento es absoluto, padre tiene que ser relativo*/
    top: 0;
    left: 0;
    
}

#servicios .bloque-servicio .bloque-img-servicio.cuadrado-perfecto
{
    padding-bottom: 56.25;
    padding-left: 0%;
    padding-right: 0;
}

#galeria
{

}
#galeria h4
{
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
    position: absolute;
    top: 40%;
    color:white;
    font-size: 18px;
    width: 100%;
}
#galeria img
{
    filter: grayscale(1);/*poner en griseslas imagenes de galeria*/
}
#galeria .cuadrado-perfecto:hover img/*hover activar accion de pasar mause por encima imagen*/
{
    filter: grayscale(0);/*cambia de gris a img a color*/
}
#galeria .cuadrado-perfecto:hover h4
{
display: none;/*se le quita cualquier tipo de comportamiento*/
}

/*///////////GALERIA/////////////*/
.container-fluid/*CLASE CONTAINER-FLUID, queremos que esos cuadrados esten a ras de la pantalla*/
{
width: 100%; /*necesitamos que avarque todo el ancho de la pantalla*/
padding-right: 15px;
padding-left: 15px;
}

/*///////////CONTACTENOS/////////////*/
#contactenos
{
    position: relative;
}
#contactenos iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(0);
}
          /*estilar formulario de contactenos... CREAR UNA CLASE EMPUJAR 50 EN HTML*/
.columna-50
     {
        width: 40%;
     }
.empujar-50
     {
        margin-left: 60%;
     }
.empujar-0
     {
        margin-left: 0;
     }
#contactenos form
{
    padding: 60px;
    background: linear-gradient(0.25turn,#056b2c,#915701, #f5aa0a);
}
#contactenos form .form-block 
{
max-width: 100%;
margin-bottom: 15px;

}
#contactenos form .form-block .form-control
{
display: block;/**/
height: 40px;/*alto*/
font-size: 16px;/*tamaño de la fuente. letra*/
border: 1px solid gray;/*borde solido y color gris*/
width: 100%;/*ancho que ocupe todo el form control*/
padding: 5px 10px;/*margen hacia adentro del contenido del formcontrol*/
}
#contactenos form .form-block textarea
{
display: block;
height: 100px;
font-size: 16px;
border: 1px solid gray;
width: 100%;
padding: 5px 10px;
}

.boton.boton-negro
{
    background-color: black;
    color:white;
    font-size: 20px;
    font-weight: bold;
}
.boton.boton-negro:hover
{
    background-color: white;
    color:black;
    font-size: 20px;
    font-weight: bold;
}

/*///////////FOOTER/////////////*/
footer 
{
   
}
footer.seccion
{
    background-image: linear-gradient(-60deg,#f5aa0a 20%,#056b2c 0%,#915701 100% );
    color: blanchedalmond;
    padding-bottom: 0;
}

footer .barra-footer
{
    background-image: linear-gradient(-30deg, #915701 20%,#056b2c 100%,#f5aa0a 40% );
   /* background-color:red;*/
    text-align: center;
    padding-right: 15px;/*derecho*/
    padding-left: 15px;/*izquierdo*/
    padding-top: 10px;/*alto*/
    padding-bottom: 10px;/* abajo*/
}
.columna-25
{
    width: 20%;
}
.columna-26
{
    width: 40%;
}
footer ul
{
    padding-left: 0;
    list-style: none;
    margin: 0;
}
footer .logo-footer
{
    width: 100%;
}
footer p
{
    color: white;
    margin-bottom: 30px;
    text-align: center;
}
footer a
{
    color: white;
}
footer ul li
{
    margin-bottom: 10px;
}
footer .redes
{
    font-size: 30px;
    display: flex;
    /*justify-content: space-between;*//*es para dar espacios */
}
footer .redes a/*darle un pequeño margen a los costados*/
{
    margin: 0 7.5px;
}
/*//////////////////////////////////////CELULARES////////////////////////////////////////////////////////////*/

@media(max-width: 767px){/**/
.container
{
    width: 100%;/*ancho del container para dispositivos moviles*/
}
body{
    font-size: 15px;
}
/*//////////////////////////////////MOBILES EL HEADER//////////////////////////*/
header{
    width: 100%;/*ancho para que la imagen cubra todo el espacio del dispositivo*/
    object-fit: cover;/*para que cubra todo*/
    object-position: center;/*encentrar*/
}
/*primero voy a ocultar el nav, solo en moviles*/
header .container nav
{/*menu apenas desaparesca el nav*/
    position: fixed;/**posicion fija*/
    width: 100%;/*ancho*/
    height: 100%;/*alto*/
    background-color: rgb(10, 179, 66);/*color*/
    padding-top: 80px;/*margen adentro nav*/
    padding-bottom: 80px;
    padding-right: 5px;
    padding-left: 10px;
    top: 0;
    left: 0;
    display:flex;
    /*por defecto esta en fila hay que pasarlo a comumna*/
    flex-direction: column;/*EN COLUMNA PARA QUE ESTEN LOS ELEMENTOS DEL NAV UNO ENCIMA DEL OTRO*/
    /*trasladar afuera de la parte visible*/
    transition: all 0.4s ease-in;/*trasladar hacia afuera de la parte visible ... ojo estado a en style, estdo b en jabascrip*/
    transform: translateX(100%);/*recorre 100 a la x y desaparece*/
}
header .container nav.open{
    transform: translateX(0%);/*va a volver a mover adentro de la pantalla, mosrar el menu*/ 
}
header .container nav a
{/*estilo a las letras del nav*/
    font-size: 30px;/*tamaño de la letra*/
    margin:15px 0;/*margenes arriba y abajo*/
}
header .container .hamb{/*hamburgesa para poner el munu*/
    display: block;/**/
    font-size: 40px;/*tamaño hamb*/
    color:brown/*color de la hamb*/
}
/*//////////////////////////MOBILES INICIO/////////////////////////////////*/
#inicio
{
    height: 100vh;/*imagen va a tener un alto del dispositivo*/
}
#inicio img
{
    width: 100%;/*ancho para que la imagen cubra todo el espacio del dispositivo*/
    object-fit: cover;/*para que cubra todo*/
    object-position: center;/*encentrar*/
}
#inicio .bloque-inicio/*aqui esta la posicion del texto del bloque inicio*/
{
    width: 100%;/*ancho para que la imagen cubra todo el espacio del dispositivo*/
    object-fit: cover;/*para que cubra todo*/
    object-position: center;/*encentrar*/
    /* background-color: black;      /*color del bloque*/
    position: absolute;/*no va a ocupar un espacio, posiciona encima de la imagen*/
    top: 10%;/*posicion de arriba */
    left: 0%;/*posicion lado izq*/
    /*width: 500px;/*ancho del bloque*/
    text-align: center;/*alinear texto a la izq*/
    margin-left: -100;/*mover elemento para atras, margin trabaja en px % y negativos*/
    background: rgba(67,121,78,0.70);
}
/*/////////////////////////////SERVICIOS Y GALERIA MOBILIE//////////////////////////////*/
.columana-mobile-100{
width: 100%;
}
.columana-mobile-50{
    width: 50%;
    }
    #servicios .bloque-servicio {/*OJO LAS DEMAS PROPIEDADES LA COGE DEL DISEÑO WEB POR ESO LAS COMENTO*/
       /* border: 2px solid grey;
        height: 600px;*/
        margin-bottom: 15px;/*en mobile le ponemos un margen para que no queden juntos los servicios*/
    }
/*CONTACTENOS*/
    #contactenos{
    padding: 0;
    }
  
    #contactenos iframe{/*iframe de google*/
        position: relative;/*ocupe un espacio en moviles*/
        height: 50vh; /*ocupe la mitad del dispositivo celular*/
    }
    .columana-mobile-100{/*para compo enviar y para footer contenido*/
        width: 100%;
        }
    .columna-empujar-mobile-0{
        margin-left: 0;
    }
    .sinpading-mobile{/*pading este al 100% sin espacion OJO PARA CONTACTENOSES*/
        padding: 0;
    }
    form .boton.boton.boton-negro{
        width: 100%;
    }
    footer{
        text-align: center;
    }
    footer .logo-footer{
        width: 50%;
    }
    footer .redes{
        justify-content: center;
    }
}
/**/



/*
._3omZ_ {
    border-radius: var(--rd,0);
    font: var(--fnt,var(--font_8));
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 6px 7px;
    position: relative;
    min-width: 0;
    color: rgb(var(--txt,var(--color_18)));

        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        vertical-align: baseline;
        background: transparent;
}*/