@charset "UTF-8";.img_cont{width:80%;height:80%;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;z-index:1}.img_cont img{width:100%;height:100%;object-fit:cover;border-radius:10px;overflow:hidden;display:block}.img_cont__glass_effect{position:absolute;left:0;right:0;bottom:40px;width:74%;min-height:25%;margin:0 auto;background:#9d67dd3d;backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);border-radius:12px;border:1px solid rgba(255,255,255,.3);z-index:5;color:#fff;text-align:center;display:flex;align-items:center;justify-content:center;padding:20px;line-height:1.5;font-weight:400;text-shadow:0 2px 6px rgba(0,0,0,.55),0 0 2px rgba(0,0,0,.4),0 0 10px rgba(0,0,0,.25);pointer-events:none}.img_cont__glass_effect p{font-size:var(--fs-base);color:#fff;font-weight:500}.main{display:flex;justify-content:center;align-items:center;height:100%;max-width:1400px;width:100%;background:#d1d4da;box-sizing:border-box;height:calc(100dvh - 100px);padding:7px;border-radius:10px;box-shadow:#0000000d 0 6px 24px,#00000014 0 0 0 1px;border:1px solid #C4C4C4}.main__squared{display:flex;flex-direction:row;border-radius:8px;background-color:#fff;width:100%;height:100%}.main__squared__left{width:100%;display:flex;justify-content:center;overflow:hidden}.main__squared__right{background:#f2f3f7;width:100%;align-items:center;display:flex;justify-content:center;border-top-right-radius:10px;border-bottom-right-radius:10px}.cards{display:flex;flex-direction:column;gap:15px;overflow:auto;padding:5px;margin-bottom:20px}.card:hover{border:1px solid var(--color-500);background:var(--color-50)}.card:hover .card__icon__circle{background-color:var(--color-200);color:var(--color-600)}.card:hover .card__content p{color:var(--color-700)}.card__disabled{border:1px solid var(--gray-200);background:var(--gray-50);color:var(--gray-400);cursor:default;pointer-events:none;opacity:.6;transition:.3s ease}.card__disabled .card__icon__circle{background-color:var(--gray-100);color:var(--gray-400)}.card__disabled .card__content p{color:var(--gray-400)}.card{transition:all .3s ease-in-out;border:1px solid var(--color-100);display:flex;width:100%;min-height:125px;height:100%;gap:10px;border-radius:10px;cursor:pointer;user-select:none;padding:5px;box-sizing:border-box}.card__icon{width:100%;max-width:80px;display:flex;justify-content:center;align-items:center}.card__icon__circle{display:flex;text-align:center;align-items:center;justify-content:center;transition:all .3s ease-in-out;border-radius:50px;height:50px;width:50px;background-color:var(--color-100);color:var(--color-500)}.card__content{display:flex;flex-direction:column;justify-content:center;gap:5px}.card__content h2{font-weight:600;font-size:var(--fs-sm);margin:0}.card__content p{margin:0;font-size:var(--fs-sm)}.full_width{width:100%;background:#d9dfeb;align-items:center;justify-content:center;display:flex;padding:10px;box-sizing:border-box}.content{height:100%;display:flex;justify-content:center;flex-direction:column;width:90%;padding:10px}.content__top{display:flex;flex-direction:column;max-height:30%;height:100%;justify-content:center}.content__top h1{font-size:clamp(26px,2.8vw,36px);line-height:1.15;letter-spacing:-.015em;font-weight:700;margin:0 0 8px;color:var(--color-950)}.content__top p{margin:0;color:var(--muted-700, #5f6b7a);font-weight:400;font-size:clamp(14px,1.4vw,16px);line-height:1.6;max-width:68ch}.content__top:after{content:"";display:block;width:56px;height:3px;margin-top:14px;border-radius:999px;background:linear-gradient(90deg,var(--color-400, #60a5fa),var(--color-600, #2563eb));opacity:.85}.content__options{display:flex;flex-direction:column;flex:1;padding:5px;overflow:hidden;gap:10px}.content__options p:nth-child(1){font-size:clamp(14px,1.3vw,15px);font-weight:600;color:var(--color-700, #334155);margin:0 0 12px;letter-spacing:.005em;line-height:1.45;position:relative;padding-left:14px}.content__options p:nth-child(1):before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:999px;background:var(--color-500, #3b82f6);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-500, #3b82f6) 20%,transparent);opacity:.9}@keyframes fadeUpSoft{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeRightSoft{0%{opacity:0;transform:translate(24px) scale(1.02)}to{opacity:1;transform:translate(0) scale(1)}}.main__squared--idle .content,.main__squared--idle .cards .card,.main__squared--idle .main__squared__right .img_cont{opacity:0}.main__squared--mounted .content__top{animation:fadeUpSoft .48s ease-out forwards}.main__squared--mounted .content__options>p{animation:fadeUpSoft .52s ease-out forwards}.main__squared--mounted .cards .card:nth-child(1){animation:fadeUpSoft .52s ease-out forwards}.main__squared--mounted .cards .card:nth-child(2){animation:fadeUpSoft .56s ease-out forwards}.main__squared--mounted .cards .card:nth-child(3){animation:fadeUpSoft .6s ease-out forwards}.main__squared--mounted .img_cont{animation:fadeRightSoft .62s ease-out forwards}@media (max-width: 1050px){.main{margin-top:60px}.main__squared__right{display:none}}// .img_cont{// width: 60%;// height: 60%;// display: flex;// justify-content: center;// align-items: center;// overflow: hidden;// // background-color: red;// border-radius: 10px;// position: relative;// z-index: 1;// img{// object-fit: contain;// border-radius: 10px;//}// &__glass_effect{// position: absolute;// left: 0;// right: 0;// bottom: 25px;// width: 80%;// height: 25%;// margin: 0 auto;// background: rgba(255,255,255,.25);// más visible y contrastado // backdrop-filter: blur(12px) saturate(160%);// -webkit-backdrop-filter: blur(12px) saturate(160%);// border-radius: 12px;// border: 1px solid rgba(255,255,255,.3);// z-index: 5;// color: #fff;// text-align: center;// display: flex;// align-items: center;// justify-content: center;// padding: 20px;// line-height: 1.5;// font-weight: 400;// text-shadow: 0 1px 3px rgba(0,0,0,.4);// mejora legibilidad del texto // pointer-events: none;//}//}// .main{// display: flex;// justify-content: center;// align-items: center;// height: 100%;// max-width: 1400px;// width: 100%;// background: #D1D4DA;// box-sizing: border-box;// height: calc(100vh - 100px);// padding: 7px;// border-radius: 10px;// box-shadow: rgba(0,0,0,.05) 0px 6px 24px 0px,rgba(0,0,0,.08) 0px 0px 0px 1px;// border: 1px solid #C4C4C4;// &__squared{// display: flex;// flex-direction: row;// border-radius: 8px;// background-color: white;// width: 100%;// height:100%;// &__left{// width: 100%;// display: flex;// justify-content: center;// overflow: hidden;//}// &__right{// background: #F2F3F7;// width: 100%;// align-items: center;// display: flex;// justify-content: center;// border-top-right-radius: 10px;// border-bottom-right-radius: 10px;//}//}//}// .cards{// display: flex;// flex-direction: column;// gap:15px;// margin-top: 20px;//}// .card{// &:hover{// border: 1px solid var(--color-500);// background: var(--color-50);// .card__icon__circle{// background-color: var(--color-200);// color:var(--color-600) //}// .card__content{// p{// color: var(--color-700);//}//}//}//}// .card{// transition: all .3s ease-in-out;// border: 1px solid var(--color-100);// display: flex;// width: 100%;// height: 100px;// gap:10px;// border-radius: 10px;// cursor: pointer;// user-select: none;// &__icon{// // background: blue;// width: 100%;// max-width: 80px;// display: flex;// justify-content: center;// align-items: center;// &__circle{// display: flex;// text-align: center;// align-items: center;// justify-content: center;// transition: all .3s ease-in-out;// border-radius: 50px;// height: 50px;// width: 50px;// background-color: var(--color-100);// color:var(--color-500) //}//}// &__content{// display: flex;// flex-direction: column;// justify-content: center;// // background-color: yellow;// gap: 5px;// h2{// font-weight: 600;// font-size: var(--fs-sm);// margin: 0px;//}// p{// margin: 0px;// font-size: var(--fs-sm);//}//}//}// .full_width{// width: 100%;// background: #D9DFEB;// align-items: center;// justify-content: center;// display: flex;// padding: 10px;// box-sizing: border-box;//}// .content{// height: 100%;// display: flex;// justify-content: center;// flex-direction: column;// width: 90%;// // border:1px solid red;// margin: 10px;// &__top{// h1{// font-size: var(--fs-md);// font-weight: 600;//}// p{// font-weight: 500;// color: gray;// font-size: var(--fs-sm);//}//}// &__options{// p:nth-child(1){// font-size: var(--fs-sm);// font-weight: 700;// margin-bottom: 10px;// color: #6e6e6e;//}//}//}