/* Lagunitas Rancho States · Plano maestro, Ubicación y marca del cliente (solo en el 360 del subdominio) */
.info-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.info-btns .panel__head { justify-content: center; padding: 11px 8px; gap: 6px; }
.info-btns .panel__head .mono { font-size: .6rem; letter-spacing: .05em; white-space: nowrap; }

.info-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 22px; background: rgba(4,6,10,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: info-in .3s var(--ease) both; }
.info-modal[hidden] { display: none; }
@keyframes info-in { from { opacity: 0; } to { opacity: 1; } }
.info-box { position: relative; display: flex; flex-direction: column; width: min(1080px, 100%); height: min(760px, 100%); border-radius: 20px; overflow: hidden; background: rgba(9,12,18,.94); border: 1px solid rgba(99,179,255,.4); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.info-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--linea); flex: none; }
.info-head h2 { margin: 0; font: 600 1.15rem/1.2 "Sora", sans-serif; letter-spacing: -.01em; }
.info-head .mono { color: var(--senal); }
.info-head .info-acc { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.info-head .btn { padding: 7px 11px; font-size: .8rem; }
.info-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--linea); background: rgba(255,255,255,.06); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.info-x:hover { border-color: var(--senal); }

/* Plano maestro */
.plano-wrap { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.plano-vista { position: relative; flex: 1; min-height: 0; overflow: auto; background: #fff; cursor: grab; touch-action: none; overscroll-behavior: contain; }
.plano-vista.is-drag { cursor: grabbing; }
.plano-vista img { display: block; margin: 0 auto; max-width: none; user-select: none; -webkit-user-drag: none; }
.plano-carga { position: absolute; inset: 0; display: grid; place-items: center; color: #07090D; }
.plano-tip { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 99px; background: rgba(7,9,13,.78); color: #fff; pointer-events: none; width: max-content; max-width: calc(100% - 28px); text-align: center; line-height: 1.5; transition: opacity .6s; }

/* Ubicación */
.ubic { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; }
.ubic iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--grafito); }
.ubic__txt { overflow: auto; padding: 26px 28px; scrollbar-width: thin; }
.ubic__txt h3 { margin: 0 0 4px; font: 600 1.35rem/1.15 "Sora", sans-serif; letter-spacing: -.02em; }
.ubic__dir { margin: 0 0 14px; color: var(--senal); font: 600 1rem/1.35 "Sora", sans-serif; }
.ubic__txt p { margin: 0 0 12px; color: #D6DEEA; font-size: .92rem; }
.ubic__tiempos { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.ubic__tiempos li { display: flex; gap: 10px; align-items: baseline; font-size: .9rem; }
.ubic__tiempos b { flex: none; min-width: 78px; font: 600 .95rem "Sora", sans-serif; color: #fff; }
/* un idioma a la vez (idioma.js pone body.lang-en) */
body:not(.lang-en) .ubic__en, body.lang-en .ubic__es { display: none; }
.ubic__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }

/* Botón de idioma (idioma.js): arriba a la derecha en computadora, junto a Plano maestro y Ubicación en teléfono */
.lang-btn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--linea); background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; cursor: pointer; font: 600 .74rem "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; }
.lang-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--senal); stroke-width: 1.8; }
.lang-btn:hover { border-color: var(--senal); }
.lang-btn--fila { display: none; }

/* teléfono (vertical u horizontal): la ventana ocupa toda la pantalla */
/* Marca del cliente: logo arriba y en la carga */
.top .brand[hidden] { display: none; }
.marca-cliente { display: block; padding: 7px 12px; border-radius: 14px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--linea); }
.marca-cliente img { display: block; height: 40px; width: auto; }
.loader--marca { background-position: center; background-size: cover; background-repeat: no-repeat; }   /* la foto la pone info.js */
.loader__logo { width: min(340px, 70vw); height: auto; max-height: 38vh; object-fit: contain; filter: drop-shadow(0 8px 30px rgba(0,0,0,.55)); animation: logo-in 1.1s var(--ease) both; }
.loader--marca p { color: rgba(255,255,255,.75); text-shadow: 0 1px 8px rgba(0,0,0,.8); }
@keyframes logo-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* Fachada del acceso: tarjeta con la foto y ventana */
.fachada-btn { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; width: 100%; height: 86px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--linea); background: var(--grafito) center 40% / cover no-repeat; color: #fff; cursor: pointer; overflow: hidden; text-align: left; transition: border-color .3s, transform .3s var(--ease); }
.fachada-btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,9,13,0) 30%, rgba(7,9,13,.8)); }
.fachada-btn > * { position: relative; }
.fachada-btn .mono { font-size: .6rem; letter-spacing: .05em; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.fachada-btn .ico { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fachada-btn:hover { border-color: var(--senal); transform: translateY(-1px); }
.info-modal--foto .info-box { height: auto; max-height: 100%; width: min(1400px, 100%); }
.fachada-vista { flex: 1; min-height: 0; display: grid; place-items: center; background: #000; }
.fachada-vista img { display: block; max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; }

@media (max-width: 760px), (max-height: 500px) {
  .info-modal { padding: 0; }
  .info-box { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .info-head { padding: 8px 12px 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
}
@media (max-width: 760px) {
  .info-btns .panel__head { padding: 10px 8px; }
  .lang-btn--top { display: none; }
  .lang-btn--fila { display: flex; height: auto; border-radius: 14px; padding: 0 12px; }
  .info-btns.con-idioma { grid-template-columns: 1fr 1fr auto; }
  .info-head .btn--zoom { display: none; }
  .marca-cliente { padding: 6px 9px; border-radius: 12px; }
  .marca-cliente img { height: 30px; }
  .fachada-btn { height: 48px; padding: 8px 12px; align-items: center; }
  .info-modal--foto .info-box { height: 100%; }
  /* la foto es muy ancha: en el teléfono va más alta y se desliza de lado (abre centrada) */
  .fachada-vista { display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; scrollbar-width: none; }
  .fachada-vista img { flex: none; height: min(62vh, 100%); max-height: none; max-width: none; }
  .ubic { grid-template-columns: 1fr; grid-template-rows: 38vh 1fr; }
  .ubic__txt { padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
}