/* vidflare · r05 · 11 nov 2026
   Verdes → color de marca · fondo con haces de luz · vídeo real en el producto ·
   beneficios con marco y pestañas arriba · bloque de IA · FAQ · tres propuestas de hero.
   Se carga después de mejoras.css y lo corrige donde hace falta. */

/* ── 1 · Los verdes pasan a la familia lavanda del logo ─────── */
:root{
  --_color---brand-sec--brand-sec-25:#F6F3FF; --_color---brand-sec--brand-sec-50:#ECE6FD;
  --_color---brand-sec--brand-sec-100:#C4BEF7; --_color---brand-sec--brand-sec-600-main:#B7B0F5;
  --_color---brand-sec--brand-sec-700:#9C96ED; --_color---brand-sec--brand-sec-800:#8A7FEA;
  --_color---brand-sec--brand-sec-900:#6A3DD1; --_color---brand-sec--brand-sec-950:#4B2A9A;
  --vf-green:#B7B0F5; --vf-green-d:#6A3DD1; --vf-mint:#ECE6FD;   /* acento de marca (antes verde) */
  --vf-ok:#28C76F;                                               /* verde de «hecho»: solo dentro de la interfaz del producto */
}
.u-theme-dark .rooftop_wrap,.hero_sec .rooftop_wrap,.section-bg-fade .rooftop_wrap,.footer_1_wrap .rooftop_wrap,.vf-hero_eye{background:rgba(183,176,245,.14)!important}
.vf-hero_eye{color:#C4BEF7}
.vf-st_bar b,.vf-bar b,.vf-sheet_bar span::before{background:var(--vf-ok)}
.vf-st_url::before{color:#1c9a55}
.vf-rt_col.is-out li.is-on span{box-shadow:0 0 0 1.5px var(--vf-purple)}
.vf-rt_col.is-out li.is-on::after{background-color:var(--vf-purple)}
.vf-life_l::before,.vf-steps div::before{background:var(--vf-purple)}
.vf-checks .vf-ico{color:#B7B0F5}
.footer_1_wrap .footer-logo svg *{stroke:#B7B0F5!important}

/* ── 2 · Fondo: índigo luminoso con haces de luz en diagonal (ref. Frame.io) ── */
.vf-bg,.hero_sec,.section-bg-fade,.footer_1_wrap{background:
  radial-gradient(42% 60% at 10% 8%,rgba(7,5,14,.92),transparent 72%),
  radial-gradient(46% 55% at 100% 100%,rgba(6,5,18,.9),transparent 72%),
  radial-gradient(30% 42% at 0% 52%,rgba(168,52,170,.30),transparent 70%),
  linear-gradient(113deg,transparent 22%,rgba(112,107,232,.30) 33%,transparent 45%),
  linear-gradient(117deg,transparent 48%,rgba(120,66,224,.34) 60%,transparent 71%),
  linear-gradient(109deg,transparent 68%,rgba(74,104,226,.26) 80%,transparent 92%),
  linear-gradient(165deg,#15102B 0%,#2A2358 46%,#1B1640 74%,#0D0A22 100%)!important}
.vf-aurora i{border-radius:0;top:-30%;height:170%;width:26vw;transform:rotate(23deg);mix-blend-mode:screen}
.vf-aurora i:nth-child(1){left:26vw;right:auto;background:linear-gradient(90deg,transparent,rgba(124,116,240,.40),transparent);animation:vf-beam 19s ease-in-out infinite alternate}
.vf-aurora i:nth-child(2){left:52vw;right:auto;top:-30%;width:30vw;background:linear-gradient(90deg,transparent,rgba(132,74,236,.42),transparent);animation:vf-beam 25s ease-in-out infinite alternate-reverse}
.vf-aurora i:nth-child(3){left:78vw;top:-30%;width:22vw;background:linear-gradient(90deg,transparent,rgba(84,118,236,.34),transparent);animation:vf-beam 31s ease-in-out infinite alternate}
.vf-aurora i:nth-child(4){left:-6vw;top:10%;height:70%;width:34vw;transform:none;border-radius:50%;background:radial-gradient(closest-side,rgba(176,58,178,.30),transparent);animation:vf-au2 27s ease-in-out infinite alternate}
@keyframes vf-beam{from{transform:rotate(23deg) translateX(-7vw);opacity:.75}to{transform:rotate(23deg) translateX(8vw);opacity:1}}
.hero_sec::after{background:linear-gradient(transparent,#0D0A22)}
.marquee_sec{background:#0D0A22!important}
.vf-bento .vf-tile{background:linear-gradient(118deg,transparent 40%,rgba(120,66,224,.30) 62%,transparent 84%),linear-gradient(165deg,#15102B,#211B4A 60%,#0D0A22)}

/* ── 3 · Anuncio de ejemplo con vídeo real (plantilla «AIDA Ads 1080x1080») ── */
.vf-ad{position:relative;overflow:hidden;container-type:inline-size;background:#0b0b0d;aspect-ratio:1;font-family:"Open Sans",sans-serif;color:#fff;isolation:isolate}
.vf-ad[data-r="169"]{aspect-ratio:16/9}.vf-ad[data-r="916"]{aspect-ratio:9/16}
.vf-ad video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s}
.vf-ad[data-ph="1"] video:nth-of-type(1),.vf-ad[data-ph="2"] video:nth-of-type(2){opacity:1}
.vf-ad::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 30%,transparent 55%,rgba(0,0,0,.5));pointer-events:none}
.vf-ad_url{position:absolute;z-index:2;right:5%;top:4.5%;font-weight:700;font-size:6.2cqw;line-height:1}
.vf-ad_hl{position:absolute;z-index:2;left:6%;right:6%;bottom:7%;font-weight:700;font-size:9.6cqw;line-height:1.02;text-transform:uppercase;transition:opacity .35s,transform .6s var(--vf-ease),font-size .5s var(--vf-ease)}
.vf-ad_hl span{display:block}
.vf-ad.is-long .vf-ad_hl{font-size:7.4cqw}
.vf-ad_st{position:absolute;z-index:2;left:20%;bottom:5%;width:44%;aspect-ratio:1;border-radius:50%;background:#fff;color:#0B3E63;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.15;transition:opacity .35s,transform .6s var(--vf-ease)}
.vf-ad_st small{font-size:3.6cqw;font-weight:400}.vf-ad_st b{font-size:5.6cqw}.vf-ad_st strong{font-size:6.4cqw}
.vf-ad_st::before{content:"zum Beispiel";position:absolute;left:-34%;top:-6%;width:52%;aspect-ratio:1;border-radius:50%;background:#0F5C7E;color:#fff;display:grid;place-items:center;font-size:3.2cqw;padding:0 12%;line-height:1.15}
.vf-ad[data-ph="1"] .vf-ad_st{opacity:0;transform:scale(.6)}
.vf-ad[data-ph="2"] .vf-ad_hl{opacity:0;transform:translateY(12%)}
.vf-ad.is-swap .vf-ad_hl,.vf-ad.is-swap .vf-ad_st{opacity:0}
.vf-ad[data-r="169"] .vf-ad_url{font-size:3.6cqw}.vf-ad[data-r="169"] .vf-ad_hl{font-size:5.6cqw;right:40%}.vf-ad[data-r="169"].is-long .vf-ad_hl{font-size:4.4cqw}
.vf-ad[data-r="169"] .vf-ad_st{width:25%;left:13%}.vf-ad[data-r="169"] .vf-ad_st small{font-size:2.1cqw}.vf-ad[data-r="169"] .vf-ad_st b{font-size:3.2cqw}.vf-ad[data-r="169"] .vf-ad_st strong{font-size:3.6cqw}.vf-ad[data-r="169"] .vf-ad_st::before{font-size:1.8cqw}
.vf-ad[data-r="916"] .vf-ad_url{font-size:9cqw}.vf-ad[data-r="916"] .vf-ad_hl{font-size:13cqw;bottom:9%}.vf-ad[data-r="916"].is-long .vf-ad_hl{font-size:9.6cqw}
.vf-ad[data-r="916"] .vf-ad_st{width:64%;left:28%;bottom:8%}.vf-ad[data-r="916"] .vf-ad_st small{font-size:5.2cqw}.vf-ad[data-r="916"] .vf-ad_st b{font-size:8cqw}.vf-ad[data-r="916"] .vf-ad_st strong{font-size:9cqw}.vf-ad[data-r="916"] .vf-ad_st::before{font-size:4.6cqw}
.vf-ad_f{position:absolute;z-index:3;left:6px;top:6px;padding:1px 6px;border-radius:4px;background:rgba(10,14,22,.72);font:500 10px/1.6 var(--vf-mono);color:#fff}

/* el editor usa el anuncio como lienzo */
.vf-ed_canvas{background:none;width:25.9em;height:25.9em;border-radius:.3em}
.vf-ed_canvas::after{display:none}
[data-ratio="169"] .vf-ed_canvas{width:46em;height:25.9em}
[data-ratio="11"] .vf-ed_canvas{width:25.9em}
[data-ratio="916"] .vf-ed_canvas{width:14.6em}
.vf-ed_canvas .vf-ad{width:100%;height:100%;aspect-ratio:auto}
.vf-ed_safe{left:4%;right:22%;bottom:4.5%;height:38%;z-index:4}
.vf-ed_wave{position:absolute;inset:.3em 0;border-radius:.3em;background:repeating-linear-gradient(90deg,rgba(115,103,240,.9) 0 .12em,transparent .12em .3em);-webkit-mask:repeating-linear-gradient(90deg,#000 0 2.2em,rgba(0,0,0,.45) 2.2em 3.1em,#000 3.1em 4.6em,rgba(0,0,0,.6) 4.6em 5.3em);mask:repeating-linear-gradient(90deg,#000 0 2.2em,rgba(0,0,0,.45) 2.2em 3.1em,#000 3.1em 4.6em,rgba(0,0,0,.6) 4.6em 5.3em)}
.vf-ed_tl{grid-auto-rows:1.76em}
.vf-ad.is-one video{opacity:1!important}
.vf-sheet td.vf-url{width:34%}
.vf-sheet td:nth-child(5){font-variant-numeric:tabular-nums}

/* salidas pequeñas con póster del clip */
.vf-out{background-image:var(--p,url(video/adria.jpg));background-size:cover;background-position:center}
.vf-out.r916{background-size:cover}
.vf-out_t{left:7%;right:7%;bottom:9%;text-align:left}
.vf-out_t b{color:#fff;text-transform:uppercase;font-size:10cqw;line-height:1.02}
.vf-out_t i{display:none}
.vf-out.r169 .vf-out_t b{font-size:6cqw}.vf-out.r916 .vf-out_t b{font-size:14cqw}

/* ── 4 · Beneficios: pestañas arriba y marco fino ──────────── */
.vf-stage_wrap{gap:var(--vf-2)}
.vf-tabs{order:-1;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;padding:5px;border-radius:14px;background:var(--vf-g100);box-shadow:inset 0 0 0 1px rgba(10,14,22,.06)}
.vf-tab{flex-direction:row;align-items:center;gap:8px;padding:11px 12px;border-radius:10px;background:none}
.vf-tab b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-tab::after{display:none}
.vf-tab::before{inset:auto 10px 4px 10px;height:2px;border-radius:2px;opacity:1}
.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)}
.vf-frame{padding:10px;border-radius:26px;background:linear-gradient(160deg,#F1ECFE,#E7E9F3 55%,#EDE6FB);box-shadow:inset 0 0 0 1px rgba(120,66,224,.14),0 40px 90px -50px rgba(60,40,140,.55)}
.vf-stage{border-radius:17px;box-shadow:0 0 0 1px rgba(10,14,22,.5)}
.vf-stage[data-seg="0"]{--s:1.5;--tx:-1%;--ty:-50%}
.vf-stage[data-seg="1"]{--s:1.3;--tx:0%;--ty:-4%}
.vf-stage[data-seg="2"]{--s:1.62;--tx:-27%;--ty:-9%}
.vf-stage[data-seg="3"]{--s:1.5;--tx:-50%;--ty:-6%}
.vf-stage[data-seg="4"]{--s:1.5;--tx:-27%;--ty:-7%}
.vf-stage[data-seg="5"]{--s:1;--tx:0%;--ty:0%}
.vf-stage .vf-ed_safe{opacity:0}.vf-stage[data-seg="3"] .vf-ed_safe{opacity:1}
.vf-stage[data-seg="4"] .vf-stage_ov.is-rend{opacity:0;transform:translateY(12px)}
.vf-stage[data-seg="5"] .vf-stage_ov.is-rend{opacity:1;transform:none}
.vf-stage_rend .vf-rend_out{align-items:flex-end;gap:12px}
.vf-stage_rend .vf-ad{border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.vf-stage_tags{position:absolute;z-index:5;left:3%;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity .5s;pointer-events:none}
.vf-stage[data-seg="2"] .vf-stage_tags{opacity:1}
.vf-stage_tags span{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(20,24,29,.86);box-shadow:0 0 0 1px rgba(255,255,255,.12);backdrop-filter:blur(8px);font:400 12px/1.3 var(--vf-mono);color:#C9CED6;transition:box-shadow .4s,background .4s}
.vf-stage_tags b{font:500 13px Geist,sans-serif;color:#fff;min-width:5.2em}
.vf-stage_tags span.is-hit{background:rgba(115,103,240,.3);box-shadow:0 0 0 1px var(--vf-acc)}

/* ── 5 · IA ────────────────────────────────────────────────── */
.vf-ai{border-radius:24px;padding:clamp(1.5rem,4vw,4rem);color:#fff;overflow:hidden}
.vf-ai_head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--vf-2);max-width:44rem;margin-bottom:var(--vf-5)}
.vf-ai_head h2{margin:0;color:#fff;font-weight:500;font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.vf-ai_head p{margin:0;color:rgba(255,255,255,.76);font-size:1.0625rem;text-wrap:pretty}
.vf-ai_grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:var(--vf-2)}
.vf-ai_c{display:flex;flex-direction:column;gap:var(--vf-3);padding:var(--vf-3);border-radius:16px;background:rgba(10,8,24,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);backdrop-filter:blur(10px);min-width:0}
.vf-ai_c h3{margin:0 0 6px;color:#fff;font-size:1.25rem;line-height:1.25;font-weight:500}
.vf-ai_c p{margin:0;color:rgba(255,255,255,.72);font-size:.9375rem;text-wrap:pretty}
.vf-ai_v{flex:1;min-height:170px;display:flex;flex-direction:column;justify-content:center;gap:12px;font:400 12px/1.4 var(--vf-mono);color:rgba(255,255,255,.7)}
.vf-ai_tag{align-self:flex-start;padding:2px 9px;border-radius:6px;background:rgba(183,176,245,.16);color:#C4BEF7;font:500 11px/1.6 var(--vf-mono);letter-spacing:.04em;text-transform:uppercase}
.vf-wave{display:flex;align-items:center;gap:3px;height:64px}
.vf-wave i{flex:1;border-radius:2px;background:linear-gradient(#C4BEF7,#7842E0);height:calc(var(--h)*1%);animation:vf-wv 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--d)*-1s);transform-origin:50% 50%}
@keyframes vf-wv{to{transform:scaleY(.35)}}
.vf-ai_say{font:500 15px/1.4 Geist,sans-serif;color:#fff;min-height:2.8em;transition:opacity .25s}
.vf-ai_lg{display:flex;gap:6px}.vf-ai_lg span{padding:2px 8px;border-radius:5px;background:rgba(255,255,255,.08);transition:background .3s,color .3s}.vf-ai_lg span.is-on{background:#fff;color:#0D0A22}
.vf-ai_assets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vf-ai_assets div{position:relative;aspect-ratio:1;border-radius:8px;background:var(--p) center/cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.vf-ai_assets div::after{content:"QS ✓";position:absolute;left:5px;bottom:5px;padding:0 6px;border-radius:4px;background:rgba(10,14,22,.78);color:#7CE0A6;font:500 10px/1.7 var(--vf-mono)}
.vf-ai_assets div:last-child::after{content:"in Prüfung";color:#F4C97A}
.vf-ai_flow{display:flex;flex-direction:column;gap:8px}
.vf-ai_flow span{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff}
.vf-ai_flow span em{font-style:normal;color:rgba(255,255,255,.55)}
.vf-ai_flow span.is-on{background:rgba(115,103,240,.3);box-shadow:inset 0 0 0 1px var(--vf-acc)}

/* ── 6 · FAQ ───────────────────────────────────────────────── */
.vf-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--vf-6);align-items:start}
.vf-faq_side{position:sticky;top:6.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:var(--vf-2)}
.vf-faq_side h2{margin:0;font-weight:500;font-size:clamp(2rem,1.4rem + 2vw,3rem);line-height:1.1;letter-spacing:-.02em;color:var(--vf-ink);text-wrap:balance}
.vf-faq_side p{margin:0;color:var(--vf-g700);max-width:22em}
.vf-faq_side .vf-btn{margin-top:var(--vf-1)}
.vf-faq_list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vf-faq_list li{border-radius:16px;background:var(--vf-g100);transition:background .35s,box-shadow .35s}
.vf-faq_list li.is-on{background:#fff;box-shadow:0 0 0 1px rgba(120,66,224,.35),0 24px 60px -34px rgba(60,40,140,.5)}
.vf-faq_q{width:100%;display:grid;grid-template-columns:2.2rem minmax(0,1fr) 2rem;gap:var(--vf-1);align-items:center;padding:20px 22px;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--vf-ink)}
.vf-faq_q small{font:500 12px var(--vf-mono);color:#8a93a0;letter-spacing:.05em}
.vf-faq_q b{font-weight:500;font-size:clamp(1.0625rem,.95rem + .5vw,1.3125rem);line-height:1.3;text-wrap:balance}
.vf-faq_q i{position:relative;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--vf-g300);transition:background .3s,transform .5s var(--vf-ease)}
.vf-faq_q i::before,.vf-faq_q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--vf-ink);transform:translate(-50%,-50%);transition:transform .5s var(--vf-ease),background .3s}
.vf-faq_q i::after{transform:translate(-50%,-50%) rotate(90deg)}
li.is-on .vf-faq_q small{color:var(--vf-purple)}
li.is-on .vf-faq_q i{background:var(--vf-purple);box-shadow:none;transform:rotate(180deg)}
li.is-on .vf-faq_q i::before,li.is-on .vf-faq_q i::after{background:#fff}
li.is-on .vf-faq_q i::after{transform:translate(-50%,-50%) rotate(0deg)}
.vf-faq_q:focus-visible{outline:2px solid var(--vf-purple);outline-offset:2px;border-radius:16px}
.vf-faq_a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--vf-ease)}
li.is-on .vf-faq_a{grid-template-rows:1fr}
.vf-faq_a>div{overflow:hidden;padding:0 22px 0 calc(22px + 2.2rem + var(--vf-1));color:var(--vf-g700)}
.vf-faq_a>div>*{margin:0 0 12px;max-width:44em}
.vf-faq_a>div>*:last-child{margin-bottom:24px}

/* ── 7 · Propuestas de hero ────────────────────────────────── */
.vf-hx{display:none}
body[data-hero="a"] .vf-hx.is-a,body[data-hero="b"] .vf-hx.is-b,body[data-hero="c"] .vf-hx.is-c{display:block}
.vf-review{position:fixed;z-index:60;right:16px;bottom:64px;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(10,8,24,.92);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 30px -10px #000;font:500 12px var(--vf-mono);color:rgba(255,255,255,.6)}
.vf-review span{padding:0 8px 0 10px}
.vf-review button{border:0;border-radius:999px;padding:6px 12px;font:inherit;color:#fff;background:transparent;cursor:pointer}
.vf-review button[aria-pressed="true"]{background:var(--vf-purple)}
/* B · el recorrido completo: datos → Smart-Layout → vídeos */
.vf-hb{display:flex;flex-direction:column;align-items:center;gap:var(--vf-5);padding:var(--vf-4) 0 var(--vf-6)}
.vf-hb .vf-hero_copy{align-items:center;text-align:center}
.vf-hb .vf-h1{margin:0;color:#fff;font-weight:500;font-size:clamp(2.25rem,.9rem + 3.4vw,4rem);line-height:1.06;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.vf-hb .vf-hero_sub{max-width:36em}.vf-hb .vf-hero_cta{justify-content:center}
.vf-hb_flow{width:100%;display:grid;grid-template-columns:minmax(0,1.15fr) 56px minmax(0,1fr) 56px minmax(0,1.05fr);align-items:center}
.vf-hb_col{display:flex;flex-direction:column;gap:12px;min-width:0}
.vf-hb_lab{font:500 11px var(--vf-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62)}.vf-hb_lab b{color:#C4BEF7;font-weight:500;margin-right:8px}
.vf-hb .vf-sheet{position:static;width:100%;animation:none}
.vf-hb_wire{height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 4px,transparent 4px 9px);background-size:9px 1px;animation:vf-wire2 .7s linear infinite}
@keyframes vf-wire2{to{background-position:9px 0}}
.vf-hb_card{position:relative;padding:10px;border-radius:16px;background:rgba(20,24,29,.82);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 120px -40px #000;backdrop-filter:blur(10px)}
.vf-hb_card .vf-ad{border-radius:8px}
.vf-hb_fields{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vf-hb_fields span{padding:3px 9px;border-radius:6px;background:#1B2027;font:400 11px/1.6 var(--vf-mono);color:#C9CED6;transition:background .4s,color .4s}
.vf-hb_fields span.is-hit{background:var(--vf-acc);color:#fff}
.vf-hb_outs{display:grid;grid-template-columns:1.78fr 1fr .56fr;gap:10px;align-items:end}
.vf-hb_outs .vf-ad{border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 70px -30px #000}
.vf-hb_link{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:rgba(20,24,29,.82);box-shadow:0 0 0 1px rgba(255,255,255,.12);font:400 12px var(--vf-mono);color:#9C96ED;white-space:nowrap;overflow:hidden}
.vf-hb_link::before{content:"✓";color:#7CE0A6}
/* C · un Smart-Layout, miles de variantes */
.vf-hc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--vf-5);align-items:center}
.vf-hc .vf-h1{margin:0;color:#fff;font-weight:500;font-size:clamp(2.25rem,.7rem + 3.2vw,3.75rem);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.vf-wall{position:relative;height:min(46rem,calc(100svh - 9rem));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:118%;-webkit-mask:linear-gradient(transparent,#000 14%,#000 84%,transparent);mask:linear-gradient(transparent,#000 14%,#000 84%,transparent)}
.vf-wall_col{display:flex;flex-direction:column;gap:12px;animation:vf-up 38s linear infinite}
.vf-wall_col:nth-child(2){animation-duration:46s;animation-direction:reverse}.vf-wall_col:nth-child(3){animation-duration:42s}
@keyframes vf-up{to{transform:translateY(calc(-50% - 6px))}}
.vf-wall .vf-ad{border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.14);flex:none}
.vf-wall_tag{position:absolute;z-index:4;left:6px;right:6px;bottom:6px;padding:5px 8px;border-radius:6px;background:rgba(10,8,24,.8);backdrop-filter:blur(6px);font:400 10px/1.4 var(--vf-mono);color:#C9CED6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-wall_tag b{color:#fff;font-weight:500}
.vf-hc_count{display:flex;align-items:baseline;gap:10px;font:400 13px var(--vf-mono);color:rgba(255,255,255,.65)}
.vf-hc_count b{font:500 clamp(1.5rem,1rem + 1.4vw,2.25rem)/1 Geist,sans-serif;color:#fff;font-variant-numeric:tabular-nums}

/* ── Responsive r05 ────────────────────────────────────────── */
@media (max-width:991px){
  .vf-tabs{grid-template-columns:repeat(6,minmax(9rem,1fr));overflow-x:auto;scrollbar-width:none}
  .vf-ai_grid{grid-template-columns:1fr}
  .vf-faq{grid-template-columns:1fr;gap:var(--vf-4)}.vf-faq_side{position:static}
  .vf-hb_flow{grid-template-columns:1fr;gap:var(--vf-3)}.vf-hb_wire{width:1px;height:24px;margin:0 auto;background:repeating-linear-gradient(rgba(255,255,255,.55) 0 4px,transparent 4px 9px);animation:none}
  .vf-hc{grid-template-columns:1fr}.vf-wall{width:100%;height:26rem;grid-template-columns:repeat(2,minmax(0,1fr))}.vf-wall_col:nth-child(3){display:none}
  .vf-stage_tags{display:none}
}
@media (max-width:600px){
  .vf-frame{padding:6px;border-radius:18px}.vf-stage{border-radius:13px}
  .vf-stage[data-seg="0"]{--s:2.3;--tx:-22%;--ty:-112%}
  .vf-stage[data-seg="1"]{--s:2.2;--tx:0%;--ty:-10%}
  .vf-stage[data-seg="2"],.vf-stage[data-seg="3"],.vf-stage[data-seg="4"]{--s:2.4;--tx:-74%;--ty:-18%}
  .vf-faq_q{grid-template-columns:1.8rem minmax(0,1fr) 2rem;padding:16px}.vf-faq_a>div{padding:0 16px}
  .vf-review{bottom:12px;right:8px}
}
@media (prefers-reduced-motion:reduce){
  .vf-aurora i,.vf-wave i,.vf-wall_col,.vf-hb_wire{animation:none!important}
  .vf-ad video{transition:none}
}

/* ── Ajustes tras revisar las capturas ─────────────────────── */
/* los haces de luz se alargan para que no se vea dónde terminan */
.vf-aurora i:nth-child(-n+3){top:-90%;height:300%}
/* el recuadro de Auto-Fit solo aparece en su pestaña */
.vf-stage[data-seg="2"] .vf-ed_safe{opacity:0}.vf-stage[data-seg="3"] .vf-ed_safe{opacity:1}
.vf-stage[data-seg="2"]{--s:1.62;--tx:-22%;--ty:-9%}
.vf-stage_tags{left:2.5%}
/* hero B: el recorrido tiene que caber en la primera pantalla */
.vf-hb{gap:var(--vf-4);padding:0 0 var(--vf-5)}
.vf-hb .vf-h1{font-size:clamp(2rem,.9rem + 2.5vw,3.1rem);max-width:24ch}
.vf-hb .vf-hero_copy{gap:var(--vf-2)}
.vf-hb .vf-hero_sub{font-size:1.0625rem}
.vf-hb_flow{grid-template-columns:minmax(0,1.2fr) 44px minmax(0,.72fr) 44px minmax(0,1.1fr)}
/* hero C: la etiqueta de datos no pisa el titular */
.vf-wall .vf-ad_hl{bottom:19%}.vf-wall .vf-ad_st{bottom:15%}
/* móvil: el recorrido del hero B va en columna y la etiqueta no se sale */
@media (max-width:991px){
  .vf-hb_flow{grid-template-columns:1fr;gap:var(--vf-3)}
  .vf-hb_card{max-width:22rem;margin:0 auto;width:100%}
  .vf-hero_eye{max-width:100%;text-align:center}
  .vf-review{font-size:10px;white-space:nowrap}.vf-review button{padding:6px 8px}.vf-review span{display:none}
}