/* vidflare · r12 · 11 nov 2026
   Hero sobre su captura real + líneas y fichas como Amplemarket · sección 2 a todo el ancho sobre el degradado ·
   casos con una cifra · Smart-Layout centrado · use cases como recorrido señal → vídeo · Kundenstimmen tipo bento. */

/* ── 1 · Hero ────────────────────────────────────────────────── */
.vf-h12{position:relative;display:grid;justify-items:center;width:100vw;margin-inline:calc(50% - 50vw);--pw:min(1000px,68vw)}
.vf-h12_prod{position:relative;z-index:2;width:var(--pw);container-type:inline-size;border-radius:1.200cqw;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 60px 140px -40px #000}
.vf-h12_prod::before{content:"";position:absolute;inset:-14% -18%;z-index:-1;background:radial-gradient(closest-side,rgba(154,108,244,.5),transparent 72%);pointer-events:none}
.vf-h12_prod>img{display:block;width:100%;height:auto;border-radius:inherit}
.vf-h12_in{position:absolute;inset:0;font-size:1cqw;border-radius:inherit;overflow:hidden}
/* visor: 38,1–74,75 % × 11,9–50,5 % de la captura */
.vf-h12_view{position:absolute;left:38.100%;top:11.900%;width:36.650%;height:38.600%;display:grid;place-items:center;background:#0B0E13;overflow:hidden}
.vf-h12_view .vf-ad{height:100%!important;width:auto!important;aspect-ratio:16/9;transition:aspect-ratio .7s var(--vf-ease)}
.vf-h12_view .vf-ad[data-r="916"]{aspect-ratio:9/16}
.vf-h12_view .vf-ad2{inset:0 auto 0 50%;height:100%;aspect-ratio:16/9;transform:translateX(-50%);transition:aspect-ratio .7s var(--vf-ease),opacity .45s}
.vf-h12_view .vf-ad2.is-916{aspect-ratio:9/16}
.vf-h12_view .vf-ad2 b{font-size:7cqw}.vf-h12_view .vf-ad2 span{font-size:2.400cqw}.vf-h12_view .vf-ad2 small{font-size:3cqw}.vf-h12_view .vf-ad2 strong{font-size:3.400cqw;padding:1.400cqw 2.800cqw}.vf-h12_view .vf-ad2{padding:5cqw;gap:1.400cqw}
.vf-h12_view .vf-ad2.is-916 b{font-size:12cqw}
/* campo de texto del panel derecho */
.vf-h12_txt{position:absolute;left:80.400%;top:18.100%;width:16.500%;height:7.400%;padding:.5em .6em;border-radius:.3em;background:#10141B;box-shadow:inset 0 0 0 1px #7367F0;color:#fff;font:400 .78em/1.35 Geist,sans-serif;overflow:hidden}
.vf-h12_txt span::after{content:"";display:inline-block;width:1px;height:1em;margin-left:1px;background:#fff;vertical-align:-.15em;animation:vf-blink 1s steps(2) infinite}
.vf-h12_kf{position:absolute;left:26%;top:90.700%;width:.75em;height:.75em;margin:-.375em 0 0 -.375em;background:#fff;transform:rotate(45deg) scale(0);box-shadow:0 0 0 .2em rgba(115,103,240,.5)}
.vf-h12_kf.is-on{animation:vf-kf 4s var(--vf-spring) both}
@keyframes vf-kf{0%{transform:rotate(45deg) scale(0)}8%,86%{transform:rotate(45deg) scale(1)}100%{transform:rotate(45deg) scale(0)}}
.vf-h12 .vf-cur{position:absolute;z-index:6;left:0;top:0;width:1.500em;height:1.900em;min-width:14px;min-height:18px;transform:translate(var(--cx,60cqw),var(--cy,20cqw));transition:transform .9s cubic-bezier(.16,1,.3,1)}
.vf-h12 .vf-cur svg{display:block;width:100%;height:100%;transition:transform .15s}.vf-h12_in.is-press .vf-cur svg{transform:scale(.8)}
.vf-h12 .vf-fl_toast{right:auto;left:56.400%;bottom:auto;top:31%;transform:translate(-50%,8px);font-size:clamp(9px,1.050em,13px)}
.vf-h12 .vf-fl_toast.is-on{animation-name:vf-toast11}
.vf-h12_ring{position:absolute;top:36%;height:28%;width:10px;border-radius:10px;opacity:0;pointer-events:none}
.vf-h12_ring.is-l{left:-5px}.vf-h12_ring.is-r{right:-5px}
.vf-h12_ring.is-on{animation:vf-h12-ring 1.200s cubic-bezier(.2,.7,.2,1)}
@keyframes vf-h12-ring{0%{opacity:.9;box-shadow:0 0 0 0 rgba(183,176,245,.9)}70%,100%{opacity:0;box-shadow:0 0 0 16px rgba(183,176,245,0)}}
/* bandas: 816×1000, pegadas a cada lado del producto y centradas en su altura */
.vf-h12_band{position:absolute;z-index:1;top:calc(var(--pw)*.2626 - 500px);width:816px;height:1000px;pointer-events:none}
.vf-h12_band.is-l{right:calc(50% + var(--pw)/2);-webkit-mask-image:radial-gradient(600px 540px at 808px 500px,#000 0%,transparent 100%);mask-image:radial-gradient(600px 540px at 808px 500px,#000 0%,transparent 100%)}
.vf-h12_band.is-r{left:calc(50% + var(--pw)/2);-webkit-mask-image:radial-gradient(600px 540px at 8px 500px,#000 0%,transparent 100%);mask-image:radial-gradient(600px 540px at 8px 500px,#000 0%,transparent 100%)}
.vf-h12_lines,.vf-h12_pulses{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vf-h12_lines{stroke:#fff;stroke-width:1.500;stroke-linecap:square;opacity:.1}
.vf-h12_pulse{fill:none;stroke-width:1.500;stroke-linecap:square}
.vf-h12_flow{position:absolute;inset:0}
.vf-h12_tok{position:absolute;left:0;top:0;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#16122E;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 10px 24px -8px rgba(0,0,0,.8);will-change:transform,opacity}
.vf-h12_tok::before{content:"";position:absolute;inset:5px;border-radius:7px;background:var(--c,#7842E0);opacity:.9}
.vf-h12_tok .vf-i{position:relative;width:16px;height:16px;stroke-width:1.800}
.vf-h12_tok.is-out{background:#16122E 50%/cover;align-items:end;justify-items:start;overflow:hidden}
.vf-h12_tok.is-out::before{display:none}
.vf-h12_tok.is-out b{margin:0 0 2px 3px;font:600 8px/1 var(--vf-mono);color:#fff;text-shadow:0 1px 2px #000}

/* ── 2 · Segunda sección a todo el ancho ─────────────────────── */
.vf-stage_wrap.is-wide{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--vf-2)}
.is-wide .vf-tabs{order:0;display:flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:16px;background:var(--vf-g100);box-shadow:inset 0 0 0 1px rgba(10,14,22,.06);justify-self:center;max-width:100%}
.is-wide .vf-tab{display:flex;flex-direction:row;align-items:center;gap:9px;padding:11px 16px;border-radius:11px;flex:none}
.is-wide .vf-tab b{font-size:.9375rem;white-space:nowrap}
.is-wide .vf-tab[aria-selected="true"]{background:#fff;box-shadow:0 1px 2px rgba(10,14,22,.08),0 0 0 1px rgba(10,14,22,.05)}
.is-wide .vf-caps{order:1;display:grid;justify-items:center;text-align:center;min-height:3.2em}
.is-wide .vf-cap{grid-template-columns:minmax(0,1fr);gap:0;justify-items:center}
.is-wide .vf-cap h3{display:none}.is-wide .vf-cap p{font-size:1.125rem;line-height:1.5;max-width:40em;color:var(--vf-g700)}
.is-wide .vf-frame{order:2;position:relative;isolation:isolate;overflow:hidden;padding:clamp(1rem,4.500vw,4.500rem) clamp(.75rem,6vw,6.500rem);border-radius:28px;background:linear-gradient(118deg,#2A2358 0%,#7842E0 28%,#B7B0F5 46%,#5C78EE 62%,#C76BCC 80%,#2A2358 100%);box-shadow:none}
.vf-grad{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}.vf-grad.no-gl{display:none}
.is-wide .vf-stage{border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 50px 110px -40px rgba(20,10,60,.95)}

/* ── 3 · Casos: vídeo a la izquierda, una cifra ──────────────── */
.vf-cs_item.is-v3{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;padding:12px;align-items:stretch}
.vf-cs_media{border-radius:18px;overflow:hidden;background:#0A0E16;display:grid}
.vf-cs_media .vf-cs_ad{border-radius:0;box-shadow:none;height:100%;display:grid}
.vf-cs_media .vf-cad,.vf-cs_media .vf-ad{width:100%;height:100%;aspect-ratio:16/9}
.vf-cs_side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--vf-2);padding:clamp(1rem,2.400vw,2.250rem)}
.vf-cs_side small{padding:4px 10px;border-radius:999px;background:var(--vf-lav-50);font:500 12px var(--vf-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--vf-green-d)}
.vf-cs_side h3{margin:0;font-weight:500;font-size:clamp(1.375rem,1rem + 1.100vw,2rem);line-height:1.12;letter-spacing:-.025em;color:var(--vf-ink);text-wrap:balance}
.vf-cs_side p{margin:0;font-size:1rem;line-height:1.5;color:var(--vf-g700);text-wrap:pretty}
.vf-cs_one{margin-top:auto;width:100%;padding-top:var(--vf-2);border-top:1px solid rgba(10,14,22,.1);display:flex;align-items:baseline;gap:var(--vf-2);flex-wrap:wrap}
.vf-cs_one strong{display:flex;align-items:baseline;font-weight:500;font-size:clamp(2.500rem,1.600rem + 2.600vw,4rem);line-height:.95;letter-spacing:-.04em;color:var(--vf-ink);font-variant-numeric:tabular-nums}
.vf-cs_one strong i{font-style:normal;font-size:.55em;margin-left:.06em;color:var(--vf-purple)}
.vf-cs_one span{font-size:.9375rem;line-height:1.35;color:var(--vf-g700);max-width:14em}

/* ── 4 · Funktionen: la pila del Smart-Layout, centrada ──────── */
.vf-xl_s{margin:74px 8px 4px 18px}

/* ── 5 · Use cases: señal → vidflare → vídeo en su canal ─────── */
.vf-ucs_stage.is-canvas{background:#0E0B20 radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.500px) 0 0/22px 22px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.vf-ucs_stage.is-canvas::after{display:none}
.vf-sc.is-jc{width:min(100%,420px);padding:0;background:none;box-shadow:none;border-radius:0;display:grid;justify-items:center;gap:0;color:#fff;transform:none}
.vf-jc_n{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:11px 14px 11px 11px;border-radius:14px;background:#fff;color:var(--vf-ink);box-shadow:0 20px 40px -24px #000;opacity:0;transform:translateY(12px) scale(.97)}
.vf-jc_n i{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--vf-lav-50);color:var(--vf-purple);overflow:hidden}
.vf-jc_n i .vf-i{width:18px;height:18px}
.vf-jc_n.is-vf{background:var(--vf-purple);color:#fff}.vf-jc_n.is-vf i{background:rgba(255,255,255,.16);justify-items:start}.vf-jc_n.is-vf i svg{height:15px;width:auto;margin-left:9px;color:#fff;flex:none}
.vf-jc_n span{display:grid;gap:1px;min-width:0}.vf-jc_n small{font:500 10.500px var(--vf-mono);letter-spacing:.05em;text-transform:uppercase;opacity:.6}
.vf-jc_n b{font-weight:500;font-size:.9375rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vf-jc_n em{font-style:normal;font:500 11px var(--vf-mono);opacity:.65;white-space:nowrap}
.vf-sc.is-jc s{display:block;width:1.500px;height:26px;background:linear-gradient(var(--vf-lav),var(--vf-lav)) 0 0/100% 0% no-repeat,rgba(255,255,255,.16);text-decoration:none}
.vf-jc_v{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 30px 60px -30px #000;opacity:0;transform:translateY(12px) scale(.97)}
.vf-jc_v::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--p) 50%/cover}
.vf-jc_v::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,14,22,.1) 30%,rgba(10,14,22,.75))}
.vf-jc_v b{position:absolute;left:6%;right:30%;bottom:9%;font:700 clamp(15px,1.500vw,21px)/1.06 "Open Sans",sans-serif;text-transform:uppercase}
.vf-jc_v span{position:absolute;left:10px;top:10px;padding:5px 9px;border-radius:7px;background:rgba(10,14,22,.7);backdrop-filter:blur(6px);font:500 11px var(--vf-mono)}
.vf-jc_v u{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='m12 9.500 8 5.500-8 5.500z' fill='%230A0E16'/%3E%3C/svg%3E") 50%/100%}
.vf-sc.is-jc.is-on .vf-jc_n,.vf-sc.is-jc.is-on .vf-jc_v{opacity:1;transform:none;transition:opacity .45s,transform .8s var(--vf-spring)}
.vf-sc.is-jc.is-on .vf-jc_n.is-vf{transition-delay:.45s}.vf-sc.is-jc.is-on .vf-jc_v{transition-delay:.9s}
.vf-sc.is-jc.is-on s{background-size:100% 100%,auto;transition:background-size .4s linear .25s}
.vf-sc.is-jc.is-on s:nth-of-type(2){transition-delay:.7s}
.vf-sc.is-jc.is-on .vf-jc_v::before{animation:vf-kb 10s ease-in-out infinite alternate}

/* ── 6 · Kundenstimmen: todo tarjetas, juntas, tipo bento ────── */
.vf-k1{gap:8px}
.vf-k1_k{border:0;gap:8px}
.vf-k1_k li{padding:18px 20px;border:0;border-radius:16px;background:var(--vf-g100)}
.vf-k1_k li:nth-child(1){background:var(--vf-purple)}.vf-k1_k li:nth-child(1) strong,.vf-k1_k li:nth-child(1) strong i{color:#fff}.vf-k1_k li:nth-child(1) span{color:rgba(255,255,255,.82)}
.vf-k1_k li:nth-child(2){background:var(--vf-lav-100)}
.vf-k1_l{gap:8px}.vf-k1_l button{border-radius:16px}
.vf-k1_d{border-radius:16px}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:1100px){.vf-h12{--pw:min(1000px,74vw)}}
@media (max-width:991px){
  .vf-h12{width:100%;margin-inline:0;--pw:100%}.vf-h12_band{display:none}.vf-h12 .vf-cur{display:none}
  .is-wide .vf-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-self:stretch}
  .is-wide .vf-frame{padding:8px;border-radius:18px}.is-wide .vf-cap p{font-size:1rem}
  .vf-cs_item.is-v3{grid-template-columns:minmax(0,1fr)}
  .vf-sc.is-jc{width:100%}.vf-sc.is-jc .vf-jc_n.is-vf,.vf-sc.is-jc s{display:none}.vf-jc_n{padding:8px 10px 8px 8px;margin-bottom:8px}.vf-jc_n em{display:none}
}
@media (prefers-reduced-motion:reduce){
  .vf-h12_txt span::after,.vf-h12_kf,.vf-h12_ring,.vf-jc_v::before{animation:none!important}
  .vf-jc_n,.vf-jc_v{opacity:1;transform:none;transition:none!important}.vf-h12 .vf-cur{display:none}
}
@media (max-width:991px){.vf-link{display:block}.vf-link_sheet{width:66%}.vf-link table{font-size:10px}.vf-link td,.vf-link th{padding:5px 6px}}