/* ══ BAIREN · Portal · El movimiento (8/10/2026) ═══════════════════════════════
   Todo el CSS de movimiento del portal vive acá. Va después de los otros CSS de cada
   página y no toca superficies ni tipografía: solo cuándo y cómo se mueven las cosas.

   Una sola curva, cubic-bezier(.22,1,.36,1) (frena suave, nada rebota), y tres familias:
   a) Aparición al entrar: de 0 a 1 de opacidad y 10 px de subida, 280 ms, una vez.
   b) Respuesta al toque: .98 en 120 ms (lo hace js/bairen-motion.js sobre "scale", así no
      pisa transiciones de nadie); en compu, hover de 2 px como mucho, sin zoom de fotos.
   c) Paneles: menú, filtros y hojas se deslizan en 300 ms con un fondo que se oscurece.
   Más: transición entre páginas (la foto de la tarjeta crece hasta la de la ficha) y
   fotos que entran con un fundido de 200 ms cuando terminan de bajar.
   Con "menos movimiento" pedido: sin desplazamientos ni escalas, fundidos de 150 ms o nada.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --t-curva:cubic-bezier(.22,1,.36,1);
  /* Las variantes de la curva escritas distinto en los otros CSS apuntan a la misma */
  --p-expo:cubic-bezier(.22,1,.36,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.22,1,.36,1);
}

/* ── Sin velo de carga. Tapaba la página entre 0,9 y 1,4 s esperando datos y fotos; ahora
   el contenido se ve apenas llega y los esqueletos marcan lo que falta. ── */
.p-velo{display:none !important}

/* ── Curvas y tiempos que quedaban sueltos (ease, ease-out, 0,38 a 0,9 s) ── */
.tj-fav,.p-icon-btn,.p-strip .thumb,.mobile-menu .m-link,.mobile-menu a,.burger span,#mapFrame,.p-skip,.p-lb .x,.p-lb .nav{transition-timing-function:var(--t-curva)}
body.p-home .h-puntos i,body.p-home .h-puntos i:first-child{transition-duration:.24s}
.p-aviso-row.sellado{transition:opacity .28s var(--t-curva)}

/* ══ a) Aparición al entrar ═════════════════════════════════════════════════
   Lo que ya está en pantalla al cargar se ve de entrada (nada espera a una animación).
   Solo lo que está más abajo espera, y entra cuando llega a la vista (BP.reveal, ui.js). */
[data-reveal]{opacity:1;transform:none;transition:none}
[data-reveal].bp-espera{opacity:0;transform:translateY(10px)}
[data-reveal].bp-espera.in{opacity:1;transform:none;transition:opacity .28s var(--t-curva) var(--bp-demora,0s),transform .28s var(--t-curva) var(--bp-demora,0s)}

/* El estándar de la portada queda dibujado y quieto: los cuatro hitos encendidos, sin espera */
body.p-home .h-hito,body.p-home .h-hito b,body.p-home .h-hito .pt,body.p-home .h-hito .pt .anillo circle{transition:none}
body.p-home .h-camino-linea .punta,body.p-home .h-camino-linea .halo{display:none}
/* "Cómo seleccionamos" ya no espera a que termine el hilo (1,2 s): está siempre */
body.p-home .h-criterios{opacity:1;visibility:visible;transform:none;transition:color .2s var(--t-curva),border-color .2s var(--t-curva)}

/* ══ b) Respuesta al toque y hover ══════════════════════════════════════════
   El .98 al apretar lo pone bairen-motion.js (propiedad scale). Este :active haría el doble. */
.p-btn:active{transform:none}
@media(hover:hover) and (pointer:fine){
  /* La tarjeta sube 2 px (antes 4) y la foto no se agranda */
  .prop-card:hover{transform:translateY(-2px)}
  .prop-card,.prop-card.p-tj{transition:transform .24s var(--t-curva),box-shadow .24s var(--t-curva)}
  .p-tj:hover .tj-foto img,.prop-card:hover .card-img img,.p-card-h:hover .p-card-photo img,
  body.p-home .h-edif:hover img,body.p-home .h-tipo:hover img,body.p-home .h-tipo:hover .h-tipo-foto img,
  body.p-home .h-foto-card:hover img,.p-gallery a:hover img{transform:none}
  .p-card-h:hover{transform:translateY(-2px)}
  .p-perfil:hover{transform:translateY(-2px)}
}

/* ══ c) Paneles ═════════════════════════════════════════════════════════════
   Menú del celular: baja en 300 ms (antes 380) y el fondo se oscurece a la par */
.mobile-menu{transition:transform .3s var(--t-curva),visibility 0s linear .3s}
.mobile-menu.open{transition:transform .3s var(--t-curva),visibility 0s}
.m-velo{transition:opacity .3s var(--t-curva)}

/* Filtros (a la derecha en compu, hoja desde abajo en el celular) y hoja de barrios.
   Entran y salen deslizándose; el fondo se funde. Donde el navegador no sabe animar la
   salida de un display:none, se cierran de una, como antes. */
.p-drawer,.p-msheet-wrap{transition:display .3s allow-discrete}
.p-drawer .bg,.p-msheet-wrap .bg{opacity:0;transition:opacity .3s var(--t-curva)}
.p-drawer.open .bg,.p-msheet-wrap.open .bg{opacity:1}
.p-drawer .panel{transform:translateX(100%);transition:transform .3s var(--t-curva)}
.p-drawer.open .panel{transform:none}
.p-msheet-wrap .p-msheet{transform:translateY(100%);transition:transform .3s var(--t-curva)}
.p-msheet-wrap.open .p-msheet{transform:none}
@starting-style{
  .p-drawer.open .bg,.p-msheet-wrap.open .bg{opacity:0}
  .p-drawer.open .panel{transform:translateX(100%)}
  .p-msheet-wrap.open .p-msheet{transform:translateY(100%)}
}
@media(max-width:820px){
  .p-drawer .panel{animation:none;transform:translateY(100%)}
  .p-drawer.open .panel{transform:none}
  @starting-style{.p-drawer.open .panel{transform:translateY(100%)}}
}

/* ══ Fotos que aparecen suave ═══════════════════════════════════════════════
   ui.js marca la foto mientras baja (bp-carga) y la suelta al terminar con un fundido de
   200 ms. Si ya estaba en caché, aparece sin fundido. Solo opacidad: no corre nada. */
.bp-carga{opacity:0}
.bp-fundido{transition:opacity .2s var(--t-curva)}

/* ══ Transición entre páginas ═══════════════════════════════════════════════
   Navegar dentro del portal funde una página en la otra (220 ms). La foto de la tarjeta
   tocada crece hasta donde va la foto principal de la ficha, y al volver atrás se achica a
   su tarjeta. Los nombres los pone ui.js (y, en la ficha, un script del <head>); la barra de
   arriba y la de abajo quedan quietas entre páginas. Cada página repite en línea, en su
   <head>, la regla @view-transition: si solo está acá, Chrome a veces la saltea cuando
   todavía faltan scripts al pintar el primer cuadro. Chrome 126+ y Safari 18.2+; los demás
   navegan como siempre. */
@view-transition{navigation:auto}
.navbar.p-navbar{view-transition-name:bp-barra}
#pTabbar{view-transition-name:bp-pestanas}
/* La copia de la foto que llega a la ficha (la crea propiedad.html y la retira ui.js) */
.bp-vt-destino{position:absolute;z-index:900;margin:0;max-width:none;object-fit:cover;pointer-events:none;view-transition-name:foto;background:#131D2D}

::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-group(bp-barra),::view-transition-group(bp-pestanas){animation-duration:.22s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-group(foto){animation-duration:.3s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
/* La foto mantiene su encuadre mientras cambia de tamaño (la tarjeta es 4:3; la ficha, otra proporción) */
::view-transition-old(foto),::view-transition-new(foto){height:100%;object-fit:cover;mix-blend-mode:normal}
/* La de origen queda entera todo el viaje; la de destino se funde encima al final */
::view-transition-old(foto){animation:none;opacity:1}
::view-transition-new(foto){animation:bp-vt-foto .3s cubic-bezier(.22,1,.36,1) both}
@keyframes bp-vt-foto{0%,45%{opacity:0}100%{opacity:1}}
/* Si del otro lado no hay foto (se volvió a una lista que se dibujó de nuevo), la que se va se funde en su lugar */
::view-transition-old(foto):only-child{animation:bp-vt-sale .22s cubic-bezier(.22,1,.36,1) both}
@keyframes bp-vt-sale{to{opacity:0}}

/* ══ Menos movimiento ═══════════════════════════════════════════════════════
   Con "reducir movimiento" pedido en el sistema: sin desplazamientos ni escalas. Las páginas
   solo se funden (150 ms), la foto no viaja y las barras no se separan; los paneles aparecen
   en su lugar y las fotos, sin fundido. portal.css ya apaga el resto de las transiciones con
   este pedido, y los scripts (bairen-motion.js, ui.js) dejan solo fundidos cortos o nada. */
@media(prefers-reduced-motion:reduce){
  .navbar.p-navbar,#pTabbar,.bp-vt-destino{view-transition-name:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.15s !important}
  .p-drawer .panel,.p-drawer.open .panel,.p-msheet-wrap .p-msheet,.p-msheet-wrap.open .p-msheet{transform:none}
  [data-reveal].bp-espera{transform:none}
  .bp-carga{opacity:1}
}