@charset "utf-8";
body{
	width:100%;
	margin:auto;
	background-color:#22C4F9;}

.cuerpo{
	width:1007px;
	margin:auto;
}
.parche{
	background-image:url(imagenes/fondo.fw.png);
	height:566px;
	width:100%;
	float:left;
	position:fixed;
	z-index:-777750;
	bottom:0px;
	border:none;
}
.cuerpo-fondo{
    background-image:url(imagenes/camino-recortado.png);
    height:566px;
    width:1007px;;
    float:left;
    position:fixed;
    z-index:-50;
    bottom:0px;
}
.menu{
	position:fixed;
	width:300px;
    height:496px;
	background-image:url(imagenes/letrero.png);
	float:left;
	z-index:-1000;
	bottom:55px;
	margin-left:15px;}
.dweb{
	float:left;
	width:300px;
	height:103px;
	margin-top:13px;
	}
.dweb a{
	float:left;
	width:300px;
	height:103px;
	margin-top:13px;
	}
.dweb a:hover{
	float: left;
	width: 300px;
	height: 103px;
	margin-top: 7px;
	background-image: url(imagenes/1.png);
	background-repeat: no-repeat;	
	}
.mipre{
	float:left;
	width:300px;
	height:95px;
	}
.mipre a{
	float:left;
	width:300px;
	height:95px;
	}
.mipre a:hover{
	float: left;
	width: 300px;
	height: 95px;
	margin-top:2px;
	background-image: url(imagenes/2.png);
	background-repeat: no-repeat;
	}
.seo{
	float:left;
	width:300px;
	height:95px;
	}
.seo a{
	float:left;
	width:300px;
	height:95px;
	}
.seo a:hover{
	float: left;
	width: 300px;
	height: 95px;
	margin-top:8px;
	margin-left:5px;
	background-image: url(imagenes/5.png);
	background-repeat: no-repeat;
	}
.marca{
	float:left;
	width:300px;
	height:95px;
	}
.marca a{
	float:left;
	width:300px;
	height:95px;
	}
.marca a:hover{
	float: left;
	width: 300px;
	height: 95px;
	background-image: url(imagenes/4.png);
	background-repeat: no-repeat;
	}
.logo{
	float: right;
	margin-right:70px;}
.right{
	float:right;}
#main img{
    width: 100%;
    margin-left:10%;
    position:fixed;
    z-index:-99;
    -webkit-animation: animacion 30s infinite alternate;
    -moz-animation: animacion 30s infinite alternate;
    -o-animation: animacion 30s infinite alternate;
    -ms-animation: animacion 30s infinite alternate;
    animation: animacion 30s infinite alternate;

}

#main2 {
    float:left;
    width:1500px;}
#main2 img{
    width: 150%;
    margin-left:-10%;
    position:fixed;
    z-index:-99;
    -webkit-animation: animacion2 60s infinite alternate;
    -moz-animation: animacion2 60s infinite alternate;
    -o-animation: animacion2 60s infinite alternate;
    -ms-animation: animacion2 60s infinite alternate;
    animation: animacion2 60s infinite alternate;

}

#main3 {
    float:left;
    width:1500px;}
#main3 img{
    width: 150%;
    margin-left:50%;
    margin-top:20%;
    position:fixed;
    z-index:-99;
    -webkit-animation: animacion3 90s infinite alternate;
    -moz-animation: animacion3 90s infinite alternate;
    -o-animation: animacion3 90s infinite alternate;
    -ms-animation: animacion3 90s infinite alternate;
    animation: animacion3 90s infinite alternate;

}

#main4 {
    float:left;
    width:1500px;}
#main4 img{
    width: 150%;
    margin-left:-10%;
    margin-top:20%;
    position:fixed;
    z-index:-99;
    -webkit-animation: animacion4 90s infinite alternate;
    -moz-animation: animacion4 90s infinite alternate;
    -o-animation: animacion4 90s infinite alternate;
    -ms-animation: animacion4 90s infinite alternate;
    animation: animacion4 90s infinite alternate;

}

	.cielo{
		float: right;
		left:0px;
		bottom:0px;
		position:fixed;}
	.clasificado {
		width:400px;
		margin-left:500px;
		height:158px;
		bottom:100px;
		position:fixed;}
	.clasificado a{
	background-image:url(imagenes/maestro-inicio.png);
		width:400px;
		margin-left:0px;
		height:158px;
		bottom:100px;
		position:fixed;}
		.clasificado a:hover{
	background-image: url(imagenes/maestro-inicio.png);
	width: 400px;
	margin-left: 0px;
	height: 158px;
	bottom: 100px;
position: fixed;
}

/* Hide deprecated dynamic animation containers (no longer used) */
#responsecontainer,
#responsecontainer2 {
    display: none !important;
}

/* Keyframes para animación del cielo */
@-webkit-keyframes animacion {
  from { width: 80%; }
  to { width: 60%; margin-left: 30%; }
}
@-moz-keyframes animacion {
  from { width: 80%; }
  to { width: 60%; margin-left: 30%; }
}
@-o-keyframes animacion {
  from { width: 80%; }
  to { width: 60%; margin-left: 30%; }
}
@-ms-keyframes animacion {
  from { width: 80%; }
  to { width: 60%; margin-left: 30%; }
}
@keyframes animacion {
  from { width: 80%; }
  to { width: 60%; margin-left: 30%; }
}

@-webkit-keyframes animacion2 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@-moz-keyframes animacion2 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@-o-keyframes animacion2 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@-ms-keyframes animacion2 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@keyframes animacion2 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}

@-webkit-keyframes animacion3 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@-moz-keyframes animacion3 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@-o-keyframes animacion3 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@-ms-keyframes animacion3 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@keyframes animacion3 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}

@-webkit-keyframes animacion4 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@-moz-keyframes animacion4 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@-o-keyframes animacion4 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@-ms-keyframes animacion4 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}
@keyframes animacion4 {
  from { width: 10%; }
  to { width: 12%; margin-left: 100%; }
}

/* Ajustes móviles para evitar scroll horizontal y encajar en pantalla */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .cuerpo { width: 100%; max-width: 1007px; padding: 0 12px; }
  .cuerpo-fondo { width: 100%; background-position: center bottom; background-size: cover; position: static; z-index: auto; }
  .parche { width: 100%; background-position: center bottom; background-size: cover; position: static; z-index: auto; }
  .menu { position: static; width: 100%; height: auto; }
  .cielo { position: static; float: none; }
  #main, #main2, #main3, #main4 { width: 100% !important; position: static; }
  #main img, #main2 img, #main3 img, #main4 img {
    width: 100%;
    margin-left: 0;
    position: static;
    -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none;
  }
}
/* Botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: #ffffff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ffffff;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25), 0 6px 6px rgba(0,0,0,0.15);
  text-decoration: none;
  z-index: 10000;
  transition: transform 150ms ease, box-shadow 150ms ease;
  animation: floaty 3s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.28), 0 8px 10px rgba(0,0,0,0.18);
}

.whatsapp-float img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

/* Tamaño mayor en móviles */
@media (max-width: 600px) {
  .whatsapp-float {
    width: 110px;
    height: 110px;
  }
  .whatsapp-float img {
    width: 90px;
    height: 90px;
  }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media print {
  .whatsapp-float { display: none; }
}