/* Sistema de disseny Pirineu40.
   Unic fitxer d'estils de tota la web. Cap pagina porta colors, tipografies ni mides propis:
   nomes classes d'aquest fitxer. Els valors (variables --*) venen de tema.php (configuracio). */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--mida-lletra-base); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-fons);
  color: var(--color-text);
  font-family: var(--tipografia-text);
  line-height: 1.6;
}

h1, h2, h3, h4 { font-family: var(--tipografia-titols); line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--color-primari); text-decoration: none; }
a:hover { text-decoration: underline; }

.contenidor { width: 100%; max-width: var(--amplada-contingut); margin: 0 auto; padding: 0 1.25rem; }
.contingut { flex: 1; padding: 2rem 0 3rem; }

/* Capcalera */
.capcalera { background: var(--color-superficie); border-bottom: 1px solid var(--color-vora); position: sticky; top: 0; z-index: 10; }
.capcalera__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.2rem; color: var(--color-text); }
.marca:hover { text-decoration: none; }
.marca__logo { width: 2rem; height: 2rem; border-radius: 10px; background: linear-gradient(135deg, var(--color-primari), var(--color-secundari)); }
.menu { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.menu a { color: var(--color-text-suau); font-weight: 500; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--color-primari); text-decoration: none; }

/* Peu */
.peu { border-top: 1px solid var(--color-vora); color: var(--color-text-suau); padding: 1.5rem 0; font-size: .9rem; }

/* Portada */
.heroi { padding: 4rem 0 3rem; }
.heroi__etiqueta { display: inline-block; padding: .25rem .8rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primari) 14%, transparent); color: var(--color-primari); font-weight: 600; font-size: .85rem; margin-bottom: 1rem; }
.heroi h1 { font-size: 3rem; max-width: 18ch; }
.heroi p { color: var(--color-text-suau); font-size: 1.2rem; max-width: 52ch; }
.accions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* Botons */
.boto { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.3rem; border-radius: var(--radi-angles); border: 1px solid transparent; background: var(--color-primari); color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: transform .12s, background .12s; }
.boto:hover { background: var(--color-primari-fosc); text-decoration: none; transform: translateY(-1px); }
.boto--secundari { background: transparent; color: var(--color-text); border-color: var(--color-vora); }
.boto--secundari:hover { background: var(--color-superficie); border-color: var(--color-primari); }
.boto--perill { background: var(--color-error); }

/* Targetes i quadricula */
.quadricula { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.targeta { background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: var(--radi-angles); padding: 1.4rem; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04); }
.targeta h3 { margin-bottom: .4rem; }
.targeta p { color: var(--color-text-suau); margin: 0; }
.targeta--enllac { display: block; color: inherit; transition: transform .15s, border-color .15s; }
.targeta--enllac:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--color-primari); }

/* Formularis */
.camp { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.camp label { font-weight: 600; font-size: .9rem; }
.camp input, .camp select, .camp textarea { width: 100%; padding: .65rem .8rem; border-radius: calc(var(--radi-angles) - 4px); border: 1px solid var(--color-vora); background: var(--color-fons); color: var(--color-text); font: inherit; }
.camp input:focus, .camp select:focus, .camp textarea:focus { outline: 2px solid var(--color-primari); outline-offset: 1px; }
.camp__ajuda { color: var(--color-text-suau); font-size: .85rem; }

/* Taules */
.taula-contenidor { overflow-x: auto; border: 1px solid var(--color-vora); border-radius: var(--radi-angles); background: var(--color-superficie); }
.taula { width: 100%; border-collapse: collapse; }
.taula th, .taula td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--color-vora); }
.taula th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-suau); }
.taula tr:last-child td { border-bottom: 0; }

/* Etiquetes i avisos */
.etiqueta { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: color-mix(in srgb, var(--color-primari) 14%, transparent); color: var(--color-primari); }
.etiqueta--exit { background: color-mix(in srgb, var(--color-exit) 16%, transparent); color: var(--color-exit); }
.etiqueta--avis { background: color-mix(in srgb, var(--color-avis) 18%, transparent); color: var(--color-avis); }
.etiqueta--error { background: color-mix(in srgb, var(--color-error) 16%, transparent); color: var(--color-error); }
.avis { padding: 1rem 1.2rem; border-radius: var(--radi-angles); border: 1px solid var(--color-vora); background: var(--color-superficie); margin-bottom: 1rem; }
.avis--exit { border-color: var(--color-exit); }
.avis--avis { border-color: var(--color-avis); }
.avis--error { border-color: var(--color-error); }

/* Mostres de color (pagina de components) */
.mostra { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.mostra__color { width: 2.2rem; height: 2.2rem; border-radius: 10px; border: 1px solid var(--color-vora); }


/* Utilitats */
.separacio { margin-bottom: 2rem; }
.targeta--estreta { max-width: 480px; }
.mostra__color--color-primari { background: var(--color-primari); }
.mostra__color--color-primari-fosc { background: var(--color-primari-fosc); }
.mostra__color--color-secundari { background: var(--color-secundari); }
.mostra__color--color-fons { background: var(--color-fons); }
.mostra__color--color-superficie { background: var(--color-superficie); }
.mostra__color--color-text { background: var(--color-text); }
.mostra__color--color-text-suau { background: var(--color-text-suau); }
.mostra__color--color-vora { background: var(--color-vora); }
.mostra__color--color-exit { background: var(--color-exit); }
.mostra__color--color-avis { background: var(--color-avis); }
.mostra__color--color-error { background: var(--color-error); }

/* Selector de mode */
.selector-mode { background: transparent; border: 1px solid var(--color-vora); color: var(--color-text); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; font: inherit; font-size: .85rem; }
.selector-mode:hover { border-color: var(--color-primari); }


/* Acces, menu amb sessio i configuracio */
.camp--casella { flex-direction: row; align-items: center; gap: .6rem; }
.camp--casella input { width: auto; }
.cel-centrada { text-align: center; }
.taula--matriu td, .taula--matriu th { vertical-align: middle; }
.targeta--centrada { margin: 2rem auto; }
.targeta--pendent { opacity: .7; }
.formulari-en-linia { display: inline; margin: 0; }
.boto--petit { padding: .4rem 1rem; font-size: .9rem; }
.fil-de-pa { color: var(--color-text-suau); font-size: .9rem; margin-bottom: .5rem; }

.disposicio-aparenca { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.previsualitzacio-contenidor { position: sticky; top: 5rem; }
.grup-camps { border: 1px solid var(--color-vora); border-radius: var(--radi-angles); padding: 1rem 1.2rem; margin: 0 0 1.2rem; background: var(--color-superficie); }
.grup-camps legend { font-weight: 700; padding: 0 .5rem; }
.camp--en-fila { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
.camp--en-fila label { flex: 1; font-weight: 500; }
.camp--en-fila input { width: 55%; max-width: 280px; }
.camp--en-fila input[type="color"] { width: 3.2rem; height: 2.4rem; padding: .1rem; cursor: pointer; }

.previsualitzacio { background: var(--color-fons); color: var(--color-text); font-family: var(--tipografia-text); font-size: var(--mida-lletra-base); border: 1px solid var(--color-vora); border-radius: var(--radi-angles); padding: 1.4rem; }
.previsualitzacio h2, .previsualitzacio h3 { font-family: var(--tipografia-titols); }
.previsualitzacio .targeta { background: var(--color-superficie); border-color: var(--color-vora); border-radius: var(--radi-angles); margin-top: 1rem; }
.previsualitzacio .boto { background: var(--color-primari); border-radius: var(--radi-angles); cursor: default; }
.previsualitzacio .boto--secundari { background: transparent; color: var(--color-text); border-color: var(--color-vora); }
.previsualitzacio .etiqueta { color: var(--color-primari); }

@media (max-width: 860px) {
  .disposicio-aparenca { grid-template-columns: 1fr; }
  .previsualitzacio-contenidor { position: static; }
  .camp--en-fila { flex-wrap: wrap; }
  .camp--en-fila input { width: 100%; max-width: none; }
}


/* Moduls de negoci: tauler, llistats, fitxes i pipeline */
.indicadors { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 2rem; }
.indicador { background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: var(--radi-angles); padding: 1.1rem 1.3rem; }
.indicador__valor { font-size: 1.8rem; font-weight: 700; font-family: var(--tipografia-titols); line-height: 1.2; }
.indicador__etiqueta { color: var(--color-text-suau); font-size: .85rem; }
.indicador--primari .indicador__valor { color: var(--color-primari); }
.indicador--exit .indicador__valor { color: var(--color-exit); }
.indicador--avis .indicador__valor { color: var(--color-avis); }

.titol-amb-accions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.titol-amb-accions h1 { margin: 0; }
.cerca { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.cerca input, .cerca select { padding: .6rem .8rem; border-radius: calc(var(--radi-angles) - 4px); border: 1px solid var(--color-vora); background: var(--color-superficie); color: var(--color-text); font: inherit; min-width: 180px; }
.cerca input[type="search"] { flex: 1; min-width: 220px; }

.fitxa { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.fitxa__principal, .fitxa__lateral { display: flex; flex-direction: column; gap: 1.2rem; }
.dades { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 0; }
.dades dt { color: var(--color-text-suau); font-size: .9rem; }
.dades dd { margin: 0; }
.targeta h2 { font-size: 1.15rem; }
.llista-neta { list-style: none; margin: 0; padding: 0; }
.llista-neta li { padding: .55rem 0; border-bottom: 1px solid var(--color-vora); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.llista-neta li:last-child { border-bottom: 0; }
.llista-neta .suau { color: var(--color-text-suau); font-size: .85rem; }
.camp-fila { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.camp-fila .camp { margin: 0; flex: 1; min-width: 140px; }
.dreta { text-align: right; }
.xifra { font-variant-numeric: tabular-nums; white-space: nowrap; }

.pipeline { display: grid; gap: 1rem; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); overflow-x: auto; padding-bottom: .6rem; }
.pipeline__columna { background: color-mix(in srgb, var(--color-superficie) 60%, var(--color-fons)); border: 1px solid var(--color-vora); border-radius: var(--radi-angles); padding: .8rem; min-height: 8rem; }
.pipeline__columna h3 { font-size: .95rem; display: flex; justify-content: space-between; margin-bottom: .6rem; }
.pipeline__targeta { display: block; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: calc(var(--radi-angles) - 4px); padding: .7rem .8rem; margin-bottom: .6rem; color: var(--color-text); }
.pipeline__targeta:hover { text-decoration: none; border-color: var(--color-primari); }
.pipeline__targeta small { color: var(--color-text-suau); display: block; }
.pestanyes { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.pestanyes a { padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--color-vora); color: var(--color-text-suau); }
.pestanyes a[aria-current="page"], .pestanyes a:hover { background: var(--color-primari); color: #fff; border-color: var(--color-primari); text-decoration: none; }
.checklist li::before { content: "○"; margin-right: .5rem; color: var(--color-text-suau); }
.checklist li.fet::before { content: "✓"; color: var(--color-exit); font-weight: 700; }
.checklist li { justify-content: flex-start; }

@media (max-width: 860px) {
  .fitxa { grid-template-columns: 1fr; }
}

/* Web publica: targetes de producte amb imatge */
.producte-targeta { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.producte-targeta__imatge, .producte-imatge { background: linear-gradient(135deg, color-mix(in srgb, var(--color-primari) 22%, var(--color-superficie)), color-mix(in srgb, var(--color-secundari) 22%, var(--color-superficie))); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--color-primari); font-size: 2.6rem; font-weight: 700; font-family: var(--tipografia-titols); }
.producte-targeta__imatge img, .producte-imatge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.producte-targeta__cos { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.producte-targeta__preu { font-weight: 700; font-size: 1.15rem; color: var(--color-primari); margin-top: auto; }
.producte-targeta__tipus { color: var(--color-text-suau); font-size: .85rem; }
.miniatura img { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.galeria { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-top: .8rem; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radi-angles) - 6px); border: 1px solid var(--color-vora); }
.camp--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.seccio { margin: 3rem 0; }
.seccio > h2 { margin-bottom: 1.2rem; }


/* Calendari */
.calendari { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--color-vora); border: 1px solid var(--color-vora); border-radius: var(--radi-angles); overflow: hidden; }
.calendari__capcalera { background: var(--color-superficie); padding: .5rem; text-align: center; font-size: .8rem; font-weight: 700; color: var(--color-text-suau); }
.calendari__dia { background: var(--color-superficie); min-height: 6.5rem; padding: .35rem .4rem; display: flex; flex-direction: column; gap: .2rem; }
.calendari__dia--buit { background: color-mix(in srgb, var(--color-superficie) 60%, var(--color-fons)); }
.calendari__dia--avui { outline: 2px solid var(--color-primari); outline-offset: -2px; }
.calendari__numero { font-size: .8rem; font-weight: 700; color: var(--color-text-suau); }
.llegenda { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ev { display: block; font-size: .72rem; padding: .1rem .4rem; border-radius: 6px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); }
.ev:hover { text-decoration: none; filter: brightness(.95); }
.ev--tasca { background: color-mix(in srgb, var(--color-avis) 22%, transparent); }
.ev--entrada { background: color-mix(in srgb, var(--color-exit) 22%, transparent); }
.ev--sortida { background: color-mix(in srgb, var(--color-secundari) 25%, transparent); }
.ev--venciment { background: color-mix(in srgb, var(--color-error) 20%, transparent); }
.ev--vacances { background: color-mix(in srgb, var(--color-secundari) 35%, transparent); }
.ev--publicacio { background: color-mix(in srgb, var(--color-primari) 22%, transparent); }
@media (max-width: 700px) { .calendari__dia { min-height: 4.2rem; } .calendari .ev { font-size: .62rem; } }


/* Documents generats i impressio */
.document { background: #fff; color: #111; border: 1px solid var(--color-vora); border-radius: var(--radi-angles); padding: 2.2rem 2.6rem; max-width: 820px; margin: 0 auto; line-height: 1.55; font-family: Georgia, 'Times New Roman', serif; }
.document h1 { font-size: 1.7rem; margin-bottom: .8rem; color: #111; font-family: inherit; }
.document h2 { font-size: 1.15rem; margin: 1.3rem 0 .4rem; color: #111; font-family: inherit; }
.document table { width: 100%; border-collapse: collapse; margin: .8rem 0; }
.document th, .document td { border: 1px solid #bbb; padding: .4rem .6rem; text-align: left; vertical-align: top; }
.camp__codi { font-family: ui-monospace, Consolas, monospace; font-size: .85rem; min-height: 22rem; }
@media print {
  .capcalera, .peu, .no-imprimir, .avis { display: none !important; }
  body { background: #fff; }
  .contingut { padding: 0; }
  .contenidor { max-width: none; padding: 0; }
  .document { border: 0; padding: 0; max-width: none; }
}

@media (max-width: 640px) {
  h1 { font-size: 1.9rem; }
  .heroi h1 { font-size: 2.2rem; }
  .capcalera__fila { flex-wrap: wrap; padding: .6rem 0; }
}

/* Cataleg public visual (estil portal de vehicles) */
.heroi--curt { padding: 2rem 0 1.4rem; }
.heroi--curt h1 { font-size: 2.2rem; max-width: none; }
.catalog { display: grid; gap: 1.5rem; grid-template-columns: 250px 1fr; align-items: start; }
.filtres { background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: var(--radi-angles); padding: 1.1rem; display: grid; gap: .7rem; position: sticky; top: 1rem; }
.filtres h2 { font-size: 1.05rem; margin: 0; }
.rang { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.quadricula--gran { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.producte-targeta { position: relative; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: var(--radi-angles); transition: transform .15s, box-shadow .15s; }
.producte-targeta:hover { transform: translateY(-3px); box-shadow: var(--ombra-targeta, 0 10px 24px rgba(0, 0, 0, .12)); }
.producte-targeta__imatge { position: relative; aspect-ratio: 4 / 3; text-decoration: none; }
.producte-targeta__cinta { position: absolute; top: .7rem; left: 0; background: var(--color-secundari); color: #fff; font-size: .75rem; font-weight: 700; padding: .2rem .7rem; border-radius: 0 999px 999px 0; }
.producte-targeta__favorit { position: absolute; top: .6rem; right: .6rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #c0392b; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.producte-targeta__favorit[aria-pressed="true"] { background: #c0392b; color: #fff; }
.producte-targeta h3 { margin: 0; font-size: 1.05rem; }
.producte-targeta h3 a { color: inherit; text-decoration: none; }
.xips { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; padding: 0; margin: .2rem 0 .4rem; }
.xips li { background: color-mix(in srgb, var(--color-primari) 10%, transparent); color: var(--color-text); border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; }
.paginacio { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin: 1.6rem 0; }
.paginacio a { padding: .4rem .85rem; border: 1px solid var(--color-vora); border-radius: 8px; color: var(--color-text); }
.paginacio a[aria-current="page"], .paginacio a:hover { background: var(--color-primari); color: #fff; border-color: var(--color-primari); text-decoration: none; }
.visor { position: relative; }
.visor__principal { aspect-ratio: 16 / 10; background: var(--color-fons); border-radius: var(--radi-angles); overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
.visor__principal img { width: 100%; height: 100%; object-fit: cover; }
.visor__miniatures { display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto; }
.visor__miniatures img { width: 96px; height: 68px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; opacity: .75; }
.visor__miniatures img[aria-current="true"] { border-color: var(--color-primari); opacity: 1; }
.llum { position: fixed; inset: 0; background: rgba(0, 0, 0, .9); display: none; align-items: center; justify-content: center; z-index: 50; }
.llum[data-obert] { display: flex; }
.llum img { max-width: 94vw; max-height: 90vh; border-radius: 8px; }
.llum button { position: absolute; background: rgba(255, 255, 255, .15); color: #fff; border: 0; font-size: 2rem; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; }
.llum__tanca { top: 1rem; right: 1rem; }
.llum__anterior { left: 1rem; }
.llum__seguent { right: 1rem; }
.especificacions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin: 1rem 0; }
.especificacions div { background: var(--color-fons); border-radius: 10px; padding: .7rem .9rem; }
.especificacions dt { font-size: .75rem; color: var(--color-text-suau); }
.especificacions dd { margin: 0; font-weight: 700; }
.preu-gran { font-size: 2rem; font-weight: 800; color: var(--color-primari); margin: 0; }
@media (max-width: 860px) { .catalog { grid-template-columns: 1fr; } .filtres { position: static; } }

/* Calendari: vistes, mini calendari, capes */
[hidden] { display: none !important; }
.barra-calendari { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: .5rem 0 1rem; }
.pestanyes--compactes { margin: 0; }
.nomes-lectors { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calendari-pagina { display: grid; gap: 1.2rem; grid-template-columns: 250px 1fr; align-items: start; }
.mini-cal__titol { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.mini-cal__graella { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mini-cal__cap { font-size: .7rem; color: var(--color-text-suau); font-weight: 700; }
.mini-cal__dia { display: block; padding: .3rem 0; border-radius: 50%; font-size: .8rem; color: var(--color-text); position: relative; }
.mini-cal__dia:hover { background: color-mix(in srgb, var(--color-primari) 15%, transparent); text-decoration: none; }
.mini-cal__dia--avui { font-weight: 800; color: var(--color-primari); }
.mini-cal__dia--triat { background: var(--color-primari); color: #fff; }
.mini-cal__dia--ocupat::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--color-secundari); }
.capes label { display: flex; gap: .5rem; align-items: center; cursor: pointer; }
.calendari__dalt { display: flex; justify-content: space-between; align-items: center; }
.calendari__numero { text-decoration: none; padding: 0 .25rem; border-radius: 6px; }
.calendari__afegeix { opacity: 0; font-weight: 700; color: var(--color-primari); text-decoration: none; padding: 0 .35rem; }
.calendari__dia:hover .calendari__afegeix, .calendari__afegeix:focus, .calendari__afegeix--visible { opacity: 1; }
.ev b { font-weight: 700; }
.ev--cita { background: color-mix(in srgb, var(--color-primari) 30%, transparent); border-left: 3px solid var(--color-primari); }
.ev--provisional { border-left-style: dashed; opacity: .8; }
.setmana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.setmana__dia { background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: var(--radi-angles); padding: .5rem; display: flex; flex-direction: column; gap: .3rem; min-height: 12rem; }
.setmana__dia--avui { outline: 2px solid var(--color-primari); }
.setmana__cap { font-size: .85rem; color: var(--color-text-suau); text-decoration: none; }
.agenda li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .8rem; align-items: center; }
.agenda__hora { font-weight: 700; color: var(--color-text-suau); font-size: .85rem; }
.agenda .ev { white-space: normal; font-size: .9rem; padding: .3rem .6rem; }
.agenda-dia h2 { font-size: 1rem; }
@media (max-width: 960px) { .calendari-pagina { grid-template-columns: 1fr; } .setmana { grid-template-columns: 1fr; } }

/* Finances: quadre de comandament, grafics i formularis de linies */
.kpis { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 1.5rem; }
.kpi { background: var(--color-superficie); border: 1px solid var(--color-vora); border-top: 4px solid var(--color-primari); border-radius: var(--radi-angles); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .15rem; }
.kpi--exit { border-top-color: var(--color-exit); }
.kpi--avis { border-top-color: var(--color-avis); }
.kpi--error { border-top-color: var(--color-error); }
.kpi--secundari { border-top-color: var(--color-secundari); }
.kpi__etiqueta { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-suau); font-weight: 600; }
.kpi__valor { font-size: 1.7rem; font-weight: 800; font-family: var(--tipografia-titols); line-height: 1.2; }
.kpi__detall { font-size: .82rem; color: var(--color-text-suau); }
.progres { width: 100%; height: .5rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--color-vora); accent-color: var(--color-exit); appearance: none; margin-top: .3rem; }
.progres::-webkit-progress-bar { background: var(--color-vora); }
.progres::-webkit-progress-value { background: var(--color-exit); border-radius: 999px; }
.progres::-moz-progress-bar { background: var(--color-exit); }
.progres--primari::-webkit-progress-value { background: var(--color-primari); }
.progres--primari::-moz-progress-bar { background: var(--color-primari); }
.grafic { width: 100%; height: auto; display: block; }
.grafic text { fill: var(--color-text-suau); font-size: 11px; }
.grafic .barra--facturat { fill: var(--color-primari); }
.grafic .barra--cobrat { fill: var(--color-exit); }
.grafic .barra--despeses { fill: var(--color-avis); }
.grafic .eix { stroke: var(--color-vora); stroke-width: 1; }
.grafic-llegenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--color-text-suau); margin-top: .5rem; }
.grafic-llegenda i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.grafic-llegenda .barra--facturat { background: var(--color-primari); }
.grafic-llegenda .barra--cobrat { background: var(--color-exit); }
.grafic-llegenda .barra--despeses { background: var(--color-avis); }
.quadricula-2 { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-bottom: 1.2rem; }
.categoria-fila { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; margin-bottom: .7rem; }
.categoria-fila progress { grid-column: 1 / -1; margin: 0; }
.filtres-linia { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filtres-linia .camp { margin: 0; min-width: 130px; }
.resum-filtre { display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--color-text-suau); margin: .6rem 0; }
.linies-factura input { width: 100%; }
.linies-factura td { padding: .3rem; }
.nombre-curt { max-width: 6.5rem; text-align: right; }
.etiqueta--avis { background: color-mix(in srgb, var(--color-avis) 20%, transparent); color: var(--color-text); }
.etiqueta--perill { background: color-mix(in srgb, var(--color-error) 18%, transparent); color: var(--color-error); }
.factura-paper { background: #fff; color: #111; border: 1px solid var(--color-vora); border-radius: var(--radi-angles); padding: 2rem 2.4rem; }
.factura-paper h2, .factura-paper h3 { color: #111; }
.factura-paper .taula th { color: #111; }

/* Blog */
.article { max-width: 760px; margin: 0 auto; }
.article h1 { font-size: 2.2rem; }
.article__portada { width: 100%; border-radius: var(--radi-angles); margin-bottom: 1.2rem; display: block; aspect-ratio: 16 / 8; object-fit: cover; }
.article__cos { font-size: 1.08rem; line-height: 1.75; margin-top: 1.2rem; }
.article__cos h2 { margin-top: 2rem; }
.article__cos ul { padding-left: 1.4rem; }
.article__etiquetes { margin-top: 1.5rem; }
.article-targeta .producte-targeta__cos p { margin: 0 0 .4rem; }
.article-targeta__llegir { font-weight: 600; margin-top: auto; }
.editor-article { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.editor-article textarea { min-height: 22rem; font-family: ui-monospace, Consolas, monospace; font-size: .95rem; }
@media (max-width: 960px) { .editor-article { grid-template-columns: 1fr; } }

.icona-producte { width: 34%; max-width: 8rem; opacity: .75; }
.visor__principal .producte-imatge { width: 100%; height: 100%; aspect-ratio: auto; background: none; }
.visor__principal .icona-producte { width: 22%; }

/* ==========================================================================
   Capa visual 2: disposicions (web publica i aplicacio), portada, peu,
   solucions, newsletter, blog i xat. Tots els valors surten dels tokens del tema.
   ========================================================================== */
:root {
  --degradat-marca: linear-gradient(135deg, var(--color-primari), var(--color-secundari));
  --ombra-suau: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .06);
  --ombra-forta: 0 18px 50px rgba(0, 0, 0, .18);
  --alcada-capcalera: 4.2rem;
}
html { scroll-behavior: smooth; }
img, svg { max-width: 100%; }
.pictograma { width: 1.25rem; height: 1.25rem; flex: none; }
.commutador-menu { position: absolute; opacity: 0; pointer-events: none; }
.menu-boto { display: none; cursor: pointer; padding: .4rem; border-radius: 10px; color: var(--color-text); }
.menu-boto .pictograma { width: 1.6rem; height: 1.6rem; }

/* ---------- Web publica: capcalera ---------- */
.cap-public { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--color-superficie) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--color-vora); }
.cap-public__fila { display: flex; align-items: center; gap: 1.2rem; min-height: var(--alcada-capcalera); }
.cap-public .marca { margin-right: auto; }
.marca__logo { box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primari) 40%, transparent); }
.menu-public { display: flex; align-items: center; gap: .3rem; }
.menu-public > a, .desplegable__boto { padding: .5rem .85rem; border-radius: 999px; color: var(--color-text-suau); font-weight: 600; font-size: .95rem; transition: background .15s, color .15s; }
.menu-public > a:hover, .desplegable__boto:hover, .desplegable:focus-within .desplegable__boto { background: color-mix(in srgb, var(--color-primari) 10%, transparent); color: var(--color-primari); text-decoration: none; }
.menu-public > a[aria-current="page"], .desplegable__boto[aria-current="page"] { color: var(--color-primari); background: color-mix(in srgb, var(--color-primari) 12%, transparent); }
.menu-public__accions { display: flex; align-items: center; gap: .6rem; margin-left: .8rem; padding-left: 1rem; border-left: 1px solid var(--color-vora); }
.desplegable { position: relative; }
.desplegable__fletxa { font-size: .7rem; opacity: .7; }
.desplegable__panell { position: absolute; top: calc(100% + .4rem); left: 50%; transform: translateX(-30%) translateY(6px); width: min(46rem, 92vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; padding: .8rem; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: calc(var(--radi-angles) + 4px); box-shadow: var(--ombra-forta); opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; }
.desplegable:hover .desplegable__panell, .desplegable:focus-within .desplegable__panell { opacity: 1; visibility: visible; transform: translateX(-30%) translateY(0); }
.desplegable__element { display: flex; gap: .8rem; align-items: flex-start; padding: .65rem .8rem; border-radius: var(--radi-angles); color: var(--color-text); }
.desplegable__element:hover { background: color-mix(in srgb, var(--color-primari) 9%, transparent); text-decoration: none; }
.desplegable__element .pictograma { color: var(--color-primari); margin-top: .1rem; width: 1.5rem; height: 1.5rem; }
.desplegable__element strong { display: block; font-size: .95rem; }
.desplegable__element small { color: var(--color-text-suau); font-size: .8rem; }
.desplegable__tots { grid-column: 1 / -1; text-align: center; padding: .6rem; font-weight: 600; border-top: 1px solid var(--color-vora); margin-top: .3rem; }
.selector-mode--icona { padding: .4rem .75rem; font-size: .8rem; }

/* ---------- Aplicacio: barra lateral ---------- */
.cos-app { background: color-mix(in srgb, var(--color-fons) 94%, var(--color-primari)); }
.app { display: grid; grid-template-columns: 17rem minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--color-superficie); border-right: 1px solid var(--color-vora); padding: 1.1rem .8rem; z-index: 40; scrollbar-width: thin; }
.marca--lateral { padding: .2rem .6rem 1.1rem; font-size: 1.15rem; }
.lateral__menu { flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.lateral__titol { display: block; padding: 0 .7rem .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--color-text-suau); opacity: .85; }
.lateral__enllac { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border-radius: 10px; color: var(--color-text-suau); font-weight: 500; font-size: .93rem; transition: background .12s, color .12s; }
.lateral__enllac:hover { background: color-mix(in srgb, var(--color-primari) 9%, transparent); color: var(--color-text); text-decoration: none; }
.lateral__enllac[aria-current="page"] { background: var(--degradat-marca); color: #fff; font-weight: 600; box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primari) 35%, transparent); }
.lateral__peu { border-top: 1px solid var(--color-vora); margin-top: 1rem; padding-top: .6rem; }
.lateral__fons { display: none; }
.app__cos { min-width: 0; display: flex; flex-direction: column; }
.app__barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; min-height: 3.6rem; padding: 0 1.5rem; background: color-mix(in srgb, var(--color-superficie) 85%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-vora); }
.app__barra-titol { font-weight: 700; font-family: var(--tipografia-titols); }
.app__barra-accions { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.app__usuari { display: flex; align-items: center; gap: .55rem; color: var(--color-text); font-weight: 600; font-size: .9rem; }
.app__usuari:hover { text-decoration: none; }
.app__avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--degradat-marca); color: #fff; font-size: .85rem; font-weight: 700; }
.contingut--app { padding: 1.6rem 0 3rem; }
.contenidor--app { max-width: 1400px; padding: 0 1.5rem; }

/* ---------- Portada i seccions ---------- */
.contingut--lliure { padding: 0; }
.portada { position: relative; overflow: hidden; padding: 5rem 0 4.5rem; background: radial-gradient(60rem 28rem at 85% -10%, color-mix(in srgb, var(--color-primari) 28%, transparent), transparent 70%), radial-gradient(40rem 24rem at -5% 20%, color-mix(in srgb, var(--color-secundari) 22%, transparent), transparent 70%); }
.portada__graella { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: center; }
.portada h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05; letter-spacing: -.03em; max-width: 16ch; }
.text-degradat { background: var(--degradat-marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portada__lead { font-size: 1.2rem; color: var(--color-text-suau); max-width: 50ch; margin-top: 1.1rem; }
.cinta { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .9rem .3rem .4rem; border-radius: 999px; background: var(--color-superficie); border: 1px solid var(--color-vora); font-size: .85rem; font-weight: 600; color: var(--color-text-suau); box-shadow: var(--ombra-suau); margin-bottom: 1.2rem; }
.cinta__punt { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--degradat-marca); display: grid; place-items: center; color: #fff; }
.cinta__punt .pictograma { width: .8rem; height: .8rem; }
.boto--gran { padding: .95rem 1.7rem; font-size: 1.05rem; border-radius: 999px; }
.boto { background: var(--degradat-marca); box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primari) 30%, transparent); }
.boto:hover { background: var(--degradat-marca); filter: brightness(.93); }
.boto--secundari { background: var(--color-superficie); box-shadow: none; }
.boto--secundari:hover { background: var(--color-superficie); filter: none; }
.boto--perill { background: var(--color-error); box-shadow: none; }
.boto--perill:hover { background: var(--color-error); }
.portada__visual { position: relative; display: grid; gap: 1rem; }
.mostra-targeta { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: calc(var(--radi-angles) + 4px); box-shadow: var(--ombra-forta); }
.mostra-targeta:nth-child(2) { margin-left: 2.2rem; }
.mostra-targeta:nth-child(3) { margin-left: .6rem; }
.mostra-targeta__icona { width: 2.8rem; height: 2.8rem; border-radius: 12px; background: color-mix(in srgb, var(--color-primari) 14%, transparent); color: var(--color-primari); display: grid; place-items: center; flex: none; }
.mostra-targeta__icona .pictograma { width: 1.5rem; height: 1.5rem; }
.mostra-targeta strong { display: block; }
.mostra-targeta span { color: var(--color-text-suau); font-size: .88rem; }
.mostra-targeta__valor { margin-left: auto; font-weight: 800; font-size: 1.2rem; color: var(--color-exit); }
.xifres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 2.6rem; max-width: 40rem; }
.xifres__dada strong { display: block; font-size: 2rem; font-family: var(--tipografia-titols); line-height: 1; }
.xifres__dada span { color: var(--color-text-suau); font-size: .88rem; }

.seccio-llarga { padding: 4.5rem 0; }
.seccio-llarga--suau { background: color-mix(in srgb, var(--color-superficie) 55%, var(--color-fons)); border-block: 1px solid var(--color-vora); }
.capcalera-seccio { text-align: center; max-width: 42rem; margin: 0 auto 2.6rem; }
.capcalera-seccio--esquerra { text-align: left; margin-left: 0; }
.capcalera-seccio h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.02em; }
.capcalera-seccio p { color: var(--color-text-suau); font-size: 1.1rem; }
.sobretitol { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primari); margin-bottom: .6rem; }
.graella-targetes { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.targeta-servei { display: flex; flex-direction: column; gap: .6rem; padding: 1.7rem; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: calc(var(--radi-angles) + 4px); color: inherit; box-shadow: var(--ombra-suau); transition: transform .18s, box-shadow .18s, border-color .18s; }
.targeta-servei:hover { transform: translateY(-4px); box-shadow: var(--ombra-forta); border-color: color-mix(in srgb, var(--color-primari) 50%, var(--color-vora)); text-decoration: none; }
.targeta-servei h3 { margin: 0; }
.targeta-servei p { margin: 0; color: var(--color-text-suau); }
.targeta-servei__icona { width: 3.2rem; height: 3.2rem; border-radius: 14px; display: grid; place-items: center; background: var(--degradat-marca); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primari) 30%, transparent); }
.targeta-servei__icona .pictograma { width: 1.6rem; height: 1.6rem; }
.targeta-servei__enllac { margin-top: auto; font-weight: 700; color: var(--color-primari); display: inline-flex; align-items: center; gap: .4rem; }
.targeta-servei__enllac .pictograma { width: 1rem; height: 1rem; transition: transform .15s; }
.targeta-servei:hover .targeta-servei__enllac .pictograma { transform: translateX(4px); }
.passos { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: pas; }
.pas { position: relative; padding: 1.7rem 1.4rem 1.4rem; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: var(--radi-angles); }
.pas::before { counter-increment: pas; content: counter(pas); position: absolute; top: -1rem; left: 1.2rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--degradat-marca); color: #fff; font-weight: 800; box-shadow: 0 6px 14px color-mix(in srgb, var(--color-primari) 35%, transparent); }
.pas h3 { margin-top: .4rem; font-size: 1.05rem; }
.pas p { margin: 0; color: var(--color-text-suau); }
.banda-crida { position: relative; overflow: hidden; border-radius: calc(var(--radi-angles) + 10px); padding: 3rem 2.4rem; background: var(--degradat-marca); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; box-shadow: var(--ombra-forta); }
.banda-crida::after { content: ""; position: absolute; right: -4rem; top: -5rem; width: 18rem; height: 18rem; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.banda-crida h2 { color: #fff; margin: 0 0 .4rem; }
.banda-crida p { margin: 0; opacity: .92; }
.banda-crida .boto { background: #fff; color: var(--color-primari-fosc); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); position: relative; z-index: 1; }
.testimonis { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.testimoni { padding: 1.6rem; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: calc(var(--radi-angles) + 4px); box-shadow: var(--ombra-suau); margin: 0; }
.testimoni p { font-size: 1.05rem; }
.testimoni footer { display: flex; align-items: center; gap: .7rem; color: var(--color-text-suau); font-size: .9rem; }
.testimoni__avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--degradat-marca); color: #fff; display: grid; place-items: center; font-weight: 700; }
.estrelles { color: var(--color-secundari); letter-spacing: .1em; margin-bottom: .6rem; }

/* ---------- Capcaleres de pagina de la web publica ---------- */
.heroi--curt { position: relative; padding: 3.2rem 0 2.2rem; margin-bottom: 1.6rem; background: radial-gradient(40rem 16rem at 90% -20%, color-mix(in srgb, var(--color-primari) 22%, transparent), transparent 70%); border-radius: 0 0 var(--radi-angles) var(--radi-angles); }
.heroi--curt h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.02em; }
.heroi--curt p { font-size: 1.1rem; }

/* ---------- Peu public ---------- */
.peu-public { margin-top: auto; background: color-mix(in srgb, var(--color-superficie) 60%, var(--color-fons)); border-top: 1px solid var(--color-vora); padding-top: 3rem; color: var(--color-text-suau); }
.peu-public__graella { display: grid; gap: 2rem; grid-template-columns: 1.3fr .8fr .9fr 1.4fr; }
.peu-public h4 { color: var(--color-text); font-size: .9rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .9rem; }
.peu-public__llista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.peu-public__llista a { color: var(--color-text-suau); }
.peu-public__llista a:hover { color: var(--color-primari); }
.peu-public__marca p { margin: .8rem 0 .4rem; }
.peu-public__dada span { color: var(--color-text); font-weight: 600; margin-right: .4rem; }
.peu-public__baix { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--color-vora); margin-top: 2.4rem; padding-block: 1.2rem; font-size: .85rem; }
.newsletter-caixa { display: flex; gap: .5rem; }
.newsletter-caixa input { flex: 1; min-width: 0; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--color-vora); background: var(--color-superficie); color: var(--color-text); font: inherit; }
.newsletter-caixa input:focus { outline: 2px solid var(--color-primari); outline-offset: 1px; }
.newsletter-consentiment { display: flex; gap: .5rem; align-items: flex-start; margin-top: .6rem; font-size: .78rem; line-height: 1.4; }
.newsletter-consentiment input { margin-top: .15rem; }
.camp--trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nomes-lectors { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bloc de newsletter ampli ---------- */
.bloc-newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 2.6rem; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: calc(var(--radi-angles) + 10px); box-shadow: var(--ombra-suau); }
.bloc-newsletter h2 { margin-bottom: .4rem; }
.bloc-newsletter p { color: var(--color-text-suau); }
.interessos { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.interessos label { display: inline-flex; gap: .4rem; align-items: center; padding: .35rem .8rem; border: 1px solid var(--color-vora); border-radius: 999px; font-size: .88rem; cursor: pointer; }
.interessos label:has(input:checked) { background: color-mix(in srgb, var(--color-primari) 14%, transparent); border-color: var(--color-primari); color: var(--color-primari); }

/* ---------- Solucions ---------- */
.solucio-hero { position: relative; padding: 3.4rem 0 2.6rem; background: radial-gradient(44rem 18rem at 85% -20%, color-mix(in srgb, var(--color-primari) 24%, transparent), transparent 70%); border-bottom: 1px solid var(--color-vora); }
.solucio-hero__fila { display: flex; gap: 1.6rem; align-items: flex-start; }
.solucio-hero__icona { width: 4.4rem; height: 4.4rem; border-radius: 20px; background: var(--degradat-marca); color: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primari) 35%, transparent); }
.solucio-hero__icona .pictograma { width: 2.2rem; height: 2.2rem; }
.solucio-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -.02em; margin-bottom: .4rem; }
.solucio-hero p { font-size: 1.15rem; color: var(--color-text-suau); max-width: 60ch; }
.etiquetes-fila { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.solucio-cos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.6rem; padding-block: 2.4rem 3rem; align-items: start; }
.solucio-cos section { background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: calc(var(--radi-angles) + 2px); padding: 1.6rem 1.8rem; margin-bottom: 1.2rem; box-shadow: var(--ombra-suau); }
.solucio-cos h2 { font-size: 1.25rem; display: flex; align-items: center; gap: .6rem; }
.llista-punts { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.llista-punts li { position: relative; padding-left: 1.9rem; }
.llista-punts li::before { content: ""; position: absolute; left: 0; top: .35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: color-mix(in srgb, var(--color-exit) 18%, transparent); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--color-exit) 55%, transparent); }
.llista-punts--idees li::before { background: color-mix(in srgb, var(--color-secundari) 25%, transparent); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--color-secundari) 70%, transparent); }
.nota-limit { border-left: 4px solid var(--color-avis); background: color-mix(in srgb, var(--color-avis) 10%, transparent); padding: .9rem 1.1rem; border-radius: 0 var(--radi-angles) var(--radi-angles) 0; }
.solucio-lateral { position: sticky; top: calc(var(--alcada-capcalera) + 1rem); }
.solucio-lateral .targeta { margin-bottom: 1.2rem; }
.demo-publica { border: 1px dashed var(--color-primari); background: color-mix(in srgb, var(--color-primari) 5%, var(--color-superficie)); }
.solucions-graella { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.etiqueta--operatiu { background: color-mix(in srgb, var(--color-exit) 16%, transparent); color: var(--color-exit); }
.etiqueta--demostracio { background: color-mix(in srgb, var(--color-avis) 18%, transparent); color: var(--color-avis); }
.etiqueta--concepte { background: color-mix(in srgb, var(--color-text-suau) 16%, transparent); color: var(--color-text-suau); }

/* ---------- Blog visual ---------- */
.blog-destacat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; margin-bottom: 2rem; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: calc(var(--radi-angles) + 6px); overflow: hidden; box-shadow: var(--ombra-suau); }
.blog-destacat__imatge { min-height: 17rem; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primari) 55%, var(--color-superficie)), color-mix(in srgb, var(--color-secundari) 55%, var(--color-superficie))); color: #fff; overflow: hidden; }
.blog-destacat__imatge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-destacat__imatge .pictograma { width: 5rem; height: 5rem; opacity: .85; }
.blog-destacat__cos { padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.blog-destacat__cos h2 { font-size: 1.8rem; margin: 0; }
.blog-destacat__cos h2 a { color: inherit; }
.article-targeta .producte-targeta__imatge { aspect-ratio: 16 / 9; }
.article-targeta .producte-targeta__imatge .pictograma { width: 22%; height: auto; color: #fff; opacity: .9; }
.article__portada { box-shadow: var(--ombra-forta); }
.article__cap { text-align: center; max-width: 44rem; margin: 1rem auto 1.6rem; }
.article__cap h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -.025em; }
.article__cos { max-width: 44rem; margin-inline: auto; }
.article__cos > p:first-child::first-letter { font-size: 3.4rem; float: left; line-height: .9; padding: .25rem .5rem 0 0; font-weight: 800; color: var(--color-primari); }
.compartir { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: 2rem; }

/* ---------- Xat web ---------- */
.xat { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; font-family: var(--tipografia-text); }
.xat__boto { width: 3.7rem; height: 3.7rem; border: 0; border-radius: 50%; background: var(--degradat-marca); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 30px color-mix(in srgb, var(--color-primari) 45%, transparent); transition: transform .15s; }
.xat__boto:hover { transform: scale(1.07); }
.xat__boto .pictograma { width: 1.7rem; height: 1.7rem; }
.xat__finestra { position: absolute; right: 0; bottom: 4.7rem; width: min(23rem, calc(100vw - 2.4rem)); height: min(33rem, calc(100vh - 8rem)); display: none; flex-direction: column; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: 18px; box-shadow: var(--ombra-forta); overflow: hidden; }
.xat--obert .xat__finestra { display: flex; }
.xat__cap { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; background: var(--degradat-marca); color: #fff; }
.xat__cap strong { display: block; line-height: 1.1; }
.xat__cap small { opacity: .85; }
.xat__tanca { margin-left: auto; background: transparent; border: 0; color: #fff; cursor: pointer; padding: .2rem; }
.xat__missatges { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: color-mix(in srgb, var(--color-fons) 70%, var(--color-superficie)); }
.xat__bombolla { max-width: 85%; padding: .6rem .9rem; border-radius: 16px; font-size: .92rem; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.xat__bombolla--bot { align-self: flex-start; background: var(--color-superficie); border: 1px solid var(--color-vora); border-bottom-left-radius: 4px; }
.xat__bombolla--usuari { align-self: flex-end; background: var(--color-primari); color: #fff; border-bottom-right-radius: 4px; }
.xat__bombolla a { font-weight: 600; text-decoration: underline; }
.xat__suggeriments { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; background: color-mix(in srgb, var(--color-fons) 70%, var(--color-superficie)); }
.xat__suggeriments button { border: 1px solid var(--color-vora); background: var(--color-superficie); color: var(--color-text); border-radius: 999px; padding: .3rem .7rem; font-size: .8rem; cursor: pointer; font-family: inherit; }
.xat__suggeriments button:hover { border-color: var(--color-primari); color: var(--color-primari); }
.xat__formulari { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--color-vora); }
.xat__formulari input { flex: 1; min-width: 0; padding: .6rem .9rem; border-radius: 999px; border: 1px solid var(--color-vora); background: var(--color-superficie); color: var(--color-text); font: inherit; }
.xat__formulari button { border: 0; border-radius: 50%; width: 2.5rem; height: 2.5rem; background: var(--color-primari); color: #fff; cursor: pointer; display: grid; place-items: center; }
.xat__formulari button .pictograma { width: 1.1rem; height: 1.1rem; }

/* ---------- Millores generals de components ---------- */
.targeta { border-radius: calc(var(--radi-angles) + 2px); }
.camp input, .camp select, .camp textarea { background: var(--color-superficie); color: var(--color-text); }
.taula tbody tr:hover td { background: color-mix(in srgb, var(--color-primari) 5%, transparent); }
.avis { border-left-width: 4px; }

/* ---------- Adaptacio a mobil ---------- */
@media (max-width: 1100px) {
  .peu-public__graella { grid-template-columns: 1fr 1fr; }
  .app { grid-template-columns: 15rem minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .portada__graella, .solucio-cos, .bloc-newsletter, .blog-destacat, .banda-crida { grid-template-columns: 1fr; }
  .portada__visual { display: none; }
  .solucio-lateral { position: static; }
  .menu-boto { display: inline-flex; }
  .cap-public__fila { flex-wrap: wrap; }
  .menu-public { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 1rem; }
  #menu-mobil:checked ~ .menu-public { display: flex; }
  .menu-public__accions { margin: .6rem 0 0; padding: .8rem 0 0; border-left: 0; border-top: 1px solid var(--color-vora); flex-wrap: wrap; }
  .desplegable__panell { position: static; transform: none; opacity: 1; visibility: visible; width: auto; box-shadow: none; border: 0; grid-template-columns: 1fr; padding: 0 0 0 .6rem; display: none; }
  .desplegable:focus-within .desplegable__panell { display: grid; transform: none; }
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 17rem; transform: translateX(-105%); transition: transform .2s; box-shadow: var(--ombra-forta); }
  #menu-lateral:checked ~ .app .lateral { transform: none; }
  #menu-lateral:checked ~ .app .lateral__fons { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 35; }
  .app__barra .menu-boto { display: inline-flex; }
  .app__usuari-nom { display: none; }
  .contenidor--app { padding: 0 1rem; }
  .seccio-llarga { padding: 3rem 0; }
}
@media (max-width: 600px) {
  .peu-public__graella { grid-template-columns: 1fr; }
  .portada { padding: 3rem 0; }
  .banda-crida { padding: 2rem 1.4rem; }
  .bloc-newsletter { padding: 1.6rem; }
  .solucio-hero__fila { flex-direction: column; }
  .app__barra-titol { font-size: .95rem; }
}
@media print {
  .cap-public, .lateral, .app__barra, .peu-public, .xat { display: none !important; }
  .app { display: block; }
}

.verifactu-peu { display: flex; gap: 1rem; align-items: center; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed #bbb; }
.verifactu-peu .qr { width: 6rem; height: 6rem; flex: none; border: 1px solid #ddd; }
.cadena { display: grid; gap: .4rem; }
.cadena__fila { display: grid; grid-template-columns: 2rem 1fr auto; gap: .8rem; align-items: center; padding: .6rem .9rem; background: var(--color-superficie); border: 1px solid var(--color-vora); border-radius: var(--radi-angles); }
.cadena__fila--error { border-color: var(--color-error); background: color-mix(in srgb, var(--color-error) 8%, var(--color-superficie)); }
.cadena__estat { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--color-exit) 20%, transparent); color: var(--color-exit); }
.cadena__fila--error .cadena__estat { background: color-mix(in srgb, var(--color-error) 20%, transparent); color: var(--color-error); }
.cadena__estat .pictograma { width: .9rem; height: .9rem; }
.cadena code { font-size: .78rem; color: var(--color-text-suau); }

/* ---------- Moduls integrats: rutes, enviaments, torns, visio, demos ---------- */
.parada { display: flex; flex-direction: column; gap: .15rem; padding: .5rem .6rem; border-radius: 10px; border: 1px solid var(--color-vora); border-left-width: 4px; background: var(--color-superficie); font-size: .85rem; }
.parada--planificat { border-left-color: var(--color-primari); }
.parada--pendent { border-left-color: var(--color-avis); }
.parada--repartit { border-left-color: var(--color-exit); opacity: .75; }
.parada--cancellat { border-left-color: var(--color-error); opacity: .55; text-decoration: line-through; }
.parada__accions { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .25rem; }
.parada__accions .selector-mode { padding: .15rem .5rem; font-size: .75rem; }
.temps { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--color-vora); display: grid; gap: 1rem; }
.temps__punt { position: relative; display: grid; gap: .1rem; }
.temps__punt::before { content: ""; position: absolute; left: -1.7rem; top: .3rem; width: .85rem; height: .85rem; border-radius: 50%; background: var(--color-primari); box-shadow: 0 0 0 4px var(--color-superficie); }
.temps__punt--entregat::before { background: var(--color-exit); }
.temps__punt--incidencia::before { background: var(--color-error); }
.temps__punt small { color: var(--color-text-suau); }
.taula--torns td, .taula--torns th { padding: .55rem .6rem; vertical-align: top; }
.cel-avui { background: color-mix(in srgb, var(--color-primari) 8%, transparent); }
.torn { display: flex; align-items: center; justify-content: space-between; gap: .3rem; padding: .2rem .5rem; margin-bottom: .2rem; border-radius: 8px; background: color-mix(in srgb, var(--color-primari) 14%, transparent); font-size: .82rem; font-weight: 600; }
.torn__x { border: 0; background: transparent; color: var(--color-text-suau); cursor: pointer; font-size: .8rem; padding: 0 .2rem; }
.torn__x:hover { color: var(--color-error); }
.linia-visio { stroke: var(--color-primari); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.punt-visio { fill: var(--color-primari); }
.punt-visio--alerta { fill: var(--color-error); }
.placa { display: inline-block; padding: .1rem .5rem; border: 2px solid var(--color-text); border-radius: 6px; background: var(--color-superficie); font-weight: 700; letter-spacing: .08em; font-size: .9rem; }
.demos-ia { display: grid; gap: .8rem; }
.demo-ia { border: 1px solid var(--color-vora); border-radius: var(--radi-angles); background: var(--color-superficie); padding: .9rem 1.1rem; }
.demo-ia summary { cursor: pointer; }
.demo-ia[open] summary { margin-bottom: .8rem; }
.resultat-ia { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: var(--radi-angles); background: color-mix(in srgb, var(--color-primari) 6%, var(--color-superficie)); border: 1px solid var(--color-vora); }
.resultat-ia blockquote { margin: .4rem 0; padding: .6rem 1rem; border-left: 4px solid var(--color-primari); background: var(--color-superficie); border-radius: 0 10px 10px 0; }
.targeta-solucio { display: flex; flex-direction: column; gap: .6rem; }
.targeta-solucio p { flex: 1; }
.quadricula-2 { align-items: start; }

/* ---------- Contacte i valoracio ---------- */
.contacte { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-bottom: 3rem; }
.contacte__costat { display: grid; gap: 1.2rem; }
.contacte__llista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.contacte__llista li { display: flex; gap: .9rem; align-items: center; }
.contacte__llista small { display: block; color: var(--color-text-suau); }
.contacte__icona { width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--color-primari) 14%, transparent); color: var(--color-primari); flex: none; }
.contacte__form .camp--trampa + .camp { margin-top: 0; }
@media (max-width: 960px) { .contacte { grid-template-columns: 1fr; } }