/* =========================================================
   RECORRIDOS 360° — visor, galería y modal
   ========================================================= */
.visor{
    position: relative; width: 100%; max-width: 100%;
    aspect-ratio: 16 / 9; border-radius: var(--radio-lg); overflow: hidden;
    background: var(--c-oscuro) center / cover no-repeat;
}
@media (max-width: 700px){ .visor{ aspect-ratio: 4 / 5; } }
.visor-abrir{
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .8rem;
    border: 0; cursor: pointer; color: var(--crema);
    background: rgb(30 14 15 / .45); font: 700 var(--t-base)/1.2 var(--f-texto);
    transition: background-color var(--dur);
}
.visor-abrir:hover{ background: rgb(30 14 15 / .3); }
.visor-abrir .icono-360{
    width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid currentColor; font: 600 1.4rem/1 var(--f-titulos);
    animation: girar360 6s linear infinite;
}
@keyframes girar360{ 50%{ transform: rotateY(180deg); } }
.visor-cargando::after{
    content: "Cargando recorrido…"; position: absolute; inset: 0; display: grid; place-items: center;
    color: var(--crema); background: rgb(30 14 15 / .55); font-size: var(--t-sm);
}
.visor-coords{
    position: absolute; left: 1rem; top: 1rem; z-index: 4; display: grid; gap: .4rem;
    background: #FFE066; color: #1a1a1a; font: 12px/1.4 ui-monospace, Menlo, monospace;
    padding: .5rem 1rem; border-radius: 8px; box-shadow: 0 6px 16px rgb(0 0 0 / .3); max-width: calc(100% - 2rem);
}
.visor-coords code{ white-space: pre-wrap; word-break: break-all; }
.visor-coords button{ justify-self: start; font: 700 12px var(--f-texto); padding: .5rem .5rem; border: 0; border-radius: 4px; cursor: pointer; }
.visor .pnlm-container{ background: var(--c-oscuro); }

/* ---------- Demo dentro de una landing ---------- */
.demo-360{ background: var(--c-oscuro); color: var(--c-texto-claro); }
.demo-360 .eyebrow{ color: var(--c-marca-hover); }
.demo-360 .cabecera{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: var(--gap); }
.demo-360 .cabecera .titulo-seccion{ margin: 0; }
.demo-360 .nota{ font-size: var(--t-sm); opacity: .75; margin-top: .8rem; }

/* ---------- Galería de recorridos ---------- */
.rec-hero{ padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.5rem, 1rem + 2vw, 3rem); padding-block: round(clamp(3rem, 2rem + 5vw, 6rem), .5rem) round(clamp(1.5rem, 1rem + 2vw, 3rem), .5rem); }
.rec-hero h1{ font-size: var(--t-3xl); font-weight: 500; max-width: 14ch; margin-bottom: 1rem; }
.rec-galeria{ display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rec-card{
    position: relative; display: block; overflow: hidden; border-radius: var(--radio-lg);
    aspect-ratio: 4 / 3; color: var(--crema); text-decoration: none; isolation: isolate;
}
.rec-card img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.rec-card::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 40%, rgb(30 14 15 / .85)); }
.rec-card:hover img{ transform: scale(1.08) translateX(-2%); }
.rec-txt{ position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; }
.rec-txt h3{ font-size: var(--t-xl); font-weight: 500; }
.rec-txt small{ font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.rec-360{
    position: absolute; top: 1rem; right: 1rem; font: 700 var(--t-xs)/1 var(--f-texto); letter-spacing: .1em;
    background: var(--c-marca); color: var(--crema); padding: .5rem 1rem; border-radius: 99px;
}
.rec-oculto{
    display: inline-block; margin-top: .5rem; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: #FFE066; color: #1a1a1a; padding: .5rem .5rem; border-radius: 4px;
}
.rec-vacio{ border: 1.5px dashed rgb(63 32 33 / .3); border-radius: var(--radio-lg); padding: 3rem 2rem; text-align: center; }
.rec-vacio p{ max-width: 46ch; margin: 0 auto 1.2rem; font-weight: 300; }

/* ---------- Modal de pantalla completa ---------- */
.visor-modal{
    position: fixed; inset: 0; z-index: 80; background: rgb(20 10 10 / .92);
    display: grid; grid-template-rows: auto 1fr; gap: .8rem;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) clamp(.5rem, 2vw, 1.5rem) calc(env(safe-area-inset-bottom, 0px) + 1rem); padding: calc(env(safe-area-inset-top, 0px) + 1rem) round(clamp(.5rem, 2vw, 1.5rem), .5rem) calc(env(safe-area-inset-bottom, 0px) + 1rem);
}
.visor-modal header{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--crema); }
.visor-modal h2{ font-size: var(--t-xl); }
.visor-modal .visor{ aspect-ratio: auto; height: 100%; }
.visor-cerrar{ background: none; border: 1.5px solid currentColor; color: inherit; border-radius: 99px; padding: .5rem 1rem; font: 700 var(--t-sm) var(--f-texto); cursor: pointer; }

/* flecha de salto entre cuartos: mismo chevron del hero (home.css .hero-flecha) */
.visor .salto{
    width: 48px; height: 32px; cursor: pointer; color: #fff;
    display: grid; justify-items: center; align-content: start;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / .55));
}
.visor .salto svg{ width: 40px; height: auto; display: block; animation: flotar-salto 2.4s ease-in-out infinite; transition: scale var(--dur) var(--ease); }
.visor .salto span{
    margin-top: .25rem; white-space: nowrap; pointer-events: none;
    font: 700 var(--t-xs) var(--f-texto); letter-spacing: .06em; text-transform: uppercase;
    opacity: 0; transition: opacity var(--dur);
}
.visor .salto:hover svg{ scale: 1.15; }
.visor .salto:hover span{ opacity: 1; }
@media (hover: none) and (min-width: 701px){ .visor .salto span{ opacity: 1; } }   /* en tablet el nombre siempre se ve; en celular solo el del siguiente paso */
@keyframes flotar-salto{ 50%{ transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce){ .visor .salto svg{ animation: none; } }

.visor-giro{
    position: absolute; top: 1rem; left: 1rem; z-index: 3;
    font: 700 var(--t-xs)/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase;
    padding: .5rem 1rem; border-radius: 99px; border: 0; cursor: pointer;
    background: rgb(30 14 15 / .7); color: var(--crema); backdrop-filter: blur(6px);
}
.visor-giro span{ margin-right: .2rem; }
.visor .pnlm-orientation-button{ display: none !important; }   /* usamos .visor-giro (pide permiso en iPhone) */

/* botones redondos de arriba a la derecha: pantalla completa y menú de cuartos */
.visor-barra{ position: absolute; top: 1rem; right: 1rem; z-index: 3; display: flex; gap: .5rem; }
.visor-btn{
    width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer;
    background: rgb(30 14 15 / .7); color: var(--crema); backdrop-filter: blur(6px);
    transition: background var(--dur);
}
.visor-btn:hover, .visor-btn[aria-expanded="true"]{ background: var(--c-marca); }
.visor-btn svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* menú de cuartos: velo caqui sobre la esfera con las miniaturas */
.visor-menu{
    position: absolute; inset: 0; z-index: 5; overflow-y: auto;
    padding: 1rem; display: flex; flex-direction: column; gap: 1rem;
    background: var(--c-velo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--cafe); animation: aparecer-menu .25s var(--ease);
}
.visor-menu[hidden]{ display: none; }
@keyframes aparecer-menu{ from{ opacity: 0; } }
.visor-menu-cab{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.visor-menu-cab b{ font: 600 var(--t-lg)/1.1 var(--f-titulos); }
.visor-menu-lista{ display: grid; gap: .5rem; grid-template-columns: repeat(var(--cols, 3), minmax(0, 240px)); }   /* --cols lo calcula el JS */
.visor-menu-lista button{
    display: grid; align-content: start; gap: .5rem; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
    color: var(--cafe); font: 700 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .06em; text-transform: uppercase;
}
.visor-menu-lista img{
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio);
    outline: 3px solid transparent; outline-offset: -3px; transition: outline-color var(--dur), scale var(--dur);
}
.visor-menu-lista button:hover img{ scale: 1.03; }
.visor-menu-lista button[aria-current] img{ outline-color: var(--c-marca); }
.visor-menu-lista button[aria-current] span::after{ content: " · aquí estás"; text-transform: none; letter-spacing: 0; font-weight: 400; }
@media (max-width: 700px){
    .visor-menu{ padding: .5rem; }
}

/* pantalla completa en celulares sin la API (iPhone): el visor se fija a toda la pantalla */
.visor.visor-completo{
    position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh;
    max-width: none; aspect-ratio: auto; border-radius: 0;
}
.visor:fullscreen{ border-radius: 0; }
html.visor-completo-abierto, html.visor-completo-abierto body{ overflow: hidden; }
/* recorrido guiado: flecha del siguiente paso */
.visor .salto-guia svg{ width: 48px; color: #fff; }
.visor .salto-guia span{ opacity: 1; }   /* el siguiente paso siempre muestra su nombre */

/* celular: botones pegados a la orilla y sin el título de Pannellum (el cuarto actual se ve en el menú) */
@media (max-width: 700px){
    .visor-giro{ top: .5rem; left: .5rem; }
    .visor-barra{ top: .5rem; right: .5rem; }
    .visor .pnlm-panorama-info{ display: none !important; }
}

/* celular: flechas y nombres más chicos para no tapar la foto; el área táctil se mantiene con padding */
@media (max-width: 700px){
    .visor .salto{ width: 32px; height: 16px; padding: .5rem; box-sizing: content-box; }
    .visor .salto svg{ width: 28px; }
    .visor .salto-guia svg{ width: 32px; }
    .visor .salto polyline{ stroke-width: 3.2; }   /* más grueso para que el chevron chico se siga leyendo */
    .visor .salto span{ font-size: .625rem; letter-spacing: .04em; margin-top: .125rem; }
}