/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

/* Encabezado */
.header {
    background-color:  #00ab6b;
    color: #ffffff;
    padding: 0.5rem;
    text-align: center;
}

.header h1 {
    margin-bottom: 0.5rem;
}



/* Cuerpo principal */
.main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 2rem;
    flex: 1;
    gap: 2rem;
}

.container {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    padding: 1.5rem;
    text-align: center;	
    width: 100%;
    max-width: 500px;
}

.container-1 {
	text-align: left;	
	background-color: #084830;
	color: white;
}

/* Pie de página */
.footer {
    //border-top: 1px solid red;
	background: #084830;
    //text-align: center;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;	
    //flex: 1;
    gap: 2rem;	
    margin-top: auto;
}


/* - propiedades propias */



/* para imagen sprite */

		.logo{
			width:200px;
			height:64px;
			background-image:url('sprite.png');
			background-repeat:no-repeat;
			display:inline-block;
		}		
		
		.imagen-5{
			background-position: 0% 33%;
		}		

		.imagen-6{
			background-position: 0% 22%;
		}		

		.reproduccion{
			width:64px;
			height:64px;
			background-image:url('sprite.png');
			background-repeat:no-repeat;
			display:inline-block;
		}		
		
		.imagen-7{
			background-position: 0% 44%;
		}		

		.imagen-8{
			background-position: 0% 55%;
		}	

		.imagen-9{
			background-position: 25% 44%;
		}		

		.imagen-0{
			background-position: 25% 55%;
		}

		.imagen-7:hover{
			background-position:50% 44%;
		}
		.imagen-8:hover{
			background-position:50% 55%;
		}
		.imagen-9:hover{
			background-position:75% 44%;
		}			
		.imagen-0:hover{
			background-position:75% 55%;
		}
		
		.botonera{
			width:64px;
			height:64px;
			background-image:url('sprite.png');
			background-repeat:no-repeat;
			display:inline-block;

		}
		.imagen-1{
			background-position: 0% 0%;
		}
		.imagen-2{
			background-position: 25% 0%;
		}
		.imagen-3{
			background-position: 50% 0%;
		}
		.imagen-4{
			background-position: 75% 0%;
		}
		.imagen-13{
			background-position: 100% 0%;
		}		
		.imagen-1:hover{
			background-position:0% 11%;
		}
		.imagen-2:hover{
			background-position:25% 11%;
		}
		.imagen-3:hover{
			background-position:50% 11%;
		}			
		.imagen-4:hover{
			background-position:75% 11%;
		}
		.imagen-13:hover{
			background-position:100% 11%;
		}

/* reproductor de audio */

        .audio-button {
            border: none;
            cursor: pointer;
        }

        .icon {
            display: none; /* Inicialmente oculto */
        }

        .icon.active {
            display: inline; /* Mostrar solo el icono activo */
        }

		.cajita{
			width:25px;
			height:20px;
			background-image:url('sprite.png');
			background-repeat:no-repeat;
			display:inline-block;

		}
		.imagen-11{
			background-position: 0% 62%;
		}
		.imagen-12{
			background-position: 0% 72%;
		}
		
	


/* Media queries para responsividad */
@media (max-width: 768px) {
    .main {
        flex-direction: column;
        align-items: center;
    }
    
    .container {
        max-width: 100%;
    }
    
}