/* ============================================================
   SIPE Protection — carrusel de catàlegs de proveïdors
   Les posicions de les portades les calcula catalegs.js a cada
   fotograma (només transform i opacity); aquí hi ha l'aspecte.
   ============================================================ */

.cv{
  --cv-h:clamp(250px, 18vw + 150px, 410px);         /* alçada de la portada */
  --cv-ink:#E9F0F8; --cv-soft:#B4C5DA; --cv-dim:#8DA3BF;
  position:relative;isolation:isolate;overflow:hidden;color:var(--cv-ink);
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(20,64,120,.55), transparent 70%),
    linear-gradient(180deg, #061f3e 0%, var(--blue-900) 55%, #030f1f 100%);
}
.cv .shead{margin-bottom:clamp(.5rem,2vw,1.5rem)}
.cv .shead p{color:var(--cv-soft)}

/* ---------- famílies ---------- */
.cv__fams{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin:0 auto clamp(.25rem,1.5vw,.75rem);max-width:46rem}
.cv__fam{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .85rem;border-radius:999px;font-size:.8rem;font-weight:700;
  color:var(--cv-soft);border:1px solid rgba(255,255,255,.12);background:transparent;transition:color .25s, background .25s, border-color .25s}
.cv__fam sup{font-size:.68rem;font-weight:800;color:var(--cv-dim);top:0;transition:color .25s}
.cv__fam:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.cv__fam[aria-current="true"]{color:#0b1b30;background:#fff;border-color:#fff}
.cv__fam[aria-current="true"] sup{color:var(--red)}
.cv__fam:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- resplendor: una capa per catàleg, es fonen entre elles ---------- */
.cv__halos{position:absolute;left:50%;top:44%;width:0;height:0;z-index:-1;pointer-events:none}
.cv__halo{position:absolute;left:0;top:0;width:min(1150px,170vw);aspect-ratio:1.55;
  translate:-50% -50%;opacity:0;will-change:opacity}

/* ---------- escenari ---------- */
.cv__stage{position:relative;height:calc(var(--cv-h) * 1.18 + 1rem);
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  outline:none}
.cv__stage.is-drag{cursor:grabbing}
/* terra: una llum suau on reposen els llibres */
.cv__stage::after{content:"";position:absolute;left:50%;top:calc(var(--cv-h) + 1.4rem);width:min(1100px,150vw);height:120px;
  translate:-50% -50%;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(160,195,240,.10), transparent 70%)}
.cv__track{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 40%}

.cv__item{position:absolute;left:50%;top:1rem;height:var(--cv-h);width:calc(var(--cv-h) * var(--r,.707));
  margin-left:calc(var(--cv-h) * var(--r,.707) / -2);will-change:transform,opacity;backface-visibility:hidden}

/* el llibre */
.cv__book{position:relative;display:block;width:100%;height:100%;border-radius:3px 7px 7px 3px;
  background:#0d2645;color:#fff;
  box-shadow:0 44px 60px -30px rgba(0,0,0,.85), 0 18px 26px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  -webkit-box-reflect:below 10px linear-gradient(transparent 64%, rgba(255,255,255,.13));
  -webkit-user-drag:none}
.cv__book img{width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none;-webkit-user-drag:none}
/* llom: el plec del cartró a l'esquerra */
.cv__book::before{content:"";position:absolute;inset:0 auto 0 0;width:7%;border-radius:3px 0 0 3px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.34) 0%, rgba(255,255,255,.26) 22%, rgba(255,255,255,0) 48%, rgba(0,0,0,.20) 78%, rgba(0,0,0,0) 100%)}
/* gruix de les pàgines, proporcional a les pàgines del catàleg */
.cv__pages{position:absolute;top:5px;bottom:5px;right:calc(var(--gruix,6px) * -1);width:calc(var(--gruix,6px) + 4px);z-index:-1;
  border-radius:0 4px 4px 0;background:repeating-linear-gradient(90deg,#f3efe7 0 1px,#cfc8bc 1px 2px);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.25)}
.cv__shade{position:absolute;inset:0;border-radius:inherit;background:#020c18;opacity:0;z-index:2;pointer-events:none;will-change:opacity}
.cv__sheen{position:absolute;inset:0;border-radius:inherit;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:soft-light;
  background:linear-gradient(105deg, transparent 28%, rgba(255,255,255,.75) 47%, transparent 64%);background-size:220% 100%;
  will-change:opacity,background-position}
/* «Obrir»: només a la portada del centre, quan s'hi passa per sobre */
.cv__open{position:absolute;left:50%;bottom:14px;z-index:4;translate:-50% 6px;opacity:0;pointer-events:none;
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:999px;white-space:nowrap;
  font-size:.78rem;font-weight:800;color:#0b1b30;background:rgba(255,255,255,.92);box-shadow:0 8px 22px -8px rgba(0,0,0,.6);
  transition:opacity .2s, translate .3s var(--ease)}
.cv__open svg{width:14px;height:14px}
@media (hover:hover) and (pointer:fine){
  .cv__item.is-on .cv__book:hover .cv__open{opacity:1;translate:-50% 0}
}
.cv__book:focus-visible{outline:3px solid #fff;outline-offset:6px}

/* ---------- fitxa del catàleg actiu ---------- */
.cv__info{display:grid;max-width:42rem;margin:clamp(.25rem,1.5vw,1rem) auto 0;text-align:center}
.cv__card{grid-area:1/1;will-change:opacity,transform}
.cv__card[inert]{pointer-events:none}
.cv__kicker{display:inline-flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cv-dim)}
.cv__kicker i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.06),0 0 14px var(--c)}
.cv__brand{font-size:clamp(2rem,1.45rem + 2.3vw,3.1rem);font-weight:800;letter-spacing:-.025em;line-height:1.05;color:#fff;margin-top:.45rem}
.cv__title{margin-top:.35rem;color:var(--cv-soft);font-weight:600;font-style:italic}
.cv__desc{margin:.8rem auto 0;max-width:34rem;color:var(--cv-soft);font-size:.98rem;line-height:1.6}
.cv__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:1.05rem}
.cv__meta li{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;color:#DCE6F2;
  padding:.34rem .78rem;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11)}
.cv__meta svg{width:13px;height:13px;opacity:.75}
.cv__cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem .9rem;margin-top:1.45rem}
.cv__cta .btn{min-height:46px}
.cv__quote{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .4rem;font-weight:700;font-size:.92rem;color:#fff;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:5px;transition:text-decoration-color .2s}
.cv__quote:hover{text-decoration-color:var(--red)}
.cv__quote svg{width:1.05em;height:1.05em;transition:transform .25s var(--ease)}
.cv__quote:hover svg{transform:translateX(3px)}

/* ---------- navegació: fletxes + pestanyes de marca ---------- */
.cv__nav{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:clamp(1.9rem,4vw,2.75rem)}
.cv__arrow{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  transition:background .2s, border-color .2s, opacity .2s, transform .12s}
.cv__arrow svg{width:20px;height:20px}
.cv__arrow:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.4)}
.cv__arrow:active{transform:scale(.92)}
.cv__arrow[disabled]{opacity:.3;cursor:default;transform:none;background:transparent}
.cv__tabs{position:relative;display:flex;gap:2px;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;
  padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.cv__tabs::-webkit-scrollbar{display:none}
.cv__tab{position:relative;z-index:1;flex:none;padding:.5rem .95rem;border-radius:999px;font-size:.74rem;font-weight:800;
  letter-spacing:.09em;color:var(--cv-dim);white-space:nowrap;transition:color .25s}
.cv__tab:hover{color:#fff}
.cv__tab[aria-current="true"]{color:#fff}
.cv__tab:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.cv__pill{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:60px;border-radius:999px;pointer-events:none;
  background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);will-change:transform,width}
.cv__count{flex:none;min-width:3.6rem;font-size:.78rem;font-weight:700;color:var(--cv-dim);font-variant-numeric:tabular-nums;text-align:center}

@media (max-width:640px){
  .cv{--cv-h:clamp(230px, 62vw, 300px)}
  .cv__nav{gap:.45rem}
  .cv__count{display:none}
  .cv__arrow{width:42px;height:42px}
  .cv__cta .btn{flex:1 1 auto}
  .cv__fam{padding:.36rem .7rem;font-size:.75rem;min-height:40px}
  .cv__tab{min-height:40px}
}

/* sense JavaScript: una llista simple */
.cv__nojs{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1rem}
.cv__nojs a{color:#fff;text-decoration:underline}

/* ---------- accessibilitat ---------- */
@media (prefers-reduced-transparency:reduce){
  .cv__book{-webkit-box-reflect:unset}
}
@media (forced-colors:active){
  .cv__book{outline:1px solid CanvasText}
  .cv__pill{background:Highlight}
}
@media print{
  .cv{background:#fff !important;color:#000}
  .cv__stage,.cv__nav,.cv__halos{display:none}
  .cv__card{position:static;opacity:1 !important;transform:none !important;visibility:visible !important}
  .cv__info{display:block}
}