@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --color-principal: #005C53;
    --color-principal-claro: #9FC131;
    --color-principal-oscuro: #042940;
    --color-lima: #DBF227;
    --color-beige: #D6D58E; /* #EADFDB;*/
    --color-blanco-crema: #ececec;
    --color-casi-blanco: #fbfbfb;
    --color-gris: #e2e2e2;
    --color-gris-claro: #CACACA;
    --color-gris: #E6E6E6;
    --color-gris-oscuro: #878787;
    --color-rojo: #de0808;
    --color-blanco: #FFFFFF;
    --color-negro: #000000;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
input,
textarea {
    margin: 0;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
}

header {
    background-color: var(--color-blanco-crema);
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    top: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
}

.header-izda,
.footer-izda {
    display: flex;
    align-items: center;
    position: relative;
}

.header-dcha,
.footer-dcha {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.logo {
    background-image: url(/imagenes/logoMercatto.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: var(--color-blanco-crema);
    display: inline-block;
    height: 40px;
    width: 220px;
    cursor: pointer;
}

nav {
    display: flex;
    gap: 1.5rem;
}

nav a {
    color: var(--color-principal-oscuro);
    padding: .75rem;
}

.active,
.carrito {
    display: block;
    border-radius: .5rem;
}

.active,
nav a:hover {
    background-color: var(--color-principal-claro);
    border-radius: .5rem;
}

.carrito {
    background-color: var(--color-principal-oscuro);
    color: var(--color-blanco-crema)
}

.carrito:hover,
.carrito.active {
    background-color: var(--color-principal-claro);
    color: var(--color-principal-oscuro);
}

.cantidadProductosEnCarrito {
    background-color: var(--color-blanco);
    color: var(--color-principal-oscuro);
    padding: 0 .3rem;
    border-radius: .25rem;
    margin: 0 .5rem 0 .3rem;
}

footer {
    background-color: var(--color-blanco);
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    width: 100%;
    border-top: .5px solid var(--color-blanco-crema);
    position: absolute;
}

.copyright {
    color: var(--color-gris-oscuro);
}

footer a {
    color: var(--color-gris-oscuro);
    padding: .75rem;
}

footer a:hover {
    color: var(--color-principal-oscuro);
}