/* ROOT */ .mainOk {background: var(--color-gray1); .bt1 {width: 160px; background: var(--color-aprobado); height: 50px; align-items: center; border-radius: 17px; font-weight: 600; font-size: 23px; box-shadow: var(--lighter2); &:hover {transform: scale(1.05);} &:active {transform: scale(1); box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);} } .btn1 {width: 50px; cursor: pointer; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 16px; transition: .3s; font-size: 24px; color: var(--color-gray3); box-shadow: var(--btnlighter1); &:hover {box-shadow: var(--btnlighter1a); color: black; } &:active {transform: scale(.95); } } .btn2 {width: 50px; cursor: pointer; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 16px; transition: .3s; font-size: 24px; color: var(--color-gray3); box-shadow: var(--lighter2); &:hover {box-shadow: var(--lighter2a); color: black; } &:active {transform: scale(.95); } } h1 {width: 100%; text-align: center; padding: 0px 40px; font-family: "Khand", sans-serif; text-transform: uppercase; font-size: 70px; font-weight: 700; } h3 {width: 100%; text-align: center; padding: 0px 40px; font-family: "Khand", sans-serif; text-transform: uppercase; font-size: 34px; font-weight: 700; } .marco {box-shadow: var(--marco1); border-radius: 26px; padding: 100px 20px 20px 20px; margin: -80px 0px 0px 0px; text-align: center; position: relative; z-index: -3;} .bt4 {background: var(--color-aprobado); width: 100%; height: 46px; border-radius: 14px; color: white; font-weight: 600; font-size: 22px; padding: 0px 0px 2px 0px; text-align: center; transition: .3s; &:hover {transform: scale(1.02); box-shadow: var(--shadow2);} &:active {transform: scale(1); box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);} } } .noGal .bt1 {display: none; } .noGal .header .nav {display: flex; } .noGal2 .bt1 {display: flex; } .noGal2 .header .nav {display: none; } /* HEADER */ .header {max-width: 1250px; width: 100%; top: 0; box-shadow: 0px 20px 60px -40px rgba(0,0,0,0.7); transition: .2s .15s; z-index: 10; position: fixed; background: var(--color-gray1); left: 0; right: 0; margin: 0px auto 0px auto; display: flex; padding: 16px 18px; border-radius: 0px 0px 28px 28px; align-items: flex-end; justify-content: space-between; .decopixels {width: 170px;} .nav {display: flex; gap: 15px; align-items: center;} .fs1 {font-size: 32px;} .bt1 {box-shadow: var(--bntlight1);} .ico2d3t {display: flex !important;} } .headerNav {width: 100%; max-width: 100%;; transition: .2s;} .main1 {display: flex; flex-wrap: wrap; justify-content: center; padding: 160px 0px 140px 0px; .btnUp {position: fixed; bottom: 0px; left: 0; right: 0; margin: auto; z-index: 2; background: var(--color-gray1); width: 380px; padding: 24px; border-radius: 30px 30px 0px 0px; box-shadow: 0px -25px 40px -20px rgba(0,0,0,0.15);} .btn1 {width: 100%; justify-content: space-between; padding: 0px 20px; border-radius: 18px; font-weight: 500;} .btn2 {width: 100%; justify-content: space-between; padding: 2px 20px 0px 14px; border-radius: 18px; font-weight: 500; box-shadow: var(--bntlight1); background: var(--color-aprobado); color: white; &:hover {color: white; box-shadow: var(--bntlight1); transform: scale(1.04);} } .modelos {width: 100%; overflow: auto; padding: 0px 120px 60px 90px; margin: 30px 0px 0px 0px;} .wrap {display: flex; width: fit-content; gap: 40px; padding: 0px 120px 0px 90px; margin: auto;} .item {width: 260px;} .mG {background: url(../images/mG.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 155px; height: 230px; position: relative; margin: auto; box-shadow: -10px 10px 30px -10px rgba(0,0,0,0.9), 0px 4px 10px -1px rgba(0,0,0,0.3); .shadow {width: 135px; height: 210px; position: absolute; margin: 10px 0px 0px 10px; background: linear-gradient(215deg, rgba(255, 255, 255, .4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 135px; height: 210px; margin: 10px 0px 0px 10px;} } .medida {display: flex; justify-content: center; align-items: flex-end; gap: 3px;} .med {font-weight: 700; font-size: 34px;} .sign {font-size: 28px; margin: 0px 0px 3px 0px;} .price {font-size: 17px; text-transform: uppercase; font-weight: 500; margin: 10px 0px 0px 0px;} .name {box-shadow: var(--lighter1a); height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 13px;} .mM {background: url(../images/mM.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 165px; height: 165px; position: relative; margin: 65px auto 0px auto; box-shadow: -10px 10px 30px -10px rgba(0,0,0,0.9), 0px 4px 10px -1px rgba(0,0,0,0.3); .shadow {width: 145px; height: 145px; position: absolute; margin: 10px 0px 0px 10px; background: linear-gradient(215deg, rgba(255, 255, 255, .4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 145px; height: 145px; margin: 10px 0px 0px 10px;} } .mP {background: url(../images/mP.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 130px; height: 130px; position: relative; margin: 100px auto 0px auto; box-shadow: -10px 10px 30px -10px rgba(0,0,0,0.9), 0px 4px 10px -1px rgba(0,0,0,0.3); .shadow {width: 108px; height: 108px; position: absolute; margin: 10px 0px 0px 10px; background: linear-gradient(215deg, rgba(255, 255, 255, .4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 108px; height: 108px; margin: 10px 0px 0px 10px;} } .pG {height: 200px; width: 145px; position: relative; margin: 20px auto 9px auto; box-shadow: -10px 10px 30px -10px rgba(0,0,0,0.9), 0px 4px 10px -1px rgba(0,0,0,0.3); .shadow {width: 145px; height: 200px; position: absolute; background: linear-gradient(215deg, rgba(255, 255, 255, .4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 145px; height: 200px;} } .pM {height: 165px; width: 145px; position: relative; margin: 56px auto 9px auto; box-shadow: -10px 10px 30px -10px rgba(0,0,0,0.9), 0px 4px 10px -1px rgba(0,0,0,0.3); .shadow {width: 145px; height: 165px; position: absolute; background: linear-gradient(215deg, rgba(255, 255, 255, .4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 145px; height: 165px;} } .pP {height: 110px; width: 110px; position: relative; margin: 109px auto 10px auto; box-shadow: -10px 10px 30px -10px rgba(0,0,0,0.9), 0px 4px 10px -1px rgba(0,0,0,0.3); .shadow {width: 110px; height: 110px; position: absolute; background: linear-gradient(215deg, rgba(255, 255, 255, .4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 110px; height: 110px;} } } /* CUADROS SUBIDOS */ .main2 {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; height: auto; padding: 160px 0px 140px 0px; min-height: 690px; .filtros {position: fixed; bottom: 0px; left: 0; right: 0; margin: auto; z-index: 2; background: var(--color-gray1); max-width: 380px; width: fit-content; transition: .3s; padding: 24px; border-radius: 30px 30px 0px 0px; box-shadow: 0px -25px 40px -20px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: space-between;} .item {width: 56px; font-size: 16px; display: flex; flex-direction: column; align-items: center; font-weight: 500; gap: 4px; opacity: .5; transition: .3s; cursor: pointer; &:hover {transform: scale(1.03); opacity: 1;} } .icon {width: 22px;} .icodd22 {width: 50px; height: 50px; background: var(--color-aprobado); transition: .3s; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; font-size: 36px; border-radius: 17px; box-shadow: var(--bntlight1); &:hover {transform: scale(1.05);} &:active {transform: scale(1); box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);} } .detail {width: fit-content; text-align: center; display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center; font-size: 24px; font-weight: 700; gap: 20px;} .detailsInt {width: 100%; display: flex; gap: 10px; align-items: center; justify-content: center;} .textoUp {animation: textoUp 2s infinite; width: 100%; display: flex; align-items: center; gap: 20px; cursor: pointer; font-size: 40px; color: var(--color-aprobado); text-shadow: 0px 0px 10px var(--color-aprobado-light), 0px 0px 20px var(--color-aprobado-light), 0px 0px 20px var(--color-aprobado-light); flex-direction: column;} .line {background: black; width: 2px; height: 20px;} .subidas {width: 100%; overflow: auto; padding: 0px 20px;} .wrap {display: flex; justify-content: center; align-items: center; gap: 30px; padding: 40px 0px; width: 100%; flex-wrap: wrap;} .Vw-item {padding: 5px 0px; cursor: pointer;} .Vw-mG {background: url("../images/mG.webp") center center / cover no-repeat; width: 195px; height: 290px; position: relative; margin: auto; box-shadow: rgba(0, 0, 0, 0.9) -10px 10px 30px -10px, rgba(0, 0, 0, 0.3) 0px 4px 10px -1px; .shadow {width: 170px; height: 265px; margin: 12px 0px 0px 12px; position: absolute; background: linear-gradient(215deg, rgba(255, 255, 255, 0.4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 170px; height: 265px; margin: 12px 0px 0px 12px;} } .Vw-mM {background: url("../images/mM.webp") center center / cover no-repeat; width: 205px; height: 205px; position: relative; margin: auto; box-shadow: rgba(0, 0, 0, 0.9) -10px 10px 30px -10px, rgba(0, 0, 0, 0.3) 0px 4px 10px -1px; .shadow {width: 184px; height: 184px; position: absolute; margin: 10px 0px 0px 10px; background: linear-gradient(215deg, rgba(255, 255, 255, 0.4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 184px; height: 184px; margin: 10px 0px 0px 10px;} } .Vw-mP {background: url("../images/mP.webp") center center / cover no-repeat; width: 150px; height: 150px; position: relative; margin: auto; box-shadow: rgba(0, 0, 0, 0.9) -10px 10px 30px -10px, rgba(0, 0, 0, 0.3) 0px 4px 10px -1px; .shadow {width: 122px; height: 123px; margin: 14px 0px 0px 14px; position: absolute; background: linear-gradient(215deg, rgba(255, 255, 255, 0.4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 122px; height: 123px; margin: 14px 0px 0px 14px;} } .Vw-pG {width: 135px; height: 210px; position: relative; margin: auto; box-shadow: -10px 10px 30px -10px rgba(0,0,0,0.9), 0px 4px 10px -1px rgba(0,0,0,0.3); .shadow {width: 135px; height: 211px; position: absolute; background: linear-gradient(215deg, rgba(255, 255, 255, .4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 135px; height: 211px;} } .Vw-pM {width: 135px; height: 160px; position: relative; margin: auto; box-shadow: -10px 10px 30px -10px rgba(0,0,0,0.9), 0px 4px 10px -1px rgba(0,0,0,0.3); .shadow {width: 135px; height: 161px; position: absolute; background: linear-gradient(215deg, rgba(255, 255, 255, .4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 135px; height: 161px;} } .Vw-pP {width: 135px; height: 135px; position: relative; margin: auto; box-shadow: -10px 10px 30px -10px rgba(0,0,0,0.9), 0px 4px 10px -1px rgba(0,0,0,0.3); .shadow {width: 135px; height: 135px; position: absolute; background: linear-gradient(215deg, rgba(255, 255, 255, .4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 135px; height: 135px;} } .pdn1 {padding: 14px; background: white;} .pdn2 {padding: 17px;} } @keyframes textoUp { 0% {transform: scale(1); text-shadow: 0px 0px 10px var(--color-aprobado-light), 0px 0px 20px var(--color-aprobado-light), 0px 0px 20px var(--color-aprobado-light);} 10% {text-shadow: 0px 0px 10px var(--color-aprobado-light), 0px 0px 20px var(--color-aprobado-light), 0px 0px 20px var(--color-aprobado-light);} 50% {transform: scale(.9); text-shadow: 0px 0px 10px var(--color-aprobado-light);} 90% {text-shadow: 0px 0px 10px var(--color-aprobado-light), 0px 0px 20px var(--color-aprobado-light), 0px 0px 20px var(--color-aprobado-light);} 100% {transform: scale(1); text-shadow: 0px 0px 10px var(--color-aprobado-light), 0px 0px 20px var(--color-aprobado-light), 0px 0px 20px var(--color-aprobado-light);} } /* RESUMEN COMPRA */ .resumen {width: 320px; height: calc(100dvh - 100px); position: fixed; z-index: 20; box-shadow: var(--marco1); top: 50px; border-radius: 30px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 15px; display: flex; flex-direction: column; justify-content: space-between; right: -550px; transition: .3s 0s; .ico-d22s2 {background: black; cursor: pointer; color: white; display: flex; width: 40px; height: 40px; justify-content: center; align-items: center; border-radius: 100px; font-size: 26px; position: absolute; margin: -30px 0px 0px -33px; &:hover {transform: scale(1.06);} &:active {transform: scale(1);} } .imgPrev {width: 60px; height: 90px; overflow: hidden; border-radius: 6px; margin: 20px 0px -12px 10px;} .resInt {height: 100%; display: flex; flex-direction: column; justify-content: space-between;} .title {text-align: center; font-size: 30px; font-weight: 600;} .tipo {width: 100%; font-weight: 700; margin: 20px 0px 10px 0px; text-transform: uppercase; padding: 0px 10px;} .item {width: 100%; display: flex; align-items: center; justify-content: space-between; font-weight: 500; margin: 6px 0px; padding: 0px 10px;} .promo {width: 100%; display: flex; cursor: pointer; justify-content: space-between; transition: .3s; box-shadow: var(--btnlighter1); height: 40px; align-items: center; padding: 0px 13px; border-radius: 12px; margin: 35px 0px -15px 0px; font-weight: 500; &:hover {box-shadow: var(--btnlighter1a); color: black;} &:active {transform: scale(.96);} } .titleProm {display: flex; align-items: flex-start; gap: 3px;} .med {font-weight: 700;} .totalW {width: 100%; display: flex; justify-content: space-between; padding: 0px 12px; font-size: 24px; font-weight: 700; margin: 14px 0px; } .bt1 {width: 100%; box-shadow: var(--bntlight1); display: flex;} } .shadowRes {width: 100%; height: 100dvh; position: fixed; top: 0px; left: 0px; z-index: 19; background: var(--color-gray1); opacity: 0; visibility: hidden; transition: .4s .2s; } .resumenOn {right: 50px; transition: .4s .2s;} .shadowResOn {opacity: .7; visibility: visible; transition: .3s 0s;} .pop1 {padding: 40px 16px 16px 16px; box-shadow: var(--marco1); transition: .3s .0s; border-radius: 0px 0px 28px 28px; width: 90%; max-width: 400px; background: var(--color-gray1); text-align: center; position: fixed; left: 0; right: 0; margin: -300px auto 0px auto; z-index: 30; gap: 20px; display: flex; flex-wrap: wrap; justify-content: center; .icoog2 {font-size: 40px; position: fixed; right: 20px; top: 20px; cursor: pointer; opacity: 0; visibility: hidden; transition: .3s .0s; &:hover {transform: scale(1.04);} &:active {transform: scale(.9);} } .title {font-family: "Khand", sans-serif; text-transform: uppercase; font-size: 30px; font-weight: 700;} .campo1a {box-shadow: var(--lighter2a); border: 0px; text-align: left; height: 46px; &:hover {transform: scale(1); border: 0px; box-shadow: var(--lighter2);} &:focus {transform: scale(1); border: 0px; box-shadow: var(--lighter2);} } .error {text-transform: uppercase; color: var(--color-error); font-weight: 600; font-size: 16px; margin: -8px 0px;; display: none;} .campoOk {width: 100%;} .aceptar {} .iconOn {opacity: 1; visibility: visible; transition: .3s .3s;} } .envio {position: fixed; gap: 12px 0px; bottom: 0px; width: 90%; max-width: 630px; margin: 0px auto -650px auto; left: 0px; right: 0px; transition: .3s 0s; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; box-shadow: var(--marco1); background: var(--color-gray1); z-index: 30; padding: 20px 20px 40px; border-radius: 30px 30px 0px 0px; .ico-d22s2 {position: absolute; top: 10px; right: 10px; font-size: 30px; cursor: pointer; transition: .3s; &:hover {color: var(--color-error); transform: scale(1.05);} } .title {width: 100%; display: flex; align-items: flex-start; gap: 4px; font-size: 20px; font-weight: 600; padding: 0px 10px;} .ico-we22 {margin: 5px 0px 0px; font-size: 16px;} .cl3 {width: 32%;} .cl2 {width: 49%;} .campo1a {box-shadow: var(--lighter2a); border: 0px; text-align: left; height: 46px; &:hover {transform: scale(1); border: 0px; box-shadow: var(--lighter2);} &:focus {transform: scale(1); border: 0px; box-shadow: var(--lighter2);} } .topTitle {margin: 20px 0px 0px 0px;} .item {box-shadow: var(--btnlighter1); cursor: pointer; width: 30%; display: flex; align-items: flex-start; padding: 13px; border-radius: 12px; font-weight: 500; color: var(--color-gray2); transition: .3s; &:hover {box-shadow: var(--btnlighter1a); color: black;} } .fechaItem {color: var(--color-aprobado); font-weight: 600; font-size: 19px; line-height: 1.1;} .acepto {width: 100%; display: flex; justify-content: center;} .okBtn {width: 100%; margin: 20px 0px 0px 0px;} .envioOn {box-shadow: var(--btnlighter1a); color: black;} strong {font-weight: 700;} } .shadowPop {width: 100%; height: 100dvh; position: fixed; top: 0px; left: 0px; z-index: 10; background: var(--color-gray1); opacity: .5; opacity: 0; z-index: 20; visibility: hidden; transition: .3s .3s;} .pop1On {margin: 0px auto 0px auto; transition: .3s .3s;} .shadowPopOn {opacity: .8; visibility: visible; transition: .3s .0s;} .pop2On {margin: 0px auto 0px auto; transition: .3s .3s;} .parametros {width: 100%; height: 100vh; position: fixed; top: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: flex-start; z-index: 20; opacity: 0; visibility: hidden; transition: .3s .1s; .icov38f {color: white; font-size: 46px; position: fixed; top: 20px; right: 20px; cursor: pointer; transition: .3s; &:hover {transform: scale(1.04); color: var(--color-gray1);} &:active {transform: scale(.95);} } } .imgCut {background: white; opacity: 0; visibility: hidden; width: 300px; position: fixed; top: 20%; padding: 14px; border-radius: 27px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; box-shadow: 0px 25px 60px -15px rgba(0,0,0,0.7); .txt {font-size: 26px; font-weight: 700; width: 100%; text-align: center;} .wrapCut {overflow: hidden; height: 272px; border-radius: 10px;} .icod2d0p {font-size: 26px; margin: 8px 0px; cursor: pointer; transition: .3s; &:hover {color: red; transform: scale(1.1);} } .bt1 {justify-content: center; width: 100%; &:hover {box-shadow: none;} } } .imgCutOn {opacity: 1; visibility: visible;} .modeloPop {width: 320px; position: absolute; margin: -500px 0px 0px 0px; background: white; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding: 50px 15px 15px 15px; border-radius: 0px 0px 30px 30px; text-align: center; box-shadow: 0px 20px 30px -10px rgba(0,0,0,0.4); transition: .3s 0s; .title {width: 100%; display: flex; align-items: flex-start; text-align: left; justify-content: space-between; font-size: 28px; font-weight: 700; margin: 0px 0px 22px 0px; padding: 0px 7px;} .btn {color: var(--color-aprobado); font-size: 20px; cursor: pointer;} .item {width: 47%; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: .3s; overflow: hidden; border: 1px solid var(--color-gray4); border-radius: 18px; padding: 0px 0px 10px 0px; font-size: 20px; font-weight: 500; &:hover {background: var(--color-aprobado); color: white; border: 1px solid white; box-shadow: 0px 13px 22px -6px rgba(0,0,0,0.5); transform: scale(1.03);} &:active {transform: scale(.95);} } .medidaItem {width: 100%; font-weight: 500; border: 1px solid var(--color-gray4); padding: 10px 0px; border-radius: 15px; margin: 14px 0px 0px 0px; cursor: pointer; transition: .3s; display: flex; justify-content: center; align-items: center; &:hover {background: var(--color-aprobado); color: white; border: 1px solid white; box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.5); font-weight: 600; transform: scale(1.03);} &:active {transform: scale(.95);} } .lineIn {margin: 0px 8px;} .hov1 {background: var(--color-aprobado); color: white; border: 1px solid white; box-shadow: 0px 13px 22px -6px rgba(0,0,0,0.5); transform: scale(1.03);} .hov2 {background: var(--color-aprobado); color: white; border: 1px solid white; box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.5); font-weight: 600; transform: scale(1.03);} } .paramOn {transition: .3s 0s; visibility: visible; opacity: 1;} .modelOn {transition: .3s .1s; margin: 0px 0px 0px 0px;} /* GALERIA */ .scrollImgWrap {background: var(--color-gray1); z-index: 10; box-shadow: 0px -20px 40px -40px rgba(0,0,0,0.7); width: 1000px; position: fixed; margin: 0px auto 0px auto; left: 0; right: 0; bottom: 0px; padding: 30px 30px 40px 30px; box-sizing: border-box; border-radius: 50px 50px 0px 0px; .navBarImg {} .scrollImg {overflow: auto; padding: 18px; box-shadow: var(--marco1); border-radius: 30px; background: var(--color-gray1); position: relative;} .wrap {display: flex; gap: 20px; width: fit-content; padding: 0px 60px 0px 0px;} .btImg {overflow: hidden; width: 75px; height: 80px; border-radius: 16px;} } .txtFix {font-family: "Khand", sans-serif; text-transform: uppercase; font-size: 100px; font-weight: 700; width: 100%; text-align: center; position: fixed; bottom: 150px; opacity: .1;} .mainGaleria {width: 960px; padding: 140px 0px 400px 0px; margin: 0px auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; .filters {width: 100%; display: flex; align-items: flex-start; justify-content: space-between; margin: 0px 0px 50px 0px;} .left {width: 220px;} .inp1 {height: 50px; border-radius: 18px; background: var(--color-aprobado); color: white; font-size: 23px; font-weight: 600; border: 0px; box-shadow: var(--bntlight1);; &::placeholder {font-weight: 500;} &:hover {transform: scale(1.05); border: 1px solid var(--color-aprobado); &::placeholder {color: white;} } &:focus {transform: scale(1.05) var(--color-aprobado); &::placeholder {color: white;} } } .right {width: 140px;} .bt1 {border-radius: 18px; width: 100%; font-weight: 500; box-shadow: var(--bntlight1); &:hover {transform: scale(1.02);} &:active {transform: scale(.98);} } .btShop {font-weight: 700 !important;} .product {width: 50%;} .info {width: 45%; padding: 30px 0px 0px 0px; position: sticky; top: 100px;} h1 {text-align: left; padding: 0px 10px; line-height: 1; font-size: 35px;} .detail {background: var(--color-gray1); box-shadow: var(--marco1); padding: 20px; border-radius: 20px; margin: 20px 0px 30px 0px; display: flex; flex-direction: column; gap: 12px;} .vineta {display: flex; align-items: flex-start; gap: 4px;} .icon-check {} .icod2d0 {} .bt1 {} .ico2d3t {display: flex !important; color: white;} .item {width: 260px;} .mG {background: url(../images/mG.webp); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 720px; position: relative; margin: auto; box-shadow: -10px 10px 30px -10px rgba(0,0,0,0.9), 0px 4px 10px -1px rgba(0,0,0,0.3); .shadow {width: 422px; height: 656px; margin: 32px 0px 0px 30px; position: absolute; background: linear-gradient(215deg, rgba(255, 255, 255, .4) 9%, rgba(255, 255, 255, 0.3) 24%, rgba(255, 255, 255, 0) 100%); z-index: -1;} .cMimg {position: absolute; z-index: -2; overflow: hidden; display: flex; justify-content: center; align-items: center; width: 422px; height: 656px; margin: 32px 0px 0px 30px;} } } /* MENU NAVEGADOR */ .icoffo0 {font-size: 30px; opacity: 0; visibility: hidden; transition: .3s .1s; cursor: pointer; position: fixed; z-index: 11; top: 32px; right: 14px; background: black; width: 56px; height: 56px; color: white; display: flex; align-items: center; justify-content: center; border-radius: 20px;} .menuNav {position: fixed; opacity: 0; visibility: hidden; transition: .3s; background: rgba(255,255,255,0.9); width: 100%; height: 100vh; z-index: 8; .wrap {padding: 140px 30px 100px 30px; transition: .3s; margin: -850px 0px 0px 0px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 18px;} .btNav {font-size: 25px; display: flex; align-items: flex-start; gap: 0px; font-weight: 500; color: black;} .ciofk9 {font-size: 18px; margin: 5px 0px 0px 0px;} .line {width: 100%; height: 1px; background: black; max-width: 300px;} .top1 {margin: -10px 0px 0px 30px;} .bld1 {font-weight: 700;} .wrapOn {margin: 0px 0px 0px 0px; transition: .3s .15s;} } .navCloseOn {opacity: 1; visibility: visible; transition: .3s .2s;} .menuNavOn {opacity: 1; visibility: visible; transition: .6s;} /* HOME */ .baner {width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; text-align: center; padding: 150px 0px 0px 0px; h2 {width: 100%; text-transform: uppercase; font-weight: 700; font-family: "Khand", sans-serif; font-size: 50px; line-height: 1.2; margin: 0px 0px -12px 0px;} .wrapCuadros {width: 100%; display: flex; overflow: hidden; align-items: flex-start; justify-content: center; position: relative; height: 940px; margin: -50px auto 0px auto;} .wrapInt {position: relative; width: 280px; display: flex; justify-content: center; flex-direction: column; align-items: center;} .c23x {position: absolute; width: 180px;} .c29x {position: absolute; width: 280px;} .c33x {position: absolute; width: 280px;} .cdr1 {margin: 60px 0px 0px -1100px;} .cdr2 {margin: 150px 0px 0px -540px;} .cdr3 {position: relative;} .cdr4 {position: relative; margin: 0px 14px -18px 0px;} .cdr5 {position: relative;} .cdr6 {margin: 150px -530px 0px 0px;} .cdr7 {margin: 60px -1060px 0px 0px;} .h1Int {line-height: 1; margin: -43px 0px 0px 0px;} } .wrapGeneral {width: 1200px; margin: 90px auto 0px auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; .left {width: calc(100% - 370px);} .wrapinsta {overflow: hidden; box-shadow: var(--btnGrandlighter1); width: 100%; height: 70vh; min-height: 700px; border-radius: 40px; padding: 30px;} .img-int {border-radius: 24px;} .right {width: 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 27px; padding: 20px 0px 0px 0px; position: sticky; top: 110px;} h1 {font-size: 40px; text-align: left; line-height: .9; padding: 0px;} .item {box-shadow: var(--marco1); width: 100%; display: flex; align-items: center; border-radius: 20px; padding: 5px; font-size: 26px; font-weight: 500;} .instaImg {width: 80px;} } .especs {width: 1200px; margin: 0px auto 0px auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; .left {width: 160px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 130px;} .item {box-shadow: var(--btnlighter1); padding: 12px 10px; border-radius: 14px; text-align: center; font-weight: 500; cursor: pointer; transition: .3s; &:hover {box-shadow: var(--btnlighter1a);} } .itemOn {box-shadow: var(--btnlighter1a);} .right {width: calc(100% - 200px); position: relative; display: flex; flex-direction: column; gap: 60px;} .title {font-family: "Khand", sans-serif; text-transform: uppercase; font-size: 70px; font-weight: 700; margin: 30px 0px 0px 30px; color: rgba(255,255,255,0.5); position: absolute; line-height: .9;} .especsInt {overflow: hidden; box-shadow: var(--btnGrandlighter1); width: 100%; height: 70vh; border-radius: 40px; padding: 30px; min-height: 700px; scroll-margin-top: 130px;} .img-int {border-radius: 20px;} } .muestras {width: 100%; overflow: hidden; padding: 40px 0px; display: flex; flex-direction: column; gap: 40px; margin: 100px 0px 90px 0px; .fila {display: flex; gap: 40px; width: fit-content;} .fl1 {margin: 0px 0px 0px -180px; animation: fl1 18s infinite linear;} .fl2 {margin: 0px 0px 0px 0px; animation: fl2 18s infinite linear;} .item {width: 240px; height: 240px; overflow: hidden; border-radius: 40px; padding: 20px; box-shadow: var(--btnGrandlighter1);} .img-int {border-radius: 25px;} } @keyframes fl1 { 0% {margin: 0px 0px 0px -180px;} 50% {margin: 0px 0px 0px 0px;} 100% {margin: 0px 0px 0px -180px;} } @keyframes fl2 { 0% {margin: 0px 0px 0px 0px;} 50% {margin: 0px 0px 0px -180px;} 100% {margin: 0px 0px 0px 0px;} } .resenas { .fila {width: 100%; overflow: auto;} .wrap {display: flex; gap: 40px; width: fit-content; padding: 40px 120px 40px 50px;} .item {width: 320px; padding: 22px; box-shadow: var(--marco1); border-radius: 26px; display: flex; flex-wrap: wrap; gap: 10px 6px; color: black;} .icoff0 {font-size: 30px; color: var(--color-aprobado); opacity: .3;} .name {width: 100%; font-size: 22px; font-weight: 500; color: var(--color-aprobado);} .txt {width: 100%; font-size: 17px; text-wrap: auto;} } .footer {width: 94%; margin: 90px auto 26px auto; padding: 30px 28px 23px 30px; box-shadow: var(--marco1); border-radius: 30px; display: flex; align-items: flex-start; justify-content: space-between; z-index: 15; position: relative; background: var(--color-gray1); .left {display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap;} .suscripcion {width: 270px;} .title {font-size: 20px; font-weight: 600; padding: 0px 6px;} .suscrip {width: 100%; margin: 16px 0px 0px 0px; display: flex; flex-direction: column; gap: 10px;} .campo1 {} .campo1a {box-shadow: var(--btnlighter1a); border: 0px; height: 48px; border-radius: 16px;} .bt1 {width: 100%; text-align: center; justify-content: center; height: 46px; border-radius: 16px;} .item {} .itemTitle {font-size: 18px; font-weight: 600; display: flex; flex-direction: column; gap: 4px;} .icodg {font-size: 30px;} .btLink {display: flex; align-items: flex-start; font-size: 15px; font-weight: 500; margin: 4px 0px 0px 0px;} .icok33 {font-size: 12px; margin: 3px 0px 0px 0px;} .cards {display: flex; gap: 10px; margin: 8px 0px 0px 0px;} .cardsInt {width: 65px; height: 40px; overflow: hidden; border-radius: 10px;} .right {display: flex; flex-direction: column; gap: 20px;} .rrss {width: 90px; display: flex; justify-content: center; align-items: center; box-shadow: var(--btnlighter1); height: 40px; border-radius: 14px; font-size: 22px; cursor: pointer; &:hover {box-shadow: var(--btnlighter1a);} } } @media (width <= 1200px) { .footer {flex-wrap: wrap; margin: 90px auto 20px auto; padding: 30px 22px 22px 22px; width: 90%; .right {width: 100%; flex-direction: revert; justify-content: space-between; margin: 50px 0px 0px 0px;} .rrss {width: 32%;} } } @media (width <= 1080px) { .footer { .suscripcion {width: 100%;} } } @media (width <= 800px) { .footer {width: 86%; .item {width: 100%;} } } @media (width <= 1350px) { .wrapGeneral {width: 900px; .left {width: calc(100% - 240px);} .right {width: 210px;} .item {font-size: 22px;} .instaImg {width: 70px;} } .especs {width: 900px; } } @media (width <= 1100px) { .header {width: 100%;} .mainGaleria {flex-direction: column; align-items: center; padding: 140px 0px 320px 0px; h1 {text-align: center;} .btShop {position: fixed; left: 0; right: 0; z-index: 5; bottom: 220px; margin: auto; width: 90%;} } .scrollImgWrap {width: 100%;} .mainGaleria { .left {width: 48%;} .right {width: 48%;} } .txtFix {bottom: 230px;} } @media (width <= 960px) { .mainGaleria {width: 480px; .product {width: 100%;} .info {width: 100%;} } .txtFix {bottom: 242px; font-size: 64px;} .wrapGeneral {width: 600px; .left {order: 2; width: 100%;} .wrapinsta {padding: 16px; border-radius: 30px; min-height: auto;} .img-int {border-radius: 20px;} .right {width: 100%; order: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; flex-direction: revert; gap: 0px; position: relative; top: 0px; padding: 0px 0px 40px 0px;} h1 {width: 100%; text-align: center; margin: 0px 0px 20px 0px;} .item {width: 31%;} } .especs {width: 600px; scroll-margin-top: 180px; .left {width: 100%; position: relative; top: 0px; flex-direction: revert; flex-wrap: wrap; gap: 26px 0px; justify-content: space-between;} .item {width: 48%;} .right {width: 100%; margin: 50px 0px 0px 0px;} .especsInt {min-height: auto; border-radius: 30px; padding: 16px;} } .muestras {gap: 24px; .fila {gap: 24px;} .item {width: 170px; height: 170px; padding: 12px; border-radius: 30px;} .img-int {border-radius: 18px;} } } @media (width <= 690px) { .main2 { .detail {font-size: 20px;} } .main1 {padding: 150px 0px 140px 0px; .wrap {padding: 0px 50px 0px 0px;} .modelos {padding: 0px 120px 60px 30px;} } .envio {justify-content: center; max-height: 88%; gap: 15px 0px; overflow-y: scroll; margin: 0px auto -850px auto; .cl3 {width: 100%;} .cl2 {width: 100%;} .item {width: 100%; justify-content: space-between;} .fechaItem {margin: 0px 20px; text-align: center;} .okBtn {position: sticky; bottom: -10px;} } .pop1 {width: 90%; .icoog2 {bottom: 20px; top: initial; left: 0px; right: 0px; font-size: 50px;} } .pop2On {margin: 0px auto 0px auto; transition: .3s .3s;} .shadowPopOn {opacity: .95;} .modeloPop {width: 100%;} .parametros { .icov38f {top: initial; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 50px;} } .paramOn {transition: .3s 0s; visibility: visible; opacity: 1;} .modelOn {transition: .3s .1s; margin: 0px 0px 0px 0px;} .mainOk { h1 {font-size: 38px;} h3 {font-size: 22px;} } .modeloPop {border-radius: 0px 0px 24px 24px;} .wrapGeneral {width: 86%; .right {gap: 26px;} h1 {margin: 0px;} .item {width: 100%;} } .especs {width: 86%; .item {width: 100%;} .title {font-size: 45px;} } .baner { h2 {font-size: 36px; margin: 0px 0px -4px 0px;} .wrapCuadros {margin: -33px auto 0px auto; height: 660px;} .wrapInt {width: 200px;} .cdr1 {margin: 60px 0px 0px -740px;} .cdr2 {margin: 150px 0px 0px -360px;} .cdr4 {margin: 0px 14px -10px 0px;} .cdr6 {margin: 150px -360px 0px 0px;} .cdr7 {margin: 60px -720px 0px 0px;} .c33x {width: 200px;} .c29x {width: 200px;} .c23x {width: 100px;} } .muestras {margin: 70px 0px 50px 0px;} .resenas { .item {width: 250px;} } } @media (width <= 560px) { .txtFix {bottom: 256px; font-size: 42px;} .mainGaleria {width: 90%; .mG {width: 320px; height: 480px; .cMimg {width: 280px; height: 436px; margin: 22px 0px 0px 20px;} .shadow {width: 280px; height: 436px; margin: 22px 0px 0px 20px;} } } } @media (width <= 420px) { .resumen {border-radius: 30px 0px 0px 30px; padding: 15px 25px 15px 15px; width: 90%;} .resumenOn {right: 0px;} .scrollImgWrap {padding: 16px 16px 30px 16px; border-radius: 40px 40px 0px 0px; .scrollImg {padding: 0px; border-radius: 23px; box-shadow: none;} } .mainGaleria { .btShop {bottom: 160px;} .txtFix {bottom: 197px;} } .txtFix {bottom: 197px;} } @media (width <= 400px) { .header { .decopixels {width: 128px;} } .main2 { .filtros {width: 100%; padding: 24px 15px 15px 15px;} } .main1 { .btnUp {width: 100%;} } .header {padding: 12px 12px; .nav {gap: 10px;} } .icoffo0 {top: 12px; right: 9px;} .menuNav { .wrap {padding: 110px 30px 100px 30px;} } } .modelos::-webkit-scrollbar {width: 15px; transition: .2s; overflow: auto; } .modelos::-webkit-scrollbar-track {margin: 0px 230px; border-radius: 100px; background: var(--color-gray1); box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.3), inset -2px -3px 6px 2px rgba(255,255,255,1);} .modelos::-webkit-scrollbar-thumb {transition: .2s; background: rgba(0,0,0,0.3); border-radius: 20px;} .resenas .fila::-webkit-scrollbar {width: 15px; transition: .2s; overflow: auto; } .resenas .fila::-webkit-scrollbar-track {margin: 0px 230px; border-radius: 100px; background: var(--color-gray1); box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.3), inset -2px -3px 6px 2px rgba(255,255,255,1);} .resenas .fila::-webkit-scrollbar-thumb {transition: .2s; background: rgba(0,0,0,0.3); border-radius: 20px;} .subidas::-webkit-scrollbar {width: 15px; transition: .2s; overflow: auto; } .subidas::-webkit-scrollbar-track {margin: 0px 230px; border-radius: 100px; background: var(--color-gray1); box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.3), inset -2px -3px 6px 2px rgba(255,255,255,1);} .subidas::-webkit-scrollbar-thumb {transition: .2s; background: rgba(0,0,0,0.3); border-radius: 20px;} .scrollImg::-webkit-scrollbar {transition: .2s; overflow: auto; height: 10px; } .scrollImg::-webkit-scrollbar-track {margin: 0px 50px; border-radius: 100px; background: var(--color-gray1); box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.3), inset -2px -3px 6px 2px rgba(255,255,255,1);} .scrollImg::-webkit-scrollbar-thumb {transition: .2s; background: rgba(0,0,0,0.3); border-radius: 20px;} @media ( width <= 1100px ) { .modelos::-webkit-scrollbar-track {margin: 0px 30px;} .subidas::-webkit-scrollbar-track {margin: 0px 30px;} .resenas .fila::-webkit-scrollbar-track {margin: 0px 30px;} }