/*Estilos base*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'KGSecondChancesSolid';
    font-style: normal;
    font-weight: 400;
    src: url('/font/KGSecondChancesSolid.woff') format('woff'),
         url('/font/KGSecondChancesSolid.woff2') format('woff2'),
         url('/font/KGSecondChancesSolid.ttf') format('truetype'),
         url('/font/KGSecondChancesSolid.otf') format('opentype');
}


*{
    margin: 0px;
    padding: 0px;
    font-family: 'KGSecondChancesSolid';
  
}

html{
    overflow-x: hidden;
}

body{
    overflow-x: hidden;
    background-image: url('/img/fondo4.png');
    background-size: cover;
}

h1, h2, h3, h4, h5, h6{
    margin: 0px;
}

p{
    margin: 0px;
}

img{
    width: 100%;
    display: block;
}

a{
    text-decoration: none;
}

ul{
    padding: 0px;
    margin: 0px;
    list-style: none;
}


.container {
    display: none;
}
/* pantalla 1--------------- */

#modalInicio {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 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 */
}

.contenedor-inicial {
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: 10px; /* 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: #0056b3;
}



/*hero*/
.contenido-hero {
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center; /* Centra los elementos horizontalmente */
    text-align: center; /* Centra el texto */
}

.contenido-hero p {
    margin-top: 10px; /* 10px de separación del borde superior */
    font-size: 21px; /* Tamaño de fuente */
    color: #fff; /* Color del texto */
}

.contenido-hero img {
    width: 265px; /* Ancho de la imagen */
    height: auto; /* Alto de la imagen */
    margin-top: 20px; /* Espacio entre el texto y la imagen */
}


/*pantalla 2 informacion*/

/*Información*/
#informacion{
    width: 100%;
    position: relative;
    padding: 30px 0px 105px;
}

#informacion .description{
    text-align: center;
}

#informacion .date {
    margin-left: 36px;
    font-size: 25px;
    color: #ffffff;
    text-align: left; /* Alinea el texto a la izquierda */
    margin-bottom: 0px;
}

#informacion .date span {
    min-width: 155px;
    font-size: 80px;
    color: #ffffff;
    position: relative;
    display: block; /* Hace que el span ocupe una línea completa */
    margin-bottom: -25px;
}

#informacion .hour{
   
    color: #FFFFFF;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenedor-hora {
    display: flex; /* Usa flexbox para centrar */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 40px; /* Altura de 40px */
    width: 100%; /* Ancho de 390px */
    background-color:#FFD701; /* Fondo amarillo */
    text-align: center; /* Centra el texto */
    margin: 0 auto; /* Centra el contenedor horizontalmente si es necesario */
}

.perros-juntos{
    width: 233px;
    height: 182px;
    position: absolute;
    right: 0px;
    top: 30px;
}


/*Ubicacion*/
#ubicacion{
    margin-top: -80px;
    width: 100%;
    position: relative;
    padding-bottom: -30px;
}


#ubicacion .icon{
    max-width: 53px;
    margin: -55px auto 20px;
}

.titulo-ubicacion{
    font-size: 25px;
    color: #fff;
    text-align: center;
    
    margin: 0px auto 15px;
}


#ubicacion .subtitulo{
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin: 0px auto 15px;
}

#ubicacion .btn{
    margin-top: 17px;
}

/*Asistencia*/
#asistencia{
    width: 100%;
    position: relative;
    padding: 45px 0px 115px;
}

#asistencia .titulo{
    max-width: 345px;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    margin: 0px auto 30px;
}

#asistencia .description{
    margin-top: -20px;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 30px;
}

#asistencia .btn{
    max-width: 160px;
    height: 42px;
    font-size: 14px;
}


#asistencia .btn:last-child{
    margin-bottom: 0px;
}

.perro{
    max-width: 230px;
    height: 220px;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.niño{
        max-width: 256px;
        height: 288px;
    position: absolute;
    left: 0px;
    bottom: 0px;
}


.audioControl {
    width: 46px; /* Tamaño del botón */
    height: 43px;
    background-image: url('/img/pausa.png'); /* Imagen inicial de play */
    background-size: cover;
    cursor: pointer;
    position: absolute; /* Posiciona el botón */
    top: 65px;
    right: 0;
    z-index: 100;
  }

  .audioControl.paused {
    background-image: url('/img/reproducir.png'); /* Cambia a play cuando está pausado */
  }