/*** Estilos EDP - Productos - Ficha **/
/** 2. Layout: l-; 2.1. Home */
/** 3. Componente: c-; 3.1. Slider */
/** 4. Paginas: p- */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/** 2. Layout */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/** 3. Componentes */

/* 3.1. Search */

.c-search {
    overflow: hidden;
    width: 100%;
}

.c-search > div {
    margin: 0 0 1rem;
    padding: 0.5rem;
}

.c-search > div:last-child {
    margin: 0;
}

.c-search .c-btn {
    -webkit-border-radius: 4rem;
    border-radius: 4rem;
    font-size: 1.4rem;
    font-weight: normal;
    text-transform: none;
}

.c-search__content {
    border: 0.1rem solid #f3f3f3;
    -webkit-border-radius: 1.5rem;
    border-radius: 1.5rem;
    -webkit-box-shadow: 0 2px 4px #ddd;
        box-shadow: 0 2px 4px #ddd;
    display: none;
    margin-top: 2rem;
}

.c-search__content--open {
    display: block;
}

.c-search__top,
.c-search__bottom {
    padding: 2rem;
}

.c-search__top label {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.c-search__top select {
    background-color: transparent;
    -webkit-border-radius: 4rem;
    border-radius: 4rem;
    width: 100%;
}

.c-search__top select:focus {
    border: 0.1rem solid #f3f3f3;
}

.c-search__bottom {
    border-top: 0.1rem solid #f3f3f3;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
}

.c-search__delete {
    background-color: transparent;
    border: 0 none;
    color: var(--color-primary);
    text-decoration: underline;
}

.c-search__delete:hover,
.c-search__delete:focus {
    color: var(--color-secondary);
}

.c-search__bottom .c-btn {
    min-width: auto;
    padding: 1.2rem 3rem 1.1rem;
}

/* 3.1.1. Radio */

.c-search__radio label {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	padding: 0.5rem 0 0.5rem 3rem;
	position: relative;
}

.c-search__radio:last-child label {
    margin-bottom: 0;
}

.c-search__radio label input {
	position: absolute;
	right: 0;
	visibility: hidden;
}

.c-search__radio label input + i {
    background: #f0f0f0;
    border: 0.2rem solid rgba(0,0,0,0.2);
    left: 0;
    position: absolute;
    top: 0.2em;
}

.c-search__radio label input[type=radio] + i {
    -webkit-border-radius: 100%;
    border-radius: 100%;
    height: 2rem;
    left: 0;
    width: 2rem;
}

.c-search__radio label input[type=radio] + i:before {
	background: var(--color-primary);
	-webkit-border-radius: 100%;
	border-radius: 100%;
	content: '';
	display: block;
	height: 1.6rem;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
	width: 1.6rem;
	z-index: 1;
}

.c-search__radio label input[type=radio]:checked + i:before {
	opacity: 1;
	-webkit-transform: scale(1);
    -ms-transform: scale(1);
        transform: scale(1);
}

.c-search__radio label:hover input[type=radio]:not(:checked) + i {
	background: #ccc;
}

/* 3.2. Paginador */

/** Paginador */

.c-paginador {
    min-height: 3rem;
    overflow: hidden;
    padding: 0 4rem;
    position: relative;
    width: auto;
}

.c-paginador__numbers {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    overflow: hidden;
    padding: 0 1rem;
    text-align: center;
}

.c-paginador__numbers a {
    font-size: 1.4rem;
    padding: 0;
    text-decoration: none;
    color: var(--font-color-primary);
    min-width: 4rem;
    min-height: 4rem;
    /* display: inline-block; */
    /* vertical-align: middle; */
    padding: 0.8rem 0;
}

.c-paginador__numbers a:hover {
    text-decoration: underline;
}

.c-paginador__numbers a.current {
    color: var(--font-color-primary);
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.5rem 0;
}

.c-paginador__arrow {
    background-color: var(--color-primary);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #FFF;
    display: block;
    height: 3rem;
    padding: 0.5rem 0 0;
    position: absolute;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 3rem;
}

.c-paginador__arrow:hover {
    background-color: var(--color-secondary);
    color: #fff;
}

.c-paginador__arrow--left {
    left: 0;
}

.c-paginador__arrow--right {
    right: 0;
}

.c-paginador__arrow i {
    border: solid #ffffff;
}

.c-paginador__arrow--left i {
    border-width: 0 0.2rem 0.2rem 0;
    content: '';
    display: inline-block;
    margin: 0 auto;
    padding: 0.3rem;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    vertical-align: middle;
}

.c-paginador__arrow--right i {
    border-width: 0.2rem 0 0 0.2rem;
    content: '';
    display: inline-block;
    margin: 0 auto;
    padding: 0.3rem;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    vertical-align: middle;
}

.c-paginador__info {
    overflow: hidden;
    text-align: center;
    width: 100%;
}

/* 3.3 Loading */

.c-loading {
    background-color: rgba(0,0,0,0.8);
    display: none;
    height: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width:100%;
    z-index: 500000;
}

.c-loading > div {margin: auto;}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-secondary);
  -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
          animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  -webkit-animation: lds-ellipsis1 0.6s infinite;
          animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  -webkit-animation: lds-ellipsis2 0.6s infinite;
          animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  -webkit-animation: lds-ellipsis2 0.6s infinite;
          animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  -webkit-animation: lds-ellipsis3 0.6s infinite;
          animation: lds-ellipsis3 0.6s infinite;
}
@-webkit-keyframes lds-ellipsis1 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes lds-ellipsis1 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes lds-ellipsis3 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
}
@-webkit-keyframes lds-ellipsis2 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(24px, 0);
            transform: translate(24px, 0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(24px, 0);
            transform: translate(24px, 0);
  }
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/** 4. Productos */

.p-product {
    display: flex;
    flex-flow: column;
    overflow: hidden;
    width: 100%;
}

.p-product__search {
    margin: 0 0 3rem;
    overflow: visible;
    width: 100%;
}

.p-products__items {
    overflow: hidden;
    padding: 1rem;
    width: 100%;
}

.p-products__items ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
}

.p-products__card {
    background-color: #fff;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    box-shadow: 2px 2px 10px rgb(0, 0, 0, 0.25);
    margin: 0 0 1.5rem 0;
    max-width: 28rem;
    overflow: hidden;
    padding-top: 15rem;
    position: relative;
    transition: all 0.6s ease 0s;
    width: 100%;
}
  
.p-products__card:last-child {
    margin-bottom: 1.5rem;
}

.p-products__card::before {
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    content: '';
    display: none;
    height: 50%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
  
.p-products__card:hover::before {
    display: block;
}
  
.p-products__card img {
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
  
.p-products__description {
    background-color: #fff;
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    height: 100%;
    padding: 2rem 1.5rem 1rem;
    position: relative;
    z-index: 2;
}
  
.p-products__description > span {
    color: var(--color-secondary);
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.8rem;
}
  
.p-products__description > h3 {
    color: var(--font-color-primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    position: relative;
}
  
.p-products__description > h3::before {
    background-color: #e5e5e5;
    bottom: 0;
    content: '';
    height: 0.2rem;
    left: 0;
    position: absolute;
    width: 3.6rem;
}
  
.p-products__description > p {
    color: var(--color-text-secondary);
    font-size: 1.3rem;
    font-weight: 300;
    margin: 0 0 2rem;
}
  
.p-products__description > a {
    font-size: 1.5rem;
    width: 100%;
}

.p-product__content > p {
    font-size: 1.8rem;
    margin: 0 0 1.5rem;
    text-align: right;
}

.p-product__content > p.small {
    font-size: 1.4rem;
    margin: 0 0 2.5rem;
    padding-right: 0.5rem;
}

@media (min-width: 520px) {
    .p-products__items ul {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -webkit-box-align: normal;
        -ms-flex-align: normal;
        align-items: normal;
    }
  
    .p-products__card {
        margin-right: 2%;
        width: 49%;
    }
  
    .p-products__card:nth-child(2n+2) {
        margin-right: 0;
    }
}

@media (min-width: 768px) {
    .p-product {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
    }

    .p-product__search {
        flex-basis: 25rem;
        flex-grow: 1;
        max-width: 25rem;
        padding-right: 1.5rem;
    }

    .p-product__content {
        flex-basis: 0;
        flex-grow: 999;
    }
    
    .p-products__description {
        min-height: 22rem;
    }

}

@media (min-width: 991px) {
    .p-products__card:hover {
        padding-bottom: 7rem;
        padding-top: 7rem;
    }
    
    .p-products__description > a {
        border: 0 none;
        bottom: 0.5rem;
        left: 4%;
        opacity: 0;
        position: absolute;
        width: 92%;
        
        -moz-animation: slide 4s ease 3.5s forwards;
        -webkit-animation: slide 4s ease 3.5s forwards;
        -o-animation: slide 4s ease 3.5s forwards;
        -ms-animation: slide 4s ease 3.5s forwards;
        animation: slide 4s ease 3.5s forwards;
    }
    
    .p-products__card:hover a.c-btn {
        border: 0.1rem solid var(--color-primary);
        opacity: 1;
    }
    
    .p-products__card a.c-btn:hover {
        border-color: var(--color-secundary);
    }

    .p-products__card {
        max-width: none;
        width: 32%;
    }
    
    .p-products__card:nth-child(2n+2) {
        margin-right: 2%;
    }
    
    .p-products__card:nth-child(3n+3) {
        margin-right: 0;
    }
}

@media (min-width: 1280px) {
    .p-products__card {
      width: 23.5%;
    }
  
    .p-products__card:nth-child(2n+2),
    .p-products__card:nth-child(3n+3) {
        margin-right: 2%;
    }
  
    .p-products__card:nth-child(4n+4) {
        margin-right: 0;
    }
}

.p-product__pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    overflow: hidden;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    padding: 2rem 0;
    width: 100%;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/** 5. Ficha */

.p-catalogo__detail {
    margin: 0 0 4rem;
    overflow: hidden;
    width: 100%;
}

.o-detail {
    background-color: #fff;
    overflow: hidden;
    width: 100%;
}

.o-detail ul, 
.o-detail ol {
	overflow: hidden;
    padding: 0;
	width: 100%;
}
.o-detail li {
	font-size: 1.5rem;
	margin: 0 0 1rem;
	padding: 0 0 0 2.2rem;
	position: relative;
}

.o-detail li:last-child {
	margin-bottom: 0;
}

.o-detail li::before {
	background-color: var(--color-primary);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	content: '';
	display: block;
	height: 0.6rem;
	left: 0;
	position: absolute;
	top: 0.6rem;
	width: 0.6rem;
}

.o-detail--top {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin: 0 0 3rem;
}

.o-detail--top > div {
    width: 100%;
}

.o-detail__description {
    padding: 4rem 2rem 2rem;
}

.o-detail__description h2 {
    font-size: 2.4rem;
    margin: 0 0 0.5rem;
}

.o-detail__description h3 {
    border-bottom: 0.1rem solid #e1e1e1;
    color: var(--color-tertiary);
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
}

.o-detail__small {
    color: var(--color-secondary);
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0 0 0.5rem;
}

.o-detail__image {
    overflow: hidden;
    padding: 2rem 0 0;
}

.o-detail__image > img {
    -webkit-border-radius: 2rem;
    border-radius: 2rem;
    display: block;
    margin: 0 auto;
    max-width: 32rem;
    width: auto;
}

.o-detail--bottom {
    border-top: 0.1rem solid #E6E6E6;
    padding: 4rem 2rem 2rem;
}

.o-detail--bottom h2 {
    font-size: 2.4rem;
    margin: 0 0 2.5rem;
    text-align: left;
}

.o-detail__toknow {
    overflow: hidden;
    width: 100%;
}

@media (min-width: 768px) {
    .o-detail__toknow {
        background: #fff url('../images/icons/icon-conditions.svg') no-repeat scroll left top;
        background-size: 7rem;
        padding-left: 10rem;
    }
}

@media (min-width: 991px) {
    .o-detail--top {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }

    .o-detail--top > div.o-detail__description {
        padding: 0;
        width: 66%;
    }

    .o-detail--top > div.o-detail__image {
        padding: 0;
        width: 30%;
    }
}