/* vidflare · r16 — arranque del hero y timeline vivo */

/* ── Timeline vivo (posiciones en % medidas sobre la captura) ── */
.vf-h12_fix{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.vf-h12_fix img{display:block;width:100%;height:auto;max-width:none;translate:1.924% 0}
.vf-h12_fix.is-a{clip-path:inset(62.2% 67.33% 35.4% 31.82%)}
.vf-h12_fix.is-b{clip-path:inset(64.5% 67.62% 1.5% 32.1%)}
.vf-h12_ph{position:absolute;top:63.1%;bottom:2.4%;left:32.2%;width:0;border-left:1px solid #D2504A;pointer-events:none;will-change:left}
.vf-h12_ph::before{content:"";position:absolute;left:-.42em;top:0;border:solid transparent;border-width:.5em .4em 0;border-top-color:#C8423D;margin-left:-.5px}
.vf-h12_fr{position:absolute;left:6.78%;top:53.95%;padding:.25em 0 .25em .05em;letter-spacing:-.02em;background:#14161C;font:400 .52em/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#7C74EE;letter-spacing:.01em}

/* ── Entrada del hero (r17: sin pantalla de carga) ───────────────
   Titular, texto, CTA y nav entran escalonados; el producto llega inclinado en 3D, enfoca y aterriza, y una luz lo recorre.
   Solo CSS con relleno «both»: sin JS o con reduced-motion se ve el estado final.
   La entrada usa `transform`; el crecimiento con el scroll usa `scale` (r16.js), para que no se pisen. */
.vf-h12_prod{scale:calc(1 + var(--grow,0));transform-origin:50% 38%}
@media (prefers-reduced-motion:no-preference){
  .vf-hero_copy>*{animation:vf-in-up 1.1s cubic-bezier(.16,1,.3,1) both}
  .vf-hero_copy>:nth-child(1){animation-delay:.1s}
  .vf-hero_copy>h1{animation-name:vf-in-h1;animation-delay:.18s;animation-duration:1.3s}
  .vf-hero_copy>:nth-child(3){animation-delay:.34s}.vf-hero_copy>:nth-child(4){animation-delay:.46s}
  @keyframes vf-in-up{from{opacity:0;translate:0 26px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
  @keyframes vf-in-h1{from{opacity:0;translate:0 .5em;filter:blur(14px)}to{opacity:1;translate:0 0;filter:blur(0)}}
  .vf-nv{animation:vf-in-nav .9s cubic-bezier(.16,1,.3,1) .1s both}
  @keyframes vf-in-nav{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
  /* r18 · 1) las líneas laterales se dibujan hacia el producto  2) trazan su marco desde los dos lados  3) aparece el producto */
  .vf-h12_lines path{stroke-dasharray:1;stroke-dashoffset:1;animation:vf-in-draw 1.05s cubic-bezier(.5,0,.2,1) both}
  .vf-h12_lines path:nth-child(1),.vf-h12_lines path:nth-child(8){animation-delay:.3s}.vf-h12_lines path:nth-child(2),.vf-h12_lines path:nth-child(7){animation-delay:.36s}
  .vf-h12_lines path:nth-child(3),.vf-h12_lines path:nth-child(6){animation-delay:.42s}.vf-h12_lines path:nth-child(4),.vf-h12_lines path:nth-child(5){animation-delay:.48s}
  @keyframes vf-in-draw{to{stroke-dashoffset:0}}
  .vf-h12_flow,.vf-h12_pulses{animation:vf-in-fade .6s ease-out 2.7s both}
  .vf-h12_frame{animation:vf-in-frame 1.75s linear 1.3s both}
  @keyframes vf-in-frame{0%{--vf-fr:0deg;opacity:1}48%{--vf-fr:90deg;opacity:1}72%{--vf-fr:90deg;opacity:1}100%{--vf-fr:90deg;opacity:0}}
  .vf-h12_prod{animation:vf-in-prod 1.1s cubic-bezier(.16,1,.3,1) 2.05s both}
  @keyframes vf-in-prod{0%{opacity:0;transform:scale(.975);filter:blur(12px) brightness(1.6)}55%{filter:none}100%{opacity:1;transform:none;filter:none}}
  .vf-h12_scr::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(196,190,247,.3) 47%,rgba(255,255,255,.55) 50%,rgba(196,190,247,.3) 53%,transparent 70%);translate:-110% 0;animation:vf-in-sweep 1.1s cubic-bezier(.45,0,.2,1) 2.45s both}
  @keyframes vf-in-sweep{from{translate:-110% 0}to{translate:110% 0}}
  .vf-h12_in{animation:vf-in-fade .5s ease-out 2.5s both}
  @keyframes vf-in-fade{from{opacity:0}to{opacity:1}}
}

/* r18 · La capa del vídeo tapa del todo la vista previa de la captura (asomaba 1–2 px por los cuatro lados) */
.vf-h12_view{left:37.86%;top:11.56%;width:37.1%;height:39.16%}

/* r18 · Marco que se dibuja: borde del tamaño exacto del producto (misma celda de la retícula), revelado por una máscara cónica
   que crece desde los dos lados —donde llegan las líneas— hasta cerrarse arriba y abajo. Sin animación no se ve. */
@property --vf-fr{syntax:"<angle>";initial-value:0deg;inherits:false}
.vf-h12_prod,.vf-h12_frame{grid-area:1/1}
.vf-h12_frame{position:relative;z-index:3;width:var(--pw);align-self:stretch;justify-self:center;box-sizing:border-box;padding:1.5px;border-radius:24px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,#fff,#C4BEF7 30%,#9A6CF4 50%,#C4BEF7 70%,#fff);filter:drop-shadow(0 0 10px rgba(154,108,244,.9));
  -webkit-mask:conic-gradient(from calc(90deg - var(--vf-fr)),#000 0 calc(2*var(--vf-fr)),transparent 0 180deg,#000 0 calc(180deg + 2*var(--vf-fr)),transparent 0),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:conic-gradient(from calc(90deg - var(--vf-fr)),#000 0 calc(2*var(--vf-fr)),transparent 0 180deg,#000 0 calc(180deg + 2*var(--vf-fr)),transparent 0),linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:source-in,xor;mask-composite:intersect,exclude}

/* r18 · mientras se dibujan, las líneas se ven más; luego bajan a su opacidad de reposo */
@media (prefers-reduced-motion:no-preference){.vf-h12_lines{animation:vf-in-lines 3s ease-out both}@keyframes vf-in-lines{0%,55%{opacity:.55}100%{opacity:.1}}}

/* r21 · CTA del nav arriba: vuelve al morado. Detrás, el degradado del hero se oscurece en esa esquina
   (mancha radial que pertenece a la barra y desaparece cuando esta se compacta) y el botón gana un filo claro. */
@media (min-width:992px){
  .vf-nv_bar::after{content:"";position:absolute;z-index:-1;right:-140px;top:-90px;width:640px;height:300px;pointer-events:none;
    background:radial-gradient(closest-side,rgba(11,8,24,.82),rgba(11,8,24,.5) 45%,transparent);opacity:1;transition:opacity .4s}
  .vf-nv.is-min .vf-nv_bar::after{opacity:0}
  .vf-nv:not(.is-min) .vf-btn.vf-nv_cta{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 30px -10px rgba(120,66,224,.9)}
}

/* r21 · Logo del menú recogido: isotipo centrado en una celda cuadrada */
.vf-nv_logo .vf-nv_mark{display:none}
@media (min-width:992px){
  .vf-nv.is-min .vf-nv_logo{display:grid;place-items:center;width:30px;height:30px;overflow:visible}
  .vf-nv.is-min .vf-nv_logo>svg:not(.vf-nv_mark){display:none}
  .vf-nv.is-min .vf-nv_logo .vf-nv_mark{display:block;height:17px;width:auto}
  .vf-nv.is-min .vf-nv_bar{padding-left:16px}
}