/* Grupo Nórdico — Vitrina de Productos (la usan la pestaña Productos y la página del cliente). Ver vitrina.js.
   Marca de los folletos: azul marino #0B2955, azul #16427F, acento rojo #ED1C24, gris #D0D2D4. */
:root { --vt-marino: #0b2955; --vt-azul: #16427f; --vt-rojo: #ed1c24; --vt-gris: #d0d2d4; --vt-luz: #7fd0ff; }

/* ---------- Ken Burns ---------- */
.kb { position: relative; overflow: hidden; background: var(--vt-marino); isolation: isolate; }
.kb-c { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; will-change: opacity; }
.kb-c.on { opacity: 1; }
.kb-c img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%; will-change: transform; }
.kb-c.kb-1 img { animation: kb-1 var(--kb-t, 8s) ease-out both; }
.kb-c.kb-2 img { animation: kb-2 var(--kb-t, 8s) ease-out both; }
.kb-c.kb-3 img { animation: kb-3 var(--kb-t, 8s) ease-out both; }
.kb-c.kb-4 img { animation: kb-4 var(--kb-t, 8s) ease-out both; }
.kb.kb-pausa .kb-c img { animation-play-state: paused; }
@keyframes kb-1 { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.16) translate(-2.5%, -1.5%); } }
@keyframes kb-2 { from { transform: scale(1.16) translate(2%, 1%); } to { transform: scale(1.03) translate(0, 0); } }
@keyframes kb-3 { from { transform: scale(1.05) translate(-2%, 0); } to { transform: scale(1.15) translate(2.5%, -1%); } }
@keyframes kb-4 { from { transform: scale(1.14) translate(0, -2%); } to { transform: scale(1.04) translate(-1.5%, 1.5%); } }
.kb-epi { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; padding: 8px 12px; border-radius: 10px; background: rgba(11, 41, 85, .72); color: #fff; font-size: 12.5px; line-height: 1.35; backdrop-filter: blur(4px); max-width: 520px; }

/* ---------- visor de planos ---------- */
.vp { position: relative; overflow: hidden; background: #f4f6f9; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: inherit; }
.vp.vp-arrastra { cursor: grabbing; }
.vp-lienzo { position: absolute; left: 0; top: 0; transform-origin: 0 0; --inv: 1; }
.vp-lienzo.vp-anim { transition: transform .65s cubic-bezier(.3, .1, .2, 1); }
.vp-img { width: 100%; height: 100%; display: block; pointer-events: none; image-rendering: auto; background: #fff; }
.vp-capa { position: absolute; inset: 0; }
.vp-m { position: absolute; width: 26px; height: 26px; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--vt-azul); color: #fff; font: 700 10px/22px 'Open Sans', 'Inter', system-ui, sans-serif; text-align: center; cursor: pointer; box-shadow: 0 2px 6px rgba(11, 41, 85, .45);
  transform: translate(-50%, -50%) scale(var(--inv)); transform-origin: 50% 50%; transition: background .2s, opacity .3s, box-shadow .2s; }
.vp-m span { pointer-events: none; }
.vp.vp-lejos .vp-m span { opacity: 0; }
.vp.vp-lejos .vp-m { border-width: 3px; }
.vp-m:hover { background: #2459a6; }
.vp-m.res { background: var(--vt-rojo); z-index: 2; }
.vp-m.res::after, .vp-m.foco::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid var(--vt-rojo); animation: vp-late 1.6s ease-out infinite; pointer-events: none; }
.vp-m.foco { background: var(--vt-rojo); z-index: 3; box-shadow: 0 0 0 4px rgba(237, 28, 36, .25), 0 3px 10px rgba(0, 0, 0, .35); }
.vp-m.apa { opacity: .28; }
.vp-m.apa.res, .vp-m.apa.foco { opacity: 1; }
@keyframes vp-late { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
/* Entrada: los disponibles se van encendiendo. */
.vp.vp-entra .vp-m { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--inv) * .2)); }
.vp.vp-entra.vp-listo .vp-m { animation: vp-enciende .55s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0ms) both; }
.vp.vp-entra.vp-listo .vp-m.apa { animation-name: vp-enciende-apa; }
@keyframes vp-enciende { 0% { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--inv) * .2)); box-shadow: 0 0 0 0 rgba(127, 208, 255, .9); } 60% { opacity: 1; box-shadow: 0 0 0 12px rgba(127, 208, 255, 0); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(var(--inv)); } }
@keyframes vp-enciende-apa { 0% { opacity: 0; transform: translate(-50%, -50%) scale(calc(var(--inv) * .2)); } 100% { opacity: .28; transform: translate(-50%, -50%) scale(var(--inv)); } }
.vp-ctl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.vp-b { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(11, 41, 85, .12); background: rgba(255, 255, 255, .95); color: var(--vt-marino); font: 700 20px/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(11, 41, 85, .12); }
.vp-b:hover { background: #fff; color: var(--vt-azul); }
.vp-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vp-ayuda { position: absolute; left: 10px; bottom: 10px; z-index: 5; font-size: 11.5px; color: #4a5872; background: rgba(255, 255, 255, .9); padding: 4px 9px; border-radius: 8px; pointer-events: none; transition: opacity .4s 3s; }
.vp.vp-arrastra .vp-ayuda, .vp:hover .vp-ayuda { opacity: 0; }

/* ---------- mapas del folleto ---------- */
.mp { position: relative; }
.mp-in { position: relative; width: 100%; overflow: hidden; border-radius: inherit; background: #1d2a1f; }
.mp-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-in svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mp-ruta-b { fill: none; stroke: rgba(255, 255, 255, .0); stroke-width: 9; stroke-linecap: round; }
.mp-ruta { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(127, 208, 255, .9)); }
.mp-on .mp-ruta { animation: mp-dibuja 2.6s ease-in-out .2s forwards; }
.mp-quieto .mp-ruta { stroke-dashoffset: 0; animation: none; }
@keyframes mp-dibuja { to { stroke-dashoffset: 0; } }
.mp-pto { fill: #fff; stroke: var(--vt-azul); stroke-width: 3; }
.mp-dest circle { fill: var(--vt-rojo); stroke: #fff; stroke-width: 3; opacity: 0; }
.mp-on .mp-dest circle { animation: mp-aparece .4s ease 2.6s forwards; }
.mp-quieto .mp-dest circle { opacity: 1; animation: none; }
.mp-on .mp-dest .mp-pulso { animation: mp-aparece .4s ease 2.6s forwards, mp-pulso 1.8s ease-out 3s infinite; fill: none; stroke: var(--vt-rojo); transform-box: fill-box; transform-origin: center; }
@keyframes mp-aparece { to { opacity: 1; } }
@keyframes mp-pulso { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.mp-chip { opacity: 0; } .mp-on .mp-chip { animation: mp-aparece .5s ease 1.4s forwards; } .mp-quieto .mp-chip { opacity: 1; }
.mp-chip rect { fill: rgba(11, 41, 85, .88); stroke: rgba(255, 255, 255, .6); }
.mp-chip text { fill: #fff; font: 700 15px 'Poppins', 'Montserrat', system-ui, sans-serif; text-anchor: middle; }
.mp-sec { cursor: pointer; opacity: 0; outline: none; }
.mp-on .mp-sec { animation: mp-aparece .6s ease calc(var(--d) + .2s) forwards; }
.mp-quieto .mp-sec { opacity: 1; animation: none; }
.mp-sec polygon { fill: var(--c); fill-opacity: .35; stroke: #fff; stroke-width: 2.5; transition: fill-opacity .25s; }
.mp-sec line { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 4 3; }
.mp-sec rect { fill: var(--c); stroke: #fff; stroke-width: 1.5; }
.mp-sec text { fill: #fff; font: 700 15px 'Poppins', 'Montserrat', system-ui, sans-serif; }
.mp-sec:hover polygon, .mp-sec:focus-visible polygon { fill-opacity: .6; }
.mp-sec.on polygon { fill-opacity: .8; animation: mp-sec-late 1.6s ease-in-out infinite; }
@keyframes mp-sec-late { 50% { fill-opacity: .45; } }

/* ---------- galería ---------- */
.gl { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; }
.gl-fondo { position: absolute; inset: 0; background: rgba(5, 15, 32, .94); }
.gl-fig { position: relative; margin: 0; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gl-fig img { max-width: 94vw; max-height: 78vh; border-radius: 10px; opacity: 0; transform: scale(.98); transition: opacity .35s, transform .35s; }
.gl-fig img.on { opacity: 1; transform: none; }
.gl-fig figcaption { color: #dbe6f6; font-size: 14px; text-align: center; max-width: 640px; }
.gl-b { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; width: 46px; height: 46px; border-radius: 50%; font: 400 30px/1 system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; }
.gl-b:hover { background: rgba(255, 255, 255, .24); }
.gl-x { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.gl-ant { left: 14px; top: 50%; margin-top: -23px; } .gl-sig { right: 14px; top: 50%; margin-top: -23px; }
.gl-n { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); color: #b7c6dd; font-size: 13px; }

/* ---------- presentación ---------- */
html.pr-abierta, html.pr-abierta body { overflow: hidden; }
.pr { position: fixed; inset: 0; z-index: 130; background: #050f20; color: #fff; overflow: hidden; font-family: 'Poppins', 'Montserrat', system-ui, sans-serif; }
.pr::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 110px; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(5, 15, 32, .55), transparent); }
.pr-barras { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; display: flex; gap: 5px; z-index: 6; }
.pr-barras i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.pr-barras b { display: block; height: 100%; width: 0; background: #fff; }
.pr-p { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; }
.pr-p.on { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.pr-foto { position: absolute; inset: 0; opacity: 1; }
.pr-p:not(.anim) .pr-foto img { animation: none; }
.pr-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 15, 32, .55) 0%, rgba(5, 15, 32, .05) 35%, rgba(5, 15, 32, .15) 55%, rgba(5, 15, 32, .82) 100%); }
.pr-cont { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px clamp(20px, 6vw, 72px) calc(54px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
.pr-in { opacity: 0; transform: translateY(18px); }
.pr-p.anim .pr-in { animation: pr-sube .8s cubic-bezier(.2, .7, .2, 1) var(--d, .15s) forwards; }
@keyframes pr-sube { to { opacity: 1; transform: none; } }
.pr-logo { position: absolute; top: calc(30px + env(safe-area-inset-top, 0px)); left: clamp(20px, 6vw, 72px); width: clamp(120px, 18vw, 190px); height: auto; opacity: 0; }
.pr-p.anim .pr-logo { animation: pr-sube .8s ease .1s forwards; }
.pr-t { font: 800 clamp(34px, 7vw, 76px)/1.02 'Poppins', 'Montserrat', system-ui, sans-serif; letter-spacing: -.02em; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.pr-s { font: 500 clamp(15px, 2.2vw, 21px)/1.35 'Open Sans', 'Inter', system-ui, sans-serif; color: #dce8f8; }
.pr-portada .pr-t::after { content: ''; display: block; width: 64px; height: 4px; background: var(--vt-rojo); margin-top: 14px; border-radius: 2px; }
.pr-cap { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.pr-cap b { font: 800 clamp(24px, 4.4vw, 44px)/1.1 'Poppins', 'Montserrat', system-ui, sans-serif; }
.pr-cap span { font: 500 clamp(14px, 2vw, 19px)/1.45 'Open Sans', 'Inter', system-ui, sans-serif; color: #dce8f8; }
.pr-lista { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.pr-it { display: flex; gap: 12px; align-items: baseline; font: 600 clamp(16px, 2.6vw, 25px)/1.3 'Poppins', 'Montserrat', system-ui, sans-serif; }
.pr-it i { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--vt-rojo); transform: rotate(45deg) translateY(-2px); }
.pr-nums .pr-cont { flex-direction: row; flex-wrap: wrap; gap: 14px 40px; align-items: flex-end; }
.pr-num { display: flex; flex-direction: column; }
.pr-num b { font: 800 clamp(28px, 5.4vw, 58px)/1 'Poppins', 'Montserrat', system-ui, sans-serif; }
.pr-num span { font: 500 clamp(13px, 1.8vw, 17px) 'Open Sans', 'Inter', system-ui, sans-serif; color: #c7d7ee; margin-top: 6px; }
.pr-map { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0b1a2e; }
.pr-map .mp-in { width: max(100vw, min(calc(100vh * 1.48), 190vw)); flex: none; }
.pr-map { overflow: hidden; }
.pr-mapa .pr-velo { background: linear-gradient(180deg, rgba(5, 15, 32, .5) 0%, transparent 30%, transparent 65%, rgba(5, 15, 32, .85) 100%); }
.pr-plano { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #eef2f7; overflow: hidden; }
.pr-pz { position: relative; flex: none; width: min(100vw, calc(100vh * var(--ar, 1.4))); aspect-ratio: var(--ar, 1.4); transform-origin: var(--ox) var(--oy); }
.pr-pz img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pr-p.anim .pr-pz { animation: pr-zoom 2.4s cubic-bezier(.5, 0, .2, 1) .3s both; }
@keyframes pr-zoom { from { transform: scale(1); } to { transform: scale(var(--z, 4.2)); } }
/* El punto está adentro del plano que se acerca: se achica en la misma proporción para verse siempre del mismo tamaño. */
.pr-pin { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--vt-rojo); box-shadow: 0 0 0 3px #fff; opacity: 0; transform: scale(calc(1.2 / var(--z, 4.2))); }
.pr-p.anim .pr-pin { animation: mp-aparece .3s ease 2.4s forwards; }
.pr-pin::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--vt-rojo); animation: vp-late 1.4s ease-out infinite; }
.pr-lote .pr-velo { background: linear-gradient(180deg, transparent 50%, rgba(5, 15, 32, .78) 100%); }
.pr-ficha { background: rgba(11, 41, 85, .92); border-left: 4px solid var(--vt-rojo); border-radius: 14px; padding: 16px 20px; max-width: 520px; backdrop-filter: blur(6px); }
.pr-fl { font: 700 clamp(15px, 2.2vw, 20px) 'Poppins', system-ui, sans-serif; color: #c9daf3; }
.pr-fp { font: 800 clamp(28px, 5vw, 46px)/1.1 'Poppins', system-ui, sans-serif; margin: 4px 0; }
.pr-fd { font: 500 14px/1.4 'Open Sans', system-ui, sans-serif; color: #dce8f8; }
.pr-cierre { background: radial-gradient(80% 70% at 50% 40%, #16427f 0%, #0b2955 60%, #061833 100%); }
.pr-cierre .pr-velo { display: none; }
.pr-cierre .pr-cont { inset: 0; justify-content: center; align-items: center; text-align: center; gap: 22px; }
.pr-logo-g { width: min(70vw, 420px); height: auto; }
.pr-logo svg, .pr-logo-g svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .3)); }
.pr-claim { font: 700 clamp(15px, 2.6vw, 24px) var(--c-fd, 'Poppins', 'Montserrat', system-ui, sans-serif); letter-spacing: .32em; text-transform: uppercase; color: #dce8f8; }
.pr-b { position: absolute; z-index: 7; border: 0; background: rgba(5, 15, 32, .42); color: #fff; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; font: 400 26px/1 system-ui, sans-serif; display: grid; place-items: center; backdrop-filter: blur(4px); }
.pr-b:hover { background: rgba(255, 255, 255, .26); }
.pr-x { top: calc(24px + env(safe-area-inset-top, 0px)); right: 14px; }
.pr-pausa { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); right: 14px; font-size: 13px; }
.pr-pausa .pp-s { display: none; } .pr.pausado .pr-pausa .pp-p { display: none; } .pr.pausado .pr-pausa .pp-s { display: inline; }
.pr.pausado .kb-c img, .pr.pausado .pr-pz, .pr.pausado .pr-in { animation-play-state: paused; }
.pr-toque { position: absolute; top: 70px; bottom: 70px; z-index: 4; }
.pr-izq { left: 0; width: 32%; } .pr-der { right: 0; width: 68%; }
.pr-cierre.on .pr-cont { z-index: 5; }
.pr.pr-quieto .kb-c img, .pr.pr-quieto .pr-pz { animation: none !important; }
.pr.pr-quieto .pr-pz { transform: scale(var(--z, 4.2)); }
.pr.pr-quieto .pr-pin { opacity: 1; }
.pr.pr-quieto .pr-in { animation-duration: .01s !important; animation-delay: 0s !important; }

@media (prefers-reduced-motion: reduce) {
  .kb-c { transition-duration: .6s; }
  .kb-c img { animation: none !important; }
  .vp-m.res::after, .vp-m.foco::after, .pr-pin::after { animation: none; }
}

/* ---------- videos, mapa sin dibujo y plano que se enciende (el modelo genérico: cualquier loteo con sus datos) ---------- */
.kb-c video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-fig video { max-width: 94vw; max-height: 78vh; border-radius: 10px; background: #000; }
.mp-mueve:not(.mp-quieto) .mp-in img { animation: kb-1 24s ease-in-out infinite alternate; }
.mp-on .mp-dest.mp-solo circle { animation-delay: .6s; }
.mp-on .mp-dest.mp-solo .mp-pulso { animation: mp-aparece .4s ease .6s forwards, mp-pulso 1.8s ease-out 1s infinite; }
.pr-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.pr-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-p.vid-on .pr-video video { opacity: 1; }
.pr-vid .pr-velo { background: linear-gradient(180deg, rgba(5, 15, 32, .45) 0%, transparent 30%, transparent 70%, rgba(5, 15, 32, .7) 100%); }
.pr-ptw { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #eef2f7; padding: calc(64px + env(safe-area-inset-top, 0px)) 12px 150px; }
.pr-pti { position: relative; width: min(94vw, calc((100vh - 230px) * var(--ar, 1.4))); aspect-ratio: var(--ar, 1.4); }
.pr-pti img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pr-pti i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--vt-azul); box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.2); }
.pr-p.anim .pr-pti i { animation: pr-enciende .55s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0ms) forwards; }
@keyframes pr-enciende { 0% { opacity: 0; transform: scale(.2); box-shadow: 0 0 0 0 rgba(127, 208, 255, .9); } 60% { opacity: 1; box-shadow: 0 0 0 10px rgba(127, 208, 255, 0); } 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 2px #fff; } }
.pr-pt .pr-velo { background: linear-gradient(180deg, transparent 62%, rgba(5, 15, 32, .86) 100%); }
.pr.pausado .pr-pti i { animation-play-state: paused; }
.pr.pr-quieto .pr-pti i { opacity: 1; transform: none; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .mp-mueve .mp-in img { animation: none !important; } }