body {
        font-family: Arial, sans-serif;
        font-size: 14px;
        margin: 5px;
        padding: 10px;
		background-color: #FFFFFF;
    }
	
	header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
		align-items: center;
		border-radius: 5px;
    }
	
    footer {
		background-color: #E9E9E9;
        text-align: center;
        padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 5px;
		padding-right: 5px;
		margin: .5%;
		border-radius: 10px;
    }	
	
    /* Contenedor principal */
    .product-container1,
    .product-container2,
    .product-container3 {
        width: 99%;
        margin: 0 auto; /* Centra el contenedor principal en la pantalla */
    }

    /* Contenedor dividido en tres columnas */
    .product-container1,
    .product-container2,
    .product-container3 {
   		display: flex;
	    flex-wrap: wrap;
    	justify-content: space-between;
    }

    /* Cada producto en una columna */
    .product-item1 {
        width: calc(40% - 20px); /* Tres columnas de igual ancho con márgenes */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra la imagen y el texto horizontalmente */
        margin: 10px;
		border: none;
        background-color: #FFFFFF;
		box-shadow: 3px 3px 3px rgba(228,228,228,.3)		
    }

    .product-item2 {
    	width: calc(20% - 10px); /* Cinco elementos por fila */
    	margin: 5px;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
		border: none;
        background-color: FFFFFF;
		box-shadow: 3px 3px 3px rgba(228,228,228,.3)		
    }

    .product-item3 {
        width: calc(25% - 20px); /*Cuatro columnas de igual ancho con márgenes */
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra la imagen y el texto horizontalmente */
        margin: 10px;
		border: none;
        background-color: #F6F6F6;
		box-shadow: 3px 3px 3px rgba(228,228,228,.3)		
    }

    /* Imagen del producto */
    .product-item1 img {
		width: calc(18% - 5px); /* Dos columnas de igual ancho con márgenes */
        padding: 5px;
        margin: 5px;
        display: block;
        width: 200px;
        height: 200px;
        transition: transform 0.3s ease;
        border: none;
		box-shadow: none;

    }

    /* Imagen del producto */
    .product-item2 img {
		width: calc(20% - 5px); /* Dos columnas de igual ancho con márgenes */
        padding: 5px;
        margin: 5px;
        display: block;
        width: 200px;
        height: 200px;
        transition: transform 0.3s ease;
        border: none;
		box-shadow: none;

    }
	
    /* Imagen del producto */
    .product-item3 img {
		width: calc(20% - 5px); /* Dos columnas de igual ancho con márgenes */
        padding: 5px;
        margin: 5px;
        display: block;
        width: 200px;
        height: 200px;
        transition: transform 0.3s ease;
        border: none;
		box-shadow: none;

    }
	
	.circular {
        width: 40px;
        height: 40px;
    }
	
    .producto-circ {
        width: 60px;
		height: 60px;
        display: flex;
        flex-direction: column;
    	justify-content: center;  /* Centra horizontalmente */
    	align-items: center;      /* Centra verticalmente */
        border-radius: 50%;
        box-sizing: content-box;
        border: .1px solid #000;
    }	
	
	/* Texto debajo de la imagen */
	.product-info p {
		text-align: center;
		margin: 1px 0; /* Ajusta los márgenes si es necesario */
		word-wrap: break-word; /* Hace que las líneas largas se dividan en varias líneas */
	}	

	/* Efecto hover */
	.product-item1:hover img,
	.product-item2:hover img,
	.product-item3:hover img {
    	transform: scale(1.1);
	}		

	.izquierda, .derecha {
  		display: flex;
  		align-items: center;
	}

	.menu-icon {
		display: flex;
		gap: 10px;
	}	
	
	.img_qr { /*Es el cuadro de la imagen*/
		width: 100px;
		height: 100px;
		cursor: pointer;
	}

	.img {
		width: 25px;
		height: 25px;
		cursor: pointer;
	}

	.img_ham {
		width: 35px;
		height: 25px;
		cursor: pointer;
	}
	
	.img_sup {/* Imágenes superiores derecho +++++all: initial;++++++*/
		padding: 3px;
		width: 100px;
		height: 100px;
		background: blue;
		cursor: pointer;
	}
	
	.img_mm{
		cursor: pointer;
        width: 100px;
        height: 100px;
    }
			
	.accion {
		padding: 3px;
    	display: flex;
   		flex-wrap: wrap; /* Permite que los elementos se ajusten automáticamente */
    	justify-content: space-between; /* Espacio entre los elementos */
	}
	
	input[type='text'] {
    	max-width: 80%;
		height: 25px;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-sizing: border-box; /* Asegura que padding no afecte el ancho */
	}

	.right-link {
    	float: right;
		margin: 20px;
	}	

	.copyMessage { position: fixed; /* Fija el mensaje en la pantalla */ 
		top: 50%; /* Centra verticalmente */ 
		left: 50%; /* Centra horizontalmente */ 
		transform: translate(-50%, -50%); /* Ajusta la posición para el centro exacto */ 
		background-color: #FFCC00; /* Fondo semitransparente */ 
		padding: 10px; 
		border-radius: 25px; 
		display: none; /* Oculto por defecto */
	}
	
	.footer-links a {
    	text-decoration: none;
    	color: #007bff;
    	font-weight: bold;
	}

	.footer-links a:hover {
    	color: #0056b3;
	}
        .cookie-aviso {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 300px;
            background: #f4f4f4;
            border: 1px solid #ccc;
            padding: 15px;
            font-family: Arial, sans-serif;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            display: none;
        }
        .cookie-aviso button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 8px 12px;
            cursor: pointer;
            margin-top: 10px;
        }
			
	@media only screen and (min-width: 320px) and (max-width: 736px) {

	.product-item1,
	.product-item2,
	.product-item3 {
		width: calc(45% - 5px); /* Dos columnas de igual ancho con márgenes */
		display: flex;
		flex-direction: column;
		align-items: center; /* Centra la imagen y el texto horizontalmente */
		margin: 5px;
	}
		
	input[type='text'] {
	   	font-size: 15px;
    	width: auto;
    	height: auto;
      	padding: 10px;
       	border: 1px solid black;
    	border-radius: 5px;
    	box-sizing: border-box; /* Asegura que padding no afecte el ancho */
	}
	
	.product-item1 img,
	.product-item2 img,
	.product-item3 img {
		width: calc(20% - 5px); /* Dos columnas de igual ancho con márgenes */
        padding: 5px;
        margin: 5px;
        display: block;
        width: 100px;
        height: 100px;
        transition: transform 0.3s ease;
        border: none;
		box-shadow: none;
    }

	.carrito img {
   		width: 25px;
    	height: 25px;
	}
 }