.Productos{
    width: 100%;
}
.Productos .titulo{
    font-family: 'Oswald', sans-serif;
    font-style: italic;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-titulo-contenido);
    text-align: center;
    margin: 2rem 0;
}
.Productos .flecha-grid_productos{
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.Productos .grid_productos{/*El grupo de productos destacados sera un display grid lo cual nos permitira poner los productos en recuadros*/
    display: grid;/*Declaro que el display es de tiupo grid*/
    grid-template-columns: repeat(5, 1fr);/*declaro el numero de columnas y la porcion que tendra cada una*/
    gap: 1rem;
}
.Productos .grid_productos .producto {
    display: grid;/*aqui pongo display grid para separar la imagen del contenido*/
    grid-template-columns: 1fr;/*solo tendra una columna*/
    grid-template-rows: 200px auto;/*tendremos 2 filas, una de la imagen y otra del contenido, donde la imagen sera el dobre de alto que el contenido*/
    /*border: 1px solid var(--color-borde-producto);borde*/
    max-height: auto;
    max-width: 100%;
    padding: 10px;
    transition: transform 0.2s ease-in-out, 
            box-shadow 0.2s ease-in-out;
    /*se utiliza para aplicar un efecto de transición suave a los cambios en la propiedad transform de un elemento, la duracion de la transicion sera 3 segundos y la transicion comienza lento , cuego acelera y se desacelera al final*/
    background-color: var(--color-fondo-producto);
    color: var(--color-texto-informacion_producto);
    border-radius: 1.7rem;
    position: relative;
}
.grid_productos .producto:hover {
    transform: scale(1.05) translateY(-10px);/*En conjunto, transform: scale(1.05) translateY(-10px); hará que el elemento se agrande un 5% y se desplace 10 píxeles hacia arriba, creando un efecto de resalte y elevación del elemento*/
    /*Modifica el elemento: Cambia la apariencia o posición del elemento de manera inmediata, sin animación por sí sola*/
    /*Añade animación: Se utiliza para suavizar los cambios de una propiedad, controlando la duración, el momento y la aceleración de la transición*/
    box-shadow: var(--color-sombreado-producto);
}
.grid_productos .imagen_producto{
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 1.5rem;
    overflow: hidden;
}
.grid_productos .imagen_producto a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grid_productos .imagen_producto img{
    max-width: 100%;/*la imagen tendra un ancho maximo del 100% del ancho del contenedor*/
    max-height: 100%;/*la imagen tendra un alto maximo del 100% del alto del contenedor*/
    object-fit: contain;  /* Ajusta la imagen dentro del contenedor sin distorsionarla */
}
.informacion_producto {/*el texto del elemento informacion_producto se centrara y mantendra una distancia de 10px respecto a la imagen*/
    text-align: center;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.informacion_producto h3 a{
    color: var(--color-texto-informacion_producto);
}
.informacion_producto h3 a:hover{
    color: rgb(143, 180, 41);
}
.precio_producto {
    font-size: 1.2em;
}

.opciones_producto{
    width: 80%;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.opciones_producto .icono_opcion_producto {
    position: relative;
    cursor: pointer;
    color: var(--color-icono-producto);
}
.opciones_producto .icono_opcion_producto.Active {
    color: rgb(143, 180, 41);
}
.opciones_producto .icono_opcion_producto:first-child {
    width: 100%;
    padding-right: auto;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.opciones_producto .icono_opcion_producto:not(:first-child):not(:last-child) {
    width: 100%;
    padding: 0 auto;
    border-left: 1px solid var(--color-borde-icono-producto);
    border-right: 1px solid var(--color-borde-icono-producto);
}
.opciones_producto .icono_opcion_producto:last-child {
    width: 100%;
    padding-left: auto;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.opciones_producto .icono_opcion_producto:hover{
    background-color: var(--color-fondo-icono-producto);
}
.prev_flecha{
    left: calc(50% - 1250px/2);
}
.next_flecha{
    right: calc(50% - 1250px/2);
}
.prev_flecha, .next_flecha{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: monospace;
    border: 1px solid #5555;
    font-size: large;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: rgb(82,163,255);
    color: white;
    font-weight: bold;
}
.prev_flecha:hover, .next_flecha:hover{
    background-color: rgb(0, 119, 255);
}
.prev_flecha{
    pointer-events: none;
    cursor: default;
}
/*ETIQUETAS*/
.Productos .grid_productos .producto .etiquetaNuevo{
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px;
    background-color: rgb(82,163,255);
    border-radius: 25px;
    color: white;
    font-weight: 900;
    width: 50px;
    line-height: 1;
    overflow-wrap: break-word; /* Rompe palabras largas */
    word-break: break-word;    /* Rompe palabras en cualquier carácter */
    white-space: normal;       /* Ajusta el texto automáticamente */
}
.Productos .grid_productos .producto .etiquetaAgotado{
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px;
    background-color: red;
    border-radius: 25px;
    color: white;
    font-weight: 900;
    width: 40px;
    line-height: 1;
    overflow-wrap: break-word; /* Rompe palabras largas */
    word-break: break-word;    /* Rompe palabras en cualquier carácter */
    white-space: normal;       /* Ajusta el texto automáticamente */
}
@media screen and (max-width: 1250px){/*solo se aplicará cuando la pantalla del dispositivo tenga un ancho máximo de 900 píxeles*/
    .prev_flecha{
        left: 0
    }
    .next_flecha{
        right: 0
    }
}
@media screen and (max-width: 1100px){/*solo se aplicará cuando la pantalla del dispositivo tenga un ancho máximo de 900 píxeles*/
    .Productos .grid_productos{/*El grupo de productos destacados sera un display grid lo cual nos permitira poner los productos en recuadros*/
        grid-template-columns: repeat(4, 1fr);/*declaro el numero de columnas y la porcion que tendra cada una*/
    }
}
@media screen and (max-width: 950px){/*solo se aplicará cuando la pantalla del dispositivo tenga un ancho máximo de 900 píxeles*/
    .Productos .grid_productos{/*El grupo de productos destacados sera un display grid lo cual nos permitira poner los productos en recuadros*/
        grid-template-columns: repeat(3, 1fr);/*declaro el numero de columnas y la porcion que tendra cada una*/
    }
    .Productos .titulo{
        font-size: 1.7rem;
        margin: 1.5rem 0;
    }
}
@media screen and (max-width: 650px){/*solo se aplicará cuando la pantalla del dispositivo tenga un ancho máximo de 900 píxeles*/
    .Productos .grid_productos{/*El grupo de productos destacados sera un display grid lo cual nos permitira poner los productos en recuadros*/
        grid-template-columns: repeat(2, 1fr);/*declaro el numero de columnas y la porcion que tendra cada una*/
        gap: 0.5rem;
    }
    .Productos .titulo{
        font-size: 1.5rem;
        margin: 1rem 0;
    }
}
@media screen and (max-width: 370px){/*solo se aplicará cuando la pantalla del dispositivo tenga un ancho máximo de 900 píxeles*/
    .Productos .grid_productos{/*El grupo de productos destacados sera un display grid lo cual nos permitira poner los productos en recuadros*/
        grid-template-columns: repeat(1, 1fr);/*declaro el numero de columnas y la porcion que tendra cada una*/
    }
}