:root{
  --black:#0b0b0c;
  --white:#ffffff;
  --ink:#1a1a1a;
  --grey-text:#3b3b3b;
  --grey-line:#e2e2e2;
  --grey-icon:#8a8a8a;
  --grey-bg:#f7f7f8;

  /* Verd: descompte exclusiu COAC. Taronja: producte recomanat.*/
  --green:#00AA86;
  --green-soft:#6ECEB2;
  --orange:#EF7B1F;

  --topbar-h:40px;
}

*{box-sizing:border-box; margin:0; padding:0;}

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

:where(a, button, input, [tabindex]):focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}

body{
  font-family:'Montserrat', Arial, sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none;}

.wrap{
  max-width: 85%;
  margin:0 auto;
  padding:0 40px;
}

/* ===== Menú enganxat a dalt =====*/
#site-menu{
  position:sticky;
  top:calc(var(--topbar-h) * -1);
  z-index:50;
  background:var(--white);
}

/* ===== Top utility bar =====*/
.topbar{
  background:var(--black);
  color:var(--white);
  font-size:13px;
  letter-spacing:.02em;
}

#content, #content-2{
    padding: 0 !important;
    margin: 0 auto;
}
/* Només els paràgrafs sense classe: els que en tenen (targetes
   d'eines, etc.) manen sobre la seva pròpia mida */
#content p:not([class]), #content-2 p:not([class]), .wrap p:not([class]){
  font-size: 14px !important;
}
.topbar-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  width:100%;
  height:var(--topbar-h);
}
.topbar .org-name{
  grid-column:2;
  font-weight:500;
  white-space:nowrap;
  text-align:center;
}
.lang-switch{
  grid-column:3;
  justify-self:end;
  display:flex;
  gap:6px;
  font-weight:700;
}
.lang-switch button{
  color:inherit;
  font:inherit;
  font-weight:700;
  padding:0;
  opacity:.6;
}
.lang-switch button.is-active{
  text-decoration:underline;
  opacity:1;
}
.lang-switch .sep{opacity:.5; font-weight:400;}

#main-programs{
  min-height: 85dvh;
}
/* ===== Main header ===== */
.site .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:96px;
}
.logo{
  display:block;
  flex:none;
}
.logo img{
  display:block;
  height:50px;
  width:auto;
}

nav.main-nav ul{
  display:flex;
  gap:44px;
}
nav.main-nav a{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  padding-bottom:6px;
  border-bottom:2px solid transparent;
}
nav.main-nav a.active{
  border-bottom-color:var(--ink);
}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:300px;
  background:
    radial-gradient(ellipse at 78% 45%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(120deg, #0a0a0c 0%, #131316 55%, #0a0a0c 100%);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero--sub{ min-height:260px; }

/* ------------------------------------------------------------
   IMATGES DE CAPÇALERA
   ------------------------------------------------------------ */
.hero--home{
  background-image:
   /* linear-gradient(90deg, rgba(8,8,10,.90) 0%, rgba(8,8,10,.60) 34%, rgba(8,8,10,.22) 100%),*/
    url('../img/home_1.jpg');
  background-size:cover;
  background-position:center;
}
.hero--descomptes{
  background-image:
    linear-gradient(90deg, rgba(8,8,10,.90) 0%, rgba(8,8,10,.60) 34%, rgba(8,8,10,.22) 100%),
    url('../img/descomptes.png');
  background-size:cover;
  background-position:center;
}

.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:56px 40px;
}
.hero-content h1{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:54px;
  line-height:1.12;
  color:var(--white);
  letter-spacing:.005em;
  max-width:640px;
}
/* ===== Intro section ===== */
.intro{
  padding:64px 0 80px;
}
.intro .inner{
  max-width:65%;
}
.intro h2{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:30px;
  margin-bottom:22px;
}
.intro p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--grey-text);
  margin-bottom:16px;
}
.intro__subtitle{
  font-size:15.5px;
  font-weight:700;
  color:var(--ink);
  margin:24px 0 10px;
}
.steps{
  list-style:disc;
  padding-left:22px;
  margin-bottom:18px;
}
.steps li{
  font-size:15.5px;
  line-height:1.65;
  color:var(--grey-text);
  margin-bottom:6px;
}

.cta-row{
  display:flex;
  gap:20px;
  margin-top:32px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.cta-block{
  flex:1 1 300px;
  max-width:360px;
}
.cta-block p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--grey-text);
  margin:14px 0 0;
}
.btn-dark{
  background:var(--black);
  color:var(--white);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  padding:18px 30px;
  display:inline-block;
  width:100%;
  text-align:center;
  transition:background .15s ease;
}
.cta-row > .btn-dark{width:auto; max-width:360px;}
.btn-dark:hover{background:#222;}

/* ============================================================
   CATÀLEG D'EINES TECNOLÒGIQUES
   ============================================================ */
.screen{
  display:none;
  padding:7dvh 80px;
}
.screen.is-open{
  display:block;
  animation:screen-in .35s ease-out;
}
@keyframes screen-in{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .screen.is-open{animation:none;}
}

.screen__title{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:34px;
  text-align:center;
  margin-bottom:30px;
}
#main-programs p{
  font-size:15.5px;
  line-height:1.7;
  color:var(--grey-text);
  margin-bottom:16px;
}

/* ----- Graella d'àmbits ----- */
.program-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
  margin-top:44px;
}
.program-card{
  position:relative;
  min-height:152px;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  color:var(--ink);
  background:var(--grey-bg);
  border:1px solid var(--grey-line);
  border-radius:8px;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.program-card:hover{
  border-color:var(--green-soft);
  box-shadow:0 6px 16px rgba(0,0,0,.09);
  transform:translateY(-3px);
}
.program-card__icon{
  width:40px; height:40px;
  display:inline-flex;
}
.program-card__icon svg{
  width:100%; height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.program-card__icon.is-filled svg{
  fill:currentColor;
  stroke:none;
}

.program-card__icon--orange{color:#f97316;}
.program-card__icon--purple{color:#8b5cf6;}
.program-card__icon--yellow{color:#d97706;}
.program-card__icon--pink{color:#db2777;}
.program-card__icon--red{color:#dc2626;}
.program-card__icon--green{color:#059669;}
.program-card__icon--indigo{color:#4f46e5;}
.program-card__icon--teal{color:#0d9488;}
.program-card__icon--gray{color:#4b5563;}

.program-card__title{
  font-size:17px;
  font-weight:600;
  line-height:1.35;
}
.program-card__badge{
  position:absolute;
  right:0; bottom:0;
  background:var(--black);
  color:var(--white);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  padding:5px 10px;
  border-top-left-radius:8px;
  border-bottom-right-radius:8px;
}

/* ----- Blocs per tipus d'avantatge -----*/
.tool-block{ margin-top:46px; }
.tool-block:first-of-type{ margin-top:34px; }
.tool-block__title{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Montserrat', sans-serif;
  font-size:21px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:24px;
}
.tool-block__count{
  font-family:'Montserrat', sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
  color:var(--grey-icon);
  background:var(--grey-bg);
  border:1px solid var(--grey-line);
  border-radius:20px;
  padding:2px 10px;
}

/* ----- Targeta d'eina ----- */
.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
  gap:22px;
}
.tool-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:26px 24px 24px;
  background:var(--white);
  border:1px solid var(--grey-line);
  border-radius:8px;
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.tool-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:var(--grey-line);
}
.tool-card--descompte::before{ background:var(--green); }
.tool-card--recomanat::before{ background:var(--orange); }
.tool-card:hover{
  border-color:#cfcfcf;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  transform:translateY(-2px);
}

.tool-card__name{
  font-family:'Montserrat', sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
}
.tool-card__offer{
  margin-top:11px;
  font-size:16px;
  font-weight:700;
  line-height:1.45;
}
.tool-card--descompte .tool-card__offer{ color:var(--green); }
.tool-card--recomanat .tool-card__offer{ color:var(--orange); }
.tool-card__offer del{ color:var(--grey-icon); font-weight:600; }

.tool-card__stars{ white-space:nowrap; }
.tool-card__note{
  margin-top:6px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--grey-icon);
}

/* ----- Fitxa tècnica ----- */
.tool-card__details{
  position:relative;
  margin-top:19px;
  padding-top:17px;
  border-top:1px solid var(--grey-line);
}
.tool-card__row + .tool-card__row{ margin-top:14px; }
.tool-card__row dt{
  margin-bottom:3px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--grey-icon);
}
.tool-card__row dd{
  font-size:13.5px;
  line-height:1.6;
  color:var(--grey-text);
  overflow-wrap:anywhere;
}

.tool-card.is-clampable .tool-card__details{
  max-height:15.5em;
  overflow:hidden;
}
.tool-card.is-clampable .tool-card__details::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:56px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
}
.tool-card.is-open .tool-card__details{ max-height:none; }
.tool-card.is-open .tool-card__details::after{ display:none; }

.tool-card__more{
  align-self:flex-start;
  margin-top:13px;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}
.tool-card__more:hover{ color:var(--green); }

.tool-card__link{
  align-self:flex-start;
  margin-top:22px;
  padding:11px 18px;
  background:var(--black);
  color:var(--white);
  border-radius:5px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.03em;
  transition:background .15s ease;
}
.tool-card__link:hover{ background:#333; }
/* ----- Tornar a la graella ----- */
/* Els dos enllaços de tornada —dalt i baix— comparteixen aspecte */
.back-top,
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  color:var(--grey-text);
  transition:color .15s ease;
}
.back-top{ margin-bottom:20px; }
.back-link{ margin-top:30px; }

.back-top:hover,
.back-link:hover{ color:var(--ink); }

.back-top svg,
.back-link svg{
  width:17px; height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .15s ease;
}
.back-top:hover svg,
.back-link:hover svg{ transform:translateX(-3px); }

.empty-state{
  padding:60px 24px;
  text-align:center;
  font-size:15px;
  color:var(--grey-icon);
}

/* ===== Footer ===== */
footer{
  background:var(--black);
  color:var(--white);
  padding:70px 0 26px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:40px;
  padding-bottom:54px;
}
.footer-about{
  max-width:340px;
}
.footer-about h3{
  font-family:'Montserrat', sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:.03em;
  margin-bottom:14px;
}
.footer-about p{
  font-size:14px;
  line-height:1.6;
  color:#c9c9c9;
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top:2px;
  text-align:center;
}
.footer-links a{
  font-size:14px;
  color:#dcdcdc;
}
.footer-links a:hover{color:var(--white);}
.footer-social{
  justify-self:end;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.social-icons{
  display:flex;
  gap:12px;
}
.social-icons a{
  width:32px; height:32px;
  border-radius:50%;
  background:#3a3a3a;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.social-icons a:hover{
  background:var(--green);
  transform:translateY(-2px);
}

.social-icons img{
  width:15px; height:15px;
  filter:brightness(0) invert(1);
}
.footer-social .site-link{
  font-size:13px;
  font-weight:600;
  color:#dcdcdc;
}
.footer-bottom{
  border-top:1px solid #262626;
  padding-top:22px;
  text-align:center;
  font-size:12.5px;
  color:#9c9c9c;
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .program-grid{grid-template-columns:repeat(3, 1fr);}
}

@media (max-width:880px){
  .wrap{padding:0 24px;}
  .topbar-inner{gap:8px; justify-content:center;}
  .site .wrap{flex-wrap:wrap; height:auto; padding:16px 24px; gap:14px;}
  .logo img{height:46px;}
  nav.main-nav ul{gap:22px; flex-wrap:wrap;}
  .hero-content{padding:52px 24px;}
  .hero-content h1{font-size:38px;}
  .hero--sub .hero-content h1{font-size:32px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-links, .footer-social{align-items:flex-start; text-align:left;}
  .footer-social{justify-self:start;}
  .program-grid{grid-template-columns:repeat(2, 1fr);}
  .screen__title{font-size:28px;}
}

@media (max-width:560px){
  .program-grid{grid-template-columns:1fr;}
  .screen__title{font-size:25px;}
  .hero-content h1{font-size:31px;}
  .hero--sub .hero-content h1{font-size:27px;}
  .cta-row{flex-direction:column; align-items:stretch;}
  .btn-dark{text-align:center;}
}