.contenedor-tarjetas {
    font-family: Arial, sans-serif;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Ajusta el ancho de las columnas según el tamaño de la pantalla */
    gap: 20px; /* Espacio entre las tarjetas */
    padding: 20px;
   
}

.tarjeta {
    
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    background-color:whitesmoke;
    margin-bottom: 20px;
}

.tarjeta img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.titulotg {
    font-family: 'Poppins';
    color: #34b912;
    font-size: 20px; /* Tamaño del título ajustado */
    margin: 10px 0;
}

.textotg {
    font-family: 'Poppins';
    font-size: 20px;
    margin: 10px 0;
    color: black;
}

.agregar-carrito {
    background-color: #34b912;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px; /* Tamaño del botón ajustado */
    margin-top: 10px;
}

.agregar-carrito:hover {
    background-color: #155306;
}

/* Media queries para hacer el diseño responsive */
@media screen and (max-width: 768px) {
    .contenedor-tarjetas {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Ajusta el ancho de las columnas para dispositivos medianos */
    }
}

@media screen and (max-width: 480px) {
    .contenedor-tarjetas {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* Una columna por fila en dispositivos pequeños */
    }
}

/*Carrito*/
.carrito {
    background-color:  whitesmoke;
    border: 1px solid #34b912;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    margin-top: 20px;
}

.carrito h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 10px;
}

#lista-carrito {
    list-style: none;
    padding: 0;
    margin: 0;
}

#lista-carrito li {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #555;
}

#total {
    font-weight: bold;
    font-size: 1.2rem;
    color: #333;
}

.info-contacto {
    margin-top: 20px;
}

.info-contacto label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.info-contacto input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid#34b912;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 1rem;
}

.enviar-whatsapp {
    background-color:#34b912;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px; /* Tamaño del botón ajustado */
    margin-top: 10px;
}

.enviar-whatsapp:hover {
    background-color:#34b912;
}

.boton-carrito {
    position: fixed;
    bottom: 20px; /* Distancia desde la parte inferior */
    right: 20px; /* Distancia desde la derecha */
    background-color:#34b912;/* Color de fondo */
    color: #fff; /* Color del icono */
    border-radius: 50%; /* Botón redondeado */
    width: 50px; /* Ancho del botón */
    height: 50px; /* Alto del botón */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px; /* Tamaño del icono */
    text-decoration: none; /* Elimina la decoración de texto en el enlace */
    cursor: pointer;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

.boton-carrito:hover {
    background-color:  hsl(38, 61%, 35%); /* Cambia el color de fondo al pasar el mouse */
}

/*popup*/


/* Estilos para el popup */
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; /* Ocupa el 80% del ancho de la pantalla */
    max-width: 800px; /* Establece un ancho máximo */
    background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco del popup con opacidad */
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    z-index: 1001; /* Asegura que esté por encima del fondo */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
}

/* Contenedor desplazable dentro del popup */
.contenedor-desplazable {
    max-height: 60vh; /* Altura máxima del contenedor (60% del alto de la ventana) */
    overflow-y: auto; /* Agrega una barra de desplazamiento vertical si es necesario */
}




.cerrar-popup {
    position: absolute;
    top: 10px; /* Coloca el botón en la parte superior */
    right: 10px; /* Coloca el botón en la esquina superior derecha */
    background-color: #ccc;
    color: #333;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cerrar-popup:hover {
    background-color:#34b912;
}

.abrir-popup {
    background-color:#34b912; /* Color de fondo */
    color: #fff; /* Color del texto */
    padding: 10px 20px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    transition: background-color 0.3s ease; /* Transición suave del color de fondo */
}

.abrir-popup:hover {
    background-color:#226a10; /* Cambia el color de fondo al pasar el mouse */
}



/* Estilos para el popup */

#buttonContainer {
    position: fixed;
    bottom: 10px;
    left: 10px;
  }
  
  button {
    padding: 10px;
    margin: 5px;
    font-size: 16px;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  #menu {
    position: fixed;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
  }
  
  .hidden {
    display: none;
  }





/* Estilos para el botón de cerrar */
.cerrar-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ccc;
    color: #333;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cerrar-popup:hover {
    background-color: #999;
}

.ul {
    font-size: 20px;
}