/* ─── Bairen · Capa de motion premium ────────────────────────────────
   Todo está gateado en html.pm, que solo agrega el JS y solo si el
   usuario NO pidió menos movimiento. Sin JS o con reduced-motion,
   la web queda exactamente como antes. Solo transform/opacity/clip:
   nada que dispare layout. */

:root{
  --pm-ease:cubic-bezier(.22,1,.36,1);   /* out-quint: el del sitio */
  --pm-expo:cubic-bezier(.16,1,.3,1);    /* out-expo: decidido, sin rebote */
  --pm-gold:#C2A968;
  --pm-navy:#131D2D;
}

/* Selector de idioma tipográfico (reemplaza a las banderas; no depende de JS) */
.lang-switch{gap:12px;}
.lang-switch .flag{
  width:auto;height:auto;border:none;background:none;overflow:visible;
  font-family:'Jost','Avenir Next',system-ui,sans-serif;
  font-size:.6rem;font-weight:600;letter-spacing:.2em;line-height:1.5;
  color:rgba(255,255,255,.5);opacity:1;padding:2px 0;
  border-bottom:1px solid transparent;
}
.lang-switch .flag:hover{color:rgba(255,255,255,.85);transform:none;opacity:1;}
.lang-switch .flag.active{color:var(--pm-gold);border-bottom:1px solid var(--pm-gold);opacity:1;}

/* 1 · Portada: el video asienta como una toma que se estabiliza.
   El zoom va en el CONTENEDOR .hero-bg: el video tiene su propia animación
   de fade (heroFadeIn) y pisarla lo dejaría invisible. */
html.pm .hero{overflow:hidden;}
html.pm .hero-bg{animation:pm-settle 3s var(--pm-expo) both;}
@keyframes pm-settle{from{transform:scale(1.06)}to{transform:scale(1)}}


/* 2 · Tarjetas: suben y la foto se descubre con máscara */
html.pm .pm-card{opacity:0;transform:translateY(24px);}
html.pm .pm-card .card-img,
html.pm .pm-card .dest-img{clip-path:inset(0 0 14% 0);}
html.pm .pm-card.pm-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--pm-ease) var(--pm-d,0ms),transform .8s var(--pm-ease) var(--pm-d,0ms);
}
html.pm .pm-card.pm-in .card-img,
html.pm .pm-card.pm-in .dest-img{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--pm-expo) var(--pm-d,0ms);
}

/* 7 · Las líneas se dibujan de izquierda a derecha */
html.pm .pm-card .card-divider{transform:scaleX(0);transform-origin:left;}
html.pm .pm-card.pm-in .card-divider{transform:scaleX(1);transition:transform .9s var(--pm-ease) calc(var(--pm-d,0ms) + 250ms);}

/* 4 · Hover: línea dorada bajo la dirección + el precio respira.
   Solo donde el hover existe de verdad (mouse); en touch no hay hover honesto. */
@media (hover:hover){
  html.pm .prop-card .card-address,
  html.pm .dest-card .dest-addr{position:relative;display:inline-block;}
  html.pm .prop-card .card-address::after,
  html.pm .dest-card .dest-addr::after{
    content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
    background:var(--pm-gold);transform:scaleX(0);transform-origin:left;
    transition:transform .45s var(--pm-ease);
  }
  html.pm .prop-card:hover .card-address::after,
  html.pm .dest-card:hover .dest-addr::after{transform:scaleX(1);}
  html.pm .price-amount,
  html.pm .dest-price{display:inline-block;transition:transform .45s var(--pm-ease);}
  html.pm .prop-card:hover .price-amount,
  html.pm .dest-card:hover .dest-price{transform:translateY(-2px);}
}

/* Mobile: recorridos más cortos y rápidos, el pulgar no espera */
@media (hover:none){
  html.pm .pm-card{transform:translateY(14px);}
  html.pm .pm-card.pm-in{transition-duration:.55s,.55s;}
  html.pm .pm-card .card-img,
  html.pm .pm-card .dest-img{clip-path:inset(0 0 9% 0);}
  html.pm .pm-card.pm-in .card-img,
  html.pm .pm-card.pm-in .dest-img{transition-duration:.7s;}
  #pm-veil{transition-duration:.2s;}
}

/* 5 · Velo navy entre páginas: continuidad, nunca parpadeo blanco */
#pm-veil{position:fixed;inset:0;background:var(--pm-navy);opacity:0;pointer-events:none;z-index:99999;transition:opacity .28s ease;}
html.pm-leave #pm-veil{opacity:1;pointer-events:auto;}

/* El sistema .reveal existente hereda la curva premium */
html.pm .reveal{transition-timing-function:var(--pm-ease);}