:root {
   --nav-height: 60px;
   --negro: rgb(25,25,25);
   --white: #fff;
   --body: #e6e8ff;
   --shopping-menu-text: #000;
   --shopping-menu: #e6e8ff;
   --shopping-menu-border: none;
   --install-button: none;
   --install-button-hover: 0 0 6px 1px rgb(0 0 0 / 60%);
   --presentation: linear-gradient(180deg, rgba(85,143,219,1) 0%, rgba(19,103,212,1) 100%);
   --card-border: 0 0 0 2px var(--c5);
   --card-border-hover: 0 0 0 2px var(--c5);
   --products-container: rgba(14, 78, 161, .96);
   --c1: #082954;
   --c2: #558FDB;
   --c3: #1367D4;
   --c4: #0E4EA1;
   --c5: #213754;
   --b: #e6e8ff;
}

@media (prefers-color-scheme: dark) {
   :root {
      --body: #1c2b40;
      --shopping-menu-text: #fff;
      --shopping-menu: #1c2b40;
      --shopping-menu-border: 0 0 2px 1px #558FDB;
      --install-button: 0 0 3px 1px #558FDB;
      --install-button-hover : 0 0 10px 1px #558FDB;
      --presentation: linear-gradient(180deg,rgba(19,103,212,1) 0%, var(--c1) 100%);
      --card-border: 0 0 1px 2px #558FDB;
      --card-border-hover: 0 0 10px 2px #558FDB;
      --products-container: rgba(30, 75, 138, .96);
      --c2: #1367d4;
   }
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-size: 62.5%;
   font-family: sans-serif;
   color-scheme: light dark;
}

body {
   display: flex;
   overflow: hidden scroll;
   font-size: 1.6rem;
   background-color: var(--body);
}

img {
   height: auto;
   max-width: 100%;
   display: block;
}

svg {
   fill: currentColor;
}

a {
   text-decoration: none;
}

button {
   font-size: inherit;
   background-color: transparent;
   border: none;
   cursor: pointer;
}

/***************
HEADER
****************/

.header__title {
   position: fixed;
   top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   height: var(--nav-height);
   width: 100%;
   font-size: 2.4rem;
   color: var(--b);
   background-color: var(--c1);
   box-shadow: 0 0 8px 1px rgba(0, 0, 0, .85);
}

.buy-button {
   position: fixed;
   top: 7.5px;
   right: -25%;
   z-index: 1;
   padding: 4px;
   height: 45px;
   width: 45px;
   transition: .8s cubic-bezier(0, 0, 0, 1.1);
   background-color: rgb(230 232 255 / 90%);
   border-radius: 2px 50% 50%;
}

.buy-button--show {
   right: 5%;
}

.buy-button__quantity {
   position: absolute;
   top: -4px;
   right: -4px;
   height: 22px;
   width: 22px;
   font-size: 15px;
   font-weight: 600;
   color: var(--c1);
   background-color: var(--b);
   border-radius: 50%;
   line-height: 1.5;
   text-align: center;
}

.buy-button__icon {
   height: 100%;
   width: 100%;
}

.buying-menu-container {
   position: fixed;
   top: 0;
   z-index: 1;
   height: 0;
   width: 100%;
   overflow: hidden scroll;
   background-color: var(--c2);
   background: var(--presentation);
   transition: .2s ease;
}

.buying-menu-container--show {
   height: 100%;
}

.buying-menu-header {
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   height: var(--nav-height);
   width: 100%;
   color: var(--b);
   background-color: var(--c1);
   box-shadow: 0 1px 7px 1px rgba(0, 0, 0, .6);
   text-align: center;
}

.buying-menu-header--fixed {
   position: fixed;
}

.container-close--buying-menu {
   right: 5%;
}

.container-close {
   position: absolute;
   height: 29px;
   width: 29px;
}

.container-close__icon {
   height: 100%;
   width: 100%;
   color: var(--b);
}

.buying-menu-body {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: auto;
   padding: calc(var(--nav-height) + 28px) 5% 24px;
   min-width: 256px;
   max-width: 500px;
}

.buying-menu-body--padding {
   padding-bottom: 95rem;
}

.buying-menu-picture {
   width: 88%;
}

.buying-menu-picture__img {
   margin: auto;
   width: 88%;
   max-width: 225px;
   background-color: var(--white);
   box-shadow: 0 0 5px 1px var(--white);
   border-radius: 50%;
}

.buying-menu-shopping {
   position: relative;
   margin-top: 39px;
   padding: 40px 12px 12px;
   width: 100%;
   font-family: monospace;
   color: var(--shopping-menu-text);
   background-color: var(--shopping-menu);
   box-shadow: var(--shopping-menu-border);
   border-radius: 20px;
}

.purchase-button {
   position: absolute;
   top: -20px;
   left: calc(50% - 20px);
   display: flex;
   justify-content: center;
   align-items: center;
   margin: auto;
   padding: 4px;
   height: 38px;
   width: 38px;
   color: var(--white);
   background-color: rgb(19, 187, 19);
   border-radius: 13px;
   text-decoration: none;
   transition: .2s ease;
}

.purchase-button:focus-visible,
.purchase-button:hover {
   box-shadow: 1px 1px 10px 1px rgb(19, 187, 19);
}

.purchase-button--not-allowed {
   color: #a5a5a5;
   background-color: rgb(22 130 22);
   cursor: not-allowed;
}

.purchase-button--not-allowed:hover {
   box-shadow: none;
}

.purchase-button__icon {
   height: 100%;
   width: 100%;
}

.purchase-button__text {
   position: absolute;
   left: calc(50% - 75px);
   bottom: -2.7rem;
   padding: 3px 8px;
   width: 150px;
   font-size: 1.5rem;
   color: rgb(19, 187, 19);
   background: #fff;
   border-radius: 18px;
   text-align: center;
}

.purchase-button__text:hover {
   box-shadow: 1px 1px 10px 1px rgb(225, 225, 225);
}

.purchase-button__text--not-allowed {
   color: rgb(22 130 22);
   background-color: #a5a5a5;
}

.shopping-container {
   margin: 16px 0;
}

.purchase {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 10px 0;
}

.purchase-info {
   display: flex;
   align-items: center;
   width: 80%;
}

.purchase__amount {
   margin-right: 6px;
   height: 25px;
   width: 25px;
   text-align: center;
}

.total-price {
   display: flex;
   justify-content: space-around;
   align-items: baseline;
   width: 100%;
}

.install-app {
   bottom: 2.0rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   overflow: hidden;
   height: 0;
}

.install-app--show {
   height: auto;
}

.install-app--fixed {
   position: fixed;
}

.install-app__button {
   margin: 0.5rem 0;
   padding: 6px 9px;
   background-color: var(--c1);
   color: var(--white);
   border-radius: 10px;
   box-shadow: var(--install-button);
   transition: .2s ease;
}

.install-app__button:hover {
   box-shadow: var(--install-button-hover);
}

.install-app__text {
   padding: 2px 5px;
   font-size: 1.47rem;
   color: var(--c1);
   background-color: rgba(255,255,255, .8);
   backdrop-filter: blur(4px);
   border-radius: 8px;
}

/***************
MAIN
****************/

.body-left {
   margin-top: var(--nav-height);
   width: 100%;
   transition: .6s ease;
}

/*****************
PRESENTATION
******************/

#presentation-container {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 57px 10px 45px;
   height: 405px;
   background-color: var(--c2);
   background: var(--presentation);
}

.presentation {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 80%;
}

.presentation-picture {
   width: 93.34%;
}

.presentation-picture__img {
   margin: auto;
   width: 93.34%;
   max-width: 225px;
   background-color: var(--white);
   box-shadow: 0 0 5px 1px var(--white);
   border-radius: 50%;
}

.presentation__title {
   margin: 1.7em 0 0.4em;
   font-weight: 400;
   color: var(--white);
}

/*Productos*/
#categories {
   display: flex;
   justify-content: space-evenly;
   align-items: flex-start;
   flex-wrap: wrap;
   margin: 0 auto;
   padding: 40px 5%;
   max-width: 900px;
}

.category-card {
   display: flex;
   flex-direction: column;
   margin: 0 16px 24px;
   min-width: 220px;
   width: 100%;
   max-width: 447px;
   overflow: hidden;
   box-shadow: var(--card-border);
   border-radius: 15px;
   cursor: pointer;
}
.category-card:focus-visible,
.category-card:hover {
   box-shadow: var(--card-border-hover);
}

.category-card:last-child {
   margin-bottom: 0;
}

@media (max-width: 320px) {
   .category-card {
      max-width: 220px;
   }
}

.category-card__title {
   padding: 7px 5px;
   font-family: monospace;
   font-weight: 500;
   font-size: 2.0rem;
   color: var(--b);
   background-color: var(--c5);
   text-align: center;
}

.category-card__img {
   margin: auto;
}

.category-card-bottom {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 45px;
   background-color: var(--c5);
}

.card-bottom-button {
   padding: 3px;
   height: 30px;
   width: 30px;
   color: var(--negro);
   background-color: var(--white);
   border: 1px solid var(--negro);
   border-radius: 50%;
}

.card-bottom-button:hover {
   color: var(--white);
   background-color: var(--negro);
}

.card-bottom-button--selected {
   color: var(--white);
   background-color: var(--negro);
}

.card-bottom-button__icon {
   height: 100%;
   width: 100%;
}

.products-container {
   position: fixed;
   top: 0;
   right: -100%;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
   overflow: hidden scroll;
   background-color: var(--products-container);
   transition: .37s ease;
}

.products-container--show {
   right: 0;
}

.products-container-header {
   position: fixed;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: var(--nav-height);
   width: 100%;
   color: var(--b);
   background-color: var(--c1);
   box-shadow: 0 0 7px 1px rgba(0, 0, 0, .6);
}

.container-close--products {
   left: 5%;
}

.products-container-header__title {
   width: 62%;
   font-size: 2.2rem;
   text-align: center;
}

.products-container-body {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   align-items: flex-start;
   padding: calc(var(--nav-height) + 16px) 6px 16px;
}

.product {
   display: flex;
   flex-direction: column;
   margin: 8px 6px;
   min-width: 138px;
   width: 45%;
   max-width: 196px;
   overflow: hidden;
   background-color: var(--b);
   border-radius: 10px;
}

.product--hidden {
   display: none;
}

.product__title {
   padding: 6px 4px;
   font-size: 1.6rem;
   font-weight: 500;
   color: var(--b);
   background-color: var(--c5);
   text-align: center;
}

.product__img {
   width: 100%;
}

.product-description {
   position: relative;
   padding: 5px;
   border-top: 2px solid var(--c5);
   background-color: var(--b);
}

.product-description__paragraph {
   margin-top: 2px;
   font-family: monospace;
   color: #2f2f2f;
   font-size: 1.5rem;
}

.product-description__paragraph--absolute {
   position: absolute;
   top: 5px;
   right: 5px;
}

.p-description-buy {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 0 1px;
}

.p-d-buy-price {
   display: flex;
   font-family: cursive;
   font-style: italic;;
   font-size: 1.75rem;
   color: #000080
}

.p-d-buy-add {
   padding: 6px 5px 4px;
   height: 32px;
   width: 32px;
   color: var(--negro);
   background-color: var(--white);
   border: 1px solid var(--negro);
   border-radius: 50%;
   cursor: pointer;
}

.p-d-buy-add--added {
   color: var(--white);
   background-color: var(--negro);
}

.p-d-buy-add__icon {
   height: 100%;
   width: 100%;
}

/*****************
FOOTER
******************/

footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 5%;
   height: 60px;
   background-color: var(--c1);
   box-shadow: 0px 1px 15px 1px rgb(0 0 0 / 50%);
}

.footer-parrafo__nombre {
   font-size: 2.2rem;
   font-weight: 700;
   color: var(--b);
}

.icon {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 7px;
   height: 50px;
   width: 50px;
   color: var(--b);
   border-radius: 50%;
   transition: .3s ease;
}

.icon:focus-visible,
.icon:hover {
   background-color: #021d41;
}

.icon__whatsapp {
   height: 100%;
   width: 100%;
}