@charset "utf-8";
/* CSS Document */
#navegadorsuperior a:nth-of-type(2) {
    font-weight: 600;
    background-size: 100% 1px;
}
#menulateral > nav > a:nth-of-type(2) {
    font-weight: 600;
    text-decoration: underline;
}
#navegadorsuperior a:nth-of-type(2):hover, #menulateral > nav > a:nth-of-type(2):hover {
    background-size: 0% 0%;
}
body {
    background-color: var(--u-i0);
    opacity: 1;
}
main {
    font-size: 1em;
    font-size: 1em;
    background: linear-gradient(192.38deg, rgba(189, 185, 215, 0.4) 48.17%, rgba(174, 170, 206, 0.4) 70.13%), linear-gradient(206.03deg, rgba(124, 115, 191, 0.4) 16.45%, rgba(202, 198, 229, 0.4) 39.47%), #FFFFFF;
    padding-top: 4em;
}
#sinoencuentras {
    position: fixed;
    z-index: 10;
    top: 25%;
    right: 15%;
    border-radius: 6px;
    width: 70%;
    background-color:var(--morado400);
    color: var(--blanco);
    padding: 3em .5em;
    transition: transform .2s ease-in 0s;
    transform: scale(0);
    text-align: center;
}
#sinoencuentras p:first-of-type {
    font-size: 1.75em;
    font-weight: 650;
}
#sinoencuentras.abierto {
    transform: scale(1);
}
#sinoencuentras img {
    position: absolute;
    right: 1em;
    top: 1em;
    width: 1.75em;
    height: 1.75em;
    padding: .25em;
    background-color: var(--blanco);
    border-radius: 50%;
    cursor: pointer;
}


h1 {
    margin: 0px;
    position: relative;
    z-index:2;
    font-size: 1em;
    color: var(--morado500);
}
h1 > div {
    padding-bottom: 1em;
    background: linear-gradient(0deg, #F3F3F2 11.12%, #F3F3F2 32.45%, #B5B1D2 100);
    padding-right: var(--margen);
    padding-left: var(--margen);
}
#todoelcontadorproductos {
    font-weight: 500;
    font-size: .875em;
    
}
h1 > div > div {
    font-size: 2.5em;
}
#textosuperior {
    padding-left: var(--margen);
    padding-right: var(--margen);
    padding-bottom: 1.75em;
}
#contenedorvinculosfiltros {
    display: flex;
    align-items: flex-start;
}
#crearmarco {
    margin-top: 5.75em;
}
#crearmarco, #contenedortextoinferior {
    padding: var(--margendoble) var(--margen);
    border-radius: 1em;
    background-color: var(--u-i0);
}
#contenedorvinculosfiltros > div:first-of-type {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#contenedorvinculosfiltros > div:nth-of-type(2) {
    display: none;
    justify-content: space-between;
    align-items: center;
}
#contenedorvinculosfiltros > div:last-of-type {
    white-space: nowrap;
}
#contenedorvinculosfiltros > div:last-of-type select {
    border: none;
    /*-webkit-appearance: none; -moz-appearance: none; appearance: none;*/
    padding: .25em 0px;
}
#contenedorvinculosfiltros > div > span.nocortar {
    display: inline-flex;
    padding: .5em 1.5em;
    padding-bottom: .75em;
    border-radius: 1em;
   /* border: solid 1px var(--colorgris);*/
    margin-right: 1em;
    align-items: center;
    cursor: pointer;
    transition: background-color .2s ease-in 0s;
    background-color: var(--blanco);
    border-radius: 1.5em;
    font-weight: 500;
    margin-bottom: .75em;
}
#contenedorvinculosfiltros > div > span.nocortar:hover {
    background-color: var(--morado100);
}

#contenedorfiltros .contenedoraperturavertical {
    transition-duration: .3s;
    
}
#filtrosactivos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;    
}
#filtrosactivos.abierto {
    padding-top: 1em;
}
#filtrosactivos:only-child {
    display: none;
}
#filtrosactivos #botonborrartodos {
    order: 5000;
    margin-right: 1em;
    cursor: pointer;
    display: none;
    background-color: transparent;
    font-weight: 500;
}
#filtrosactivos #botonborrartodos:hover {
    text-decoration: underline;
    color: black;
}
#filtrosactivos #botonborrartodos.abierto {
    display: inline-flex;
}
#filtrosactivos > span {
    background-color: var(--u-i100);
    padding: .25em 1em;
    padding-bottom: .5em;
    border-radius: 1.5em;
    transition: color .2s ease-in 0s, background-color .2s ease-in 0s;
    margin-bottom: .75em;
}
#filtrosactivos > span:hover {
    color: var(--blanco);
    background-color: var(--u-i300);
}
#filtrosactivos > .nocortar {
    display: inline-flex;
    align-items: center;
}
#filtrosactivos > .nocortar {
    margin-right: 1em;
    display: inline-flex;
    align-items: center;    
    font-weight: 500;    
}
#filtrosactivos > .nocortar > span {
    cursor: pointer;
}
#filtrosactivos > .nocortar > span.hayfiltros {
    margin-left: .5em;
    transition: transform .3s ease-in-out 0s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: var(--u-i0);
    height: 1.5em;
    width: 1.25em;
    line-height: 1px;
    transform: scale(1.2,1);
}
#filtrosactivos > .nocortar:hover  > span.hayfiltros{
    color: black;
}
#contenedorfiltros {
    margin-top: 0px;
}
#contenedorfiltros  .contenedoraperturavertical > div {
    padding: 1em .25em;
    line-height: 1.75em;
    text-align: center;
    border-top: 1px solid var(--colorgris);
    border-bottom: 1px solid var(--colorgris);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#contenedorfiltros  #filtrosdestinatario > div {
    grid-template-columns: repeat(3,auto);
}
#contenedorfiltros  .contenedoraperturavertical > div input {
    margin-right: .5em;
}
#contenedorfiltros h2,  #contenedorfiltros > div:first-of-type  {
    display: none;
}
#contenedorproductos {
    margin-top: 2em;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 2em;
    
}

#contenedorproductos > section {
    transition: background-color .3s ease-in-out 0s, border .3s ease-in-out 0s;
    background-color: white;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 6px;
}
#contenedorproductos > section:hover {
    background-color: var(--morado200);
}
#contenedorproductos .verenpestana {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: auto;
    background-image:url("../imagenes/verenpestana.svg");
    background-size: 100% 100%;
    transition: background-image .2s ease-in 0s;
    cursor: pointer;
}
#contenedorproductos .verenpestana:hover {
    background-image:url("../imagenes/verenpestanahover.svg");
}
#contenedorproductos .verenpestana img {
    opacity: 0;
    width: 100%;
    height: auto;
    display: block;
}
#contenedorproductos .datosproducto {
    flex-grow: 1;
    padding: 1em;
    display: flex;
    flex-direction: column;
}
#contenedorproductos .imagenproducto {
    background-size: cover;
    background-position: center center;
    position: relative;
}
#contenedorproductos .datamano {
    display: block;
    width: 100%;
    height: auto;
}
#contenedorproductos p {
    margin: 0px;
    font-weight: 500;
}
#contenedorproductos .linea1 {
    font-size: .875em;
}
#contenedorproductos .linea2 {
    font-size: 1em;
    font-weight: 550;   
    margin-top: .25em;
    margin-bottom: .15em;
    flex-grow: 1;
}
#contenedorproductos .linea3 {
    font-size: 1em;
    font-family: 'Syne', sans-serif;
    font-weight: 700;  
    display: flex;
}
#contenedorproductos .linea3 > span {
    font-size: .875em;
    background-color: #D9D9D9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
    
    line-height: .8em;
    border-radius: 2.4em;
    transition: background-color .3s ease-in-out 0s
}
#contenedorproductos > section:hover .linea3 > span {
    background-color: var(--blanco);
}
#contenedorproductos .linea3 > span:last-of-type {
    margin-left: .5em;
    align-items: center;
    text-transform: uppercase;
    font-size: .75em;
}
#contenedorproductos .linea3 > span:first-of-type {
    align-items: center;
    border-radius: 50%;
    padding-top: 1.2em;
    padding-bottom: .8em;
}
#contenedorproductos .linea3 > span:first-of-type > span {
    font-size: .75em;
    font-weight: 500;
}
#contenedorproductos .linea4 {
    font-size: 1.125em;
    font-weight: 600;
    margin-top: .5em;    
}
#contenedorproductos .linea5 {
    font-size: .75em;
}
section .tipoproducto, section .textoresaltado {
    font-family: 'Syne', sans-serif;
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-weight: 550;
    padding: .5em 1em;
    font-size: .75em;
    text-transform: uppercase;
    background-color: var(--rojo400);
    color: var(--u-i900);
    border-radius: 1.3em;
}
section .textoresaltado {
    top: inherit;
    left: inherit;
    bottom: .5rem;
    right: 1rem;
    font-size: .675em;
    background-color: var(--morado400);
    color: var(--blanco);
    
    transition: background-color .3s ease-in-out 0s,color .3s ease-in-out 0s
}
/*section:hover .textoresaltado {
    color: var(--negro);
    background-color: var(--blanco);
}*/
section .textoresaltado:empty {
    display: none;
}
#contenedorvinculosfiltros #botonabrir0 {
    background-color: var(--morado300);
    font-weight: 600;
    transition: color .2s ease-in 0s, background-color .2s ease-in 0s;
}
#contenedorvinculosfiltros #botonabrir0:hover {
    color: var(--blanco);
    background-color: var(--morado400);
}
#botoncerrartodoslosfiltros {
    color: var(--morado600);
}
#botoncerrartodoslosfiltros:hover {
    text-decoration: underline;
}
#contenedorordenar {
    transition: color .2s ease-in 0s;
}
#contenedorordenar > span {
    font-size: .875em;display: inline-block; vertical-align: middle;
}
#contenedorordenar select {
    background-color: transparent;
}
#contenedorordenar:hover {
    color: var(--morado500);
}
#contenedorordenar  option {
    text-align: right;
}
#contenedorfiltros input[type="checkbox"], #contenedorfiltrostipo  input[type="checkbox"] {
    display: none;
}
#contenedorfiltros .subcontenedorfiltros label {
    cursor: pointer;
    display: inline-block;
    margin-left: .5rem;
    margin-right: .5rem;
    font-weight: 500;
    margin-bottom: .75em;
}
#contenedorfiltros .subcontenedorfiltros label:hover {
    text-decoration: underline;
}
#contenedorfiltros .subcontenedorfiltros label.seleccionado {
    color: var(--morado400);
    text-decoration: underline;
}
#contenedorfiltrostipo {
    height: 5.25em;
    width: 100%;
    overflow: hidden;
    text-align: center;
    overflow-x: auto;
    overflow-y:hidden;
    margin-bottom: 1em;
}
#deslizadorfiltrostipo {
    display: inline-flex;
    width: auto;
    height: 100%;
}
#deslizadorfiltrostipo label {
    display: inline-block;
    padding: 0px;
    height: 100%;
    flex-shrink: 0;
    cursor: pointer;
    background-color: var(--blanco);
    border-radius: 1em;
    transition: background-color .2s ease-in 0s;
    margin-left: .5rem;
    margin-right: .5rem;
}
#deslizadorfiltrostipo label:hover {
    background-color: var(--morado100);
}

#deslizadorfiltrostipo label img{
    display: block;
    height: 100%;
    width: auto;
}
#deslizadorfiltrostipo  label.seleccionado  {
    background-color: var(--morado200);
}
#contenedorordenar {
    display: none;
}
#contenedorordenarpc {
    text-align: right;
    margin-bottom: 1em;
}
#contenedorordenarpc select {
    text-align: center;
    border-radius: 1.5em;
    background-color: var(--blanco);
    font-weight: 600;
    padding-top: .25em;
    padding-bottom: .35em;
    border: none;
    border-right: solid 1em var(--blanco);
    
    transition: background-color .2s ease-in 0s, border-color .2s ease-in 0s;
}
#contenedorordenarpc select:hover {
    background-color: var(--morado100);
    border-color: var(--morado100);
        
}
#contenedorordenarpc option {
    background-color: var(--blanco);
    border-color: transparent;
}
#contenedorordenarpc option:checked{ 
    color: var(--morado500);
    font-weight: 600;
}

#contenedortextoinferior {
    margin-top: 1.75em;
    position: relative;
}
#contenedortextoinferior > img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1.75em;
}
#subcontenedortextoinferior {
    min-height:10em;
    transition-duration: .3s;
}
#textoinferior h2 {
    color: var(--morado500);
    margin-bottom: .25em;
    margin-top:0px;
}
#contenedorbotonleermas {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    background-color: var(--u-i0);
    padding: 0px;
    padding-bottom: 3em;
    padding-top: 1.5em;
    text-align: right;
    overflow: hidden;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}
#contenedorbotonleermas button {
    border: none;
    background-color: transparent;
    color: var(--morado400);
    margin-right: var(--margen);
    padding: .25em 0px;
    border-bottom: 1px solid var(--morado400);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.125em;
}
#contenedorbotonleermas button img {
    height: .75em;
    width: auto;
    transition: transform .3s ease-in 0s;
    margin-left: .75em;
}
@media (max-width: 1400px) {
    #contenedorproductos {
        grid-template-columns: repeat(3,1fr);
    }
   /* #contenedorfiltros  .contenedoraperturavertical > div {   
        grid-template-columns: repeat(6,16.6666%);
    }*/
}
@media (max-width: 1200px) {
    /*#contenedorfiltros  .contenedoraperturavertical > div {   
        grid-template-columns: repeat(5,20%);
    }*/
}
@media (max-width: 1050px) {
    #contenedorproductos {
        grid-template-columns: repeat(2,1fr);
    }
  /*  #contenedorfiltros  .contenedoraperturavertical > div {   
        grid-template-columns: repeat(4,25%);
    }*/
    #contenedorvinculosfiltros {
        margin-top: 1em;
    }
}

@media (max-width: 800px) {  
   /* h1 > div {
        padding-top: 5em;
    }*/
    main {
        padding-top: 2em;
    }
    #contenedorvinculosfiltros {
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
    }
    #contenedorvinculosfiltros > div:first-of-type {
        display: none;
    }
    #contenedorvinculosfiltros > div:not(:first-of-type) {
        display: flex;
        align-items: center;
        background-color: var(--blanco);
        height: 3em;
        padding: 0px 1em;
        padding-bottom: .25em;
        border-radius: 1.5em;
        
    }
   /* #contenedorvinculosfiltros > div:last-of-type select {
        -webkit-appearance: none; -moz-appearance: none; appearance: none;    
    }*/
    
    #contenedorfiltros {
        position: fixed;
        top: 0px;
        right: 100%;
        width: 100%;
        height: 100vh;
        transition: transform .4s ease-in 0s;
        background-color: white;
        overflow-x: hidden;
        overflow-y: auto;
         display: flex;
        flex-direction: column;
        z-index: 4;
        margin: 0px;
        padding: 1em var(--margen);
        padding-top: 0px;
        border-top: 1px solid var(--colorgris);
        background-color: white;
        /*color: var(--morado500);*/
    }
    #contenedorfiltros.abierto {
        transform: translateX(100%);
        background-color: var(--u-i0);
    }
    #contenedorfiltros > div:first-of-type {
        display: flex;
        justify-content: space-between;
        position: sticky;
        top: 0px;
        padding-bottom: 1em;
        display: flex;
        background-color: var(--u-i0);
    }
    #contenedorfiltros > div:first-of-type img {
        height: 1.25em;
        width: auto;
        transform: translateY(150%);
    }
    #contenedorfiltros>div:last-of-type {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding-bottom: 3em;
        
        
    }
    #contenedorfiltros > div:first-of-type > h2 {
        padding-top: 1em;
        font-size: 1.5em;
        color: var(--morado500);
    }
    #contenedorfiltros h2 {
        display: block;
        font-size: 1.25em;
    }
    #contenedorfiltros > div:last-of-type h2 {
        margin-top: 0px;
        margin-bottom: 1em;
        /*flex-grow: 1;*/
        transition: flex-grow .3s linear 0s;
        font-weight: 500;
        background-color: var(--blanco);
        color: black;
        font-family: 'Plus Jakarta Sans', sans-serif;
        padding: .75em 1em;
        padding-bottom: 1em;
        border-radius: 1.5em;
    }
    #contenedorordenar {
        align-items: center;
    }
    #contenedorordenar .simbolo {
         transform: scale(.8);
        font-weight: 450;
    }
   #contenedorordenar  option {
        text-align: left;
    }
    
    
    #contenedorfiltros  .contenedoraperturavertical > div {
        display: flex;
        flex-direction: column;
        border-top: none;
        border-bottom: none;
    }
    #cuerpo #contenedorvinculosfiltros .menuenmovil {
        
    }
    .subcontenedorfiltros {
        font-size: 1.25em;
    }
    #contenedorfiltros .contenedoraperturavertical > div {
        padding: 0.25em;
          padding-bottom: 1em;
        padding-left: 1em;
    }
    #contenedorordenarpc {
        display: none;
    }
}
@media (max-width: 700px) {
    #crearmarco, #contenedortextoinferior {
        padding: calc(var(--margen) + 1em);
    }
    #contenedorproductos {
        grid-template-columns: repeat(1,1fr);ç
    }
    #sinoencuentras {
        right: 5%;
        width: 90%;
    }
}
@media (max-width: 450px) {
    #contenedorfiltrostipo {
        height: 6em;
    }
    #contenedorvinculosfiltros {
        flex-direction: column;
        align-items: stretch;     
        font-size:larger;
    }
    #contenedorvinculosfiltros div:nth-of-type(2) {
        margin-bottom: 1em;
    }
    #contenedorvinculosfiltros div:not(:first-of-type) {
        justify-content: center;
    }
}