.franja {
    background-color: #007bff; /* Cambia el color de fondo según tus preferencias */
    color: white; /* Cambia el color del texto según tus preferencias */
    text-align: center;
    padding: 20px 0; /* Ajusta el espaciado superior e inferior */
}

.franja h1 {
    margin: 0;
    font-size: 24px; /* Tamaño del texto del título */
}
.producto {
    border: 1px solid #ccc; /* Borde del recuadro */
    padding: 20px; /* Espaciado interno */
    text-align: center;
}

.producto img {
    width: 200px; /* Tamaño de la imagen */
    height: 200px; /* Tamaño de la imagen */
    display: block;
    margin: 0 auto 10px; /* Centra la imagen */
    transition: transform 0.3s ease-in-out; /* Transición suave */
  
}
.producto img :hover
{
  transform: scale(1.1); /* Agrandar la imagen al 110% de su tamaño original */
}
.producto h2 {
    margin: 0 0 10px; /* Espaciado inferior */
}

.producto p {
    margin: 0 0 15px; /* Espaciado inferior */
}

.producto button {
    background-color: #007bff; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    border: none;
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer;
}

.producto button:hover {
    background-color: #0056b3; /* Cambio de color al pasar el mouse */
}
#whatsappBtn {
background-color: #25D366; /* Color verde de WhatsApp, puedes ajustar según tu preferencia */
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em;
margin-top: 15px;
}
#whatsappBtn:hover {
background-color: #128C7E; /* Color verde oscuro al hacer hover */
}
.button {
padding-left: 90px;
}
button {
margin-left: .5em;
}
#whatsapp {
position: fixed;
bottom: 60px;
right:20px;
z-index: 1400;
}
svg {
width: 80px;
filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
}
circle {
fill: #25d366;
}
path {
fill: #fff;
}
p {
font-family: Arial, sans-serif;
color: #black;
}
/* Estilos para el botón de WhatsApp */
.whatsapp-btn {
display: inline-block;
background-color: #25D366; /* Color verde de WhatsApp, puedes ajustar según tu preferencia */
color: #fff;
padding: 10px 20px;
text-decoration: none;
font-size: 16px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.whatsapp-btn:hover {
background-color: #128C7E; /* Color verde oscuro al hacer hover */
}
footer {
    background-color: #007bff; /* Color de fondo del pie de página */
    padding: 20px 0; /* Espaciado interno */
    text-align: center;
}

.container {
    max-width: 1200px; /* Ancho máximo del contenido */
    margin: 0 auto; /* Centra el contenido */
}

.info {
    margin-bottom: 20px; /* Espaciado inferior */
}

.info h3 {
    margin-top: 0; /* Elimina el margen superior del título */
}

.info p {
    margin: 5px 0; /* Espaciado entre los elementos de información */
}
.franja {
    background-color: #007bff; /* Color de fondo de la franja */
    color: white; /* Color del texto de la franja */
    text-align: center;
    padding: 20px 0; /* Espaciado interno */
}

.menu {
    text-align: center;
    margin-top: 20px; /* Espaciado superior */
}

.menu a {
    text-decoration: none; /* Elimina el subrayado del enlace */
}

.menu button {
    background-color: #007bff; /* Color de fondo del botón */
    color: white; /* Color del texto del botón */
    border: none;
    padding: 10px 20px; /* Espaciado interno */
    margin: 0 5px; /* Espaciado entre botones */
    cursor: pointer;
}

.menu button:hover {
    background-color: #0056b3; /* Cambio de color al pasar el mouse */
}
.background-image {
    background-image: url('pokemon.png'); /* Ruta de la imagen de fondo */
    background-attachment: fixed; /* Hace que la imagen de fondo esté fija */
    background-size: cover; /* Ajusta la imagen de fondo al tamaño del contenedor */
    background-position: center; /* Centra la imagen de fondo */
    height: 100vh; /* Establece la altura del contenedor al 100% del viewport */
}
.container {
    text-align: center;
    margin-top: 50px;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none; /* Esto elimina el subrayado del enlace */
}

button:hover {
    background-color: #0056b3;
}
#cookie-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: #f0f0f0;
text-align: center;
}
#accept-cookies-btn {
padding: 5px 10px;
background-color: #007bff;
color: #000;
border: none;
cursor: pointer;
}