@charset "utf-8";


@import url("webfonts/Qilka_Bold/stylesheet.css");
@import url("webfonts/LTSaeada_Bold/stylesheet.css");


body {
	background-image: url(images/background/bg-general.jpg);
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

}

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}

/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	y Golden Grid System de Joni Korpi
	http://goldengridsystem.com/
*/

/* Diseño móvil: 480 px e inferior. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	background-image: 
}
#LayoutDiv1 {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
header {
	clear: both;
	width: 80%;
	display: block;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
}
#head1 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#head2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#head3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
nav {
	clear: both;
	width: 100%;
	display: block;
	margin-top: 60px;
}
#slider {
	clear: both;
	width: 100%;
	display: block;
	text-align: center;
	padding-top: 100px;
	height: 340px;
	background-image: url(images/bg/bg-mobile.png);
	background-repeat: no-repeat;
	background-position: center top;
}

#slider-mobil {
	clear: both;
	width: 100%;
	display: block;
	margin-top: 50px;
}
main {
	clear: both;
	width: 98%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
#interface {
	clear: both;
	width: 95%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
article {
	clear: both;
	width: 95%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
aside {
	clear: both;
	width: 95%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	margin-bottom: 10px;
}
#personaje {
	width: 30%;
	/* [disabled]height: 250px; */
	margin-left: auto;
	margin-right: auto;
	clear: none;
	display: block;
	position: fixed;
	right: 12px;
	top: 600px;
	display: none;
}
#bg-sky {
	clear: both;
	width: 98%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}


#sider {
	clear: both;
	width: 98%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

#side1 {
	clear: both;
	width: 95%;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
#side2 {
	clear: both;
	width: 90%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
#xider {
	clear: both;
	width: 98%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

#xider1 {
	clear: both;
	width: 95%;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
#xider2 {
	clear: both;
	width: 90%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
#contador {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	margin-right: auto;
}
#contador-1 {
	clear: none;
	/* [disabled]margin-left: auto; */
	width: 46%;
	display: block;
	text-align: center;
	height: 320px;
	/* [disabled]margin-right: auto; */
	float: left;
}
#contador-2 {
	clear: none;
	width: 48%;
	display: block;
	text-align: center;
	height: 320px;
	margin-left: 5%;
	float: left;
	margin-top: auto;
}
#contador-3 {
	clear: none;
	width: 46%;
	display: block;
	text-align: center;
	height: 320px;
	/* [disabled]margin-right: auto; */
	/* [disabled]margin-left: auto; */
	float: left;
}
#contador-4 {
	clear: none;
	width: 48%;
	display: block;
	text-align: center;
	height: 320px;
	/* [disabled]margin-right: auto; */
	margin-left: 5%;
	float: left;
}
#bg-visual {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	margin-right: auto;
}
#visual {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	margin-right: auto;
}
#vis1 {
	clear: none;
	margin-left: auto;
	width: 70%;
	display: block;
	text-align: center;
	height: 270px;
	margin-right: auto;
}
#vis2 {
	clear: none;
	width: 70%;
	display: block;
	text-align: center;
	height: 270px;
	margin-right: auto;
	margin-left: auto;
}
#vis3 {
	clear: none;
	width: 70%;
	display: block;
	text-align: center;
	height: 270px;
	margin-right: auto;
	margin-left: auto;
}
#vis4 {
	clear: none;
	width: 70%;
	display: block;
	text-align: center;
	height: 270px;
	margin-right: auto;
	margin-left: auto;
}
#vixual {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	height: 1100px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #666;
	margin-right: auto;
}
#vix1 {
	clear: none;
	margin-left: auto;
	width: 70%;
	display: block;
	text-align: center;
	height: 270px;
	margin-right: auto;
}
#vix2 {
	clear: none;
	width: 70%;
	display: block;
	text-align: center;
	height: 270px;
	margin-right: auto;
	margin-left: auto;
}
#vix3 {
	clear: none;
	width: 70%;
	display: block;
	text-align: center;
	height: 270px;
	margin-right: auto;
	margin-left: auto;
}
#vix4 {
	clear: none;
	width: 70%;
	display: block;
	text-align: center;
	height: 270px;
	margin-right: auto;
	margin-left: auto;
}
#recycle {
	clear: both;
	width: 95%;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
#recycle1 {
	clear: none;
	width: 100%;
	display: block;
}
#recycle2 {
	clear: none;
	width: 100%;
	display: block;
	margin-top: 50px;
}
#vizual {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #666;
	margin-right: auto;
}
#viz1 {
	clear: none;
	width: 46%;
	display: block;
	text-align: center;
	height: 490px;
	float: left;
}
#viz2 {
	clear: none;
	width: 48%;
	display: block;
	text-align: center;
	height: 490px;
	float: left;
	margin-left: 5%;
}
#viz4 {
	clear: none;
	width: 70%;
	display: block;
	text-align: center;
	height: 380px;
	margin-right: auto;
	margin-left: auto;
}
#viz3 {
	clear: none;
	width: 96%;
	display: block;
	text-align: center;
	height: 440px;
	float: left;
}
.text-interface {
	font-family: "Qilka Bold";
	font-size: 25px;
	font-weight: bold;
	background: linear-gradient(90deg, #419421, #8FBF00, #419421);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 2px white;
	line-height: 1.88; /* Aumenta ligeramente el espacio entre líneas */
	padding-top: 5px;  /* Da espacio arriba para que el borde no se corte */
	padding-bottom: 15px;
	margin-top: 0;
	margin-bottom: 5;
}
.text-intersub  {
	font-family: "Qilka Bold";
	font-size: 14px;
	color: #FFFFFF;
	/* [disabled]margin-bottom: -10px; */
	font-weight: bolder;
	line-height: 25px;

}
.text-principal {
    font-family: "Qilka Bold", sans-serif; /* Agregué fallback */
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2; /* Mejor usar valores relativos para móviles */
    
    /* Gradiente */
    background: linear-gradient(90deg, #419421, #8FBF00, #419421);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Más compatible que text-fill-color solo */
    -webkit-text-fill-color: transparent;

    /* La Solución al Borde: Usar drop-shadow en lugar de stroke */
    /* El stroke suele romper el clip del gradiente en móviles */
    filter: drop-shadow(0.5px 0.5px 0px white) 
            drop-shadow(-0.5px -0.5px 0px white);
}
.text-subtitulos {
	font-family: "Qilka Bold";
	font-size: 20px;
	color: #F2A922;
	line-height: 5px;
}
.text-information {
	color: #8FBF00;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 18px;
}

.text-presubtitulos {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #7EA800;
}
.text-contenidos {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	color: #666;
	line-height: 26px;
	text-align: justify;
}
.text-contenidos2 {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #666;
	font-style: normal;
	line-height: 31px;
}
 
.text-recycle {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	font-style: normal;
	color: #8FBF00;
}
.text-visual {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	color: #666;
	line-height: 26px;
	text-align: left;
}
.contenido {
	font-size: 16px;
	color: #FFF;
	font-family: Tahoma, Geneva, sans-serif;
	background-color: #49A400;
	height: 43px;
	width: 90%;
	font-weight: bold;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
.white{
	font-size: 0px;
	line-height: 0px;
	color: #FFF;
	display: none;
	}	
.size {
	width: 90%;
	height: 50px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #49A400;
	border-right-color: #49A400;
	border-bottom-color: #49A400;
	border-left-color: #49A400;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
.size2 {
	height: 200px;
	width: 89%;
	border: 1px solid #7EA800;
}
.titulos {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #FFF;
}

.consulta_box {
	height: 290px;
}
.contactanos {
	color: #FFF;
	font-weight: bold;
}	

.contenedor {
	height: 114px;
	width: 100%;
	float:left;
	
}

.contenedor img {
	position: absolute;
	transition: opacity 0.5s ease-in-out;
	
}

.contenedor img.top:hover {
  opacity: 0;
}
table {
	width:100%
}

table, th, td {
	width:100%
}

#recognition {
	clear: both;
	width: 100%;
	display: block;
	text-align: center;
}

#partners {
	clear: both;
	width: 100%;
	display: block;
	text-align: center;
}
footer {
	clear: both;
	width: 100%;
	display: block;
	background-image: url(navidad/images/background/footer-smartphone.png);
}
#footer-central {
	clear: none;
	width: 100%;
	display: block;
	/* [disabled]margin-top: 30px; */
	/* [disabled]height: 650px; */
}
#foot1{
	clear: none;
	width: 90%;
	display: block;
	height: 330px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
 #foot2
 {
	clear: none;
	width: 90%;
	display: block;
	height: 330px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	font-style: normal;
}
  #foot3 {
	clear: none;
	width: 90%;
	display: block;
	height: 330px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#map{
	clear: both;
	/* [disabled]float: left; */
	width: 100%;
	display: block;
	text-align: center;
	height: 500px;
}
.mapax {
	clear: both;
	margin-left: auto;
	width: 99%;
	display: block;
	margin-right: auto;
	height: 400px;
	border: 4px solid #8FBF00;
	border-radius:50px;
}
#container {
	clear: both;
	width: 100%;
	display: block;
}
#phone {
	clear: none;
	width: 30%;
	display: none;
	height: 80px;
	margin-right: auto;
	margin-left: auto;
	border-radius: 200px 200px 200px 200px;
	background-attachment: fixed;
	text-align: center;
	position: fixed;
	z-index: 1233;
	top: 470px;
}
#whatsapp {
	clear: both;
	width: 90%;
	display: none;
	margin-right: auto;
	margin-left: auto;
	margin-top: 80px;
	text-align: center;
	margin-bottom: 60px;
}
#our-video {
	clear: none;
	width: 80%;
	display: none;
}
section {
	clear: both;
	width: 98%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#social-media {
	clear: both;
	width: 95%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
.text-white {
	color: #fff;
	font-size: 0px;
}

.contador-container {
    flex: 1;
    min-width: 200px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Estilo para las imágenes/iconos de reciclaje */
.contador-container img {
    width: 120px; /* Ajusta según el tamaño de tu imagen */
    height: auto;
    margin-bottom: 15px;
}

/* El número y el prefijo "+" en color dorado */
.prefijo, .contador-animado {
	color: #F2A922; /* El dorado que estás usando en el HR */
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
}

.prefijo {
    font-size: 45px; /* Un poco más pequeño que el número */
    margin-right: -5px;
}

/* Texto descriptivo inferior */
.etiqueta {
	color: #666;
	font-size: 16px;
	margin-top: 10px;
	font-weight: 500;
	
}
/* Barra de progreso */	
.contenedor-progreso {
        max-width: 600px;
        margin: 20px auto;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
.barra-item {
     margin-bottom: 25px;
    }
.barra-info {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-weight: normal;
	font-size: 15px;
	color: #333;
    }
.barra-fondo {
     background-color: #eee; /* El color gris del fondo */
    height: 18px;
    border-radius: 10px;
    width: 100%;
   overflow: hidden;
    position: relative;
    }
.barra-relleno {
    height: 100%;
    background-color: #F2A922; /* El amarillo/dorado Emaús */
    width: 0%; /* EMPIEZA VACÍO */
    border-radius: 20px;
      /* La transición debe ser sobre el width */
     transition: width 1.5s ease-out; 
    }

/* Diseño tableta: de 481 px a 1023 px. Hereda estilos de: Diseño móvil. */

@media (min-width: 481px) and (max-width: 1023px)  {
.gridContainer {
	width: 100%;
	/* [disabled]background-image: url(images/background/wallpaper-table.png); */
}
#LayoutDiv1 {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
header {
	clear: both;
	width: 50%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	background-color: #FFF;
}
#head1 {
	clear: none;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
    }
#head2 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
    }
#head3 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
    }
nav {
	clear: both;
	width: 100%;
	display: block;
 
}
#slider {
	clear: none;
	width: 100%;
	display: block;
	text-align: center;
	background-image: url(images/bg/bg-tablet.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 400px;
	padding-top: 90px;
}
#slider-mobil {
	clear: none;
	width: 100%;
	display: none;
}	
#personaje {
	clear: none;
	float: left;
	margin-right: 0;
	width: 150px;
	display: block;
	position: fixed;
	z-index: 100;
	margin-top: -230px;
	display: none;
	} 
main {
	clear: both;
	width: 100%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]height: 750px; */
}
article {
	clear: both;
	width: 95%;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
aside {
	clear: both;
	width: 86%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
#interface {
	clear: both;
	width: 100%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]height: 750px; */
}
#xider {
	clear: both;
	width: 100%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
#xider1 {
	clear: both;
	width: 95%;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
#xider2 {
	clear: both;
	width: 86%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
#bg-sky {
	clear: both;
	width: 100%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}	
#sider {
	clear: both;
	width: 100%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
#side1 {
	clear: both;
	width: 95%;
	display: block;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
#side2 {
	clear: both;
	width: 86%;
	display: block;
	margin-right: auto;
	margin-left: auto;
}
section {
	clear: both;
	width: 96%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}	
#soial-media {
	clear: both;
	width: 98%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}	
#contador {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	height: 750px;
	margin-right: auto;
	margin-top: 80px;
}
#contador-1 {
	clear: none;
	float: left;
	margin-left: 5%;
	width: 45%;
	display: block;
	text-align: center;
	height: 20px;
}
#contador-2 {
	clear: none;
	margin-left: 5%;
	width: 45%;
	display: block;
	float: left;
	text-align: center;
	height: 320px;
}
#contador-3 {
	clear: none;
	float: left;
	margin-left: 2%;
	width: 45%;
	display: block;
	text-align: center;
}
#contador-4 {
	clear: none;
	float: left;
	margin-left: 5%;
	width: 45%;
	display: block;
	text-align: center;
}	
#bg-visual {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	height: 600px;
	margin-right: auto;
}
#visual {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	height: 600px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #666;
	margin-right: auto;
}
#vis1 {
	clear: none;
	float: left;
	margin-left: 5%;
	width: 45%;
	display: block;
	text-align: center;
	height: 300px;
}
#vis2 {
	clear: none;
	margin-left: 5%;
	width: 45%;
	display: block;
	float: left;
	text-align: center;
	height: 300px;
}
#vis3 {
	clear: none;
	float: left;
	margin-left: 5%;
	width: 45%;
	display: block;
	text-align: center;
}
#vis4 {
	clear: none;
	float: left;
	margin-left: 5%;
	width: 45%;
	display: block;
	text-align: center;
}
#vixual {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	height: 600px;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #666;
	margin-right: auto;
}
#vix1 {
	clear: none;
	float: left;
	margin-left: 5%;
	width: 45%;
	display: block;
	text-align: center;
	height: 300px;
}
#vix2 {
	clear: none;
	margin-left: 5%;
	width: 45%;
	display: block;
	float: left;
	text-align: center;
	height: 300px;
}
#vix3 {
	clear: none;
	float: left;
	margin-left: 5%;
	width: 45%;
	display: block;
	text-align: center;
}
#vix4 {
	clear: none;
	float: left;
	margin-left: 5%;
	width: 45%;
	display: block;
	text-align: center;
}
#vizual {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	/* [disabled]height: 660px; */
	color: #666;
	margin-right: auto;
}
#viz1 {
	clear: none;
	float: left;
	margin-left: 10%;
	width: 35%;
	display: block;
	text-align: center;
	height: 500px;
}
#viz2 {
	clear: none;
	margin-left: 18%;
	width: 35%;
	display: block;
	float: left;
	text-align: center;
	height: 500px;
}
#viz4 {
	clear: none;
	float: left;
	margin-left: 10%;
	width: 35%;
	display: block;
	text-align: center;
	height: 340px;
}
#viz3 {
	clear: none;
	float: left;
	margin-left: 10%;
	width: 80%;
	display: block;
	text-align: center;
	height: 660px;
}

#recycle {
	clear: both;
	width: 100%;
	display: block;
}
#recycle1 {
	clear: none;
	width: 100%;
	display: block;
}
#recycle2 {
	clear: none;
	width: 100%;
	display: block;
	margin-top: 50px;
}
.text-visual {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	color: #666;
	line-height: 26px;
	text-align: left;
}
.text-interface {
	font-family: "Qilka Bold";
	font-size: 40px;
	font-weight: bold;
	background: linear-gradient(90deg, #419421, #8FBF00, #419421);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 2px white;
	line-height: 1.88; /* Aumenta ligeramente el espacio entre líneas */
	padding-top: 5px;  /* Da espacio arriba para que el borde no se corte */
	padding-bottom: 15px;
	margin-top: 0;
	margin-bottom: 5;
}
.text-intersub  {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 22px;
	color: #FFFFFF;
	/* [disabled]margin-bottom: -10px; */
}
.text-principal {
	font-family: "Qilka Bold";
	font-size: 26px;
	font-weight: bold;
	background: linear-gradient(90deg, #419421, #8FBF00, #419421);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0,1px white;
	line-height: 0px;
}
.text-information {
	color: #8FBF00;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 18px;
}

.text-subtitulos {
	font-family: "Qilka Bold";
	font-size: 30px;
	color: #F2A922;
	line-height: 5px;
}
.text-presubtitulos {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	color: #7EA800;
}
.text-contenidos {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	color: #666;
}
.text-contenidos2 {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #666;
}
.text-recycle {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	font-style: normal;
	color: #8FBF00;
}
.text-white {
	color: #fff;
	font-size: 0px;
}

.white{
	font-size: 0px;
	line-height: 0px;
	color: #FFF;
	display: none;
	}	
.contenido {
	font-size: 16px;
	color: #FFF;
	font-family: Tahoma, Geneva, sans-serif;
	background-color: #49A400;
	height: 43px;
	width: 90%;
	font-weight: bold;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
.size {
	width: 90%;
	height: 50px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #49A400;
	border-right-color: #49A400;
	border-bottom-color: #49A400;
	border-left-color: #49A400;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
}
.size2 {
	height: 200px;
	width: 89%;
	border: 1px solid #7EA800;
}
.titulos {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #FFF;
}

.consulta_box {
	height: 290px;
}
.contactanos {
	color: #FFF;
	font-weight: bold;
}	

.contenedor {
	height: 114px;
	width: 100%;
	float:left;
	
}

.contenedor img {
	position: absolute;
	transition: opacity 0.5s ease-in-out;
	
}

.contenedor img.top:hover {
  opacity: 0;
}
table {
	width:100%
}

table, th, td {
	width:100%
}

#recognition {
	clear: both;
	width: 90%;
	display: block;
}

#partners {
	clear: both;
	width: 100%;
	display: block;
}
footer {
	clear: both;
	margin-left: 0;
	width: 100%;
	display: block;
	/* [disabled]background-image: url(navidad/images/background/footer-tablet.png); */
	/* [disabled]height: 600px; */
}
#footer-central {
	clear: none;
	/* [disabled]float: left; */
	width: 90%;
	display: block;
	/* [disabled]margin-top: 30px; */
	margin-right: auto;
	margin-left: auto;
	/* [disabled]height: 700px; */
}
#foot1 {
	clear: none;
	margin-left: auto;
	width: 100%;
	display: block;
	margin-right: auto;
	height: 320px;
	text-align: center;
}
#foot2 {
	clear: none;
	margin-left: auto;
	width: 100%;
	display: block;
	margin-right: auto;
	text-align: center;
	height: 320px;
}
#foot3 {
	clear: none;
	margin-left: auto;
	width: 100%;
	display: block;
	height: 320px;
	margin-right: auto;
	text-align: center;
}
 #map {
	clear: both;
	width: 90%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	height: 500px;
}
.mapax {
	clear: both;
	margin-left: auto;
	width: 95%;
	display: block;
	margin-right: auto;
	height: 350px;
	border: 4px solid #8FBF00;
	border-radius:50px;
}
#container {
	clear: both;
	width: 100%;
	display: block;
}
a:visited {
	text-decoration: none;
	color: #333333;
}
a:hover {
	text-decoration: none;
	color: #333;
}
a:active {
	text-decoration: none;
	color: #333;
}
a:link {
	color: #333;
	text-decoration: none;
}
#phone {
	clear: none;
	width: 100%;
	display: none;
	height: 34px;
    }
#whatsapp {
	clear: none;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
    }
#our-video {
	clear: none;
	width: 85%;
	display: none;
	margin-right: auto;
	margin-left: auto;
}	



.contador-container {
    flex: 1;
    min-width: 200px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Estilo para las imágenes/iconos de reciclaje */
.contador-container img {
    width: 120px; /* Ajusta según el tamaño de tu imagen */
    height: auto;
    margin-bottom: 15px;
}

/* El número y el prefijo "+" en color dorado */
.prefijo, .contador-animado {
	color: #F2A922; /* El dorado que estás usando en el HR */
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
}

.prefijo {
    font-size: 45px; /* Un poco más pequeño que el número */
    margin-right: -5px;
}

/* Texto descriptivo inferior */
.etiqueta {
    color: #666;
    font-size: 20px;
    margin-top: 10px;
    font-weight: 500;
	
}
/* Barra de progreso */	
.contenedor-progreso {
        max-width: 600px;
        margin: 20px auto;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
.barra-item {
     margin-bottom: 25px;
    }
.barra-info {
     display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 17px;
    color: #333;
    }
.barra-fondo {
     background-color: #eee; /* El color gris del fondo */
    height: 18px;
    border-radius: 10px;
    width: 100%;
   overflow: hidden;
    position: relative;
    }
.barra-relleno {
    height: 100%;
    background-color: #F2A922; /* El amarillo/dorado Emaús */
    width: 0%; /* EMPIEZA VACÍO */
    border-radius: 20px;
      /* La transición debe ser sobre el width */
     transition: width 1.5s ease-out; 
    }

}

/* Diseño escritorio: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */
@media (min-width: 1024px) {
.gridContainer {
	width: 100%;
	margin: auto;
	/* [disabled]background-image: url(images/background/wallpaper3.png); */
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	background-size: 100%;
}

header {
	clear: both;
	width: 100%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]height: 60px; */
	background-color: #FFF;
	max-width: 1950px;
}
#head1 {
	clear: none;
	float: left;
	width: 25%;
	display: block;
	height: 90px;
	margin-left: 9%;
	text-align: center;
}	
#head2 {
	clear: none;
	float: left;
	margin-left: 4%;
	width: 25%;
	display: block;
	height: 90px;
	text-align: center;
}	
#head3 {
	clear: none;
	float: left;
	margin-left: 3%;
	width: 25%;
	display: block;
	height: 90px;
	text-align: center;
}	
header nav {
	/* [disabled]background: #2AACFF; */
	margin-bottom: 10px;
}
 
header nav ul {
	list-style: none;
	overflow: hidden;
}
 
header nav ul li {
	float: left;
}
 
header nav ul li a {
	display: block;
	padding: 20px;
	color: #fff;
	text-decoration: none;
}
 
header nav ul li a:hover {
	background: #2AACFF;
}
nav {
	clear: both;
	width: 100%;
	display: block;
	height: 35px;
	z-index: 90;
	padding-right: 0px;
	padding-left: 0px;
	text-align: center;
	padding-top: 0px;
	margin-top: 2px;
	font-size: 15px;
	}
.menu-fixed {
	position: fixed;
	z-index: 1000;
	top: -108px;
	width: 100%;
	box-shadow: 0px 4px 3px rgba(0,0,0,.5);
}
#personaje{
	width: 260px;
	/* [disabled]height: 300px; */
	clear: left;
	display: none;
	float: left;
	position: fixed;
	z-index: 900;
	right: 12px;
	top: 720px;
} 
#slider {
	clear: both;
	width: 100%;
	display: block;
	height: 760px;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 150px;
	background-image: none;
 }
/* Fondo página inicio */
#slider.fondo-reciclaje-0{
	background-image: url(images/bg/bg-reciclaje-0.png);
}

/* Fondo servicios */
#slider.fondo-reciclaje-1{
    background-image:url(images/bg/bg-reciclaje-1.png);
}
/* Fondo reciclaje */
#slider.fondo-reciclaje-2{
    background-image:url(images/bg/bg-reciclaje-2.png);
}

/* Fondo contacto */
#slider.fondo-reciclaje-3{
    background-image:url(images/bg/bg-reciclaje-3.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-4{
    background-image:url(images/bg/bg-reciclaje-4.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-5{
    background-image:url(images/bg/bg-reciclaje-5.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-6{
    background-image:url(images/bg/bg-reciclaje-6.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-7{
    background-image:url(images/bg/bg-reciclaje-7.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-8{
    background-image:url(images/bg/bg-reciclaje-8.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-9{
    background-image:url(images/bg/bg-reciclaje-9.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-10{
    background-image:url(images/bg/bg-reciclaje-10.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-11{
    background-image:url(images/bg/bg-reciclaje-11.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-12{
    background-image:url(images/bg/bg-reciclaje-12.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-13{
    background-image:url(images/bg/bg-reciclaje-13.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-14{
    background-image:url(images/bg/bg-reciclaje-14.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-15{
    background-image:url(images/bg/bg-reciclaje-15.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-16{
    background-image:url(images/bg/bg-reciclaje-16.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-17{
    background-image:url(images/bg/bg-reciclaje-17.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-18{
    background-image:url(images/bg/bg-reciclaje-18.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-19{
    background-image:url(images/bg/bg-reciclaje-19.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-21{
    background-image:url(images/bg/bg-reciclaje-21.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-22{
    background-image:url(images/bg/bg-reciclaje-22.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-23{
    background-image:url(images/bg/bg-reciclaje-23.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-24{
    background-image:url(images/bg/bg-reciclaje-24.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-25{
    background-image:url(images/bg/bg-reciclaje-25.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-26{
    background-image:url(images/bg/bg-reciclaje-26.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-27{
    background-image:url(images/bg/bg-reciclaje-27.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-30{
    background-image:url(images/bg/bg-reciclaje-30.png);
}
/* Fondo contacto */
#slider.fondo-reciclaje-31{
    background-image:url(images/bg/bg-reciclaje-31.png);
}
/* Fondo nosotros*/
#slider.fondo-nosotros-1{
    background-image:url(images/bg/bg-nosotros-1.png);
}
/* Fondo nosotros*/
#slider.fondo-nosotros-2{
    background-image:url(images/bg/bg-nosotros-2.png);
}
/* Fondo nosotros*/
#slider.fondo-nosotros-3{
    background-image:url(images/bg/bg-nosotros-3.png);
}
/* Fondo nosotros*/
#slider.fondo-nosotros-4{
    background-image:url(images/bg/bg-nosotros-4.png);
}
/* Fondo nosotros*/
#slider.fondo-nosotros-5{
    background-image:url(images/bg/bg-nosotros-5.png);
}

#slider-mobil {
	clear: none;
	width: 0%;
	display: none;
}
main {
	clear: both;
	width: 100%;
	display: block;
	height: 750px;
	max-width: 1500px;
	/* [disabled]text-align: center; */
	margin-right: auto;
	margin-left: auto;
}
aside {
	clear: none;
	width: 45%;
	display: block;
	float: left;
	text-align: center;
	height: 630px;
}
article {
	clear: none;
	float: right;
	width: 51%;
	display: block;
	text-align: left;
	height: 640px;
	margin-right: 20px;
}
#interface {
	clear: both;
	width: 100%;
	display: block;
	height: 800px;
	max-width: 1400px;
	/* [disabled]text-align: center; */
	margin-right: auto;
	margin-left: auto;
	margin-top: 90px;
}
#xider {
	clear: both;
	margin-left: auto;
	max-width: 1400px;
	display: block;
	margin-right: auto;
	height: 800px;
	width: 100%;
	/* [disabled]margin-top: 60px; */
}
#xider1 {
	clear: none;
	width: 50%;
	display: block;
	float: left;
	text-align: left;
	height: 700px;
}
#xider2 {
	clear: none;
	float: right;
	width: 45%;
	display: block;
	height: 700px;
	text-align: left;
}
#bg-sky {
	clear: both;
	margin-left: auto;
	max-width: 1950px;
	display: block;
	margin-right: auto;
	height: 700px;
	width: 100%;

}
#sider {
	clear: both;
	margin-left: auto;
	max-width: 1500px;
	display: block;
	margin-right: auto;
	height: 1200px;
	width: 100%;
	/* [disabled]margin-top: 60px; */
}
#side1 {
	clear: none;
	width: 50%;
	display: block;
	float: left;
	text-align: left;
	height: 1000px;
	margin-top: 50px;
}
#side2 {
	clear: none;
	float: right;
	width: 46%;
	display: block;
	height: 1100px;
	text-align: left;
}
#contador {
	clear: both;
	margin-left: auto;
	max-width: 1500px;
	width: 100%;
	margin-right: auto;
	height: 490px;
	line-height: 19px;
	background-image: url(imagenes/background/bg-visual.png);
	background-repeat: no-repeat;
	text-align: center;
}
#contador-1 {
	clear: none;
	float: left;
	width: 20%;
	display: block;
	height: 350px;
	text-align: center;
	margin-left: 5%;
}
#contador-2 {
	clear: none;
	margin-left: 4%;
	width: 20%;
	display: block;
	height: 350px;
	float: left;
	text-align: center;
}
#contador-3 {
	clear: none;
	margin-left: 4%;
	width: 20%;
	display: block;
	height: 350px;
	float: left;
	text-align: center;
}
#contador-4 {
	clear: none;
	float: left;
	width: 20%;
	display: block;
	height: 350px;
	margin-left: 5%;
	text-align: center;
}

#bg-visual {
	clear: both;
	margin-left: auto;
	max-width: 1950px;
	width: 100%;
	margin-right: auto;
	height: 900px;
	line-height: 19px;
	background-image: url(images/background/bg-visual.png);
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 140px;
	margin-bottom: 130px;
}
#visual {
	clear: both;
	margin-left: auto;
	max-width: 1500px;
	width: 100%;
	margin-right: auto;
	height: 350px;
	line-height: 19px;
	background-repeat: no-repeat;
	text-align: center;
}
#vis1 {
	clear: none;
	float: left;
	width: 20%;
	display: block;
	height: 280px;
	text-align: center;
	margin-left: 5%;
}
#vis2 {
	clear: none;
	margin-left: 4%;
	width: 20%;
	display: block;
	height: 280px;
	float: left;
	text-align: center;
}
#vis3 {
	clear: none;
	margin-left: 4%;
	width: 20%;
	display: block;
	height: 280px;
	float: left;
	text-align: center;
}
#vis4 {
	clear: none;
	float: left;
	width: 20%;
	display: block;
	height: 280px;
	margin-left: 5%;
	text-align: center;
}
#vixual {
	clear: both;
	margin-left: auto;
	max-width: 1500px;
	width: 100%;
	margin-right: auto;
	height: 350px;
	line-height: 19px;
	background-image: url(imagenes/background/bg-visual.png);
	background-repeat: no-repeat;
	text-align: center;
}
#vix1 {
	clear: none;
	float: left;
	width: 20%;
	display: block;
	height: 220px;
	text-align: center;
	margin-left: 5%;
	/* [disabled]margin-top: 122px; */
}
#vix2 {
	clear: none;
	margin-left: 4%;
	width: 20%;
	display: block;
	height: 220px;
	float: left;
	text-align: center;
}
#vix3 {
	clear: none;
	margin-left: 4%;
	width: 20%;
	display: block;
	height: 220px;
	float: left;
	text-align: center;
	/* [disabled]margin-top: 120px; */
}
#vix4 {
	clear: none;
	float: left;
	width: 20%;
	display: block;
	height: 220px;
	margin-left: 5%;
	text-align: center;
}
#vizual {
	clear: both;
	margin-left: auto;
	max-width: 1400px;
	width: 100%;
	margin-right: auto;
	height: 720px;
	line-height: 19px;
	background-image: url(imagenes/background/bg-visual.png);
	background-repeat: no-repeat;
	text-align: center;
}
#viz1 {
	clear: none;
	float: left;
	width: 18%;
	display: block;
	height: 612px;
	text-align: left;
	margin-left: 3%;
	/* [disabled]margin-top: 122px; */
	background-image: url(images/background/menu-point.png);
	padding-left: 34px;
}
#viz2 {
	clear: none;
	margin-left: 3%;
	width: 18%;
	display: block;
	height: 612px;
	float: left;
	text-align: left;
	background-image: url(images/background/menu-point.png);
	padding-left: 34px;
}
#viz3 {
	clear: none;
	float: left;
	width: 48%;
	display: block;
	height: 610px;
	margin-left: 2%;
	text-align: center;
}
#viz4 {
	clear: none;
	margin-left: 3%;
	width: 15%;
	display: block;
	height: 330px;
	float: left;
	text-align: left;
	/* [disabled]margin-top: 120px; */
}

#recognition {
	clear: both;
	width: 87%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	height: 600px;
	background-image: url(images/background/plants.png);
	background-repeat: no-repeat;
	background-position: center top;
}	

#partners {
	clear: both;
	width: 98%;
	display: block;
	height: 300px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(images/background/plants.png);
	background-repeat: no-repeat;
	background-position: center top;
	max-width: 1250px;
}

footer {
	clear: both;
	width: 100%;
	display: block;
	height: 400px;
	margin-top: 50px;
}
#footer-central {
	clear: none;
	width: 100%;
	max-width: 1350px;
	display: block;
	margin-right: auto;
	margin-left: auto;
	height: 400px;
}
#foot1 {
	clear: none;
	float: left;
	width: 30%;
	display: block;
	height: 350px;
	line-height: 24px;
	text-align: center;
}
#foot2 {
	clear: none;
	float: left;
	margin-left: 4%;
	width: 30%;
	display: block;
	height: 350px;
	line-height: 24px;
	text-align: center;
}
#foot3 {
	clear: none;
	float: left;
	margin-left: 4%;
	width: 30%;
	display: block;
	height: 350px;
	line-height: 24px;
	text-align: center;
}
section {
	clear: both;
	width: 70%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	height: 120px;
}	
#social-media {
	clear: both;
	width: 60%;
	display: block;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}	
#whatsapp {
	clear: none;
	width: 100%;
	display: none;
}	
#map {
	clear: both;
	margin-left: auto;
	max-width: 1000px;
	width: 100%;
	display: block;
	margin-right: auto;
	height: 430px;
	text-align: center;
    }
.mapax {
	clear: both;
	margin-left: auto;
	max-width: 900px;
	width: 90%;
	display: block;
	margin-right: auto;
	height: 500px;
	text-align: center;
	border: 4px solid #8FBF00;
	border-radius:50px;
    }
#our-video {
	clear: both;
	width: 90%;
	display: block;
	height: 900px;
	background-image: url(images/background/bg-our-video.png);
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	padding-top: 120px;
	max-width: 1500px;
}			
#recyclex {
	clear: both;
	width: 100%;
	display: block;
	height: 800px;
	margin-right: auto;
	margin-left: auto;
	/* [disabled]padding-top: 150px; */
	background-image: url(images/background/bg-recycle.png);
	align-items: stretch;
	gap: 20px;
}
#recycle {
	clear: both;
	width: 100%;
	display: block;
	height: 600px;
	margin-right: auto;
	margin-left: auto;
	max-width: 1500px;
	padding-top: 150px;
	align-items: stretch;
	gap: 20px;
}
#recycle1 {
	clear: none;
	width: 42%;
	display: block;
	text-align: center;
	height: 600px;
	float: left;
	margin: 0;
}
#recycle2 {
	clear: none;
	float: right;
	width: 55%;
	display: block;
	text-align: left;
	height: 600px;
	/* [disabled]margin-right: 50px; */
	/* [disabled]padding-right: 5%; */
	margin: 0;
}

#container {
	clear: both;
	width: 100%;
	display: block;
	background-image: url(img/recycle.png);
	height: 400px;
}	
.contador-container {
    flex: 1;
    min-width: 200px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Estilo para las imágenes/iconos de reciclaje */
.contador-container img {
    width: 120px; /* Ajusta según el tamaño de tu imagen */
    height: auto;
    margin-bottom: 15px;
}

/* El número y el prefijo "+" en color dorado */
.prefijo, .contador-animado {
	color: #F2A922; /* El dorado que estás usando en el HR */
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
}

.prefijo {
    font-size: 45px; /* Un poco más pequeño que el número */
    margin-right: -5px;
}

/* Texto descriptivo inferior */
.etiqueta {
    color: #666;
    font-size: 20px;
    margin-top: 10px;
    font-weight: 500;
	
}
/* Barra de progreso */	
.contenedor-progreso {
        max-width: 600px;
        margin: 20px auto;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
.barra-item {
     margin-bottom: 25px;
    }
.barra-info {
     display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 17px;
    color: #333;
    }
.barra-fondo {
     background-color: #eee; /* El color gris del fondo */
    height: 18px;
    border-radius: 10px;
    width: 100%;
   overflow: hidden;
    position: relative;
    }
.barra-relleno {
    height: 100%;
    background-color: #F2A922; /* El amarillo/dorado Emaús */
    width: 0%; /* EMPIEZA VACÍO */
    border-radius: 20px;
      /* La transición debe ser sobre el width */
     transition: width 1.5s ease-out; 
    }

.white{
	font-size: 0px;
	line-height: 0px;
	color:#FFF;
	}		


.text-interface {
	font-family: "Qilka Bold";
	font-size: 66px;
	font-weight: bold;
	background: linear-gradient(90deg, #419421, #8FBF00, #419421);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2; /* Aumenta ligeramente el espacio entre líneas */
	padding-top: 20px;  /* Da espacio arriba para que el borde no se corte */
	padding-bottom: 4px;
	margin-top: 0;
	margin-bottom: 5;
	display: inline-block;
	color: #FFF;
	-webkit-text-stroke: 2px white;
}
.text-intersub  {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 26px;
	color: #FFFFFF;
	margin-bottom: -10px;

}
.text-principal {
	font-family: "Qilka Bold";
	font-size: 37px;
	font-weight: bold;
	background: linear-gradient(90deg, #419421, #8FBF00, #419421);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0,1px white;
	line-height: 0px;
}
.text-subtitulos {
	font-family: "Qilka Bold";
	font-size: 28px;
	color: #F2A922;
	line-height: 5px;
}
.text-presubtitulos {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 15px;
	color: #8FBF00;
}
.text-information {
	color: #8FBF00;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 17px;
	font-weight: bold;
}

.text-contenidos {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	color: #333;
	text-align: justify;
	line-height: 32px;
}
.text-contenidos2 {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #FFF;
	line-height: 32px;
}
.text-footer {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	line-height: 32px;
	font-style: normal;
}
.text-recycle {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 17px;
	font-style: normal;
	color: #8FBF00;
	text-align: left;
}
.text-white {
	color: #fff;
	font-size: 0px;
}

.text-visual {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 18px;
	color: #333;
	line-height: 34px;
	text-align: left;
	-ms-transition: letter-spacing 2s;
	-o-transition: letter-spacing 2s;
}
.borderx {
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #8FBF00;
	border-right-color: #8FBF00;
	border-bottom-color: #8FBF00;
	border-left-color: #8FBF00;
	border-top-width: 7px;
	border-right-width: 7px;
	border-bottom-width: 7px;
	border-left-width: 7px;
	width: 90%;
	border-radius: 15px;
	height: 430px;
}
#phone {
	clear: none;
	width: 100%;
	display: none;
	height: 34px;
    }
.contenido {
	font-size: 16px;
	color: #FFF;
	font-family: Tahoma, Geneva, sans-serif;
	background-color: #8EBF00;
	height: 43px;
	width: 90%;
	font-weight: bold;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	-webkit-border-radius: 50px;
}	
.size {
	width: 90%;
	height: 50px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #49A400;
	border-right-color: #49A400;
	border-bottom-color: #49A400;
	border-left-color: #49A400;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}
.size2 {
	height: 250px;
	width: 90%;
	border: 1px solid #7EA800;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.titulos {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #FFF;
}

.consulta_box {
	height: 290px;
}
.contactanos {
	color: #FFF;
	font-weight: bold;
}	

.contenedor {
	height: 114px;
	width: 100%;
	float:left;
	
}

.contenedor img {
	position: absolute;
	transition: opacity 0.5s ease-in-out;
	
}

.contenedor img.top:hover {
  opacity: 0;
}
table {
	width:100%
}

table, th, td {
	width:100%
}
a:visited {
	text-decoration: none;
	color: #666666;
}
a:hover {
	text-decoration: none;
	color: #666;
}
a:active {
	text-decoration: none;
	color: #666;
}
a:link {
	color: #666;
	text-decoration: none;
}
h6{
	font-size: 0px;
	line-height: 0px;
	display: none;
	}	
}

.botom-formulario {
	color: #FFF;
	height: 38px;
	width: 200px;
	background-color: #7EA800;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 13px;
	font-weight: bold;
	margin-right: auto;
	border-radius: 20px;
	margin-left: auto;
	border:none;
}
	
.crush{
	-webkit-transform:scale(1,1);
	 -webkit-animation-name:punch;
	 -webkit-animation-duration:1s;
	 -webkit-animation-iteration-count:infinite;
	 -webkit-animation-direction:alternate;
	 -webkit-animation-timing-function:ease-in-out;
	 -webkit-animation-delay:1s;*/
	}
@-webkit-keyframes punch{
	from{ -webkit-transform:scale(1,1)}
	to{-webkit-transform:scale(1.04,1.04)}
	}	
	
.float {
  transform: translateY(0);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}	

.balloon {
  animation: balloon 6s ease-in-out infinite;
}

@keyframes balloon {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(5px, -35px); }
  50%  { transform: translate(0, -15px); }
  75%  { transform: translate(-5px, -35px); }
  100% { transform: translate(0, 0); }
}

.blur-in {
  animation: blurIn 3s ease forwards;
  opacity: 0;
}
.img-gris {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

/* Al pasar el mouse vuelve al color original */
.img-gris:hover {
    filter: grayscale(0%);
}
.shine {
  position: relative;
  overflow: hidden;
}
.shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: shineMove 3s infinite;
}

@keyframes shineMove {
  100% {
    left: 125%;
  }
}

@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}
 

/* 2. Aplicamos el efecto a tu clase gridContainer */
.gridContainer {
    /* Mantenemos tu código exacto para la animación */
    animation: animatedBackground 40s linear infinite;
    -ms-animation: animatedBackground 40s linear infinite;
    -moz-animation: animatedBackground 40s linear infinite;
    -webkit-animation: animatedBackground 40s linear infinite;

    /* REQUISITOS PARA QUE SE VEA: */
    background-repeat: repeat-x; /* Importante para que el fondo no se corte */
    background-size: cover;      /* O 'contain' dependiendo de tu imagen */
}
.tilt-smooth {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.tilt-smooth:hover {
  transform: perspective(1000px) rotateY(10deg) rotateX(4deg) scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.0);
}
 

/* Imagen con blur */
.img-blur{
    filter: blur(8px);
    transition: filter 0.8s ease;
}

/* Al pasar el mouse vuelve normal */
.img-blur:hover{
    filter: blur(0);
}