
/* Hotel Las Gaviotas — indicador arquitectónico de ubicación */
.hotel-floor-guide {
  position: fixed;
  z-index: 1250;
  left: 22px;
  top: 50%;
  width: 132px;
  transform: translateY(-50%);
  color: #fff;
  font-family: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.hotel-floor-guide.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.hotel-floor-guide[hidden] { display:none; }
.hotel-floor-guide__panel {
  padding: 13px 12px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  background: rgba(4,31,43,.78);
  box-shadow: 0 18px 48px rgba(0,0,0,.26);
  backdrop-filter: blur(16px);
}
.hotel-floor-guide__heading { margin: 0 0 10px; text-align:center; }
.hotel-floor-guide__heading small { display:block; color:rgba(255,255,255,.58); font-size:.54rem; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
.hotel-floor-guide__heading strong { display:block; margin-top:3px; font-size:.72rem; }
.hotel-building { position:relative; width:78px; margin:0 auto; padding-top:13px; }
.hotel-building::before {
  content:""; position:absolute; left:50%; top:0; width:34px; height:14px;
  border:2px solid rgba(255,255,255,.78); border-bottom:0; border-radius:5px 5px 0 0;
  transform:translateX(-50%); background:rgba(255,255,255,.05);
}
.hotel-building::after {
  content:""; position:absolute; left:50%; bottom:-7px; width:88px; height:7px;
  border:2px solid rgba(255,255,255,.78); border-top:0; transform:translateX(-50%);
}
.hotel-floor {
  position:relative; width:78px; height:31px; display:grid; grid-template-columns:22px 1fr;
  align-items:center; border:2px solid rgba(255,255,255,.74); border-bottom:0;
  background:rgba(255,255,255,.035); color:#fff; cursor:pointer; padding:0;
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.hotel-floor:last-child { border-bottom:2px solid rgba(255,255,255,.74); }
.hotel-floor::after {
  content:""; position:absolute; left:27px; right:6px; top:7px; bottom:7px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.48) 0 7px,transparent 7px 11px);
  opacity:.55;
}
.hotel-floor span { position:relative; z-index:2; font-size:.56rem; font-weight:900; color:rgba(255,255,255,.66); }
.hotel-floor:hover { background:rgba(104,211,232,.18); transform:translateX(3px); }
.hotel-floor.active { background:linear-gradient(90deg,#56c7df,#2b829d); border-color:#d9faff; box-shadow:0 0 0 4px rgba(86,199,223,.16),0 7px 20px rgba(0,0,0,.24); transform:translateX(6px); }
.hotel-floor.active span { color:#06222d; }
.hotel-floor.active::after { opacity:.95; background:repeating-linear-gradient(90deg,rgba(6,34,45,.72) 0 7px,transparent 7px 11px); }
.hotel-floor-guide__location { margin:13px 0 0; min-height:43px; text-align:center; }
.hotel-floor-guide__location strong { display:block; font-size:.66rem; line-height:1.25; }
.hotel-floor-guide__location small { display:block; margin-top:3px; color:rgba(255,255,255,.58); font-size:.55rem; line-height:1.3; }
.hotel-floor-guide__pulse { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:#69e4b9; box-shadow:0 0 0 4px rgba(105,228,185,.12); }
body.dark-mode .hotel-floor-guide__panel { background:rgba(8,24,31,.9); border-color:rgba(176,220,233,.18); }
@media (max-width: 1180px) {
  .hotel-floor-guide { left:10px; width:104px; }
  .hotel-floor-guide__panel { padding:10px 8px; }
  .hotel-floor-guide__heading strong { font-size:.64rem; }
  .hotel-building { transform:scale(.86); margin-top:-5px; margin-bottom:-7px; }
}
@media (max-width: 760px) {
  .hotel-floor-guide { left:10px; top:auto; bottom:86px; width:auto; transform:none; }
  .hotel-floor-guide__panel { display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:15px; }
  .hotel-floor-guide__heading { display:none; }
  .hotel-building { width:43px; margin:0; padding-top:7px; transform:none; }
  .hotel-building::before { width:20px; height:8px; border-width:1px; }
  .hotel-building::after { width:48px; bottom:-4px; height:4px; border-width:1px; }
  .hotel-floor { width:43px; height:12px; grid-template-columns:13px 1fr; border-width:1px; }
  .hotel-floor:last-child { border-bottom-width:1px; }
  .hotel-floor span { font-size:.38rem; }
  .hotel-floor::after { left:16px; right:3px; top:3px; bottom:3px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 4px,transparent 4px 6px); }
  .hotel-floor.active { transform:translateX(3px); box-shadow:0 0 0 2px rgba(86,199,223,.18); }
  .hotel-floor-guide__location { margin:0; min-height:0; width:112px; text-align:left; }
  .hotel-floor-guide__location strong { font-size:.61rem; }
  .hotel-floor-guide__location small { font-size:.5rem; }
}
@media (max-width: 420px) {
  .hotel-floor-guide { bottom:82px; }
  .hotel-floor-guide__location { width:96px; }
}
@media (prefers-reduced-motion:reduce) {
  .hotel-floor,.hotel-floor-guide { transition:none; }
}


/* Coherencia de cinco niveles y etiquetas de galería */
.hotel-building { padding-top: 13px; }
.hotel-floor { height: 28px; }
.hotel-floor[data-floor="0"] { background: rgba(255,255,255,.075); }
.hotel-floor[data-floor="0"]::before {
  content:"LOBBY"; position:absolute; z-index:3; right:5px; color:rgba(255,255,255,.62);
  font-size:.35rem; font-weight:900; letter-spacing:.06em;
}
.floor-guide-focus { outline: 3px solid #65d4e9 !important; outline-offset: 4px; animation: floorGuideFocus 1.8s ease; }
@keyframes floorGuideFocus { 0%,100%{box-shadow:inherit} 50%{box-shadow:0 0 0 10px rgba(101,212,233,.18),0 22px 60px rgba(0,0,0,.18)} }
.gallery-item { position:relative; }
.gallery-item > span { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.gallery-item > span small { display:block; color:rgba(255,255,255,.78); font-size:.62rem; font-weight:650; }
.gallery-floor-badge {
  position:absolute; z-index:4; top:12px; right:12px; padding:7px 10px;
  border:1px solid rgba(255,255,255,.26); border-radius:999px;
  background:rgba(4,31,43,.76); color:#fff; font-size:.62rem; font-weight:850;
  box-shadow:0 8px 22px rgba(0,0,0,.2); backdrop-filter:blur(10px);
}
body.dark-mode .gallery-floor-badge { background:rgba(7,22,29,.9); border-color:rgba(190,230,239,.18); }
@media(max-width:760px){
  .hotel-floor { height:11px; }
  .hotel-floor[data-floor="0"]::before { display:none; }
  .gallery-floor-badge { top:8px; right:8px; padding:5px 8px; font-size:.54rem; }
}
