/* Vida Lotus · galería: fotos ampliables, clips y 360 dentro de la página */

/* fotos que se pueden ampliar */
figure.ph.zoomable { cursor: zoom-in; }
figure.ph.zoomable::after { content: "⤢"; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; line-height: 1; color: #fff; background: rgba(20, 48, 31, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: .9; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; pointer-events: none; z-index: 2; }
@media (hover: hover) { figure.ph.zoomable:hover::after { transform: scale(1.18); opacity: 1; } }
figure.ph.zoomable:focus-visible { outline: 3px solid var(--vl-magenta, #D4237A); outline-offset: 2px; }

/* visor de fotos */
.lb { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(8, 20, 14, .94); animation: lbIn .25s ease; touch-action: pan-y; }
.lb[hidden] { display: none; }
.lb > img { max-width: min(96vw, 1500px); max-height: 88dvh; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px -20px #000; user-select: none; -webkit-user-drag: none; }
.lb-x, .lb-nav { position: absolute; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 50%; width: 52px; height: 52px; font-size: 26px; line-height: 1; display: grid; place-items: center; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .2s; }
.lb-x { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.lb-nav { top: 50%; margin-top: -26px; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lb-x:active, .lb-nav:active { transform: scale(.88); }
@media (hover: hover) { .lb-x:hover, .lb-nav:hover { background: rgba(212, 35, 122, .7); } }
.lb-count { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; letter-spacing: .06em; font-size: 14px; background: rgba(0, 0, 0, .35); padding: 4px 12px; border-radius: 99px; }
.lb-open { overflow: hidden; }
@keyframes lbIn { from { opacity: 0; } }

/* 360 dentro de la página */
.panos { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .panos { grid-template-columns: 1fr 1fr; gap: 24px; } }
.panos .pano-inline { aspect-ratio: 4 / 3; }
.pano-inline { position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 16 / 11; background: #14301F; box-shadow: 0 22px 40px -26px rgba(20, 48, 31, .7); isolation: isolate; }
.pano-inline .pano-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: opacity .6s; }
.pano-inline.ready .pano-thumb { opacity: 0; pointer-events: none; }
.pano-inline .pano-stage { position: absolute; inset: 0; z-index: 1; }
.pano-inline .pnlm-container { background: transparent; }
.pano-badge360 { position: absolute; top: 12px; right: 12px; z-index: 3; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #14301F; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .5); animation: spin360 9s linear infinite; pointer-events: none; }
@keyframes spin360 { 0%, 85% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.pano-cap { position: absolute; left: 12px; right: 76px; bottom: 12px; z-index: 3; display: grid; gap: 2px; padding: 8px 12px; border-radius: 14px; color: #fff; background: linear-gradient(90deg, rgba(20, 48, 31, .78), rgba(20, 48, 31, .35)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); pointer-events: none; }
.pano-cap strong { font-size: 16px; line-height: 1.15; }
.pano-cap em { font-style: normal; font-size: 12.5px; opacity: .85; }
.pano-tabs { position: absolute; top: 12px; left: 12px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; max-width: calc(100% - 84px); }
.pano-tabs button { border: 0; cursor: pointer; min-height: 38px; padding: 0 14px; border-radius: 99px; font: inherit; font-weight: 700; font-size: 13.5px; color: #fff; background: rgba(20, 48, 31, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background .2s; }
.pano-tabs button[aria-pressed="true"] { background: #D4237A; }
.pano-tabs button:active { transform: scale(.92); }
.pano-guard { position: absolute; inset: 0; z-index: 5; border: 0; cursor: pointer; background: transparent; display: grid; place-items: center; }
.pano-guard span { padding: 10px 18px; border-radius: 99px; font-weight: 700; font-size: 14px; color: #fff; background: rgba(20, 48, 31, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pano-inline .pnlm-controls-container { z-index: 6; }

/* rótulos del 360 en una barra sobre la imagen, no encima: la vista queda libre */
.pano-card { display: grid; gap: 10px; min-width: 0; }
.pano-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pano-bar .pano-cap { position: static; flex: 1 1 160px; min-width: 0; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--forest, #1F3D2E); }
.pano-bar .pano-cap em { opacity: .75; font-size: 13.5px; }
.pano-bar .pano-badge360 { position: static; flex: none; width: 44px; height: 44px; font-size: 13px; background: #fff; border: 1.5px solid rgba(31, 61, 46, .12); box-shadow: 0 6px 14px -8px rgba(20, 48, 31, .5); }
.pano-bar .pano-tabs { position: static; flex: 1 0 100%; order: 3; max-width: none; }
.pano-hint { display: none; padding: 6px 12px; border-radius: 99px; font-weight: 700; font-size: 13px; color: #fff; background: rgba(20, 48, 31, .8); }
@media (hover: none) { .pano-hint { display: inline-block; } }
.pano-guard span { display: none; }   /* el aviso "Toca y arrastra" ya está en la barra; el toque sobre la imagen sigue activándola */

/* clips de video */
video.clip { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; background: #14301F; box-shadow: 0 18px 34px -24px rgba(20, 48, 31, .7); }

/* las tres Queen */
.room-extra { display: grid; gap: 12px; margin-top: 16px; }
.room-units { display: grid; gap: 18px; margin-top: 20px; }
.unit { display: grid; gap: 10px; padding: 14px; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(251, 227, 239, .55)); border: 1.5px solid rgba(31, 61, 46, .1); }
.unit h5 { margin: 0; font-family: var(--f-display, serif); font-size: 22px; color: var(--forest, #1F3D2E); }
.unit-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.unit-photos .ph { border-radius: 14px; overflow: hidden; }
@media (min-width: 900px) { .unit { grid-template-columns: 1fr 1fr; align-items: start; } .unit h5 { grid-column: 1 / -1; } .unit .pano-card { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { .pano-badge360, .lb { animation: none; } }