/*Estilos de CSS */
body {
font-family: Arial, sans-serif;
background-color: lightgrey;
margin: 0;
padding: 0;
}

#container {
width: 1100 px; /*ancho */
margin: 0 px auto;
border: 1 px solid black;
   }

.titulo-principal {
font-family: Impact, fantasy;
font-size: 250%;
font-weight: bold;
color: turquoise;
text-align: center;
line-height: 100 px;
}

.logo {
 width: 150px; 
 height: auto; 
        }

.enlace-con-color {
font-family: Helvetica, sans-serif;
font-size: 120%;
color: yellow;
}



#menu-principal {
background-color: #f0f0f0; /* Color de fondo del menú */
padding: 10px; /* Espaciado interno del menú */
border-radius: 5px; /* Bordes redondeados */
}

#menu-principal ul {

float: left;
list-style: none;
margin: 10 px;
padding: 2px; /* relleno de dos píxeles */
}

#menu-principal li {
display: inline-block; /* Asegura que los elementos de la lista estén en línea */
margin-right: 10px; /* Espacio entre los elementos de la lista */
}


#menu-principal a {
text-decoration: none; /* Quita el subrayado de los enlaces */
color: blue;
padding: 5px 10px; /* Espaciado interno de los enlaces */
display: block; /* Hace que los enlaces se comporten como bloques */
}

#menu-principal a:hover {
background-color: #ffffff; ; /* Color de fondo al pasar el ratón */
	color: darkblue; /* Color del texto al pasar el ratón */
}
   
  
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12 px;
color: rgb(0, 0, 255);
line-height: 1.5; 
font-weight: normal;
text-align: justify;
}

#imagenes {
backgrund-color: black;
margin: 10 px;
padding: 2 px;
color: darkgreen;
}


h2 {
font-family: "Comic Sans MS", cursive, sans-serif;
color: darkgreen;
font-size: 165%;
} 

h3 {
font-family: "Comic Sans MS", cursive, sans-serif;
color: FireBrick;
font-size: 150%;
}

.subtitulo-con-color {
font-family: Verdana, sans-serif;
font-size: 135%;
color: gold;
}



        .imagen-con-efecto {
            border: 1in solid transparent; /* Borde de una pulgada */
            box-shadow: 0 0 20px turquoise, 0 0 40px white, 0 0 60px darkgreen;
            animation: luces 3s infinite;
        }

        @keyframes luces {
            0% {
                box-shadow: 0 0 20px turquoise, 0 0 40px white, 0 0 60px darkgreen;
            }
            33% {
                box-shadow: 0 0 20px white, 0 0 40px darkgreen, 0 0 60px turquoise;
            }
            66% {
                box-shadow: 0 0 20px darkgreen, 0 0 40px turquoise, 0 0 60px white;
            }
            100% {
                box-shadow: 0 0 20px turquoise, 0 0 40px white, 0 0 60px darkgreen;
}

.yape {
width: 150px;
margin= 10 px;
}

.plin {
width: 150px;
margin= 10 px; 
}

.transferencia-bancaria {
width: 150px;
margin= 10 px;
}

.visa-master-card {
width: 150px;
margin= 10 px;
}