/* STELLA web v2: Plaza de amenidades. Usa los tokens de base.css. */
.plaza{--pz-top:calc(var(--bar-h,64px) + 26px);--pz-g:clamp(16px,2.6vw,36px);
  position:relative;width:100%;height:100%;overflow:hidden;overflow:clip;background:var(--night);color:#fff;font-family:var(--sans);
  -webkit-user-select:none;user-select:none;isolation:isolate}
.plaza button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* Lienzo: imagen + pines, se mueve con transform */
.plaza-vista{position:absolute;inset:0;touch-action:none;cursor:grab;overflow:hidden}
.plaza.arrastrando .plaza-vista{cursor:grabbing}
.plaza-lienzo{position:absolute;left:0;top:0;will-change:transform}
.plaza-lienzo.anima{transition:transform .9s var(--ease)}
.plaza-img{width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.plaza.cargada .plaza-img{opacity:1}

/* Velos de lectura: sin backdrop-filter */
.plaza-velo{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg,rgba(20,23,27,.72) 0,rgba(20,23,27,0) 30%),
    linear-gradient(90deg,rgba(20,23,27,.86) 0,rgba(20,23,27,.62) 18%,rgba(20,23,27,0) 34%),
    linear-gradient(0deg,rgba(20,23,27,.55) 0,rgba(20,23,27,0) 22%)}

/* Pines: texto + filete vertical fino (lenguaje de .giro-pin) */
.plaza-pin{position:absolute;z-index:2;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 12px 0;min-width:48px;white-space:nowrap}
.plaza-pin em{font:500 13px/1 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.5);transition:color .4s}
.plaza-pin i{display:block;width:1px;height:46px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.35));transform-origin:bottom;transition:transform .9s var(--ease),background .4s}
.plaza-pin b{display:block;width:9px;height:9px;margin-top:-4px;margin-bottom:-4px;border-radius:50%;border:1px solid #fff;background:rgba(20,23,27,.35);box-shadow:0 0 0 4px rgba(255,255,255,.12);transition:border-color .4s,background .4s,box-shadow .4s}
.plaza-pin:hover em,.plaza-pin.activa em{color:var(--gold)}
.plaza-pin:hover i,.plaza-pin.activa i{background:linear-gradient(180deg,var(--gold),rgba(197,169,97,.4))}
.plaza-pin.activa b{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 6px rgba(197,169,97,.22)}
.plaza-pin:focus-visible{outline:none}
.plaza-pin:focus-visible em{outline:2px solid var(--gold);outline-offset:6px;border-radius:4px}
.plaza-pin[hidden]{display:none}
/* Entrada única: los filetes bajan a su punto */
.plaza:not(.dentro) .plaza-pin i{transform:scaleY(0)}
.plaza:not(.dentro) .plaza-pin em{opacity:0}
.plaza-pin em{transition:color .4s,opacity .8s var(--ease)}
.plaza-pin:nth-of-type(1) i,.plaza-pin:nth-of-type(1) em{transition-delay:.25s}
.plaza-pin:nth-of-type(2) i,.plaza-pin:nth-of-type(2) em{transition-delay:.4s}
.plaza-pin:nth-of-type(3) i,.plaza-pin:nth-of-type(3) em{transition-delay:.55s}
.plaza.dentro .plaza-pin:hover i,.plaza.dentro .plaza-pin:hover em{transition-delay:0s}
.plaza.con-ficha .plaza-pin:not(.activa){opacity:.55}
.plaza-pin{transition:opacity .5s}

/* Cabecera */
.plaza-cab{position:absolute;z-index:3;left:var(--pz-g);top:var(--pz-top);max-width:min(460px,calc(100% - 2*var(--pz-g)));pointer-events:none}
.plaza-titulo{margin:0 0 10px;font:300 clamp(30px,3.3vw,48px)/1.02 var(--sans);letter-spacing:-.025em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.plaza-titulo em{font-style:normal;color:var(--gold)}
.plaza-nota{margin:0;display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.4;color:rgba(255,255,255,.72)}
.plaza-nota::before{content:"";flex:none;width:22px;height:1px;background:var(--gold)}

/* Riel de amenidades: pestañas con filete superior */
.plaza-riel{position:absolute;z-index:3;left:var(--pz-g);bottom:clamp(28px,5vh,48px);width:250px;display:flex;flex-direction:column;gap:26px;
  max-height:calc(100% - var(--pz-top) - 150px - clamp(28px,5vh,48px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);mask-image:linear-gradient(180deg,transparent 0,#000 22px);padding-top:18px}
.plaza-riel::-webkit-scrollbar{display:none}
.plaza-grupo-t{margin:0 0 4px;font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.5)}
.plaza-riel ul{list-style:none;margin:0;padding:0}
.plaza-item{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:13px 0 8px;text-align:left;color:rgba(255,255,255,.78);font-size:15px;line-height:1.2;transition:color .3s}
.plaza-item::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.22);transition:background .3s}
.plaza-item::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.plaza-item:hover{color:#fff}
.plaza-item:hover::before{background:rgba(255,255,255,.6)}
.plaza-item.activa{color:#fff}
.plaza-item.activa::after{transform:none}
.plaza-item-e{flex:none;font-size:12px;color:var(--gold)}

.plaza-pista{display:none}

/* Ficha de detalle (escritorio: panel lateral dentro del escenario) */
.plaza-ficha{position:absolute;z-index:5;right:var(--pz-g);top:calc(var(--bar-h,64px) + 20px);max-height:calc(100% - var(--bar-h,64px) - 44px);width:min(420px,42vw);
  display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;
  background:var(--night2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  transform:translateX(calc(100% + 60px));visibility:hidden;transition:transform .8s var(--ease),visibility 0s .8s}
.plaza.con-ficha .plaza-ficha{transform:none;visibility:visible;transition:transform .8s var(--ease),visibility 0s}
.plaza-asa{display:none}
.plaza-cerrar{position:absolute;z-index:2;top:22px;right:22px;width:40px;height:40px;display:grid;place-items:center;border-radius:999px;background:rgba(20,23,27,.62)!important;color:#fff;transition:background .3s}
.plaza-cerrar:hover{background:rgba(20,23,27,.9)!important}
.plaza-cerrar svg{width:14px;height:14px}
.plaza-media{position:relative;flex:none;margin:12px 12px 0;aspect-ratio:16/10;border-radius:var(--r-s);overflow:hidden;background:#0f1215;cursor:pointer}
.plaza-m{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.plaza-m.entra{opacity:0;transform:scale(1.03)}
.plaza-segs{display:flex;gap:6px;margin:12px 12px 0}
.plaza-segs[hidden]{display:none}
.plaza-seg{position:relative;flex:1;height:24px}
.plaza-seg::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.25);transition:background .3s,height .3s}
.plaza-seg[aria-current=true]::before{background:var(--gold);height:2px}
.plaza-seg:hover::before{background:rgba(255,255,255,.6)}
.plaza-txt{padding:14px 26px 6px}
.plaza-estado{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12.5px;letter-spacing:.04em;color:var(--gold)}
.plaza-estado::before{content:"";width:6px;height:6px;border-radius:50%;border:1px solid var(--gold)}
.plaza-estado[hidden]{display:none}
.plaza-nombre{margin:0 0 10px;font:300 clamp(28px,2.6vw,36px)/1.05 var(--sans);letter-spacing:-.02em}
.plaza-linea{margin:0;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.74);max-width:42ch}
.plaza-nav{margin-top:14px;display:flex;align-items:stretch;justify-content:space-between;gap:12px;padding:18px 18px 18px;border-top:1px solid rgba(255,255,255,.08)}
.plaza-ant,.plaza-sig{display:flex;align-items:center;gap:10px;min-height:48px;min-width:0;padding:0 8px;border-radius:var(--r-s);text-align:left;flex:0 1 44%;transition:background .3s}
.plaza-sig{text-align:right;justify-content:flex-end}
.plaza-sig span{align-items:flex-end}
.plaza-ant:hover,.plaza-sig:hover{background:rgba(255,255,255,.05)}
.plaza-ant svg,.plaza-sig svg{flex:none;width:15px;height:15px;color:var(--gold);transition:transform .6s var(--ease)}
.plaza-ant:hover svg{transform:translateX(-3px)}
.plaza-sig:hover svg{transform:translateX(3px)}
.plaza-ant span,.plaza-sig span{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto;overflow:hidden}
.plaza-nav small{font-size:11.5px;color:rgba(255,255,255,.5)}
.plaza-nav b{display:block;max-width:100%;font-weight:400;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plaza-cuenta{align-self:center;font-size:12px;color:rgba(255,255,255,.45);white-space:nowrap}
.plaza-nombre:focus{outline:none}

@media (min-width:768px) and (max-width:1099px){
  .plaza-riel{width:210px}
}

/* Móvil vertical: imagen arrastrable, pestañas abajo, ficha como hoja inferior */
@media (max-width:767px){
  .plaza{--pz-top:calc(var(--bar-h,64px) + 12px);--pz-g:16px}
  .plaza-velo{background:
    linear-gradient(180deg,rgba(20,23,27,.8) 0,rgba(20,23,27,0) 26%),
    linear-gradient(0deg,rgba(20,23,27,.92) 0,rgba(20,23,27,.6) 16%,rgba(20,23,27,0) 34%)}
  .plaza-titulo{font-size:28px;margin-bottom:8px}
  .plaza-nota{font-size:12px}
  .plaza-nota::before{width:16px}

  .plaza-img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
  .plaza-pin{padding:10px 14px 0;gap:6px}
  .plaza-pin em{font-size:11.5px;letter-spacing:.12em}
  .plaza-pin i{height:34px}

  .plaza-riel{left:0;right:0;bottom:0;width:auto;flex-direction:row;gap:28px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    padding:0 16px calc(14px + env(safe-area-inset-bottom,0px));scroll-padding-inline:16px}
  .plaza-riel::-webkit-scrollbar{display:none}
  .plaza-riel{max-height:none;overflow-y:hidden;-webkit-mask-image:none;mask-image:none;padding-top:0}
  .plaza-grupo{flex:none}
  .plaza-grupo-t{font-size:11px;margin-bottom:2px}
  .plaza-riel ul{display:flex;gap:20px}
  .plaza-item{width:auto;white-space:nowrap;font-size:14px;gap:8px;padding:12px 0 8px}
  .plaza-item-e{font-size:11px}

  .plaza-pista{display:flex;position:absolute;z-index:3;left:50%;bottom:104px;transform:translateX(-50%);align-items:center;gap:10px;margin:0;font-size:12px;color:rgba(255,255,255,.8);white-space:nowrap;pointer-events:none;transition:opacity .6s}
  .plaza-pista i{width:26px;height:1px;background:var(--gold);animation:pz-pista 2.4s var(--ease) infinite}
  .plaza-pista.fuera{opacity:0}

  .plaza-ficha{left:0;right:0;top:auto;bottom:0;width:auto;max-height:72%;border-radius:var(--r) var(--r) 0 0;border-width:1px 0 0;
    transform:translateY(102%);padding-bottom:env(safe-area-inset-bottom,0px)}
  .plaza-asa{display:block;flex:none;width:38px;height:4px;margin:8px auto 0;border-radius:999px;background:rgba(255,255,255,.22)}
  .plaza-media{margin:8px 10px 0;aspect-ratio:16/9}
  .plaza-cerrar{top:26px;right:20px}
  .plaza-segs{margin:10px 10px 0}
  .plaza-txt{padding:10px 18px 4px}
  .plaza-nombre{font-size:26px;margin-bottom:6px}
  .plaza-linea{font-size:14.5px}
  .plaza-nav{padding:10px 8px 10px;margin-top:10px}
  .plaza-nav b{font-size:13px}
  .plaza.con-ficha .plaza-riel{visibility:hidden}
}
@keyframes pz-pista{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}

@media (prefers-reduced-motion:reduce){
  .plaza-lienzo.anima,.plaza-ficha,.plaza.con-ficha .plaza-ficha,.plaza-m,.plaza-pin i,.plaza-pin em,.plaza-img,.plaza-item::after{transition:none!important}
  .plaza-pista i{animation:none}
}

/* 9 nov, revisión UX: etiquetas del Parque Celeste sobre pastilla oscura */
.plaza-pin em{background:rgba(14,16,20,.55);padding:6px 10px;border-radius:999px;text-shadow:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* 9 nov: botón para entrar al parque en 360 */
.plaza .plaza-360{margin-top:14px;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--gold)!important;color:#17191c!important;font:500 14px/1 var(--sans);cursor:pointer;pointer-events:auto}
.plaza .plaza-360:hover{background:#d3b873!important}
.plaza .plaza-360-m{display:none}
.plaza .plaza-360-d{position:absolute;z-index:3;right:var(--pz-g);bottom:clamp(28px,5vh,48px);margin:0;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:opacity .4s,visibility .4s}
.plaza.con-ficha .plaza-360-d{opacity:0;visibility:hidden}
@media (max-width:767px){.plaza .plaza-360-d{display:none}.plaza .plaza-360-m{display:inline-flex;margin-top:12px;min-height:40px;padding:0 16px;font-size:13px}}
.plaza-grupo--renta{padding-top:18px;border-top:1px solid rgba(197,169,97,.45)}
@media (max-width:767px){.plaza-grupo--renta{padding-top:0;border-top:0;padding-left:20px;border-left:1px solid rgba(197,169,97,.45)}}
/* 10 nov: en escritorio la lista de áreas pasa a una barra horizontal abajo para no tapar el parque */
@media (min-width:768px){
  .plaza-riel{left:var(--pz-g);right:300px;bottom:clamp(20px,3.5vh,36px);width:auto;max-height:none;flex-direction:row;align-items:flex-end;gap:28px;
    overflow-x:auto;overflow-y:hidden;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 40px),transparent 100%);padding:10px 40px 4px 0}
  .plaza-grupo{flex:none}
  .plaza-riel ul{display:flex;gap:20px}
  .plaza-item{width:auto;white-space:nowrap;font-size:14px;gap:8px;padding:12px 0 8px}
  .plaza-grupo--renta{padding-top:0;border-top:0;padding-left:22px;border-left:1px solid rgba(197,169,97,.45)}
  .plaza-velo{background:linear-gradient(180deg,rgba(20,23,27,.85) 0,rgba(20,23,27,.55) 14%,rgba(20,23,27,0) 30%),linear-gradient(0deg,rgba(20,23,27,.85) 0,rgba(20,23,27,0) 24%)!important}
}

/* 10 nov: pin sin rótulo cuando chocaría con otro (lo decide bordes() en plaza.js) */
.plaza-pin.sin-rotulo em{visibility:hidden}
.plaza-pin.sin-rotulo i{height:22px}
/* 10 nov: en el teléfono el parque se ve solo con los puntos; el nombre aparece únicamente en el área tocada */
@media (max-width:767px){
  .plaza-pin em{visibility:hidden}
  .plaza-pin.activa em{visibility:visible}
  .plaza-pin i{height:14px}
  .plaza-pin.activa i{height:34px}
  .plaza-pin b{width:12px;height:12px;margin-top:-6px;margin-bottom:-6px}
}