.background-video { width:100%; height:100%; position:absolute; pointer-events:none; max-width:100%; overflow:hidden; background-size:cover; background-position:center top; top:0; left:0; background-color:#000; z-index:0; } .background-video:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; } .background-video video { object-fit:cover; width:100%; height:100%; max-width:100%; } .modal-content { max-height:95vh; display:flex; flex-direction:column; } .modal-body { overflow-y:auto; flex:1 1 auto; background:#fff; } .modal-header, .modal-footer { background:#fff; } #logo-bottom, #logo-top { z-index:9999; right:2rem; } #svgovl, #toggleMenuBtn { position:absolute; z-index:9; } .homeSVGImg { z-index:1; object-fit:contain; } #doc-panel-wrapper, #home, #vinfo-header, #aplicativo { position:relative; display:block; } #logout-link, #vivinfo { position:fixed; font-weight:600; } #doc-panel-header, #logout-link { background:var(--caliza); padding:.5rem 1rem; } #please-rotate-device { position:fixed; z-index:999999999; left:0; top:0; width:100%; height:100%; background:#fff; display:none; align-items:center; justify-content:center; } #logo-menu { position:fixed; left:50%; top:1.5rem; z-index:99; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); } #docs.submitting::after, #menu { z-index:999; left:0; height:100%; } #menu { position:fixed; top:0; background-color:var(--caliza); flex-direction:column; padding:0; justify-content:center; transform:translateX(-255px); -webkit-transform:translateX(-255px); -moz-transform:translateX(-255px); -o-transform:translateX(-255px); transition:transform 150ms; } #materiales ul li.active, #menu.open { transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); } #toggleMenuBtn { top:1rem; right:1rem; } #menu .navbar-nav { position:relative; display:flex; flex-direction:column; width:100%; align-items:flex-end; } #menu .navbar-nav li { margin:1.5rem 0; width:100%; } #menu .navbar-nav li a { display:flex; align-items:center; flex-direction:row; justify-content:flex-end; text-align:end; color:var(--nogal); font-weight:500; font-size:1.35rem; padding:1rem 2rem; } #menu .navbar-nav li a span { margin-right:1rem; text-align:end; line-height:1; } #menu .navbar-nav li.active { background:rgb(168 184 160 / .25); } #logo-top { position:fixed; top:1.5rem; } #logo-bottom { position:fixed; bottom:1.5rem; } #home, #aplicativo { width:100%; height:100vh; } #home #home-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; } #playvideoBtn, #gotoDispBtn { position: absolute; z-index: 1; width: 350px; color: var(--nogal); font-weight: 800; border: solid 2px var(--nogal); border-radius: 1rem; display: flex; align-items: center; justify-content: center; padding: 1rem; font-size: 1.5rem; } #playvideoBtn img, #gotoDispBtn img { position: relative; display: block; width: 50px; margin-right: 1rem; } #playvideoBtn { top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(245, 240, 232, 0.5); } #gotoDispBtn { top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(168, 184, 160, 0.5); } #lightbx { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.85); display: flex; z-index: 99; align-items: center; justify-content: center; } #lightbx video { position:relative; width:85%; } #lightbx #closeLgbx { position: absolute; z-index: 1; right: 3rem; top: 3rem; font-size: 1.5rem; color: var(--nogal); width: 50px; height: 50px; border: solid 1px var(--nogal); background: var(--caliza); display: flex; align-items: center; justify-content: center; border-radius: .75rem; font-weight: 800; } .homeSVGImg, .homesvgovl { position:absolute; left:0; top:0; width:100%; height:100%; } .homesvgovl{ z-index:2; } /*.homesvgovl { animation:2s ease-in-out infinite blink; }*/ @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.2; } } #slideshow { position:absolute; left:0; top:50%; width:100%; height:100%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); display:flex; align-items:center; justify-content:center; } #appsldshw { width:100%; height:auto; } #svgovl { left:0; top:0; width:100%; height:100%; } .slideControl { position:fixed; z-index:10; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); width:75px; height:75px; opacity:1; } #vivinfo { z-index:99; width:270px; height:auto; padding:0; background:rgb(0 0 0 / .3); border-radius:.5rem; top:5rem; right:5rem; border:solid 1px var(--caliza); color:#fff; font-size:.85rem; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); -moz-backdrop-filter:blur(5px); } #vivinfo #closevivinfo { position:relative; color:#494949; background:var(--light); border-radius:5px; font-size:1.5rem; line-height:35px; width:35px; height:35px; display:inline-block; text-align:center; } #vinfo-header { background:var(--caliza); padding:1rem; border-top-left-radius:.5rem; border-top-right-radius:.5rem; } #vinfo-header-title { color:var(--nogal); font-size:1.15rem; } #vivinfo #vivinfo-header-label { position:relative; width:25px; height:25px; border-radius:0; background-color:#fff0; border:1px solid #fff; } #vivinfo #vivinfo-header-label.danger { background-color:#f03434; } #vivinfo #vivinfo-header-label.warning { background-color:#f89406; } #vivinfo #vivinfo-header-label.success { background-color:#75a93a; } #vinfo-body, #vinfo-footer { padding:1rem; } #vinfo-footer { border-top:solid 1px var(--caliza); } #vivinfo a.btn, #vivinfo button { background-color:var(--caliza); border:none; border-radius:0; width:200px; padding:.75rem 1.5rem; color:#fff; font-size:.85rem; } #showBP, #showViews { position:fixed; left:0; top:0; z-index:99999; background:rgb(0 0 0 / .85); width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:5rem; flex-direction:row; } #showBP .closebp, #showViews .closebp { position:absolute; right:2rem; top:1rem; font-size:3rem; z-index:99999; color:#fff; } #showViews .closebp { color:#000; } #showBP img { width:50%; position:relative; flex:1 1 auto; max-width:75%; } #gallery-container { background-color:#000; } #gallery-container .carousel-inner .carousel-item img { position:relative; width:100vw; height:100vh; object-fit:contain; } #gallery-container .carousel-control-prev, .carousel-control-next { width:75px; } .carousel-control-prev { left:100px; opacity:1; } .carousel-control-next { right:20px; opacity:1; } .carousel-indicators { bottom:3rem; } .carousel-indicators .active { background-color:var(--nogal); } .carousel-item-title { position:absolute; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); bottom:7rem; color:#fff; z-index:9; } #docs { display:flex; align-items:center; justify-content:center; background:url(../img/bgs/fondo_info.jpg) center center/cover no-repeat; min-height:100vh; } #logo-firma { position:absolute; z-index:3; width:200px; left:100px; bottom:2rem; } #docs.submitting::after { content:'Un momento...'; position:absolute; top:0; width:100%; display:flex; align-items:center; justify-content:center; background:rgb(0 0 0 / .75); color:#fff; font-size:1.75rem; } #doc-panel-wrapper { width:100%; max-width:600px; margin:0 auto; border:solid 1px var(--caliza); background:rgb(54 54 90 / .25); border-radius:.5rem; } #doc-panel-header { color:var(--nogal); border-top-left-radius:.5rem; border-top-right-radius:.5rem; } #doc-panel-body { padding:2rem; color:#fff; } #dpw-form .dpw-custom-item { background:var(--caliza); border-radius:1rem; padding:1.5rem 2rem; display:flex; align-items:center; flex-direction:row; cursor:pointer; } #dpw-form .dpw-custom-item.disabled { cursor:not-allowed!important; } #dpw-form .dpw-custom-item img { width:80px; } #dpw-form .dpw-custom-item.active, #dpw-form input[type=checkbox]:checked { background:rgb(175 148 35 / .4)!important; } #dpw-form input[type=checkbox] { width:20px; height:20px; background:#5a5a5a; border:none; outline:0; display:inline-block; appearance:none; position:relative; cursor:pointer; } #dpw-form input[type=checkbox]:checked::after { content:"✔"; color:#fff; font-size:18px; position:absolute; left:2px; top:-2px; } #dpw-form button[type=button] { border:none; background:var(--caliza); color:#fff; padding:1rem 2rem; width:200px; border-radius:0; font-size:1.25rem; } #dpw-form button[type=button].disabled { color:var(--bs-secondary)!important; cursor:not-allowed!important; } #configurador-img { position:relative; width:calc(100% - 400px); height:100vh; height:100dvh; display:flex; align-items:center; justify-content:center; overflow:hidden; } #config-img { position:relative; display:block; width:auto; height:auto; max-width:100%; max-height:100%; margin:0 auto; } #configurador-img + #sidebar { position:relative; z-index:0; width:400px; height:100vh; height:100dvh; background-color:var(--caliza); display:flex; flex-direction:column; min-height:0; } #sdbr-header { background-color:var(--nogal); padding:4rem 3rem; flex:0 0 auto; } #sdbr-rooms { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; } #sdbr-rooms .accordion-item { background:transparent!important; } #sdbr-rooms .accordion-item .accordion-button { background-color:#c8b799!important; color:#fff; display:flex; flex-direction:row; align-items:center; justify-content:space-between; border:none!important; outline:none!important; box-shadow:none!important; padding:.5rem 1rem; } #sdbr-rooms .accordion-item .accordion-button:not(.collapsed) { background-color:var(--oliva)!important; } #sdbr-rooms .accordion-button::after { display:none; } #sdbr-rooms .accordion-button span { font-size:1.65rem; } #sdbr-rooms .accordion-body ul.room-materials { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; align-items:end; } #sdbr-rooms .accordion-body ul.room-materials li.room-material { width:85%; background:var(--nogal); padding:.25rem; padding-right:2rem; margin-bottom:1rem; transform:translateX(calc(100% - 65px)); transition:transform ease-out 150ms; } #sdbr-rooms .accordion-body ul.room-materials li.room-material.active { transform:translateX(0); } #tour #tour-selects { position:fixed; z-index:1; right:0; top:30%; transform:translateY(-50%); display:flex; flex-direction:column; } #tour #tour-selects a.tour-select-item { position:relative; display:flex; background:#c8b799; color:#fff; font-size:1.25rem; padding:.75rem 1.5rem; margin-bottom:1rem; font-weight:600; transform:translateX(82%); transition:transform ease-in-out 150ms; } #tour #tour-selects a.tour-select-item span:first-child { padding-right:1rem; border-right:solid 1px #fff; } #tour #tour-selects a.tour-select-item span:last-child { padding-left:1rem; } #tour #tour-selects a.tour-select-item.active { background:var(--oliva); transform:translateX(0); } #planos { padding-top:10rem; background:var(--nogal); min-height:100vh; padding-bottom:4rem; } #filters-body { overflow-y:none; } .plano-card { position:relative; color:#212529; overflow:hidden; content-visibility:auto; contain-intrinsic-size:260px; } .plano-clickable { cursor:pointer; } .plano-sku { color:#1a2a5e; } .plano-thumb { width:100%; object-fit:contain; } .plano-detail { max-height:85vh; } .compare-btn { position:absolute; top:.5rem; right:.75rem; z-index:2; display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; color:#212529; } .compare-btn.active { color:#1a2a5e; font-weight:600; } .heart-btn { position:absolute; bottom:.75rem; right:.75rem; z-index:2; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#adb5bd; color:#fff; font-size:1.2rem; line-height:1; } .heart-btn.active { background:#1a2a5e; color:#fff; } #filters-panel { position: fixed; top: 0; right: 0; z-index: 99; width: 300px; padding: 1rem 2rem 1rem 1rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; background: var(--nogal); transform: translateX(210px); transition: transform ease-out 150ms; } #filters-panel.open { transform:translateX(0); } #filters-header { padding-left:1rem; } #btn-compare { border:none; border-radius:0; color:var(bs-dark); } #filters-body { padding-left:2rem; } .planos-filter-label-icon { width:30px; } #filters-panel select { border-radius:0; } #filters-panel button[type="submit"], #filters-panel a#reset-filters { border-radius:0; color:#fff; border:none; outline:none; box-shadow:none; padding:.75rem 1.5rem; margin-left:52px; width:calc(100% - 52px); } #filters-panel button[type="submit"] { background:var(--nogal); border: solid 1px #ffffff; } #filters-panel a#reset-filters { background:var(--oliva); } #filters-footer { margin-bottom:6rem; padding-left:1rem; } #filters-btn-toggle img { width:50px; transform:rotate(180deg); transform-origin:center; transition:transform ease-out 150ms; } #filters-btn-toggle.open img { transform:rotate(0); } .favs-panel { border:1px solid rgb(255 255 255 / .15); border-radius:.5rem; overflow:hidden; } .favs-header { background:var(--caliza); } .favs-body { max-height:70vh; overflow-y:auto; } .fav-item { color:#212529; } .fav-thumb { width:150px; height:150px; object-fit:contain; } .fav-remove { font-size:1.5rem; line-height:1; color:#adb5bd; cursor:pointer; } .fav-remove:hover { color:#dc3545; } #aplicativo { background: #ffffff; } #aplicativo #floors-menu { position: fixed; z-index: 9; width: 300px; right: 15rem; bottom: 10rem; } #aplicativo #floors-menu ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } #aplicativo #floors-menu li { position:relative; } #aplicativo #floors-menu li::after{ content:""; position:absolute; top:0; bottom:0; /* alto completo del li */ width:6px; right:calc(2rem + 20px - 3px); /* centrada en el eje del círculo */ background:var(--nogal); z-index:1; /* sobre el fondo verde */ } #aplicativo #floors-menu li:first-child::after{ top:50%; } /* nace en el 1er círculo */ #aplicativo #floors-menu li:last-child::after{ bottom:50%; } /* muere en el último */ #aplicativo #floors-menu a{ display:flex; align-items:center; justify-content:flex-end; gap:1.5rem; height:90px; padding:0 2rem; text-decoration:none; color:var(--nogal); font-size:1.6rem; letter-spacing:.2px; position:relative; /* sin z-index: no crea stacking context */ transition:color .15s ease, background .15s ease; cursor:pointer; } #aplicativo #floors-menu a .label{ text-align:right; } /* círculo */ #aplicativo #floors-menu a .dot{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--nogal); position:relative; z-index:2; outline: solid 4px var(--caliza); } /* ---------- ESTADO ACTIVO ---------- */ #aplicativo #floors-menu li.active{ background:var(--oliva); } #aplicativo #floors-menu li.active a{ color:var(--caliza); } /* texto claro */ #aplicativo #floors-menu li.active .dot{ /* círculo hueco */ background:var(--caliza); border:3px solid var(--nogal); outline: none; } #imgBase2, #svgS2 { width: 80%; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); } #aplicativo #iso-container { position: relative; display: block; height: 100vh; width: 90%; z-index: 1; } #back-btn { position: absolute; z-index: 99; right: 2rem; top: 2rem; display: block; width: 70px; transform: rotate(180deg); } #vdata-container { display: flex; position: relative; flex-direction: column; justify-content: space-between; height: 85%; } #bp-container, #vinfo-container { position: relative; width: 100%; max-width: 85%; border: solid var(--nogal) 2px; border-radius: 1rem; padding: 1rem; } #bp-container { cursor: pointer; } #bp-container #bpimg { position: relative; display: block; width: 100%; height: auto; } #vinfo-container { background: var(--caliza); color: var(--nogal); } #bpImgBig { position: relative; display: block; width: 75%; left: 50%; top: 50%; transform: translate(-50%, -50%); } @media (max-width:1199.98px) { #planos { padding-top:8rem; padding-left:5rem; padding-right:6rem; } } @media only screen and (max-width:1024px) { #menu .navbar-nav li a img { width:30px; } #docs .container { transform:scale(85%); } #docs .fsi-item-content>.col-12>div>img, #logo-menu img { width:135px; } #menu .navbar-nav li { margin:1rem 0; } #vivinfo { transform:scale(.85); top:1rem; right:1rem; } section#docs { margin-left:4.5rem; } #docs .fsi-item-content>.col-12 { align-items:center!important; } #logo-bottom, #logo-top { width:90px; right:1rem; } #configurador-img { width:calc(100% - 200px); } #configurador-img + #sidebar { width:200px; } #sdbr-header { padding:2rem 1.5rem; } #sdbr-header h3 { font-size:1.25rem; } #sdbr-rooms .accordion { height:auto; } #sdbr-rooms .accordion-button span { font-size:1rem; text-align:end; } #sdbr-rooms .accordion-body ul.room-materials li.room-material { padding-right:.25rem; } #sdbr-rooms .accordion-body ul.room-materials li.room-material a img { margin-right:1rem!important; } #sdbr-rooms .accordion-body ul.room-materials li.room-material a span { font-size:.85rem; } #vinfo-container h2 { font-size: 1.25rem; } #vinfo-body { font-size: 1rem !important; } #aplicativo #floors-menu { transform: scale(80%); top: 50%; right: 3rem; } #playvideoBtn, #gotoDispBtn { width: 250px; font-size: 1rem; padding: 1rem; } #playvideoBtn img, #gotoDispBtn img { width: 40px; } #lightbx #closeLgbx { width: 40px; height: 40px; } } @media (max-width:991.98px) { #planos { padding-top:6rem; } #planos-body *, #filters-panel * { font-size:95%; } #filters-panel { width:260px; transform:translateX(180px); padding-left: 0; } #filters-panel.open { transform:translateX(0); } .heart-btn { width:30px; height:30px; } #logo-firma { width:100px; left:50px; bottom:1rem; } #imgBase2, #svgS2 { width: 70%; height: 70%; } #aplicativo #floors-menu { width: 200px; top: 40%; right: 1rem; } #aplicativo #floors-menu a{ height:52px; font-size:1.1rem; gap:1rem; } #aplicativo #floors-menu a .label { font-size: .7rem; } #aplicativo #floors-menu li .dot { width: 20px; height: 20px; outline-width: 2px; } #aplicativo #floors-menu li.active .dot { border-width: 2px; } #aplicativo #floors-menu li::after { width: 3px; right: calc(2rem + 10px - 2px) } #vdata-container { transform: scale(80%); } #bp-container { margin-bottom: 1rem !important; } #vinfo-container h2 { font-size: .7rem; } #vinfo-body { font-size: .75rem !important; padding: 0; } #back-btn { width: 30px; top: 0; right: 0; } #playvideoBtn, #gotoDispBtn { width: 200px; font-size: .75rem; padding: .5rem; } #gotoDispBtn { bottom: 5rem; max-height: 50px; } #playvideoBtn img, #gotoDispBtn img { width: 20px; } #lightbx #closeLgbx { width: 20px; height: 20px; font-size: .85rem; border-radius: .25rem; right: 1rem; top: 1rem; } } @media only screen and (max-width:915px) and (max-height:412px) and (orientation:landscape) { #logo-bottom, #logo-menu img, #logo-top { width:85px; } #menu { padding-top:5rem; transform:translateX(-155px); } #menu .navbar-nav li { margin:.25rem 0; } #menu .navbar-nav li img { width:20px; } #menu .navbar-nav li span { font-size:.75rem; } #toggleMenuBtn { right:1.5rem; } #toggleMenuBtn img { width:30px; } #docs .dpw-custom-item h5 { font-size:1rem; } } @media only screen and (max-width:768px) and (orientation:portrait) { #please-rotate-device { display:flex; } #vivinfo { transform:scale(.85); top:5rem; right:1rem; } } @media only screen and (max-width:667px) { #tour #tour-selects { transform:scale(50%) translateX(145px); } #docs .container { max-width:100%; transform:scale(75%); } .favs-body { max-height:100vh; } } @media only screen and (max-height:430px) and (orientation:landscape) { #logo-menu { top:1rem; } #logo-menu img { width:85px; } #menu { transform:translateX(-125px); padding-left:0; } #menu .navbar-nav li { margin:.5rem 0; } #menu .navbar-nav li a { padding:.5rem 1rem; } #menu .navbar-nav li a img { width:10px; } #menu .navbar-nav li a span { font-size:.65rem; } #toggleMenuBtn { right:.65rem; } #toggleMenuBtn img { width:30px; } .slideControl img { width:25px; } .carousel-control-prev { left:3rem; } .carousel-control-next { right:0; } .carousel-control-next img, .carousel-control-prev img { width:35px; } .carousel-indicators { bottom:-1rem; } .carousel-indicators [data-bs-target] { width:15px; height:2px; } #vivinfo { transform:scale(.5); top:-1rem; right:-3rem; } #logo-bottom, #logo-top { width:45px; right:1rem; bottom:1rem; } } @media (max-width:575.98px) { #planos { padding-top:4.5rem; } #filters-panel { width:85vw; transform:translateX(calc(85vw - 80px)); } #filters-panel.open { transform:translateX(0); } .plano-detail { max-height:70vh; } } @media only screen and (max-width:500px) { #logo-menu img { width:85px; } #menu { transform:translateX(-160px); } #menu .navbar-nav li { margin:.5rem 0; } #menu .navbar-nav li a { padding:.5rem 1rem; } #menu .navbar-nav li a img { width:20px; } #menu .navbar-nav li a span { font-size:.85rem; } #toggleMenuBtn { right:.65rem; } #toggleMenuBtn img { width:30px; } .slideControl img { width:25px; } .carousel-control-next { right:0; } .carousel-indicators { bottom:-1rem; } .carousel-indicators [data-bs-target] { width:15px; height:2px; } #vivinfo { transform:scale(.5); top:0; right:-3rem; } #doc-panel-wrapper { transform:scale(.75); } #logo-bottom, #logo-top { width:45px; } #planos { padding-top:4.5rem; } #filters-panel { padding:1rem; } #filters-body { padding-top:.5rem; } } @media only screen and (orientation:landscape) and (max-height:480px) { #configurador-img { width:calc(100% - 150px); } #configurador-img + #sidebar { width:150px; } #sdbr-header { padding:1rem .75rem; } #sdbr-header h3 { font-size:.95rem; } #sdbr-rooms .accordion-item .accordion-button { padding:.4rem .6rem; } #sdbr-rooms .accordion-item .accordion-button img { width:26px; } #sdbr-rooms .accordion-button span { font-size:.75rem; } #sdbr-rooms .accordion-body ul.room-materials li.room-material { width:90%; padding-right:.5rem; margin-bottom:.5rem; transform:translateX(calc(100% - 45px)); } #sdbr-rooms .accordion-body ul.room-materials li.room-material.active { transform:translateX(0); } #sdbr-rooms .accordion-body ul.room-materials li.room-material a img { width:32px; margin-right:.75rem!important; } #sdbr-rooms .accordion-body ul.room-materials li.room-material a span { font-size:.7rem; } }