.vh-home{background:var(--vh-bg)}.vh-home-intro{max-width:1380px;margin:auto;padding:42px 24px 30px}.vh-home-intro-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}.vh-home-intro-top .vh-kicker{margin:0}
.vh-home-title-row{position:relative;display:block;margin-bottom:18px}
.vh-home-intro h1{max-width:1050px;font-size:clamp(42px,7.5vw,108px);margin:0 0 24px;letter-spacing:-.065em;text-wrap:balance}.vh-home-intro .vh-home-title-row h1{min-width:0;margin-bottom:0;line-height:.98}.vh-home-intro>p{max-width:600px;margin:0;font-size:18px;color:var(--vh-muted);font-weight:300}
.vh-line-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.vh-chapter{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,88px);align-items:center;min-height:90svh;padding:60px max(24px,calc((100vw - 1320px)/2));border-top:1px solid var(--vh-border);overflow:clip}
.vh-chapter.vh-chapter-alt{background:#101011}.vh-chapter.vh-chapter-alt .vh-chapter-media{order:2}.vh-chapter-media{position:relative;min-width:0}.vh-chapter-media .vh-media{max-height:75svh}
/* Overlay clickeable: la foto/video no llevaba a la ficha de producto. Detras
   del "Ver video" (vh-media-link, z-index:2) para no robarle el click. */
.vh-chapter-media-link{position:absolute;inset:0;z-index:1;cursor:pointer}
/* Se probo align-items:stretch + margin-top:auto en .vh-chapter-purchase para
   empujar precio/CTA al pie: no reducia el espacio vacio, solo lo movia — en
   productos con menos contenido que Ring/Velar (menos specs, sin video) dejaba
   un hueco enorme entre las specs y el precio. Vuelta a center, como estaba
   siempre. */
.vh-chapter-copy{min-width:0}

/* Reusable Home video stages. Authoring contract: docs/home-video-system.md */
.vh-home-video-stage{
  --vh-video-accent:#a2befe;--vh-video-frame:#11151d;--vh-video-fit:cover;--vh-video-x:50%;--vh-video-y:50%;
  --vh-video-inset:8px;--vh-video-gutter:16px;--vh-video-inner-radius:20px;
  box-sizing:border-box;width:100%;aspect-ratio:1;margin-inline:auto;overflow:hidden;padding:var(--vh-video-inset);
  border:1px solid color-mix(in srgb,var(--vh-video-accent) 62%,#343a46);border-radius:28px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--vh-video-accent) 24%,#151922),#08090b 52%,color-mix(in srgb,var(--vh-video-accent) 14%,#101319));
  box-shadow:0 24px 64px rgba(0,0,0,.46),0 0 0 1px color-mix(in srgb,var(--vh-video-accent) 8%,transparent),0 0 38px color-mix(in srgb,var(--vh-video-accent) 10%,transparent)
}
.vh-home-video-tone-ice{--vh-video-accent:#a2befe;--vh-video-frame:#111722}
.vh-home-video-tone-violet{--vh-video-accent:#8b5cf6;--vh-video-frame:#171221}
.vh-home-video-tone-orange{--vh-video-accent:#f97316;--vh-video-frame:#21140d}
.vh-home-video-tone-cyan{--vh-video-accent:#14b8a6;--vh-video-frame:#0d1d1c}
.vh-home-video-tone-neutral{--vh-video-accent:#8f98a8;--vh-video-frame:#15171b}
.vh-home-video-fit-cover{--vh-video-fit:cover}.vh-home-video-fit-contain{--vh-video-fit:contain}
.vh-home-video-x-left{--vh-video-x:28%}.vh-home-video-x-center{--vh-video-x:50%}.vh-home-video-x-right{--vh-video-x:72%}
.vh-home-video-y-top{--vh-video-y:28%}.vh-home-video-y-center{--vh-video-y:50%}.vh-home-video-y-bottom{--vh-video-y:72%}
.vh-home-video-stage>:is(.vh-home-video-fallback,[data-vh-poster],.vh-home-product-video,[data-vh-scroll-video]){
  position:absolute;inset:var(--vh-video-inset);display:block;width:calc(100% - var(--vh-video-gutter));height:calc(100% - var(--vh-video-gutter));
  border-radius:var(--vh-video-inner-radius);object-fit:var(--vh-video-fit);object-position:var(--vh-video-x) var(--vh-video-y);background:var(--vh-video-frame);mix-blend-mode:normal;transform:none
}
.vh-home-video-stage>:is(.vh-home-video-fallback,[data-vh-poster]){z-index:1}.vh-home-video-stage>:is(.vh-home-product-video,[data-vh-scroll-video]){z-index:2}
.vh-home-video-stage.vh-video-ready>.vh-home-video-fallback{visibility:hidden}
.vh-home-video-stage .vh-home-video-vignette{position:absolute;inset:var(--vh-video-inset);z-index:3;display:block;border-radius:var(--vh-video-inner-radius);pointer-events:none}
.vh-home-video-stage-studio .vh-home-video-vignette{
  background:radial-gradient(ellipse at 50% 48%,transparent 52%,rgba(8,10,14,.08) 66%,rgba(8,10,14,.38) 84%,rgba(8,10,14,.82) 100%),linear-gradient(90deg,rgba(8,10,14,.34),transparent 12%,transparent 88%,rgba(8,10,14,.34));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vh-video-accent) 18%,transparent),inset 0 0 42px rgba(5,7,10,.22)
}
/* Orbis shares the neutral editorial frame used by the lifestyle video. */
.vh-home .vh-home-orbis-video-frame{
  --vh-video-inset:0px;--vh-video-gutter:0px;--vh-video-inner-radius:19px;
  padding:0;border:1px solid #343740;border-radius:20px;background:#0c0e11;
  box-shadow:0 24px 60px rgba(0,0,0,.3)
}
.vh-home .vh-home-orbis-video-frame .vh-home-video-vignette{
  box-shadow:inset 0 0 0 1px rgba(162,190,254,.08),inset 0 -50px 80px rgba(0,0,0,.16)
}
.vh-home-video-stage-cinematic{
  --vh-video-inset:4px;--vh-video-gutter:8px;--vh-video-inner-radius:18px;aspect-ratio:16/9;border-radius:22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--vh-video-accent) 22%,#10131a),#07080a);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 44px color-mix(in srgb,var(--vh-video-accent) 12%,transparent)
}
.vh-home-video-stage-cinematic .vh-home-video-vignette{background:linear-gradient(90deg,rgba(5,7,10,.48),transparent 16%,transparent 84%,rgba(5,7,10,.48)),linear-gradient(180deg,rgba(5,7,10,.2),transparent 24%,transparent 76%,rgba(5,7,10,.38))}
.vh-home-video-stage-editorial{
  --vh-video-inset:0px;--vh-video-gutter:0px;--vh-video-inner-radius:30px;width:92%;aspect-ratio:4/5;padding:0;border:0;border-radius:30px;
  background:var(--vh-video-frame);box-shadow:0 34px 90px rgba(0,0,0,.48),0 0 54px color-mix(in srgb,var(--vh-video-accent) 14%,transparent)
}
.vh-home-video-stage-editorial .vh-home-video-vignette{background:radial-gradient(ellipse at 50% 46%,transparent 58%,rgba(7,9,12,.12) 76%,rgba(7,9,12,.72) 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vh-video-accent) 16%,transparent)}
@media(min-width:768px){
  .vh-home-video-stage-studio{width:min(84%,540px)}
  .vh-home-video-stage-cinematic{width:min(108%,760px)}
  .vh-home-video-stage-editorial{width:min(90%,560px)}
  /* Orbis uses a landscape product window instead of the generic square. */
  .vh-home .vh-home-orbis-video-frame{width:min(96%,620px);aspect-ratio:4/3}
}
.vh-chapter-copy{min-width:0}
.vh-chapter-copy .vh-kicker{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px 10px}
.vh-chapter-copy .vh-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--vh-accent);flex:0 0 auto}
.vh-home-kicker-brand{color:var(--vh-muted)}
.vh-chapter-badge-row{margin:0 0 10px}
.vh-chapter-badge{display:inline-block;padding:5px 10px;border:1px solid var(--vh-accent);border-radius:6px;font:600 10px/1 "Open Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--vh-accent);white-space:nowrap}
.vh-chapter-copy h2{position:relative;font-size:clamp(34px,4.6vw,70px);margin:0;padding-bottom:20px;overflow-wrap:anywhere}
.vh-chapter-copy h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;border-radius:3px;background:var(--vh-accent);box-shadow:0 0 18px -2px var(--vh-accent);opacity:.95}
.vh-chapter-title-link{color:inherit;text-decoration:none;transition:color .18s ease,opacity .18s ease}
.vh-chapter-title-link:focus-visible{outline:2px solid var(--vh-accent);outline-offset:5px;border-radius:4px}
@media(hover:hover) and (pointer:fine){.vh-chapter-title-link:hover{color:color-mix(in srgb,var(--vh-text) 78%,var(--vh-accent))}}
.vh-home-category-tag{display:inline-flex;min-height:21px;padding:4px 7px;align-items:center;justify-content:center;border-radius:6px;color:#fff;font:700 9px/1 var(--vh-font-ui);letter-spacing:.07em;white-space:nowrap}
.vh-home-category-tag-gamer{background:#7c3aed}.vh-home-category-tag-sport{background:#f97316}.vh-home-category-tag-anc{background:#2563eb}.vh-home-category-tag-daily{background:#64748b}.vh-home-category-tag-health{background:#14b8a6}.vh-home-category-tag-hifi{background:#d31f2f;color:#fff}
.vh-chapter-purchase{display:grid;justify-items:start;gap:12px;margin-top:24px}.vh-chapter-purchase .vh-action{margin-top:8px}
.vh-home .vh-chapter .vh-price{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.04em;line-height:1.02}
.vh-home .vh-chapter .vh-compare{font-size:13px}
.vh-home .vh-action{justify-content:center;gap:10px;padding:17px 30px;font-size:15px;min-height:54px;border-radius:12px!important}
.vh-home .vh-action .vh-action-arrow{display:inline-block;transition:transform .2s ease}
.vh-home .vh-action:hover{opacity:1;filter:brightness(1.06)}
.vh-home .vh-action:hover .vh-action-arrow,.vh-home .vh-action:hover span:last-child{transform:translateX(5px)}
.vh-home-outro{display:grid;justify-items:center;gap:18px;padding:72px 24px 76px;text-align:center}.vh-home-outro-separator{width:min(100%,1080px);height:1px;margin:0 0 16px;background:linear-gradient(90deg,transparent,rgba(162,190,254,.76),transparent);box-shadow:0 0 16px rgba(162,190,254,.18)}.vh-home-outro-title{max-width:620px;margin:0;color:var(--vh-text);font-size:clamp(30px,4vw,52px);font-weight:800;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}.vh-mobile-backtop{display:none}.vh-home [data-vh-home-products]:empty{display:none}

/* Editorial navigation is intentionally distinct from transactional buttons. */
.vh-navigation-cta{display:inline-flex;min-height:50px;padding:0 23px;align-items:center;justify-content:center;gap:11px;border:1px solid color-mix(in srgb,var(--vh-text) 22%,transparent);border-radius:999px;background:color-mix(in srgb,#11141a 88%,transparent);color:var(--vh-text);font:700 13px/1 var(--vh-font-ui);letter-spacing:.015em;text-decoration:none;white-space:nowrap;transition:border-color .18s ease,background-color .18s ease,color .18s ease}.vh-navigation-cta-arrow{display:inline-block;transition:transform .18s ease}.vh-navigation-cta:focus-visible{outline:2px solid var(--vh-accent);outline-offset:3px}.vh-navigation-cta:hover{border-color:var(--vh-accent);background:color-mix(in srgb,var(--vh-accent) 10%,#11141a);color:var(--vh-text)}.vh-navigation-cta:hover .vh-navigation-cta-arrow{transform:translateX(4px)}
.vh-navigation-cta-hero{min-width:166px;min-height:40px;margin-top:24px;padding:0 20px;border:1px solid color-mix(in srgb,var(--vh-text) 32%,transparent);background:transparent;color:var(--vh-text);justify-content:space-between}.vh-navigation-cta-hero:hover{border-color:var(--vh-accent);background:color-mix(in srgb,var(--vh-accent) 7%,transparent);color:var(--vh-text)}

.vh-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Hover micro-interactions (pointer devices only). */
.vh-chapter-media .vh-media{transition:box-shadow .45s ease}
.vh-chapter-media .vh-media>[data-vh-poster]{scale:1;transition:scale .32s cubic-bezier(.2,.75,.25,1)}
/* Velar ANC needs slightly more breathing room in its Home composition. The
   product-specific class is emitted from its identity, so catalog/PDP media
   and every other Home product keep their original scale. */
.vh-home .vh-product-velar-anc .vh-chapter-media .vh-media>[data-vh-poster]{scale:.84}
.vh-home :is(.vh-product-sona,[data-vh-details-source*="vanhaus-studio-pro"]) .vh-chapter-media .vh-media>[data-vh-poster]{scale:.78}
/* La foto del Studio Pro trae el cable cortado abajo: solo el último tramo se
   disuelve para que no se vea la línea de corte sobre el fondo oscuro. */
.vh-home :is(.vh-product-sona,[data-vh-details-source*="vanhaus-studio-pro"]) .vh-chapter-media .vh-media>[data-vh-poster]{-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 99%);mask-image:linear-gradient(to bottom,#000 80%,transparent 99%)}

@media(hover:hover) and (pointer:fine){
  .vh-chapter-media .vh-media:hover>[data-vh-poster]{scale:1.045}
  .vh-home .vh-product-velar-anc .vh-chapter-media .vh-media:hover>[data-vh-poster]{scale:.88}
  .vh-home :is(.vh-product-sona,[data-vh-details-source*="vanhaus-studio-pro"]) .vh-chapter-media .vh-media:hover>[data-vh-poster]{scale:.82}
  .vh-chapter-media .vh-media:hover::before{opacity:.28}

  


}
@media(prefers-reduced-motion:reduce){
  .vh-chapter-media .vh-media:hover>[data-vh-poster]{scale:1}

}
@media(max-width:767px){
  .vh-home :is(.vh-product-sona,[data-vh-details-source*="vanhaus-studio-pro"]) .vh-chapter-media .vh-media>[data-vh-poster]{scale:.82}
  .vh-home :is(.vh-product-sona,[data-vh-details-source*="vanhaus-studio-pro"]) .vh-chapter-media .vh-media:hover>[data-vh-poster]{scale:.82}
}
@media(min-width:768px) and (max-width:1250px){.vh-home-intro .vh-home-title-row h1{width:62vw}}
@media(max-width:767px){.vh-home-intro{padding:28px 20px 30px}.vh-chapter{grid-template-columns:1fr;gap:16px;padding:28px 20px 44px;min-height:0}.vh-chapter.vh-chapter-alt .vh-chapter-media{order:0}.vh-chapter-media .vh-media{aspect-ratio:1.15;max-height:48svh}.vh-chapter-copy .vh-kicker{margin-bottom:12px}.vh-chapter-copy h2{font-size:36px}.vh-chapter-purchase{gap:9px}.vh-home .vh-chapter .vh-price{font-size:clamp(30px,8vw,36px)}.vh-home-intro-top{margin-bottom:18px}.vh-home-title-row{margin-bottom:16px}.vh-home-intro .vh-home-title-row h1{width:100%}.vh-home-intro h1{max-width:11ch;font-size:clamp(32px,10.2vw,42px);letter-spacing:-.05em}.vh-home-intro>p{max-width:34ch;font-size:16px;line-height:1.55}.vh-home-intro .vh-line-nav{display:none!important}.vh-home .vh-action{width:100%;padding:16px 24px}.vh-navigation-cta-hero{min-height:44px;margin-top:20px;padding:8px 0;font-size:13px}.vh-home-outro{gap:16px;padding:48px 20px 56px}.vh-home-outro-title{font-size:clamp(28px,9vw,38px)}.vh-home-outro .vh-navigation-cta{min-height:50px;padding:0 22px}}

/* HOME: editorial highlights sized by their available container. */
[data-vh-spec-host][hidden]{display:none!important}
.vh-home-highlights-host{container-type:inline-size;min-width:0}
.vh-home-highlights{display:grid;grid-template-columns:repeat(var(--vh-highlight-count,4),minmax(0,1fr));gap:8px;margin:22px 0 4px}
/* Mismo formato de 3 líneas que la ficha (valor/label/uso): Home reusa
   .vh-spec (specCardElement) con esta clase extra para su propio tamaño,
   así el orden real es dd(valor) → dt(label) → p.vh-spec-context(uso). Los
   selectores van con .vh-home-highlights por delante para ganarle a las
   reglas genéricas de .vh-spec de otros módulos, sin depender del orden
   de carga de los CSS. */
.vh-home-highlights{align-items:stretch}
/* Fondo casi transparente a propósito: la card acompaña, no compite con foto/CTA. */
.vh-home-highlights .vh-home-highlight{box-sizing:border-box;min-width:0;min-height:112px;height:100%;padding:14px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;background:rgba(255,255,255,.008);border:1px solid rgba(255,255,255,.035);border-radius:8px;box-shadow:none;transition:background-color .2s ease,border-color .2s ease}
/* El valor NUNCA va a 2 renglones: nowrap + una letra que se achica según el
   ancho real disponible (cqi), no un tamaño fijo que pueda desbordar. La
   frase de uso sigue sin nowrap/line-clamp — si es larga, la card crece
   (align-items:stretch iguala la fila) en vez de cortarla con "...". */
.vh-home-highlights .vh-home-highlight dd{order:0;margin:0;font-family:var(--vh-font-display);font-size:clamp(15px,4.2cqi,20px);font-weight:800;line-height:1.1;letter-spacing:-.02em;white-space:nowrap;color:var(--vh-accent)!important}
.vh-home-highlights .vh-home-highlight dt{order:1;margin:0;font-size:9px;font-weight:700;line-height:1.25;letter-spacing:.05em;text-transform:uppercase;overflow-wrap:break-word;color:#f3f5f7!important}
.vh-home-highlights .vh-home-highlight .vh-spec-context{order:2;margin:0;font-size:10.5px;font-style:italic;font-weight:400;line-height:1.4;color:#b4b7bd!important;overflow-wrap:break-word}
@media(min-width:1024px){
  body.vh-system .vh-home .vh-chapter{grid-template-columns:minmax(0,1.1fr) minmax(560px,1fr)}
  body.vh-system .vh-home .vh-chapter.vh-chapter-alt{grid-template-columns:minmax(560px,1.1fr) minmax(0,1fr)}
}
@media(max-width:1023px){
  @container (max-width:559px){.vh-home-highlights{grid-template-columns:repeat(min(var(--vh-highlight-count,4),2),minmax(0,1fr))}}
}
@container (max-width:279px){.vh-home-highlights{grid-template-columns:1fr}}
@media(hover:hover) and (pointer:fine){.vh-home-highlights .vh-home-highlight:hover{background-color:rgba(255,255,255,.025);border-color:rgba(255,255,255,.08)}}
@media(prefers-reduced-motion:reduce){.vh-home-highlight{transition:none}}

/* ===== Home action: one large route to the product page. ===== */
.vh-chapter-actions{display:grid;grid-template-columns:1fr;align-items:end;width:100%;max-width:520px;margin-top:12px}
.vh-chapter-actions>*{width:100%;min-width:0}
.vh-btn{display:flex;width:100%;height:54px;box-sizing:border-box;padding:0 22px;align-items:center;justify-content:center;border-radius:12px;font:700 15px/1.35 var(--vh-font-ui);letter-spacing:-.01em;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none;transition:transform .18s ease,filter .18s ease,border-color .18s ease,color .18s ease,background-color .18s ease}
.vh-btn-solid{background:var(--vh-cta)!important;border:1px solid var(--vh-cta)!important;color:var(--vh-cta-ink)!important}
.vh-btn-ghost{background:color-mix(in srgb,var(--vh-accent) 22%,#15171b)!important;border:1px solid color-mix(in srgb,var(--vh-accent) 45%,transparent)!important;color:var(--vh-accent)!important}
.vh-btn:focus-visible{outline:2px solid var(--vh-accent)!important;outline-offset:3px}
.vh-btn-solid:disabled,.vh-btn-solid.nostock{background:#262831!important;border-color:#484a54!important;color:#b5b6c0!important;cursor:not-allowed}
@media(hover:hover) and (pointer:fine){
  .vh-btn-solid:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.07)}
  .vh-btn-ghost:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--vh-accent) 32%,#15171b)!important;border-color:var(--vh-accent)!important}
}

/* Native-scroll product timeline. Cards never capture the wheel; their position
   only drives the image/title/specs/price/actions reveal. */
html.vh-home-sticky,html.vh-home-sticky body{overflow-x:clip!important;overflow-y:visible!important}
html.vh-home-sticky .vh-home .vh-chapter-stage{position:relative;height:var(--vh-home-card-height,calc(100dvh - 60px));min-height:var(--vh-home-card-height,calc(100dvh - 60px));background:linear-gradient(180deg,#0d0f12,#0a0a0a)}
html.vh-home-sticky .vh-home .vh-chapter-stage>.vh-chapter{position:relative;box-sizing:border-box;height:100%;min-height:100%;margin:0;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#0d0f12,#0a0a0a);box-shadow:0 -1px 0 var(--vh-border)}
@media(min-width:768px){
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter{opacity:1!important;transform:none!important;transition:none!important}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] .vh-chapter-media{opacity:1!important;transform:translate3d(var(--vh-media-x,0px),0,0)!important;transition:transform .12s cubic-bezier(.22,.75,.25,1)!important;will-change:transform}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] :is(.vh-chapter-copy>.vh-kicker,.vh-chapter-badge-row,.vh-chapter-copy>h2,.vh-chapter-copy>.vh-home-product-rating){opacity:var(--vh-title-opacity,0)!important;transform:translate3d(var(--vh-title-x,28px),var(--vh-title-y,18px),0)!important;transition:opacity .1s ease-out,transform .12s cubic-bezier(.22,.75,.25,1)!important}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] .vh-chapter-purchase>.vh-price-block,html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] .vh-chapter-purchase>.vh-stock{opacity:var(--vh-price-opacity,0)!important;transform:translate3d(0,var(--vh-price-y,16px),0)!important;transition:opacity .1s ease-out,transform .12s cubic-bezier(.22,.75,.25,1)!important}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] .vh-chapter-actions{opacity:var(--vh-actions-opacity,0)!important;transform:translate3d(0,var(--vh-actions-y,16px),0)!important;transition:opacity .1s ease-out,transform .12s cubic-bezier(.22,.75,.25,1)!important}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] .vh-home-highlights-host{opacity:var(--vh-spec-opacity,0)!important;transform:translate3d(0,var(--vh-spec-y,18px),0)!important;transition:opacity .1s ease-out,transform .12s cubic-bezier(.22,.75,.25,1)!important}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="true"] :is(.vh-chapter-media,.vh-chapter-copy>.vh-kicker,.vh-chapter-badge-row,.vh-chapter-copy>h2,.vh-chapter-copy>.vh-home-product-rating,.vh-home-highlights-host,.vh-chapter-purchase>*){opacity:1!important;transform:none!important}
}
@media(max-width:767px){
  html.vh-home-sticky .vh-home .vh-chapter-stage{height:auto;min-height:0;background:linear-gradient(180deg,#0d0f12,#0a0a0a)}
html.vh-home-sticky .vh-home .vh-chapter-stage>.vh-chapter{position:relative;top:auto;height:auto;min-height:0;padding:30px 20px 46px;gap:16px;overflow:hidden}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter{opacity:1!important;transform:none!important;transition:none!important}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] .vh-chapter-media{opacity:1!important;transform:translate3d(0,var(--vh-media-y,12px),0)!important;transition:transform .14s cubic-bezier(.22,.75,.25,1)!important;will-change:transform}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] :is(.vh-chapter-copy>.vh-kicker,.vh-chapter-badge-row,.vh-chapter-copy>h2,.vh-chapter-copy>.vh-home-product-rating){opacity:var(--vh-title-opacity,0)!important;transform:translate3d(0,var(--vh-title-y,18px),0)!important;transition:opacity .12s ease-out,transform .14s cubic-bezier(.22,.75,.25,1)!important}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] .vh-chapter-purchase>.vh-price-block,html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] .vh-chapter-purchase>.vh-stock{opacity:var(--vh-price-opacity,0)!important;transform:translate3d(0,var(--vh-price-y,16px),0)!important;transition:opacity .12s ease-out,transform .14s cubic-bezier(.22,.75,.25,1)!important}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] .vh-chapter-actions{opacity:var(--vh-actions-opacity,0)!important;transform:translate3d(0,var(--vh-actions-y,16px),0)!important;transition:opacity .12s ease-out,transform .14s cubic-bezier(.22,.75,.25,1)!important}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="false"] .vh-home-highlights-host{opacity:var(--vh-spec-opacity,0)!important;transform:translate3d(0,var(--vh-spec-y,18px),0)!important;transition:opacity .12s ease-out,transform .14s cubic-bezier(.22,.75,.25,1)!important}
  html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter[data-vh-revealed="true"] :is(.vh-chapter-media,.vh-chapter-copy>.vh-kicker,.vh-chapter-badge-row,.vh-chapter-copy>h2,.vh-chapter-copy>.vh-home-product-rating,.vh-home-highlights-host,.vh-chapter-purchase>*){opacity:1!important;transform:none!important}
  html.vh-home-sticky .vh-home .vh-chapter-stage .vh-chapter-media{display:grid;place-items:center;width:100%}
  html.vh-home-sticky .vh-home .vh-chapter-stage .vh-chapter-media .vh-media{width:min(80vw,360px);height:auto;max-height:none;aspect-ratio:1;margin-inline:auto}
  html.vh-home-sticky .vh-home .vh-chapter-stage .vh-chapter-media .vh-media.vh-home-orbis-video-frame{width:min(90vw,420px);aspect-ratio:4/3}
  html.vh-home-sticky .vh-home .vh-chapter-stage .vh-chapter-copy h2{font-size:36px;padding-bottom:18px}
  html.vh-home-sticky .vh-home .vh-chapter-stage .vh-chapter-copy .vh-kicker{margin-bottom:12px}
html.vh-home-sticky .vh-home .vh-chapter-stage .vh-chapter-purchase{gap:10px;margin-top:18px}
  html.vh-home-sticky .vh-home .vh-chapter-stage .vh-price{font-size:clamp(30px,8vw,36px)}
}
@media(prefers-reduced-motion:reduce){html.vh-home-sticky .vh-home .vh-chapter-stage{min-height:0}html.vh-home-sticky .vh-home .vh-chapter-stage>.vh-chapter{position:relative;top:auto;height:auto;min-height:0}html.vh-home-timeline-ready .vh-home .vh-chapter-stage>.vh-chapter *{opacity:1!important;transform:none!important;transition:none!important}}
/* Variant picker sits above the button: nothing is added without an explicit choice. */
.vh-quick-variants{margin:0}
.vh-quick-variants .form-row{margin:0;display:block}
.vh-quick-variants .js-product-variants-group{margin:0 0 8px}
.vh-quick-variants label,.vh-quick-variants .form-label{display:block;font:600 10px/1.3 "Open Sans",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--vh-muted);margin:0 0 6px}
.vh-quick-variants .form-select,.vh-quick-variants select{width:100%;min-height:46px;padding:0 12px;border-radius:10px;background:var(--vh-raised)!important;border:1px solid #4b4d57!important;color:var(--vh-text)!important;font-size:14px}

/* ===== Pausa narrativa de marca (vh-story) =====
   Deliberadamente distinta de un bloque de producto: sin glow de categoría,
   superficie sólida y neutra, y título más grande. Sin precio ni CTA. */
.vh-story{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(28px,5vw,80px);
  padding:clamp(52px,6vw,84px) max(24px,calc((100vw - 1320px)/2));
  /* Neutro a propósito: el acento de categoría no entra acá. */
  background:linear-gradient(180deg,#141619,#101215);
  border-top:1px solid #26282e;
  border-bottom:1px solid #26282e;
  isolation:isolate;
}
.vh-story-flip .vh-story-media{order:2}
.vh-story-media{min-width:0}
/* Se probo align-items:stretch + margin-top:auto en .vh-story-text (mismo
   criterio que .vh-chapter): no reducia el espacio vacio, lo movia al medio
   entre titulo y texto. Vuelta a center. */
.vh-story-copy{min-width:0}
.vh-story-kicker{margin:0 0 14px;font:600 11px/1.4 "Open Sans",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8f939d}
.vh-story-title{
  margin:0 0 18px;
  /* Más grande que el h2 de producto (clamp 34-70) para que lea como pausa. */
  font-size:clamp(40px,6vw,88px);
  font-weight:900;letter-spacing:-.055em;line-height:.98;
  color:var(--vh-text);text-wrap:balance;overflow-wrap:anywhere;
}
.vh-story-text{margin:0;max-width:46ch;font-size:clamp(16px,1.35vw,19px);line-height:1.65;font-weight:300;color:#b9bdc7}
/* El placeholder de foto no lleva acento acá: gris neutro sobre superficie neutra. */
body.vh-system .vh-story .vh-ph{border-color:#3a3d45}
.vh-story-material-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(150px,.65fr);grid-template-rows:1fr 1fr;gap:12px;aspect-ratio:4/3;min-height:0}
.vh-story-material-grid>.vh-story-material-item{height:100%;min-height:0;margin:0;border:1px solid #343740;border-radius:16px;overflow:hidden;background:#0c0e11;box-shadow:0 18px 44px rgba(0,0,0,.24)}
.vh-story-material-grid>.vh-story-material-item:first-child{grid-row:1/3}
.vh-story-material-grid img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;opacity:1!important;filter:none!important;mix-blend-mode:normal!important}
.vh-story-lifestyle{position:relative;width:100%;aspect-ratio:16/9;margin:0;overflow:hidden;border:1px solid #343740;border-radius:20px;background:#0c0e11;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.vh-story-lifestyle::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(162,190,254,.08),inset 0 -50px 80px rgba(0,0,0,.16)}
.vh-story-lifestyle :is(img,video){display:block;width:100%;height:100%;object-fit:cover;object-position:center;background:#07090b}
.vh-story-lifestyle-video{aspect-ratio:16/9}
body.vh-system .vh-story-lifestyle-video video{object-fit:contain!important;object-position:center top;transform:none!important}
@media(min-width:768px){.vh-story:has(.vh-story-lifestyle-video){grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr)}}

@media(max-width:767px){
.vh-story{grid-template-columns:1fr;gap:20px;padding:40px 20px 44px}
  .vh-story-flip .vh-story-media{order:0}
  .vh-story-kicker{margin-bottom:10px;font-size:10px}
  .vh-story-title{font-size:clamp(34px,11vw,46px);margin-bottom:14px}
  /* Cuerpo legible en pantalla chica, no 13px. */
  .vh-story-text{font-size:16px;line-height:1.6;max-width:none;color:#c2c6cf}
  .vh-story-material-grid{grid-template-columns:1.15fr .85fr;gap:8px;aspect-ratio:1.12}
  .vh-story-lifestyle{border-radius:14px}
  .vh-story-lifestyle-video{aspect-ratio:16/9}
  .vh-story-lifestyle :is(img,video){object-position:62% center}
  .vh-home-outro{
    position:relative;
    display:grid;
    gap:10px;
    padding:48px 20px 46px;
  }
  .vh-home-outro-separator{width:100%;margin:0 0 14px}
  .vh-home-outro .vh-home-catalog-link{width:auto;min-height:50px;justify-self:center;margin:0}
  /* Navigation, not commerce: a quiet text link under the CTA. No box, no fill;
     the 40px tap area is kept invisibly. */
  .vh-mobile-backtop{
    display:inline-flex;
    width:auto;
    min-height:40px;
    margin-top:4px;
    padding:0 8px;
    justify-self:center;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#8b909b!important;
    font:500 12px/1 "Open Sans",Arial,sans-serif;
    letter-spacing:.01em;
    text-decoration:underline!important;
    text-decoration-color:rgba(139,144,155,.4)!important;
    text-underline-offset:4px;
  }
  .vh-mobile-backtop span{font-size:13px;line-height:1;transform:translateY(-1px);text-decoration:none;display:inline-block}
}

/* The Home-to-footer handoff had a second empty black spacer after newsletter. */
body.template-home footer{margin-top:8px;padding-top:44px}
@media(max-width:767px){body.template-home footer .element-footer>.col,body.template-home footer .element-footer>.col-md{margin-bottom:24px}body.template-home footer .divider{margin-bottom:24px!important}}

/* Home atmosphere: one canvas, independent of product/category UI accents.
   The existing site dot overlay remains visible. Top reflections fade within
   the same canvas, so the hero does not introduce another section boundary. */
html .vh-home{
  background-color:#000000;
  background-image:
    radial-gradient(ellipse 85% 17% at 5% 12%,rgba(125,146,188,.23),transparent 78%),
    radial-gradient(ellipse 80% 19% at 95% 34%,rgba(162,190,254,.18),transparent 80%),
    radial-gradient(ellipse 90% 18% at 5% 57%,rgba(125,146,188,.20),transparent 80%),
    radial-gradient(ellipse 80% 18% at 92% 79%,rgba(125,146,188,.21),transparent 80%),
    radial-gradient(ellipse 90% 14% at 24% 98%,rgba(125,146,188,.17),transparent 82%);
  background-size:100% 100%;
  background-repeat:no-repeat;
}

/* Specificity also covers the native-scroll and mobile refinements. */
html .vh-home .vh-chapter-stage,
html .vh-home .vh-chapter-stage>.vh-chapter,
html .vh-home .vh-chapter.vh-chapter-alt,
html .vh-home .vh-story{
  background:transparent;
  border-top-color:transparent;
  border-bottom-color:transparent;
  box-shadow:none;
}
html.vh-home-sticky .vh-home .vh-chapter-stage,
html.vh-home-sticky .vh-home .vh-chapter-stage>.vh-chapter{
  background:transparent;
  box-shadow:none;
}
/* Remove only environmental light, preserving cards, media and UI colors. */
html .vh-home [data-vh-home-products] .vh-chapter.vh-chapter-alt::before,
html .vh-home [data-vh-home-products] .vh-chapter::before,
html .vh-home .vh-chapter-stage .vh-chapter-media .vh-media::before,
html .vh-home .vh-chapter-stage .vh-chapter-media .vh-media::after{
  background:none;
}

/* Actual editorial photograph, with independent fades on every exposed edge.
   Only the decorative layer extends beyond the hero into the shared canvas. */
html .vh-home .vh-home-intro{position:relative;isolation:isolate}
html .vh-home .vh-home-intro::before{
  content:"";
  position:absolute;
  inset:0 0 -180px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.30)),url('../images/vanhaus-hero-ambient.jpg') right center / cover no-repeat;
  mask-image:linear-gradient(90deg,transparent 2%,rgba(0,0,0,.30) 35%,#000 64%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 15%,#000 48%,transparent 100%);
  mask-composite:intersect;
}

/* Material light spills past the editorial block, never forming a panel. */
html .vh-home .vh-story:has(.vh-story-materials)::before{
  content:"";
  position:absolute;
  inset:-180px 0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 65% 50%,rgba(162,190,254,.14),rgba(125,146,188,.05) 40%,transparent 72%);
}
/* The global dotted texture lives at z-index 4. Lift only the macro story so
   the texture remains around the photographs but can never print over them. */
html .vh-home .vh-story:has(.vh-story-materials){z-index:6}

/* Environmental rules only: category UI, cards and blue buttons stay intact. */
html .vh-home .vh-accent-2 .vh-chapter-copy>.vh-kicker::before,
html .vh-home .vh-accent-2 .vh-chapter-copy>h2::after{
  background:#7D92BC;
  box-shadow:0 0 18px -2px #7D92BC;
}

/* Keep the Hero CTA's horizontal hit area when its mobile height is adjusted. */
body.template-home .vh-navigation-cta-hero{padding-inline:20px}

/* Desktop density: product chapters size to their content instead of a
   viewport-tall card. A fixed 90%-of-screen card centred ~500-650px of content
   and left 400-600px black bands between the price of one product and the
   image of the next on tall monitors. Mobile already used height:auto. */
@media(min-width:768px){
  html.vh-home-sticky .vh-home .vh-chapter-stage{height:auto;min-height:0}
  html.vh-home-sticky .vh-home .vh-chapter-stage>.vh-chapter{height:auto;min-height:0;padding-top:clamp(36px,3vw,48px);padding-bottom:clamp(36px,3vw,48px)}
}

/* "Uso real" video: the site-wide dot overlay (body::after, z-index 4) must not
   paint over the footage. The story section isolates, so lift the whole section;
   its transparent areas still show the dots underneath. */
.vh-home .vh-story:has(.vh-story-lifestyle-video){z-index:6}

/* Desktop: native column widths (title stays on two lines on notebooks), with a
   shorter, more panoramic frame. Cover keeps it full; focus on face and earbud. */
@media(min-width:768px){
  .vh-story-lifestyle-video{aspect-ratio:2.3/1}
  body.vh-system .vh-story-lifestyle-video video{object-fit:cover!important;object-position:center 25%}
}
