/* === BASE === */
.vib-content{
  --blau:#0b4ea2;
  --blau-2:#5b94d8;
  --blau-clar:#eaf3ff;
  --text:#172033;
  --muted:#5b6475;
  --fons:#f6f9fd;
  --targeta:#fff;
  --vora:#dbe7f6;
  --ombra:0 18px 50px rgba(17,46,89,.12);
  --radi:24px;

  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  line-height:1.6;
}

/* reset mínim dins el bloc */
.vib-content *{box-sizing:border-box}
.vib-content a{color:inherit;text-decoration:none}
.vib-content a:hover{text-decoration:underline}

/* accessibilitat */
.vib-content .skip{
  position:absolute;left:-999px;
}
.vib-content .skip:focus{
  left:16px;top:16px;background:white;
  padding:10px 14px;border-radius:12px;z-index:20;
}

/* layout */
.vib-content{
  max-width:1180px;
  margin:auto;
  padding:34px 22px 70px;
}

/* HERO */
.vib-content .hero{
  padding:34px;
  border-radius:32px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(234,243,255,.86));
  border:1px solid var(--vora);
  box-shadow:var(--ombra);
  position:relative;
  margin-bottom: 10px;
}

.vib-content .eyebrow{
  display:inline-flex;
  color:var(--blau);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  background:white;
  border:1px solid var(--vora);
  padding:8px 12px;
  border-radius:999px;
}

.vib-content h1{
  font-size:clamp(2.2rem,5vw,4.5rem);
  line-height:1.03;
  margin:20px 0 16px;
  color:#0f2342;
  letter-spacing:-.05em;
}

.vib-content .lead{
  font-size:clamp(1.05rem,1.8vw,1.28rem);
  color:var(--muted);
  max-width:78ch;
  margin:0 0 24px;
}

/* BOTONS */
.vib-content .actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.vib-content .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  font-weight:900;
  border:1px solid var(--vora);
  background:white;
  color:var(--blau);
}

.vib-content .btn.primary{
  background:var(--blau);
  color:white;
  border-color:transparent;
}

/* STATS */
.vib-content .stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}

.vib-content .stat{
  background:var(--blau);
  color:white;
  border-radius:22px;
  padding:18px;
}

.vib-content .stat strong{
  display:block;
  font-size:1.5rem;
  margin-bottom:6px;
}

/* SECCIONS */
.vib-content .section-head{
  margin:46px 0 18px;
}

.vib-content .section-head h2{
  margin:0;
  font-size:clamp(1.7rem,3vw,2.55rem);
  letter-spacing:-.035em;
  color:#10213d;
}

/* GRID */
.vib-content .grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

/* CARDS */
.vib-content .card{
  background:var(--targeta);
  border:1px solid var(--vora);
  border-radius:var(--radi);
  padding:22px;
  box-shadow:0 12px 32px rgba(17,46,89,.08);
}

.vib-content .card h3{
  margin:0 0 12px;
  color:var(--blau);
  font-size:1.3rem;
}

.vib-content .card p{
  margin:0 0 12px;
  color:#2a354b;
}

.vib-content .wide{
  grid-column:1/-1;
}

.vib-content .notice{
  background:var(--blau-clar);
  border-color:#bcd5f3;
}

.vib-content .muted{
  /*color:var(--muted);*/
  font-weight:700;
  margin-top:14px;
}

/* TAULES */
.vib-content table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}

.vib-content th,
.vib-content td{
  border-bottom:none;
  text-align:left;
  padding:12px;
  vertical-align:top;
}

.vib-content th{
  color:var(--blau);
  background:var(--blau-clar);
}

/* TABLE WRAPPER */
.vib-content .table-wrap{
  overflow:auto;
  border:none;
  border-radius:18px;
  background:white;
  margin-top:14px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .vib-content .grid,
  .vib-content .stats{
    grid-template-columns:1fr;
  }

  .vib-content .hero{
    padding:24px;
  }

  .vib-content table{
    font-size:.92rem;
  }

  .vib-content th,
  .vib-content td{
    padding:10px 8px;
  }
}

.vib-content .notice {
  padding: 2rem;
}

.vib-content .notice p:last-child {
  margin-bottom: 0;
}

.vib-content figure {
  text-align: center;
  margin: 2rem 0;
}

.vib-content figure img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* HERO LAYOUT */
.vib-content .hero{
  display:flex;
  grid-template-columns:.85fr 1.15fr;
  gap:28px;
  align-items:stretch;
  overflow:hidden;
}

.vib-content .hero::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-140px;
  width:360px;
  height:360px;
  background:rgba(91,148,216,.18);
  border-radius:50%;
}

.vib-content .hero > *{
  position:relative;
  z-index:1;
}

/* HERO VIDEO */
.vib-content .hero .card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.vib-content .hero .card video{
  width:100%;
  display:block;
  border-radius:18px;
}

.vib-content .hero .card .muted{
  margin-top:18px;
}

/* HERO CARD */
.vib-content .hero-card{
  background:#fff;
  border:1px solid var(--vora);
  border-radius:28px;
  padding:22px;
  box-shadow:0 16px 40px rgba(17,46,89,.10);
}

.vib-content .hero-card h2{
  margin:0 0 16px;
  color:var(--blau);
  font-size:1.35rem;
}

/* QUICK LIST */
.vib-content .quick-list{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
  line-height: 1em;
}

.vib-content .quick-list li{
  padding:14px 16px;
  border-radius:18px;
  background:var(--blau-clar);
  border:1px solid var(--vora);
}

.vib-content .quick-list strong{
  display:block;
  margin-bottom:4px;
  color:#10213d;
}

/* VIDEO */
.vib-content .video-panel{
  margin:28px 0 34px;
}

.vib-content .video-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:22px;
  align-items:center;
}

.vib-content .video-text h2{
  font-size:clamp(1.6rem,3vw,2.35rem);
}

.vib-content .video-badge{
  display:inline-flex;
  color:var(--blau);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.76rem;
  background:var(--blau-clar);
  border:1px solid var(--vora);
  padding:7px 11px;
  border-radius:999px;
  margin-bottom:12px;
}

.vib-content .video-wrap{
  overflow:hidden;
  border-radius:24px;
}

.vib-content .video-wrap video{
  width:100%;
  display:block;
  height: auto;
}

/* SEARCH */
.vib-content .tools{
  margin:28px 0;
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
}

.vib-content .search{
  width:100%;
  padding:15px 18px;
  border-radius:18px;
  border:1px solid var(--vora);
  background:#fff;
  font-size:1rem;
}

.vib-content .counter{
  color:var(--muted);
  font-weight:700;
}

/* DOCS */
.vib-content .docs{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.vib-content .docs li{
  padding:12px 13px;
  border-radius:16px;
  background:#f8fbff;
  border:1px solid var(--vora);
}

/* LINKS */
.vib-content .links{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.vib-content .links a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--blau-clar);
  border:1px solid var(--vora);
  border-radius:16px;
  padding:12px 14px;
  font-weight:900;
  color:var(--blau);
}

/* TABLE WRAPPER */
.vib-content .table-wrap{
  overflow:auto;
  border:1px solid var(--vora);
  border-radius:18px;
  background:white;
  margin-top:14px;
}

/* BUTTON SECONDARY */
.vib-content .btn.secondary{
  background:white;
  color:var(--blau);
  border:1px solid var(--vora);
}

/* SEARCH FILTER */
.vib-content .hidden-by-search{
  display:none !important;
}

/* RESPONSIVE */
@media(max-width:850px){

  .vib-content .hero{
    grid-template-columns:1fr;
  }

  .vib-content .video-grid{
    grid-template-columns:1fr;
  }

  .vib-content .tools{
    grid-template-columns:1fr;
  }
}

/* IMATGE RESUM */
.vib-content .summary-image{
  background:#fff;
  border:1px solid var(--vora);
  border-radius:28px;
  padding:22px;
  box-shadow:0 16px 40px rgba(17,46,89,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.vib-content .summary-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:20px;
  display:block;
}

.vib-content .hero{
  align-items:stretch;
}

.vib-content .hero .card{
  display:flex;
  flex-direction:column;
}

.vib-content .hero .card video{
  width:100%;
  height: auto;
  display:block;
}

h1 {
  word-break: normal !important;
}

.vib-content .tag{
  font-weight:700;
  display:inline-block;
  margin-bottom:.5rem;
  margin-right: .5rem;
}

.vib-content .tag::after{
  content: ":";
}

.vib-content .card.notice{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
}

@media (max-width: 900px){

  .vib-content .hero{
    flex-direction:column;
  }

}

.vib-content .hero > *{
  min-width:0;
}