:root {
--color-principal: #1bd459;
--color-secundario: #00aaff;
--color-video: #ff003c;
--color-panel: rgba(0,0,0,0.68);
--color-texto: #ffffff;
--sombra-fuerte: 0 0 20px rgba(0,0,0,0.75);
--tienda-primario: #1bd459;
--tienda-secundario: #0f172a;
--tienda-fondo: rgba(15, 23, 42, 0.94);
--tienda-card: rgba(255,255,255,0.08);
--tienda-borde: rgba(255,255,255,0.14);
--lote-size: 19px;
--lote-font-size: 13px;
--lote-size-mobile: 18px;
--lote-font-size-mobile: 12px;
--lote-border: 0px;
--lote-shadow: 0 0 8px rgba(0,0,0,0.85), 0 0 10px var(--color-principal);
--lupa-size: 34px;
--foto-size: 42px;
--video-size: 44px;
--modelo3d-size: 46px;
--logo-size: 220px;
--logo-size-mobile: 150px;
--mapa-size: 80px;
--mapa-icon-size: 38px;
--mapa-bottom: 90px;
--mapa-left: 20px;
--mapa-panel-width: 380px;
--mapa-panel-height: 280px;
}
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
font-family: 'Raleway', Arial, sans-serif;
touch-action: none;
}
#visor {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: 1;
overflow: hidden;
}
.pnlm-hotspot {
pointer-events: auto !important;
}
#marcaProyecto {
position: fixed;
top: 18px;
left: 18px;
z-index: 2000;
display: flex;
align-items: center;
gap: 12px;
max-width: 380px;
padding: 0;
border-radius: 0;
background: transparent;
backdrop-filter: none;
color: var(--color-texto);
box-shadow: none;
pointer-events: none;
}
#marcaProyecto * {
pointer-events: none;
}
#logoProyecto {
width: var(--logo-size);
height: auto;
object-fit: contain;
border-radius: 0;
display: none;
}
#marcaProyecto h1 {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.15;
text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}
#marcaProyecto p {
margin: 3px 0 0;
font-size: 11px;
opacity: 0.86;
text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}
.estructura-arq {
position: relative;
width: 0;
height: 0;
transform: scale(0.55);
transform-origin: top left;
pointer-events: none !important;
}
.estructura-arq .linea-vertical {
position: absolute;
width: 1.5px;
height: 95px;
background: rgba(255,255,255,0.94);
left: 0;
top: -90px;
}
.estructura-arq .linea-horizontal {
position: absolute;
width: 95px;
height: 1.5px;
background: rgba(255,255,255,0.94);
left: 0;
top: -90px;
}
.estructura-arq .linea-vertical,
.estructura-arq .linea-horizontal {
box-shadow: var(--sombra-fuerte), 0 4px 8px rgba(0,0,0,0.85);
}
.estructura-arq .texto-arq {
position: absolute;
top: -118px;
left: 12px;
color: white;
font-weight: 300;
font-size: 15px;
line-height: 1.35;
letter-spacing: 1px;
white-space: nowrap;
text-shadow: 0 0 8px rgba(0,0,0,0.95), 0 2px 5px rgba(0,0,0,0.8);
}
.estructura-arq .texto-arq strong {
font-size: 17px;
font-weight: 600;
}
.hotspotLupa {
background-image: url("../images/lupa.png");
width: var(--lupa-size);
height: var(--lupa-size);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
animation: pulsoLupa 1.6s infinite;
}
@keyframes pulsoLupa {
0%, 100% {
filter: drop-shadow(0 0 5px #fff);
}
50% {
filter: drop-shadow(0 0 22px var(--color-principal));
}
}
.hotspotFoto {
background-image: url("../images/icono-imagen.png");
width: var(--foto-size);
height: var(--foto-size);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
filter: drop-shadow(0 0 10px rgba(0,170,255,0.85));
}
.hotspotVideo {
background-image: url("../images/icono-video.png");
width: var(--video-size);
height: var(--video-size);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
filter: drop-shadow(0 0 12px rgba(255,0,60,0.85));
}
.hotspotTienda {
background-image: url("../images/carrito.png");
width: 42px;
height: 42px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
filter: drop-shadow(0 0 12px var(--tienda-primario));
animation: pulsoCarrito 1.7s infinite;
}
.hotspotLinkExterno {
width: 44px;
height: 44px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
filter: drop-shadow(0 0 12px #1bd459);
animation: pulsoLinkExterno 1.7s infinite;
}
@keyframes pulsoLinkExterno {
0%, 100% {
filter: drop-shadow(0 0 7px #fff);
}
50% {
filter: drop-shadow(0 0 20px #1bd459);
}
}
@keyframes pulsoCarrito {
0%, 100% {
filter: drop-shadow(0 0 7px #fff);
}
50% {
filter: drop-shadow(0 0 20px var(--tienda-primario));
}
}
.hotspotLote {
width: var(--lote-size);
height: var(--lote-size);
border-radius: 50%;
background: var(--color-principal);
border: var(--lote-border) solid #fff;
color: #fff;
font-family: Arial, sans-serif;
font-size: var(--lote-font-size);
font-weight: 800;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
box-sizing: border-box;
cursor: pointer;
box-shadow: var(--lote-shadow);
}
.hotspotLote.lote-activo {
animation: loteSeleccionado 1s infinite;
}
@keyframes loteSeleccionado {
0% {
box-shadow:
0 0 0 0 rgba(255,255,255,0.95),
0 0 12px rgba(27,212,89,0.9),
0 0 18px rgba(27,212,89,0.8);
filter: brightness(1);
}
50% {
box-shadow:
0 0 0 8px rgba(255,255,255,0.25),
0 0 24px rgba(27,212,89,1),
0 0 38px rgba(27,212,89,1);
filter: brightness(1.8);
}
100% {
box-shadow:
0 0 0 0 rgba(255,255,255,0),
0 0 12px rgba(27,212,89,0.9),
0 0 18px rgba(27,212,89,0.8);
filter: brightness(1);
}
}
#panelInfo {
position: fixed;
top: 50%;
left: -400px;
transform: translateY(-50%);
width: 320px;
max-width: 85vw;
background: var(--color-panel);
backdrop-filter: blur(7px);
color: #fff;
padding: 20px;
border-radius: 14px;
font-family: Arial, sans-serif;
box-shadow: 0 0 25px rgba(0,0,0,0.72);
transition: left .35s ease;
z-index: 3500;
}
#panelInfo.activo {
left: 20px;
}
#panelInfo h2 {
margin: 0 0 10px;
font-size: 21px;
}
#panelInfo p {
margin: 8px 0;
font-size: 14px;
line-height: 1.35;
}
#cerrarPanel {
position: absolute;
top: 8px;
right: 12px;
cursor: pointer;
font-size: 20px;
opacity: .85;
}
.hotspotFoto:empty,
.hotspotVideo:empty,
.hotspotLupa:empty,
.hotspotTienda:empty,
.hotspotLinkExterno:empty,
.hotspotModelo3D:empty {
border-radius: 50%;
}
#visorFoto,
#visorVideo {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.72);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 5000;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.25s ease;
}
#visorFoto.activo,
#visorVideo.activo {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#imagenFoto {
width: auto;
height: auto;
max-width: 92vw;
max-height: 82vh;
object-fit: contain;
border: 0;
border-radius: 14px;
box-shadow: 0 0 45px rgba(0,0,0,0.95);
background: #000;
}
#iframeVideo {
width: min(78vw, 960px);
height: min(74vh, 620px);
border: 0;
border-radius: 14px;
box-shadow: 0 0 45px rgba(0,0,0,0.95);
background: #000;
}
#visorModelo3D {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.72);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 6200;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.25s ease;
}
#visorModelo3D.activo {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#contenedorModelo3D {
position: relative;
width: 88vw;
height: 82vh;
max-width: 1100px;
background: #111;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 0 50px rgba(0,0,0,0.95);
}
#modelo3DViewer {
width: 100%;
height: 100%;
background: #111;
}
#btnCerrarModelo3D {
position: absolute;
top: 12px;
right: 14px;
z-index: 2;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: rgba(0,0,0,0.65);
color: #fff;
font-size: 24px;
cursor: pointer;
}
.hotspotModelo3D {
background-image: url("../images/icono-3d.png");
width: var(--modelo3d-size);
height: var(--modelo3d-size);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
filter: drop-shadow(0 0 12px rgba(0,170,255,0.9));
animation: pulsoModelo3D 1.7s infinite;
}
@keyframes pulsoModelo3D {
0%, 100% {
filter: drop-shadow(0 0 7px #fff);
}
50% {
filter: drop-shadow(0 0 22px #00aaff);
}
}
@media (max-width: 768px) {
.hotspotLote {
width: var(--lote-size-mobile);
height: var(--lote-size-mobile);
font-size: var(--lote-font-size-mobile);
border: var(--lote-border) solid #fff;
}
#panelInfo {
width: 230px;
max-width: 72vw;
padding: 12px;
border-radius: 10px;
left: -280px;
}
#panelInfo.activo {
left: 10px;
}
#panelInfo h2 {
font-size: 16px;
margin-bottom: 6px;
}
#panelInfo p {
font-size: 11px;
margin: 5px 0;
line-height: 1.25;
}
#cerrarPanel {
top: 5px;
right: 8px;
font-size: 16px;
}
#contenedorModelo3D {
width: 94vw;
height: 78vh;
border-radius: 14px;
}
#btnCerrarModelo3D {
top: 10px;
right: 10px;
}
}
#brujulaUI {
position: fixed;
top: 25px;
right: 25px;
width: 100px;
height: auto;
pointer-events: none;
filter: drop-shadow(0 0 15px rgba(0,0,0,0.95));
z-index: 2100;
display: none;
transform-origin: center center;
}
#menuWA {
position: fixed;
right: -60px;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
z-index: 3000;
transition: right .35s;
}
#menuWA.activo {
right: 0;
}
#btnWA {
width: 52px;
height: 52px;
background-image: url("../images/logowhats.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
display: block;
box-shadow: 0 0 18px rgba(37,211,102,0.86);
text-decoration: none;
color: transparent;
font-size: 0;
}
#flechaMenu {
position: absolute;
left: -25px;
top: 50%;
transform: translateY(-50%);
width: 25px;
height: 50px;
background: rgba(0,0,0,0.62);
border-radius: 8px 0 0 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
font-size: 16px;
}
#tiendaOverlay {
position: fixed;
inset: 0;
z-index: 6500;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.66);
backdrop-filter: blur(10px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: 0.25s ease;
}
#tiendaOverlay.activo {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#tiendaVentana {
width: min(1120px, 94vw);
height: min(760px, 88vh);
background: linear-gradient(145deg, var(--tienda-secundario), rgba(0,0,0,0.94));
color: #fff;
border: 1px solid var(--tienda-borde);
border-radius: 22px;
box-shadow: 0 0 55px rgba(0,0,0,0.95);
display: flex;
flex-direction: column;
overflow: hidden;
}
#tiendaHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 18px;
background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
border-bottom: 1px solid var(--tienda-borde);
}
#tiendaMarca {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
#logoTienda {
width: 58px;
height: 58px;
object-fit: contain;
border-radius: 12px;
background: rgba(255,255,255,0.08);
display: none;
}
#tiendaMarca h2 {
margin: 0;
font-size: 20px;
line-height: 1.15;
}
#tiendaMarca p {
margin: 4px 0 0;
font-size: 12px;
opacity: .75;
}
#tiendaAccionesTop {
display: flex;
align-items: center;
gap: 8px;
}
.btnTienda {
border: 0;
border-radius: 999px;
padding: 10px 14px;
cursor: pointer;
font-family: inherit;
font-weight: 700;
color: #fff;
background: rgba(255,255,255,0.10);
transition: 0.2s ease;
}
.btnTienda:hover {
transform: translateY(-1px);
background: rgba(255,255,255,0.18);
}
.btnTiendaPrimario {
background: var(--tienda-primario);
color: #07110b;
}
.btnTiendaPrimario:hover {
background: var(--tienda-primario);
filter: brightness(1.08);
}
.btnCerrarTienda {
width: 42px;
height: 42px;
border-radius: 50%;
border: 0;
cursor: pointer;
background: rgba(255,255,255,0.10);
color: #fff;
font-size: 22px;
}
#tiendaContenido {
display: grid;
grid-template-columns: 1fr;
min-height: 0;
flex: 1;
}
.tiendaVista {
min-height: 0;
overflow: auto;
padding: 18px;
}
.tiendaVista.oculto {
display: none;
}
#tiendaBuscador {
width: 100%;
max-width: 480px;
border: 1px solid var(--tienda-borde);
background: rgba(255,255,255,0.09);
color: #fff;
border-radius: 999px;
padding: 12px 16px;
outline: none;
font-family: inherit;
margin-bottom: 16px;
}
#tiendaBuscador::placeholder {
color: rgba(255,255,255,0.62);
}
#productosLista {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 14px;
}
.productoCard {
background: var(--tienda-card);
border: 1px solid var(--tienda-borde);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: 0.2s ease;
}
.productoCard:hover {
transform: translateY(-3px);
border-color: var(--tienda-primario);
box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}
.productoCardImg {
width: 100%;
height: 150px;
background: rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.productoCardImg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.productoCardInfo {
padding: 13px;
}
.productoCardInfo h3 {
margin: 0 0 6px;
font-size: 15px;
}
.productoCardInfo p {
margin: 0;
font-size: 12px;
opacity: .74;
}
.productoPrecioFila {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.productoPrecio {
font-weight: 800;
color: var(--tienda-primario);
}
.badgeEstado {
font-size: 11px;
padding: 5px 8px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
}
.badgeAgotado {
background: rgba(229, 57, 53, 0.22);
color: #ffb4b4;
}
#productoDetalleGrid {
display: grid;
grid-template-columns: minmax(260px, 470px) 1fr;
gap: 20px;
align-items: start;
}
#productoGaleria {
background: rgba(255,255,255,0.07);
border: 1px solid var(--tienda-borde);
border-radius: 18px;
overflow: hidden;
}
#productoImagenPrincipal {
width: 100%;
height: 360px;
object-fit: contain;
background: rgba(0,0,0,0.28);
}
#productoMiniaturas {
display: flex;
gap: 8px;
padding: 10px;
overflow-x: auto;
}
.miniaturaProducto {
width: 64px;
height: 64px;
flex: 0 0 auto;
object-fit: cover;
border-radius: 10px;
border: 2px solid transparent;
cursor: pointer;
opacity: .75;
}
.miniaturaProducto.activa {
border-color: var(--tienda-primario);
opacity: 1;
}
#productoInfoDetalle {
background: rgba(255,255,255,0.07);
border: 1px solid var(--tienda-borde);
border-radius: 18px;
padding: 18px;
}
#productoInfoDetalle h2 {
margin: 0 0 8px;
font-size: 25px;
}
#productoInfoDetalle .categoriaDetalle {
opacity: .7;
margin-bottom: 14px;
font-size: 13px;
}
#productoInfoDetalle .precioDetalle {
color: var(--tienda-primario);
font-weight: 800;
font-size: 24px;
margin: 14px 0;
}
#productoInfoDetalle .descripcionDetalle {
line-height: 1.55;
opacity: .9;
font-size: 14px;
}
.productoDetalleAcciones {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
.btnDeshabilitado {
opacity: .45 !important;
cursor: not-allowed !important;
filter: grayscale(1);
}
#carritoLista {
display: flex;
flex-direction: column;
gap: 10px;
}
.itemCarrito {
display: grid;
grid-template-columns: 58px 1fr auto;
gap: 12px;
align-items: center;
background: rgba(255,255,255,0.07);
border: 1px solid var(--tienda-borde);
border-radius: 14px;
padding: 10px;
}
.itemCarrito img {
width: 58px;
height: 58px;
object-fit: cover;
border-radius: 10px;
background: rgba(255,255,255,0.08);
}
.itemCarrito h4 {
margin: 0 0 4px;
font-size: 14px;
}
.itemCarrito p {
margin: 0;
font-size: 12px;
opacity: .75;
}
.controlesCantidad {
display: flex;
align-items: center;
gap: 8px;
}
.controlesCantidad button {
width: 28px;
height: 28px;
border-radius: 50%;
border: 0;
cursor: pointer;
font-weight: 800;
}
.btnEliminarCarrito {
background: rgba(229,57,53,0.25);
color: #fff;
}
#carritoResumen {
margin-top: 16px;
background: rgba(255,255,255,0.07);
border: 1px solid var(--tienda-borde);
border-radius: 16px;
padding: 14px;
}
#carritoTotal {
font-size: 20px;
font-weight: 800;
color: var(--tienda-primario);
margin: 8px 0 14px;
}
.grupoOpciones {
margin: 14px 0;
}
.grupoOpciones h4 {
margin: 0 0 8px;
font-size: 14px;
}
.opcionRadio {
display: block;
margin: 7px 0;
font-size: 13px;
}
.opcionRadio input {
margin-right: 7px;
}
.cajaInstrucciones {
margin-top: 12px;
padding: 12px;
border-radius: 12px;
background: rgba(255,255,255,0.08);
border: 1px solid var(--tienda-borde);
font-size: 13px;
line-height: 1.45;
}
.mensajeVacioTienda {
padding: 30px;
text-align: center;
opacity: .72;
}
.textoTourHotspot{
transform:translate(-50%,-50%);
text-align:center;
text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.btn-mapa {
position: fixed;
left: var(--mapa-left);
bottom: var(--mapa-bottom);
z-index: 9000;
width: var(--mapa-size);
height: var(--mapa-size);
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(0,0,0,.72);
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 16px rgba(0,0,0,.75);
overflow: hidden;
}
.btn-mapa img {
width: var(--mapa-icon-size);
height: var(--mapa-icon-size);
object-fit: contain;
display: block;
}
#panelMapa {
position: fixed;
left: 20px;
top: 90px;
width: var(--mapa-panel-width);
height: var(--mapa-panel-height);
z-index: 9999;
display: none;
overflow: hidden;
border-radius: 16px;
background: #111;
box-shadow: 0 18px 45px rgba(0,0,0,.45);
}
#panelMapa.activo {
display: block;
}
#btnCerrarMapa {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background: rgba(0,0,0,.75);
color: #fff;
font-size: 20px;
cursor: pointer;
}
@media (max-width: 850px) {
#tiendaVentana {
width: 96vw;
height: 90vh;
border-radius: 16px;
}
#tiendaHeader {
align-items: flex-start;
}
#tiendaAccionesTop {
flex-wrap: wrap;
justify-content: flex-end;
}
#productoDetalleGrid {
grid-template-columns: 1fr;
}
#productoImagenPrincipal {
height: 280px;
}
.itemCarrito {
grid-template-columns: 50px 1fr;
}
.controlesCantidad {
grid-column: 1 / -1;
justify-content: flex-end;
}
}
#estadoCarga.loaderDomino {
position: fixed;
inset: 0;
z-index: 8000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(circle at center, rgba(27,212,89,0.16), transparent 34%),
radial-gradient(circle at bottom, rgba(0,80,35,0.22), transparent 45%),
linear-gradient(180deg, #020402 0%, #000 58%, #010701 100%);
color: #fff;
text-align: center;
padding: 24px;
opacity: 1;
visibility: visible;
transition: opacity .45s ease, visibility .45s ease;
}
#estadoCarga.loaderDomino::before {
content: "";
position: absolute;
inset: -40%;
background:
linear-gradient(
115deg,
transparent 0%,
transparent 38%,
rgba(255,255,255,0.055) 50%,
transparent 62%,
transparent 100%
);
animation: brilloLoader 3.8s linear infinite;
pointer-events: none;
}
#estadoCarga.oculto {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loaderGlow {
position: absolute;
width: min(520px, 78vw);
height: min(520px, 78vw);
border-radius: 50%;
background: radial-gradient(circle, rgba(27,212,89,0.18), transparent 68%);
filter: blur(12px);
animation: respirarGlow 2.8s ease-in-out infinite;
}
.loaderContenido {
position: relative;
z-index: 2;
width: min(420px, 88vw);
min-height: 300px;
padding: 34px 28px 30px;
border-radius: 24px;
border: 1px solid rgba(255,255,255,0.20);
background:
linear-gradient(145deg, rgba(6,42,14,0.78), rgba(0,0,0,0.74));
box-shadow:
0 24px 80px rgba(0,0,0,0.72),
inset 0 0 28px rgba(255,255,255,0.035);
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#logoCargaProyecto {
width: min(240px, 58vw);
max-height: 150px;
object-fit: contain;
display: none;
margin-bottom: 18px;
filter:
drop-shadow(0 0 18px rgba(255,255,255,0.18))
drop-shadow(0 10px 24px rgba(0,0,0,0.65));
animation: logoRespira 2.5s ease-in-out infinite;
}
.loaderLinea {
width: min(170px, 48vw);
height: 1px;
margin: 2px auto 18px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
opacity: .85;
}
.loaderDots {
display: flex;
gap: 7px;
justify-content: center;
align-items: center;
margin-bottom: 14px;
}
.loaderDots span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #fff;
opacity: .45;
animation: puntosLoader 1.15s ease-in-out infinite;
}
.loaderDots span:nth-child(2) {
animation-delay: .18s;
}
.loaderDots span:nth-child(3) {
animation-delay: .36s;
}
.loaderNombreProyecto {
font-size: 14px;
font-weight: 800;
letter-spacing: .9px;
text-transform: uppercase;
margin-bottom: 8px;
opacity: .95;
}
.loaderTexto {
font-size: 13px;
font-weight: 700;
line-height: 1.35;
opacity: .95;
}
.loaderSubtexto {
margin-top: 5px;
font-size: 12px;
line-height: 1.35;
color: rgba(255,255,255,0.72);
}
@keyframes brilloLoader {
0% {
transform: translateX(-20%) rotate(0deg);
}
100% {
transform: translateX(20%) rotate(360deg);
}
}
@keyframes respirarGlow {
0%, 100% {
transform: scale(.94);
opacity: .62;
}
50% {
transform: scale(1.06);
opacity: 1;
}
}
@keyframes logoRespira {
0%, 100% {
transform: scale(1);
opacity: .94;
}
50% {
transform: scale(1.035);
opacity: 1;
}
}
@keyframes puntosLoader {
0%, 100% {
transform: translateY(0);
opacity: .35;
}
50% {
transform: translateY(-5px);
opacity: 1;
}
}
#tarjetaAgente {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 2850;
width: 260px;
max-width: calc(100vw - 36px);
padding: 13px;
border-radius: 16px;
background: rgba(0,0,0,0.70);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.16);
box-shadow:
0 12px 35px rgba(0,0,0,0.50);
color: #fff;
display: none;
}
.agenteEtiqueta {
font-size: 9px;
font-weight: 700;
letter-spacing: 1.6px;
opacity: .62;
margin-bottom: 9px;
}
.agenteContenido {
display: flex;
align-items: center;
gap: 11px;
}
#fotoAgente {
width: 54px;
height: 54px;
flex: 0 0 54px;
border-radius: 50%;
object-fit: cover;
background: rgba(255,255,255,.10);
display: none;
}
.agenteDatos {
min-width: 0;
flex: 1;
}
#nombreAgente {
font-size: 14px;
font-weight: 700;
line-height: 1.15;
}
#cargoAgente {
margin-top: 3px;
margin-bottom: 8px;
font-size: 10px;
opacity: .70;
}
#btnWhatsappAgente {
display: inline-block;
padding: 7px 10px;
border-radius: 999px;
background: #25D366;
color: #07150b;
font-size: 10px;
font-weight: 700;
text-decoration: none;
}
@media (max-width: 768px) {
#tarjetaAgente {
right: 10px;
bottom: 12px;
width: 220px;
padding: 10px;
border-radius: 14px;
}
#fotoAgente {
width: 46px;
height: 46px;
flex-basis: 46px;
}
#nombreAgente {
font-size: 12px;
}
#cargoAgente {
font-size: 9px;
}
#btnWhatsappAgente {
padding: 6px 9px;
font-size: 9px;
}
}
@media (max-width: 768px) {
.loaderContenido {
width: min(330px, 86vw);
min-height: 260px;
padding: 28px 22px 24px;
border-radius: 20px;
}
#logoCargaProyecto {
width: min(205px, 58vw);
max-height: 125px;
margin-bottom: 15px;
}
.loaderNombreProyecto {
font-size: 12px;
}
.loaderTexto {
font-size: 12px;
}
.loaderSubtexto {
font-size: 11px;
}
}
@media (max-width: 768px) {
#marcaProyecto {
top: 12px;
left: 12px;
max-width: calc(100vw - 24px);
padding: 0;
background: transparent;
backdrop-filter: none;
box-shadow: none;
pointer-events: none;
}
#marcaProyecto * {
pointer-events: none;
}
#logoProyecto {
width: var(--logo-size-mobile);
height: auto;
}
#marcaProyecto h1 {
font-size: 14px;
text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}
#marcaProyecto p {
font-size: 10px;
text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}
.estructura-arq {
transform: scale(0.46);
}
#imagenFoto {
width: auto;
height: auto;
max-width: 94vw;
max-height: 78vh;
object-fit: contain;
}
#iframeVideo {
width: 72vw;
height: 68vh;
max-width: 72vw;
max-height: 68vh;
border-radius: 14px;
}
#visorVideo {
align-items: center;
justify-content: center;
padding: 0;
}
}
#polygonSvg {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
z-index: 2400;
pointer-events: none;
overflow: visible;
}
.poligonoLote {
pointer-events: all;
cursor: pointer;
transition:
fill-opacity .18s ease,
stroke-width .18s ease,
filter .18s ease;
}
.poligonoLote.poligono-resaltado {
fill-opacity: 0.42;
stroke-width: 4;
filter:
drop-shadow(0 0 8px currentColor)
drop-shadow(0 0 16px currentColor);
}
@media (max-width: 768px) {
.poligonoLote {
pointer-events: none;
}
}
.hotspotAnclaPoligono {
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none !important;
}