@font-face {
    font-family: 'Mona Sans';
    src:
        url('fonts/MonaSans.woff2') format('woff2 supports variations'),
        url('fonts/MonaSans.woff2') format('woff2-variations');
    font-weight: 400 500 450 900;
    font-stretch: 100%;
}

@font-face {
    font-family: 'Geist';
    src:
        url('fonts/Geist.woff2') format('woff2 supports variations'),
        url('fonts/Geist.woff2') format('woff2-variations');
    font-weight: 500 600 700 750 900;
    font-stretch: 100%;
}

html {
    font-family: 'Mona Sans';
}

:root {
    --head: #0F172A;
    --body: #334155;
    --border: 1.5px solid rgba(210, 214, 230, 0.72);
    --shadow: 0 5px 21px -8px rgba(0, 0, 0, 0.25);
    --tabtext: #757D88;
    --tabborder: 1px solid rgba(1, 1, 13, 0.15);
    --roomcolor: 255, 15, 20;
}

a, a:link,a:visited,a:hover,a:focus,a:active{
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    margin: 0px;
    padding: 0px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

ul {
    margin: 0px;
    padding: 0px;
}

body {
    margin: 0px;
    font-family: 'Mona Sans', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    background-color: #F4F4F6;
    font-weight: 400;
}

h1 {
    font-size: 72px;
    line-height: 1;
    font-family: 'Geist', sans-serif;
    color: var(--head);
    font-weight: 700;
}

h2 {
    font-size: 48px;
    line-height: 1;
    font-family: 'Geist', sans-serif;
    color: var(--head);
    font-weight: 750;
    margin-top: 15px;
}

.container {
    margin: 0 auto;
    /* Center the container */
    padding: 0 130px;
}

.iphonecontainer {
    width: 100%;
    max-width: 1240px;
    /* Adjust the max-width as needed */
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media screen and (min-width:1180px) and (max-width:1440px) {
    .container {
        padding: 0 calc(100vw - 1310px);
    }
}

@media screen and (max-width: 900px) {
    .container {
        padding: 0 30px;
        /* Add padding if needed */
    }
}

@media screen and (max-width: 500px) {
    .container {
        padding: 0 15px;
        /* Add padding if needed */
    }
}

/* navbar */
nav {
    background: transparent;
}

.nav {
    display: flex;
    padding: 10px 0px;
    align-items: center;
    justify-content: space-between;
}

.logophoto {
    height: 40px;
    /*width: 60px;*/
    display: block;
    /*margin-right: 80px;*/
}

#menu ul {
    display: flex;
    position: relative;
    transition: 0.4s ease;
    color: #222;
}

#menu ul li {
    padding-right: 50px;
}

#menu ul :nth-child(3) {
    padding-right: 0px;
}

#menu ul :nth-child(4) {
    padding-right: 0px;
}

li>a {
    color: var(--head);
}

.btn {
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 16px;
    background-color: #F4F4F6;
    border: var(--border);
    color: #0F172A;
    font-weight: 500;
}

.cta {
    background-color: var(--head);
    color: white!important;
}

.cta i {
    transform: translate(0, 1.5px);
    color: #94A3B8;
    font-size: 18px;
}

/* navbar end */
#menu input,
#menu label {
    display: none;
}

.mnavbtn {
    display: none;
}

@media screen and (max-width:768px) {
    .logophoto {
        height: 25px;
    }

    #menu {
        padding: 12px 0px;
        z-index: 4;
    }

    #menu label {
        display: block;
    }

    #menu ul {
        z-index: 3;
        padding: 30px;
        position: fixed !important;
        top: 58px;
        left: 0px;
        width: 100vw;
        flex-direction: column;
        gap: 30px;
        align-items: center;
        justify-content: center;
        background-color: white;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
                visibility: hidden;
        transform: translate(100vh);
        transition: 0.6s ease;
    }

    #menu input:checked~ul {
        opacity: 1;
        visibility: visible;
        transform: translate(0);
    }

    .navbtn {
        display: none;
    }

    .mnavbtn {
        display: block;
    }

    #menu ul li {
        padding-right: 0px !important;
    }
}

nav {
    width: 100vw;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.hero {
    height: 100vh;
    width: 100vw;
    z-index: 0;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 0.7fr;
}

.herotext {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.herotext>p {
    margin-top: 20px;
    color: var(--body);
    line-height: 1.6;
    width: 70%;
}

.btngroup {
    display: flex;
    gap: 20px;
}

.btngroup {
    margin-top: 40px;
}

.btn i {
    transform: translate(2px, 2px);
    font-size: 20px;
    font-weight: 500;
    color: #94A3B8;
}

.triangle {
    position: absolute;
    z-index: -4 !important;
}

.bt {
    top: -40px;
    left: -450px;
    z-index: -1;
}

.mt {
    bottom: -95px;
    left: 260px;
    z-index: -1;
    scale: 0.9;
}

.st {
    top: -9px;
    left: 400px;
    z-index: -1;
    scale: 0.9;
}

.xst1 {
    top: 80px;
    left: 211px;
    z-index: -1;
}

.xst2 {
    bottom: 39px;
    left: 126px;
    z-index: -1;
    transform: rotateZ(140deg);
}

.xst3 {
    bottom: 312px;
    left: 741px;
    z-index: -1;
    transform: rotateZ(80deg) scale(1.3);
}

.xst4 {
    bottom: 188px;
    right: 358px;
    z-index: -1;
    transform: rotateZ(1deg) scale(0.9);
}

.xst5 {
    top: 139px;
    right: 114px;
    z-index: -1;
    transform: rotateZ(51deg) scale(1.3);
}

.xst6 {
    bottom: -12px;
    left: 821px;
    z-index: -1;
    transform: rotateZ(10deg) scale(1.3);
}


.widgetflex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
}

.widgets {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* scale: ; */
    transform: translate(0, -0px);
}

.widget1 {
    width: 100%;
    flex: 1;
    transform: translate(0, 20px);
}

.widget2 {
    width: 100%;
    flex: 1;
    transform: translate(0, -20px);
}

.bottomblur {
    /* background: rgb(255,255,255); */
    background-image: linear-gradient(to bottom, rgba(244, 244, 246, 0), rgba(244, 244, 246, 0.5), rgba(244, 244, 246, 1));
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    height: 60px;
    z-index: 100;
}

.heroheaderalternate {
    display: none;
}

@media screen and (max-width:1310px) {
    .container {
        padding: 0 70px;
    }

    h1 {
        font-size: 60px !important;
    }
}

@media screen and (max-width:1088px) {
    .herotext>p {
        width: 100%;
    }
}

@media screen and (max-width:1075px) {
    .hero {
        grid-template-columns: 1fr 0.8fr;
        gap: 20px;
    }

    .heroheader {
        display: none;
    }

    .heroheaderalternate {
        display: block;
    }
}

@media screen and (max-width:1000px) {
    .container {
        padding: 0 50px;
    }

    h1 {
        font-size: 50px !important;
    }

    body {
        font-size: 16px;
    }
}

@media screen and (max-width:900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .herotext {
        margin-top: 100px;
        height: fit-content;
    }

    h1 {
        font-size: 60px !important;
    }

    body {
        font-size: 18px;
    }
}

@media screen and (max-width:500px) {
    .container {
        padding: 0 15px;
    }

    h1 {
        font-size: 40px !important;
        line-height: 1.1;
    }

    body {
        font-size: 16px;
    }

    .herotext {
        margin-top: 120px;
        height: 60vh;
    }

    .herotext>p {
        margin-top: 15px;
        text-align: justify;
        text-align-last: left;
        width: 92%;
    }

    .btngroup {
        gap: 10px;
        margin-top: 30px;
    }

    .bt {
        top: -178px;
        left: -526px;
        z-index: -1;
        transform: rotate(19deg);
        opacity: 0.7;
    }

    .mt {
        left: unset;
        top: 200px;
        right: -136px;
        z-index: -1;
        scale: 0.7;
        opacity: 0.4;
    }

    .st {
        top: unset;
        bottom: 90px;
        left: -100px;
        z-index: -1;
        scale: 0.9;
        opacity: 0.3;
    }

    .xst1 {
        left: unset;
        right: 10px;
        opacity: 0.9;
        transform: rotate(50deg);
        top: 70px;
    }

    .xst3 {
        left: unset;
        right: -20px;
        bottom: 50px;
        opacity: 1;
    }

    .xst6 {
        display: none;
    }

    .xst4 {
        display: none;
    }

    .xst2 {
        display: none;
    }

    .xst5 {
        display: none;
    }

    .widget1 {
        transform: translate(0, -10px);
    }

    .widget2 {
        transform: translate(0, 10px);
    }

    .hero {
        gap: 80px;
    }

    .heroheaderalternate {
        display: none;
    }

    .heroheader {
        display: block;
    }

    .hero {
        height: 130vh;
    }
}


.pill {
    color: #6D7581;
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: 'Geist';
    padding: 7px 20px;
    border-radius: 30px;
    border: 2px solid rgba(15, 23, 42, 0.12);
    width: fit-content;
}

.servicecontainer {
    background-color: #F4F4F6 !important;
}

.servicecardcontainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 30px;
    gap: 20px;
}

.servicecard {
    --color: linear-gradient(180deg, rgba(86, 171, 220, 1) 0%, rgba(175, 225, 220, 1) 100%);
    font-family: 'Mona Sans', sans-serif;
    display: inline-block;
    width: 100%;
    height: auto;
    aspect-ratio: 1.15;
    /* margin: 20px; */
    position: relative;
    overflow: hidden;
    /* border: 2px solid var(--color); */
    border: var(--border);
    box-shadow: var(--shadow);
    padding: 30px;
    transition: color .5s;
    z-index: 1;
    font-size: 22px;
    line-height: 24px;
    border-radius: 16px;
    font-weight: 550;
    color: var(--head);
}

.servicecard:before {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--color);
    height: 400px;
    width: 450px;
    border-radius: 50%;
}

.servicecard:hover {
    color: #fff;
}

.servicecard:before {
    top: 100%;
    left: -100%;
    transition: all .7s;
}

.servicecard:hover:before {
    top: -80px;
    left: -80px;
}

.servicecard:active:before {
    background: linear-gradient(180deg, rgba(86, 171, 220, 1) 0%, rgba(175, 225, 220, 1) 100%);
    transition: all 0.7s;
    top: -80px;
    left: -80px;
}

.serviceimg {
    position: absolute;
    width: 102%;
    top: 84%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.serviceimg>img {
    width: 100%;
}

.serviceimg.fan {
    top: 125%;
}
.serviceimg.smarttv {
    top: 88%;
}
.serviceimg.lights {
    top: 153%;
}

.serviceimg.blinds {
    top: 108%;
}
.serviceimg.cctv{
    top:133%;
}

@media screen and (max-width:1000px) {
    h2 {
        font-size: 40px;
    }
}

@media screen and (max-width:800px) {
    .servicecardcontainer {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 15px;
    }

    .servicecard {
        font-size: 18px;
        line-height: 18px;
        padding: 20px;
    }
}

@media screen and (max-width:1150px) and (min-width:800px) {
    .servicecardcontainer {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        margin-top: 15px;
    }

    .servicecard {
        font-size: 18px;
        line-height: 18px;
        padding: 20px;
    }
}

@media screen and (max-width:390px) {
    .servicecard {
        font-size: 16px;
        padding:12px!important;
        aspect-ratio: 1.1;
    }
}

.about {
    margin-top: 60px;

}

.aboutcontainer {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.abouttext {
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: start;
}

.abouttext p, .footercta p {
    color: var(--body);
    margin-top: 15px;
    font-size: 18px;
    line-height: 1.6;
    width: 100%;
    margin-bottom: 40px;
    text-align: justify;
    text-align-last: left;
}

.aboutimg {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mainaboutimg {
    width: 70%;
    margin-top: 30px;
    margin-bottom: 30px;
}

.about {
    position: relative;
}

.abtlt {
    top: -4%;
    left: -3%;
}

.abtmt {
    left: 32%;
    bottom: -20%;
}

.abtst {
    left: -0%;
    bottom: -6%;
    scale: 0.8;
    opacity: 0.7;
}

.abtxst {
    top: 6%;
    left: 40%;
}

.abtxxst {
    top: 50%;
    left: 52%;
}

.abtxxxst {
    bottom: 10%;
    left: 70%;
    scale: 0.8;
}

.abtxxxxst {
    top: 30%;
    left: 90%;
    scale: 0.8;
}

@media screen and (max-width:1404px) {
    .abtst {
        left: -10%;
        bottom: 8%;
        scale: 0.8;
        opacity: 0.7;
    }

    .abtmt {
        left: 32%;
        bottom: 0%;
        scale: 0.8;
    }

    .abtlt {
        top: -2%;
        left: -5%;
        scale: 0.78;
    }
}

@media screen and (max-width: 1404px) and (min-width:1227px) {
    .abtmt {
        left: 32%;
        bottom: -12%;
        scale: 0.8;
    }
}

@media screen and (max-width: 1000px) {
    .abouttext p {
        font-size: 16px;
    }
    .footercta p {
        font-size: 16px;
    }
}

@media screen and (max-width:763px) {
    .aboutcontainer {
        display: flex;
        flex-direction: column-reverse;
    }

    .about {
        overflow: hidden;
        margin-top: 0px;
    }

    .abouttext {
        align-items: start;
        text-align: start;
    }

    .abouttext p {
        width: 100%;
        margin-bottom: 30px;
        text-align: justify;
        text-align-last: left;
        margin-top: 15px;
    }

    .mainaboutimg {
        margin-top: 0;
    }

    .abtlt {
        top: 0%;
        right: -15%;
        scale: 1;
        opacity: 0.6;
        left: unset;
    }

    .abtmt {
        left: -12%;
        top: 21%;
        scale: 0.8;
        opacity: 0.6;
    }

    .abtxst {
        top: 55%;
        right: 5%;
        scale: 0.9;
        left: unset;
        rotate: 217deg;
    }

    .abtst {
        left: -24%;
        bottom: 26%;
        scale: 0.7;
        opacity: 1;
        rotate: 146deg;
    }

    .abtxxst {
        top: unset;
        left: 69%;
        bottom: -5px;
        scale: 0.7;
        rotate: 198deg;
    }

    .mainaboutimg {
        translate: 10px;
    }

    .abtxxxst {
        bottom: 8%;
        left: 0%;
        scale: 0.5;
    }
}

@media screen and (min-width:500px) and (max-width:763px) {
    .abtst {
        left: -10%;
        bottom: 27%;
        scale: 0.7;
        opacity: 1;
        rotate: 146deg;
    }

    .abtxst {
        top: 42%;
        right: 14%;
        scale: 1;
        left: unset;
        rotate: 217deg;
    }

    .abtxxxxst {
        top: 28%;
        left: 43%;
        scale: 0.8;
    }

    .abtxxst {
        top: unset;
        left: 77%;
        bottom: 28px;
        scale: 1;
        rotate: 198deg;
    }


}

.interactp {
    margin-top: 8px;
}


@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

:root {
    --size: max(5px, 1vmin);
    --heght: 80em;
    --pad: 1.25em;
    --border-radius: 6.666em;
    --gutter: calc(var(--pad) * 2);
    --button-width: 0.333em;
    --notch-height: 3.33em;
    --notch-width: 33.3%;
    --notch-radius: calc(var(--border-radius) - calc(var(--pad) * 2));
    --notch-duration: 0.333s;
    --ease: cubic-bezier(0.666, 0, 0.4, 1);
    --ease-spring: cubic-bezier(0.666, 0, 0.4, 1.2);
    --ease-out: cubic-bezier(0.15, 0, 0.333, 1);
    --border-width: 0.4em;
    --deep-purple: 284;
    --gold: 30;
    --space-black: 215;
    --silver: 254;
    --c-h: var(--deep-purple);
    --c-s: 100%;
    --c-l: 50%;
    --roomcolor: 255, 15, 20;
}

.iphonetopcontainer {
    height: 500px;
    position: relative;
}

.iphone {
    position: absolute;
    top: -55px;
    height: fit-content;
    width: fit-content;
    border: 4px solid hsl(178 13% 54% / 1);
    border-radius: 51px;
    transform: scale(0.8) translate(-80.5%);
    left: 50%;
}
.interactcontainer{
    overflow: hidden;
}

.interactgrid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin-top: 40px;
}

.room *{
    transform-style: preserve-3d;
}
.iphone a {
    text-decoration: none;
    color: white;
}

.iphone-14 {
    width: 300px;
    height: 600px;
    border: 5px solid black;
    background: white;
    background-color: #f4f4f6;
    border-radius: 47px;
    position: relative;
}

.operator-name {
    position: absolute;
    top: 13px;
    left: 23px;
    font-size: 15px;
    font-family: 'Geist';
    color: #131313;
    font-weight: 500;
}

.dynamic-island {
    width: 100px;
    height: 25px;
    background: black;
    border-radius: 50px;
    margin: 0 auto;
    margin-top: 10px;
    position: absolute;
    left: 95px;
    z-index: 99999;
    transition: all .5s;
}

.dynamic-island-camera {
    color: white;
    position: absolute;
    top: 18px;
    right: 110px;
    background: #121212;
    box-shadow: 0 0 1px grey;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    z-index: 99999;
    transition: all .5s;
}

.operator-icons {
    position: absolute;
    top: 14px;
    right: 23px;
    font-size: 14px;
    transition: all .2s;
    font-weight: 500;
    color: black;
}

.operator-icons>img {
    height: 12px;
}

.battery {
    width: 20px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 4px;
    font-size: 10px;
    text-align: center;
    color: #000;
    background: #Fefefe;
    font-weight: bold;
    position: absolute;
    top: 0px;
    right: -28px;

}

.battery::after {
    content: "";
    position: absolute;
    /* Position the pseudo-element relative to the .battery element */
    top: 50%;
    right: -5px;
    width: 3px;
    height: 8px;
    border-radius: 3px;
    background-color: white;
    opacity: 0.3;
    transform: translate(0%, -50%);
}

.date-area {
    width: 100%;
    height: 45px;
    z-index: -1;
    position: relative;
    background-color: #f4f4f6;
    border-top-right-radius: 40px;
    border-top-left-radius: 40px;
    text-align: center;
    color: white;
}

.clock-area {
    /* margin-top: 10px; */
    width: 100%;
    font-size: 20px;
    text-align: center;
    color: white;
    padding: 15px;
}

.widget-area {
    margin-top: 10px;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: white;
}


.notification-text {
    font-size: 15px;
    color: #fff;
}

.flash-and-camera img {
    position: absolute;
    bottom: 30px;
    left: 20px;
    filter: invert(100%);
    padding: 10px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.337);
    transition: all .5s;
    cursor: pointer;
    z-index: 99999;
}

.flash-and-camera img:hover {
    background-color: rgba(255, 255, 255, 1);
}

.flash-and-camera i {
    position: absolute;
    bottom: 30px;
    right: 20px;
    color: black;
    filter: invert(100%);
    padding: 10px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.337);
    z-index: 99999;
    cursor: pointer;
    transition: all .5s;
}



.room {
    /* height: 80vh; */
    width: 100%;
    border-radius: 38px;
    /* margin-left: 20px; */
    /* background-image: url("lightroom.jpg"); */
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clock-area h3 {
    color: var(--head);
    font-size: 28px;
    line-height: 28px;
    text-align: left;
}

.pecialh3 {
    margin-bottom: 20px;
    background-clip: text;
    color: transparent !important;
    background-image: linear-gradient(89deg, rgba(86, 171, 220, 1) 0%, rgba(175, 225, 220, 1) 47%);
}

/***********************/
/***********************/
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
/***********************/
/***********************/
/**/


/* Generic */
.room1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    cursor: default;

}

.face {
    position: absolute;
}

/***************/
.house {
    position: absolute;
    width: 28vw;
    height: 28vw;
    /* transform: perspective(90vw) rotateX(75deg) rotateZ(45deg) translateZ(-9vw); */
    transform: perspective(90vw) rotateX(79deg) rotateZ(31deg) translateZ(-9vw) translateX(-40px) scale(1.1);
}

.h-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 1.5vw -3vw 3vw #000, 1.5vw 0.5vw 1.5vw #000;
}

/***************/
/***************/
.alt {
    position: absolute;
    left: 0;
    top: 0;
    width: 27vw;
    height: 27vw;
}

.alt__front {
    width: 27vw;
    height: 0.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(26.5vw);
}

.alt__back {
    width: 27vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-27vw) translateY(-0.5vw);
}

.alt__right {
    width: 27vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(27vw) translateX(-27vw) translateY(-0.5vw);
}

.alt__left {
    width: 27vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}

.alt__top {
    width: 27vw;
    height: 27vw;
    transform-origin: top left;
    transform: translateZ(0.5vw);
}

.alt__bottom {
    width: 27vw;
    height: 27vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-27vw);
}

.alt__front {
    background-color: #9e99c1;
}

.alt__back {
    background-color: #383358;
}

.alt__right {
    background-color: #383358;
}

.alt__left {
    background-color: #fbfafe;
}

.alt__top {
    background-image: linear-gradient(to bottom, #0b0c1f, #383358, #9e99c1);
}

.alt__top .light:nth-of-type(1) {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .75), rgba(var(--roomcolor), .75), transparent);
}

.alt__top .light:nth-of-type(2) {
    position: absolute;
    left: 4vw;
    height: 100%;
    width: 6vw;
    background-image: linear-gradient(to bottom, transparent 20%, rgba(var(--roomcolor), .75), rgba(var(--roomcolor), .25) 80%);
    filter: blur(0.1vw);
}

.alt__top .light:nth-of-type(3) {
    position: absolute;
    bottom: 10vw;
    left: 5vw;
    width: 6vw;
    height: 3vw;
    border-radius: 50%;
    transform: rotateZ(42deg);
    background-image: radial-gradient(rgba(var(--roomcolor), .75) 50%, rgba(var(--roomcolor), .75));
    filter: blur(0.55vw);
}

.alt__top .light:nth-of-type(4) {
    position: absolute;
    bottom: 7vw;
    left: 4vw;
    width: 8.5vw;
    height: 2vw;
    border-radius: 50%;
    transform: rotateZ(40deg);
    background-image: radial-gradient(rgba(var(--roomcolor), .75) 50%, rgba(var(--roomcolor), .75));
    filter: blur(0.55vw);
}

.alt__top .light:nth-of-type(5) {
    position: absolute;
    bottom: 3.5vw;
    left: 4.5vw;
    width: 6vw;
    height: 2vw;
    border-radius: 50%;
    transform: rotateZ(40deg);
    background-image: radial-gradient(rgba(var(--roomcolor), .75) 50%, rgba(var(--roomcolor), .75));
    filter: blur(0.75vw);
}

.alt__top .light:nth-of-type(6) {
    position: absolute;
    bottom: 3vw;
    left: 0.5vw;
    width: 4vw;
    height: 2vw;
    border-radius: 50%;
    transform: rotateZ(40deg);
    background-image: radial-gradient(rgba(var(--roomcolor), .75) 50%, rgba(var(--roomcolor), .75));
    filter: blur(0.35vw);
}

.alt__top .light:nth-of-type(7) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #000, var(--roomcolor) 10%, transparent 20%);
}

.alt__top .light:nth-of-type(7)::before {
    content: '';
    position: absolute;
    width: 20%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(var(--roomcolor), .6), transparent 60%);
}

.alt__top .light:nth-of-type(7)::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .5), transparent 60%);
}

.alt__top .light:nth-of-type(8) {
    position: absolute;
    bottom: 5vw;
    left: 10vw;
    width: 6vw;
    height: 4vw;
    border-radius: 50%;
    transform: rotateZ(40deg);
    background-image: radial-gradient(rgba(255, 255, 255, .1) 50%, rgba(128, 121, 174, .1));
    filter: blur(0.8vw);
}

.alt__bottom {
    background-color: #383358;
}

.alb {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 27vw;
    height: 1vw;
}

.alb__front {
    width: 27vw;
    height: calc(2vw + 0.5px);
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-1.1vw) translateY(1px);
}

.alb__back {
    width: 27vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-27vw) translateY(-2vw);
}

.alb__right {
    width: 1vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(27vw) translateX(-1vw) translateY(-2vw);
}

.alb__left {
    width: 1vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw);
}

.alb__top {
    width: 27vw;
    height: 1vw;
    transform-origin: top left;
    transform: translateZ(2vw);
}

.alb__bottom {
    width: 27vw;
    height: 1vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-27vw);
}

.alb__front {
    background-image: linear-gradient(to right, #9e99c1 40%, #8f89b7);
}

.alb__back {
    background-color: #383358;
}

.alb__right {
    background-color: #383358;
}

.alb__left {
    background-color: #fbfafe;
}

.alb__top {
    background-image: linear-gradient(to right, #fbfafe 40%, #eae5fa);
}

.alb__bottom {
    background-color: #383358;
}

.arb {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1vw;
    height: 28vw;
}

.arb__front {
    width: 1vw;
    height: 2vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(26vw);
}

.arb__back {
    width: 1vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-2vw);
}

.arb__right {
    width: 28vw;
    height: calc(2vw + 1px); 
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-28vw) translateY(-2vw);
}

.arb__left {
    width: 28vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw);
}

.arb__top {
    width: 1vw;
    height: 28vw;
    transform-origin: top left;
    transform: translateZ(2vw);
}

.arb__bottom {
    width: 1vw;
    height: 28vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-1vw);
}

.arb__front {
    background-color: #8f89b7;
}

.arb__back {
    background-color: #383358;
}

.arb__right {
    background-image: linear-gradient(to right, #282347 40%, #0f0e17);
}

.arb__left {
    background-color: #9e99c1;
}

.arb__top {
    background-image: linear-gradient(to top, #fbfafe, #3b3469 25%, #2e2a48 75%, #9e99c1);
}

.arb__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 30%;
    top: 0;
    background-image: linear-gradient(to bottom, transparent, rgba(var(--roomcolor), .85), transparent);
}

.arb__bottom {
    background-color: #383358;
}

/***************/
/***************/
.blt {
    position: absolute;
    left: 0;
    top: 0;
    width: 1vw;
    height: 27vw;
    transform: translateZ(0.5vw);
}

.blt__front {
    width: calc(1vw + 0.5px);
    height: 20vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(7vw);
}

.blt__back {
    width: 1vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-20vw);
}

.blt__right {
    width: 27vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-27vw) translateY(-20vw);
}

.blt__left {
    width: 27vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-20vw);
}

.blt__top {
    width: 1vw;
    height: 27vw;
    transform-origin: top left;
    transform: translateZ(20vw);
}

.blt__bottom {
    width: 1vw;
    height: 27vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-1vw);
}

.blt__front {
    background-image: linear-gradient(to bottom, #383358, #9e99c1);
}

.blt__back {
    background-color: #383358;
}

.blt__right {
    background-image: linear-gradient(to bottom, #151225, #383358, #383358 90%, #242040);
}

.blt__right::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0.75vw;
    background-image: linear-gradient(to bottom, #8f89b7, var(--roomcolor));
    border-top: 0.1vw solid #282347;
    border-bottom: 0.1vw solid #282347;
}

.blt__right::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .35), transparent 30%, transparent 70%, rgba(var(--roomcolor), .35));
}

.blt__left {
    background-color: #fbfafe;
}

.blt__bottom {
    background-color: #383358;
}

.blt2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 2vw;
    height: 27vw;
    transform: translateZ(20.5vw);
}

.blt2__front {
    width: 2vw;
    height: 0.75vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(26.25vw);
}

.blt2__back {
    width: 2vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-0.75vw);
}

.blt2__right {
    width: 27vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-27vw) translateY(-0.75vw);
}

.blt2__left {
    width: 27vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}

.blt2__top {
    width: 2vw;
    height: 27vw;
    transform-origin: top left;
    transform: translateZ(0.75vw);
}

.blt2__bottom {
    width: 2vw;
    height: 27vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-2vw);
}

.blt2__front {
    background-color: #383358;
}

.blt2__back {
    background-color: #383358;
}

.blt2__right {
    background-image: linear-gradient(to right, #8f89b7, #9e99c1, #7169a4);
}

.blt2__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    /* border-bottom: 0.1vw solid rgba(251, 250, 254, .75); */
    background-image: linear-gradient(to top, rgba(var(--roomcolor), .35), transparent);
}

.blt2__left {
    background-color: #fbfafe;
}

.blt2__top {
    background-image: linear-gradient(to top, #9e99c1, #fbfafe);
}

.blt2__bottom {
    background-color: #383358;
}

.blb {
    position: absolute;
    left: 1vw;
    top: 0;
    width: 26vw;
    height: 1vw;
    transform: translateZ(0.5vw);
}

.blb__front {
    width: 26vw;
    height: 20vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-19vw);
}

.blb__back {
    width: 26vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-26vw) translateY(-20vw);
}

.blb__right {
    width: 1vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(26vw) translateX(-1vw) translateY(-20vw);
}

.blb__left {
    width: 1vw;
    height: 20vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-20vw);
}

.blb__top {
    width: 26vw;
    height: 1vw;
    transform-origin: top left;
    transform: translateZ(20vw);
}

.blb__bottom {
    width: 26vw;
    height: 1vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-26vw);
}

.blb__front {
    background-image: linear-gradient(to bottom, #4b4572, #595388 20%, #4b4572);
}

.blb__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .25), transparent 20%, transparent 80%, rgba(var(--roomcolor), .5)), linear-gradient(to right, rgba(31, 33, 88, .35), transparent), linear-gradient(to bottom, rgba(31, 33, 88, .35), transparent), linear-gradient(to bottom, rgba(75, 2, 50, .5), transparent 20%, transparent 80%, rgba(var(--roomcolor), .25));
}

.blb__front::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0.75vw;
    background-image: linear-gradient(to bottom, #8f89b7, var(--roomcolor));
    border-top: 0.1vw solid #282347;
    border-bottom: 0.1vw solid #282347;
}

.blb__back {
    background-color: #383358;
}

.blb__right {
    background-image: linear-gradient(to bottom, #151225, #0f0e17 80%, #151225);
}

.blb__bottom {
    background-color: #383358;
}

.blb2 {
    position: absolute;
    left: 2vw;
    top: 0;
    width: 25vw;
    height: 1vw;
    transform: translateZ(20.5vw);
}

.blb2__front {
    width: 25vw;
    height: 0.75vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(1.25vw);
}

.blb2__back {
    width: 25vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-25vw) translateY(-0.75vw);
}

.blb2__right {
    width: 2vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(25vw) translateX(-2vw) translateY(-0.75vw);
}

.blb2__left {
    width: 2vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}

.blb2__top {
    width: 25vw;
    height: 2vw;
    transform-origin: top left;
    transform: translateZ(0.75vw);
}

.blb2__bottom {
    width: 25vw;
    height: 2vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-25vw);
}

.blb2__front {
    background-image: linear-gradient(to right, #7169a4, #9e99c1, #8f89b7);
}

.blb2__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    /* border-bottom: 0.1vw solid rgba(251, 250, 254, .75); */
    background-image: linear-gradient(to top, rgba(var(--roomcolor), .25), transparent);
}

.blb2__back {
    background-color: #383358;
}

.blb2__right {
    background-color: #151225;
}

.blb2__left {
    background-color: #9e99c1;
}

.blb2__top {
    background-image: linear-gradient(to left, #9e99c1, #fbfafe);
}

.blb2__bottom {
    background-color: #383358;
}

/***************/
/***************/
.bocina-l,
.bocina-r {
    position: absolute;
    left: 1.5vw;
    bottom: 5.25vw;
    width: 0.75vw;
    height: 1.5vw;
    transform: translateZ(8vw);
}

.bocina-l__front,
.bocina-r__front {
    width: 0.75vw;
    height: 6vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-4.5vw);
}

.bocina-l__back,
.bocina-r__back {
    width: 0.75vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.75vw) translateY(-6vw);
}

.bocina-l__right,
.bocina-r__right {
    width: 1.5vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.75vw) translateX(-1.5vw) translateY(-6vw);
}

.bocina-l__left,
.bocina-r__left {
    width: 1.5vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-6vw);
}

.bocina-l__top,
.bocina-r__top {
    width: 0.75vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: translateZ(6vw);
}

.bocina-l__bottom,
.bocina-r__bottom {
    width: 0.75vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.75vw);
}

.bocina-l__right,
.bocina-r__right {
    background-image: radial-gradient(#000, #000);
}

.bocina-l__top,
.bocina-r__top {
    background-image: linear-gradient(to left, #d9d0f6, #9e99c1, #7169a4);
}

.bocina-l__bottom,
.bocina-r__bottom {
    background-color: #383358;
}

.bocina-l__front {
    background-image: linear-gradient(to right, var(--roomcolor), #595388 30%, #b7a5ed);
}

.bocina-l__back {
    background-image: linear-gradient(to right, #383358, #232038);
}

.bocina-l__back::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(var(--roomcolor), .35) 65%, rgba(var(--roomcolor), .95));
}

.bocina-l__left {
    background-color: #282347;
}

.bocina-l__left::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 20%;
    width: 120%;
    height: 120%;
    background-image: linear-gradient(to left, rgba(var(--roomcolor), .75), rgba(0, 0, 0, .75));
    filter: blur(0.5vw);
}

.bocina-r {
    top: 5.25vw;
}

.bocina-r__front {
    background-image: linear-gradient(to right, #383358, #0f0e17);
}

.bocina-r__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to left, rgba(var(--roomcolor), .35) 65%, rgba(var(--roomcolor), .95));
}

.bocina-r__back {
    background-image: linear-gradient(to right, #595388, #b7a5ed);
}

.bocina-r__left {
    background-color: #282347;
}

.bocina-r__left::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 120%;
    height: 120%;
    background-image: linear-gradient(to right, rgba(var(--roomcolor), .75), rgba(0, 0, 0, .75));
    filter: blur(0.5vw);
}

.repisa-t,
.repisa-b {
    position: absolute;
    left: 1.5vw;
    top: 9vw;
    width: 1.5vw;
    height: 10vw;
    transform: translateZ(16vw);
}

.repisa-t__front,
.repisa-b__front {
    width: 1.5vw;
    height: 0.25vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(9.75vw);
}

.repisa-t__back,
.repisa-b__back {
    width: 1.5vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-1.5vw) translateY(-0.25vw);
}

.repisa-t__right,
.repisa-b__right {
    width: 10vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.5vw) translateX(-10vw) translateY(-0.25vw);
}

.repisa-t__left,
.repisa-b__left {
    width: 10vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw);
}

.repisa-t__top,
.repisa-b__top {
    width: 1.5vw;
    height: 10vw;
    transform-origin: top left;
    transform: translateZ(0.25vw);
}

.repisa-t__bottom,
.repisa-b__bottom {
    width: 1.5vw;
    height: 10vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-1.5vw);
}

.repisa-t__front,
.repisa-b__front {
    background-color: #9e99c1;
}

.repisa-t__back,
.repisa-b__back {
    background-color: #fbfafe;
}

.repisa-t__right,
.repisa-b__right {
    background-color: #8079ae;
}

.repisa-t__left,
.repisa-b__left {
    background-color: #fbfafe;
}

.repisa-t__top,
.repisa-b__top {
    background-color: #d9d0f6;
}

.repisa-t__top::before,
.repisa-b__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(var(--roomcolor), .75), transparent);
}

.repisa-t__bottom,
.repisa-b__bottom {
    background-color: #383358;
}

.repisa-t__bottom::before,
.repisa-b__bottom::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(var(--roomcolor), .75), transparent);
}

.repisa-b {
    transform: translateZ(5vw);
}

.tv {
    position: absolute;
    left: 1.51vw;
    top: 8vw;
    width: 0.5vw;
    height: 12vw;
    transform: translateZ(8vw);
}

.tv__front {
    width: 0.5vw;
    height: 6vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(6vw);
}

.tv__back {
    width: 0.5vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-6vw);
}

.tv__right {
    width: 12vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-12vw) translateY(-6vw);
}

.tv__left {
    width: 12vw;
    height: 6vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-6vw);
}

.tv__top {
    width: 0.5vw;
    height: 12vw;
    transform-origin: top left;
    transform: translateZ(6vw);
}

.tv__bottom {
    width: 0.5vw;
    height: 12vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.5vw);
}

.tv__front {
    background-color: #0b0c1f;
}

.tv__back {
    background-color: #0b0c1f;
}

.tv__right {
    background-color: #000;
    border: 0.125vw solid #000;
    animation: pantalla-tv 0.25s infinite alternate;
}

.tv__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: 0.125vw 0.125vw 1vw rgba(var(--roomcolor), .5), -0.125vw 0.125vw 1vw rgba(var(--roomcolor), .5), 0.125vw -0.125vw 1vw rgba(var(--roomcolor), .5), -0.125vw -0.125vw 1vw rgba(var(--roomcolor), .5);
    opacity: 0.8;
}

.tv__active {
    background-image: url('./img/doraemon.gif');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

.tv__left {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0b0c1f;
}

.tv__left::before {
    content: '';
    position: absolute;
    width: 13vw;
    height: 7vw;
    background-image: radial-gradient(rgba(var(--roomcolor), .95), rgba(var(--roomcolor), .95));
    filter: blur(1.25vw);
    animation: luz-tv 0.25s infinite alternate;
}

.tv__top {
    background-color: #0b0c1f;
}

.tv__bottom {
    background-color: #0b0c1f;
}

.librero {
    position: absolute;
    left: 13vw;
    top: 1vw;
    width: 12vw;
    height: 0.5vw;
    transform: translateZ(7vw);
}

.librero__front {
    width: 12vw;
    height: 0.25vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(1.25vw);
}

.librero__back {
    width: 12vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-0.25vw);
}

.librero__right {
    width: 1.5vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-1.5vw) translateY(-0.25vw);
}

.librero__left {
    width: 1.5vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw);
}

.librero__top {
    width: 12vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: translateZ(0.25vw);
}

.librero__bottom {
    width: 12vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-12vw);
}

.librero__front {
    background-color: #9e99c1;
}

.librero__back {
    background-color: #383358;
}

.librero__back::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4vw;
    border-radius: 50%;
    background-image: radial-gradient(rgba(var(--roomcolor), .7) 50%, rgba(var(--roomcolor), .6), transparent);
    filter: blur(1.25vw);
}

.librero__right {
    background-color: #383358;
}

.librero__left {
    background-color: #9e99c1;
}

.librero__top {
    background-color: #d9d0f6;
}

.librero__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .75), transparent);
}

.librero__bottom {
    background-color: #383358;
}

.librero__bottom::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .75), transparent);
}

.libros {
    position: absolute;
}

.libro {
    position: absolute;
    top: 1vw;
    width: 0.5vw;
    height: 1vw;
    transform: translateZ(7.25vw);
}

.libro__front {
    width: 0.5vw;
    height: 1.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-0.5vw);
}

.libro__back {
    width: 0.5vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-1.5vw);
}

.libro__right {
    width: 1vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-1vw) translateY(-1.5vw);
}

.libro__left {
    width: 1vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.5vw);
}

.libro__top {
    width: 0.5vw;
    height: 1vw;
    transform-origin: top left;
    transform: translateZ(1.5vw);
}

.libro__bottom {
    width: 0.5vw;
    height: 1vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.5vw);
}

.libro__front {
    background-image: linear-gradient(to bottom, #9e99c1, #8079ae);
}

.libro__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .4), transparent);
}

.libro__back {
    background-color: #fbfafe;
}

.libro__right {
    background-color: #645c98;
}

.libro__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .85), rgba(var(--roomcolor), .35));
}

.libro__left {
    background-color: #9e99c1;
}

.libro__top {
    background-color: #d9d0f6;
}

.libro__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .85), rgba(var(--roomcolor), .35));
}

.libro__bottom {
    background-color: #554d85;
}

.libro:nth-of-type(1) {
    left: 16vw;
    transform-origin: left;
    transform: translateZ(7.25vw) rotateZ(-10deg);
}

.libro:nth-of-type(2) {
    left: 17vw;
    transform: translateZ(7.25vw) rotateZ(2deg);
}

.libro:nth-of-type(3) {
    left: 17.75vw;
    transform: translateZ(7.25vw) rotateZ(5deg);
}

.libro:nth-of-type(4) {
    left: 19vw;
    transform-origin: left;
    transform: translateZ(7.25vw) rotateZ(10deg);
}

.libro:nth-of-type(5) {
    left: 20vw;
    transform-origin: left;
    transform: translateZ(7.25vw) rotateZ(10deg);
}

.libro:nth-of-type(6) {
    left: 23vw;
    transform-origin: left;
    transform: translateZ(7.25vw) rotateY(-90deg);
}

.fotos {
    position: absolute;
}

.foto {
    position: absolute;
    width: 0.125vw;
    height: 2vw;
    left: 2vw;
    top: 11vw;
    transform: translateZ(5.26vw);
}

.foto__front {
    width: 0.125vw;
    height: 1.125vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(1.125vw);
}

.foto__back {
    width: 0.125vw;
    height: 1.125vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.125vw) translateY(-1.125vw);
}

.foto__right {
    width: 2.25vw;
    height: 1.125vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.125vw) translateX(-2.25vw) translateY(-1.125vw);
}

.foto__left {
    width: 2.25vw;
    height: 1.125vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.125vw);
}

.foto__top {
    width: 0.125vw;
    height: 2.25vw;
    transform-origin: top left;
    transform: translateZ(1.125vw);
}

.foto__bottom {
    width: 0.125vw;
    height: 2.25vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.125vw);
}

.foto__front {
    background-image: linear-gradient(to bottom, #9e99c1, #8079ae);
}

.foto__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .4), transparent);
}

.foto__back {
    background-color: #fbfafe;
}

.foto__right {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #8f89b7;
    border: 0.15vw solid #1f2158;
}

.foto__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(to bottom, #9e99c1 0.1vw, #b7a5ed 0.2vw);
}

.foto__left {
    background-color: #9e99c1;
}

.foto__top {
    background-color: #d9d0f6;
}

.foto__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .85), rgba(var(--roomcolor), .35));
}

.foto__bottom {
    background-color: #595388;
}

.foto__bottom::before {
    content: '';
    position: absolute;
    right: -100%;
    width: 400%;
    height: 100%;
    background-color: rgba(11, 12, 31, .75);
    filter: blur(0.15vw);
}

.foto:nth-of-type(1) {
    top: 10.5vw;
    transform: translateZ(5.26vw) rotateZ(5deg);
}

.foto:nth-of-type(2) {
    top: 15vw;
    transform: translateZ(5.26vw) rotateZ(-15deg);
}

.cajas {
    position: absolute;
}

.caja {
    position: absolute;
    width: 1vw;
    height: 1.5vw;
    left: 2vw;
    transform: translateZ(16.35vw);
}

.caja__front {
    width: 1vw;
    height: 0.75vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(0.75vw);
}

.caja__back {
    width: 1vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-0.75vw);
}

.caja__right {
    width: 1.5vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-1.5vw) translateY(-0.75vw);
}

.caja__left {
    width: 1.5vw;
    height: 0.75vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.75vw);
}

.caja__top {
    width: 1vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: translateZ(0.75vw);
}

.caja__bottom {
    width: 1vw;
    height: 1.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-1vw);
}

.caja__front {
    background-image: linear-gradient(to bottom, #9e99c1, #8079ae);
}

.caja__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .4), transparent);
}

.caja__back {
    background-color: #9e99c1;
}

.caja__right {
    background-color: #645c98;
}

.caja__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .85), rgba(var(--roomcolor), .35));
}

.caja__left {
    background-color: #9e99c1;
}

.caja__top {
    background-color: #d9d0f6;
}

.caja__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .85), rgba(var(--roomcolor), .35));
}

.caja__bottom {
    background-color: #595388;
}

.caja__bottom::before {
    content: '';
    position: absolute;
    right: -50%;
    width: 150%;
    height: 120%;
    background-color: rgba(31, 33, 88, .5);
    filter: blur(0.15vw);
}

.caja:nth-of-type(1) {
    top: 11.6vw;
}

.caja:nth-of-type(2) {
    top: 13.5vw;
}

.caja:nth-of-type(3) {
    top: 17vw;
}

.cuadro-l,
.cuadro-r {
    position: absolute;
    left: 13vw;
    top: 1vw;
    width: 5vw;
    height: 0.5vw;
    transform: translateZ(10vw);
}

.cuadro-l__front,
.cuadro-r__front {
    width: 5vw;
    height: 7vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-6.75vw);
    border: 2.5px solid #dddbe6;
}

.cuadro-l__back,
.cuadro-r__back {
    width: 5vw;
    height: 7vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-5vw) translateY(-7vw);
}

.cuadro-l__right,
.cuadro-r__right {
    width: 0.25vw;
    height: 7vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(5vw) translateX(-0.25vw) translateY(-7vw);
}

.cuadro-l__left,
.cuadro-r__left {
    width: 0.25vw;
    height: 7vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-7vw);
}

.cuadro-l__top,
.cuadro-r__top {
    width: 5vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: translateZ(7vw);
}

.cuadro-l__bottom,
.cuadro-r__bottom {
    width: 5vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-5vw);
}

.cuadro-l__front,
.cuadro-r__front {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.cuadro-l__back,
.cuadro-r__back {
    background-color: #383358;
    box-shadow: 0.35vw 0.35vw 0.35vw rgba(var(--roomcolor), .2), -0.35vw 0.35vw 0.35vw rgba(var(--roomcolor), .2), -0.35vw -0.35vw 0.35vw rgba(var(--roomcolor), .2), 0.35vw -0.35vw 0.35vw rgba(var(--roomcolor), .2);
}

.cuadro-l__right,
.cuadro-r__right {
    background-color: #383358;
}

.cuadro-l__left,
.cuadro-r__left {
    background-color: #9e99c1;
}

.cuadro-l__top,
.cuadro-r__top {
    background-color: #9e99c1;
}

.cuadro-l__bottom,
.cuadro-r__bottom {
    background-color: #383358;
}

.cuadro-l__front {
    background-image: url('./img/curtain.png');
    background-size: cover!important;
    transition: background-image 0.5s ease-in-out;
}

.open-curtain {
    background-image: url('./img/curtainopen1.png')!important;
    background-size: cover!important;
}

.close-curtain {
    background-image: url('./img/curtain.png')!important;
    background-size: cover!important;
}

.cuadro-l__front::before {
    position: absolute;
    top: -1vw;
    left: -1vw;
    width: 5vw;
    height: 7vw;
    background-origin: padding-box;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .15), rgba(var(--roomcolor), .15));
}

.cuadro-r {
    left: 20vw;
}

.cuadro-r__front {
    background-image: url('./img/curtain.png');
    background-size: cover!important;
    transition: background-image 0.5s ease-in-out;
    border: 2.5px solid #dddbe6;
}

.cuadro-r__front::before {
    position: absolute;
    top: -0.5vw;
    left: -0.5vw;
    width: 5vw;
    height: 7vw;
    background-origin: padding-box;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .15), rgba(var(--roomcolor), .15));
}

.puerta-c {
    position: absolute;
    left: 3vw;
    top: 1vw;
    width: 8vw;
    height: 0.5vw;
    transform: translateZ(0.5vw);
}

.puerta-c::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 200%;
    background-color: rgba(0, 0, 0, .65);
    filter: blur(0.5vw);
}

.puerta {
    position: absolute;
    left: 0.5vw;
    top: 0;
    width: 7vw;
    height: 0.5vw;
}

.puerta__front {
    width: 7vw;
    height: 16vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-15.75vw);
}

.puerta__back {
    width: 7vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-16vw);
}

.puerta__right {
    width: 0.25vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-0.25vw) translateY(-16vw);
}

.puerta__left {
    width: 0.25vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-16vw);
}

.puerta__top {
    width: 7vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: translateZ(16vw);
}

.puerta__bottom {
    width: 7vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-7vw);
}

.puerta__front {
    background-image: linear-gradient(to bottom, #0f1110, #121332);
    border: 0.125vw solid var(--roomcolor);
}

.puerta__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(transparent 50%, rgba(var(--roomcolor), .25));
    box-shadow: 0.65vw 0.65vw 0.5vw rgba(var(--roomcolor), .6), -0.65vw 0.65vw 0.5vw rgba(var(--roomcolor), .6), -0.65vw -0.65vw 0.5vw rgba(var(--roomcolor), .6), 0.65vw -0.65vw 0.5vw rgba(var(--roomcolor), .6);
}

.puerta__front::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.75vw;
    width: 1vw;
    height: 0.25vw;
    background-color: #9e99c1;
    box-shadow: 0.125vw 0.125vw 0.25vw rgba(var(--roomcolor), .6), -0.125vw 0.125vw 0.25vw rgba(var(--roomcolor), .6), -0.125vw -0.125vw 0.25vw rgba(var(--roomcolor), .6), 0.125vw -0.125vw 0.25vw rgba(var(--roomcolor), .6);
}

.puerta-l,
.puerta-r {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.5vw;
    height: 0.5vw;
}

.puerta-l__front,
.puerta-r__front {
    width: 0.5vw;
    height: 16vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-15.5vw);
}

.puerta-l__back,
.puerta-r__back {
    width: 0.5vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-16vw);
}

.puerta-l__right,
.puerta-r__right {
    width: 0.5vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-0.5vw) translateY(-16vw);
}

.puerta-l__left,
.puerta-r__left {
    width: 0.5vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-16vw);
}

.puerta-l__top,
.puerta-r__top {
    width: 0.5vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: translateZ(16vw);
}

.puerta-l__bottom,
.puerta-r__bottom {
    width: 0.5vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.5vw);
}

.puerta-l__front,
.puerta-r__front {
    background-color: #121332;
}

.puerta-l__back,
.puerta-r__back {
    background-color: #0b0c1f;
}

.puerta-l__right,
.puerta-r__right {
    background-color: #0b0c1f;
}

.puerta-l__left,
.puerta-r__left {
    background-color: #121332;
}

.puerta-l__bottom,
.puerta-r__bottom {
    background-color: #0b0c1f;
}

.puerta-r {
    left: calc(100% - .5vw);
}

.puerta-t {
    left: 0;
    top: 0;
    width: 8vw;
    height: 0.5vw;
    transform: translateZ(16vw);
}

.puerta-t__front {
    width: 8vw;
    height: 0.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(0vw);
}

.puerta-t__back {
    width: 8vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-0.5vw);
}

.puerta-t__right {
    width: 0.5vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-0.5vw) translateY(-0.5vw);
}

.puerta-t__left {
    width: 0.5vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}

.puerta-t__top {
    width: 8vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: translateZ(0.5vw);
}

.puerta-t__bottom {
    width: 8vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-8vw);
}

.puerta-t__front {
    background-color: #121332;
}

.puerta-t__back {
    background-color: #0b0c1f;
}

.puerta-t__right {
    background-color: #0b0c1f;
}

.puerta-t__left {
    background-color: #121332;
}

.puerta-t__top {
    background-color: #1f2158;
}

.puerta-t__bottom {
    background-color: #0b0c1f;
}

.muro {
    position: absolute;
    left: 1vw;
    top: 6vw;
    width: 0.5vw;
    height: 16vw;
    transform: translateZ(0.51vw);
}

.muro__front {
    width: 0.5vw;
    height: 18vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-2vw);
}

.muro__back {
    width: 0.5vw;
    height: 18vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-18vw);
}

.muro__right {
    width: 16vw;
    height: 18vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-16vw) translateY(-18vw);
}

.muro__left {
    width: 16vw;
    height: 18vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-18vw);
}

.muro__top {
    width: 0.5vw;
    height: 16vw;
    transform-origin: top left;
    transform: translateZ(18vw);
}

.muro__bottom {
    width: 0.5vw;
    height: 16vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.5vw);
}

.muro__front {
    background-color: #0b0c1f;
}

.muro__back {
    background-color: #0b0c1f;
}

.muro__right {
    display: flex;
    justify-content: center;
    background-image: radial-gradient(circle, #1f2158, #0b0c1f);
    overflow: hidden;
}

.muro__right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .25), transparent 30%, transparent 70%, rgba(var(--roomcolor), .15));
}

.muro__right::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 25%;
    background-image: linear-gradient(to bottom, rgba(4, 5, 13, .75), rgba(4, 5, 13, .95));
    filter: blur(0.75vw);
}

.muro__left {
    background-color: #0b0c1f;
    box-shadow: 0.5vw 0.5vw 0.6vw rgba(var(--roomcolor), .3), 0.5vw -0.5vw 0.6vw rgba(var(--roomcolor), .3), -0.5vw 0.5vw 0.6vw rgba(var(--roomcolor), .3), -0.5vw -0.5vw 0.6vw rgba(var(--roomcolor), .3);
}

.muro__top {
    background-color: #0b0c1f;
}

.muro__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    background-image: linear-gradient(to left, rgba(var(--roomcolor), .5), rgba(var(--roomcolor), .25));
}

.muro__bottom {
    background-color: #0b0c1f;
}

.muro__bottom::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5vw;
    height: 100%;
    background-image: linear-gradient(to left, #0b0c1f, transparent 50%);
    transform-origin: right bottom;
    transform: skewY(-20deg);
    filter: blur(0.25vw);
}

.sillon-c {
    position: absolute;
    right: 2vw;
    bottom: 6vw;
    width: 6vw;
    height: 16vw;
    transform: translateZ(0.5vw);
}

.sillon-c::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-color: rgba(11, 12, 31, .85);
    filter: blur(0.75vw);
}

.sillon-b {
    position: absolute;
    left: 0;
    top: 1vw;
    width: 6vw;
    height: 14vw;
}

.sillon-b__front {
    width: 6vw;
    height: 3vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(11vw);
}

.sillon-b__back {
    width: 6vw;
    height: 3vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-3vw);
}

.sillon-b__right {
    width: 14vw;
    height: 3vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-14vw) translateY(-3vw);
}

.sillon-b__left {
    width: 14vw;
    height: 3vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw);
}

.sillon-b__top {
    width: 6vw;
    height: 14vw;
    transform-origin: top left;
    transform: translateZ(3vw);
}

.sillon-b__bottom {
    width: 6vw;
    height: 14vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-6vw);
}

.sillon-b__front {
    background-color: #121332;
}

.sillon-b__back {
    background-color: #0b0c1f;
}

.sillon-b__right {
    background-color: #0b0c1f;
}

.sillon-b__left {
    background-image: linear-gradient(to bottom, #121332, #0b0c1f);
}

.sillon-b__left::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(var(--roomcolor), .1), transparent);
}

.sillon-b__top {
    background-image: linear-gradient(to right, #1f2158, #121332);
    border-left: 0.1vw solid rgba(158, 153, 193, .5);
}

.sillon-b__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(var(--roomcolor), .25), transparent);
}

.sillon-b__bottom {
    background-color: #0b0c1f;
}

.sillon-l,
.sillon-r {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 6vw;
    height: 1vw;
}

.sillon-l__front,
.sillon-r__front {
    width: 6vw;
    height: 4.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-3.5vw);
}

.sillon-l__back,
.sillon-r__back {
    width: 6vw;
    height: 4.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-4.5vw);
}

.sillon-l__right,
.sillon-r__right {
    width: 1vw;
    height: 4.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-1vw) translateY(-4.5vw);
}

.sillon-l__left,
.sillon-r__left {
    width: 1vw;
    height: 4.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-4.5vw);
}

.sillon-l__top,
.sillon-r__top {
    width: 6vw;
    height: 1vw;
    transform-origin: top left;
    transform: translateZ(4.5vw);
}

.sillon-l__bottom,
.sillon-r__bottom {
    width: 6vw;
    height: 1vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-6vw);
}

.sillon-l__front,
.sillon-r__front {
    background-image: linear-gradient(to bottom, #121332, #0b0c1f);
}

.sillon-l__back,
.sillon-r__back {
    background-color: #0b0c1f;
}

.sillon-l__right,
.sillon-r__right {
    background-image: linear-gradient(to bottom, #0b0c1f, #000);
}

.sillon-l__left,
.sillon-r__left {
    background-image: linear-gradient(to bottom, #121332, #0b0c1f);
}

.sillon-l__top,
.sillon-r__top {
    background-image: linear-gradient(to right, #1f2158, #0f102b);
    border-bottom: 0.1vw solid rgba(158, 153, 193, .5);
}

.sillon-l__top::before,
.sillon-r__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(var(--roomcolor), .75), transparent);
}

.sillon-l__bottom,
.sillon-r__bottom {
    background-color: #0b0c1f;
}

.sillon-r {
    top: 0;
}

.sillon-t {
    position: absolute;
    right: 0;
    top: 1vw;
    width: 1vw;
    height: 1vw;
    transform-origin: right;
    transform: rotateY(7deg);
}

.sillon-t__front {
    width: 1vw;
    height: 6.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(7.5vw);
}

.sillon-t__back {
    width: 1vw;
    height: 6.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-6.5vw);
}

.sillon-t__right {
    width: 14vw;
    height: 6.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-14vw) translateY(-6.5vw);
}

.sillon-t__left {
    width: 14vw;
    height: 6.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-6.5vw);
}

.sillon-t__top {
    width: 1vw;
    height: 14vw;
    transform-origin: top left;
    transform: translateZ(6.5vw);
}

.sillon-t__bottom {
    width: 1vw;
    height: 14vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-1vw);
}

.sillon-t__front {
    background-image: linear-gradient(to bottom, #0b0c1f, #070814);
}

.sillon-t__back {
    background-image: linear-gradient(to bottom, #0b0c1f, #0b0c1f);
}

.sillon-t__right {
    background-image: linear-gradient(to bottom, #0b0c1f, #000);
}

.sillon-t__left {
    background-color: #121332;
}

.sillon-t__top {
    background-image: linear-gradient(to right, #1f2158, #0f102b);
    border-bottom: 0.1vw solid rgba(158, 153, 193, .5);
}

.sillon-t__top::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(var(--roomcolor), .5), transparent);
}

.sillon-t__bottom {
    background-color: #0b0c1f;
}

.mesa-c {
    position: absolute;
    left: 7vw;
    top: 9.5vw;
    width: 10vw;
    height: 9vw;
    transform: translateZ(0.5vw);
}

.mesa-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10%;
    background-color: rgba(11, 12, 31, .95);
    filter: blur(1vw);
    transform: translateZ(0);
}

.mesa {
    position: absolute;
    left: 0;
    top: 0;
    width: 10vw;
    height: 9vw;
    transform: translateZ(2vw);
}

.mesa__front {
    width: 10vw;
    height: 0.5vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(8.5vw);
}

.mesa__back {
    width: 10vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-10vw) translateY(-0.5vw);
}

.mesa__right {
    width: 9vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(10vw) translateX(-9vw) translateY(-0.5vw);
}

.mesa__left {
    width: 9vw;
    height: 0.5vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}

.mesa__top {
    width: 10vw;
    height: 9vw;
    transform-origin: top left;
    transform: translateZ(0.5vw);
}

.mesa__bottom {
    width: 10vw;
    height: 9vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-10vw);
}

.mesa__front {
    background-image: linear-gradient(to right, #0b0c1f, #000);
}

.mesa__front::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, rgba(var(--roomcolor), .125), rgba(253, 180, 229, .25), transparent 55%);
}

.mesa__back {
    background-color: #0b0c1f;
}

.mesa__right {
    background-color: #000;
}

.mesa__left {
    background-color: #121332;
}

.mesa__top {
    background-image: linear-gradient(45deg, #0e0f27, #04050d);
    overflow: hidden;
}

.mesa__top::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 50%;
    background-image: linear-gradient(45deg, rgba(var(--roomcolor), .5), rgba(251, 250, 254, .125) 50%, transparent 55%);
    filter: blur(0.5vw);
}

.mesa__top::after {
    content: '';
    position: absolute;
    left: 2vw;
    top: 2vw;
    width: 20%;
    height: 50%;
    border-radius: 50%;
    background-color: rgba(var(--roomcolor), .079);
    transform: rotateZ(-40deg);
    filter: blur(0.75vw);
}

.mesa__bottom {
    background-color: #0b0c1f;
}

.mesa-p {
    position: absolute;
    width: 0.25vw;
    height: 0.25vw;
}

.mesa-p__front {
    width: 0.25vw;
    height: 1.75vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(-1.5vw);
}

.mesa-p__back {
    width: 0.25vw;
    height: 1.75vw;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-0.25vw) translateY(-1.75vw);
}

.mesa-p__right {
    width: 0.25vw;
    height: 1.75vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.25vw) translateX(-0.25vw) translateY(-1.75vw);
}

.mesa-p__left {
    width: 0.25vw;
    height: 1.75vw;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.75vw);
}

.mesa-p__top {
    width: 0.25vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: translateZ(1.75vw);
}

.mesa-p__bottom {
    width: 0.25vw;
    height: 0.25vw;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-0.25vw);
}

.mesa-p__front {
    background-color: #0b0c1f;
}

.mesa-p__back {
    background-color: #0b0c1f;
}

.mesa-p__right {
    background-color: #000;
}

.mesa-p__left {
    background-color: #121332;
}

.mesa-p__top {
    background-color: #1f2158;
}

.mesa-p__bottom {
    background-color: #0b0c1f;
}

.mesa-p__bottom::before {
    content: '';
    position: absolute;
    width: 600%;
    height: 200%;
    top: 0;
    right: 0;
    border-radius: 10%;
    transform: translateZ(-0.1vw);
    background-color: rgba(0, 0, 0, .75);
    filter: blur(0.35vw);
}

.mesa-p:nth-of-type(1) {
    left: 0.5vw;
    top: 0.5vw;
}

.mesa-p:nth-of-type(2) {
    right: 0.5vw;
    top: 0.5vw;
}

.mesa-p:nth-of-type(3) {
    left: 0.5vw;
    bottom: 0.5vw;
}

.mesa-p:nth-of-type(4) {
    right: 0.5vw;
    bottom: 0.5vw;
}

@keyframes pantalla-tv {
    from {
        background-color: #000;
        box-shadow: 0.125vw 0.125vw 0vw rgba(var(--roomcolor), 0), -0.125vw 0.125vw 0vw rgba(var(--roomcolor), 0), 0.125vw -0.125vw 0vw rgba(var(--roomcolor), 0), -0.125vw -0.125vw 0vw rgba(var(--roomcolor), 0);
    }
}

@keyframes luz-tv {
    from {
        background-image: radial-gradient(rgba(var(--roomcolor), .8), rgba(var(--roomcolor), .8));
    }
}

input.apple-switch {
    position: relative;
    appearance: none;
    outline: none;
    max-width: 50px;
    height: 30px;
    background-color: #ffffff;
    border: 1px solid #D9DADC;
    border-radius: 50px;
    box-shadow: inset -20px 0 0 0 #ffffff;
    transition-duration: 200ms;
    cursor: pointer;
}

input.apple-switch:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 26px;
    height: 26px;
    background-color: transparent;
    border-radius: 50%;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
}

input.apple-switch:checked {
    border-color: #4ED164;
    box-shadow: inset 20px 0 0 0 #4ED164;
}

input.apple-switch:checked:after {
    left: 20px;
    box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05);
}

/* .inputs {
    margin-top: 10%;
} */

.text-white {
    color: white !important;
    font-size: medium;
    display: flex;
    position: relative;
    justify-content: flex-start;
    left: 15px;
}

.label {
    width: 92%;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    /* Negative margin to compensate for column padding */
}

.bb {
    background-color: #161618;
    border-radius: 12px;
    margin-bottom: 4%;
    height: 45px;
    display: flex;
    align-items: center;
}

.maincontainer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #000;
}

.phonecontainer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    /* padding: 10px; */
}

.phonegrid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.phonecard {
    width: 100%;
    aspect-ratio: 1;
    background-color: white;
    transition: ease 0.6s;
    border-radius: 16px;
    border: 1.5px solid rgba(210, 214, 230, 0.72);
    /* box-shadow: 0 5px 21px -8px rgba(0, 0, 0, 0.25); */
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; */
    /* box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; */
}


.phonelength {
    width: 100%;
    aspect-ratio: 1.8;
    background-color: white;
    border-radius: 16px;
    transition: ease 0.6s;
    border: 1.5px solid rgba(210, 214, 230, 0.72);
    /* box-shadow: 0 5px 21px -8px rgba(0, 0, 0, 0.25); */
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; */
    /* box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; */
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 10px;
}

.line {
    background: hsl(0 0% 55% / 1);
    bottom: 7px;
    width: 111px;
    height: 5px;
    position: absolute;
    border-radius: 25px;
    left: 50%;
    transform: translateX(-50%);
}

.phonecard:hover,
.phonelength:hover {
    box-shadow: 0 5px 21px -8px rgba(0, 0, 0, 0.25);
}

.colorselectortext {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.colorselectortexttext {
    text-align: start;
    color: var(--body);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    font-family: 'Mona Sans';
}

.switch {
    --secondary-container: #3a4b39;
    --primary: #84da89;
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.7em;
    height: 2em;
}

.switch input {
    display: none;
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cccccc;
    transition: .2s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 20px;
    left: 0.3em;
    bottom: 0.3em;
    background-color: #ffffff;
    transition: .4s;
}

input:checked+.slider::before {
    background-color: white;
}

input:checked+.slider {
    background-color: #4296f4;
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--secondary-container);
}

input:checked+.slider:before {
    transform: translateX(1.7em);
}

.interactwidgetsgrid2{
    width: 100%;
}
.interactwidgetsgrid2>.interactivecards1{
    width: 100%;
    aspect-ratio: 2;
}

.interactivecards2{
    transition: ease 0.6s;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    width: 100%;
    aspect-ratio: 2;
    background-color: white!important;
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: 16px;
    padding: 15px;
}
.interactivecards2text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    justify-content: space-between;
}

.interactivecards1{
    transition: ease 0.6s;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5px;
}

.interactivecards1img{
    overflow: hidden;
    width: 100%;
    position: relative;
    border-radius: 0 16px 0;
}
.interactivecards1img>img{
    position: absolute;
    top: 20px;
    right: 0px;
    width: 500px;
}

.interactivecards2img{
    overflow: hidden;
    width: 100%;
    position: relative;
    border-radius: 0 16px 0;
}
.interactivecards2img>img{
    position: absolute;
    top: 20px;
    right: 0px;
    width: 500px;
}

.interactivehighangle>img{
    width: 150px;
}
.interactivecards1text{
    justify-content:space-between;
    text-align: start;
    color: var(--body);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    display: flex;
    font-family: "Mona Sans";
    flex-direction: column;
    padding: 15px;
    padding-left: 0px;
}



.phonecard{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5px;
    /* overflow: hidden; */
}
.phonecardimg{
    overflow: hidden;
    width: 100%;
    position: relative;
    border-radius: 0 16px 0;
}
.phonecardimg>img{
    position: absolute;
    top: 10px;
    right: 0px;
    width: 211px;
}
.phonecardtext{
    justify-content:space-between;
    text-align: start;
    color: var(--body);
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    display: flex;
    font-family: "Mona Sans";
    flex-direction: column;
    padding: 10px;
    padding-left: 0px;
}
.highangle>img{
    width: 95px;
}
.curtainimg>img{
    width: 117px;
}

.blb__front::before, .tv__right::before, .sillon-l__top::before, .sillon-r__top::before,.sillon-t__top::before,.sillon-b__top::before,.arb__top::before,.puerta__front::before,.blt__right::after,.blt__right::before,.blt2__right::before,.librero__bottom::before,.muro__bottom::before,.sillon-b__left::before,.alt__top .light:nth-of-type(7)::before,.caja__right::before,.caja__front::before,.libro__right::before,.libro__top::before,.libro__front::before,.mesa__top::before,.mesa__top::after,.mesa__front::before,.bocina-r__front::before,.bocina-l__left::before,.bocina-l__back::before,.bocina-r__left::before,.repisa-t__top::before, .repisa-b__top::before, .caja__top::before,.blb2__front::before, .librero__top::before,.alt__top .light:nth-of-type(7)::after,.blb__front::after {
    transform: translate(-50%);
}
.bocina-r__left::before,.muro__bottom::before{
    transform: translate(0);
}
.interactwidgets{
    display: none;
}
.interactwidgetsgrid1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.interactivecards1{
    background-color: white;
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: 16px;
    width: 100%;
    aspect-ratio: 1;
}

@media screen and (min-width:1055px) {
    .house{
        transform:perspective(90vw) rotateX(79deg) rotateZ(31deg) translateZ(-9vw) translateX(40px) scale3d(1.2,1.2,1.2);
    }
    .iphone{
        transform: scale(0.7) translate(-100.5%,-3px);
    }
}
@media screen and (min-width:1380px) {
    .house{
        translate: 0 -30px;
        transform:perspective(90vw) rotateX(79deg) rotateZ(31deg) translateZ(-9vw) translateX(40px) scale3d(1.1,1.1,1.1);
    }
    .iphone{
        transform: scale(0.7) translate(-100.5%,-60px);
    }
}
@media screen and (min-width:1500px) {
    .house{
        translate: 0 -25px!important;
    }
    .house{
        transform:perspective(90vw) rotateX(79deg) rotateZ(31deg) translateZ(-9vw) translateX(69px) scale3d(1.0,1.0,1.0);
    }
    .iphone{
        transform:scale(0.8) translate(-100.5%,-10px);
    }
}

@media screen and (min-width:1400px) and (max-width:1785px) {
    .iphone{
        transform:scale(0.7) translate(-100.5%,-60px);
    }
    .house{
        translate: 0 -25px!important;
    }
}

@media screen and (min-width:1500px) and (max-width:1780px){
    .iphone{
        transform:scale(0.7) translate(-100.5%,-10px);
    }
}

@media screen and (min-width:1700px) {
    .iphone{
        transform: scale(0.85) translate(-100.5%,11px);
    }
    .house{
        translate: 0 -2px!important;
    }
}

@media screen and (max-width:1301px) and (min-width:1055px){
    .iphone{
        transform: scale(0.7) translate(-100.5%,-60px);
    }
    .house{
        transform:perspective(90vw) rotateX(79deg) rotateZ(31deg) translateZ(-6vw) translateX(40px) scale3d(1.2,1.2,1.2);
    }
}
@media screen and (max-width:1185px) {
    .iphone{
        transform:scale(0.6) translate(-100.5%,-60px);
    }
    .house{
        transform:perspective(90vw) rotateX(79deg) rotateZ(31deg) translateZ(-6vw) translateX(40px) scale3d(1.2,1.2,1.2);
    }
}
@media screen and (max-width:750px) {
    .interactgrid{
        display: flex;
        flex-direction: column;
        margin-top: 10px;
    }
    .room{
        aspect-ratio: 1;
    }
    .house{
        transform: perspective(90vw) rotateX(65deg) rotateZ(42deg) translateZ(-6vw) translateX(05px) scale3d(1.95,1.95,1.95)
    }
    .alb__bottom.face , .alb__right.face, .alb__back.face{
        display: none;
    }
    .alb__front.face{
        transform: rotateX(-90deg) translateZ(calc(-1.1vw - 0.5px )) translateY(1px);
        height:calc(2vw + 0px);
    }
    .iphonetopcontainer{
        display: none;
    }
    .interactwidgets{
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
}

/* .fade-in {
    opacity: 0;
  } */

.interactivecards2>.colorselector>#favcolor1{
    margin-top: 0px!important;
}
.interactivecards2>.colorselector{
    display: flex;
    align-items: center;
    justify-content: center;
}
nav{
    transition: ease 0.6s;
}
@media screen and (min-width:1500px) {
    .servicecard:hover:before {
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
    }
    .iphonetopcontainer {
        height: 519px;
        position: relative;
    }
}

footer{
    background-color: hsl(210deg 11.11% 92.94%);
    margin-top: 0px!important;

}
.footer{
    display: block;
    /*grid-template-columns: 1fr 1.5fr;*/
    /*gap: 20px;*/
    padding: 30px 0 25px;

}
.footermap iframe{
    width: 100%;
    height: 320px;
    border-radius: 16px;
    overflow: hidden;
    border:5px solid hsl(228,99%,98%)!important;
    border: var(--border);

    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.footerlinks{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.footerimg{
    height: 40px;
    width: 258px;
}
.footerboxes{
    display: flex;
    flex-direction: column;
    gap: 20px;
    translate: 0 -4px;
}
.footerboxes1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    align-items:center;
}
@media screen and (max-width:1265px){
    .footerboxes1{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width:623px){
    .footerboxes1{
        grid-template-columns:repeat(1, minmax(0, 1fr));
    }
}

.footerboxes2{
    display: grid;
    grid-template-columns: 1fr;
}
.footerbox{
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
           background-color: white;
    width: 100%;
    padding: 10px;
    display: flex;
    gap: 10px;
    overflow: hidden;
    border-radius: 8px;
    flex-direction: row;
    border: var(--border);
    cursor: pointer;
    align-items:center;

}
.footerboxcontainer{
    display: flex;
    gap: 15px;
    width: 100%;
}

.footerboxicon{
    --color: linear-gradient(180deg, rgba(86, 171, 220, 1) 0%, rgba(175, 225, 220, 1) 100%);
    background-color:white;
    padding: 4px 7.5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    aspect-ratio: 1;
    position:relative;
    overflow: hidden;
}


.footerboxicon:before {
    content: "";
    position: absolute;
    z-index: 5;
    background: var(--color);
    height: 80px;
    width: 80px;
    border-radius: 50%;
}

.footerboxicon:hover {
    color: #fff;
}

.footerboxicon:before {
    top: 100%;
    left: -100%;
    transition: all .7s;
}

.footerbox:hover> .footerboxicon:before {
    top: -10px;
    left: -15px;
}
.footerbox:hover> .footerboxicon>svg {
    fill: white!important;
}

.footerboxicon:active:before {
    background: linear-gradient(180deg, rgba(86, 171, 220, 1) 0%, rgba(175, 225, 220, 1) 100%);
    transition: all 0.7s;
    top: 0px;
    left: 0px;
}


.footerboxicon>svg{
    font-size: 24px;
    line-height: unset!important;
    aspect-ratio: 1;
    fill: var(--primary);
    translate: 0 1px;
    z-index: 10;
    transition: 0.6s ease;
}
.footerboxtext{
    font-size: 16px;
}
.footerbtn{
    background-color: hsl(200 100% 96% / 1);
    padding: 8px 0px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color:(--head) ;
    font-weight: 600;
}
.footerlinks>p{
    width: 80%;
}

@media screen and (max-width:1300px) and (min-width:1100px){
    .footer{
        grid-template-columns: 1fr 1.5fr;
    }
}

@media screen and (max-width:1100px) and (min-width:889px){
    .footer{
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width:889px) and (min-width:0px){
    .footer{
        grid-template-columns: 1fr;
    }
    .footerboxes{
        translate:0px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .footerboxcontainer{
        gap: 5px;
    }
    .footerlinks>p{
        margin-top: 20px;
        width: 100%;
    }
}
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: white;
}

::-webkit-scrollbar
{
	width: 6px;
	background-color: white;
}

::-webkit-scrollbar-thumb
{
	background-color: var(--head);
}


:root {
    --width: 32px;
  }
  
.hamburger-menu-button {
    position: relative;
    width: var(--width);
    height: var(--width);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  .hamburger-menu,
  .hamburger-menu::after {
    height: calc(0.125 * var(--width));
    border-radius: calc(0.15 * var(--width));
    background-color: var(--head);
    transition: all 0.25s ease-in-out;
  }
  
  .hamburger-menu {
    width: calc(0.75 * var(--width));
    transform: translateY(calc(-0.125 * var(--width)));
  }
  
  .hamburger-menu::after {
    position: absolute;
    width: calc(0.495 * var(--width));
    transform: translateY(calc(0.25 * var(--width))) translateX(calc(var(--width)/4));
    content: '';
  }
  
  .open {
    transform: translateY(0px) rotate(45deg);
  }
  
  .open::after {
    width: calc(0.75 * var(--width));
    transform: translateY(0px) rotate(-90deg);
  }
  
  .visible {
    display: block;
}

.loader {
    /* Existing loader styles */

    /* Initial styles for hidden loader */
    display: none;
}


@media screen and (min-width:1310px) {
    .servicecardcontainer{
        grid-template-columns: repeat(5,1fr);
    }
    .serviceimgbottom{
        display: none;
    }
}
@media screen and (max-width:1310px) {
    .servicecardcontainer{
        grid-template-columns: repeat(3,1fr);
    }

}
@media screen and (max-width:670px) {
    .servicecardcontainer{
        grid-template-columns: repeat(2,1fr);
    }
    #intro-screen{
        flex-direction: column;
    }
}

.footercta{
    padding: 50px 0;
        position: relative;
    overflow: hidden;
    margin-top: 60px!important;
    /* border: 1px solid #dedede; */
}
.footerglobe{
    z-index: 2;
    position: absolute;
    right: 140px;
    bottom: -20px;
    transform: scale(1);
}
.footercta>.container>*{
    width: 60%;
}
.footercta p{
    width: 100%;
    margin-bottom: 30px;
    text-align: justify;
    text-align-last: left;
    margin-top: 15px;
}

.footercta p{
    width: 52%!important;
}

@media screen and (max-width:1288px) {
    .footerglobe{
        right: 50px;
    }
}
@media screen and (max-width:1180px) {
    .footerglobe{
        transform: scaleY(0.9);
        z-index: -1;
        bottom: -40px;
    }   
    .footercta>.container>*{
        width: unset;
    }
}

.hideinpc{
    display: none;
}
@media screen and (max-width:800px) {
    .footercta{
        margin-top: 0px!important;
    }
    .hideinmob{
        display: none;
    }
    .hideinpc{
        display: block;
    }
    .footerglobe{
        right: 0px;
        bottom: -50px;
    }
}
@media screen and (max-width:580px) {
    .footercta p{
        width: 90%!important;
    }
    .footerglobe{
        opacity: 0.7;
        right:-109px;
    }
    .footercta{
        border-top: 1px solid #dedede;
        margin-top: 60px!important;
    }
}
@media screen and (max-width:460px) {
    .footerglobe{
        opacity: 0.7;
        right:-109px;
        transform: scale(0.7);
        bottom: -20%;
    }
}
@media screen and (min-width:560px) {
    .interactivehighangle>img{
        width: 250px;
    }
}
@media screen and (max-width:1309px) and (min-width:1093px){
    .servicecard:hover:before{
        width: 200%;
        height: 200%;
        left: -50%;
    }
}
/*@media screen and (min-width:890px) {*/
/*    .footerlinks{*/
/*        min-height: 320px;*/
/*    }*/
/*}*/

footer{
    margin-top: 60px!important;
}
.interactp{
    color: var(--body);
}

.optiongrid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    margin-top: 50px;
}
.optioncolumn{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.optionheader{
    text-align: center;
    font-weight: 600;
    color:var(--head);
    font-size: 22px;
    font-family: 'Geist';
    margin-top: 20px;
}
.optionbody{
    text-align: justify;
    text-align-last: center;
    color: #334155;
    width: 70%;
    line-height: 28px;
}
.optionimg{
    align-self: center;
    width: 70%;
}
.navbtn{
    opacity: 0;
    transition: 0.4s ease-out;
}
.repisa-t__right2{
    width: 11vw;
    height: 1.75vw;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.5vw) translateX(-11vw) translateY(-1.25vw);
}
.repisa-t__top2{
    width: 1.5vw;
    height: 11vw;
    transform-origin: top left;
    transform: translateZ(1.25vw);
}
.repisa-t__front2{
    width: 1.5vw;
    height: 1.75vw;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ(9.2vw) translateY(0.5vw);
}
.repisa-t__right3{
    width: 10vw;
    /* background: repeating-linear-gradient(180deg, black, black -45px, grey 9px, grey 20px); */
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.5vw) translateX(-10.5vw) translateY(0.25vw);
    height: 0.3vw;
    border-radius: 2px 2px 0 0;
    border: 0.5px solid #2e303b;
    border-bottom: 0;
}
.cajas{
    display: none;
}

.repisa-t__right4{
    height: 1vw;
    aspect-ratio: 2;
    width: unset;
    font-size: 0.8vw;
    line-height: 0.8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ(1.5vw) translateX(-6vw) translateY(-1vw);
    border-radius: 2px;
    border:0px;
    color: white;
    font-weight: 600;
    letter-spacing: 0.1vw;
    font-family: "Orbitron", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    transition: 0.4s ease-in;
}
.acflap{
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    background: #2e303b;
    transition: 0.3s ease-in;
    /* translate: 0 1vw; */
}
.acflap.smoothTransition {
    transform: translateY(-1vw);
}
.hideint{
    opacity: 0;
}
.tempbtn{
    cursor:pointer;display: flex;align-items: center;justify-content: center;padding: 0px;font-size: 22px;line-height: 20px;border-radius: 4px;border:1px solid rgba(210, 214, 230, 0.72);
    background:#EBEDEF;
    transition: background 0.8s ease!important; /* Added transition property here */
}
.tempbtn:hover{
    background: linear-gradient(360deg, rgba(86, 171, 220, 1) 0%, rgba(175, 225, 220, 1) 100%);
}
.tempbtn:active{
    background: linear-gradient(360deg, rgba(86, 171, 220, 1) 0%, rgba(175, 225, 220, 1) 100%);
}
.tempbtn.active{
    background: linear-gradient(360deg, rgba(86, 171, 220, 1) 0%, rgba(175, 225, 220, 1) 100%);
}
.interactivecards1img>#blinds{
    width: 500px;
}
@media screen and (max-width:470px){
    .interactivecards1img>#blinds{
        width: 300px;
    }
}

.oimage{
    position: absolute;
}
.o1{
    top: 15%;
    left: 10%;
}
.o2{
    top: 0%;
    left: 30%;
}
.o3{
    top: 20%;
    right: 30%;
}
.o4{
    top: 0%;
    right: 10%;
}
.o5{
    bottom:20%;
    left: 35%;
}
.o6{
    bottom:10%;
    left: 5%;
}
.o7{
    bottom:15%;
    right: 5%;
}
@media screen and (max-width:1088px) {
    .optionbody{
        width: 90%;
    }
}
@media screen and (max-width:934px) {
    .optionbody{
        width: 95%;
    }
}

@media screen and (max-width:700px) {
    .optiongrid{
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 30px;
    }
    .optionheader{
        width: 100%;
        margin-top: 10px;
    }
    .o2{
        left: 10%;
        top: -2%;
    }
    .o4{
        right: -2%;
        top: 10%;
    }
    .o1 {
        top: 22%;
        left: 4%;
    }
    .o5 {
        top: 41%;
        left: 69%;
    }
    .o7 {
        top: 67%;
        left: 6%;
    }
    .o6 {
        bottom: 10%;
        right: 5%;
        left: unset;
    }
}

@media screen and (max-width: 700px) and (min-width:500px){
    .optionbody {
        width: 75%;
    }
}

@media screen and (min-width:700px) and (max-width:1000px) {
    .optiongrid{
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .lastoptioncolumn{
        transform: translateX(50%);
        align-items: center;
    }
    .optionbody{
        width: 70%;
    }
    .o5 {
        bottom: 33%;
        left: 24%;
    }
    .o4 {
        top: 18%;
        right: 3%;
    }
    .o7 {
        bottom: 23%;
        right: 16%;
    }
}