/* Contenidor */
.rjs-banner{
  position:relative;
  width:100%;
  height:400px;
  overflow:hidden;
}

/* Slide amb fons cover i caption centrat */
.rjs-frame{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:center / cover no-repeat var(--bg);
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
  z-index:1;
}
.rjs-frame.rjs-on{ opacity:1; pointer-events:auto; }

/* Títol */
/* Contenidor del text: columna, centrat */
.rjs-caption{
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8em; /* abans era .35em → més espai entre el lema i la frase */
  max-width:90%;
  margin-inline:auto;
  text-align:center;
  color:#fff;
  text-shadow:0 6px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
  line-height:1.15;
  transform: translateZ(0);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* Títol (pal sec, més gran) */
.rjs-title{
  font-weight:800;
  letter-spacing:.08em;
  font-size:clamp(26px, 5vw, 56px);
}

/* Frase de sota (més gran i amb més espai) */
.rjs-sub{
  font-weight:600;
  opacity:.95;
  letter-spacing:.03em; /* lleugera separació entre lletres */
  font-size:clamp(18px, 2.8vw, 28px); /* lletra més gran */
  margin-top:.6em; /* separació addicional del lema */
}

.rjs-logo {
  display: block;
  margin-top: 10px;
  text-align: left; /* canvia-ho a center segons el teu disseny */
}

.rjs-logo img {
  width: 325px;      /* ajusta al gust */
  height: auto;
  opacity: 0.9;      /* suau, opcional */
}

/* Fletxes */
.rjs-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:9999px;
  background:rgba(0,0,0,.35); color:#fff; font-size:28px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2;
}
.rjs-prev{ left:12px; } .rjs-next{ right:12px; }
.rjs-arrow:hover{ background:rgba(0,0,0,.55); }
.rjs-arrow:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Pausa en hover */
.rjs-banner:hover .rjs-frame{ transition:opacity .7s ease; }