/* ============================================================
   SOLARTEST — components.css
   Botons · Cards · Forms · Acordió FAQ · Lang switcher
   ============================================================ */

/* ── Botons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 22px;
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);   /* 4px — Tesla-like, net i directe */
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), box-shadow var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Primary — navy solid (CTA principal sobre fons clar) */
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* Secondary — navy outline (CTA secundari sobre fons clar) */
.btn-secondary {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-secondary:hover {
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* White — sobre fons fosc (CTA principal sobre navy) */
.btn-white {
  background: #fff;
  color: var(--color-text-heading);
  border-color: #fff;
  font-weight: 700;
}

.btn-white:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-bg-alt);
  color: var(--color-text-heading);
  transform: translateY(-1px);
}

/* Ghost sobre fons fosc (CTA secundari sobre navy) */
.btn-ghost-dark {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: rgba(255,255,255,.40);
}

.btn-ghost-dark:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,.10);
}

/* Mides */
.btn-sm { padding: 7px 16px; font-size: 0.8125rem; }
.btn-lg { padding: 14px 32px; font-size: 1rem; }

/* ── Cards de servei ─────────────────────────────────────── */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);   /* shadcn: 16px */
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.service-card:hover {
  border-color: var(--color-accent-muted);   /* navy border on hover */
  box-shadow: var(--shadow-md);
}

.service-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-alt);
  overflow: hidden;
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-card:hover .service-card__media img {
  transform: scale(1.03);
}

.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5) var(--space-6);
  gap: var(--space-3);
}

.service-card__icon {
  color: var(--color-accent);  /* blau — contrast 4.5:1+ sobre blanc ✓ */
  flex-shrink: 0;
}

.service-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-heading);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.service-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  flex: 1;
  max-width: none;
}

.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: auto;
  transition: gap var(--transition), color var(--transition);
}

.service-card__cta:hover {
  color: var(--color-accent-dark);
  gap: var(--space-2);
}

/* ── Cards destacats 3 serveis (home) ────────────────────── */
.highlight-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);    /* shadcn: 16px cards */
  transition: border-color var(--transition), box-shadow var(--transition);
}

.highlight-card:hover {
  border-color: var(--color-accent-muted);  /* navy border */
  box-shadow: var(--shadow-md);
}

/* ── Stat badge (xifres destacades) ─────────────────────── */
.stat-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-lighter);
  border-radius: var(--radius-lg);
  text-align: center;
}

.stat-badge__number {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text-heading);
  letter-spacing: -0.025em;
  line-height: 1;
}

.stat-badge__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.highlight-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-subtle);  /* blau subtil */
  border-radius: var(--radius-md);
  color: var(--color-accent);              /* blau — contrast ✓ */
}

.highlight-card__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text-heading);
  letter-spacing: -0.01em;
}

.highlight-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: none;
}

/* ── Tabs (Comunitats / Autoconsum) ──────────────────────── */
.tabs-nav {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-8);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs-nav::-webkit-scrollbar { display: none; }

.tabs-nav__btn {
  padding: var(--space-3) var(--space-8);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}

.tabs-nav__btn:hover {
  color: var(--color-text-heading);
}

.tabs-nav__btn.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.tabs-panel {
  display: none;
}

.tabs-panel.is-active {
  display: block;
}

/* ── Capçalera FAQ (minimalista — sense hero fosc) ───────── */
.faq-page-header {
  border-bottom: 1px solid var(--color-border);
  /* 68px header fixed + espai propi */
  padding: calc(68px + var(--space-12)) 0 var(--space-12);
}

@media (min-width: 768px) {
  .faq-page-header { padding: calc(68px + var(--space-16)) 0 var(--space-16); }
}

.faq-page-header__inner {
  max-width: 800px;
}

.faq-page-header__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--color-text-heading);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.faq-page-header__sub {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  max-width: 60ch;
}

/* Contenidor acordió — ample complet de la pàgina */
.faq-container {
  max-width: var(--container-max);
}

/* Etiqueta de grup (versió ACF amb categories) */
.faq-group-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: var(--space-10) 0 var(--space-2);
}

.faq-group-label:first-child { margin-top: 0; }

/* ── Acordió FAQ ─────────────────────────────────────────── */
.faq-item {
  border-top: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* Reset <details> marker */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}

.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { display: none; }

/* Icona verda corporativa davant el títol */
.faq-question__bullet {
  color: var(--green);
  flex-shrink: 0;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] > .faq-question .faq-question__bullet {
  transform: rotate(15deg);
}

.faq-question__text {
  font-size: clamp(1rem, 2vw, 1.0625rem);
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: 1.3;
  flex: 1;
}

/* Icona +/− via pseudo-elements — sense Lucide, sense SVG */
.faq-question__icon {
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-top: 3px;
  flex-shrink: 0;
}

.faq-question__icon::before,
.faq-question__icon::after {
  content: '';
  position: absolute;
  background: var(--color-text-secondary);
  border-radius: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background var(--transition), opacity var(--transition),
              transform var(--transition);
}

/* Horitzontal — sempre visible */
.faq-question__icon::before {
  width: 14px;
  height: 1.5px;
}

/* Vertical — visible quan tancat, oculta quan obert */
.faq-question__icon::after {
  width: 1.5px;
  height: 14px;
}

details[open] > .faq-question .faq-question__icon::before {
  background: var(--color-text-heading);
}

details[open] > .faq-question .faq-question__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

details[open] > .faq-question .faq-question__text {
  color: var(--color-text-heading);
}

/* Resposta — amb animació d'alçada via JS */
.faq-answer {
  overflow: hidden;
  padding: 0 0 var(--space-5) 0;
}

/* Estat animació: quan JS controla el desplegament */
.faq-item.is-animating .faq-answer {
  overflow: hidden;
}

.faq-answer__inner {
  padding-right: var(--space-8);
}

.faq-answer__inner p,
.faq-answer__inner li {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  max-width: none;
}

.faq-answer__inner p + p {
  margin-top: var(--space-3);
}

.faq-answer__inner ol {
  list-style: decimal;
  padding-left: var(--space-6);
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-answer__inner ul {
  padding-left: var(--space-4);
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq-answer__inner ul li {
  list-style: disc;
}

.faq-answer__inner strong {
  color: var(--color-text-heading);
  font-weight: 600;
}

.faq-answer__inner a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Formulari de contacte ───────────────────────────────── */
.contact-form {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

@media (min-width: 768px) {
  .contact-form { padding: var(--space-10); }
}

.contact-form__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-1);
  letter-spacing: -0.015em;
}

.contact-form__sub {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: none;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-heading);
  letter-spacing: 0.01em;
}

.form-label .req {
  color: var(--color-error);
  margin-left: 2px;
  font-weight: 700;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px var(--space-4);
  font-family: var(--font-base);
  font-size: 0.9375rem;
  color: var(--color-text-body);
  background: var(--color-bg);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-subtle);  /* rgba(8,67,186,0.08) */
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A8D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
  cursor: pointer;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 3px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.form-check__label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.form-check__label a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Grid 2 columnes global per a .form (form-contact partial) ── */
@media (min-width: 480px) {
  .contact-form .form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .contact-form .form .form-field {
    flex: 0 0 100%;
    margin-bottom: 0;
  }
  .contact-form .form .form-field--half {
    flex: 1 1 calc(50% - var(--space-3) / 2);
    min-width: 0;
    margin-bottom: 0;
  }
  .contact-form .form .form-check,
  .contact-form .form .notice-banner {
    flex: 0 0 100%;
    margin-bottom: 0;
  }
  .contact-form .form button[type="submit"] {
    flex: 0 0 100%;
    margin-top: var(--space-3) !important;
  }
}

/* ── Google Forms embed ──────────────────────────────────── */
.gforms-embed {
  width: 100%;
  border: none;
  border-radius: var(--radius-lg);
  min-height: 800px;
}

/* ── Selector de llengua ─────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lang-switcher__sep {
  color: var(--color-border-medium);
}

.lang-switcher__item {
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}

.lang-switcher__item.is-active {
  color: var(--color-accent);
}

.lang-switcher__item:hover {
  color: var(--color-text-heading);
}

/* ── Lista amb icona check ───────────────────────────────── */
.icon-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.icon-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.5;
}

.icon-list__item i {
  color: var(--color-accent);  /* blau — contrast ✓ */
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Avantatges 2 columnes ───────────────────────────────── */
.avantatges-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (min-width: 768px) {
  .avantatges-grid { grid-template-columns: 1fr 1fr; }
}

.avantatge-col {
  padding: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .avantatge-col:nth-child(odd) { border-right: 1px solid var(--color-border); }
  .avantatge-col { border-bottom: none; }
}

.avantatge-col__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

/* ── Targetes de valors (Sobre nosaltres) ────────────────── */
.valor-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);   /* shadcn: 16px */
  transition: border-color var(--transition), box-shadow var(--transition);
}

.valor-card:hover {
  border-color: var(--color-accent-muted);  /* navy border */
  box-shadow: var(--shadow-sm);
}

.valor-card i {
  color: var(--color-accent);  /* blau — contrast ✓ */
}

.valor-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-heading);
}

.valor-card__text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: none;
}

/* ── CTA Banner final ────────────────────────────────────── */
.cta-banner {
  background: var(--color-accent);    /* blue — high-conversion CTA zone */
  padding: var(--space-16) 0;
  text-align: center;
}

@media (min-width: 768px) {
  .cta-banner { padding: var(--space-20) 0; }
}

.cta-banner .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.cta-banner__eyebrow {
  color: rgba(255,255,255,.70);   /* blanc semi-transparent sobre blue */
}

.cta-banner__title {
  color: #fff;
  max-width: 600px;
}

.cta-banner__text {
  font-size: 1rem;
  color: rgba(255,255,255,.80);
  max-width: 540px;
}

.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-2);
}

/* ── Bloc Destacat (servei) ──────────────────────────────── */
.bloc-destacat {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: flex-start;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
}

@media (min-width: 768px) {
  .bloc-destacat {
    flex-direction: row;
    align-items: center;
  }
}

.bloc-destacat__icon {
  width: 80px;
  height: 80px;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-accent);
}

.bloc-destacat__title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--color-text-heading);
  margin-bottom: var(--space-3);
}

.bloc-destacat__text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  max-width: none;
}

/* ── DEST SECTION — 2-col text + widget ──────────────────── */

.dest-section {
  background: var(--color-bg-alt);
}

.dest-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .dest-layout {
    grid-template-columns: 5fr 4fr; /* ratio unificat seccions servei */
    gap: var(--space-16);
  }
}

/* Text esq */
.dest-text__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-subtle);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.dest-text__title {
  font-family: var(--font-base);
  font-size: clamp(1.75rem, 3vw, 2.25rem); /* canònic seccions */
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.dest-text__body {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

/* Widget base */
.dest-widget {
  background: var(--color-bg);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.dest-widget__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--navy, #003D78);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.dest-widget__head i { color: var(--color-accent); }

/* Tabs dins el widget d'estalvi */
.dest-tabs {
  display: flex;
  gap: 3px;
  background: var(--color-bg-alt);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: var(--space-5);
}

.dest-tab {
  flex: 1;
  padding: 7px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-body);
  cursor: pointer;
  transition: background 180ms, color 180ms, box-shadow 180ms;
  line-height: 1;
}

.dest-tab.is-active {
  background: var(--color-bg);
  color: var(--color-accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.dest-panel { display: none; }
.dest-panel.is-active { display: block; }

/* Barres comparatives */
.savings-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.savings-bar-group {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: var(--space-3);
}

.savings-bar-label {
  font-size: 0.75rem;
  color: var(--color-text-body);
  white-space: nowrap;
}

.savings-bar {
  height: 18px;
  border-radius: 4px;
  width: var(--pct);
  min-width: 4px;
  transition: width 600ms cubic-bezier(0.4,0,0.2,1);
}

.savings-bar--before {
  background: linear-gradient(90deg, var(--navy, #003D78), #005fa6);
}

.savings-bar--after {
  background: linear-gradient(90deg, var(--green, #89C600), #6fa500);
}

.savings-bar-val {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-body);
  white-space: nowrap;
}

.savings-bar-val--green { color: #6fa500; }

/* KPIs inline (sota barres) */
.dest-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.dest-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.dest-kpi__val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent);
  font-family: var(--font-display, inherit);
  line-height: 1;
}

.dest-kpi--green .dest-kpi__val { color: #6fa500; }

.dest-kpi__lbl {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  line-height: 1.3;
}

/* KPI Grid — aerotermia */
.dest-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.dest-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
}

.dest-kpi-card__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,157,226,0.10);
  border-radius: 8px;
  color: var(--color-accent);
}

.dest-kpi-card__val {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--navy, #003D78);
  font-family: var(--font-display, inherit);
  line-height: 1;
}

.dest-kpi-card__lbl {
  font-size: 0.6875rem;
  color: var(--color-text-body);
  line-height: 1.45;
}

/* Compare 2 — bombes, manteniments */
.dest-compare2-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.dest-compare2-card {
  flex: 1 1 200px;
  min-width: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dest-compare2-card--alt {
  background: #f5fbeb;
  border-color: rgba(137,198,0,0.30);
}

.dest-compare2-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,61,120,0.08);
  border-radius: 8px;
  color: var(--navy, #003D78);
  margin-bottom: 2px;
}

.dest-compare2-card--alt .dest-compare2-card__icon {
  background: rgba(137,198,0,0.14);
  color: #6fa500;
}

.dest-compare2-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0;
}

.dest-compare2-card__desc {
  font-size: 0.8125rem;
  color: var(--color-text-body);
  line-height: 1.55;
  margin: 0;
}

.dest-compare2-card__tag {
  display: inline-block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  padding: 3px 8px;
  border-radius: 100px;
  margin-top: 2px;
  border: 1px solid rgba(0,157,226,0.20);
}

.dest-compare2-card--alt .dest-compare2-card__tag {
  color: #6fa500;
  background: rgba(137,198,0,0.10);
  border-color: rgba(137,198,0,0.30);
}

/* Checklist — baixa-tensio, genèric */
.dest-check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}

.dest-check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.875rem;
  color: var(--color-text-body);
  line-height: 1.5;
}

.dest-check-list li i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--green, #89C600);
}

/* Grid 2×3 per checklist baixa-tensio */
.dest-check-list--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.dest-check-list--grid li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
}

.dest-check-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(137,198,0,0.12);
  border-radius: 6px;
  color: var(--green, #89C600);
}

/* ── Hero eyebrow pill (sobre fons fosc) ─────────────────── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(137,198,0,.15);
  border: 1px solid rgba(137,198,0,.40);
  color: var(--color-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-5);
}

/* ── Trust bar ───────────────────────────────────────────── */
.trust-bar {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5) 0;
}

/* Grid 4 columnes iguals, max-width contenidor, centrat */
.trust-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--container-max);
  width: 100%;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  justify-content: center;
  /* Sense separadors */
}

@media (max-width: 767px) {
  .trust-bar__inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-item {
    padding: var(--space-4) var(--space-4);
    justify-content: flex-start;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .trust-item { padding: var(--space-4) var(--space-4); }
}

.trust-item__icon {
  width: 52px;
  height: 52px;
  background: var(--color-accent-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
  overflow: hidden;
}

/* Quan l'icona és una imatge real (no Lucide) */
.trust-item__icon--photo {
  background: transparent;
  border-radius: 0;
}

.trust-item__icon--photo img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}

/* Icones Lucide en verd */
.trust-item__icon--lucide {
  background: var(--color-secondary-subtle);
  color: var(--color-secondary);
}

.trust-item__icon--lucide i,
.trust-item__icon--svg svg {
  display: block;
}

/* SVG glyphs: només icona, sense placeholder */
.trust-item__icon--svg {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-secondary);
  width: auto;
  height: auto;
  overflow: visible;
}

.trust-item__icon--svg svg {
  width: 48px;
  height: 48px;
}

.trust-item__label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: 1.3;
}

.trust-item__sub {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);  /* 5.7:1 on white ✓ (era muted: 2.5:1 ✗) */
  margin-top: 2px;
}

/* ── Toggle pill (serveis home) ──────────────────────────── */
.toggle-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-10);
}

/*
 * TOGGLE — Comunitats / Autoconsum
 * Mateix estil que el toggle de "Com funciona":
 * fons bg-alt, botó actiu fons blanc, sense pill lliscant.
 */
.toggle-bar {
  display: inline-flex;
  gap: 3px;
  background: var(--color-bg-alt);
  border-radius: 10px;
  padding: 3px;
}

/* Pill lliscant: ocult (conservem l'element HTML per compatibilitat) */
.toggle-pill { display: none; }

/* Botons */
.toggle-bar .tabs-nav__btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 24px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: none;
  margin-bottom: 0;
  transition: all 180ms ease;
}

.toggle-bar .tabs-nav__btn:hover:not(.is-active) {
  color: var(--color-text-heading);
}

.toggle-bar .tabs-nav__btn.is-active {
  background: #fff;
  color: var(--color-text-heading);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  border-bottom-color: transparent;
}

.toggle-bar .tabs-nav__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Animació d'entrada dels panels de serveis ──────────────── */
@keyframes tabPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tabs-panel.is-active {
  animation: tabPanelIn 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Service photo cards (5-col) ─────────────────────────── */
.services-photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .services-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .services-photo-grid { grid-template-columns: repeat(5, 1fr); }
}

.service-photo-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  height: 320px;
  background: var(--color-bg-dark-2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  transition: box-shadow var(--transition);
}

.service-photo-card:hover {
  box-shadow: var(--shadow-xl);
}

.service-photo-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.service-photo-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-photo-card:hover .service-photo-card__bg img {
  transform: scale(1.04);
}

.service-photo-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.60) 35%,
    rgba(0,0,0,.10) 55%,
    rgba(0,0,0,.00) 100%
  );
}

.service-photo-card__body {
  position: relative;
  z-index: 2;
  padding: var(--space-5) var(--space-5) 0;
}

.service-photo-card__title {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.service-photo-card__desc {
  font-size: 0.8125rem;
  color: rgba(255,255,255,.70);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: none;
}

/* CTA discret: text blanc amb fletxa, sense botó */
.service-photo-card__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 6px var(--space-5) var(--space-5);
  color: rgba(255,255,255,.60);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color var(--transition), gap var(--transition);
}

.service-photo-card__cta::after {
  content: '→';
  transition: transform var(--transition);
}

.service-photo-card:hover .service-photo-card__cta {
  color: #fff;
  gap: 8px;
}

/* ── Qui som — stats grid ────────────────────────────────── */
.who-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.stat-card {
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-3);
  text-align: center;
}

.stat-card__num {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 900;
  color: var(--color-text-heading);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-card__label {
  font-size: 0.6875rem;
  color: var(--color-text-secondary);  /* 5.7:1 on bg-alt ✓ (era muted: 2.5:1 ✗) */
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* ── Featured services — 3 cards horitzontals amb icones ──── */
.featured-services-section {
  background: var(--color-bg-alt);
}

.featured-services {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-10);
}

@media (min-width: 640px) {
  .featured-services { grid-template-columns: repeat(3, 1fr); }
}

/* Card individual */
.featured-service-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.featured-service-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(0,61,120,0.08);
}

/* Icona — contenidor per a imatge custom */
.featured-service-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.featured-service-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.featured-service-card__icon--lucide {
  background: var(--color-secondary-subtle);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-service-card__icon--lucide i,
.featured-service-card__icon--svg svg {
  display: block;
}

/* SVG glyphs: només icona, sense placeholder */
.featured-service-card__icon--svg {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--color-secondary);
  width: auto;
  height: auto;
  overflow: visible;
  display: block;
}

.featured-service-card__title {
  font-family: var(--font-base);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0;
  line-height: 1.3;
}

.featured-service-card__desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.featured-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  margin-top: var(--space-2);
  transition: gap 200ms ease;
}

.featured-service-card__link:hover {
  gap: 8px;
}

/* ── Cert strip ──────────────────────────────────────────── */
.cert-strip {
  background: transparent;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) 0;
}

.cert-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  list-style: none;
}

.cert-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.cert-item__icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}

.cert-item__text {
  font-size: 0.75rem;
  color: var(--color-text-body);
  font-weight: 600;
  max-width: 200px;
  line-height: 1.5;
}

.cert-sep {
  width: 1px;
  height: 44px;
  background: var(--color-border-medium);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .cert-sep { display: none; }
  .cert-strip__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ── Form section (navy → blue gradient) ─────────────────── */
.form-section {
  background: var(--color-bg-alt);   /* gris clar del design system */
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border);
}

.form-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 900px) {
  .form-section-grid {
    grid-template-columns: 1fr 520px;   /* form més ample */
    gap: var(--space-12);
    align-items: start;
  }
}

.form-section__eyebrow {
  color: var(--color-accent) !important;
}

.form-section__title {
  color: var(--color-text-heading);
  margin-bottom: var(--space-3);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.form-section__sub {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin-bottom: var(--space-8);
  max-width: none;
  line-height: 1.6;
}

/* ── USP list ──────────────────────────────────────────────── */
.form-usp {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
}

.form-usp-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.form-usp-dot {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--color-accent-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.form-usp-text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  padding-top: 6px;
}

/* ── Targeta blanca amb el formulari ───────────────────────── */
.form-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  border: 1px solid var(--color-border);
}

/* Override: contact-form dins el form-card — sense bg propi */
.form-section .contact-form {
  background: transparent;
  border-radius: 0;
  padding: 0;
}

/* Amaga el títol redundant del template-part */
.form-section .contact-form__title,
.form-section .contact-form__sub {
  display: none;
}

/* CTA submit — blau corporatiu */
.form-section .form button[type="submit"],
.form-section .form input[type="submit"] {
  background: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
  color: #fff;
}
.form-section .form button[type="submit"]:hover,
.form-section .form input[type="submit"]:hover {
  background: var(--color-bg-dark-alt);
  border-color: var(--color-bg-dark-alt);
}

/* ── Formulari compact: 2 col per nom/tel/email/poblacio ──── */
@media (min-width: 480px) {
  .form-section .form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .form-section .form .form-field {
    flex: 0 0 100%;
    margin-bottom: 0;
  }
  .form-section .form .form-field--half {
    flex: 1 1 calc(50% - var(--space-3) / 2);
    min-width: 0;
    margin-bottom: 0;
  }
  .form-section .form .form-check,
  .form-section .form .notice-banner {
    flex: 0 0 100%;
    margin-bottom: 0;
  }
  .form-section .form button[type="submit"] {
    flex: 0 0 100%;
    margin-top: var(--space-3) !important;
  }
}

/* Inputs lleugerament més compactes dins form-section */
.form-section .form-input,
.form-section .form-select,
.form-section .form-textarea {
  padding: 9px var(--space-3);
  font-size: 0.875rem;
}

.form-section .form-label {
  font-size: 0.75rem;
}

.form-section .form-check {
  margin-bottom: var(--space-2);
}

.form-section .form-check__label {
  font-size: 0.75rem;
}


/* ═══════════════════════════════════════════════════════════
   SOBRE NOSALTRES — seccions específiques
   ═══════════════════════════════════════════════════════════ */

/* ── Qui som: text + columna ─────────────────────────────── */
.who-text h2 {
  margin-top: var(--space-3);
}

.who-text__p,
.who-text__body p {
  margin-top: var(--space-5);
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.85;
}

/* ── Stats strip 4 col ───────────────────────────────────── */
.stats-strip-4 {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .stats-strip-4 { grid-template-columns: repeat(4, 1fr); }
}

.stats-strip-4__cell {
  padding: var(--space-10) var(--space-6);
  text-align: center;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.stats-strip-4__cell:nth-child(2n) { border-right: none; }

@media (min-width: 768px) {
  .stats-strip-4__cell { border-bottom: none; }
  .stats-strip-4__cell:nth-child(2n) { border-right: 1px solid var(--color-border); }
  .stats-strip-4__cell:last-child     { border-right: none; }
}

.stats-strip-4__num {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text-heading);
  letter-spacing: -0.02em;
  line-height: 1;
}

.stats-strip-4__label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
  line-height: 1.4;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── Cert cards fosques ──────────────────────────────────── */
.cert-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

/* Card horitzontal: logo esquerra + text dreta */
.cert-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.cert-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 28px rgba(0,61,120,0.10);
}

/* Logo quadrat — columna esquerra */
.cert-card__img {
  width: 160px;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-right: 1px solid var(--color-border);
  padding: var(--space-5);
  flex-shrink: 0;
  overflow: hidden;
}

.cert-card__img img {
  width: 100%;
  height: auto;
  max-height: 100px;
  object-fit: contain;
  display: block;
  border-radius: 0;
  transition: transform 300ms ease;
}

.cert-card:hover .cert-card__img img {
  transform: scale(1.05);
}

/* Text — columna dreta */
.cert-card__body {
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  flex: 1;
}

.cert-card__name {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text-heading);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cert-card__desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-bottom: var(--space-2);
}

.cert-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--green-10);
  border: 1px solid rgba(137,198,0,0.3);
  color: var(--green-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  align-self: flex-start;
}

.cert-card__badge i {
  color: var(--green);
  flex-shrink: 0;
}

/* ── Valor cards v2 (top de color) ──────────────────────── */
/* ── Layout 2 col: text esquerra + cards dreta ──────────── */
.valors-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 860px) {
  .valors-2col {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-16);
  }
}

.valors-2col__text .section-hd {
  text-align: left;
  margin-bottom: var(--space-6);
}

.valors-2col__text .section-hd__sub {
  max-width: none;
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.valors-footer-text--inline {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-top: var(--space-5);
}

/* Cards verticals dreta */
.valors-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Card estil featured-service però horitzontal */
.valor-card-v2 {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.valor-card-v2:hover {
  border-color: var(--color-accent);
  box-shadow: 0 4px 20px rgba(0,61,120,0.08);
}

.valor-card-v2__icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: #f5fbeb;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green, #89C600);
  flex-shrink: 0;
}

.valor-card-v2__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.valor-card-v2__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: 1.3;
}

.valor-card-v2__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* ── Text peu de secció valors ───────────────────────────── */
/* .valors-footer-text — substituït per .valors-footer-text--inline */


/* ═══════════════════════════════════════════════════════════
   TREBALLA AMB NOSALTRES
   ═══════════════════════════════════════════════════════════ */

/* ── Layout 2 columnes ───────────────────────────────────── */
.treballa-section {
  background: var(--color-bg);
}

.treballa-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 900px) {
  .treballa-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
  }
}

/* ── Columna intro ───────────────────────────────────────── */
.treballa-intro__title {
  margin-top: var(--space-3);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--color-text-heading);
}

.treballa-intro__p {
  margin-top: var(--space-5);
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.85;
}

/* Pills de perfil */
.perfil-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-8) 0;
}

.perfil-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #f5f7f9;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy, #003D78);
}

.perfil-pill i { color: var(--green, #89C600); flex-shrink: 0; }

/* Elimina el ::before anterior — les icones Lucide estan dins la pill */
.perfil-pill::before { display: none; }

.treballa-intro__highlight {
  margin-top: var(--space-2);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-heading);
  line-height: 1.7;
}

/* ── Targeta formulari CV ────────────────────────────────── */
.cv-form-card {
  background: #fff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  padding: var(--space-8);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
}

@media (min-width: 900px) {
  .cv-form-card {
    position: sticky;
    top: calc(68px + var(--space-6));
  }
}

.cv-form-card__head {
  margin-bottom: var(--space-7);
}

.cv-form-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}

.cv-form-card__sub {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ── Formulari CV ────────────────────────────────────────── */
.cv-form__group-label {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  margin-top: var(--space-6);
}

.cv-form__group-label:first-of-type {
  margin-top: 0;
}

.cv-form__row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cv-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.cv-form__field:last-of-type {
  margin-bottom: 0;
}

.cv-form__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cv-form__label span {
  color: var(--color-error);
}

.cv-form__input {
  background: var(--color-bg-alt);
  border: 1.5px solid var(--color-border-medium);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  height: 38px;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--color-text-heading);
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.cv-form__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0,157,226,.12);
}

.cv-form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.cv-form__textarea {
  height: auto;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
  min-height: 76px;
}

/* File upload */
.cv-form__file-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg);
  border: 2px dashed var(--color-border-medium);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  transition: border-color var(--transition);
  margin-bottom: var(--space-5);
  position: relative;
}

.cv-form__file-label:hover {
  border-color: var(--color-accent);
  color: var(--color-text-heading);
}

.cv-form__file-label strong {
  color: var(--color-accent);
}

.cv-form__file-label i {
  color: var(--color-accent);
  flex-shrink: 0;
}

.cv-form__file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* Checkboxes */
.cv-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cv-form__checkbox {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.cv-form__check-label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  cursor: pointer;
}

.cv-form__check-label a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Submit */
.cv-form__submit {
  width: 100%;
  margin-top: var(--space-5);
  justify-content: center;
}

/* Missatge èxit */
.form-success {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.form-success i {
  color: var(--color-success);
}

.form-success h3 {
  font-size: 1.25rem;
  color: var(--color-text-heading);
}

.form-success p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 36ch;
}

/* Missatge error */
.form-error-msg {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-size: 0.875rem;
  color: var(--color-error);
  margin-bottom: var(--space-5);
}


/* ═══════════════════════════════════════════════════════════
   TPL-SERVEI — Plantilla dinàmica sub-pàgines
   ═══════════════════════════════════════════════════════════ */

/* ── ② Intro + form 2 col ────────────────────────────────── */
.servei-intro-section {
  background: var(--color-bg);
}

.servei-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 900px) {
  .servei-intro-grid {
    grid-template-columns: 5fr 4fr; /* ratio unificat seccions servei */
    gap: var(--space-16);
  }
}

.servei-intro__h2 {
  font-family: var(--font-base);
  font-size: clamp(1.75rem, 3vw, 2.25rem); /* canònic seccions */
  font-weight: 700;
  color: var(--color-text-heading);
  margin-top: var(--space-3);
  margin-bottom: var(--space-5);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.servei-intro__p {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-4);
}

.servei-intro__p:last-of-type { margin-bottom: 0; }

.servei-intro__highlight {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-heading);
  line-height: 1.7;
  margin-top: var(--space-4);
}

/* Type badges (Fotovoltaica / Tèrmica) */
.type-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}

.type-badge {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  flex: 1 1 240px;
}

/* Icona quadrada — formula: bg subtle + icona color brillant */
.type-badge__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--color-secondary-subtle);
  color: var(--color-secondary);
}

.type-badge__icon--blue {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.type-badge__icon--green {
  background: var(--color-secondary-subtle);
  color: var(--color-secondary);
}

.type-badge__label--blue {
  color: var(--color-accent);
}

.type-badge__label--green {
  color: var(--color-secondary-dark);
}

/* Subtítol intro (sec manteniments) */
.servei-intro__subtitle {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  line-height: 1.3;
  margin: var(--space-6) 0 var(--space-3);
}

/* Manteniments — bullets inline (sense card) */
.mant-types-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-2);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mant-type {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.mant-type__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.mant-type__icon--blue { color: var(--color-accent); }
.mant-type__icon--green { color: var(--color-secondary); }

.mant-type__text {
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.6;
}

.mant-type__text strong {
  color: var(--color-text-heading);
  font-weight: 600;
}

/* Text */
.type-badge__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.type-badge__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy, #003D78);
}

.type-badge__desc {
  font-size: 0.8125rem;
  color: var(--color-text-body);
  line-height: 1.45;
}

/* Form card dins la intro de servei — idèntic a .form-card de la home */
.servei-form-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  padding: var(--space-8);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
}

@media (min-width: 900px) {
  .servei-form-card {
    position: sticky;
    top: calc(68px + var(--space-6));
  }
}

/* El contact-form no porta bg propi dins la card */
.servei-form-card .contact-form {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Submit — blau fosc corporatiu */
.servei-form-card .form button[type="submit"],
.servei-form-card .form input[type="submit"] {
  background: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
  color: #fff;
}

.servei-form-card .form button[type="submit"]:hover,
.servei-form-card .form input[type="submit"]:hover {
  background: var(--color-bg-dark-alt);
  border-color: var(--color-bg-dark-alt);
}

/* ── ③ Benefit banner ────────────────────────────────────── */
.benefit-banner {
  background: var(--color-text-heading);
  padding: var(--space-6) 0;
}

.benefit-banner__inner {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-6);
  align-items: center;
}

.benefit-banner__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.benefit-banner__text {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  line-height: 1.6;
}

.benefit-banner__text span,
.benefit-banner__text strong {
  color: #fff;
  font-weight: 700;
}

/* ── ④ Com funciona ──────────────────────────────────────── */
.servei-how-section {
  background: var(--color-bg);
}

.servei-how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 768px) {
  .servei-how-grid {
    grid-template-columns: 5fr 4fr; /* ratio unificat seccions servei */
    gap: var(--space-16);
    align-items: start;
  }
}

/* ── Step cards ── */
.servei-how-steps {
  display: flex;
  flex-direction: column;
}

.how-step-card {
  display: flex;
  gap: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  align-items: flex-start;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.how-step-card__aside {
  position: relative;
  flex-shrink: 0;
}

.how-step-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-accent-subtle);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step-card__num {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-text-heading);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  border: 2px solid var(--color-bg-alt);
}

.how-step-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 var(--space-1);
  line-height: 1.3;
  font-family: var(--font-display);
}

.how-step-card__text {
  font-size: 0.8125rem;
  color: var(--color-text-body);
  line-height: 1.55;
  margin: 0;
}

/* Connector between step cards */
.how-step-connector {
  width: 2px;
  height: 20px;
  background: var(--color-border);
  margin-left: 38px;
  position: relative;
  overflow: hidden;
}
.how-step-connector::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: step-flow 2.4s ease-in-out infinite;
}
@keyframes step-flow {
  0%   { top: -6px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 22px;  opacity: 0; }
}

/* ── How widget (right column) ── */
.servei-how-visual {
  position: sticky;
  top: calc(68px + var(--space-6));
}

.how-widget {
  background: var(--color-bg);
  border-radius: 16px;
  border: 1px solid var(--color-border);
  padding: var(--space-5) var(--space-6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
}

.how-widget__header {
  margin-bottom: var(--space-4);
}
.how-widget__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-heading);
  font-family: var(--font-display);
  margin: 0 0 var(--space-1);
}
.how-widget__sub {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Tab switcher */
.how-widget__tabs {
  display: flex;
  gap: 3px;
  background: var(--color-bg-alt);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: var(--space-5);
}
.how-widget__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
  font-family: var(--font-body);
  white-space: nowrap;
}
.how-widget__tab.is-active {
  background: var(--color-bg);
  color: var(--color-accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.how-widget__tab:hover:not(.is-active) {
  color: var(--color-text-heading);
}

.how-widget__panel { display: none; }
.how-widget__panel.is-active { display: block; }

/* ─────────────────────────────────────────────────────────
   ④ COM FUNCIONA — Instal·lacions solars (final)
   Toggle pill · steps animats · visual sticky igualada
   ───────────────────────────────────────────────────────── */

/* Intro text sota el títol */
.how2-intro-text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 0 var(--space-6);
}

/* Toggle pill */
.how2-toggle {
  display: flex;
  background: var(--color-bg-alt);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  width: fit-content;
  margin-bottom: var(--space-8);
}
.how2-toggle__btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: all 180ms ease;
  white-space: nowrap;
}
.how2-toggle__btn:hover:not(.is-active) { color: var(--color-text-heading); }
.how2-toggle__btn--term.is-active {
  background: #fff;
  color: var(--color-accent);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
.how2-toggle__btn--fv.is-active {
  background: #fff;
  color: color-mix(in srgb, var(--green, #89C600) 65%, #000);
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}

/* Grid: capçalera+steps (esquerra) | visual (dreta) */
.how2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: stretch;
}
@media (min-width: 768px) {
  .how2-grid { grid-template-columns: 1fr 1fr; gap: 52px; }
}

/* Columna esquerra: tot el contingut textual */
.how2-main { display: flex; flex-direction: column; }

/* ── Panels ── */
/* Tots els panels s'apilen a la mateixa cel·la: la columna reserva
   sempre l'alçada del panel més alt, sigui quin sigui l'actiu. */
.how2-steps-col {
  display: grid;
  grid-template-areas: "stack";
  flex: 1;
}
.how2-panel {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.how2-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.how2-panel__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.how2-panel__eyebrow--term { color: var(--color-accent); }
.how2-panel__eyebrow--fv   { color: color-mix(in srgb, var(--green, #89C600) 65%, #000); }

.how2-panel__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-2);
}
.how2-panel__desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 0;
}

/* Steps */
.how2-steps { display: flex; flex-direction: column; flex: 1; }

.how2-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.how2-step--last { border-bottom: none; }
.how2-step.is-shown { opacity: 1; transform: translateY(0); }

.how2-step__aside {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.how2-step__num {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  min-width: 16px;
  text-align: right;
}
.how2-step__num--term { color: var(--color-accent); }
.how2-step__num--fv   { color: color-mix(in srgb, var(--green, #89C600) 65%, #000); }
.how2-step__ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.how2-step__ico--term { background: var(--color-accent-subtle); color: var(--color-accent); }
.how2-step__ico--fv   { background: color-mix(in srgb, var(--green, #89C600) 12%, #fff); color: color-mix(in srgb, var(--green, #89C600) 65%, #000); }


.how2-step__content { flex: 1; }
.how2-step__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin: 0 0 3px;
}
.how2-step__desc {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ── Columna dreta: visual ── */
.how2-visual-col {
  position: relative;
}
.how2-visual-card {
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 380px;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 400ms ease, background 350ms ease;
  pointer-events: none;
}
/* El contenidor necessita alçada explícita perquè els fills siguin absoluts */
.how2-visual-col {
  min-height: 380px;
}
.how2-visual-card.is-active { opacity: 1; pointer-events: auto; }
.how2-visual-card--term,
.how2-visual-card--fv { background: var(--color-bg-alt); }
.how2-visual-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Flow diagram */
.flow-diagram {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.flow-node {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 9px 13px;
  transition: border-color 200ms ease;
}
.flow-node--highlight {
  border-color: rgba(0,157,226,0.4);
  background: var(--color-accent-subtle);
}
.flow-node__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.flow-node__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.flow-node__label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-heading);
  font-family: var(--font-display);
  line-height: 1.2;
}
.flow-node__desc {
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  line-height: 1.35;
}

/* Animated connector between nodes */
.flow-connector {
  width: 2px;
  height: 20px;
  background: var(--color-border);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.flow-connector::after {
  content: '';
  position: absolute;
  top: -6px;
  left: -3px;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: flow-down 1.8s ease-in-out infinite;
}
@keyframes flow-down {
  0%   { top: -6px; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 24px;  opacity: 0; }
}

/* Delay per node perquè sembli un flux seqüencial */
.flow-node:nth-child(2)  ~ .flow-connector::after { animation-delay: 0.3s; }
.flow-node:nth-child(4)  ~ .flow-connector::after { animation-delay: 0.6s; }
.flow-node:nth-child(6)  ~ .flow-connector::after { animation-delay: 0.9s; }

/* Split output (consum + excedents) */
.flow-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.flow-split-bar {
  height: 1px;
  background: var(--color-border);
  margin: 0 var(--space-8);
  position: relative;
}
.flow-split-bar::before,
.flow-split-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 12px;
  background: var(--color-border);
}
.flow-split-bar::before { left: 25%; }
.flow-split-bar::after  { right: 25%; }

/* Imatge real (si existeix) */
.servei-how-visual > img {
  width: 100%;
  border-radius: var(--radius-xl);
  display: block;
}

/* ── ④b Aerotèrmia — 2 columnes: text esq · cards dre ──── */
.aero-how-section {
  background: var(--color-bg-alt);
}

.aero-how-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 900px) {
  .aero-how-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

/* ── Columna esquerra: text ── */
.aero-how-text {
  display: flex;
  flex-direction: column;
}

.aero-how-text .eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.aero-how-header__title {
  font-family: var(--font-base);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-heading);
  line-height: 1.2;
  margin-bottom: var(--space-5);
}

.aero-how-header__intro {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

.aero-how-header__intro p {
  margin: 0 0 var(--space-4);
}

.aero-how-header__intro p:last-child {
  margin-bottom: 0;
}

/* ── Nota baixa de columna esquerra (text petit + filete) ── */
.aero-how-note {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ── ④c Bombes — 2 cols (text esq · widget animat dre) ── */
.bombes-how-section {
  background: var(--color-bg-alt);
}

.bombes-how-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 900px) {
  .bombes-how-layout {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
  }
}

.bombes-how__title {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-6);
}

.bombes-how__content {
  font-size: 1rem;
  color: var(--color-text-body);
  line-height: 1.7;
}

.bombes-how__content p { margin: 0 0 var(--space-4); }
.bombes-how__content p:last-child { margin-bottom: 0; }
.bombes-how__content strong {
  font-weight: 600;
  color: var(--color-text-heading);
}

/* ── Widget bombes (cards simples sense animacio) ───── */
.bombes-widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bw-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bw-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: var(--space-2);
}

.bw-card--pressure .bw-card__icon {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.bw-card--elevation .bw-card__icon {
  background: var(--color-secondary-subtle);
  color: var(--color-secondary);
}

.bw-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: -0.005em;
}

.bw-card__caption {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ── ⑥ Avantatges Bombes ─ centrat + icona gran ──────── */
.av-bombes-section {
  background: var(--color-bg);
}

.av-bombes-head {
  margin: 0 auto var(--space-12);
  max-width: 720px;
  text-align: center;
}

.av-bombes-head .eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
}

.av-bombes-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-text-heading);
  line-height: 1.15;
  margin: 0;
}

.av-bombes-desc {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: var(--space-4) auto 0;
  max-width: 56ch;
}

.av-bombes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .av-bombes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.av-bombes-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.av-bombes-card:hover {
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-md);
}

.av-bombes-card__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.av-bombes-card--blue .av-bombes-card__icon {
  background: var(--color-accent-subtle);
  color: var(--color-accent);
}

.av-bombes-card--green .av-bombes-card__icon {
  background: var(--color-secondary-subtle);
  color: var(--color-secondary);
}

.av-bombes-card__title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text-heading);
  line-height: 1.2;
  margin: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.av-bombes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.av-bombes-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.5;
}

.av-bombes-list__check {
  flex-shrink: 0;
  margin-top: 2px;
}

.av-bombes-card--blue .av-bombes-list__check { color: var(--color-accent); }
.av-bombes-card--green .av-bombes-list__check { color: var(--color-secondary); }

/* ── Columna dreta: lead + grid de cards quadrades 3x2 ──── */
.aero-how-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.aero-how-features .aero-how-header__lead {
  font-size: 1rem;
  color: var(--color-text-heading);
  line-height: 1.55;
  font-weight: 500;
  margin: 0;
}

.aero-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .aero-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .aero-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.aero-feature-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.aero-feature-card:hover {
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.aero-feature-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aero-feature-card__title {
  font-family: var(--font-base);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-heading);
  line-height: 1.3;
  margin: 0;
}

.aero-feature-card__text {
  font-size: 0.8125rem;
  color: var(--color-text-body);
  line-height: 1.5;
  margin: 0;
}

/* ── ⑤ Avantatge cards ───────────────────────────────────── */
.servei-adv-section {
  background: var(--color-bg);
}

.adv-card-item {
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-5);
  transition: box-shadow var(--transition), border-color var(--transition);
}

.adv-card-item:hover {
  box-shadow: var(--shadow-md);
  border-color: #c4d0e0;
}

.adv-card-item__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.adv-card-item__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}

.adv-card-item__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

/* ── ⑥ Comparativa ───────────────────────────────────────── */

/* Capçalera de secció */
/* ── Títols de secció unificats (pàgines de servei) ──────── */
.servei-how-section .section-hd__title,
.servei-subs-section .section-hd__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Subs section — fons gris perqué les cards blanques destaquin */
.servei-subs-section {
  background: var(--color-bg-alt);
}

/* ─────────────────────────────────────────────────────────
   ⑥ AVANTATGES — cards wireframe v4
   ───────────────────────────────────────────────────────── */

/* Layout principal: text | cards */
.av-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (min-width: 768px) {
  .av-layout { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}

/* Columna de text */
.av-layout__text { display: flex; flex-direction: column; gap: 0; }
.av-layout__text .eyebrow { display: block; margin-bottom: var(--space-2); }

.av-layout__title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text-heading);
  margin: 0 0 var(--space-5);
}
.av-layout__desc {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* FAQ block — dins de av-section--dark, separat per filete blau discret */
.av-faq-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: stretch;
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) {
  .av-faq-block {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }
}

.av-faq-block__copy {
  flex: 1;
  min-width: 0;
}

.av-faq-block__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 6px;
}

.av-faq-block__sub {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
}

.av-faq-block__cta {
  flex-shrink: 0;
  align-self: flex-start;
}

@media (min-width: 768px) {
  .av-faq-block__cta {
    align-self: center;
  }
}

/* Variant clara — dins de av-bombes-section (fons blanc) */
.av-faq-block--light {
  border-top-color: var(--color-border);
}

.av-faq-block--light .av-faq-block__title {
  color: var(--color-text-heading);
}

.av-faq-block--light .av-faq-block__sub {
  color: var(--color-text-secondary);
}

/* Grid de cards (columna dreta: 2 columnes en horitzontal) */
.av-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

/* Card base — entra des de baix */
.av-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: 24px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 500ms cubic-bezier(.22,.68,0,1.2), transform 500ms cubic-bezier(.22,.68,0,1.2);
}
.av-card.is-visible { opacity: 1; transform: translateY(0); }

/* Icona de sistema */
.av-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}
.av-card__icon--fv,
.av-card__icon--blue  { background: var(--color-accent-subtle); color: var(--color-accent); }
.av-card__icon--term  { background: color-mix(in srgb, var(--green, #89C600) 12%, #fff); color: color-mix(in srgb, var(--green, #89C600) 70%, #000); }
.av-card__icon--green { background: var(--color-accent-subtle); color: var(--color-accent); }

/* Títol */
.av-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin: 0 0 var(--space-2);
  line-height: 1.25;
}

/* Tagline */
.av-card__tagline {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-5);
}

/* Llista de beneficis */
.av-bullet-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.av-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-heading);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 280ms ease, transform 280ms ease;
}
.av-bullet-item.is-shown { opacity: 1; transform: translateY(0); }

/* Dot / icona bullet */
.av-b-dot {
  width: 18px; height: 18px; min-width: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.av-b-dot--fv,
.av-b-dot--blue  { background: var(--color-accent-subtle); color: var(--color-accent); }
.av-b-dot--term  { background: color-mix(in srgb, var(--green, #89C600) 12%, #fff); color: color-mix(in srgb, var(--green, #89C600) 70%, #000); }
.av-b-dot--green { background: var(--color-accent-subtle); color: var(--color-accent); }

/* ── Mode fosc (blau més fosc del sistema) ─────────────────── */
.av-section--dark { background: var(--color-bg-dark-2, #001E50); }

.av-section--dark .eyebrow { color: var(--color-accent-lighter, #7A9FE8); }
.av-section--dark .av-layout__title { color: var(--color-text-on-dark, #F0F0F0); }
.av-section--dark .av-layout__desc { color: rgba(240, 240, 240, 0.72); }

/* Cards: superfície translúcida sobre el navy */
.av-section--dark .av-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.av-section--dark .av-card__title { color: var(--color-text-on-dark, #F0F0F0); }
.av-section--dark .av-card__tagline { color: rgba(240, 240, 240, 0.65); }
.av-section--dark .av-bullet-item { color: rgba(240, 240, 240, 0.88); }

/* Icones: fons translúcid, color viu */
.av-section--dark .av-card__icon--fv,
.av-section--dark .av-card__icon--blue,
.av-section--dark .av-card__icon--green,
.av-section--dark .av-b-dot--fv,
.av-section--dark .av-b-dot--blue,
.av-section--dark .av-b-dot--green {
  background: rgba(122, 159, 232, 0.18);
  color: var(--color-accent-lighter, #7A9FE8);
}
.av-section--dark .av-card__icon--term,
.av-section--dark .av-b-dot--term {
  background: color-mix(in srgb, var(--green, #89C600) 22%, transparent);
  color: color-mix(in srgb, var(--green, #89C600) 70%, #fff);
}

/* ── ⑤ Ajuts i subvencions ──────────────────────────────── */
.servei-ajuts-section {
  background: var(--color-bg-alt);
}

.ajuts-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: stretch;
}

@media (min-width: 768px) {
  .ajuts-inner { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  /* Columnes invertides: widgets a l'esquerra, text a la dreta.
     Mantenim el text primer al DOM (mòbil/SEO). */
  .ajuts-widget-col { order: 1; }
  .ajuts-text       { order: 2; }
}

/* Left col */
.ajuts-text__h2 { margin-bottom: var(--space-5); }

.ajuts-text__p {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-4);
}

.ajuts-list {
  list-style: none;
  margin: var(--space-2) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ajuts-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.ajuts-list li i {
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.ajuts-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

.ajuts-fiscal-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.ajuts-fiscal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.ajuts-fiscal-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.ajuts-fiscal-list li i { color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }

.ajuts-footer-note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-5);
}

/* Columna de widgets: 3 cards apilades, repartides per equilibrar l'alçada. */
.ajuts-widget-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 768px) {
  /* Les 3 cards es reparteixen l'alçada total per igualar-la amb el text. */
  .ajuts-widget-col > .ajuts-card { flex: 1 1 0; }
}

.ajuts-card {
  background: var(--color-bg-card, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.ajuts-card--cobertura {
  padding: 24px;
}

.ajuts-card--incentius {
  padding: 14px 20px;
}
.ajuts-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-lighter);
}


.ajuts-card__micro {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

/* Progress bars */
.ajuts-progress-list { display: flex; flex-direction: column; gap: var(--space-3); }

.ajuts-progress-item__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.ajuts-progress-item__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  color: var(--color-text-heading);
}

.ajuts-progress-item__label i { color: var(--color-text-secondary); }

.ajuts-progress-item__pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.ajuts-progress-bar {
  height: 5px;
  background: var(--color-bg-alt);
  border-radius: 99px;
  overflow: hidden;
}

.ajuts-progress-bar__fill {
  height: 100%;
  border-radius: 99px;
  width: 0 !important;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.ajuts-progress-bar__fill.is-animated {
  width: var(--target-width) !important;
}

/* Pills fiscals */
.ajuts-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ajuts-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  padding: 5px 11px;
  border: 1px solid transparent;
  cursor: default;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.ajuts-pill:hover { transform: translateY(-1px); }

/* Totes les pills neutres i iguals */
.ajuts-pill--purple,
.ajuts-pill--blue,
.ajuts-pill--amber,
.ajuts-pill--green,
.ajuts-pill--gray {
  background: var(--color-bg-alt);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.ajuts-pill--purple:hover,
.ajuts-pill--blue:hover,
.ajuts-pill--amber:hover,
.ajuts-pill--green:hover,
.ajuts-pill--gray:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-lighter);
  color: var(--color-text-heading);
}

/* Audience grid */
.ajuts-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.ajuts-audience-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: var(--space-3) var(--space-2);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-heading);
  text-align: center;
  line-height: 1.35;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.ajuts-audience-chip:hover {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-lighter);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.ajuts-audience-chip i {
  color: var(--color-accent);
  transition: color var(--transition);
}
.ajuts-audience-chip:hover i { color: var(--color-accent-dark); }


/* ── ⑧ Sub-seccions (Manteniments) ──────────────────────── */
.subs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sub-row {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .sub-row { grid-template-columns: 200px 1fr; }
}

.sub-row__photo {
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  color: var(--color-text-muted);
  overflow: hidden;
}

.sub-row__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sub-row__body {
  padding: var(--space-7) var(--space-8);
}

.sub-row__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-3);
}

.sub-row__desc {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ── Subs cards grid (4 en horitzontal) ──────────────────── */
.subs-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .subs-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .subs-cards-grid { grid-template-columns: repeat(4, 1fr); }
}

.subs-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 200ms, box-shadow 200ms;
}

.subs-card:hover {
  border-color: var(--color-border-medium);
  box-shadow: var(--shadow-md);
}

/* Widget — zona superior blanca, padding lateral, sense radius propi */
.subs-card__widget {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  height: 120px;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.subs-card__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

/* Títol prominent */
.subs-card__title {
  font-family: var(--font-base);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy, #003D78);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Body — paràgrafs descriptius (text del client) */
.subs-card__desc {
  font-size: 0.9375rem;
  color: var(--color-text-body);
  line-height: 1.6;
}

.subs-card__desc p {
  margin: 0 0 var(--space-3);
}

.subs-card__desc p:last-child {
  margin-bottom: 0;
}

.subs-card__desc strong {
  color: var(--navy, #003D78);
  font-weight: 600;
}

/* Mini-widgets */
.subs-mini-flow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-5);
  width: 100%;
}

.subs-mini-node {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-body);
  white-space: nowrap;
}

.subs-mini-node i { color: var(--color-accent); }

.subs-mini-node--ok {
  background: #f0fdf4;
  border-color: rgba(22,163,74,0.3);
  color: #16a34a;
}

.subs-mini-node--ok i { color: #16a34a; }

.subs-mini-arr {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.subs-mini-cop {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.subs-mini-cop__in,
.subs-mini-cop__out {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 64px;
}

.subs-mini-cop__out--accent {
  background: var(--color-accent-subtle);
  border-color: rgba(0,157,226,0.3);
}

.subs-mini-cop__val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy, #003D78);
  line-height: 1;
}

.subs-mini-cop__out--accent .subs-mini-cop__val { color: var(--color-accent); }

.subs-mini-cop__lbl {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  white-space: nowrap;
  margin-top: 3px;
}

.subs-mini-cop__arrow { color: var(--color-text-muted); }

/* Barra de pressió */
.subs-mini-pressure { width: 100%; }

.subs-mini-pressure__bar {
  height: 14px;
  background: var(--color-border);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.subs-mini-pressure__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--green, #89C600));
  border-radius: 100px;
}

.subs-mini-pressure__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.subs-mini-pressure__ok { color: var(--green, #89C600); }

/* Checklist */
.subs-mini-check {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.subs-mini-check__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-text-body);
  font-weight: 500;
}

.subs-mini-check__item i { color: var(--green, #89C600); flex-shrink: 0; }

.subs-mini-icon { color: var(--color-accent); }

/* ── ⑨ FAQ strip ─────────────────────────────────────────── */
.faq-strip {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-8) 0;
}

.faq-strip__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

@media (min-width: 640px) {
  .faq-strip__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.faq-strip__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-1);
}

.faq-strip__sub {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

/* ── ⑩ CTA final (fons abstracte navy + turquesa) ───────── */
.servei-cta {
  position: relative;
  background-image:
    radial-gradient(ellipse 90% 80% at 0% 50%, rgba(0, 220, 230, 0.70) 0%, rgba(0, 160, 200, 0.30) 35%, transparent 65%),
    linear-gradient(115deg, #00528a 0%, #003D78 45%, #001E50 100%);
  background-color: var(--color-bg-dark);
  padding: var(--space-16) 0;
  overflow: hidden;
}

.servei-cta .container { position: relative; z-index: 1; }

.servei-cta__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 720px;
  margin: 0 auto;
}

.servei-cta__title {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0;
}

@media (min-width: 768px) {
  .servei-cta { padding: var(--space-20) 0; }
}



/* ============================================================
   PAGINES LEGALS — Avis Legal · Privacitat · Cookies
   ============================================================ */
.legal-section {
  background: var(--color-bg);
}

.legal-section__inner {
  max-width: 820px;
}

.legal-content {
  color: var(--color-text-body);
  font-size: 1rem;
  line-height: 1.75;
}

.legal-content h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text-heading);
  line-height: 1.25;
  margin: var(--space-12) 0 var(--space-4);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin: var(--space-8) 0 var(--space-3);
}

.legal-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-heading);
  margin: var(--space-6) 0 var(--space-2);
}

.legal-content p {
  margin: 0 0 var(--space-4);
  max-width: none;
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 var(--space-4) var(--space-6);
  padding: 0;
}

.legal-content li {
  margin-bottom: var(--space-2);
  line-height: 1.65;
}

.legal-content ul li {
  list-style: disc;
}

.legal-content ol li {
  list-style: decimal;
}

.legal-content strong {
  color: var(--color-text-heading);
  font-weight: 600;
}

.legal-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover {
  color: var(--color-accent-dark);
}


/* ============================================================
   PAGINA SOL·LICITA PRESSUPOST — hero 2 columnes amb form-card
   ============================================================ */
.pressupost-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-dark);
  padding-top: calc(68px + var(--space-16));
  padding-bottom: var(--space-24);
}

@media (min-width: 768px) {
  .pressupost-hero {
    padding-top: calc(68px + var(--space-24));
    padding-bottom: var(--space-32);
  }
}

.pressupost-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pressupost-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;  /* fons discret de plaques */
}

.pressupost-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 70% at 15% 50%, rgba(0, 30, 80, 0.55), transparent 65%),
    linear-gradient(135deg, rgba(0, 61, 120, 0.92) 0%, rgba(0, 30, 80, 0.85) 100%);
}

.pressupost-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .pressupost-hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

.pressupost-hero__copy {
  color: #fff;
}

.pressupost-hero__eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-4);
}

.pressupost-hero__title {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 var(--space-5);
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.pressupost-hero__sub {
  color: rgba(255,255,255,.82);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 48ch;
  margin: 0;
}

.pressupost-hero__form {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}

@media (min-width: 768px) {
  .pressupost-hero__form { padding: var(--space-8); }
}

/* Override del form-contact intern: sense doble wrapper visual */
.pressupost-hero__form .contact-form {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.pressupost-hero__form .pressupost-gforms {
  width: 100%;
  min-height: 720px;
  border: 0;
  display: block;
}


/* ═══════════════════════════════════════════════════════════
   HOME — POLISH visual (sense canvis de contingut)
   Refinaments selectius sobre els components existents:
   hero, trust bar, featured cards, qui som, form section.
   ═══════════════════════════════════════════════════════════ */

/* ── HERO: overlay cinemàtic + jerarquia tipogràfica ────── */

/* Overlay: radial des de baix-esquerra + capa lineal subtil = profunditat */
.home-hero .page-hero__overlay {
  background:
    radial-gradient(
      ellipse at 25% 75%,
      rgba(0, 30, 80, 0.55) 0%,
      rgba(0, 30, 80, 0.25) 45%,
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(
      180deg,
      rgba(0, 20, 60, 0.20) 0%,
      rgba(0, 20, 60, 0.05) 40%,
      rgba(0, 30, 80, 0.55) 100%
    );
}

/* Vinyeta perimetral subtil */
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 90% 70% at center,
    transparent 60%,
    rgba(0, 10, 35, 0.30) 100%
  );
}

/* Títol: més pes visual, text-shadow lleuger, balanceig de línies */
.home-hero__title {
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 20, 60, 0.40);
}

/* Subtítol: més contrast + line-height més proper */
.home-hero__sub {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  text-wrap: pretty;
}

/* CTA blanc amb micro-elevació */
.home-hero .btn-white {
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.40);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.home-hero .btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.45);
}


/* ── TRUST BAR: shadow més profunda, hover refinat ──────── */
.trust-bar {
  padding: var(--space-6) 0;
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    rgba(247, 248, 250, 0.4) 100%
  );
}

.trust-item {
  border-radius: var(--radius-md);
  transition: background var(--transition);
}

.trust-item:hover {
  background: var(--color-bg-alt);
}

/* Icones: gradient subtil verd + ombra interior */
.trust-item__icon--lucide {
  background: linear-gradient(
    135deg,
    rgba(137, 198, 0, 0.20) 0%,
    rgba(137, 198, 0, 0.08) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(137, 198, 0, 0.15);
  color: var(--color-secondary-dark);
}

/* SVG glyphs trust-bar: només icona, color corporatiu */
.trust-item__icon--svg {
  color: var(--color-secondary-dark);
}

.trust-item__label {
  letter-spacing: -0.01em;
}


/* ── FEATURED CARDS: més pes als icons + line accent en hover ── */
.featured-services-section {
  background: linear-gradient(
    180deg,
    var(--color-bg-alt) 0%,
    rgba(247, 248, 250, 0.5) 100%
  );
}

.featured-service-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) var(--space-5);
  box-shadow: 0 1px 2px rgba(0, 30, 80, 0.04);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

@media (min-width: 768px) {
  .featured-service-card {
    padding: var(--space-8) var(--space-6);
  }
}

.featured-service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 61, 120, 0.20);
  box-shadow:
    0 20px 48px -16px rgba(0, 30, 80, 0.18),
    0 4px 12px -4px rgba(0, 30, 80, 0.08);
}

/* Línia verda fina superior, animada en hover */
.featured-service-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-5);
  right: var(--space-5);
  height: 2px;
  background: var(--green);
  border-radius: 0 0 2px 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  .featured-service-card::after {
    left: var(--space-6);
    right: var(--space-6);
  }
}

.featured-service-card:hover::after {
  transform: scaleX(1);
}

/* Icona: més pes + halo verd subtil */
.featured-service-card__icon--lucide {
  width: 56px;
  height: 56px;
  background: linear-gradient(
    135deg,
    rgba(137, 198, 0, 0.18) 0%,
    rgba(137, 198, 0, 0.06) 100%
  );
  border: 1px solid rgba(137, 198, 0, 0.22);
  color: var(--green-dark);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.featured-service-card__icon--lucide i {
  width: 26px !important;
  height: 26px !important;
}

/* SVG glyphs featured services: només icona, sense halo */
.featured-service-card__icon--svg {
  color: var(--green-dark);
  margin-bottom: var(--space-2);
}

.featured-service-card__icon--svg svg {
  width: 56px;
  height: 56px;
}

.featured-service-card__title {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: var(--space-1);
}

.featured-service-card__desc {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}


/* ── QUI SOM: imatge més refinada + tipografia ──────────── */
.who-visual {
  border-radius: var(--radius-xl);
  box-shadow:
    0 24px 48px -16px rgba(0, 30, 80, 0.18),
    0 4px 12px -4px rgba(0, 30, 80, 0.08);
  border: 1px solid rgba(0, 30, 80, 0.04);
}

/* Subtítol del Qui som: line-height més respirable */
.who-grid > div:first-child p {
  line-height: 1.75;
}


/* ── FORM SECTION: shadow més profunda + focus states ───── */
.form-card {
  box-shadow:
    0 24px 64px -16px rgba(0, 30, 80, 0.14),
    0 4px 16px -4px rgba(0, 30, 80, 0.06);
  border: 1px solid rgba(0, 30, 80, 0.06);
}

/* USP dots: gradient + ombra interior subtil */
.form-usp-dot {
  background: linear-gradient(
    135deg,
    rgba(0, 61, 120, 0.10) 0%,
    rgba(0, 61, 120, 0.04) 100%
  );
  border: 1px solid rgba(0, 61, 120, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Inputs: focus ring més refinat */
.form-section .form-input:focus,
.form-section .form-select:focus,
.form-section .form-textarea:focus {
  border-color: var(--color-accent);
  box-shadow:
    0 0 0 3px rgba(0, 61, 120, 0.08),
    0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Submit: micro-elevació en hover */
.form-section .form button[type="submit"] {
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 12px -4px rgba(0, 30, 80, 0.30);
}

.form-section .form button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(0, 30, 80, 0.40);
}


/* ── SECTION HEADER: tipografia més polida ──────────────── */
.section-hd__title {
  text-wrap: balance;
  letter-spacing: -0.022em;
  font-weight: 700;
}

.section-hd__sub {
  text-wrap: pretty;
  line-height: 1.65;
}


/* ── SERVICE PHOTO CARDS: overlay i ombra refinats ──────── */
.service-photo-card {
  box-shadow: 0 1px 2px rgba(0, 30, 80, 0.06);
  transition: transform var(--transition), box-shadow var(--transition);
}

.service-photo-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 48px -16px rgba(0, 30, 80, 0.30),
    0 4px 12px -4px rgba(0, 30, 80, 0.16);
}

/* Overlay degradat més refinat (mantenim foscor però guanyem profunditat) */
.service-photo-card__overlay {
  background: linear-gradient(
    to top,
    rgba(0, 20, 60, 0.92) 0%,
    rgba(0, 20, 60, 0.60) 35%,
    rgba(0, 20, 60, 0.10) 60%,
    rgba(0, 20, 60, 0.00) 100%
  );
}

.service-photo-card__title {
  letter-spacing: -0.015em;
}


/* ── TOGGLE BAR (Comunitats / Autoconsum): més pes visual ── */
.toggle-bar {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.toggle-bar .tabs-nav__btn.is-active {
  background: #fff;
  box-shadow:
    0 2px 6px rgba(0, 30, 80, 0.10),
    0 1px 0 rgba(0, 30, 80, 0.04);
  color: var(--color-text-heading);
}