/* FabriClip · movimiento, 3D y versión ligera (acompaña a fx.js). */
#vf-fondo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;animation:vf-aparece 1.4s var(--vf-ease) forwards}
@keyframes vf-aparece{to{opacity:1}}
body.vf-home{position:relative}
body.vf-home #main,body.vf-home .site-header,body.vf-home .site-footer{position:relative;z-index:1}
body.vf-home .site-header{z-index:40}
/* versión ligera: fondo fijo con degradados, sin WebGL */
body.vf-home[data-modo="ligero"]{background:radial-gradient(60% 50% at 70% 10%,rgba(61,123,255,.22),transparent 70%),radial-gradient(40% 40% at 10% 80%,rgba(143,107,255,.18),transparent 70%),radial-gradient(30% 30% at 90% 90%,rgba(255,106,77,.14),transparent 70%),var(--vf-bg);background-attachment:fixed}
body[data-modo="completo"] .vf{background:transparent}
.vf-hero:after{display:none}
/* botón de modo */
#vf-modo{position:fixed;left:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;gap:9px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(10,12,18,.72);color:#dfe6f6;font:600 12.5px/1 'Inter',sans-serif;cursor:pointer;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#vf-modo i{width:9px;height:9px;border-radius:50%;background:var(--vf-mint);box-shadow:0 0 12px var(--vf-mint)}
body[data-modo="ligero"] #vf-modo i{background:var(--vf-faint);box-shadow:none}
#vf-modo[hidden]{display:none}
@media (max-width:560px){#vf-modo{left:12px;bottom:12px;padding:9px 12px}}

/* héroe con video de fondo (solo completo) */
.vf-hero-fondo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.vf-hero-fondo video,.vf-hero-fondo img{width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(1.2)}
.vf-hero-fondo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,11,.35),rgba(6,7,11,.7) 60%,var(--vf-bg) 100%),linear-gradient(90deg,rgba(6,7,11,.75),transparent 60%)}
body[data-modo="ligero"] .vf-hero-fondo video{display:none}
body[data-modo="completo"] .vf-hero-fondo img{display:none}

/* muro de clips: tres columnas que se desplazan en sentidos opuestos */
.vf-muro{position:relative;padding:0 0 10px;overflow:hidden;height:min(62vh,560px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.vf-muro-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;width:min(1180px,calc(100% - 40px));margin:0 auto;height:100%}
.vf-muro-col{display:flex;flex-direction:column;gap:14px;animation:vf-sube 26s linear infinite}
.vf-muro-col:nth-child(2n){animation-name:vf-baja;animation-duration:32s}
.vf-muro-col:nth-child(3){animation-duration:22s}.vf-muro-col:nth-child(5){animation-duration:36s}
@keyframes vf-sube{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes vf-baja{from{transform:translateY(-50%)}to{transform:translateY(0)}}
body[data-modo="ligero"] .vf-muro-col{animation:none}
.vf-muro-item{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#0f1320;border:1px solid var(--vf-line);flex:none}
.vf-muro-item video,.vf-muro-item img{width:100%;height:100%;object-fit:cover;display:block}
.vf-muro-item small{position:absolute;left:12px;bottom:12px;padding:5px 9px;border-radius:999px;background:rgba(6,7,11,.6);color:#fff;font:600 11px/1 'Inter';letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
body[data-modo="ligero"] video.vf-clip{display:none}
body[data-modo="completo"] .vf-poster{display:none}
@media (max-width:860px){.vf-muro{height:48vh}.vf-muro-cols{grid-template-columns:repeat(3,1fr);gap:10px}.vf-muro-col:nth-child(n+4){display:none}}

/* galería de estilos con muestra en video */
.vf-estilos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vf-estilo{position:relative;display:block;border-radius:var(--vf-radius);overflow:hidden;aspect-ratio:9/16;background:#0f1320;border:1px solid var(--vf-line);color:#fff;text-decoration:none;transition:transform .5s var(--vf-ease),border-color .3s,box-shadow .5s;--lx:50%;--ly:50%}
.vf-estilo:before{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(240px circle at var(--lx) var(--ly),rgba(255,255,255,.14),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.vf-estilo:hover{transform:translateY(-6px);border-color:rgba(122,162,255,.6);box-shadow:0 30px 80px rgba(61,123,255,.25)}
.vf-estilo:hover:before{opacity:1}
.vf-estilo video,.vf-estilo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--vf-ease)}
.vf-estilo:hover video,.vf-estilo:hover img{transform:scale(1.05)}
.vf-estilo figcaption{position:absolute;inset:auto 0 0 0;z-index:3;padding:90px 18px 18px;background:linear-gradient(transparent,rgba(6,7,11,.92))}
.vf-estilo small{display:block;font:600 11px/1 'Inter';letter-spacing:.14em;color:var(--vf-blue2);margin-bottom:8px;text-transform:uppercase}
.vf-estilo strong{display:block;font:700 20px/1.1 'Space Grotesk';margin-bottom:8px}
.vf-estilo p{margin:0;font-size:12.5px;line-height:1.45;color:var(--vf-dim)}
.vf-estilo .vf-estilo-cta{display:inline-block;margin-top:12px;font:600 12px/1 'Inter';color:#fff;padding:9px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06)}
@media (max-width:1080px){.vf-estilos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.vf-estilos{grid-template-columns:repeat(2,1fr);gap:10px}.vf-estilo figcaption{padding:60px 12px 12px}.vf-estilo strong{font-size:16px}.vf-estilo p{display:none}}

/* selector visual de estilo en el cotizador */
.vf-pick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.vf-pick label{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0f1320;cursor:pointer;transition:border-color .2s,transform .3s var(--vf-ease)}
.vf-pick label:hover{transform:translateY(-3px)}
.vf-pick input{position:absolute;opacity:0;width:1px;height:1px}
.vf-pick label:has(input:checked){border-color:#fff;box-shadow:0 0 0 2px #fff inset}
.vf-pick label:has(input:focus-visible){outline:3px solid var(--vf-blue2);outline-offset:2px}
.vf-pick video,.vf-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vf-pick span{position:absolute;inset:auto 0 0 0;padding:40px 10px 10px;background:linear-gradient(transparent,rgba(6,7,11,.9));color:#fff;font:600 12.5px/1.25 'Inter'}
.vf-pick .vf-pick-libre{display:grid;place-items:center;text-align:center;padding:12px;color:var(--vf-dim);font:600 13px/1.4 'Inter';background:linear-gradient(160deg,#121729,#0b0e17)}
.vf-pick .vf-pick-libre span{position:static;padding:0;background:none}
@media (max-width:560px){.vf-pick{grid-template-columns:repeat(3,1fr);gap:8px}}

/* presentadores virtuales en «cómo funciona» */
.vf-presenta{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vf-presenta figure{position:relative;margin:0;border-radius:var(--vf-radius);overflow:hidden;aspect-ratio:9/16;max-height:520px;border:1px solid var(--vf-line);background:#0f1320}
.vf-presenta video,.vf-presenta img{width:100%;height:100%;object-fit:cover;display:block}
.vf-presenta figcaption{position:absolute;inset:auto 0 0 0;padding:70px 18px 18px;background:linear-gradient(transparent,rgba(6,7,11,.9));color:#fff;font:600 15px/1.35 'Space Grotesk'}
.vf-presenta figcaption small{display:block;font:500 12px/1.4 'Inter';color:var(--vf-dim);margin-top:4px}
/* cuenta del cliente: en modo completo deja ver la aurora detrás de las tarjetas */
body[data-modo="completo"] .vf-cuenta{background:transparent}
body[data-modo="ligero"] .vf-cuenta{background:transparent}
body[data-modo="ligero"] .vf-stage .vf-canvas{display:none}
body[data-modo="ligero"] .vf-stage.vf-3d-ready .vf-fallback{opacity:1;transform:none}
/* estilo sin muestra real todavía: tarjeta oscura sin video simulado */
.vf-estilo-pronto{background:linear-gradient(160deg,#121729,#0b0e17)}
.vf-estilo-pronto figcaption{inset:0;display:flex;flex-direction:column;justify-content:flex-end;background:none}
/* proceso real en tres pasos: toma limpia → editor → FAB */
.vf-proceso{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vf-proceso figure{position:relative;margin:0;border-radius:var(--vf-radius);overflow:hidden;aspect-ratio:9/16;border:1px solid var(--vf-line);background:#0f1320}
.vf-proceso video,.vf-proceso img{width:100%;height:100%;object-fit:cover;display:block}
.vf-proceso figcaption{position:absolute;inset:auto 0 0 0;padding:70px 16px 16px;background:linear-gradient(transparent,rgba(6,7,11,.92));color:#fff;font:700 15px/1.3 'Space Grotesk'}
.vf-proceso figcaption small{display:block;font:500 12px/1.4 'Inter';color:var(--vf-dim);margin-top:4px}
.vf-proceso figcaption b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--vf-grad);font:700 12px 'Inter';margin-bottom:8px}
@media (max-width:700px){.vf-proceso{grid-template-columns:repeat(3,1fr);gap:8px}.vf-proceso figcaption{padding:40px 10px 10px;font-size:12px}.vf-proceso figcaption small{display:none}}