:root {
    --fuente_gruesa: Satoshi-Black;
    --fuente_media: Satoshi-Bold;
    --fuente_delgado: Satoshi-Regular;

    --fuente_tamanio_titulo_1: 28px;
    --fuente_tamanio_titulo_2: 22px;
    --fuente_tamanio_titulo_3: 18px;
    --fuente_tamanio_titulo_4: 15px;

    --color_rojo_1: #A61818;
    --color_rojo_0: #D61F1F;
    --color_rojo_-1: #E54B4B;
    --color_rojo_-2: #EC7E7E;

    --color_caqui_1: #7B6851;
    --color_caqui_0: #9D8669;
    --color_caqui_-1: #B3A18A;
    --color_caqui_-2: #C9BCAC;

    --color_azul_oscuro_1: #111114;
    --color_azul_oscuro_0: #16161A;
    --color_azul_oscuro_-1: #454552;
    --color_azul_oscuro_-2: #747489;

    --color_crema_1: #8C7469;
    --color_crema_0: #AB988F;
    --color_crema_-1: #BEAFA8;
    --color_crema_-2: #D0C6C1;

    --color_salmon_claro_1: #CBABAB;
    --color_salmon_claro_0: #F4EDED;
    --color_salmon_claro_-1: #F6F1F1;
    --color_salmon_claro_-2: #F9F5F5;

    --color_grises_2: #1C1C1C;
    --color_grises_1: #686868;
    --color_grises_0: #B3B3B3;
    --color_grises_-1: #DDDDDD;
    --color_grises_-2: #F7F7F7;
}

.carta_producto {

    --color_fondo: var(--color_caqui_0);
    --color_general: var(--color_rojo_0);
    --color_general_hover: var(--color_rojo_-1);

    padding: 1rem;
    background-color: var(--color_salmon_claro_-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 220px;

    justify-self: center;

    box-shadow: 1px 2px 16px -3px rgba(0,0,0,0.75);
    position: relative;
}

    .carta_producto>div.contenedor_imagen {
        aspect-ratio: 1/1;
        width: 100%;
        background-color: black;
        margin-bottom: 1rem;

        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .carta_producto>div.contenedor_imagen>img {
            width: 100%;
            height: 100%;
        }

    .carta_producto>h3 {
        font-size: var(--fuente_tamanio_titulo_4);
        margin-bottom: 1rem;

        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        /* Limita a 4 líneas */
        -webkit-box-orient: vertical;

        min-height: 54px;
        /*ESTO NO ES LO MÁS ÓPTIMO PERO FUNCIONA*/
    }

    .carta_producto>.precios {
        align-self: flex-start;
        margin-bottom: 1.5rem;
    }

    .carta_producto>.precios>.precio_antiguo {
        color: var(--color_grises_1);
        text-decoration: line-through;
        font-size: var(--fuente_tamanio_titulo_4);
    }

    .carta_producto>.precios>.precio_oferta {
        font-size: var(--fuente_tamanio_titulo_2);
        color: var(--color_general);
    }

    .carta_producto>a {
        padding: 3px 1.5rem;
        border-radius: 10rem;
        text-decoration: none;
        border: 2px solid var(--color_general);
        color: var(--color_general);
        font-size: var(--fuente_tamanio_titulo_4);
    }.carta_producto>a:hover {
        color: white;
        background-color: var(--color_general);
    }


.carta_producto_oferta > p:last-of-type{
    position: absolute;
    top:0;
    right:0;
    background-color: red;
    color: white;
    padding: 5px;
    border-radius: 0 0 0 0.5rem ;
}

.carta_producto_oferta{
    border: 4px solid red;
}

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 1000px) {}

@media only screen and (max-width: 600px) {

    .carta_producto {
        padding: 0.6rem 0.5rem;
        min-width: 170px;
    }


}