/* STELLA web v2: Explorador inmersivo (ronda 3).
   Un escenario + un panel que cambia por nivel. Escritorio: panel a la izquierda. Teléfono: hoja inferior.
   Sin backdrop-filter en teléfono: rellenos sólidos para que todo se sienta ágil. */
.ex{--pw:clamp(340px,27vw,400px);--res:#5d6168;--bloq:#a2a7ad;--hair:rgba(255,255,255,.1);--txt2:rgba(255,255,255,.72);--txt3:rgba(255,255,255,.5);--hoja:#171a1e;
  position:absolute;inset:0;overflow:hidden;overflow:clip;background:var(--night);color:#fff;font-family:var(--sans)}
.ex a{text-decoration:none;color:inherit}
.ex :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ex [hidden]{display:none!important}
/* Verde = disponible: reemplaza al dorado en cápsulas, puntos y barras */
.ex{--disp:#3fb27f;--disp-t:#0e2219}

/* ---------- Estado: forma + color ---------- */
.ex-est{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;vertical-align:middle}
.ex-est--disp{background:var(--disp);box-shadow:0 0 0 3px rgba(63,178,127,.2)}
.ex-est--res{background:none;box-shadow:inset 0 0 0 1.5px rgba(214,218,224,.9)}
.ex-est--bloq{border-radius:2px;border:1.5px solid var(--bloq);background:repeating-linear-gradient(135deg,var(--bloq) 0 1.2px,transparent 1.2px 3.6px)}
.ex-est--nd{border:1.5px dashed var(--txt3)}
.ex-c{display:block;flex:1 1 0;height:9px;border-radius:2px;transition:opacity .35s var(--ease)}
.ex-c--disp{background:var(--disp)}
.ex-c--res{background:var(--res)}
.ex-c--bloq{background:repeating-linear-gradient(135deg,var(--bloq) 0 1.5px,transparent 1.5px 4px);box-shadow:inset 0 0 0 1px rgba(162,167,173,.6)}
.ex-c--nd{box-shadow:inset 0 0 0 1px var(--txt3)}
.ex-leyenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--txt3)}
.ex-leyenda li{display:flex;align-items:center;gap:7px}
.ex-leyenda .ex-est{width:8px;height:8px}

/* ---------- Escenario ---------- */
/* overflow:clip: al enfocar una marca acercada el navegador ya no desplaza el escenario (con hidden sí lo hacía) */
.ex-stage{position:absolute;top:0;right:0;bottom:0;left:var(--pw);overflow:hidden;overflow:clip;background:#0d0f12}
.ex-capa{position:absolute!important;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s .6s}
.ex-capa.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s}
.ex-capa--giro:not(.on){transform:scale(1.08)}
.ex-capa--plano:not(.on){transform:scale(.96)}
.ex-capa--plaza:not(.on){transform:scale(1.03)}
.ex-plaza-host{position:absolute;inset:0}
.ex-plaza-pend{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:0 clamp(24px,6vw,72px);background:radial-gradient(80% 60% at 30% 40%,#1f242a,#0d0f12)}
.ex-plaza-pend p{margin:0;max-width:38ch;color:var(--txt2);font-size:15px;line-height:1.5}
.ex-plaza-pend .ex-plaza-pend-t{font:300 clamp(26px,3vw,36px)/1.15 var(--sans);letter-spacing:-.02em;color:#fff}
.ex-plaza-pend .trazo{color:#fff;margin-top:8px}

/* Planta del piso: cruce entre pisos */
.ex-plano{position:absolute;inset:0;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.ex-plano--entra{opacity:0;transform:scale(.97)}
.ex-plano--sube{opacity:0;transform:translateY(-28px)}
.ex-plano--baja{opacity:0;transform:translateY(28px)}
.ex-plano--sale{opacity:0;pointer-events:none}
.ex-plano--sale-sube{transform:translateY(28px)}
.ex-plano--sale-baja{transform:translateY(-28px)}
/* Entorno bajo la planta: la torre, el podio, las calles. Misma cámara que la planta; se acerca menos (paralaje) */
.ex-p3-contexto{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ex-p3-entorno{position:absolute;width:0;height:0;transform-origin:0 0;will-change:transform}
.ex-p3-entorno--suave{transition:transform .55s var(--ease)}
.ex-p3-entorno img{position:absolute;max-width:none;user-select:none;opacity:0;transition:opacity .8s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
.ex-p3-entorno.lista img{opacity:1}
.ex-p3-contexto::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 50%,rgba(12,15,22,0) 40%,rgba(12,15,22,.45) 72%,rgba(12,15,22,.8))}
.ex-p3-rotulo{position:absolute;left:18px;bottom:14px;z-index:2;margin:0;display:flex;flex-direction:column;gap:2px;max-width:calc(100% - 36px);
  font-size:11.5px;line-height:1.35;color:rgba(255,255,255,.72);text-shadow:0 1px 8px rgba(0,0,0,.55);pointer-events:none}
.ex-p3-rotulo small{font-size:10.5px;color:rgba(255,255,255,.6)}
.ex-p3-escena{position:absolute;inset:0;overflow:hidden;overflow:clip;touch-action:none;outline:none}
.ex-p3-escena:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.ex-p3-escena--zoom{cursor:grab}
.ex-p3-escena--arrastra{cursor:grabbing}
.ex-p3-lienzo{position:absolute;transform-origin:0 0;will-change:transform}
.ex-p3-lienzo--suave{transition:transform .55s var(--ease)}
.ex-p3-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.ex-p3-escena.lista .ex-p3-img{opacity:1}
.ex-p3-areas{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;opacity:0;transition:opacity .5s var(--ease) .1s}
.ex-p3-escena.lista .ex-p3-areas{opacity:1}
/* Áreas: sin borde ni relleno en las disponibles (lo dice la cápsula verde); velo = reservada */
.ex-p3-cara{fill:rgba(0,0,0,0);stroke:none;pointer-events:visible;cursor:pointer;transition:fill .4s var(--ease),stroke .3s}
.ex-p3-halo{fill:none;stroke:#fff;stroke-width:14;stroke-opacity:0;stroke-linejoin:round;pointer-events:none;transition:stroke-opacity .4s}
.ex-p3-trama{stroke:none;pointer-events:none;transition:opacity .4s}
.ex-p3-trazo{fill:none;stroke:rgba(230,232,236,.34)}
.ex-p3-area--res .ex-p3-cara{fill:rgba(16,19,26,.25)}
.ex-p3-area--bloq .ex-p3-cara{fill:rgba(16,19,26,.34);stroke:rgba(255,255,255,.55);stroke-width:1;stroke-dasharray:5 4}
.ex-p3-area:hover .ex-p3-cara{fill:rgba(255,255,255,.06)}
.ex-p3-area--res:hover .ex-p3-cara{fill:rgba(255,255,255,.06)}
.ex-p3-area--res.resalta .ex-p3-cara{stroke:rgba(255,255,255,.5);stroke-width:1}
.ex-p3-area.apagada .ex-p3-cara{fill:rgba(10,12,16,.72);stroke:none}
.ex-p3-area.apagada .ex-p3-trama{opacity:0}
.ex-p3-escena--sel .ex-p3-area:not(.on) .ex-p3-cara{fill:rgba(10,12,16,.6);stroke:none}
.ex-p3-escena--sel .ex-p3-area:not(.on) .ex-p3-trama{opacity:.3}
/* Elegida: borde blanco fino; casi sin relleno para no tapar el render */
.ex-p3-area.on .ex-p3-cara{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.9);stroke-width:2;stroke-dasharray:none}
.ex-p3-area.on .ex-p3-trama{opacity:.35}

/* Marcas: chip con glifo de estado (forma + color), número y habitaciones */
.ex-pm{position:absolute;z-index:1;padding:0;border:0;background:none;color:#fff;transform:translate(-50%,-50%) scale(var(--k,1));opacity:0;transition:opacity .5s var(--ease) .25s;-webkit-tap-highlight-color:transparent}
.ex-p3-escena.lista .ex-pm{opacity:1}
.ex-pm::before{content:"";position:absolute;inset:-10px -6px}
.ex-pm-in{position:relative;display:flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 9px;border-radius:999px;background:rgba(18,21,27,.8);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 18px -8px rgba(0,0,0,.75);white-space:nowrap;transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .4s}
.ex-pm b{font:600 13px/1 var(--sans);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ex-pm em{font:700 11px/1 var(--sans);font-style:normal;opacity:.85}
.ex-pm .ex-est{width:8px;height:8px;box-shadow:none}
.ex-pm--disp .ex-pm-in{background:var(--disp);color:var(--disp-t);border-color:transparent}
.ex-pm--disp em{opacity:1}
.ex-pm--disp .ex-est--disp{background:var(--disp-t)}
.ex-pm--bloq .ex-pm-in{border-style:dashed;border-color:rgba(255,255,255,.5)}
.ex-pm:hover .ex-pm-in,.ex-pm:focus-visible .ex-pm-in{transform:translateY(-2px) scale(1.06)}
.ex-pm:focus-visible{outline:none}
.ex-pm:focus-visible .ex-pm-in{box-shadow:0 0 0 2px var(--night),0 0 0 4px #fff}
.ex-pm.on{z-index:2}
.ex-pm.on .ex-pm-in{background:#fff;color:#17191c;border-color:transparent;box-shadow:0 14px 30px -10px rgba(0,0,0,.7)}
.ex-pm.on .ex-est--disp{background:var(--disp)}
.ex-pm.on .ex-est--bloq{border-color:#5b5e64;background:repeating-linear-gradient(135deg,#5b5e64 0 1.2px,transparent 1.2px 3.6px)}
.ex-pm.resalta .ex-pm-in{box-shadow:0 0 0 2px rgba(255,255,255,.4),0 8px 18px -8px rgba(0,0,0,.75)}
.ex-pm.apagada{opacity:.28!important}
.ex-pm.apagada .ex-pm-in{background:rgba(18,21,27,.7);color:rgba(255,255,255,.75);border-color:transparent}
.ex-p3-escena--sel .ex-pm:not(.on){opacity:.4}
.ex-p3-lienzo--compacto .ex-pm-in{gap:4px;height:22px;padding:0 7px}
.ex-p3-lienzo--compacto .ex-pm b{font-size:11px}
.ex-p3-lienzo--compacto .ex-pm em{font-size:10px}
.ex-p3-lienzo--compacto .ex-pm .ex-est{width:7px;height:7px}

/* Leyenda fechada y Merendón sobre el escenario */
.ex-p3-ley{position:absolute;right:18px;bottom:16px;z-index:2;padding:9px 14px 10px;border-radius:12px;background:rgba(14,17,22,.86);border:1px solid rgba(255,255,255,.1);pointer-events:none}
.ex-p3-ley-t{margin:0 0 6px;font:600 10px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.ex-p3-ley ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.ex-p3-ley li{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.2;color:rgba(255,255,255,.86)}
.ex-p3-ley .ex-est{width:8px;height:8px;box-shadow:none}
.ex-pm .ex-est--res,.ex-p3-ley .ex-est--res{box-shadow:inset 0 0 0 1.5px rgba(214,218,224,.9)}
.ex-pm.on .ex-est--res{box-shadow:inset 0 0 0 1.5px #5b5e64}
.ex-p3-norte{position:absolute;z-index:2;margin:0;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px;border-radius:999px;background:rgba(14,17,22,.86);border:1px solid rgba(197,169,97,.5);
  font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;pointer-events:none}
.ex-p3-flecha{flex:none;width:0;height:0;border-style:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent var(--gold)}
.ex-p3-norte--der{top:20px;right:76px;flex-direction:row-reverse}
.ex-p3-norte--izq{top:20px;left:18px}
.ex-p3-norte--izq .ex-p3-flecha{transform:rotate(180deg)}
/* deja libre el botón de cerrar de la barra superior (42 px a 16 px del borde) */
.ex-p3-norte--arriba{top:20px;right:76px}
.ex-p3-norte--arriba .ex-p3-flecha{transform:rotate(-90deg)}
.ex-p3-centro{position:absolute;right:14px;top:72px;z-index:3}
.ex-ico-centro{width:14px;height:14px;border:1.5px solid currentColor;border-radius:3px;position:relative}
.ex-ico-centro::after{content:"";position:absolute;inset:3px;border-radius:50%;background:currentColor}

/* Piso sin planta dibujada */
.ex-sinplanta{position:absolute;inset:0;overflow:auto;padding:clamp(20px,4vw,48px)}
.ex-sinplanta-t{margin:0 0 18px;max-width:46ch;color:var(--txt2);font-size:14px;line-height:1.5}
.ex-sinplanta ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.ex-ficha{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:var(--r-s);border:1px solid var(--hair);background:rgba(255,255,255,.03);transition:border-color .3s,opacity .3s}
.ex-ficha b{font:400 22px/1 var(--sans);letter-spacing:-.01em}
.ex-ficha span{font-size:13px;font-weight:700;color:var(--txt2)}
.ex-ficha small{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--txt2)}
.ex-ficha--disp{border-color:rgba(63,178,127,.55)}
.ex-ficha.on,.ex-ficha:hover{border-color:rgba(255,255,255,.7)}
.ex-ficha.apagada{opacity:.3}

/* Visor de imágenes de la residencia */
.ex-visor{position:absolute;inset:0;z-index:5;margin:0;display:flex;flex-direction:column;background:#0d0f12;opacity:0;transition:opacity .3s var(--ease)}
.ex-visor.on{opacity:1}
.ex-visor img{flex:1;min-height:0;width:100%;max-width:none;object-fit:cover}
.ex-visor--plano{background:#f4f2ee;color:var(--ink)}
.ex-visor--plano img{object-fit:contain;padding:16px}
.ex-visor figcaption{padding:10px 64px 12px 16px;font-size:12.5px;line-height:1.45;color:var(--txt2)}
.ex-visor--plano figcaption{color:var(--ink2)}
.ex-visor-x{position:absolute;top:12px;right:12px}

/* ---------- Barra superior: volver, pasos y cerrar ---------- */
.ex-top{position:absolute;top:0;left:0;right:0;z-index:7;height:68px;display:flex;align-items:center;gap:12px;padding:0 16px 0 22px;pointer-events:none}
.ex-top>*{pointer-events:auto}
.ex-redondo{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(20,23,27,.82);color:#fff;transition:background .3s,border-color .3s}
.ex-redondo:hover{background:rgba(197,169,97,.92);border-color:var(--gold);color:#17191c}
.ex-chev{width:9px;height:9px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateX(2px) rotate(45deg)}
.ex-x{position:relative;width:16px;height:16px}
.ex-x::before,.ex-x::after{content:"";position:absolute;left:0;top:50%;width:16px;height:1.5px;margin-top:-.75px;background:currentColor;transform:rotate(45deg)}
.ex-x::after{transform:rotate(-45deg)}
.ex-pasos{min-width:0;max-width:calc(var(--pw) - 92px)}
.ex-pasos ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:0;white-space:nowrap;overflow:hidden;font:500 13px/1 var(--sans);letter-spacing:.01em}
.ex-pasos li{display:flex;align-items:center;min-width:0}
.ex-pasos li+li::before{content:"";flex:none;width:14px;height:1px;margin:0 9px;background:rgba(255,255,255,.3)}
.ex-pasos a{color:var(--txt3);padding:12px 0;transition:color .3s}
.ex-pasos a:hover{color:#fff}
.ex-pasos [aria-current]{color:#fff;overflow:hidden;text-overflow:ellipsis}
.ex-cerrar{margin-left:auto}

/* ---------- Panel ---------- */
.ex-panel{position:absolute;z-index:6;left:0;top:0;bottom:0;width:var(--pw);display:flex;flex-direction:column;gap:22px;padding:84px 28px max(22px,env(safe-area-inset-bottom));background:var(--night);border-right:1px solid var(--hair)}
.ex-asa{display:none}
.ex-p-head{flex:none}
.ex-p-body{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.ex--n3 .ex-p-body{flex:1 1 auto}
.ex-p-body{overflow-x:hidden}
.ex-panel{overflow:hidden}
@media (min-width:768px){.ex--n1 .ex-p-body,.ex--n2 .ex-p-body{flex:none;overflow:visible}}
.ex-in{animation:ex-in .5s var(--ease) both}
.ex-in--adelante{animation-name:ex-in-ad}
.ex-in--atras{animation-name:ex-in-at}
@keyframes ex-in{from{opacity:0}}
@keyframes ex-in-ad{from{opacity:0;transform:translateX(18px)}}
@keyframes ex-in-at{from{opacity:0;transform:translateX(-18px)}}
.ex-in>*+*{margin-top:14px}

.ex-h{margin:0;font:300 clamp(34px,3vw,44px)/1 var(--sans);letter-spacing:-.025em}
.ex-h--num{font-variant-numeric:tabular-nums}
.ex-h--txt{font-size:24px;line-height:1.25}
.ex-linea{margin:0;font-size:14.5px;line-height:1.5;color:var(--txt2);max-width:40ch}
.ex-nota{margin:0;font-size:12px;line-height:1.5;color:var(--txt3)}
.ex-p-body .ex-nota{margin-top:16px}
.ex-p-body .ex-leyenda{margin-top:10px}

/* Pestañas con línea (torres, plaza, habitaciones) */
.ex-tabs{display:flex;gap:0;border-top:1px solid var(--hair)}
.ex-tab{position:relative;flex:1 1 0;min-width:0;min-height:50px;padding:14px 4px 6px 0;border:0;background:none;text-align:left;color:var(--txt3);font:500 14px/1.1 var(--sans);letter-spacing:.01em;white-space:nowrap;transition:color .35s}
.ex-tab::before{content:"";position:absolute;left:0;right:10px;top:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ex-tab:hover{color:#fff}
.ex-tab[aria-pressed=true]{color:#fff}
.ex-tab[aria-pressed=true]::before{transform:none}
.ex-tab small{display:block;margin-top:5px;font-size:11.5px;font-weight:400;color:var(--txt3)}
.ex-tab--cero{opacity:.45}

/* Acciones: una principal y, como mucho, un enlace con filete */
.ex-acc{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.ex-acc .trazo{color:#fff;font-size:14px;min-height:44px}
.ex-prim{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:52px;padding:0 20px 0 24px;border-radius:999px;background:var(--gold);color:#17191c!important;font:500 15px/1 var(--sans);letter-spacing:.01em;transition:background .3s,transform .4s var(--ease)}
.ex-prim:hover{background:#d3b873}
.ex-prim:active{transform:scale(.98)}
.ex-flecha{width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-right:3px}

/* Riel de pisos: vertical en escritorio (alzado: una fila por piso, una celda por residencia) */
.ex-scrub{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--hair);padding-top:14px}
.ex-scrub-t{margin:0;font-size:12px;color:var(--txt3)}
.ex-scrub-l{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column-reverse;gap:2px;scrollbar-width:thin;padding-right:4px}
/* Pocas filas: arriba. Muchas: el margen automático vale 0 y todo queda dentro del desplazamiento (flex-end lo sacaba) */
.ex-scrub-l>:first-child{margin-bottom:auto}
.ex-sc{display:grid;grid-template-columns:30px 1fr 22px;align-items:center;gap:10px;min-height:28px;padding:0 8px;border-radius:7px;transition:background .3s}
.ex-sc b{font:500 13px/1 var(--sans);color:var(--txt2);font-variant-numeric:tabular-nums;text-align:right}
.ex-sc-c{display:flex;gap:2px}
.ex-sc small{font-size:11.5px;color:var(--gold);text-align:right}
.ex-sc:hover{background:rgba(255,255,255,.05)}
.ex-sc.on{background:rgba(197,169,97,.14)}
.ex-sc.on b{color:var(--gold)}
.ex-scrub[data-f="1"] .ex-c:not([data-h="1"]),.ex-scrub[data-f="2"] .ex-c:not([data-h="2"]),.ex-scrub[data-f="3"] .ex-c:not([data-h="3"]){opacity:.14}

/* Datos de la residencia */
.ex-estado{display:inline-flex!important;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--txt2)}
.ex-estado b{color:#fff;font-weight:500}
.ex-estado .ex-est{width:11px;height:11px}
.ex-fotos{list-style:none;margin:0;padding:0 0 4px;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.ex-fotos::-webkit-scrollbar{display:none}
.ex-fotos li{flex:none;scroll-snap-align:start}
.ex-foto{position:relative;display:block;width:124px;height:88px;padding:0;border:0;border-radius:10px;overflow:hidden;background:var(--night2)}
.ex-foto img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ex-foto--plano img{background:#f4f2ee;object-fit:contain;padding:4px}
.ex-foto span{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:11.5px;text-align:left;color:#fff;background:linear-gradient(180deg,transparent,rgba(14,16,19,.8))}
.ex-foto:hover img{transform:scale(1.05)}
.ex-foto[aria-pressed=true]{box-shadow:0 0 0 2px var(--gold)}
.ex-datos{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ex-datos div{padding:12px 0;border-top:1px solid var(--hair)}
.ex-datos dt{font-size:12px;color:var(--txt3);margin:0 0 4px}
.ex-datos dd{margin:0;font-size:15px}

/* Listas del cuerpo en teléfono */
.ex-solo-movil{display:none}
.ex-alz,.ex-filas{list-style:none;margin:0;padding:0}
.ex-alz a{display:grid;grid-template-columns:30px 1fr 52px;gap:10px;align-items:center;min-height:34px;padding:0 4px;border-bottom:1px solid rgba(255,255,255,.05)}
.ex-alz b{font:500 13px/1 var(--sans);color:var(--txt2);text-align:right}
.ex-alz span{display:flex;gap:2px}
.ex-alz small{font-size:11.5px;color:var(--gold);text-align:right}
.ex-fila{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;min-height:48px;padding:0 2px;border-bottom:1px solid var(--hair);font-size:14px;transition:opacity .3s}
.ex-fila b{font-weight:500;font-variant-numeric:tabular-nums}
.ex-fila span{color:var(--txt2)}
.ex-fila-e{display:flex;align-items:center;gap:7px;font-size:12.5px}
.ex-fila.apagada{opacity:.3}

/* ---------- Teléfono: hoja inferior con asa y dos alturas ---------- */
@media (max-width:767px){
  .ex-top{height:56px;padding:0 10px;gap:8px;background:var(--night);border-bottom:1px solid rgba(255,255,255,.06)}
  .ex-redondo{width:40px;height:40px;background:transparent;border-color:rgba(255,255,255,.14)}
  .ex-pasos{max-width:none;flex:1}
  .ex-pasos ol{font-size:12.5px}
  .ex-pasos li+li::before{width:10px;margin:0 7px}
  .ex--n3 .ex-pasos li:first-child,.ex--n3 .ex-pasos li:nth-child(2)::before{display:none}
  .ex-top .ex-atras:not([hidden])+.ex-pasos{margin-left:2px}
  .ex-top .ex-atras[hidden]+.ex-pasos{padding-left:8px}

  .ex-stage{top:56px;left:0;bottom:var(--peek,42%);transition:bottom .45s var(--ease)}
  .ex--arrastra .ex-stage{transition:none}
  .ex-panel{top:auto;right:0;width:auto;height:var(--full,58%);gap:12px;padding:0 16px max(12px,env(safe-area-inset-bottom));background:var(--hoja);border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:20px 20px 0 0;box-shadow:0 -20px 50px -20px rgba(0,0,0,.6);
    transform:translateY(calc(var(--full,58%) - var(--peek,42%)));transition:transform .45s var(--ease),height .45s var(--ease)}
  .ex--abierta .ex-panel{transform:none}
  .ex--arrastra .ex-panel{transition:none}
  .ex-asa{display:block;flex:none;width:100%;height:24px;margin:0 0 -6px;padding:0;border:0;background:none;touch-action:none;cursor:grab}
  .ex-asa i{display:block;width:40px;height:4px;margin:10px auto 0;border-radius:4px;background:rgba(255,255,255,.28)}
  .ex--sin-cuerpo .ex-asa{visibility:hidden;height:14px}
  .ex-p-head{touch-action:pan-x}
  .ex-p-body{flex:1 1 auto}
  .ex:not(.ex--abierta) .ex-p-body{overflow:hidden}
  .ex-solo-movil{display:block}
  .ex-in>*+*{margin-top:10px}
  .ex-h{font-size:30px}
  .ex-h--cab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ex-h--num{font-size:34px}
  .ex-linea{font-size:13.5px}
  .ex-p-head .ex-leyenda{display:none}
  .ex-acc{gap:6px 18px}
  .ex-prim{flex:1 1 auto;min-height:50px}
  .ex-acc .trazo{min-height:44px}
  .ex-tab{min-height:46px;padding-top:12px;font-size:13.5px}
  .ex-foto{width:112px;height:76px}

  /* Riel horizontal: se desliza con el dedo */
  .ex-scrub{flex:none;border-top:0;padding-top:0;gap:0}
  .ex-scrub-t{display:none}
  .ex-scrub-l{flex-direction:row;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:4px;padding:2px 0 4px;scroll-snap-type:x proximity;scrollbar-width:none;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding:0 40%}
  .ex-scrub-l::-webkit-scrollbar{display:none}
  .ex-scrub-l>:first-child{margin-bottom:0}
  .ex-sc{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:46px;height:50px;padding:0 6px;border-radius:12px;border:1px solid transparent}
  .ex-sc b{font-size:16px;font-weight:400;text-align:center;color:var(--txt2)}
  .ex-sc-c{display:none}
  .ex-sc small{font-size:10.5px;line-height:1;text-align:center;min-height:10px}
  .ex-sc.on{background:#fff;border-color:#fff}
  .ex-sc.on b{color:var(--ink);font-weight:500}
  .ex-sc.on small{color:var(--gold-d)}

  .ex-p3-centro{right:10px;top:52px}
  .ex-p3-rotulo{left:12px;bottom:6px;font-size:10px;display:none} /* 10 nov (UX móvil): tapaba la etiqueta de la residencia de abajo; la hoja ya dice «Planta ilustrativa» */
  .ex-p3-ley{left:10px;right:auto;top:8px;bottom:auto;max-width:calc(100% - 140px);padding:6px 10px 7px;border-radius:10px}
  .ex-p3-ley-t{margin-bottom:4px;font-size:9.5px;letter-spacing:.02em;text-transform:none}
  .ex-p3-ley ul{gap:3px 10px}
  .ex-p3-ley li{font-size:11px;gap:5px}
  .ex-p3-norte{height:28px;padding:0 11px;font-size:10px}
  /* en teléfono el cierre está en la cabecera, no sobre la planta: el rótulo va a la esquina, lejos de la leyenda */
  .ex-p3-norte--arriba{top:8px;right:10px}
  .ex-pm-in{height:24px;padding:0 8px}
  .ex-pm b{font-size:12px}
  .ex-pm em{font-size:10.5px}
  .ex-visor figcaption{padding:8px 56px 10px 12px;font-size:12px}
}
@media (min-width:768px){
  .ex-p-head .ex-leyenda{margin-top:18px}
}
@media (min-width:768px) and (max-width:1099px){.ex{--pw:330px}.ex-panel{padding-left:22px;padding-right:22px}}

@media (prefers-reduced-motion:reduce){
  .ex-capa,.ex-plano,.ex-panel,.ex-stage,.ex-p3-img,.ex-pm,.ex-p3-lienzo--suave,.ex-p3-entorno--suave,.ex-p3-entorno img,.ex-visor,.ex-tab::before{transition:none!important}
  .ex-in{animation:none}
  .ex-p3-area.on .ex-p3-halo{animation:none}
}
@media (min-width:768px){
  .ex-fotos{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible;padding:0}
  .ex-foto{width:100%;height:auto;aspect-ratio:4/3}
}

/* Plaza: el componente trae su propio título y lista; el panel se retira */
.ex-stage{transition:left .5s var(--ease),bottom .45s var(--ease)}
@media (min-width:768px){.ex-panel{transition:transform .5s var(--ease),visibility 0s}}
.ex--plaza .ex-stage{left:0;bottom:0}
.ex--plaza .ex-panel{transform:translateX(-102%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
@media (max-width:767px){.ex--plaza .ex-panel{transform:translateY(102%)}}

/* 8 nov: segundo botón (Maqueta 3D junto al Recorrido 360) */
.ex-sec{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid rgba(201,169,106,.7);color:#fff!important;font:500 15px/1 var(--sans);letter-spacing:.01em;transition:background .3s,border-color .3s}
.ex-sec:hover{background:rgba(201,169,106,.14);border-color:var(--gold)}
@media (max-width:767px){.ex-sec{flex:1 1 auto;justify-content:center;min-height:50px}}

/* 9 nov, revisión UX: áreas de toque de 44 px en el teléfono y pestañas que no se salen */
@media (max-width:767px){
  .ex-pm::before{content:'';position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .ex-atras,.ex-cerrar{min-width:44px;min-height:44px}
  .ex-tabs{overflow-x:auto;scrollbar-width:none}.ex-tabs::-webkit-scrollbar{display:none}
  .ex-tab{flex:0 0 auto}
}

/* 10 nov: Sky Lounge y Oratorio arriba de los pisos, y «Selecciona tu piso» visible */
.ex-scrub-t{color:var(--gold);font-weight:500;letter-spacing:.02em}
/* 10 nov: Oratorio y Sky Lounge con el mismo aspecto y alineación que los pisos */
.ex-sc--am b{grid-column:1/3;text-align:left!important;padding-left:13px}
.ex-alz-t{margin:0 0 6px;font-size:12px;font-weight:500;color:var(--gold)}
.ex-alz-am b{grid-column:1/3;text-align:left!important;padding-left:13px}
.ex-corona{display:grid;gap:10px}
.ex-corona img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
@media (max-width:767px){
  .ex-scrub-t{display:block;margin:0 0 6px;font-size:11.5px}
  .ex-sc--am{min-width:auto;padding:0 12px}
  .ex-sc--am b{grid-column:auto;padding-left:0;font-size:14px!important}
}
/* 10 nov: el regreso lleva texto, no solo la flecha */
.ex-atras{width:auto!important;padding:0 16px 0 14px;border-radius:999px!important;display:inline-flex!important;align-items:center;gap:9px;background:rgba(20,23,27,.82)!important}
.ex-atras .ex-chev{transform:translateX(1px) rotate(45deg)}
.ex-atras-t{font:500 13px/1 var(--sans);letter-spacing:.02em}
.ex-atras:hover{background:rgba(197,169,97,.92)!important}
.ex-atras[hidden]{display:none!important}
@media (max-width:767px){.ex-atras{padding:0 12px 0 11px;gap:7px}.ex-atras-t{font-size:12.5px}.ex-pasos li:not(:last-child){display:none}.ex-pasos li:last-child::before{display:none}}

.ex-corona .ex-corona-plano{aspect-ratio:auto;object-fit:contain;background:#fff;padding:6px}
/* 10 nov: planta completa del Sky Lounge en el escenario */
.ex-capa--corona{background:radial-gradient(ellipse at 50% 45%,#2a2f35 0%,#14171b 75%);display:flex;align-items:center;justify-content:center;padding:clamp(12px,2.5vw,36px)}
.ex-capa--corona:not(.on){transform:scale(.97)}
.ex-capa--corona img{display:block;max-width:100%;max-height:100%;object-fit:contain}

/* 10 nov: nombres de las áreas sobre la planta del Sky Lounge; el marco toma el tamaño exacto de la imagen (ajustarCorona) */
.ex-corona-marco{position:relative;flex:none;max-width:100%;max-height:100%}
.ex-corona-marco img{width:100%;height:100%;max-width:none;max-height:none}
.ex-corona-et{position:absolute;inset:0;pointer-events:none}
.ex-corona-et span{position:absolute;transform:translate(-50%,-50%);padding:5px 10px;border-radius:999px;background:rgba(20,23,27,.78);color:#fff;font:500 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 4px 14px -6px rgba(0,0,0,.5)}
@media (max-width:767px){.ex-corona-et span{padding:3px 6px;font-size:8.5px;letter-spacing:.04em}}
.ex-fotos--corona{margin-bottom:12px}

/* 10 nov: planos del Sky Lounge y del Oratorio más grandes, con nombres finos que no tapan el mobiliario;
   en el Sky Lounge los nombres son botones que acercan el plano a la zona */
.ex-capa--corona{overflow:hidden;padding:clamp(8px,1.6vw,24px)}
.ex-corona-marco--anima{transition:transform .7s var(--ease)}
.ex-corona-et .ex-et{position:absolute;transform:translate(-50%,-50%) scale(calc(1 / var(--esc, 1)));padding:4px 11px 5px;border:1px solid rgba(197,169,97,.55);border-radius:999px;background:rgba(18,21,25,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#f4efe6;font:500 12.5px/1.1 'Brooklyn',Georgia,serif;letter-spacing:.06em;text-transform:none;white-space:nowrap;box-shadow:none}
.ex-corona-et .ex-et--zona{pointer-events:auto;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.ex-corona-et .ex-et--zona:hover,.ex-corona-et .ex-et--zona.on{background:var(--gold);border-color:var(--gold);color:#17191c}
.ex-zonas-t{margin:4px 0 8px;font-size:12px;font-weight:500;color:var(--gold)}
.ex-zonas{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ex-zona{min-height:34px;padding:0 13px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:transparent;color:#fff;font:500 12.5px/1 var(--sans);cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.ex-zona:hover,.ex-zona.on{background:var(--gold);border-color:var(--gold);color:#17191c}
@media (max-width:767px){.ex-corona-et .ex-et{padding:2px 7px 3px;font-size:9.5px;letter-spacing:.03em}}

/* 10 nov: la lista de pisos ya viene de arriba hacia abajo en el HTML (Oratorio, Sky Lounge, 27...); sin invertir */
.ex-scrub-l{flex-direction:column}
.ex-scrub-l>:first-child{margin-bottom:0}
@media (max-width:767px){.ex-scrub-l{flex-direction:row}}

/* 10 nov: etiquetas del Sky Lounge y del Oratorio con Cormorant Garamond, la fuente «elegante» */
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-display:swap;src:url(../media/fuentes/cormorant-garamond-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:600;font-display:swap;src:url(../media/fuentes/cormorant-garamond-600.woff2) format('woff2')}
.ex-corona-et .ex-et{font:600 15.5px/1.05 'Cormorant Garamond',Georgia,serif;letter-spacing:.03em;padding:3px 12px 5px}
@media (max-width:767px){.ex-corona-et .ex-et{font-size:12px;letter-spacing:.02em;padding:2px 8px 3px}}

/* 10 nov: en teléfono las etiquetas de los planos del Sky Lounge y del Oratorio son mínimas
   para no tapar el mobiliario; al acercar una zona crecen con el zoom (la escala ya compensa con --esc) */
@media (max-width:767px){
  .ex-corona-et .ex-et{font-size:8.5px;line-height:1;letter-spacing:.01em;padding:1px 5px 2px;border-width:.5px;background:rgba(18,21,25,.62);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (min-width:768px) and (max-width:1199px){.ex-corona-et .ex-et{font-size:12px;padding:2px 9px 3px}}

/* 10 nov: zoom moderado en las plantas */
.ex-zoom{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.ex-zoom--centro{display:flex;align-items:center;justify-content:center}
.ex-capa--plano,.ex-capa--corona{touch-action:pan-x pan-y}
.ex-capa.ex-zoom-on{touch-action:none;cursor:grab}
.ex-capa.ex-zoom-on:active{cursor:grabbing}
.ex-zoomctl{position:absolute;z-index:6;right:clamp(14px,2vw,28px);bottom:clamp(18px,3vw,32px);display:flex;flex-direction:column;gap:6px}
.ex-zoomctl[hidden]{display:none}
.ex-zoomctl button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(18,21,25,.72);color:#fff;font:400 22px/1 var(--sans);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .25s,border-color .25s,color .25s}
.ex-zoomctl button:hover{background:var(--gold);border-color:var(--gold);color:#17191c}
@media (max-width:767px){.ex-zoomctl{top:74px;bottom:auto;right:12px}.ex-zoomctl button{width:36px;height:36px;font-size:20px}}

/* 10 nov */
@media (min-width:768px){
  /* Sky Lounge y Oratorio: la lista de pisos no se aplasta por las fotos; las fotos se desplazan en su propio espacio */
  .ex[data-capa="corona"] .ex-scrub{flex:0 0 auto;max-height:34%;min-height:132px}
  .ex[data-capa="corona"] .ex-scrub-l{flex:1 1 auto;min-height:0}
  .ex[data-capa="corona"] .ex-p-body{flex:1 1 auto;min-height:0;overflow-y:auto}
}
@media (min-width:768px) and (max-width:1199px){
  /* pestañas: que entren las cuatro (Parque Celeste no se corta) */
  .ex-tab{flex:1 1 auto;padding-right:10px;font-size:13px}
  .ex-tab:last-child{padding-right:0}
  /* ruta: sin «Conjunto» cuando hay tres pasos, y nunca más ancha que el panel */
  .ex-pasos{max-width:calc(var(--pw) - 150px)}
  .ex-pasos li:first-child:not(:last-child):not(:nth-last-child(2)),.ex-pasos li:nth-child(2):not(:last-child)::before{display:none}
}

/* 11 nov (auditoría móvil del explorador) */
.ex-corona-et .ex-et--zona::before{content:'';position:absolute;inset:-15px -8px}            /* toque de 44 px en las zonas */
.ex-cita{width:100%;justify-content:center}
@media (max-width:767px){
  .ex-alz a{min-height:44px}                                                                   /* filas de pisos tocables */
  .ex-pm::before{height:36px}                                                                  /* menos solape entre residencias vecinas */
  .ex--abierta .ex-alz-t{display:none}                                                         /* «Selecciona tu piso» no se repite con la hoja abierta */
}
/* 11 nov (revisión de botones): zoom y chips de zonas a 44 px en teléfono */
@media (max-width:767px){.ex-zoomctl button{width:44px;height:44px}.ex-zona{min-height:44px;padding:0 15px}}

/* 11 nov: Sky Lounge y Oratorio sobre el entorno de su torre, desenfocado, como las plantas de piso */
.ex-capa--corona{background:radial-gradient(ellipse at 50% 50%,rgba(20,23,27,.15) 0%,rgba(20,23,27,.55) 80%),var(--entorno,none) center/cover no-repeat,#14171b}
/* 11 nov: el render de la torre se funde con el entorno (sin bordes duros abajo ni a los lados) */
.ex-capa--corona [data-corona-img]{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 98%),linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 98%),linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}