@charset "utf-8";
/* ==========================================================================
   BANNER LATERAL DISTO.ES - 01 (2026-10-14)
   Mateix sistema que instop.es. Es carrega DESPRES de 2026-normal-instop-40.css
   i substitueix la seva versio antiga del layout del banner lateral.
   1. Seccio VERSIO 32 copiada tal qual de instop.es/css/2026-normal-instop-41.css
   2. Afegit propi de disto: la barra vermella fixa (.disto-page__topbar)
      comenca on acaba el banner, igual que #barra_superior_66 a instop.es.
   Nomes actua quan el <body> porta la classe instop-banner-actiu.
   ========================================================================== */

/* =========================================================
   VERSIO 32 - BANNERS VINCULATS A PRODUCTE INTEGRATS
   Fusionat des de 2026-banners-producte-instop-01.css.
   Aquest bloc queda al final per conservar la prioritat.
   ========================================================= */
/* ==========================================================
   INSTOP · BANNERS VINCULATS A PRODUCTE · 2026-01
   Complement del CSS RAW existent.
   ========================================================== */

:root{
  --instop-product-banner-width:420px;
}

.raw-manual-banner-hidden{display:none!important;}
.raw-product-banner-auto{width:100%;margin:0 auto 18px;}
.raw-product-banner-auto .raw-banner-conjunt{width:100%;height:220px;}
.raw-product-banner-auto .raw-banner-img{width:100%;height:100%;object-fit:cover;}
/* Video: 'contain' en lloc de 'cover'. La caixa es fixa i baixa (160-220px) i molt ampla;
   amb 'cover' un video vertical quedava escapcat quasi del tot per dalt i per baix.
   Amb 'contain' es veu sencer, amb bandes negres als costats quan cal (background
   #000 ja ve heretat de la regla base .raw-banner-video de la linia 5439). */
.raw-product-banner-auto .raw-banner-video{width:100%;height:100%;object-fit:contain;}

.raw-banner-managed .raw-video-toggle{
  position:absolute;
  z-index:20;
  left:16px;
  top:16px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:rgba(30,30,30,.72);
  color:#fff;
  font:700 17px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.raw-banner-managed .raw-video-toggle:hover{background:rgba(0,0,0,.88);}

.instop-page-with-left-banner{width:100%;min-width:0;box-sizing:border-box;}
.instop-banner-vertical-escriptori{display:none;}

@media (min-width:1400px) and (max-width:1699px){:root{--instop-product-banner-width:360px;}}
@media (min-width:1700px) and (max-width:2099px){:root{--instop-product-banner-width:460px;}}
@media (min-width:2100px){:root{--instop-product-banner-width:560px;}}

@media (min-width:1400px){
  body.instop-banner-actiu{overflow-x:hidden;background:#fff;}
  body.instop-banner-actiu .instop-banner-vertical-escriptori{
    display:block;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:var(--instop-product-banner-width);
    height:100vh;
    overflow:hidden;
    background:#eee;
    z-index:0;
  }
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-conjunt,
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-frame,
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-img,
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-video{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
  }
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-img,
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-banner-video{object-fit:cover!important;}
  body.instop-banner-actiu .instop-banner-vertical-escriptori .raw-video-toggle{top:72px;left:16px;}
  body.instop-banner-actiu .instop-page-with-left-banner{
    position:relative;
    z-index:2;
    width:auto;
    min-height:100vh;
    margin-left:var(--instop-product-banner-width);
    background:#fff;
  }
}

@media (max-width:1399px){
  .instop-banner-vertical-escriptori{display:none!important;}
  .instop-page-with-left-banner{width:100%!important;margin-left:0!important;}
}

@media (max-width:768px){
  .raw-product-banner-auto{margin-bottom:12px;}
  .raw-product-banner-auto .raw-banner-conjunt{height:160px;}
  .raw-banner-managed .raw-video-toggle{width:34px;height:34px;top:10px;left:10px;font-size:15px;}
}


/* ==========================================================================
   AFEGIT DISTO: barra vermella a la dreta del banner (>=1400px)
   ========================================================================== */
@media (min-width:1400px){
  body.instop-banner-actiu .disto-page__topbar{left:var(--instop-product-banner-width);right:0;width:auto;}
}

/* Conjunt 104 compartit amb INSTOP RAW. La capcalera l'aplica a totes les pagines. */
.disto-raw-sidebar{display:none!important;}
@media (min-width:1400px){
  body.disto-raw-banners{--disto-raw-banner-width:clamp(280px,calc(100vw - 1080px),510px);box-sizing:border-box;padding-left:var(--disto-raw-banner-width);}
  body.disto-raw-banners .disto-page__topbar{left:var(--disto-raw-banner-width);right:0;width:auto;}
  body.disto-raw-banners .disto-raw-sidebar{display:block!important;position:fixed;inset:0 auto 0 0;width:var(--disto-raw-banner-width);height:100vh;margin:0;padding:0;overflow:hidden;background:#eee;z-index:850;}
  .disto-raw-sidebar .raw-banner-conjunt{width:100%!important;height:100%!important;margin:0;}
  .disto-raw-sidebar .raw-banner-frame{width:100%!important;height:100%!important;}
  .disto-raw-sidebar .raw-banner-img,.disto-raw-sidebar .raw-banner-video{width:100%!important;height:100%!important;object-fit:cover;}
}