/* =====================================================================
   css/aereo.css — VISOR AÉREO de Descubre Bareyo (panorámicas 360° de dron)
   Se carga DESPUÉS de kit/ui-golf360/puente-bareyo.css y va en SHELL_ASSETS.

   Qué cubre
     1. #aereoVisor: velo, hoja y la esfera (Photo Sphere Viewer, sin su barra ni su cargador)
     2. marco del visor: cabecera, cierre, ‹ 3 / 42 ›, brújula, «Nombres», pantalla completa
     3. mini-mapa con cono de visión (plegado · mini · amplio)
     4. lo que va SOBRE la foto: rótulos de lugares y flechas a las vecinas
     5. retoques de la capa del mapa: zona en las tarjetas de la galería, pines que se apartan
        (y encogen de lejos), título en la tarjeta al pasar el ratón, la galería que se aparta
        cuando hay un panel del dock abierto y su versión de móvil apaisado (solo la pastilla)
     6. tótem (html[data-kiosco="1"]): controles de 72 px y texto ×1,35
   El visor va a sangre en móvil vertical y apaisado («(max-width: 700px), (max-height: 480px)»,
   la misma condición que MQ_MOVIL en js/aereo.js) y ahí salva la zona segura (--av-seg-*).

   Lenguaje (el del puente): píldora para controles, tarjeta de 18 px para información, hoja de
   22 px; superficies blancas opacas con sombra teñida de verde; sin cristal; el azul
   --g3-acento es el color de lo aéreo (activo, flechas, cono). Las medidas salen de tres
   variables (--av-ctl, --av-borde, --av-esc) para que el tótem sea UNA regla y no cuarenta.
   Selectores nuevos (.aereo-…): no pisan nada del puente ni necesitan su prefijo.
   ===================================================================== */

/* ── 1. Velo, hoja y esfera ────────────────────────────────────────────── */
.aereo-visor {
    --av-azul: var(--g3-acento, #226EA3);
    --av-azul-oscuro: #1A5F8E;
    --av-verde: var(--g3-marca, #416930);
    --av-texto: var(--g3-texto, #16210F);
    --av-suave: var(--g3-texto-suave, #55634D);
    --av-tinte: var(--g3-tinte, #EBF3E8);
    --av-tinte-hover: var(--g3-tinte-hover, #E0ECDB);
    --av-sombra: var(--g3-sombra-compacta, 0 3px 12px rgba(34,56,25,.2), 0 1px 3px rgba(34,56,25,.12));
    --av-sombra-foto: 0 3px 12px rgba(34,56,25,.34), 0 1px 3px rgba(34,56,25,.22);   /* sobre la fotografía hace falta algo más de cuerpo */
    --av-fuente: var(--g3-fuente-texto, 'DM Sans', system-ui, sans-serif);
    --av-ctl: 44px;        /* lado de los controles (toque mínimo) */
    --av-borde: 14px;      /* del marco al borde de la hoja */
    --av-esc: 1;           /* escala del texto */
    --av-mini: 170px;      /* lado del mini-mapa */
    /* Zona segura (muesca, isla, barra de gestos): solo cuenta cuando el visor va a sangre
       (bloque móvil, más abajo); con la hoja centrada ya la salva el relleno del velo. */
    --av-seg-t: 0px; --av-seg-r: 0px; --av-seg-b: 0px; --av-seg-l: 0px;

    position: fixed; inset: 0; z-index: 65;            /* escala de la app: 50 ficha · 60 evento · 65 visor · 120 aviso */
    display: none;
    padding: 24px max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px));
    background: var(--g3-velo, rgba(34,56,25,.42));
    font-family: var(--av-fuente); color: var(--av-texto);
    -webkit-tap-highlight-color: transparent;
}
.aereo-visor.active { display: flex; }
#aereoVisor [hidden] { display: none; }

.aereo-visor-hoja {
    position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; isolation: isolate;
    border-radius: var(--g3-radio-hoja, 22px);
    background: #1b2b14;
    box-shadow: var(--g3-sombra-hoja-centrada, 0 10px 30px rgba(34,56,25,.28), 0 2px 6px rgba(34,56,25,.16));
}
.aereo-visor-hoja:fullscreen { border-radius: 0; }
.aereo-visor-hoja:-webkit-full-screen { border-radius: 0; }

/* La esfera: contexto de apilamiento propio (PSV usa z-index hasta 90 por dentro) y sin gestos del navegador */
.aereo-visor-esfera { position: absolute; inset: 0; z-index: 0; touch-action: none; }
.aereo-visor .psv-container { background: #1b2b14; cursor: grab; }
.aereo-visor .psv-container:active { cursor: grabbing; }
.aereo-visor .psv-loader-container,
.aereo-visor .psv-navbar { display: none; }           /* el marco y el indicador de carga son los nuestros */

/* Anticipo: la miniatura plana de la vista de entrada mientras llega la primera imagen.
   Con fondo propio: si tampoco carga (sin conexión), tapa igualmente la esfera de la toma anterior. */
.aereo-visor-previa {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
    background: #1b2b14;
    opacity: 0; pointer-events: none; transition: opacity .2s linear;
}
.aereo-visor-previa.is-visible { opacity: 1; }
.aereo-visor-previa:not([src]) { visibility: hidden; }

/* Indicador de carga: el filo «cielo → tierra» del isotipo, recorriendo el borde superior */
.aereo-visor-carga {
    position: absolute; z-index: 9; top: var(--av-seg-t); left: 0; right: 0; height: 4px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, #5CA6CC 0%, #5A9785 25%, #54893E 50%, #5A9785 75%, #5CA6CC 100%) 0 0 / 200% 100%;
}
.aereo-visor-hoja[data-carga="1"] .aereo-visor-carga { opacity: 1; animation: bz-aereo-carga 1.1s linear infinite; }
@keyframes bz-aereo-carga { to { background-position: -200% 0; } }

/* ── 2. Marco ──────────────────────────────────────────────────────────── */
/* Cabecera: tarjeta blanca (nunca texto suelto sobre la foto). No estorba al arrastre. */
.aereo-visor-cab {
    position: absolute; z-index: 5; top: calc(var(--av-borde) + var(--av-seg-t)); left: calc(var(--av-borde) + var(--av-seg-l));
    max-width: min(calc(440px * var(--av-esc)), calc(100% - var(--av-ctl) - var(--av-borde) * 3 - var(--av-seg-l) - var(--av-seg-r)));
    padding: calc(10px * var(--av-esc)) calc(15px * var(--av-esc)) calc(11px * var(--av-esc));
    border-radius: var(--g3-radio-tarjeta, 18px);
    background: #fff; box-shadow: var(--av-sombra-foto);
    pointer-events: none;
}
.aereo-visor-cab .f360-viewer-tipo { margin: 0; vertical-align: top; }
.aereo-visor-titulo {
    margin: calc(7px * var(--av-esc)) 0 0;
    font: 700 calc(19px * var(--av-esc))/1.18 var(--g3-fuente-titulo, 'Signika', 'DM Sans', system-ui, sans-serif);
    letter-spacing: -0.005em; color: var(--av-texto);
    overflow-wrap: anywhere;
}
.aereo-visor-meta {
    margin: calc(3px * var(--av-esc)) 0 0;
    font: 500 calc(12.5px * var(--av-esc))/1.35 var(--av-fuente); color: var(--av-suave);
    font-variant-numeric: tabular-nums;
}

/* Control redondo: blanco opaco, icono de trazo; encendido = relleno azul con blanco */
.aereo-ctl {
    box-sizing: border-box; flex: 0 0 auto;
    width: var(--av-ctl); height: var(--av-ctl); min-width: var(--av-ctl); padding: 0; border: 0;
    border-radius: var(--g3-radio-pildora, 99px);
    display: grid; place-items: center;
    background: #fff; color: var(--av-verde); box-shadow: var(--av-sombra-foto);
    font-family: var(--av-fuente); cursor: pointer; touch-action: manipulation;
}
.aereo-ctl svg { width: calc(var(--av-ctl) * .47); height: calc(var(--av-ctl) * .47); }
.aereo-ctl:hover { background: var(--av-tinte-hover); }
.aereo-ctl[aria-pressed="true"] { background: var(--av-azul); color: #fff; }
.aereo-ctl[aria-pressed="true"]:hover { background: var(--av-azul-oscuro); }
/* Foco visible sobre cualquier fotografía: aro azul entre dos blancos */
.aereo-visor .aereo-ctl:focus-visible,
.aereo-visor .aereo-mini-ampliar:focus-visible {
    outline: 3px solid var(--av-azul); outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 7px #fff;
}

.aereo-visor-cerrar { position: absolute; z-index: 7; top: calc(var(--av-borde) + var(--av-seg-t)); right: calc(var(--av-borde) + var(--av-seg-r)); touch-action: none; }
.aereo-visor-cerrar svg { width: calc(var(--av-ctl) * .41); height: calc(var(--av-ctl) * .41); }

/* ‹ 3 / 42 › — una sola píldora blanca, centrada abajo */
.aereo-visor-nav {
    position: absolute; z-index: 6; left: 0; right: 0; bottom: calc(var(--av-borde) + var(--av-seg-b));
    width: max-content; margin: 0 auto;
    display: flex; align-items: center; gap: 2px; padding: 4px;
    border-radius: var(--g3-radio-pildora, 99px); background: #fff; box-shadow: var(--av-sombra-foto);
}
.aereo-nav-btn { box-shadow: none; background: var(--av-tinte); }
.aereo-visor-pos {
    min-width: calc(66px * var(--av-esc)); padding: 0 calc(6px * var(--av-esc)); text-align: center;
    font: 700 calc(14px * var(--av-esc))/1 var(--av-fuente); color: var(--av-texto);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Brújula · Nombres · pantalla completa */
.aereo-visor-herr {
    position: absolute; z-index: 6; right: calc(var(--av-borde) + var(--av-seg-r)); bottom: calc(var(--av-borde) + 4px + var(--av-seg-b));
    display: flex; align-items: center; gap: 8px;
}
.aereo-brujula { color: var(--av-azul); }
.aereo-brujula-disco { display: block; width: 100%; height: 100%; }
.aereo-brujula .aereo-brujula-disco svg { display: block; width: 100%; height: 100%; font-family: var(--av-fuente); }
.aereo-nombres {
    display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--av-esc));
    width: auto; padding: 0 calc(17px * var(--av-esc)) 0 calc(14px * var(--av-esc));
    font: 700 calc(13.5px * var(--av-esc))/1 var(--av-fuente);
}

/* Aviso de error: tarjeta centrada, con «Reintentar» (primario del kit) cuando reintentar sirve */
.aereo-visor-aviso {
    position: absolute; z-index: 8; left: 0; right: 0; top: 40%;
    width: max-content; max-width: calc(100% - 48px); margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: calc(12px * var(--av-esc));
    padding: calc(16px * var(--av-esc)) calc(20px * var(--av-esc));
    border-radius: var(--g3-radio-tarjeta, 18px); background: #fff; box-shadow: var(--av-sombra-foto);
    text-align: center;
}
.aereo-visor-aviso-txt { margin: 0; font: 600 calc(15px * var(--av-esc))/1.4 var(--av-fuente); color: var(--av-texto); }
.aereo-reintentar {
    box-sizing: border-box; min-height: calc(var(--av-ctl) + 4px); padding: 0 calc(24px * var(--av-esc)); border: 0;
    border-radius: var(--g3-radio-boton, 14px);
    background: var(--av-verde); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
    font: 700 calc(15px * var(--av-esc))/1 var(--av-fuente); cursor: pointer; touch-action: manipulation;
}
.aereo-reintentar:hover { background: var(--g3-marca-oscura, #223819); }
.aereo-visor .aereo-reintentar:focus-visible { outline: 3px solid var(--av-azul); outline-offset: 2px; }
/* Aviso fijo (este navegador no puede girar la foto): abajo, sobre los controles, sin tapar la miniatura.
   Y sin mini-mapa: lo que queda es la foto plana con ‹ › y el aspa. */
.aereo-visor-hoja[data-error="fijo"] .aereo-visor-aviso {
    top: auto; bottom: calc(var(--av-ctl) + var(--av-borde) * 2 + 20px + var(--av-seg-b));
}
.aereo-visor-hoja[data-error="fijo"] .aereo-mini { display: none; }
/* «Cargando…»: solo sale si la imagen tarda (js/aereo.js); no intercepta el dedo */
.aereo-visor-espera {
    position: absolute; z-index: 8; left: 0; right: 0; top: 44%;
    width: max-content; max-width: calc(100% - 48px); margin: 0 auto;
    padding: calc(10px * var(--av-esc)) calc(18px * var(--av-esc));
    border-radius: var(--g3-radio-pildora, 99px); background: #fff; box-shadow: var(--av-sombra-foto);
    font: 600 calc(14px * var(--av-esc))/1.3 var(--av-fuente); color: var(--av-texto); text-align: center;
    pointer-events: none;
}
/* Banco de medida de los rótulos y texto para lectores de pantalla: existen, no se ven */
.aereo-visor-medidor { position: absolute; left: 0; top: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; white-space: nowrap; }
.aereo-visor-medidor .aereo-rotulo { display: inline-block; }
.aereo-visor-voz { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ── 3. Mini-mapa ──────────────────────────────────────────────────────── */
/* La caja ocupa el interior de la hoja (sin estorbar al puntero) para que el mapa ampliado
   pueda medirse en % del visor; lo que se ve se apila abajo a la izquierda. */
.aereo-mini {
    position: absolute; z-index: 6;
    top: calc(var(--av-borde) + var(--av-seg-t)); right: calc(var(--av-borde) + var(--av-seg-r));
    bottom: calc(var(--av-borde) + var(--av-seg-b)); left: calc(var(--av-borde) + var(--av-seg-l));
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 8px;
    pointer-events: none;
}
.aereo-mini > * { pointer-events: auto; }
.aereo-mini-caja {
    position: relative; box-sizing: border-box; flex: 0 0 auto;
    width: var(--av-mini); height: var(--av-mini);
    border: 3px solid #fff; border-radius: var(--g3-radio-tarjeta, 18px); overflow: hidden;
    background: #E8EEF0; box-shadow: var(--av-sombra-foto);
}
.aereo-mini-lienzo { position: absolute; inset: 0; }
.aereo-mini[data-estado="plegado"] .aereo-mini-caja { display: none; }
.aereo-mini[data-estado="amplio"] .aereo-mini-caja {
    width: max(46%, 300px); height: max(46%, 250px); max-width: 100%;
    margin-bottom: calc(var(--av-ctl) + 18px);          /* por encima de la fila de controles */
}
/* En reposo todo el mini-mapa es un botón («ampliar»), con su indicio en la esquina */
.aereo-mini-ampliar {
    position: absolute; inset: 0; z-index: 3; padding: 0; border: 0; border-radius: inherit;
    background: transparent; cursor: zoom-in;
}
.aereo-mini-ampliar-ico {
    position: absolute; top: 6px; right: 6px; width: calc(26px * var(--av-esc)); height: calc(26px * var(--av-esc));
    display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--av-verde);
    box-shadow: 0 1px 4px rgba(34,56,25,.3);
}
.aereo-mini-ampliar-ico svg { width: 58%; height: 58%; }
.aereo-mini-reducir { position: absolute; z-index: 3; top: 8px; right: 8px; display: none; }
.aereo-mini-credito {
    position: absolute; z-index: 2; right: 6px; bottom: 5px; display: none; padding: 2px 7px; border-radius: 99px;
    background: rgba(255,255,255,.88); color: var(--av-suave); font: 500 calc(10px * var(--av-esc))/1.3 var(--av-fuente); pointer-events: none;
}
.aereo-mini[data-estado="amplio"] .aereo-mini-ampliar { display: none; }
.aereo-mini[data-estado="amplio"] .aereo-mini-reducir { display: grid; }
.aereo-mini[data-estado="amplio"] .aereo-mini-credito { display: block; }
.aereo-mini[data-estado="amplio"] .aereo-mini-lienzo { cursor: grab; }
.aereo-mini-boton { display: none; }                   /* el botón «mapa» solo existe donde el mini-mapa nace plegado */
.aereo-mini .maplibregl-canvas { outline: none; }      /* no es foco de teclado (tabindex −1) */

/* Marcador de la toma actual: punto + cono de visión (el giro lo da MapLibre) */
.aereo-cono { width: 120px; height: 120px; pointer-events: none; }
.aereo-cono svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ── 4. Sobre la fotografía: rótulos y flechas ─────────────────────────── */
/* PSV fuerza box-sizing:content-box a todo lo que vive dentro de la esfera */
.aereo-visor .aereo-rotulo, .aereo-visor .aereo-rotulo *,
.aereo-visor .aereo-flecha, .aereo-visor .aereo-flecha * { box-sizing: border-box; }
.aereo-visor .psv-marker.aereo-m-rotulo { pointer-events: none; }   /* informan: no interceptan el arrastre ni las flechas */

/* Rótulo: pastilla blanca + filete hasta el sitio + punto. El ancla es el punto. */
.aereo-rotulo { text-align: center; white-space: nowrap; line-height: 0; font-family: var(--av-fuente); }
.aereo-rotulo-pastilla {
    display: inline-flex; align-items: center; gap: calc(6px * var(--av-esc));
    height: calc(28px * var(--av-esc)); padding: 0 calc(11px * var(--av-esc));
    border-radius: 99px; background: #fff; color: var(--av-texto);
    font: 700 calc(12.5px * var(--av-esc))/1 var(--av-fuente);
    box-shadow: var(--av-sombra-foto);
}
.aereo-rotulo-pastilla b { font-weight: 700; }
.aereo-rotulo-pastilla i { font-style: normal; font-weight: 600; color: var(--av-azul); font-variant-numeric: tabular-nums; }
.aereo-rotulo-tallo {
    display: block; width: 2px; height: var(--tallo, 24px); margin: 0 auto;
    background: #fff; box-shadow: 0 0 0 .75px rgba(34,56,25,.42);
}
.aereo-rotulo-punto {
    display: block; width: 8px; height: 8px; margin: 0 auto -4px; border-radius: 50%;
    background: var(--av-azul); box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(34,56,25,.45);
}
/* Zonas y pueblos no son un punto exacto: el filete señala, sin diana */
.aereo-rotulo[data-tipo="z"] .aereo-rotulo-punto,
.aereo-rotulo[data-tipo="u"] .aereo-rotulo-punto { visibility: hidden; }
.aereo-rotulo.is-oculto,
.aereo-visor[data-nombres="0"] .aereo-rotulo:not([data-tour]) { visibility: hidden; }      /* los de interior 3D son acciones: no se apagan con los nombres */

/* Punto de interior 3D: el rótulo de un templo con tour Matterport es un botón de cristal verde que late */
.aereo-visor .psv-marker.aereo-m-rotulo .aereo-rotulo[data-tour] .aereo-rotulo-tour { pointer-events: auto; }
.aereo-rotulo-tour {
    position: relative; border: 1px solid rgba(255,255,255,.62); cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent;
    height: calc(34px * var(--av-esc)); padding: 0 calc(13px * var(--av-esc)) 0 calc(5px * var(--av-esc)); color: #fff;
    background:
        radial-gradient(120% 90% at 22% 10%, rgba(255,255,255,.40), rgba(255,255,255,0) 58%),
        linear-gradient(160deg, rgba(123,182,99,.62), rgba(52,92,36,.74));
    -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 26px rgba(8,26,12,.38), 0 2px 6px rgba(8,26,12,.22);
    text-shadow: 0 1px 2px rgba(8,26,12,.55);
    transition: transform .24s cubic-bezier(.2,.9,.3,1.35), box-shadow .24s ease;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .aereo-rotulo-tour { background: linear-gradient(160deg, #54893E, #345C24); }
}
.aereo-rotulo .aereo-rotulo-tour b, .aereo-rotulo .aereo-rotulo-tour i { color: #fff; }
.aereo-rotulo-tour i { font-style: normal; font-weight: 600; opacity: .92; padding-left: calc(8px * var(--av-esc)); border-left: 1px solid rgba(255,255,255,.42); }
.aereo-rotulo-tour-ico { display: grid; place-items: center; width: calc(24px * var(--av-esc)); height: calc(24px * var(--av-esc)); border-radius: 50%; background: rgba(255,255,255,.22); }
.aereo-rotulo-tour-ico svg { width: 62%; height: 62%; }
.aereo-rotulo-tour:hover { transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 14px 32px rgba(8,26,12,.44), 0 0 0 6px rgba(255,255,255,.16); }
.aereo-rotulo-tour:active { transform: scale(.95); transition-duration: .08s; }
.aereo-rotulo-tour:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.aereo-rotulo-tour::after { content: ""; position: absolute; inset: -1px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.7); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .aereo-rotulo-tour::after { animation: aereo-tour-halo 3s ease-out infinite; } }
@keyframes aereo-tour-halo { 0% { transform: scale(.98); opacity: .7; } 60%, 100% { transform: scale(1.18, 1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .aereo-rotulo-tour { transition: none; } }
.aereo-rotulo[data-tour] .aereo-rotulo-punto { background: #7BB663; }

/* El tour, encima de la panorámica y dentro del visor */
.aereo-tour { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #0d140b; border-radius: inherit; overflow: hidden; }
.aereo-tour-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px * var(--av-esc)) calc(12px * var(--av-esc)); background: #16210F; color: #fff; font-family: var(--av-fuente); }
.aereo-tour-titulo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: calc(15px * var(--av-esc)); }
.aereo-tour-titulo svg { width: calc(20px * var(--av-esc)); height: calc(20px * var(--av-esc)); flex: none; color: #ADD19E; }
.aereo-tour-titulo b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aereo-tour-volver {
    display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: var(--av-ctl); padding: 0 calc(14px * var(--av-esc)); border: 0; border-radius: 99px;
    background: #fff; color: #16210F; font: 700 calc(13.5px * var(--av-esc))/1 var(--av-fuente); cursor: pointer;
}
.aereo-tour-volver svg { width: calc(16px * var(--av-esc)); height: calc(16px * var(--av-esc)); }
.aereo-tour-volver:focus-visible { outline: 3px solid var(--av-azul); outline-offset: 2px; }
.aereo-tour-marco { flex: 1 1 auto; width: 100%; border: 0; background: #0d140b; }
@media (max-width: 520px) { .aereo-tour-titulo b { max-width: 42vw; } }

/* Flecha a la toma vecina: disco de CRISTAL (deja ver la foto desenfocada detrás, con brillo en el canto y un velo
   azul, lo aéreo) + distancia en pastilla de cristal claro. Late despacio para decir «se puede pulsar», crece al
   acercar el puntero y se hunde al pulsar. El disco mide lo que un control (44 px; 72 en el tótem).
   El toque conserva su holgura con el ::before (6 px más por cada lado). La escala va en el disco, NUNCA en el
   botón: su transform lo pone Photo Sphere Viewer para colocarlo sobre la foto. */
.aereo-visor .aereo-flecha {
    position: relative; min-width: var(--av-ctl); padding: 0; border: 0; background: none;
    text-align: center; line-height: 0; font-family: var(--av-fuente); cursor: pointer; touch-action: none;
    -webkit-tap-highlight-color: transparent;
}
.aereo-visor .aereo-flecha::before { content: ""; position: absolute; inset: -6px; }
.aereo-flecha-disco {
    position: relative; display: grid; place-items: center; margin: 0 auto;
    width: var(--av-ctl); height: var(--av-ctl);
    /* Borde blanco macizo, «de pegatina», y un filo oscuro por fuera: sobre agua, cielo o monte del mismo tono que el
       cristal el disco se perdía; así el contorno se lee siempre, también sobre arena o nubes claras. */
    border: calc(3px * var(--av-esc)) solid #fff; border-radius: 50%;
    background:
        radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.40), rgba(255,255,255,0) 58%),
        linear-gradient(160deg, rgba(60,141,190,.62), rgba(26,95,142,.74));
    -webkit-backdrop-filter: blur(14px) saturate(175%); backdrop-filter: blur(14px) saturate(175%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -10px 16px rgba(255,255,255,.10), 0 0 0 1px rgba(8,26,42,.34), 0 10px 26px rgba(8,26,42,.40), 0 2px 6px rgba(8,26,42,.26);
    transition: transform .24s cubic-bezier(.2,.9,.3,1.35), box-shadow .24s ease, background-color .24s ease;
}
/* sin desenfoque de fondo (navegadores antiguos) el cristal sería ilegible sobre un cielo claro: disco casi opaco */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .aereo-flecha-disco { background: linear-gradient(160deg, #3C8DBE, #1A5F8E); }
}
.aereo-flecha-disco::after {                         /* halo que se abre: «aquí se puede ir» */
    content: ""; position: absolute; inset: calc(-3px * var(--av-esc)); border-radius: 50%;
    border: 2px solid rgba(255,255,255,.85); opacity: 0; pointer-events: none;
}
.aereo-flecha-disco svg { width: 46%; height: 46%; filter: drop-shadow(0 1px 2px rgba(8,26,42,.55)); transition: transform .24s cubic-bezier(.2,.9,.3,1.35); }
.aereo-flecha-dist {
    position: relative; display: inline-block; margin-top: calc(-6px * var(--av-esc));
    height: calc(22px * var(--av-esc)); padding: 0 calc(10px * var(--av-esc)); border-radius: 99px;
    border: 1px solid #fff;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
    color: var(--av-texto);
    font: 700 calc(12px * var(--av-esc))/calc(20px * var(--av-esc)) var(--av-fuente); font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1px rgba(8,26,42,.30), 0 4px 12px rgba(8,26,42,.28);
    transition: transform .24s cubic-bezier(.2,.9,.3,1.35);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .aereo-flecha-dist { background: #fff; }
}
.aereo-flecha:hover .aereo-flecha-disco {
    transform: scale(1.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -10px 16px rgba(255,255,255,.14), 0 0 0 1px rgba(8,26,42,.34), 0 14px 32px rgba(8,26,42,.42), 0 0 0 7px rgba(255,255,255,.2);
}
.aereo-flecha:hover .aereo-flecha-disco svg { transform: translateY(-2px); }
.aereo-flecha:hover .aereo-flecha-dist { transform: translateY(2px); }
.aereo-flecha:active .aereo-flecha-disco { transform: scale(.92); transition-duration: .08s; }
@media (prefers-reduced-motion: no-preference) {
    .aereo-flecha-disco::after { animation: aereo-flecha-halo 3s ease-out infinite; }
    .aereo-flecha:hover .aereo-flecha-disco::after { animation: none; }
}
@keyframes aereo-flecha-halo {
    0% { transform: scale(.94); opacity: .75; }
    60%, 100% { transform: scale(1.42); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .aereo-flecha-disco, .aereo-flecha-disco svg, .aereo-flecha-dist { transition: none; }
}
.aereo-visor .aereo-flecha:focus-visible { outline: none; }          /* el foco se pinta en el disco, que es lo que se ve */
.aereo-visor .aereo-flecha:focus-visible .aereo-flecha-disco { outline: 3px solid var(--av-azul); outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 0 0 7px #fff; }

/* ── 5. Capa del mapa ──────────────────────────────────────────────────── */
/* Tarjeta de la galería: título + zona.
   El título va en hasta DOS líneas: con los títulos definitivos, una sola línea cortaba 6 de 32
   en escritorio y casi todos en móvil («Santa María de Bar…», «Playa de Cuberris e…» dos veces).
   La tarjeta pasa a columna flexible para que, al igualarse las alturas de la tira, el contenido
   quede arriba (un <button> en bloque lo centraría en vertical). El recorte a dos líneas no admite
   relleno inferior (asomaría la tercera): lo que era padding-bottom pasa a margin-bottom, y con el
   margen negativo de la zona queda la misma separación de antes (3 px; 5 en el tótem). */
.aereo-item { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.aereo-item img { flex: none; }
.aereo-item .aereo-item-titulo {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    white-space: normal; overflow: hidden; overflow-wrap: anywhere;
    padding-bottom: 0; margin-bottom: 10px;
}
.aereo-item .aereo-item-zona {
    display: block; margin-top: -7px; padding: 0 12px 10px;
    font: 600 11.5px/1.25 'DM Sans', system-ui, sans-serif; color: #55634D;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* La galería, siempre ENCIMA del dock. El puente la deja a 80 px del borde (120 en el tótem), que
   es lo justo con el dock en una fila; cuando el dock no cabe y pasa a dos (escritorio de 1280 a
   1440 px), js/aereo.js mide su alto y lo deja en --aereo-sobre-dock: gana el mayor de los dos. */
@media (min-width: 1024px) {
    .aereo-galeria { bottom: max(80px, var(--aereo-sobre-dock, 0px)); }
}
html[data-kiosco="1"] .aereo-galeria { bottom: max(120px, var(--aereo-sobre-dock, 0px)); }
/* Un panel del dock abierto (Condiciones, Agenda, Transporte…) manda: la galería ocupa su mismo
   sitio y lo tapaba por abajo (un tercio del panel en móvil y escritorio, el 40 % en el tótem).
   Se aparta mientras dure el panel y vuelve sola al cerrarlo; la capa y los pines siguen
   encendidos. visibility (no display): conserva su caja y el desplazamiento de la tira, y lo
   oculto no recibe toques. La segunda regla es el respaldo de js/aereo.js para los navegadores
   sin :has() (van separadas: un selector que no entienden anularía la regla entera). */
body:has(.floating-expand-panel.active) .aereo-galeria { visibility: hidden; }
.aereo-galeria.is-apartada { visibility: hidden; }
/* Móvil apaisado (pantalla de menos de 520 px de alto): entre el cajón, el dock y la barra de
   navegación no queda sitio para la tira —la galería se salía por arriba, con la cabecera y su
   aspa fuera de la pantalla—. Queda la pastilla azul con su aspa, arriba a la izquierda, y se
   entra por los pines del mapa. */
@media (max-width: 1023.98px) and (max-height: 520px) {
    .aereo-galeria {
        top: calc(8px + env(safe-area-inset-top, 0px)); bottom: auto;
        left: calc(8px + env(safe-area-inset-left, 0px)); right: auto;
    }
    .aereo-galeria-tira { display: none; }
}
/* Pin tapado por otro más importante a este zoom (su punto azul sigue debajo) */
.aereo-pin.is-tapado { visibility: hidden; }
/* Con el municipio entero en pantalla (js/aereo.js pone body.aereo-lejos por debajo de z 12,5)
   los pines encogen al mínimo de toque: caben más sin pisarse y tapan menos mapa. */
body.aereo-lejos .aereo-pin { width: 44px; height: 44px; }
body.aereo-lejos .aereo-pin-img { border-width: 2px; }
/* Tarjeta al pasar el ratón: debajo del tipo, el título de la toma */
.aereo-hover .aereo-hover-titulo {
    max-width: 220px; box-sizing: border-box; padding: 0 10px 9px; margin-top: -2px;
    font: 600 14px/1.25 var(--g3-fuente-titulo, 'Signika', system-ui, sans-serif); color: var(--g3-texto, #16210F);
}

/* ── Móvil, en vertical (≤ 700 px de ancho) y en apaisado (≤ 480 px de alto): a pantalla completa,
   herramientas en columna, mini-mapa plegado tras su botón. La misma condición está en
   js/aereo.js (MQ_MOVIL). A sangre hay que salvar la zona segura: la muesca o la isla de un
   iPhone cuando la web se abre desde la pantalla de inicio (viewport-fit=cover), y los
   laterales en apaisado. ── */
@media (max-width: 700px), (max-height: 480px) {
    .aereo-visor {
        padding: 0; --av-borde: 12px; --av-mini: 150px;
        --av-seg-t: env(safe-area-inset-top, 0px); --av-seg-r: env(safe-area-inset-right, 0px);
        --av-seg-b: env(safe-area-inset-bottom, 0px); --av-seg-l: env(safe-area-inset-left, 0px);
    }
    .aereo-visor-hoja { border-radius: 0; box-shadow: none; }
    .aereo-visor-cab { padding: 9px 13px 10px; }
    .aereo-visor-titulo { font-size: 17px; }
    .aereo-visor-herr { flex-direction: column; bottom: calc(var(--av-borde) + var(--av-seg-b)); }
    .aereo-nombres { width: var(--av-ctl); padding: 0; }
    .aereo-nombres-txt { display: none; }                /* queda el icono; el nombre va en aria-label */
    .aereo-mini { gap: 16px; }                           /* el mini-mapa abierto no toca la píldora ‹ › (8 px de aire) */
    .aereo-mini-boton { display: grid; }
    .aereo-mini[data-estado="amplio"] .aereo-mini-caja {
        width: calc(100% - var(--av-ctl) - 8px); height: 46%; margin-bottom: 0;   /* sin meterse bajo la columna de herramientas */
    }
    .aereo-rotulo-pastilla { font-size: 12px; padding: 0 10px; }
}
/* Pantalla estrecha: un nombre largo («Iglesia de San Martín de Tours 2,6 km») ocupaba 238 de
   390 px. Se recorta con «…» (el ancho que mide js/aereo.js para repartirlos ya es el recortado). */
@media (max-width: 700px) {
    .aereo-rotulo-pastilla b { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
}
/* Pantallas bajas (móvil apaisado): la cabecera cae sobre la franja del horizonte, donde viven
   los rótulos. Se queda en una píldora con el título (sin chip ni línea de datos) y el mini-mapa
   es más pequeño. */
@media (max-height: 480px) {
    .aereo-visor { --av-mini: 128px; }
    /* (el chip lleva display propio en el puente, con más peso: de ahí el prefijo) */
    .aereo-visor-cab .f360-viewer-tipo, html[data-g3-tema] .aereo-visor-cab .f360-viewer-tipo, .aereo-visor-meta { display: none; }
    .aereo-visor-cab {
        display: flex; align-items: center; min-height: var(--av-ctl); padding: 0 16px;
        border-radius: var(--g3-radio-pildora, 99px);
        max-width: min(46%, calc(100% - var(--av-ctl) - var(--av-borde) * 3 - var(--av-seg-l) - var(--av-seg-r)));
    }
    .aereo-visor-titulo { min-width: 0; margin: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Ampliado: a lo alto de la pantalla (por encima de la fila del botón) y a media anchura */
    .aereo-mini[data-estado="amplio"] .aereo-mini-caja { width: min(56%, 420px); height: calc(100% - var(--av-ctl) - 16px); }
}

/* ── 6. Tótem: controles de 72 px, texto ×1,35, sin pantalla completa (la oculta el JS) ── */
html[data-kiosco="1"] .aereo-visor { --av-ctl: 72px; --av-borde: 24px; --av-esc: 1.35; --av-mini: 250px; padding: 28px; }
html[data-kiosco="1"] .aereo-visor-herr { gap: 14px; }
html[data-kiosco="1"] .aereo-visor-nav { gap: 6px; padding: 6px; }
html[data-kiosco="1"] .aereo-rotulo-tallo { width: 3px; }
html[data-kiosco="1"] .aereo-rotulo-punto { width: 12px; height: 12px; margin-bottom: -6px; }
html[data-kiosco="1"] .aereo-cono { width: 170px; height: 170px; }
html[data-kiosco="1"] .aereo-item .aereo-item-titulo { padding-bottom: 0; margin-bottom: 14px; }
html[data-kiosco="1"] .aereo-item .aereo-item-zona { font-size: 15px; padding: 0 16px 14px; margin-top: -9px; }
/* El aspa de la galería medía 44 + 8 + 8 = 60 px de toque en el tótem: sube a los 64 del mínimo */
html[data-kiosco="1"] .aereo-galeria-cerrar::before { inset: -10px; }
/* De lejos, los pines del tótem bajan de 84 a 64 px (su mínimo de toque) */
html[data-kiosco="1"] body.aereo-lejos .aereo-pin { width: 64px; height: 64px; }

@media (prefers-reduced-motion: reduce) {
    .aereo-visor-hoja[data-carga="1"] .aereo-visor-carga { animation: none; }
    .aereo-visor-previa { transition: none; }
}

/* Ruta 360° (piloto, js/suelo.js): el grupo del dock sigue oculto mientras el piloto no esté encendido (display:flex le ganaba a [hidden]) */
#sueloFloating[hidden] { display: none !important; }