/* Extiende el Liquid Glass ya publicado en experiencia-live/legal-glass.css.
   El desenfoque vive en las ventanas; el video y el fondo conservan su imagen. */
.company-entry{min-width:145px;min-height:58px;padding:12px 18px;gap:13px;border-radius:14px}
.company-entry .company-logo{display:block;width:108px;height:28px;object-fit:contain}
.company-entry[data-panel="hostess"] .company-logo{width:115px;height:37px}
.company-entry .building-arrow{color:#3d434e}
.company-entry:hover,.company-entry:focus-visible{background:rgba(232,234,237,.94)}
.company-entry:after{height:24px}.company-entry:before{top:calc(100% + 23px)}
.brain.hl-glass{border-radius:999px;color:#1A1D24}.brain.hl-glass:hover{background:rgba(232,234,237,.96)}
.brand{padding:0;cursor:pointer}.brand:focus-visible{outline-color:var(--text)}
.menu-areas{font:inherit;min-height:44px;background:transparent;border:0;color:inherit;padding:0 8px}
#city-menu nav button[data-panel]{width:100%}
.content-dialog{position:fixed;inset:22px 26px 22px auto;margin:0;width:min(750px,calc(100vw - 40px));max-width:none;max-height:calc(100svh - 44px);height:fit-content;padding:0;border-radius:30px;overflow:hidden;color:#1A1D24}
.content-dialog[open]{display:flex;flex-direction:column;animation:panel-arrives .28s ease-out}
.content-dialog::backdrop{background:rgba(26,29,36,.12)}
@keyframes panel-arrives{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.content-header{display:flex;align-items:center;gap:12px;min-height:72px;flex:none;border-bottom:1px solid rgba(26,29,36,.12);padding:12px 76px 12px 30px}
.content-header .hl-cerrar{top:14px;right:16px}
.panel-back{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid rgba(26,29,36,.2);border-radius:50%;background:rgba(232,234,237,.55);font-size:22px;color:#1A1D24}
.panel-breadcrumb{font-size:11px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#3d434e}
.content-scroll{padding:28px 36px 34px;overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;-webkit-overflow-scrolling:touch}
.content-scroll:focus-visible{outline:2px solid #1f6272;outline-offset:-4px}
.panel-hero{margin:0 0 27px}.panel-logo{display:block;width:190px;height:64px;object-fit:contain;object-position:left center;margin-bottom:24px}.panel-logo.logo-hostess{width:194px;height:82px;margin-top:-12px;margin-bottom:12px}
.panel-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:#3d434e}
.panel-hero h2{font:500 clamp(28px,3.5vw,44px)/1.06 Satoshi,Arial,sans-serif;letter-spacing:-.035em;margin:0 0 17px;max-width:580px}
.panel-intro{font-size:17px;line-height:1.65;margin:0;max-width:610px;color:#2A2F3A}
.panel-image{width:100%;height:178px;object-fit:cover;border-radius:17px;margin:24px 0 0;display:block}
.panel-heading{font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;display:flex;gap:12px;align-items:center;color:#3d434e;margin:28px 0 14px}.panel-heading:after{content:'';flex:1;height:1px;background:rgba(26,29,36,.17)}
.service-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:25px 30px}
.service-list li{min-width:0}.service-list .service-number{font-size:10px;letter-spacing:.07em;color:#3d434e;display:block;margin-bottom:7px}.service-list h3{font-size:17px;line-height:1.3;margin:0 0 6px;font-weight:600}.service-list p{font-size:14px;line-height:1.65;margin:0;color:#3d434e}
.panel-note{font-size:12px;line-height:1.6;color:#3d434e;margin:22px 0 0;padding:16px 0 0;border-top:1px solid rgba(26,29,36,.12)}
.related-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.related-links button{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:11px 16px;border:1px solid rgba(26,29,36,.24);border-radius:999px;background:rgba(232,234,237,.45);color:#1A1D24;font:500 13px Satoshi,Arial,sans-serif}.related-links button:hover{background:rgba(232,234,237,.9)}
.area-list{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.area-list button{display:flex;align-items:center;gap:12px;width:100%;min-height:59px;padding:12px 0;background:transparent;border:0;border-bottom:1px solid rgba(26,29,36,.16);color:#1A1D24;font-size:16px;text-align:left}.area-list button>span:first-child{font-size:10px;letter-spacing:.06em;color:#3d434e}.area-list button>span:last-child{margin-left:auto;color:#3d434e}.area-list button:hover{color:#1f6272}
.area-purpose{font-size:12px;letter-spacing:.05em;line-height:1.7;margin:16px 0 0;padding:12px 14px;background:rgba(232,234,237,.45);border-radius:12px;color:#3d434e}
.content-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 26px;border-top:1px solid rgba(26,29,36,.12);flex:none}.content-footer>span{font-size:10px;letter-spacing:.22em;color:#3d434e}.content-footer button{min-height:44px;background:transparent;border:0;color:#1A1D24;font:500 12px Satoshi,Arial,sans-serif}
.content-dialog button:focus-visible{outline:2px solid #1f6272;outline-offset:3px}
@media(max-width:760px){
 .content-dialog{inset:10px 10px auto;margin:0;width:calc(100vw - 20px);max-height:calc(100svh - 20px);border-radius:25px}
 .content-header{padding:10px 66px 10px 20px;min-height:67px}.content-header .hl-cerrar{top:11px;right:11px}
 .content-scroll{padding:24px 23px 27px}.panel-logo{width:165px;height:52px;margin-bottom:20px}.panel-logo.logo-hostess{height:68px}.panel-hero h2{font-size:34px;line-height:1.09}.panel-intro{font-size:15px;line-height:1.65}
 .service-list{grid-template-columns:1fr;gap:22px}.service-list h3{font-size:17px}.service-list p{font-size:14px}.area-list{grid-template-columns:1fr}.area-list button{min-height:55px;font-size:15px}
 .panel-image{height:147px}.related-links button{font-size:12px}.content-footer{padding:10px 20px}.panel-breadcrumb{font-size:10px}
 .company-entry{min-width:145px}.company-entry .company-logo{width:111px}
}
@media(max-height:500px) and (orientation:landscape){
 .company-entry{min-width:106px;min-height:46px;padding:8px 10px;gap:8px}.company-entry .company-logo{width:75px;height:25px}.company-entry[data-panel="hostess"] .company-logo{width:78px;height:30px}
 .content-dialog{inset:8px 16px 8px auto;width:min(650px,calc(100vw - 32px));max-height:calc(100svh - 16px)}.content-header{min-height:58px}.content-header .hl-cerrar{top:7px}.content-scroll{padding:20px 28px}.panel-logo{height:44px;margin-bottom:12px}.panel-hero h2{font-size:28px}.service-list{grid-template-columns:1fr 1fr}.content-footer{padding:4px 24px}
}
@media(prefers-reduced-motion:reduce){.content-dialog[open]{animation:none}.office-hotspot{transition:none}}
@media(prefers-reduced-transparency:reduce){.hl-glass{background:#E8EAED;-webkit-backdrop-filter:none;backdrop-filter:none}}
.rail{z-index:15}body[data-scene="film"] .rail{visibility:hidden}

.company-entry[data-panel="hostess"] .company-logo{width:115px;height:28px;object-fit:cover}.panel-logo.logo-hostess{object-fit:cover;object-position:center;width:194px;height:55px;margin-top:0;margin-bottom:24px}.office-links.company-links img[src*="hostess-lockup"]{object-fit:cover}

/* Reproducción y oficina comparten el mismo video, encuadre y plano interactivo. */
.office-room{position:absolute;inset:0;background:var(--ink);overflow:hidden}
.office-panorama{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;scroll-padding:80px 22px 62px}
.office-panorama::-webkit-scrollbar{display:none}
.office-scene{position:relative;width:min(100vw,calc(100svh * 16 / 9));aspect-ratio:16/9;margin:auto;top:max(0px,calc((100svh - 100vw * 9 / 16) / 2))}
#office-film{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none}
.cinema-top,.cinema-bottom{z-index:3}
.city:not([data-state="office"]) .office-panorama{overflow:hidden}
.city:not([data-state="office"]) .office-hint{display:none}
.office-hotspots{position:absolute;inset:0}
/* Botones del recorrido heredados del papel y la tinta del menú Hostess. */
.office-hotspot{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 8px 10px;border:1px solid #C8C3BA;border-radius:10px;background:#EEE9DF;color:#21252E;box-shadow:inset 0 1px 0 #F6F3ED,0 3px 10px #1A1D2424;font:500 13px/1.25 Satoshi,Arial,sans-serif;transition:background .18s,border-color .18s,box-shadow .18s}
.office-hotspot:hover{background:#F6F3ED;border-color:#3E8EA5;box-shadow:inset 0 1px 0 #F6F3ED,0 4px 14px #1A1D2433}
.office-hotspot:focus-visible{background:#F6F3ED;outline:3px solid #3E8EA5;outline-offset:3px}
.office-label{overflow-wrap:anywhere;text-wrap:balance}.office-number{position:absolute;left:9px;top:7px;font-size:9px;letter-spacing:.09em;color:#515761}.office-arrow{position:absolute;right:8px;top:6px;color:#266575;font-size:12px;line-height:1}
.office-hotspot.engine-hotspot,.office-hotspot.activity-hotspot{justify-content:flex-start;padding:10px 25px 10px 13px;text-align:left;font-size:12px}.engine-hotspot .office-arrow,.activity-hotspot .office-arrow{top:50%;transform:translateY(-50%)}
.office-hotspot.company-hotspot{padding:16px 12px 10px}.office-company-logo{width:100%;height:30px;object-fit:contain}.office-hotspot[data-panel="hostess"] .office-company-logo{object-fit:cover;height:34px}
.cinema .glass{background:#EEE9DF;color:#21252E;border-color:#C8C3BA;font-weight:500;box-shadow:0 3px 12px #1A1D2424}.cinema .glass:hover{background:#F6F3ED;border-color:#98A0AD}.cinema .glass:focus-visible{outline-color:#3E8EA5}
.office-hint{display:none}.city[data-state="office"] .cinema-top{z-index:2}.city[data-state="office"] .cinema-bottom{display:none}
.office-panorama:focus-visible{outline:2px solid var(--text);outline-offset:-4px}
@media(max-width:1333px),(max-height:750px){
 .office-scene{top:0;margin:0;width:max(100vw,calc(max(750px,100svh) * 16 / 9));min-width:1333px}
 .office-hint{display:flex;position:absolute;z-index:2;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);align-items:center;gap:10px;white-space:nowrap;margin:0;padding:10px 14px;border:1px solid #C8C3BA;border-radius:999px;background:#EEE9DF;color:#21252E;font-size:11px;pointer-events:none}
 .city[data-state="office"] .cinema-top{top:16px;left:16px}.city[data-state="office"] .cinema-top .glass{font-size:12px;padding:12px 14px}
}
@media(prefers-reduced-motion:reduce){.office-hotspot{transition:none}}
@media(max-width:760px) and (orientation:portrait){
 body[data-scene="office"]:not(.brain-open) .rail{top:auto;bottom:max(16px,env(safe-area-inset-bottom));padding-top:0}
 .city[data-state="office"] .cinema-top{top:auto;bottom:max(16px,env(safe-area-inset-bottom))}
 .city[data-state="office"] .cinema-top .glass{min-height:48px}
 .city[data-state="office"] .office-hint{bottom:max(80px,calc(env(safe-area-inset-bottom) + 64px))}
}
@media(max-height:500px) and (orientation:landscape){.city[data-state="office"] .office-hint{top:16px;bottom:auto}}

/* Logos nuevos del Grupo (27-sep-2026): Heraldo es la H de acero con filo rojo (2.4:1) y Alero
   es la firma apilada casi cuadrada; cada uno con su caja para que se lea igual que los demás. */
.company-entry[data-panel="heraldo"] .company-logo{width:98px;height:40px}
/* 27-sep-2026 (Olimón): en el letrero de la ciudad y en la oficina, Alero va sin «DESARROLLOS» (casa + ALERO, 1.39:1)
   para que se vea más grande; el letrero conserva su alto de antes (64 + 4 + 4 = 72 px). */
.company-entry[data-panel="inmobiliario"]{padding-top:4px;padding-bottom:4px}
.company-entry[data-panel="inmobiliario"] .company-logo{width:89px;height:64px}
.panel-logo.logo-inmobiliario{width:96px;height:86px}
.office-hotspot[data-panel="heraldo"] .office-company-logo{height:34px}
.office-hotspot[data-panel="inmobiliario"] .office-company-logo{height:44px}
@media(max-width:760px){.panel-logo.logo-inmobiliario{width:80px;height:72px}}
@media(max-height:500px) and (orientation:landscape){
 .company-entry[data-panel="heraldo"] .company-logo{width:76px;height:31px}
 .company-entry[data-panel="inmobiliario"] .company-logo{width:58px;height:42px}
 .panel-logo.logo-inmobiliario{width:62px;height:56px}
}
.related-links .logo-link img{display:block;width:auto;height:22px;max-width:120px;object-fit:contain}.related-links .logo-vertice img{height:17px}.related-links .logo-heraldo img{height:26px}.related-links .logo-inmobiliario img{height:32px}.related-links .logo-link{padding-block:7px}

/* Token Hostess (30-sep-2026): el enlace a /token en el panel de Hostess se ve igual que los botones de al lado. */
.related-links .related-link{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:11px 16px;border:1px solid rgba(26,29,36,.24);border-radius:999px;background:rgba(232,234,237,.45);color:#1A1D24;font:500 13px Satoshi,Arial,sans-serif;text-decoration:none}.related-links .related-link:hover{background:rgba(232,234,237,.9)}