/* r22 · Router: logos de marca donde existen y tipografía más fina; cifra de los casos más fina; fichas de herramientas en la tipo de texto y con logo mayor */
/* El texto iba en <b> sin peso propio: heredaba «bolder» (700) en vez del peso de su contenedor */
.vf-r2_col li b{font-weight:450}
.vf-r2_col .vf-lg{fill:currentColor;stroke:none}
.vf-r2_col li.is-on .vf-lg{color:var(--c)}
.vf-cs_one strong b{font-weight:inherit}
.vf-rt_tools span,.vf-demo_tools div span{height:44px;padding:0 16px 0 12px;gap:10px;border-radius:12px;font-family:inherit;font-size:15px;font-weight:500;letter-spacing:-.005em}
.vf-rt_tools img,.vf-demo_tools div img{height:24px}
/* Fundadores: foto grande en tarjeta (ref. greet.video) en vez de avatar de 48 px */
.vf-sig{grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:1fr auto 1fr;gap:var(--vf-3) clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(.75rem,1.4vw,1.25rem);border:0;border-radius:28px;background:var(--vf-g100)}
.vf-sig img{grid-row:1/-1;width:100%;height:auto;aspect-ratio:3/2;border-radius:18px;object-position:50% 25%}
.vf-sig p{grid-row:1;align-self:end;max-width:22em;padding-right:var(--vf-3);font-size:clamp(1.25rem,.9rem + 1.1vw,1.75rem);line-height:1.3;letter-spacing:-.02em;text-wrap:pretty}
.vf-sig a{grid-row:2;justify-self:start;align-self:start}
@media (max-width:800px){
  .vf-sig{grid-template-columns:minmax(0,1fr);grid-template-rows:none;padding:12px 12px var(--vf-3)}
  .vf-sig img,.vf-sig p,.vf-sig a{grid-row:auto;grid-column:1}.vf-sig p,.vf-sig a{padding:0 8px}
}
/* Mismo fallo en todas las cifras con contador: el <b data-count> subía a 700 */
b[data-count]{font-weight:inherit}
/* Logos de clientes del mosaico de resultados: más presencia */
.vf-k1_l img{height:38px;max-height:none;max-width:76%}
@media (max-width:991px){.vf-k1_l img{height:26px}}
/* La foto original trae incrustada la etiqueta «AI GENERATED» abajo a la derecha: se recorta el 15 % inferior (anclada arriba) */
.vf-sig img{aspect-ratio:16/9;object-position:50% 0}
/* BMW: con brightness(0) los cuadrantes azul y blanco se fundían en un disco negro; en escala de grises se conservan */
.vf-k1_l img[src*="bmw"]{filter:grayscale(1) contrast(2.4)}
/* Use cases: la línea empieza en el primer nodo y acaba en el último (antes sobresalía por arriba y por abajo) */
.vf-ucs_rail{background:none}
.vf-ucs_rail::before{content:"";position:absolute;left:0;right:0;top:var(--a,0px);bottom:var(--z,0px);border-radius:2px;background:rgba(10,14,22,.08)}
.vf-ucs_rail b{top:var(--a,0px);bottom:var(--z,0px)}
/* Hero en móvil: el marco conservaba el radio de escritorio (24 px) con un bisel de 6 px; pasa a 16 px, concéntrico con el producto (10 px) */
@media (max-width:767px){.vf-h12_prod.vf-bezel,.vf-h12_frame{border-radius:16px}}

/* ── r22 · Pasada de móvil ── */
@media (max-width:767px){
  /* Rótulo del hero en una línea */
  .vf-hero_eye{white-space:nowrap;max-width:none;padding:4px 10px;font-size:min(12px,2.6vw);letter-spacing:.03em}
  /* Franja de logos: más aire entre marcas */
  .marquee_sec .collection-list{gap:2.75rem;padding-inline:1.375rem}
  /* Tarjeta de prueba social: menos margen lateral para que el contenido respire */
  .vf-sec-proof.section-bg-fade,.vf-sec-proof .section-bg-fade{padding-inline:20px}
  /* «Sagt hallo zu»: cada frase en una línea */
  .ticker_window{font-size:min(1.5rem,5vw)}
  .ticker_item{white-space:nowrap;height:var(--ticker-row-h);line-height:var(--ticker-row-h);padding-block:0}
  /* Cifras: lista alineada (cifra a la izquierda, texto a la derecha) y cifra mayor */
  .highlights-grid{gap:0!important;margin-top:var(--vf-2)}
  .highlights-block{display:grid!important;grid-template-columns:8.75rem minmax(0,1fr);align-items:center;gap:12px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14);text-align:left}
  .highlights-block:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
  .highlights-title{justify-content:flex-start!important;width:auto}
  .highlights-title .u-text-style-h1{font-size:2.125rem;line-height:1;letter-spacing:-.03em}
  /* Testimonios: texto algo menor, persona alineada a la izquierda y pegada a la navegación */
  .vf-tq.is-in-card{gap:20px}
  .vf-tq.is-in-card .vf-tq_item{grid-template-rows:1fr auto;gap:20px}
  .vf-tq.is-in-card blockquote,.vf-tq.is-in-card .vf-tq_item.is-long blockquote{font-size:1.0625rem;line-height:1.4}
  .vf-tq_who{gap:12px}.vf-tq_who img{width:56px}
  .vf-tq_who figcaption{margin:0;text-align:left;align-items:flex-start}
  /* Router: sin los rótulos de columna sobra el margen superior */
  .vf-r2{padding-top:16px;padding-bottom:60px}
  /* Fichas de herramientas: rótulo en su línea y fichas en rejilla de tres */
  .vf-rt_tools{gap:8px}
  .vf-rt_tools::after{content:"";order:0;flex:0 0 100%;height:0}
  .vf-rt_tools span{order:1;flex:1 1 calc(33.333% - 8px);justify-content:center;height:42px;padding:0 8px;gap:8px;font-size:14px}
  .vf-rt_tools img{height:20px}
  /* Hoja de cálculo dentro del marco: cabe entera, con margen igual por los cuatro lados */
  .vf-gs{padding:10px}
  .vf-gs tbody tr:nth-child(n+6){display:none}
  .vf-gs table{font-size:9.5px}.vf-gs td,.vf-gs th{padding:5px}
  .vf-gs td:first-child,.vf-gs th:first-child{display:none}.vf-gs td:nth-child(2),.vf-gs th:nth-child(2){border-left:0;padding-left:12px}
  /* Carruseles con scroll horizontal: se desvanecen en el borde derecho */
  .vf-cs_tabs{padding-right:40px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
}
@media (max-width:991px){
  .vf-s2_bar::after{content:"";position:sticky;right:-6px;flex:none;align-self:stretch;width:44px;margin:-6px -6px -6px -44px;border-radius:0 18px 18px 0;background:linear-gradient(90deg,rgba(242,243,245,0),var(--vf-g100) 85%);pointer-events:none}
  .vf-s2_bar .vf-tabs{padding-right:36px}
}
@media (max-width:767px){
  /* Hero → franja de logos: menos hueco */
  .vf-hero{padding-bottom:24px}
  .marquee_sec>.g_section_space:first-child{display:none}
  /* Demo: el fondo va a sangre (sin tarjeta exterior) y la tarjeta blanca es una sola pieza */
  .vf-demo{margin-inline:0;padding:40px 16px;border-radius:0}
  .vf-demo_card{background:#fff;border-radius:20px}
  .vf-demo_l{padding:24px 20px;gap:var(--vf-4);background:none}
  .vf-demo_r{padding:0 12px 12px;border-radius:0;background:none}
  .vf-demo_tools div span{flex:1 1 calc(33.333% - 8px);justify-content:center;height:42px;padding:0 8px;gap:8px;font-size:14px}
  .vf-demo_tools div img{height:20px}
}

/* ── r22 · Tipografía de las animaciones: la mono pasa a la del cuerpo (Geist). Solo los rótulos en mayúsculas conservan Roboto Mono, como los «rooftop» de la web original ── */
:root,body{--vf-mono:Geist,system-ui,sans-serif;--vf-code:Robotomono,"Roboto Mono",monospace}
.vf-eyebrow,.vf-hero_eye,.vf-ai_tag,.vf-tq_sep,.vf-r2_lab,.vf-rt_lab,.vf-uc_meta,.vf-kpis_lab,.vf-cs_lab,.vf-hb_lab,.vf-lang a{font-family:var(--vf-code)}
.vf-il_clock b,.vf-il-time li small,.vf-sc_cd,.vf-hc_count,.vf-r2_log{font-variant-numeric:tabular-nums}
.vf-r2_log{font-size:13px}
/* Use cases: canal y fase como dos fichas dentro de la tarjeta (antes, texto suelto pegado a la esquina) */
.vf-uc_meta{align-items:center}
.vf-uc_meta span,.vf-uc_meta b{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08);font-size:10.5px;line-height:1.3;white-space:nowrap}
.vf-uc_meta b{background:rgba(183,176,245,.16)}
@media (max-width:991px){.vf-ucs_stage{padding:14px;gap:12px}}
@media (max-width:767px){
  /* Router: filas más juntas */
  .vf-r2_col{height:138px}.vf-r2_col li{height:46px}
  .vf-r2{gap:2px}
}
@media (max-width:991px){
  /* Use cases en móvil: el texto del paso no espera atenuado; aparece antes y más rápido */
  .vf-ucs_steps li{min-height:38lvh;opacity:.55;transition:opacity .2s}
  /* las escenas se relevan al instante: la saliente desaparece sin fundido y la entrante entra en 120 ms, sin hueco en medio */
  .vf-sc{transition:none;transform:none}
  .vf-sc.is-on{transition:opacity .12s}
}
/* Menú móvil: los dos idiomas en una fila (antes, uno por línea con el «·» separador suelto en medio) */
.vf-nv_mob li.vf-lang_m,.vf-nav_mob li.vf-lang_m{display:flex;align-items:center;gap:10px;padding:16px 0 6px;border-bottom:0}
.vf-nv_mob li.vf-lang_m>a,.vf-nav_mob li.vf-lang_m>a{display:inline;padding:0;font-size:15px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.55)}
.vf-nv_mob li.vf-lang_m>a[aria-current="true"],.vf-nav_mob li.vf-lang_m>a[aria-current="true"]{color:#fff}
@media (max-width:991px){
  /* La causa del retardo: en móvil la pieza de salida seguía esperando 0,95 s a una secuencia (señales → vidflare) que aquí está oculta */
  .vf-sc.is-j2 .vf-j2_out{transition:none}
  .vf-sc.is-j2.is-on .vf-j2_out{opacity:1;transition:opacity .15s}
}
/* Fundadores (escritorio): frase arriba y enlace anclado abajo */
@media (min-width:801px){
  .vf-sig{grid-template-rows:1fr auto}
  .vf-sig img{grid-row:1/-1}
  .vf-sig p{grid-row:1;align-self:start;padding-top:clamp(.75rem,1.6vw,1.5rem)}
  .vf-sig a{grid-row:2;align-self:end;padding-bottom:clamp(.75rem,1.6vw,1.5rem)}
}
@media (max-width:991px){
  /* Escenas: radio interior = radio del marco − su margen (16 − 10 = 6; teléfono 28 − 10 = 18) */
  .vf-j2_out .vf-j2_m{border-radius:6px}
  .vf-j2_out.v-phone .vf-j2_m{border-radius:18px}
  .vf-j2_out.v-web .vf-j2_m,.vf-j2_out.v-push .vf-j2_m{border-radius:0}
}
/* Fundadores: nombres manuscritos con flecha (ref. greet.video) */
.vf-sig{position:relative}
.vf-sig_n{position:absolute;z-index:2;display:flex;align-items:flex-start;gap:4px;font:600 30px/1 Caveat,"Bradley Hand",cursive;color:var(--vf-purple);pointer-events:none}
.vf-sig_n svg{width:54px;height:54px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vf-sig_n.is-h{left:30%;top:-46px}.vf-sig_n.is-h b{font-weight:600;transform:rotate(-4deg);margin-top:-2px}
.vf-sig_n.is-h svg{order:-1;margin-top:10px}
.vf-sig_n.is-p{left:4%;bottom:-48px;align-items:flex-end}.vf-sig_n.is-p b{font-weight:600;transform:rotate(-5deg);margin-bottom:-2px}
.vf-sig_n.is-p svg{margin-bottom:12px}
@media (max-width:800px){.vf-sig_n{display:none}}
@media (max-width:767px){.vf-bn .bento_card.is-5{gap:20px}}
/* Tarjeta «Live in Stunden»: el primer render ocupa el alto sobrante de la tarjeta, así no queda hueco entre la imagen y el título */
.vf-bn .bento_card.is-5>.vf-il-time{flex:1 1 auto;grid-template-rows:auto auto minmax(0,1fr)}
.vf-bn .bento_card.is-5 .vf-il_first{aspect-ratio:auto;min-height:150px;height:100%}
/* Tarjeta «Ein Setup, alle Formate»: el lienzo ocupa el alto sobrante (mismo criterio que «Live in Stunden») */
.vf-bn .bento_card.is-3>.vf-il-fmt{flex:1 1 auto}
.vf-bn .bento_card.is-3 .vf-il_box{flex:1 1 auto;height:auto;min-height:150px}
@media (min-width:992px){
  .vf-bn .bento_card.is-3 .vf-il_fr{width:240px;height:135px}
  .vf-bn .bento_card.is-3 .vf-il-fmt[data-f="1"] .vf-il_fr{width:164px;height:164px}
  .vf-bn .bento_card.is-3 .vf-il-fmt[data-f="2"] .vf-il_fr{width:98px;height:174px}
}
/* Router: las dos ruedas se pueden girar (clic en una fila o arrastre con el ratón) */
.vf-r2_col li span{cursor:pointer}
.vf-r2_col{cursor:grab;-webkit-user-select:none;user-select:none}.vf-r2_col.is-drag{cursor:grabbing}
.vf-r2_col.is-drag ul{transition:none!important}
.vf-r2_col li:not(.is-on):hover span{opacity:.85}