/* Estilos para el header */
header {
    font-family: 'Montecatini Pro', 'Stretto SemiBold', sans-serif;
    width: 100%;
    background-color: #013822; /* Color de fondo verde */
    color: white; /* Color del texto */
    padding: 0px; /* Espaciado interno superior e inferior */
    text-align: center; /* Alinear el texto al centro */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    position: fixed; /* Fijar el header en la parte superior */
    top: 0;
    left: 0;
    z-index: 1000; /* Asegurar que esté por encima de otros elementos */
}

/* Ajustar el body para no ocultar contenido detrás del header fijo */
body {
    margin: 70px 10px 10px 10px; /* Añadido margen superior para el header */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Cambiado a flex-start para alinear al inicio */
    background-color: #f0f0f0;
    height: 100%; /* Asegura que el body al menos cubra la altura de la ventana */
    background-image: url('fondo.webp');
    background-size: cover;        /* Escala la imagen para cubrir todo el elemento */
    background-repeat: no-repeat;  /* Evita que la imagen se repita */
    background-position: center;   /* Centra la imagen en el elemento */
    background-attachment: fixed;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1500px; /* Opcional: Limita el ancho máximo para mejor visualización */
    padding: 10px;
    box-sizing: border-box;
}

.slider {
    width: 100%;
    max-width: 210mm; /* Ancho A4 */
    aspect-ratio: 210 / 302; /* Relación de aspecto A4: ancho / alto */
    overflow-x: scroll; /* Permite el desplazamiento horizontal */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    position: relative;
    background-color: #ffffff;
    scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
    margin: 0px;
    padding: 0px;
}

.slider::-webkit-scrollbar {
    display: none; /* Oculta la barra de desplazamiento en navegadores WebKit */
}

.slides {
    display: flex;
    /* Eliminar la transición basada en transform para permitir el scroll nativo */
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    position: relative;
    scroll-snap-align: start; /* Alinea el inicio de la diapositiva al contenedor */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.nav button {
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 5px;
    cursor: pointer;
    font-size: 12px;
}

.nav button:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.carrito {
    width: 100%;
    max-width: 700px;
    padding: 10px;
    border: 1px solid black;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: 'Poppins', sans-serif;
}

.carrito h3 {
    text-align: center;
    margin-bottom: 10px;
    color: #333;
    margin: 1px;
    
}

.carrito ul {
    list-style: none;
    padding: 0;
    margin: 1px;
}

.carrito li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.carrito .quantity-controls {
    display: flex;
    gap: 5px;
}

.carrito .quantity-controls button {
    background-color: #f0f0f0;
    border: 1px solid black;
    padding: 5px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}

.carrito .quantity-controls button:hover {
    background-color: #e0e0e0;
}

.slide-buttons {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.send-whatsapp {
    margin-top: 10px;
    background-color: #013822;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    font-size: 16px;
}

.send-whatsapp:hover {
    background-color: #2AA837;
}

.bot1 {
    height: 25px;
    width: 25px;
    background: none;
    border: none;
    padding: 0px;
    margin: 0px;
    cursor: pointer;
}

.bot1 img {
    height: 100%;
    width: 100%;
}

.price {
    background-color: #013822;
    border: 1px solid #013822;
    border-radius: 7px;     
    padding: 3px;      
    display: inline-block; 
    
    font-size: 14px;            
    color: #ffffff;           
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.price:hover {
    background-color:#013822;
    color: #ffffff;             
}

.enlaces {
    font-size: 7px;
    font-family: "Poppins", serif;
    font-style: normal;
    color: white;
    text-decoration: none;
}

.slogan1{
    position: relative;
    background-color: #2AA837;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.slogan1::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    border-radius: 10px;
  }

.slogan{
    color: white;
    font-family: "Poppins", serif;
    font-weight: 400;
    font-style: normal;
    position: relative;
    padding: 0px;  
    font-size: 50px;
    margin: 10px;
    text-align: center;
    z-index: 1;
}

.generate{
    justify-items: center;
    flex: auto;
}
/* Media Queries para responsividad */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
        align-items: flex-start;
    }

    .slider {
        margin-right: 20px;
        margin-bottom: 0;
    }

    .carrito {
        max-width: 700px;
    }
}

@media (max-width: 767px) {
    .carrito {
        margin: 10px;
        min-width: 300px;
        padding: 0px;
        border: 1px solid black;
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .slide-buttons {
        bottom: 0px;
        left: 0px;
    }
    
    .bot1 {
        height: 18px;
        width: 18px;
    }

    .price {
        background-color: #013822; /* Color de fondo deseado */
        border-radius: 4px;        /* Radio de los bordes para redondearlos */
        border: 0.4px solid #013822;
        padding: 3px;         /* Espaciado interno alrededor del texto */
        display: inline-block;      /* Ajusta el ancho del fondo al contenido */
        /* Opcional: puedes agregar más estilos según tus necesidades */
        font-size: 6px;             /* Tamaño de fuente más grande */
        color: #ffffff;                /* Color del texto */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra opcional para efecto 3D */
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    
    .price:hover {
        background-color: #2AA837; /* Nuevo color de fondo al pasar el mouse */
        color: #ffffff;               /* (Opcional) Cambio de color del texto al hacer hover */
    }
    .enlaces{
        font-size: 3.4px;
    }
    .slogan{
        color: white;
        font-family: "Poppins", serif;
        font-weight: 400;
        font-style: normal;
        padding: 1px;
        margin: 1px;
        font-size: 25px;
    
    }
    
    .nav {
        display: none;
    }
    .titulo{
        font-size: 20px;
    }
}