/* HouseTour · efectos v3 */
@keyframes fx-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fx-word{from{opacity:0;transform:translateY(.45em) rotate(2deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes fx-shine{0%{transform:translateX(-120%) skewX(-20deg)}60%,100%{transform:translateX(260%) skewX(-20deg)}}
@keyframes fx-ring{0%{box-shadow:0 0 0 0 rgba(184,145,60,.55)}100%{box-shadow:0 0 0 18px rgba(184,145,60,0)}}
@keyframes fx-wa{0%{box-shadow:0 10px 26px rgba(31,138,85,.35),0 0 0 0 rgba(31,138,85,.5)}100%{box-shadow:0 10px 26px rgba(31,138,85,.35),0 0 0 16px rgba(31,138,85,0)}}
@keyframes fx-rec{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fx-glow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes fx-out{to{opacity:0}}
@keyframes fx-marquee{to{transform:translateX(-50%)}}
@keyframes fx-spark{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
@keyframes fx-kb{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes fx-hint{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}

/* Transición entre páginas */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fx-out .25s ease both}
::view-transition-new(root){animation:fx-rise .45s cubic-bezier(.2,.7,.2,1) both}

/* Aparición al hacer scroll */
.fx .fx-in{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--fx-d,0ms)}
.fx .fx-in.fx-on{opacity:1;transform:none}

/* Portada */
.fx .hero h1 .fx-w{display:inline-block;opacity:0;animation:fx-word .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*70ms + 120ms)}
.fx .hero .pill,.fx .hero .lead,.fx .hero .fx-pick,.fx .hero .actions,.fx .hero .assure{opacity:0;animation:fx-rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.fx .hero .pill{animation-delay:.05s}.fx .hero .lead{animation-delay:.55s}.fx .hero .fx-pick{animation-delay:.65s}.fx .hero .actions{animation-delay:.75s}.fx .hero .assure{animation-delay:.9s}
.fx .hero .plan{opacity:0;animation:fx-rise 1.1s .35s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1{transition:opacity .2s ease,filter .2s ease}
.hero h1.fx-swap{opacity:0;filter:blur(8px)}
.hero h1 u{text-decoration:none;background:linear-gradient(transparent 62%,rgba(233,217,176,.9) 62%);padding:0 .06em}
.fx .hero h1 b{background:none;color:inherit;animation:none}
.fx .hero h1 b .fx-w,h2 b{background:linear-gradient(100deg,var(--gold) 0%,#d6b465 35%,var(--gold) 55%,#9c7a2e 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-glow 7s ease-in-out infinite}
.fx .hero h1 b .fx-w{animation:fx-word .9s cubic-bezier(.2,.7,.2,1) forwards,fx-glow 7s ease-in-out infinite;animation-delay:calc(var(--i)*70ms + 120ms),0s}

/* Selector de tipo de inmueble */
.fx-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 24px}
.fx-pick-q{font:600 12px/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-right:6px;width:100%;margin-bottom:4px}
.fx-chip{font:500 14px/1 var(--font-body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.fx-chip:hover{border-color:var(--gold)}
.fx-chip.on{background:var(--ink);color:var(--on-navy);border-color:var(--ink)}

/* Foco de luz en la portada */
.hero.fx-spot{background-image:radial-gradient(520px circle at var(--sx,70%) var(--sy,40%),rgba(233,217,176,.45),transparent 65%)}

/* Botón principal con destello */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%) skewX(-20deg);animation:fx-shine 4.5s 1.5s ease-in-out infinite;pointer-events:none;z-index:-1}
.btn-primary:hover{box-shadow:0 10px 24px rgba(22,32,58,.25)}
.btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}

/* Tarjetas */
.step,.tool,.price-card,.guarantee,.card,.quiz{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.step:hover,.tool:hover,.price-card:hover,.guarantee:hover{box-shadow:0 18px 40px rgba(22,32,58,.12);border-color:var(--gold-soft)}
.guarantee:hover{transform:translateY(-6px)}
.step .n{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.step:hover .n{transform:scale(1.15) rotate(-8deg)}
.step,.tool,.price-card{background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,-40%),rgba(233,217,176,.38),transparent 60%)}

/* Plano: modo director */
.plan{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform;position:relative;cursor:crosshair}
.plan svg{overflow:visible}
.plan .fx-trail{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;opacity:.85}
.plan .lbl{transition:fill .4s ease}
.plan .lbl.fx-hot{fill:var(--gold);font-weight:700}
.plan .fx-cone{fill:url(#fx-cone-g)}
.plan .walker{filter:drop-shadow(0 0 6px rgba(184,145,60,.8))}
.fx-rec{position:absolute;top:14px;right:16px;display:flex;align-items:center;gap:6px;font:600 11px/1 var(--font-body);letter-spacing:.12em;color:var(--ink);background:rgba(255,253,248,.88);border:1px solid var(--line);padding:6px 9px;border-radius:999px}
.fx-rec i{width:7px;height:7px;border-radius:50%;background:#d0453b;animation:fx-rec 1.2s infinite}
.fx-cap{position:absolute;left:16px;top:14px;font:500 13px/1 var(--font-body);color:var(--on-navy);background:var(--ink);padding:8px 12px;border-radius:999px;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
.fx-cap b{color:var(--gold-soft);font-weight:600;margin-right:4px;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.fx-cap.on{opacity:1;transform:none}
.fx-hint{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;font:500 12.5px/1 var(--font-body);color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);padding:8px 13px;border-radius:999px;box-shadow:0 6px 18px rgba(22,32,58,.08);animation:fx-hint 2.4s ease-in-out infinite;transition:opacity .4s}
.fx-hint.off{opacity:0}

/* Película: así se monta tu vídeo */
.fx-reel{position:relative;height:320vh;border-top:1px solid var(--line)}
.fx-reel-stick{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:28px;overflow:hidden}
.fx-reel-head h2{margin:8px 0 0}
.fx-reel-view{overflow:hidden;padding:10px 0}
.fx-reel-track{display:flex;gap:26px;padding:0 max(24px,calc((100vw - 1120px)/2));will-change:transform}
.fx-frame{flex:none;width:min(420px,78vw);margin:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s;opacity:.45;transform:scale(.92)}
.fx-frame.on{opacity:1;transform:none}
.fx-shot{position:relative;aspect-ratio:16/10;border-radius:16px;background:var(--surface);border:1px solid var(--line);overflow:hidden;box-shadow:0 20px 50px rgba(22,32,58,.10);
background-image:repeating-linear-gradient(90deg,transparent 0 22px,rgba(22,32,58,.06) 22px 24px);background-size:100% 10px;background-repeat:repeat-x;background-position:0 6px,0 100%}
.fx-shot::before,.fx-shot::after{content:"";position:absolute;left:0;right:0;height:14px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 22px);opacity:.12}
.fx-shot::before{top:6px}.fx-shot::after{bottom:6px}
.fx-shot svg{position:absolute;inset:14% 12%;width:76%;height:72%}
.fx-frame.on .fx-shot svg{animation:fx-kb 6s ease-out forwards}
.fx-tc{position:absolute;right:12px;top:24px;font:600 11px/1 var(--font-body);letter-spacing:.1em;color:var(--ink);background:rgba(255,253,248,.9);border:1px solid var(--line);padding:5px 8px;border-radius:6px}
.fx-frame.on .fx-tc{background:var(--ink);color:var(--on-navy)}
.fx-frame figcaption{margin-top:14px;font:600 17px/1.2 var(--font-body);color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.fx-frame figcaption b{color:var(--gold);font-size:13px;letter-spacing:.1em}
.fx-frame figcaption small{width:100%;font-weight:500;font-size:14px;color:var(--ink-soft)}
.fx-reel-bar{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:14px;font:600 12px/1 var(--font-body);letter-spacing:.1em;color:var(--ink-soft)}
.fx-reel-line{flex:1 1 auto;min-width:120px;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.fx-reel-line i{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.fx-reel.fx-static{height:auto}.fx-reel.fx-static .fx-reel-stick{position:relative;height:auto;padding:60px 0}
.fx-reel.fx-static .fx-reel-view{overflow-x:auto}.fx-reel.fx-static .fx-frame{opacity:1;transform:none}
@media (max-width:860px){.fx-reel{height:260vh}.fx-reel-stick{gap:20px}}

/* Anuncio con vídeo del ejemplo */
.feed .card.on{position:relative;animation:fx-float 5s ease-in-out infinite}
.feed .card.on .play{animation:fx-ring 1.8s ease-out infinite}

/* Barra de progreso */
.progress{background:linear-gradient(90deg,var(--gold),#e2c47c,var(--gold));background-size:200% 100%;animation:fx-glow 3s linear infinite}

/* Cabecera */
header.top{transition:box-shadow .35s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
header.top.fx-scrolled{box-shadow:0 8px 30px rgba(22,32,58,.08)}
@media (max-width:860px){
  header.top{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  header.top.fx-hide{transform:translateY(calc(-100% - 4px));box-shadow:none}
}

/* Franja de plataformas */
.fx-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fx-strip .fx-track{display:flex;gap:44px;width:max-content;animation:fx-marquee 38s linear infinite;transform-origin:center}
.fx-strip span{font:500 15px/1 var(--font-body);letter-spacing:.06em;color:var(--ink-soft);white-space:nowrap;display:flex;align-items:center;gap:44px;transform:skewX(var(--sk,0deg));transition:transform .4s ease}
.fx-strip span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.7}
.fx-strip b{font-weight:600;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.fx-strip:hover .fx-track{animation-play-state:paused}

/* Cursor personalizado */
.fx-dot,.fx-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:100;border-radius:50%}
.fx-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold)}
.fx-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(184,145,60,.7);transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s}
.fx-ring.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(233,217,176,.25);border-color:var(--gold)}
.fx-ring.down{width:26px;height:26px;margin:-13px 0 0 -13px}
.fx-ring.lab::after{content:attr(data-l);position:absolute;inset:0;display:grid;place-items:center;font:700 10px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* Chispas */
.fx-spark{position:fixed;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;z-index:101;animation:fx-spark .85s cubic-bezier(.15,.7,.3,1) forwards}

/* Botón flotante de WhatsApp */
.fx-wa{position:fixed;right:22px;bottom:22px;z-index:45;display:flex;align-items:center;gap:10px;background:var(--wa);color:#fff;text-decoration:none;font:600 15px/1 var(--font-body);padding:14px 18px 14px 14px;border-radius:999px;box-shadow:0 10px 26px rgba(31,138,85,.35);opacity:0;pointer-events:none;translate:0 120px;transition:translate .5s cubic-bezier(.2,.7,.2,1),opacity .5s,transform .25s;animation:fx-wa 2.4s 3s ease-out infinite}
.fx-wa.fx-on{translate:0 0;opacity:1;pointer-events:auto}
.fx-wa svg{width:22px;height:22px;flex:none}
@media (max-width:860px){.fx-wa{display:none}}

/* Textura de papel */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:70;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Preguntas frecuentes */
details[open]>*:not(summary){animation:fx-rise .45s cubic-bezier(.2,.7,.2,1)}
details summary{transition:color .25s ease}
details summary:hover{color:var(--gold)}

/* Sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion:reduce){
  .fx .fx-in,.fx .hero *{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  h2 b,.btn-primary::after,.progress,.feed .card.on,.feed .card.on .play,.fx-wa,.fx-rec i,.fx-strip .fx-track,.fx-hint,details[open]>*:not(summary){animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}