/* ============ ANIMACIONES Y DETALLES MODERNOS ============
   Solo transform/opacity (barato para el navegador) y respeta "reducir movimiento". */

/* barra de progreso de lectura */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#003DA5,#3E73D6 45%,#E0BE4E)}

/* navbar que se compacta al bajar */
.nav-glass{transition:background .35s,box-shadow .35s,padding .35s,backdrop-filter .35s;padding-top:.7rem;padding-bottom:.7rem}
.nav-glass.nav-compact{background:rgba(4,10,24,.86)!important;backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 10px 34px rgba(4,10,24,.32);padding-top:.25rem;padding-bottom:.25rem}
.nav-glass .cb{transition:height .35s,transform .35s}
.nav-glass.nav-compact .cb{transform:scale(.92)}
.nav-link{position:relative}
.nav-link:after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:.35rem;height:1.5px;background:linear-gradient(90deg,#E0BE4E,#B8912A);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
.nav-link:hover:after{transform:scaleX(1)}

/* hero: la FOTO hace un zoom lentísimo (en su propia capa, para no deformar el texto) */
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.14)}}
.hero{background:#040A18}
.hero:before{content:"";position:absolute;inset:-5%;z-index:0;transform-origin:52% 46%;
  background:linear-gradient(100deg,rgba(4,10,24,.92) 0%,rgba(6,18,44,.80) 42%,rgba(8,26,64,.55) 100%),var(--hero) center/cover no-repeat;
  animation:kenburns 28s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.hero:before{animation:none}}
/* el hero entra con movimiento, sin depender de la opacidad (nunca queda texto invisible) */
.hero .eyebrow,.hero h1,.hero .sub{animation:entraArriba .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.08s}
.hero .sub{animation-delay:.18s}
.hero .quiz-card{animation:entraLado 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:.24s}
@keyframes entraArriba{from{transform:translateY(26px)}to{transform:none}}
@keyframes entraLado{from{transform:translateY(30px) scale(.985)}to{transform:none}}

/* el hero respira con el scroll (parallax suave) */
.hero .container{will-change:transform}

/* botones: barrido de brillo al pasar el mouse.
   OJO: el botón flotante de WhatsApp lleva la clase .btn-wa y NO debe perder su position:fixed,
   por eso queda excluido con :not(.fab-wa). */
.btn-gold,.btn-consulta,.btn-wa:not(.fab-wa){position:relative;overflow:hidden}
.btn-gold:after,.btn-consulta:after,.btn-wa:not(.fab-wa):after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .7s}
.btn-gold:hover:after,.btn-consulta:hover:after,.btn-wa:not(.fab-wa):hover:after{left:130%}
.btn i{transition:transform .3s}
.btn:hover i.fa-arrow-right{transform:translateX(4px)}
.btn:hover i.fa-whatsapp,.btn:hover i.fa-brands{transform:scale(1.12)}

/* tarjetas: entrada escalonada + tilt muy leve */
.pcard{will-change:transform}
.pcard.ph-cargando .ph:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,#E9EFFA 30%,#F5F8FE 50%,#E9EFFA 70%);background-size:220% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
/* Las fotos de tarjeta entran con un zoom mínimo: sin opacidad, la foto nunca queda oculta. */
.pcard img.lista{animation:fundido .5s both}
@keyframes fundido{from{transform:scale(1.035)}to{transform:none}}
@media(hover:hover){.pcard:hover{transform:translateY(-8px) rotateX(1.2deg) rotateY(-1.2deg)}}

/* mosaicos de zona: revelan con desplazamiento alternado */
.ztile{transition:transform .5s,box-shadow .5s}
@media(hover:hover){.ztile:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 26px 60px rgba(4,10,24,.35)}}
.ztile .cap{transition:transform .5s}
.ztile:hover .cap{transform:translateY(-4px)}

/* títulos de sección: subrayado que se dibuja al entrar en pantalla */
/* Aparición al entrar en pantalla: SOLO movimiento (transform), sin tocar la opacidad.
   Así el contenido nunca puede quedar invisible, ni siquiera si el navegador pausa las animaciones. */
[data-anim].visible{animation:aparece .7s cubic-bezier(.2,.7,.2,1) both}
[data-anim="zoom"].visible{animation-name:apareceZoom}
[data-anim="izq"].visible{animation-name:apareceIzq}
[data-anim="der"].visible{animation-name:apareceDer}
@keyframes aparece{from{transform:translateY(20px)}to{transform:none}}
@keyframes apareceZoom{from{transform:scale(.965)}to{transform:none}}
@keyframes apareceIzq{from{transform:translateX(-26px)}to{transform:none}}
@keyframes apareceDer{from{transform:translateX(26px)}to{transform:none}}
.sec-head h2{position:relative;display:inline-block}
.sec-head h2:after{content:"";position:absolute;left:0;bottom:-.35rem;height:3px;width:100%;border-radius:3px;
  background:linear-gradient(90deg,#003DA5,#E0BE4E);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s .15s cubic-bezier(.2,.7,.2,1)}
.sec-head.visible h2:after{transform:scaleX(1)}

/* número que cuenta (avisos / estadísticas) */
.kpi-num{font-variant-numeric:tabular-nums}

/* galería: la foto grande hace un fundido al cambiar */
.gal-main img{transition:opacity .28s,transform .6s}
.thumbs img{transition:opacity .3s,transform .35s}
@media(hover:hover){.thumbs img:hover{transform:translateY(-3px) scale(1.04)}}

/* pasos del proceso: entran uno tras otro */
.step{transition:transform .4s,box-shadow .4s,background .4s}
@media(hover:hover){.step:hover{transform:translateY(-5px);background:rgba(255,255,255,.12)}}
.step .n{transition:transform .5s}
@media(hover:hover){.step:hover .n{transform:scale(1.08) rotate(-4deg)}}

/* piezas de la ficha: aparecen con un toque */
.spec,.pill{transition:transform .25s,background .25s,border-color .25s}
@media(hover:hover){.spec:hover{transform:translateX(3px)}.pill:hover{transform:translateY(-2px)}}

/* la propiedad marcada en la grilla se resalta un instante */
@keyframes destello{0%{box-shadow:0 0 0 0 rgba(224,190,78,.75)}100%{box-shadow:0 0 0 22px rgba(224,190,78,0)}}
.pcard.marcada{animation:destello 1.1s ease-out 1;border-color:var(--gold)}

/* similares (páginas de propiedad) */
.similares{margin-top:3.2rem}
.similares h2{font-size:1.35rem;font-weight:800;margin-bottom:1.2rem}
.migas{font-size:.82rem;color:var(--muted);margin:5.4rem 0 1.2rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.migas a{color:var(--cb);font-weight:600;text-decoration:none}
.migas i{font-size:.6rem;opacity:.6}
.detalle{padding-bottom:3rem}
.detalle .gal-main{aspect-ratio:16/10}

/* enlaces de tarjeta: se comportan como la tarjeta, sin subrayado */
.lnk-ficha{color:inherit;text-decoration:none;display:inline}
.lnk-ficha:hover{color:var(--cb)}
a.lnk-card{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
a.lnk-card:hover{color:inherit}

/* botón flotante de WhatsApp: fijo (nunca en el flujo), ícono centrado y aire en móvil */
.fab-wa{position:fixed;padding:0;justify-content:center}
.fab-wa i{display:block;line-height:1;transform:translateX(-1px)}
@media(max-width:575px){
  .fab-wa{width:52px;height:52px;font-size:22px}
  .detalle,footer{padding-bottom:4.6rem}   /* que no se monte sobre el último dato */
}

/* accesibilidad: si el visitante pidió menos movimiento, nada se mueve */
@media(prefers-reduced-motion:reduce){
  *,*:after,*:before{animation:none!important;transition:none!important}
  [data-anim]{opacity:1!important;transform:none!important}
}