@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;700;900&display=swap');
:root {
   --rad: .3rem;
   --dur: .3s;
   --color-dark: #2f2f2f;
   --color-light: #fff;
   --color-brand: #d82505;
   --height: 2.5rem;
   --btn-width: 2rem;
   --bez: cubic-bezier(0, 0, 0.43, 1.49);

   /* 4 variantes de rojo */
   --color-brand-darker: #B92004;
   /* --color-brand-lighter: #F33311;
   --color-brand-xlighter: #FF674C; */

   /* 4 variantes de negro */
   --color-dark-darker: #212020;
   --color-dark-lighter: #766464;
   /* esta :/ */
   --color-dark-xlighter: #999999;


   /* colores neutros: blanco y grid para textos placeholder */
   --color-white: white;
   --color-placeholder: #373737;

   --font-size-xs: .9rem;
   --font-size-s: 1rem;
   --font-size-m: 1.3rem;
   --font-size-l: 1.6rem;
   --font-size-xl: 3rem;

   --padding-regular: 1rem;
}

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

html {
   height: -webkit-fill-available;
}

body {
   min-height: 100vh;
   min-height: fill-available;
   background-color: var(--color-light);
   padding: 0;
   margin: 0;
   color: var(--color-dark);
}

h1,
h2,
h3 {
   color: var(--color-dark-darker);
}


/* -------------------------------------------------------------- */


/* elementos html */
figure,
img,
video {
   display: block;
   max-width: 100%;
}

li {
   list-style: none
}

textarea {
   font: inherit;
   padding: .5rem .8rem;
   resize: none;
   border: none;
   background: var(--color-dark-xlighter);
   border-radius: var(--rad);
}
a, button {
   text-decoration: none;
   color: inherit;
}
button {
   background: transparent;
   border: none;
   outline: .1rem solid transparent;
   cursor: pointer !important;
}
/* -------------------------------------- */

p {
   margin: 0 !important;
}
i {
   border-radius: 5px;
}

input {
   border-radius: 20px !important;
}
input:invalid,
textarea:invalid {
   background: red;
}

.ui.grid {
   width: 100% !important;
}


/* layout */
/* flex */
.flex,
.flexCol,
.flexRowToCol {
   display: flex;
   gap: var(--gap, 1rem);
   flex-flow: row wrap;
}

.flexCol {
   flex-flow: column wrap;
   align-items: var(--align-items, center);
}

.flex-0 {
   flex: 0;
}

.alignItemsCenter {
   align-items: center;
}


.gap-1 {
   gap: 1rem;
   display: grid;
}
.gap-1-to-0 {
   display: grid;
   gap: 1rem;
}

/* grid 
.grid,
.grid-5-5,
.grid-7-3,
.grid-3-7,
.grid-4-6 {
   display: grid !important;
   gap: var(--gap, 1rem);
   align-content: start;
}
*/

.autogrid {
   --column-width: min(20rem, 100%);
   display: grid !important;
   grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
   gap: 1em;
}


/* margenes extra */
.mb-1 {
   margin-bottom: 1rem !important;

}

.spaced-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.respuesta {
   position: absolute !important;
   margin-top: 2rem;
   width: 100% !important;
   text-align: center;
   opacity: 0.8;
   color: #fff;
   font-size: 1.3rem;
   z-index: 10;
   padding: 1rem;
}

.respuesta>i {
   width: 35rem !important;
   margin: 0 auto !important;
   padding: 1rem 2rem;
   border: solid 1px #c1c1c1;
   border-radius: 0.4rem;
   background-color: #0080ff !important;
   color: #fff;
}


/* Estilos para cart.php #myCart .popupCart*/

#myCart {
   width: min(20rem, 100%);
}

.listaCarrito>.detalle {
   transition: 0.5s;
}

.listaCarrito>.detalle:hover {
   background-color: #e0e0e0;
   transition: 0.5s;
}

/*.menuPri .icons a{padding-top: .3rem;}*/
.menuPri .icons .btnDesc {
   display: none;
}

content>div {
   margin: 0 auto;
   max-width: 1900px;
}

.benefits {
   width: 100%;
   display: flex;
   flex-flow: row nowrap;
   overflow-x: scroll;
}

.benefits>div {
   width: 7rem;
   margin: 1rem;
   background-color: #a9a9a9;
   padding: 1rem;
}

.categories {
   width: 100%;
   padding: 0rem 0.5rem;
}

.categorie {
   width: 100%;
   margin-top: 1rem;
   /*background-color: #FDFDFD;*/
   border-radius: 0.3rem;
   padding: 0.3rem;
   /*box-shadow: 0px 0px 10px #000*/
}

/* .categorie .titleCat {
  display: flex;
  flex-flow: row nowrap;
} */

.titleCat div {
   width: 50%;
}

.titleCat div:first-child {
   padding: 0.3rem 0.1rem 0px 0.5rem;
}


.categorie .catList {
   width: 100%;
   overflow-x: auto;
   display: flex;
   flex-flow: row nowrap;
   position: relative;
}

.catList {
   --column-width: min(10rem, 100%);
   align-content: start;
}

footer {
   margin-top: 1rem;
}

footer>div {
   max-width: 1900px;
   margin: 0 auto;
}

.sitemap {
   background-color: #414141;
   color: #fff;
}

.footerAcordion a {
   text-decoration: none;
   color: #fff;
}

.footerAcordion ul {
   list-style: none;
}

.footerAcordion>.title {
   color: rgb(207, 207, 207) !important;
}

.aTitle,
.aTitle a {
   color: #960000;
   padding: 1rem, 0.7rem !important;
   font-weight: bold;
   font-size: 1.3rem;
}

.btnRestar {
   border-radius: 5px 0px 0px 5px !important;
   margin: 0px !important;
}

.btnSumar {
   border-radius: 0px 5px 5px 0px !important;
   margin: 0px !important;
}

.aSubtitle {
   background-color: #960000;
   color: #ffde00;
   font-size: 1.1rem;
}

.iconActive {
   opacity: 1 !important;
}

.borderNone {
   border: none !important;
}


/* Estilos de texto */

.tRight {
   text-align: right;
}

.tLeft {
   text-align: left !important;
}

.text-big {
   font-size: 2rem;
   font-weight: bold;
}

/* Para los afiliados tiendas (logo y detalles) */
.subCat {
   /*opacity: 0.9;*/
   transition: all 0.2s linear;
   text-align: center;
   display: flex;
   flex-wrap: wrap;
   margin: 1rem auto;
   width: min(12rem, 100%);
}

.subCat>a {
   width: 100%;
   display: block;
}

.subCatImage {
   height: 10rem;
   width: 10rem;
   /* overflow: hidden; */
   border-radius: .6rem;
   box-shadow: 0px 0px 10px #eee;

   margin-inline: auto;

}

.subCat:hover {
   color: pink !important;
   transform: scale(0.9);
   opacity: 1;
   transition: all 0.2s linear;
}

.subCat:hover .subCatImage>img {
   opacity: 0.8;
   background-color: rgba(0, 0, 0, 0.9) !important;
}

.subCatImage img {
   object-fit: contain;
   margin: 0px auto 0px;
   display: block;
   max-height: 11rem;
   min-width: 11rem;
}

.subCatTitle {
   margin-top: 1em;
   margin-bottom: 0;
   font-size: 1rem;
   font-weight: bold;
}
.image-wrapper {
   width: fit-content;
   margin-inline: auto;
}

/* .afiliado_calificacion { */
.corner-right-bottom {
   position: absolute;
   bottom: 0;
   right: 0;
   background: linear-gradient(140deg, transparent 40%, white);
   width: 2.5rem;
   height: 2rem;
   place-content: center;
   display: grid;
   grid-template-columns: 1fr 1fr;
}

/*.logo{background-color: rgb(81,180,58); font-size: 2rem;
background: linear-gradient(90deg, rgba(81,180,58,1) 0%, rgba(7,152,1,1) 30%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 69%, rgba(149,7,7,1) 71%, rgba(134,4,4,1) 100%);}*/

.ulH {
   height: auto;
   margin: 0.5rem;
}

.ulH li {
   text-decoration: none;
   display: inline;
   padding: 0.3rem;
}

.ulH li a {
   color: #717171;
}

.ulH li a:hover {
   text-decoration: underline;
}

/* M¨®viles en horizontal o tablets en vertical
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
   :root {
      --padding-regular: 2rem;
   }
   .gap-1-to-0 {
      gap: 0;
   }
   .flexRowToCol {
      flex-flow: column nowrap;
      align-items: var(--align-items, center);
   }
}

/* Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
   
   .grid-5-5,
   .grid-7-3,
   .grid-3-7,
   .grid-4-6 {
      display: grid !important;
      gap: var(--gap, 1rem);
   }
   .grid-7-3 {
      grid-template-columns: 70% 1fr;
   }
   .grid-3-7 {
      grid-template-columns: 1fr 70%;
   }
   .grid-4-6 {
      grid-template-columns: 1fr 60%;
   }
   .grid-5-5 {
      grid-template-columns: 1fr 1fr;
   }
}

/* Monitores grande superiores a 
   ------------------------------------------------------------------------- */
@media (min-width: 1200px) {}


/* posicionamiento al centro,derecha, etc y vista */

.dNone {
   display: none;
}

.relative {
   position: relative !important;
}

.mia {
   display: block;
   margin-inline: auto !important;
   margin: 0 auto !important;
}



.fullWidth,
.w-100 {
   width: 100%;
   width: -moz-available;
   width: -webkit-fill-available;
   width: fill-available;
   /* fill-available is similar to 100%, but won't cause an overflow if there are margins/padding/borders */
}
.w-h-100 {
   width: 100%;
   height: 100%;
   display: grid;
   place-content: center;
}
.mta {
   margin-top: auto;
}

/* paddings */


.paddingInline {
   /* padding a la der e izq */
   padding-inline: var(--padding-regular);
}

.paddingBlock {
   /* padding arriba y abajo */
   padding-block: var(--padding-regular);
}

.padding,
.store {
   /* padding normal */
   padding-block: var(--padding-regular);
   padding-inline: var(--padding-regular);
}

/* efectos como sombras */
.rounded {
   border-radius: .5rem;
   overflow: hidden;
}

.round {
   border-radius: 100vh;
   overflow: hidden;

   width: fit-content;
   /* por si lleva imagen dentro */
}

.box-shadow--layered {
   box-shadow:
      0px 1px 2px -1px rgba(0, 0, 0, 0.02),
      0px 2px 4px -2px rgba(0, 0, 0, 0.08),
      0px 4px 8px -4px rgba(0, 0, 0, 0.10),
      0px 8px 16px -8px rgba(0, 0, 0, 0.12);
}




/* Secion  */

/* Resumen de pedido */

/* el carrito que revisa el cliente */
.group {
   margin-bottom: 1rem;
}

.cartItem {
   padding: 1.2rem .7rem;
}

.noteForStore {
   margin: .7rem .7rem;
}

.itemInfo {
   --align-items: start;
   --gap: .2rem;
}

/* ? esta clase puede usarse para todas las imagenes miniatura */
.thumbContainer {
   --size: 4rem;
   width: var(--size);
   height: var(--size);
   border-radius: var(--rad);
   overflow: hidden;
}


.itemName {
   font-weight: bold;
   font-size: var(--font-size-m);

}

.noteForStore {
   background: #eeeded;
   color: var(--color-dark-lighter);
}

.storeLogoContainer {
   --logo-size: 5rem;
   overflow: hidden;
   width: var(--logo-size);
   height: var(--logo-size);
}

.storeInfo {
   --gap: .3rem;
}






/* Botones */

i.icon {
   margin: 0 !important;
}

button.icon {
   padding: .5rem !important;
}



/* Para cards de afiliados tiendas negocios */
.distanciaUsuarioTienda {
   font-size: .9rem;
   color: var(--color-placeholder);
}

/* si esta vacio no ocupa espacio */
.distanciaUsuarioTienda:empty {
   display: none;
}


/* skeleton */
.has-skeleton:empty {
   display: block;
   background-color: #bdc3c7 !important;
   border-color: #bdc3c7 !important;
   animation-name: skeletonAnimation;
   animation-duration: 1.5s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   height: 1rem;
   width: 100%;
}

@keyframes skeletonAnimation {
   0% {
      opacity: 0.8;
   }

   50% {
      opacity: 0.4;
   }

   100% {
      opacity: 0.8;
   }
}