/*Responsive Ipad*/
@media screen and (max-width: 900px){
    .contenedor-inicial {
        margin-top: -250px;
        text-align: center; /* Centra los elementos dentro de este contenedor */
        }
        
        .imgnombre {
            display: block;
            margin: 0 auto; /* Centra la imagen horizontalmente */
            margin-top: 0px;
            width: 324px;
            height: 322px;
        }
        
        .buttons {
            margin-top: -5px; /* Espacio entre la imagen y el botón */
        }
        
        .btn {
            width: 100%;
            max-width: 140px;
            height: 40px;
            color: #ffffff;
            background-color: #34A2DA;
            font-size: 15px;
            display: flex; /* Cambio importante para centrar */
            align-items: center; /* Centra verticalmente */
            justify-content: center; /* Centra horizontalmente */
            border-radius: 25px;
            margin: 0px auto 55px;
            border: 2px solid #F7CA08; /* Borde amarillo de 2px */
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
            z-index: 1;
        }
        
        .btn:hover {
            background-color: #2e93c5;
        }

        #modalInicio {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 90vh; /* Asegura que ocupe toda la altura de la ventana */
            background-image: url('/img/fondo1.png');
            background-repeat: no-repeat; /* Evita que el fondo se repita */
            background-position: center; /* Centra la imagen de fondo */
            background-size: cover; /* Asegura que la imagen de fondo cubra toda el área */
        }


        
        
}

/*Responsive Mobile*/
@media screen and (max-width: 500px){
    .contenedor-inicial {
        margin-top: -410px;
        text-align: center; /* Centra los elementos dentro de este contenedor */
        }
        
        .imgnombre {
            display: block;
            margin: 0 auto; /* Centra la imagen horizontalmente */
            margin-top: 0px;
            width: 324px;
            height: 300px;
        }
        
        .buttons {
            margin-top: 5px; /* Espacio entre la imagen y el botón */
        }
        
        .btn {
            width: 100%;
            max-width: 140px;
            height: 40px;
            color: #ffffff;
            background-color: #34A2DA;
            font-size: 15px;
            display: flex; /* Cambio importante para centrar */
            align-items: center; /* Centra verticalmente */
            justify-content: center; /* Centra horizontalmente */
            border-radius: 25px;
            margin: 0px auto 55px;
            border: 2px solid #F7CA08; /* Borde amarillo de 2px */
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;
            position: relative;
            z-index: 1;
        }

        #modalInicio {
            display: flex;
            justify-content: center;
            align-items: center;
            height:844px; /* Asegura que ocupe toda la altura de la ventana */
            background-image: url('/img/fondo1.png');
            background-repeat: no-repeat; /* Evita que el fondo se repita */
            background-position: center; /* Centra la imagen de fondo */
            background-size: cover; /* Asegura que la imagen de fondo cubra toda el área */
        }
        
        
        .btn:hover {
            background-color: #2e93c5;
        }
  
        
.perro{
    max-width: 230px;
    height: 220px;
    position: absolute;
    right: -60px;
    bottom: -30px;
}

.niño{
        max-width: 256px;
        height: 288px;
    position: absolute;
    left: -60px;
    bottom: -30px;
}
body{
    background-image: url('/img/fondo4.png');
    background-size: cover;
background-color: #34A2DA;
    background-position: 60% 90%;
}

    
}

@media (max-width: 360px) {

    
#informacion .hour{
   
    font-size: 10px;
   }

}