/* Inter allotjada aquí (llicència SIL OFL, fonts/OFL.txt): cap petició a Google, així cap IP surt cap a fora. Lletra variable, pesos 400 a 700. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/Inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/Inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Corretja · Cuines · el disseny.
   Direcció: «el quadern d'un estudi d'interiorisme» (recerca d'identitat, 24/10). Fons blanc, paleta de pedra de la web de Corretja,
   Cormorant als títols i Inter a les dades. Un sol color d'acció: l'ocre del logo de Corretja. El verd de Vora només diu «fet».
   Tots els colors són variables: si en Pau canvia l'ocre, es canvia aquí i prou. */
:root {
  --bg: #ffffff;
  --paper: #f6f6f3;        /* blanc trencat de Corretja: barra lateral i superfícies */
  --paper-2: #eeede6;      /* pedra suau */
  --line: #cecdc3;         /* pedra: vores */
  --line-2: #e6e5de;       /* vores fines dins de les taules */
  --ink: #211915;          /* negre de marca */
  --ink-2: #6e6550;        /* taupe de Corretja, una mica més fosc per llegir-lo bé (5,6:1 sobre blanc) */
  --ink-3: #8f887a;        /* només per a detalls que no cal llegir */
  --accio: #d88e00;        /* l'ocre del logo: botons i el que està seleccionat */
  --accio-fort: #c07d00;
  --accio-text: #9a6500;   /* l'ocre quan és text (4,96:1 sobre blanc) */
  --accio-suau: #fbf3e4;
  --sobre-accio: #211915;  /* el text sobre l'ocre */
  --fet: #18794e;          /* verd de Vora: només «fet», «enviat», «acceptat» */
  --fet-suau: #eaf3ee;
  --error: #a23b2a;
  --ombra: 0 1px 2px rgba(33, 25, 21, .06), 0 8px 24px rgba(33, 25, 21, .06);
  --f-titol: var(--f-ui);   /* 24/10: una sola lletra, Inter, per a tot (decisió d'en Pau) */
  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 3px;                /* cantonades quasi quadrades, com un quadern */
  --lat: 248px;
  --gutter: 56px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.5 var(--f-ui); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accio); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- la marca (text, mentre no tinguem el seu logo) ---------- */
.marca { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.marca .m1 { font: 600 11px/1 var(--f-ui); letter-spacing: .34em; color: var(--ink); }
.marca .m2 { font: 500 15px/1 var(--f-ui); color: var(--ink-2); letter-spacing: -.01em; }
.etiq-ex { display: inline-block; font: 600 10px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accio-text); border: 1px solid currentColor; padding: 4px 6px 3px; border-radius: 2px; vertical-align: middle; }

/* ---------- l'esquelet: barra lateral + contingut ---------- */
.lat { position: fixed; inset: 0 auto 0 0; width: var(--lat); background: var(--paper); border-right: 1px solid var(--line-2); display: flex; flex-direction: column; padding: 30px 22px 22px; z-index: 20; }
.lat .marca { padding: 0 8px; }
.lat .ex { margin: 14px 8px 26px; }
.lat .nou { margin: 0 0 22px; width: 100%; justify-content: center; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r); text-decoration: none; color: var(--ink-2); font-weight: 500; }
.nav a .ic { width: 18px; height: 18px; flex: none; opacity: .8; }
.nav a .n { margin-left: auto; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.nav a .n.viu { color: var(--sobre-accio); background: var(--accio); border-radius: 10px; padding: 1px 7px; font-weight: 600; }
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.lat .peu { margin-top: auto; padding: 0 8px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.lat .peu b { font-weight: 600; color: var(--ink); }
.cap-mobil { display: none; }
main.wrap { margin-left: var(--lat); padding: 40px var(--gutter) 96px; min-height: 100vh; max-width: calc(var(--lat) + 1680px); }
main.wrap:focus { outline: none; }

/* ---------- capçaleres ---------- */
.eyebrow { font: 600 11px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.eyebrow .sep { color: var(--line); }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
.h1 { font: 600 30px/1.15 var(--f-ui); letter-spacing: -.022em; margin: 8px 0 0; }
.h2 { font: 600 18px/1.25 var(--f-ui); letter-spacing: -.012em; }
.h3 { font: 600 16px/1.3 var(--f-ui); letter-spacing: -.01em; }
.lead { margin: 12px 0 0; color: var(--ink-2); font-size: 15px; max-width: 72ch; }
.lead b { color: var(--ink); font-weight: 600; }
.cap { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.cap .acc { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.sec-t { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.sec-t .h2, .sec-t .h3 { margin: 0; }
.sec-t small { color: var(--ink-2); font-size: 13px; }
.sec { margin-top: 44px; }
.sec:first-child { margin-top: 0; }
.molla { color: var(--ink-2); font-size: 13px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.molla:hover { color: var(--ink); }
.nota { color: var(--ink-2); font-size: 13px; }
.nota b { color: var(--ink); font-weight: 600; }

/* ---------- botons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid var(--accio); background: var(--accio); color: var(--sobre-accio); font-weight: 600; font-size: 14px; border-radius: var(--r); text-decoration: none; white-space: nowrap; transition: background .12s, transform .1s; }
.btn:hover { background: var(--accio-fort); border-color: var(--accio-fort); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.sec2 { background: var(--bg); border-color: var(--line); color: var(--ink); font-weight: 500; }
.btn.sec2:hover { border-color: var(--ink-2); background: var(--bg); }
.btn.pla { background: transparent; border-color: transparent; color: var(--ink-2); font-weight: 500; padding: 0 10px; }
.btn.pla:hover { color: var(--ink); background: var(--paper); }
.btn.petit { height: 32px; padding: 0 12px; font-size: 13px; }
.btn.gran { height: 48px; padding: 0 24px; font-size: 15px; }
.btn.perill { background: var(--bg); border-color: var(--line); color: var(--error); font-weight: 500; }
.btn.perill:hover { border-color: var(--error); }
.btn.fet { background: var(--fet-suau); border-color: transparent; color: var(--fet); cursor: default; }
.enllac { background: none; border: 0; padding: 0; color: var(--accio-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.icona { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; background: transparent; border-radius: var(--r); color: var(--ink-2); }
.icona:hover { background: var(--paper); color: var(--ink); }
.icona svg { width: 16px; height: 16px; }
.fitxer { position: relative; overflow: hidden; }
.fitxer input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ---------- estats: text, mai barres de colors ---------- */
.estat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.estat.avis { color: var(--accio-text); font-weight: 600; }
.estat.fet { color: var(--fet); font-weight: 600; }
.punt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.check { width: 14px; height: 14px; flex: none; }

/* ---------- camps ---------- */
.camp { display: flex; flex-direction: column; gap: 6px; }
.camp > span { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.camp small { color: var(--ink-2); font-size: 12px; }
input[type=text], input[type=tel], input[type=date], input[type=number], input[type=password], input[type=search], input:not([type]), select, textarea {
  width: 100%; height: 40px; border: 1px solid var(--line); background: var(--bg); border-radius: var(--r); padding: 0 12px; font-size: 14px; transition: border-color .12s, box-shadow .12s;
}
textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6550' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accio); box-shadow: 0 0 0 3px var(--accio-suau); }
.graella2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.graella3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.camps { display: grid; gap: 16px; }
.caixa { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.caixa input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accio); flex: none; }
.err { color: var(--error); font-size: 13px; min-height: 0; }
.err:empty { display: none; }

/* segment (pestanyes petites) */
.segment { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); padding: 2px; gap: 2px; background: var(--bg); }
.segment button { border: 0; background: transparent; padding: 6px 14px; border-radius: 2px; color: var(--ink-2); font-weight: 500; font-size: 13px; }
.segment button b { font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.segment button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* les pestanyes de l'expedient */
.pestanyes { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin: 0 0 32px; overflow-x: auto; scrollbar-width: none; }
.pestanyes a { padding: 12px 0 13px; text-decoration: none; color: var(--ink-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: baseline; }
.pestanyes a small { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pestanyes a:hover { color: var(--ink); }
.pestanyes a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ---------- imatges ---------- */
.img { position: relative; background: var(--paper); overflow: hidden; border-radius: 2px; }
.img img { width: 100%; height: 100%; object-fit: cover; }
.img.prod { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); }
.img.prod img { object-fit: contain; }
.img .marc { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(33, 25, 21, .08); pointer-events: none; }
.r32 { aspect-ratio: 3 / 2; }
.r43 { aspect-ratio: 4 / 3; }
.r11 { aspect-ratio: 1; }
.sense-img { display: grid; place-items: center; height: 100%; color: var(--ink-2); font-size: 12px; text-align: center; padding: 8px; background: var(--paper-2); }
.sense-img.ref { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.marca-ex { position: absolute; left: 10px; top: 10px; background: rgba(33, 25, 21, .86); color: #fff; font: 600 10px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; padding: 5px 7px 4px; border-radius: 2px; }
.marca-ex.dr { left: auto; right: 10px; }
.marca-ex.ocre { background: var(--accio); color: var(--sobre-accio); }

/* ============================================================
   EXPEDIENTS
   ============================================================ */
.passos { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--ink); margin-bottom: 40px; }
.passos button { text-align: left; background: none; border: 0; border-right: 1px solid var(--line-2); padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.passos button:last-child { border-right: 0; }
.passos button:hover { background: var(--paper); }
.passos button[aria-pressed="true"] { background: var(--paper); }
.passos button[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--ink); }
.passos .nn { font: 600 11px/1 var(--f-ui); letter-spacing: .14em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.passos .nm { font: 600 14px/1.25 var(--f-ui); color: var(--ink); }
.passos .qq { font-size: 13px; color: var(--ink-2); }
.passos .qq .estat { font-size: 13px; }

.eines { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; }
.cerca { position: relative; flex: 0 1 360px; }
.cerca svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.cerca input { padding-left: 36px; }

.grup-pas { margin-top: 30px; }
.grup-pas:first-of-type { margin-top: 0; }
.grup-pas > header { display: flex; align-items: baseline; gap: 14px; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.grup-pas > header .nn { font: 600 11px/1 var(--f-ui); letter-spacing: .14em; color: var(--ink-2); }
.grup-pas > header h2 { font: 600 15px/1.2 var(--f-ui); }
.grup-pas > header small { margin-left: auto; color: var(--ink-2); font-size: 13px; }
.taula-exp { width: 100%; }
.fila-exp { display: grid; grid-template-columns: 112px minmax(220px, 1.6fr) minmax(170px, 1.1fr) 120px 150px 130px 20px; gap: 22px; align-items: center; padding: 14px 8px 14px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit; }
.fila-exp:hover { background: linear-gradient(90deg, var(--paper), var(--bg)); }
.fila-exp .img { width: 112px; height: 75px; }
.fila-exp .nom { font: 600 15px/1.25 var(--f-ui); letter-spacing: -.01em; }
.fila-exp .desc { color: var(--ink-2); font-size: 13px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-exp .on { font-size: 13px; font-weight: 500; }
.fila-exp .on small { display: block; font-weight: 400; color: var(--ink-2); }
.fila-exp .qui { font-size: 13px; color: var(--ink-2); }
.fila-exp .qui b { display: block; color: var(--ink); font-weight: 500; }
.fila-exp .imp { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.fila-exp .imp small { display: block; color: var(--ink-2); font-size: 12px; }
.fila-exp .chev { color: var(--line); width: 8px; }
.cap-taula { display: grid; grid-template-columns: 112px minmax(220px, 1.6fr) minmax(170px, 1.1fr) 120px 150px 130px 20px; gap: 22px; padding: 0 8px 8px 0; font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.cap-taula span:nth-child(6) { text-align: right; }
.buit { padding: 36px 0; color: var(--ink-2); text-align: left; font-size: 14px; }
.buit.centre { text-align: center; padding: 56px 20px; }
.buit .h3 { color: var(--ink); display: block; margin-bottom: 6px; }

/* ============================================================
   L'EXPEDIENT
   ============================================================ */
.exp-cap { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin: 14px 0 26px; }
.exp-cap .h1 { font-size: 56px; }
.exp-cap .meta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; color: var(--ink-2); font-size: 13px; }
.exp-cap .meta b { color: var(--ink); font-weight: 500; }
.exp-cap .acc { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* el fil dels sis passos */
.fil { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0 0 6px; border-top: 1px solid var(--line); }
.fil > div { padding: 12px 14px 0 0; position: relative; }
.fil .nn { font: 600 11px/1 var(--f-ui); letter-spacing: .14em; color: var(--ink-3); display: flex; gap: 6px; align-items: center; font-variant-numeric: tabular-nums; }
.fil .nm { font: 500 14px/1.25 var(--f-ui); color: var(--ink-3); margin-top: 6px; }
.fil .dt { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.fil .fet .nn { color: var(--fet); }
.fil .fet .nm, .fil .fet .dt { color: var(--ink-2); }
.fil .ara::before { content: ""; position: absolute; left: 0; right: 14px; top: -1px; height: 3px; background: var(--accio); }
.fil .ara .nn { color: var(--accio-text); }
.fil .ara .nm { color: var(--ink); font-weight: 600; }
.fil .ara .dt { color: var(--ink); }
.fil.tancat .ara::before { background: var(--line); }

.resum { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(300px, 380px); gap: 40px; align-items: start; }
.bloc { border-top: 1px solid var(--ink); padding-top: 14px; margin-bottom: 34px; }
.bloc > .sec-t { margin-bottom: 12px; }
.bloc > .sec-t h3 { font: 600 11px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.ara-pas .t { font: 500 24px/1.2 var(--f-ui); letter-spacing: -.02em; }
.ara-pas .s { color: var(--ink-2); font-size: 13px; margin-top: 6px; }
.ara-pas .d { margin-top: 14px; font-size: 14px; }
.ara-pas .acc { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; align-items: stretch; }
.ara-pas .acc .btn { justify-content: center; }
.dades dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; }
.dades dt { color: var(--ink-2); }
.dades dd { margin: 0; }
.llista-seg { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.llista-seg li { font-size: 13px; display: grid; grid-template-columns: 52px 1fr; gap: 10px; }
.llista-seg .dt { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.llista-seg .r { font-weight: 500; }
.llista-seg .n { color: var(--ink-2); display: block; }
.escenari .img { width: 100%; }
.escenari figcaption { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.miniatures { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.miniatures button { width: 96px; padding: 0; border: 0; background: none; position: relative; }
.miniatures button .img { width: 96px; height: 64px; }
.miniatures button[aria-pressed="true"] .img { outline: 2px solid var(--ink); outline-offset: 2px; }
.miniatures small { display: block; font-size: 11px; color: var(--ink-2); margin-top: 6px; text-align: left; }
.prods-r { display: flex; flex-direction: column; }
.prod-r { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.prod-r .img { width: 52px; height: 52px; }
.prod-r .t { font-weight: 500; line-height: 1.3; }
.prod-r .s { color: var(--ink-2); font-size: 12px; }
.prod-r .p { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tots { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.tots > div { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
.tots .gran { font: 500 13px/1.2 var(--f-ui); color: var(--ink-2); padding-top: 12px; border-top: 1px solid var(--line-2); margin-top: 6px; align-items: baseline; }
.tots .gran span:last-child { font-family: var(--f-ui); font-size: 20px; font-weight: 600; }
.tots .intern { color: var(--ink-2); }
.tots .opc { color: var(--accio-text); }

/* ============================================================
   EL PRESSUPOST
   ============================================================ */
.barra-p { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.barra-p .esp { flex: 1; }
.barra-p select { width: auto; height: 32px; font-size: 13px; }
.desat { font-size: 12px; color: var(--ink-2); min-width: 64px; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 22px; }
.rail .panell { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 16px; background: var(--bg); }
.rail .panell h3 { font: 600 11px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 12px; }
.rail .tots { margin-top: 0; }
.rail .marge { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* afegir del catàleg: la cerca */
.afegeix { position: relative; margin-bottom: 26px; }
.afegeix .in { position: relative; }
.afegeix .in svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-2); }
.afegeix input { height: 54px; padding-left: 46px; font-size: 16px; border-color: var(--ink); }
.afegeix kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 500 12px var(--f-ui); color: var(--ink-2); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; background: var(--paper); }
.resultats { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--ombra); z-index: 30; max-height: 440px; overflow: auto; }
.resultats:empty { display: none; }
.res { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 8px 14px 8px 8px; width: 100%; border: 0; background: none; text-align: left; border-bottom: 1px solid var(--line-2); }
.res:last-child { border-bottom: 0; }
.res .img { width: 52px; height: 52px; }
.res .t { font-weight: 500; }
.res .s { font-size: 12px; color: var(--ink-2); }
.res .p { font-variant-numeric: tabular-nums; text-align: right; font-size: 13px; }
.res .p small { display: block; color: var(--ink-2); font-size: 11px; }
.res[aria-selected="true"], .res:hover { background: var(--accio-suau); }
.res-buit { padding: 14px; color: var(--ink-2); font-size: 13px; }

.capitol { margin-bottom: 30px; }
.capitol > header { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; }
.capitol > header h3 { font: 600 16px/1.2 var(--f-ui); letter-spacing: -.01em; }
.capitol > header .sub { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.capitol > header small { color: var(--ink-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.capitol.apagat > header h3 { color: var(--ink-3); }
.cap-linies { display: grid; grid-template-columns: var(--mini-linia) minmax(0, 1fr) 58px 78px 62px 86px 100px 36px; gap: 12px; padding: 10px 0 6px; font: 600 10px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.cap-linies span { text-align: right; }
.cap-linies span:nth-child(-n+2) { text-align: left; }
.linia { display: grid; grid-template-columns: var(--mini-linia) minmax(0, 1fr) 58px 78px 62px 86px 100px 36px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.linia.nova { animation: nova 1.4s ease-out; }
@keyframes nova { from { background: var(--accio-suau); } to { background: transparent; } }
.linia .img { width: var(--mini-linia); height: var(--mini-linia); }
.linia .foto-b { padding: 0; border: 0; background: none; width: var(--mini-linia); height: var(--mini-linia); }
.linia .qui { min-width: 0; }
.linia .t { font-weight: 500; line-height: 1.3; }
.linia .t input { border: 0; padding: 0; height: 24px; font-weight: 500; background: transparent; }
.linia .t input:focus { box-shadow: none; border-bottom: 1px solid var(--accio); border-radius: 0; }
.linia .s { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linia .det { margin-top: 4px; }
.linia .det input { height: 26px; border: 0; border-bottom: 1px dashed var(--line); border-radius: 0; padding: 0; font-size: 12px; background: transparent; color: var(--ink-2); }
.linia .det input:focus { border-bottom: 1px solid var(--accio); box-shadow: none; color: var(--ink); }
.linia .n input { height: 32px; text-align: right; padding: 0 8px; font-variant-numeric: tabular-nums; border-color: var(--line-2); }
.linia .n input:hover { border-color: var(--line); }
.linia .n.marge input { color: var(--ink-2); }
.linia .imp { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.linia .acc { display: flex; justify-content: flex-end; gap: 2px; }
.linia.fora { opacity: .45; }
.mill-b { border: 0; background: none; padding: 2px 0; font-size: 12px; color: var(--accio-text); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.millores { grid-column: 1 / -1; background: var(--paper); border-radius: var(--r); padding: 14px 16px; margin-top: 4px; }
.millores h4 { font: 600 11px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.millores .ll { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mill { display: grid; grid-template-columns: var(--mini-linia) 1fr; gap: 12px; align-items: center; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r); padding: 8px; }
.mill .img { width: var(--mini-linia); height: var(--mini-linia); }
.mill .t { font-weight: 500; font-size: 13px; line-height: 1.3; }
.mill .s { font-size: 12px; color: var(--ink-2); }
.mill .d { font-weight: 600; color: var(--accio-text); font-variant-numeric: tabular-nums; font-size: 13px; }
.mill .btn { margin-top: 6px; }
.opcions-ed .linia { grid-template-columns: var(--mini-linia) minmax(0, 1fr) 120px 110px 36px; }
.opcions-ed .linia .dif { text-align: right; color: var(--accio-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.afegeix-buida { display: flex; gap: 10px; align-items: center; margin-top: 10px; color: var(--ink-2); font-size: 13px; }
.afegeix-buida select { width: auto; height: 32px; font-size: 13px; }

/* començar d'una plantilla */
.comencar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
.opcio-inici { text-align: left; border: 1px solid var(--line); background: var(--bg); border-radius: var(--r); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; min-height: 180px; transition: border-color .12s, box-shadow .12s; }
.opcio-inici:hover { border-color: var(--ink); box-shadow: var(--ombra); }
.opcio-inici .nn { font: 600 11px/1 var(--f-ui); letter-spacing: .14em; color: var(--ink-2); }
.opcio-inici .t { font: 600 19px/1.25 var(--f-ui); letter-spacing: -.015em; }
.opcio-inici .s { color: var(--ink-2); font-size: 13px; }
.opcio-inici .v { margin-top: auto; font-weight: 600; color: var(--accio-text); font-size: 13px; }

/* ============================================================
   EL RENDER
   ============================================================ */
.render-ed { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; gap: 36px; align-items: start; }
.pas-r { border-top: 1px solid var(--ink); padding-top: 12px; margin-bottom: 26px; }
.pas-r h3 { font: 600 11px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }
.pas-r p { margin: 0 0 12px; color: var(--ink-2); font-size: 13px; }
.tria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tria.tres { grid-template-columns: repeat(3, 1fr); }
.tria button { padding: 0; border: 0; background: none; text-align: left; position: relative; }
.tria button .img { width: 100%; }
.tria button small { display: block; font-size: 11px; color: var(--ink-2); margin-top: 5px; line-height: 1.3; }
.tria button[aria-pressed="true"] .img { outline: 2px solid var(--accio); outline-offset: 2px; }
.tria button[aria-pressed="true"]::after { content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--accio) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23211915' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat; }
.estudi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.estudi figure { margin: 0; }
.estudi figcaption { font-size: 12px; color: var(--ink-2); margin-top: 8px; display: flex; justify-content: space-between; gap: 10px; }
.estudi.un { grid-template-columns: 1fr; }
.treballant { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(246, 246, 243, .82); font-size: 14px; color: var(--ink); text-align: center; }
.treballant .roda { width: 28px; height: 28px; border: 2px solid var(--line); border-top-color: var(--accio); border-radius: 50%; animation: roda .9s linear infinite; margin: 0 auto 12px; }
@keyframes roda { to { transform: rotate(360deg); } }
.avis-prova { font-size: 13px; color: var(--ink-2); background: var(--paper); border-radius: var(--r); padding: 12px 14px; margin-bottom: 18px; }
.avis-prova b { color: var(--ink); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.galeria figure { margin: 0; }
.galeria figcaption { margin-top: 8px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.galeria figcaption .s { color: var(--ink-2); font-size: 12px; }
.galeria .acc { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }

/* ============================================================
   EL DOSSIER (pantalla i paper)
   ============================================================ */
.dossier-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; }
.dossier-barra .esp { flex: 1; }
.fulls { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 32px 0 48px; background: var(--paper-2); border-radius: var(--r); }
.full-p { width: 210mm; min-height: 297mm; background: #fff; box-shadow: 0 1px 3px rgba(33, 25, 21, .12), 0 18px 48px rgba(33, 25, 21, .1); position: relative; padding: 18mm 18mm 22mm; display: flex; flex-direction: column; font-size: 10pt; color: var(--ink); overflow: hidden; }
.full-p .fx { position: absolute; left: 18mm; right: 18mm; bottom: 10mm; display: flex; justify-content: space-between; font-size: 7.5pt; color: var(--ink-2); letter-spacing: .02em; }
.full-p .fx .ex { color: var(--accio-text); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.full-p .fcap { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 5mm; border-bottom: .5pt solid var(--ink); margin-bottom: 8mm; }
.full-p .fcap .marca .m1 { font-size: 7pt; }
.full-p .fcap .marca .m2 { font-size: 18pt; }
.full-p .fcap .r { text-align: right; font-size: 8pt; color: var(--ink-2); line-height: 1.5; }
.full-p h2 { font: 600 20pt/1.1 var(--f-ui); letter-spacing: -.02em; margin-bottom: 2mm; }
.full-p .ull { font: 600 7.5pt/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 3mm; }
.full-p .intro { color: var(--ink-2); font-size: 9.5pt; max-width: 130mm; margin: 0 0 7mm; }
/* portada */
.portada { padding: 0; }
.portada .pcap { display: flex; justify-content: space-between; align-items: flex-start; padding: 16mm 18mm 10mm; }
.portada .pcap .marca .m1 { font-size: 8pt; }
.portada .pcap .marca .m2 { font-size: 24pt; }
.portada .pcap .r { text-align: right; font-size: 8pt; color: var(--ink-2); line-height: 1.6; }
.portada .pimg { margin: 0 18mm; aspect-ratio: 3 / 2; background: var(--paper); position: relative; overflow: hidden; }
.portada .pimg img { width: 100%; height: 100%; object-fit: cover; }
.portada .pimg .sense-img { font-size: 10pt; }
.portada .ptxt { padding: 12mm 18mm 0; display: grid; grid-template-columns: 1fr auto; gap: 10mm; align-items: end; }
.portada .ptxt .ull { margin-bottom: 4mm; }
.portada .ptxt h1 { font: 600 30pt/1.05 var(--f-ui); letter-spacing: -.03em; }
.portada .ptxt .d { font: 400 12pt/1.35 var(--f-ui); color: var(--ink-2); margin-top: 3mm; }
.portada .ptxt dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 1.5mm 6mm; font-size: 8.5pt; }
.portada .ptxt dt { color: var(--ink-2); }
.portada .ptxt dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.portada .pfrase { margin: auto 18mm 22mm; padding-top: 6mm; border-top: .5pt solid var(--line); font: 400 10pt/1.5 var(--f-ui); color: var(--ink-2); max-width: 150mm; }
/* els productes escollits */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6mm 5mm; }
.pgrid figure { margin: 0; break-inside: avoid; }
.pgrid .img { aspect-ratio: 1; background: #fff; box-shadow: inset 0 0 0 .5pt var(--line); }
.pgrid .img img { object-fit: contain; }
.pgrid figcaption { margin-top: 2.5mm; display: flex; flex-direction: column; gap: .6mm; }
.pgrid .c { font: 600 6.5pt/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.pgrid .n { font: 600 9.5pt/1.25 var(--f-ui); }
.pgrid .m { font-size: 7.5pt; color: var(--ink-2); }
.pgrid .k { font-size: 7.5pt; color: var(--ink-2); line-height: 1.35; }
/* la taula del pressupost */
.ptaula { width: 100%; border-collapse: collapse; font-size: 9pt; }
.ptaula th { font: 600 6.5pt/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); text-align: left; padding: 0 0 2.5mm; border-bottom: .5pt solid var(--ink); }
.ptaula th.r, .ptaula td.r { text-align: right; }
.ptaula td { line-height: 1.3; padding: 2mm 0; border-bottom: .5pt solid var(--line-2); vertical-align: top; font-variant-numeric: tabular-nums; }
.ptaula td small { display: block; color: var(--ink-2); font-size: 7.5pt; margin-top: .5mm; }
.ptaula tr.cap-r td { font: 600 10pt/1.2 var(--f-ui); padding-top: 5mm; border-bottom: .5pt solid var(--line); }
.ptaula tr.cap-r td.r { font: 600 9pt var(--f-ui); }
.ptaula tr { break-inside: avoid; }
.ptaula .c-u { width: 16mm; }
.ptaula .c-i { width: 26mm; }
.ptots { margin: 5mm 0 0 auto; width: 78mm; font-size: 9pt; display: flex; flex-direction: column; gap: 1.6mm; break-inside: avoid; }
.ptots > div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.ptots .g { border-top: .5pt solid var(--ink); padding-top: 2.5mm; margin-top: 1mm; font-size: 12pt; font-weight: 600; }
.ptots .g span:first-child { font: 600 12pt var(--f-ui); }
/* opcions per millorar */
.popcions { display: flex; flex-direction: column; gap: 6mm; }
.popcio { display: grid; grid-template-columns: 38mm 1fr 32mm; gap: 7mm; align-items: center; padding-bottom: 6mm; border-bottom: .5pt solid var(--line-2); break-inside: avoid; }
.popcio .img { aspect-ratio: 1; background: #fff; box-shadow: inset 0 0 0 .5pt var(--line); }
.popcio .img img { object-fit: contain; }
.popcio .n { font: 600 12pt/1.25 var(--f-ui); }
.popcio .m { font-size: 8pt; color: var(--ink-2); margin-top: 1mm; }
.popcio .k { font-size: 8.5pt; margin-top: 2mm; line-height: 1.45; }
.popcio .en { font-size: 8pt; color: var(--ink-2); margin-top: 2mm; }
.popcio .d { text-align: right; }
.popcio .d b { font: 600 14pt var(--f-ui); font-variant-numeric: tabular-nums; display: block; }
.popcio .d small { font-size: 7.5pt; color: var(--ink-2); }
.pcond { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: 6mm; font-size: 9pt; line-height: 1.55; }
.pcond h4 { font: 600 6.5pt/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2.5mm; }
.pcond p { margin: 0; white-space: pre-line; }
.psig { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; margin-top: 22mm; font-size: 8pt; color: var(--ink-2); }
.psig div { border-top: .5pt solid var(--ink); padding-top: 2mm; }
.pex { position: absolute; right: -26mm; top: 50%; transform: rotate(90deg); transform-origin: center; font: 600 7pt/1 var(--f-ui); letter-spacing: .5em; color: var(--accio-text); opacity: .7; text-transform: uppercase; }

/* ============================================================
   PER TRUCAR
   ============================================================ */
.trucada { display: grid; grid-template-columns: 120px minmax(0, 1.3fr) minmax(0, 1.4fr) auto; gap: 28px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.trucada .img { width: 120px; height: 80px; }
.trucada .nom { font: 600 16px/1.25 var(--f-ui); background: none; border: 0; padding: 0; text-align: left; text-decoration: none; }
.trucada .nom:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.trucada .desc { color: var(--ink-2); font-size: 13px; margin-top: 3px; }
.trucada .info { font-size: 13px; line-height: 1.55; }
.trucada .info b { font-weight: 600; }
.trucada .acc { display: flex; gap: 8px; }
.grup-truca { margin-top: 34px; }
.grup-truca > header { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; }
.grup-truca > header h2 { font: 600 15px/1.2 var(--f-ui); }
.grup-truca > header small { color: var(--ink-2); font-size: 13px; }
.propers { margin: 0; padding: 0; list-style: none; }
.propers li { display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; align-items: baseline; }
.propers li .dt { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.propers li a { font: 600 14px var(--f-ui); text-decoration: none; }
.resultat-op { display: grid; gap: 8px; }
.resultat-op label { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.resultat-op label:has(input:checked) { border-color: var(--accio); background: var(--accio-suau); }
.resultat-op input { accent-color: var(--accio); margin: 3px 0 0; }
.resultat-op b { font-weight: 600; display: block; }
.resultat-op small { color: var(--ink-2); font-size: 12px; }

/* ============================================================
   TAULER DE L'EQUIP
   ============================================================ */
.tauler { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.taula { width: 100%; border-collapse: collapse; font-size: 14px; }
.taula th { font: 600 11px/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); text-align: left; padding: 0 12px 10px 0; border-bottom: 1px solid var(--ink); }
.taula td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; font-variant-numeric: tabular-nums; }
.taula td.r, .taula th.r { text-align: right; }
.taula .pas { font: 600 14px/1.3 var(--f-ui); }
.taula .pas small { display: block; font: 400 12px var(--f-ui); color: var(--ink-2); }
.taula .noms { font-size: 13px; color: var(--ink-2); }
.taula .noms a { color: var(--accio-text); font-weight: 600; text-decoration: none; }
.taula .noms a:hover { text-decoration: underline; }
.encallats { margin: 0; padding: 0; list-style: none; }
.encallats li a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; }
.encallats .n { font: 600 14px/1.3 var(--f-ui); }
.encallats .s { font-size: 13px; color: var(--ink-2); grid-column: 1; }
.encallats .d { grid-row: 1 / 3; grid-column: 2; align-self: center; text-align: right; }
.equip-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.persona { border-top: 1px solid var(--ink); padding-top: 14px; }
.persona .nm { font: 600 16px/1.2 var(--f-ui); }
.persona .rl { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.persona .xs { display: flex; gap: 14px; margin: 12px 0 8px; font-size: 13px; flex-wrap: wrap; }
.persona ul { margin: 0; padding: 0; list-style: none; }
.persona li a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; font-size: 13px; }
.persona li b { font-weight: 500; display: block; }
.persona li span { color: var(--ink-2); font-size: 12px; }
.frases { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.frases p { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.frases b { font-weight: 600; }

/* ============================================================
   CATÀLEG
   ============================================================ */
.xips { display: flex; gap: 6px; flex-wrap: wrap; }
.xips button { border: 1px solid var(--line); background: var(--bg); border-radius: 16px; padding: 5px 12px; font-size: 13px; color: var(--ink-2); }
.xips button b { font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.xips button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.cat-grup { margin-top: 36px; }
.cat-grup > header { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 8px; margin-bottom: 18px; }
.cat-grup > header h2 { font: 600 15px/1.2 var(--f-ui); }
.cat-grup > header small { color: var(--ink-2); font-size: 13px; }
.prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 28px 22px; }
.prod { border: 0; background: none; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.prod .img { width: 100%; }
.prod:hover .img { box-shadow: inset 0 0 0 1px var(--ink-2); }
.prod .mc { font: 600 10px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.prod .t { font: 600 14px/1.3 var(--f-ui); margin-top: -2px; }
.prod .rf { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.prod .pr { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; border-top: 1px solid var(--line-2); padding-top: 8px; }
.prod .pr small { font-weight: 400; color: var(--ink-2); font-size: 12px; }
.prod-ed { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.foto-ed .img { width: 100%; }
.foto-ed .accions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.foto-msg { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.foto-msg.err { color: var(--error); }
.mill-auto { margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.mill-auto b { color: var(--ink); font-weight: 500; }

/* ============================================================
   AJUSTOS
   ============================================================ */
.ajustos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; max-width: 1240px; }
.ajustos .bloc { margin-bottom: 0; }
.ajustos .ctl { display: grid; grid-template-columns: 1fr 96px; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.ajustos .ctl small { display: block; color: var(--ink-2); font-size: 12px; }
.ajustos .ctl input { text-align: right; height: 34px; }
.equip-f { display: grid; grid-template-columns: 1fr 170px 32px; gap: 10px; align-items: center; padding: 6px 0; }
.equip-f input, .equip-f select { height: 34px; }
.files-a { display: flex; flex-direction: column; }
.files-a button { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line-2); background: none; }
.files-a button .t { font-weight: 500; display: block; }
.files-a button .s { font-size: 12px; color: var(--ink-2); }
.registre { font-size: 12px; color: var(--ink-2); }
.registre div { padding: 6px 0; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 10px; }

/* ============================================================
   DIÀLEGS, AVISOS, PORTA
   ============================================================ */
.scrim { position: fixed; inset: 0; background: rgba(33, 25, 21, .32); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; }
.scrim.obert { opacity: 1; pointer-events: auto; }
.dlg { position: fixed; left: 50%; top: 50%; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: var(--bg); border-radius: 4px; box-shadow: 0 24px 64px rgba(33, 25, 21, .24); padding: 28px 28px 22px; transform: translate(-50%, -48%); opacity: 0; pointer-events: none; transition: opacity .18s, transform .22s cubic-bezier(.2, .8, .2, 1); z-index: 51; }
.dlg.obert { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.dlg.ample { width: min(920px, calc(100vw - 32px)); }
.dlg h2 { font: 600 20px/1.2 var(--f-ui); letter-spacing: -.015em; margin-bottom: 6px; }
.dlg .sub { color: var(--ink-2); font-size: 13px; margin: 0 0 18px; }
.dlg .peu { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.dlg .peu .esq { margin-right: auto; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 4px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; z-index: 60; display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px); }
.toast.veu { opacity: 1; transform: translate(-50%, 0); }
.toast .enllac { color: #f2c67a; }
.porta { position: fixed; inset: 0; background: var(--paper); display: grid; place-items: center; z-index: 80; padding: 16px; }
.porta form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 14px; }
.porta .marca .m2 { font-size: 44px; }
.porta .marca .m1 { font-size: 12px; }
.porta p { color: var(--ink-2); margin: 0; }
.porta input { height: 48px; font-size: 20px; letter-spacing: .3em; text-align: center; }
.porta .btn { justify-content: center; height: 48px; }
.carrega { padding: 80px 0; color: var(--ink-2); }
.imp-t { display: flex; flex-direction: column; max-height: 300px; overflow: auto; border: 1px solid var(--line-2); border-radius: var(--r); }
.imp-f { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 6px 10px 6px 6px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.imp-f .img { width: 44px; height: 44px; }
.imp-f .s { color: var(--ink-2); font-size: 12px; }
.imp-f .av { color: var(--accio-text); font-size: 12px; }
.corr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.corr label { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; font-size: 13px; }
.corr select { height: 34px; font-size: 13px; }

/* ============================================================
   PANTALLES MÉS PETITES
   ============================================================ */
@media (max-width: 1500px) {
  :root { --gutter: 40px; }
  .resum { grid-template-columns: 270px minmax(0, 1fr) 310px; gap: 32px; }
  .fila-exp, .cap-taula { grid-template-columns: 96px minmax(200px, 1.5fr) minmax(150px, 1fr) 110px 130px 120px 16px; gap: 18px; }
  .fila-exp .img { width: 96px; height: 64px; }
  .render-ed { grid-template-columns: 240px minmax(0, 1fr) 280px; gap: 28px; }
  .editor { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
  .linia, .cap-linies { grid-template-columns: var(--mini-linia) minmax(0, 1fr) 54px 72px 56px 80px 92px 32px; gap: 10px; }
  .linia .img, .linia .foto-b { width: var(--mini-linia); height: var(--mini-linia); }
  .equip-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1280px) {
  .resum { grid-template-columns: 280px minmax(0, 1fr); }
  .resum .col-dr { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .resum, .render-ed, .editor, .tauler { grid-template-columns: 1fr; }
  .resum .col-dr { grid-template-columns: 1fr; }
  .rail { position: static; }
  .ajustos { grid-template-columns: 1fr; }
  .fila-exp .qui, .cap-taula span:nth-child(4) { display: none; }
  .fila-exp, .cap-taula { grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, 1fr) 120px 110px 16px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }
  .lat { inset: auto 0 0 0; width: auto; height: calc(64px + env(safe-area-inset-bottom)); flex-direction: row; padding: 0 4px env(safe-area-inset-bottom); border-right: 0; border-top: 1px solid var(--line-2); background: rgba(246, 246, 243, .94); backdrop-filter: blur(16px); }
  .lat .marca, .lat .ex, .lat .peu, .lat .nou { display: none; }
  .nav { flex-direction: row; width: 100%; justify-content: space-around; }
  .nav a { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 10.5px; flex: 1; align-items: center; text-align: center; position: relative; }
  .nav a .ic { width: 22px; height: 22px; }
  .nav a .n { display: none; }
  .nav a .n.viu { display: block; position: absolute; top: 3px; left: calc(50% + 6px); margin: 0; font-size: 10px; padding: 0 5px; }
  .nav a[aria-current="page"] { box-shadow: none; background: transparent; color: var(--ink); }
  .cap-mobil { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 12px; border-bottom: 1px solid var(--line-2); background: var(--paper); position: sticky; top: 0; z-index: 15; }
  .cap-mobil .marca .m2 { font-size: 24px; }
  .cap-mobil .marca .m1 { font-size: 9px; }
  .cap-mobil .dr { display: flex; gap: 8px; align-items: center; }
  main.wrap { margin-left: 0; padding: 22px 16px calc(96px + env(safe-area-inset-bottom)); }
  .h1 { font-size: 36px; }
  .exp-cap { grid-template-columns: 1fr; gap: 18px; }
  .exp-cap .h1 { font-size: 40px; }
  .exp-cap .acc { justify-content: flex-start; }
  .cap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cap .acc { justify-content: flex-start; }
  .passos { grid-template-columns: repeat(3, 1fr); }
  .passos button { border-bottom: 1px solid var(--line-2); padding: 10px 10px 12px; }
  .passos button:nth-child(3n) { border-right: 0; }
  .passos .nm { font-size: 17px; }
  .cap-taula { display: none; }
  .fila-exp { grid-template-columns: 76px 1fr; gap: 6px 14px; padding: 12px 0; }
  .fila-exp .img { width: 76px; height: 76px; grid-row: 1 / 4; }
  .fila-exp .nom { font-size: 21px; }
  .fila-exp .on, .fila-exp .imp { grid-column: 2; text-align: left; }
  .fila-exp .on small { display: inline; }
  .fila-exp .on small::before { content: " · "; }
  .fila-exp .qui, .fila-exp .dies, .fila-exp .chev { display: none; }
  .fila-exp .imp small { display: inline; margin-left: 6px; }
  .fil { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
  .fil .nm { font-size: 15px; }
  .linia, .cap-linies { grid-template-columns: var(--mini-linia) 1fr 1fr 1fr; gap: 8px 10px; }
  .cap-linies { display: none; }
  .linia .qui { grid-column: 2 / -1; }
  .linia .img, .linia .foto-b { grid-row: 1 / 3; }
  .linia .n { grid-column: auto; }
  .linia .n::before { content: attr(data-etiq); display: block; font-size: 10px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
  .linia .n.marge { display: none; }
  .linia .imp { grid-column: 2 / 4; text-align: left; }
  .linia .acc { grid-column: 4; }
  .opcions-ed .linia { grid-template-columns: var(--mini-linia) 1fr auto; }
  .comencar { grid-template-columns: 1fr; }
  .estudi { grid-template-columns: 1fr; }
  .trucada { grid-template-columns: 76px 1fr; gap: 10px 14px; }
  .trucada .img { width: 76px; height: 76px; grid-row: 1 / 3; }
  .trucada .info, .trucada .acc { grid-column: 2; }
  .propers li { grid-template-columns: 1fr; gap: 2px; }
  .equip-g { grid-template-columns: 1fr; }
  .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .prod-ed { grid-template-columns: 1fr; }
  .graella2, .graella3, .corr { grid-template-columns: 1fr; }
  .fulls { padding: 12px 0; gap: 12px; overflow: hidden; }
  .full-p { zoom: .44; }
  .dlg { top: auto; bottom: 0; left: 0; width: 100%; max-height: 92vh; transform: translateY(24px); border-radius: 12px 12px 0 0; padding: 22px 16px calc(18px + env(safe-area-inset-bottom)); }
  .dlg.obert { transform: none; }
  .dlg.ample { width: 100%; }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .barra-p .esp { display: none; }
  .afegeix kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: opacity .15s !important; }
}

/* ============================================================
   IMPRIMIR: només el dossier
   ============================================================ */
#print-root { display: none; }
@page { size: A4; margin: 0; }
@media print {
  html, body { background: #fff; }
  body > *:not(#print-root):not(#mesura) { display: none !important; }
  #print-root { display: block; }
  .full-p { box-shadow: none; margin: 0; width: 210mm; min-height: 297mm; break-after: page; zoom: 1; }
  .full-p:last-child { break-after: auto; }
  .full-p.flux { min-height: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* utilitats (sense estils dins l'HTML: la CSP no els deixa) */
.m0 { margin: 0; } .mt0 { margin-top: 0; } .mt4 { margin-top: 4px; } .mt6 { margin-top: 6px; } .mt8 { margin-top: 8px; } .mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; }
.mt14 { margin-top: 14px; } .mt16 { margin-top: 16px; } .mt22 { margin-top: 22px; } .mt28 { margin-top: 28px; } .mt40 { margin-top: 40px; } .mb14 { margin-bottom: 14px; } .ml6 { margin-left: 6px; }
.cp { cursor: pointer; } .petita { font-size: 13px; } .fila-b { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.btn.ample { width: 100%; justify-content: center; }
.trucada .desc .num, .meta .num { white-space: nowrap; }
.tria.quatre { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tria.quatre small { font-size: 10.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.galeria .acc { margin-top: 8px; }
.tria button { min-width: 0; }
.tria.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galeria .acc .btn.pla:first-child { padding-left: 0; }
.fila-exp > *, .trucada > *, .linia > *, .resum > *, .editor > *, .render-ed > * { min-width: 0; }
html, body { overflow-x: hidden; }

/* ============================================================
   DIRECCIÓ DEL 24/10 (decisió d'en Pau): un tauler net, com Mercury o Linear.
   Fons gris càlid, targetes blanques amb radi gran i ombra suau, una sola lletra (Inter),
   botons en píndola i l'ocre de Corretja com a únic accent. Mana sobre el que hi ha a dalt.
   ============================================================ */
:root {
  --bg: #f3f2ef; --card: #ffffff; --paper: #f7f6f3; --paper-2: #efeee9;
  --line: #e2e0d9; --line-2: #edece7; --ink-2: #6f6a61; --ink-3: #9b968c;
  --r: 12px; --rc: 22px;
  --sombra: 0 1px 2px rgba(33, 25, 21, .04), 0 10px 30px rgba(33, 25, 21, .06);
  --sombra-s: 0 1px 2px rgba(33, 25, 21, .06), 0 2px 8px rgba(33, 25, 21, .05);
}
body { background: var(--bg); font-size: 14px; letter-spacing: -.003em; }

/* capçalera de dalt: la marca en una píndola, les seccions al mig, les accions a la dreta */
@media (min-width: 761px) {
  .lat { position: sticky; top: 0; inset: auto; width: auto; height: 76px; flex-direction: row; align-items: center; gap: 10px; padding: 0 32px; background: rgba(243, 242, 239, .86); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 0; z-index: 30; }
  .lat .marca { flex-direction: row; align-items: baseline; gap: 7px; background: var(--card); border-radius: 999px; padding: 11px 18px; box-shadow: var(--sombra-s); text-decoration: none; }
  .lat .marca .m1 { font-size: 11px; letter-spacing: .3em; }
  .lat .ex { margin: 0 14px 0 2px; }
  .nav { flex-direction: row; gap: 2px; background: rgba(255, 255, 255, .6); padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(33, 25, 21, .04); }
  .nav a { border-radius: 999px; padding: 8px 15px; font-size: 13.5px; color: var(--ink-2); }
  .nav a .ic { width: 16px; height: 16px; }
  .nav a:hover { background: rgba(255, 255, 255, .8); }
  .nav a[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: var(--sombra-s); }
  .nav a .n { margin-left: 2px; }
  .lat .nou { margin: 0 0 0 auto; width: auto; order: 5; }
  .lat .rodo { order: 6; }
  .lat .peu { display: none; }
  main.wrap { margin: 0 auto; max-width: 1480px; padding: 22px 32px 96px; }
}
.rodo { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--card); box-shadow: var(--sombra-s); color: var(--ink-2); text-decoration: none; }
.rodo svg { width: 18px; height: 18px; }
.rodo:hover, .rodo[aria-current="page"] { color: var(--ink); box-shadow: var(--sombra-s), inset 0 0 0 1.5px var(--accio); }

/* targetes */
.bloc, .grup-pas, .capitol, .rail .panell, .pas-r, .persona, .grup-truca, .tauler > section, .ajustos .bloc, .opcio-inici, .fil, .llista-card, .propers-c, .estudi-c, .galeria-c, .sec.card, .resum-c, .afegeix-c, .equip-c {
  background: var(--card); border: 0; border-radius: var(--rc); box-shadow: var(--sombra); padding: 22px 24px; margin-bottom: 20px;
}
.bloc > .sec-t h3, .rail .panell h3, .pas-r h3 { font: 500 12.5px/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink-2); display: flex; gap: 7px; align-items: center; }
.cap { border-bottom: 0; padding-bottom: 6px; margin-bottom: 22px; }
.eyebrow { font: 500 12.5px/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.etiq-ex { border-radius: 999px; padding: 4px 9px; border: 0; background: var(--accio-suau); letter-spacing: .1em; }
.lead { font-size: 14px; }
.sec-t small, .nota { color: var(--ink-2); }

/* botons en píndola */
.btn { border-radius: 999px; height: 40px; padding: 0 18px; font-weight: 500; }
.btn.petit { height: 32px; padding: 0 14px; }
.btn.gran { height: 48px; }
.btn.sec2 { background: var(--card); border-color: transparent; box-shadow: var(--sombra-s); }
.btn.sec2:hover { box-shadow: var(--sombra-s), inset 0 0 0 1px var(--line); background: var(--card); }
.btn.perill { border-color: transparent; box-shadow: var(--sombra-s); }
.btn.fet { border-radius: 999px; }
.icona { border-radius: 50%; }
input[type=text], input[type=tel], input[type=date], input[type=number], input[type=password], input[type=search], input:not([type]), select, textarea { border-radius: var(--r); border-color: var(--line); background: var(--card); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--accio-suau); }
.segment { border: 0; border-radius: 999px; padding: 4px; background: rgba(33, 25, 21, .05); }
.segment button { border-radius: 999px; padding: 7px 15px; }
.segment button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--sombra-s); }
.xips button { border: 0; background: var(--card); box-shadow: var(--sombra-s); padding: 7px 14px; }
.xips button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--sombra-s), inset 0 0 0 1.5px var(--accio); }
.pestanyes { display: inline-flex; gap: 2px; border: 0; background: rgba(33, 25, 21, .05); padding: 4px; border-radius: 999px; margin: 18px 0 22px; max-width: 100%; }
.pestanyes a { padding: 8px 16px; border: 0; margin: 0; border-radius: 999px; font-size: 13.5px; }
.pestanyes a[aria-current="page"] { background: var(--card); box-shadow: var(--sombra-s); }
.cerca input { border-radius: 999px; border-color: transparent; box-shadow: var(--sombra-s); }
.molla { margin-bottom: 4px; }
.img { border-radius: 14px; }
.img.prod { box-shadow: inset 0 0 0 1px var(--line-2); }
.marca-ex { border-radius: 999px; padding: 5px 9px; }

/* les xifres que destaquen */
.xifres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.xifra { background: var(--card); border-radius: var(--rc); box-shadow: var(--sombra); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; border: 0; text-align: left; }
.xifra .et { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.xifra .et svg { width: 15px; height: 15px; }
.xifra .v { font: 500 30px/1.05 var(--f-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.xifra .v.ocre { color: var(--accio-text); }
.xifra .s { font-size: 12.5px; color: var(--ink-2); }
a.xifra:hover { box-shadow: var(--sombra), inset 0 0 0 1.5px var(--accio); }

/* expedients */
.passos { gap: 10px; border-top: 0; margin-bottom: 20px; }
.passos button { background: var(--card); border: 0; border-radius: 18px; box-shadow: var(--sombra-s); padding: 14px 16px; }
.passos button:hover { background: var(--card); box-shadow: var(--sombra); }
.passos button[aria-pressed="true"] { background: var(--card); box-shadow: var(--sombra-s), inset 0 0 0 1.5px var(--accio); }
.passos button[aria-pressed="true"]::before { display: none; }
.passos .nn { font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.grup-pas { padding: 18px 22px 8px; }
.grup-pas > header { border-bottom: 0; padding-bottom: 6px; align-items: center; }
.grup-pas > header .nn { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--paper-2); font-size: 11px; letter-spacing: 0; color: var(--ink-2); }
.cap-taula { padding: 8px 8px 8px 0; font: 500 12px/1 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.fila-exp { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line-2); border-radius: 0; }
.fila-exp:last-child { border-bottom: 0; }
.fila-exp:hover { background: var(--paper); border-radius: 14px; }
.fila-exp .img { border-radius: 12px; }
.fila-exp .imp { font-weight: 500; }

/* l'expedient */
.exp-cap { margin: 8px 0 18px; }
.exp-cap .h1 { font: 600 34px/1.1 var(--f-ui); letter-spacing: -.03em; }
.fil { border-top: 0; padding: 18px 22px; margin-bottom: 0; }
.fil > div { padding: 0 14px 0 0; }
.fil .ara::before { left: 0; right: auto; top: -18px; width: 28px; height: 3px; border-radius: 0 0 3px 3px; }
.fil .nn { letter-spacing: .06em; }
.bloc { padding: 20px 22px; }
.escenari { background: var(--card); border-radius: var(--rc); box-shadow: var(--sombra); padding: 14px; }
.escenari .img { border-radius: 14px; }
.escenari figcaption { padding: 0 6px; }
.miniatures { padding: 0 4px 4px; }
.miniatures button .img { border-radius: 10px; }
.tots .gran span:last-child { font: 500 30px/1.05 var(--f-ui); letter-spacing: -.03em; color: var(--ink); }
.tots .gran { flex-direction: column; gap: 6px; align-items: flex-start; }
.prod-r { border-bottom-color: var(--line-2); }
.prod-r .img { border-radius: 10px; }

/* el pressupost */
.afegeix input { border-radius: 999px; border: 0; box-shadow: var(--sombra), inset 0 0 0 1.5px var(--accio); height: 56px; background: var(--card); }
.afegeix kbd { border-radius: 6px; }
.resultats { border: 0; border-radius: 18px; box-shadow: 0 18px 50px rgba(33, 25, 21, .16); padding: 6px; }
.res { border-radius: 12px; border-bottom: 0; }
.capitol { padding: 18px 22px 8px; }
.capitol > header { border-bottom: 1px solid var(--line-2); padding-bottom: 10px; }
.capitol > header .sub { font-weight: 600; font-size: 15px; }
.cap-linies { padding: 4px 0 8px; font: 500 11.5px/1 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.linia:last-child { border-bottom: 0; }
.linia .img { border-radius: 12px; }
.linia .n input { border-radius: 10px; }
.millores { border-radius: 16px; }
.mill { border: 0; box-shadow: var(--sombra-s); border-radius: 14px; }
.rail .panell { padding: 20px 22px; }
.rail .tots .gran span:last-child { font-size: 32px; }
.barra-p select { border-radius: 999px; }
.opcio-inici { min-height: 200px; }
.opcio-inici:hover { box-shadow: var(--sombra), inset 0 0 0 1.5px var(--accio); }
.opcio-inici .nn { font: 500 12px var(--f-ui); letter-spacing: 0; color: var(--accio-text); }

/* el render */
.avis-prova { background: var(--card); border-radius: 16px; box-shadow: var(--sombra-s); }
.pas-r { padding: 20px 22px; }
.render-ed > div:nth-child(2) { background: var(--card); border-radius: var(--rc); box-shadow: var(--sombra); padding: 16px; }
.galeria figure { background: var(--card); border-radius: 18px; box-shadow: var(--sombra); padding: 10px 10px 14px; }
.galeria figcaption { padding: 0 6px; }
.tria button .img { border-radius: 10px; }

/* dossier: sobre el gris, els fulls segueixen sent blancs */
.fulls { background: transparent; }
.full-p { box-shadow: var(--sombra); }
.full-p .ull, .pgrid .c, .ptaula th, .pcond h4 { letter-spacing: .1em; }
.portada .pimg { border-radius: 4mm; }
.pgrid .img, .popcio .img { border-radius: 3mm; }

/* per trucar, tauler, catàleg, ajustos */
.grup-truca { padding: 18px 22px 6px; }
.grup-truca > header { border-bottom: 1px solid var(--line-2); }
.trucada:last-child { border-bottom: 0; }
.trucada .img { border-radius: 12px; }
.propers-c { padding: 6px 22px; }
.propers li:last-child { border-bottom: 0; }
.taula th { font: 500 12px/1.2 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.taula tr:last-child td { border-bottom: 0; }
.persona { border-top: 0; }
.equip-g { gap: 16px; }
.cat-grup > header { border-bottom: 0; padding-bottom: 4px; }
.prods { gap: 16px; }
.prod { background: var(--card); border-radius: 20px; box-shadow: var(--sombra-s); padding: 10px 10px 14px; gap: 8px; }
.prod:hover { box-shadow: var(--sombra), inset 0 0 0 1.5px var(--accio); }
.prod:hover .img { box-shadow: inset 0 0 0 1px var(--line-2); }
.prod .img { border-radius: 14px; }
.prod .mc, .prod .t, .prod .rf, .prod .pr { padding: 0 6px; }
.prod .mc { letter-spacing: .08em; }
.prod .pr { border-top: 0; padding-top: 2px; font-weight: 600; }
.ajustos { gap: 20px; }
.dlg { border-radius: 24px; }
.toast { border-radius: 999px; padding: 12px 20px; }
.porta form { background: var(--card); border-radius: 28px; box-shadow: var(--sombra); padding: 32px; }
.porta { background: var(--bg); }
.porta .marca { flex-direction: row; gap: 8px; align-items: baseline; }
.porta .marca .m2 { font-size: 18px; }

@media (max-width: 1100px) { .xifres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .nav { display: flex; }
  .lat { background: rgba(243, 242, 239, .94); }
  .lat .rodo { display: none; }
  .nav a[data-v="ajustos"] { display: flex; }
  .cap-mobil { background: rgba(243, 242, 239, .94); border-bottom: 0; }
  .cap-mobil .marca { flex-direction: row; align-items: baseline; gap: 6px; background: var(--card); border-radius: 999px; padding: 9px 14px; box-shadow: var(--sombra-s); }
  .xifres { gap: 10px; }
  .xifra { padding: 14px 16px; }
  .xifra .v { font-size: 24px; }
  .bloc, .grup-pas, .capitol, .rail .panell, .pas-r, .persona, .grup-truca, .tauler > section, .ajustos .bloc, .opcio-inici, .fil { padding: 16px; border-radius: 18px; }
  .pestanyes { overflow-x: auto; }
  .exp-cap .h1 { font-size: 28px; }
}
@media (min-width: 761px) { .nav a[data-v="ajustos"] { display: none; } }
.fila-exp, .cap-taula { grid-template-columns: 96px minmax(200px, 1.5fr) minmax(150px, 1fr) 110px 200px 120px 16px; gap: 18px; }
.fila-exp .img { width: 96px; height: 64px; }
@media (max-width: 1100px) { .fila-exp, .cap-taula { grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, 1fr) 180px 110px 16px; } }
@media (max-width: 760px) { .fila-exp { grid-template-columns: 76px 1fr; } }
.linia .sense-img, .prod-r .sense-img, .imp-f .sense-img { font-size: 10px; padding: 4px; }
@media (max-width: 760px) {
  .h1 { font-size: 26px; }
  .passos .nm { font-size: 12.5px; overflow-wrap: anywhere; }
  .passos button { padding: 10px 12px; }
  .fila-exp .nom, .trucada .nom { font-size: 15px; }
  .cap-mobil .marca .m2 { font-size: 15px; }
  .cap-mobil .marca .m1 { font-size: 10px; letter-spacing: .26em; }
  .fila-exp .on, .fila-exp .imp { font-size: 12.5px; }
  .grup-pas > header small { display: none; }
}

.chev { width: 8px; height: 14px; flex: none; color: var(--line); }
.files-a .chev { color: var(--ink-3); }
@media print { html, body { background: #fff !important; } .full-p { box-shadow: none !important; } }

/* mòbil: el títol d'una secció i el seu botó (p. ex. «Puja un render fet fora») es posen un sota l'altre en lloc de tallar el botó */
@media (max-width: 760px) {
  .sec-t { flex-wrap: wrap; align-items: center; row-gap: 10px; }
  .sec-t > .btn { flex: 0 0 auto; max-width: 100%; }
}

/* la miniatura de la línia del pressupost: una sola mida (72 px a l'ordinador, 64 px a pantalles estretes i al mòbil), fons blanc i sense marc.
   Amb la foto del producte, a la tele de la sala s'ha de veure que és una foto. */
:root { --mini-linia: 72px; }
@media (max-width: 1280px) { :root { --mini-linia: 64px; } }
.linia .img.prod, .opcions-ed .linia .img.prod, .mill .img.prod { box-shadow: none; background: #fff; padding: 0; }   /* les fotos ja porten el seu marge blanc: sense coixí, el producte ocupa tota la miniatura */
.linia .img .marc, .mill .img .marc { display: none; }

/* P1 · el full 1 del dossier amb el resum: una línia per bloc, el total amb IVA a 19 pt i qui el prepara */
.portada .presum { margin: 9mm 18mm 0; display: grid; grid-template-columns: 1fr 62mm; gap: 12mm; align-items: end; }
.portada .presum table { width: 100%; border-collapse: collapse; font-size: 9pt; }
.portada .presum td { padding: 1.6mm 0; border-bottom: .5pt solid var(--line-2); }
.portada .presum td.r { text-align: right; font-variant-numeric: tabular-nums; width: 24mm; }
.portada .ptotal { display: flex; flex-direction: column; align-items: flex-end; gap: 1mm; }
.portada .ptotal .l { font: 600 7.5pt/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.portada .ptotal .v { font: 600 19pt/1.1 var(--f-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.portada .ptotal .q { font-size: 8pt; color: var(--ink-2); }
.portada .presum .pnota { margin-top: 2mm; font-size: 7pt; color: var(--ink-2); }

/* ---- revisió de disseny del 26/10 (nit) ---- */
/* 1 · línies del pressupost: «Mides i acabat» només quan hi ha text o quan s'edita la línia; el servei, amb una icona neta */
.linia .det:has(input:placeholder-shown) { display: none; }
.linia:focus-within .det { display: block; }
.img.prod.servei { display: grid; place-items: center; color: var(--ink-2); background: #fff; }
.img.prod.servei svg { width: 52%; height: 52%; opacity: .55; }
/* 2 · millores del forn: una sola graella, targetes a tota l'amplada, foto a l'esquerra, text a dalt i les dues accions en una fila sota el preu */
.millores .ll { grid-template-columns: 1fr; gap: 10px; }
.mill { align-items: start; grid-template-columns: var(--mini-linia) minmax(0, 1fr); }
.mill .img { align-self: start; }
.mill .fila-b { margin-top: 8px; flex-wrap: nowrap; gap: 8px; }
.mill .fila-b .btn { margin-top: 0; white-space: nowrap; }
/* 6 · la columna del resum: miniatures més grans dins del requadre, i «4 u.» sense partir */
.prod-r { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: start; }
.prod-r .img { width: 64px; height: 64px; }
.prod-r .img.prod { padding: 0; box-shadow: none; background: #fff; border-radius: 12px; }
.prod-r .img .marc { display: none; }
.prod-r .t { overflow-wrap: anywhere; }
.nw { white-space: nowrap; }
.capitol header small { white-space: normal; }
/* 3 · full 1 del dossier: imatge una mica més baixa perquè hi càpiga el resum; una sola taula amb els capítols, els tres imports i el total a les mateixes columnes */
.portada .pimg { aspect-ratio: 2 / 1; }
.portada .ptxt { padding-top: 9mm; }
.portada .presum { margin: 8mm 18mm 0; display: block; }
.portada .presum table { width: 100%; border-collapse: collapse; font-size: 8.8pt; font-variant-numeric: tabular-nums; }
.portada .presum td { padding: 1.25mm 0; border-bottom: .5pt solid var(--line-2); }
.portada .presum td.r { text-align: right; width: 34mm; }
.portada .presum tr.primer td { border-top: .5pt solid var(--ink); padding-top: 2mm; }
.portada .presum tr.tt td { border-bottom: 0; color: var(--ink-2); }
.portada .presum tr.total td { border: 0; border-top: .5pt solid var(--ink); padding-top: 2.2mm; font: 600 19pt/1.1 var(--f-ui); letter-spacing: -.02em; color: var(--ink); }
.portada .presum tr.total td:first-child { font: 600 7.5pt/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); vertical-align: middle; }
.portada .pfrase { max-width: none; margin: auto 18mm 22mm; }
/* 5 · els productes, a graella plena segons quants n'hi ha al full */
.pgrid { flex: 1; margin-bottom: 4mm; }
.pgrid.c2 { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; align-content: space-between; gap: 5mm 8mm; }
.pgrid.c2 figure { display: grid; grid-template-columns: 34mm minmax(0, 1fr); gap: 4mm; align-items: center; }
.pgrid.c2 figcaption { margin-top: 0; }
.pgrid.c2 .n { font-size: 10.5pt; }
/* 4 · opcions + condicions i signatura al mateix full, amb el peu a baix de tot */
.popcions { gap: 4mm; }
.popcio { grid-template-columns: 32mm 1fr 32mm; padding-bottom: 4mm; }
.pfinal { margin-top: auto; }
.pfinal .ull { margin-bottom: 2mm; }
.pfinal .pcond { margin-top: 2mm; }
.pfinal .psig { margin-top: 16mm; }

/* ---- revisió de disseny, ronda 3 ---- */
/* 1 · «Nota per al client» i «Condicions»: el requadre creix amb el text */
textarea[data-b] { field-sizing: content; min-height: 5.2em; overflow: hidden; resize: none; }
/* 2 · dossier, fulls 2 i 3: fotos de 45 mm, amb un espai fix entre files (no s'estira per omplir el full) */
.pgrid.c2 { align-content: start; }
.pgrid.c2 { gap: 6mm 7mm; }
.pgrid.c2 figure { grid-template-columns: 45mm minmax(0, 1fr); gap: 4mm; }
.pgrid { margin-bottom: 0; }

/* 3 i 4 · mòbil: «Opcions per millorar la cuina» amb el nom a tota l'amplada i, a sota, el preu i la diferència en una fila; les accions de les millores, a una segona línia si no hi caben */
@media (max-width: 760px) {
  .opcions-ed .linia { grid-template-columns: var(--mini-linia) minmax(0, 1fr) auto auto; gap: 6px 10px; align-items: center; }
  .opcions-ed .linia > .img, .opcions-ed .linia > .foto-b { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .opcions-ed .linia > .qui { grid-column: 2 / -1; grid-row: 1; }
  .opcions-ed .linia > .n { grid-column: 2; grid-row: 2; max-width: 150px; }
  .opcions-ed .linia > .dif { grid-column: 3; grid-row: 2; text-align: right; white-space: nowrap; }
  .opcions-ed .linia > .acc { grid-column: 4; grid-row: 2; }
  .mill .fila-b { flex-wrap: wrap; gap: 2px 8px; }
}

/* ---- el PDF per al client (26/10, nit): un sol botó gran, on es mira ---- */
.pdf-pista { line-height: 1.45; }
.rail .pdf-pista { margin: 8px 0 0; font-size: 12px; }
.dossier-barra { position: sticky; top: 0; z-index: 5; background: #fff; padding: 12px 14px; margin-bottom: 18px; border-radius: var(--r); box-shadow: var(--sombra-s); }
.dossier-barra .pdf-pista { flex: 0 1 340px; font-size: 12px; }
@media (max-width: 760px) { .dossier-barra { top: 58px; } }
/* a l'ordinador la pista va en una sola línia, sense el forat al costat; al mòbil es parteix */
@media (min-width: 1200px) { .dossier-barra .pdf-pista { flex: 0 0 auto; white-space: nowrap; } }
/* mesura de la taula del PDF: fora de la pantalla, amb l'amplada d'un full, sense zoom del mòbil */
#mesura { position: absolute; left: -30000px; top: 0; width: 210mm; visibility: hidden; pointer-events: none; }
#mesura .full-p { zoom: 1; box-shadow: none; }
.ptaula tr.cap-r.cont td { color: var(--ink-2); font-weight: 500; }
/* portada: si la nota és llarga, la imatge cedeix l'alçada (mai passa de 297 mm) */
.full-p.portada { height: 297mm; }
.portada .pimg { flex: 0 1 auto; min-height: 56mm; }
.ptots .g { align-items: baseline; }
.pcond .buit-c { color: var(--ink-3); }
.pcond-altres { margin-top: 5mm; font-size: 9pt; line-height: 1.55; }
.pcond-altres h4 { font: 600 6.5pt/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2.5mm; }
.pcond-altres p { margin: 0; white-space: pre-line; }
@media (min-width: 900px) { .rail { max-height: calc(100vh - 48px); overflow-y: auto; padding-bottom: 4px; } }

/* ---- 26/10, 22:50: el PDF acaba de quadrar ---- */
/* el número i la unitat no es parteixen, i cap paraula llarga passa del marge del full */
.pgrid figure, .pgrid figcaption { min-width: 0; }
.pgrid figcaption, .pgrid .n, .pgrid .m, .pgrid .k { min-width: 0; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 11 4 4; }   /* només es parteixen les paraules llargues (monocomandament), no «cubeta» ni «classe» */
.ptaula td, .popcio .n, .popcio .m, .popcio .k, .popcio .en { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 11 4 4; }
/* els títols de producte no es parteixen mai amb guionet (queda «Aixeta / monocomandament», amb la paraula sencera); el guionet automàtic només és a les descripcions (.k, .m i la segona línia de la taula) */
.pgrid .n, .popcio .n, .ptaula td .t, .ptaula td.t { hyphens: manual; -webkit-hyphens: manual; }
/* i perquè «monocomandament» hi càpiga sencera a la columna de la graella (35,6 mm de paraula, 34,5 mm de columna a 10,5 pt): títol a 10 pt i 3,5 mm entre la foto i el text */
.pgrid.c2 .n { font-size: 10pt; }
.pgrid.c2 figure { gap: 3.5mm; align-items: start; }   /* el bloc de text comença a l'alçada de dalt de la foto, i així les dues columnes de cada fila queden alineades */
/* descripcions (marca, referència, característiques) de la graella i de les opcions: mai amb guionet; cada tros entre «·» és un bloc que no es parteix, i només si és més ample que la columna es parteix per dins */
.pgrid figcaption, .pgrid .m, .pgrid .k, .popcio .m, .popcio .k, .popcio .en { hyphens: manual; -webkit-hyphens: manual; }
.ch { display: inline-block; max-width: 100%; vertical-align: top; }
/* mòbil: la barra de pestanyes de l'expedient cap sencera (sense el total petit i amb «PDF» curt), i si algun dia no hi cap, es llisca */
@media (max-width: 760px) {
  .pestanyes { display: flex; width: 100%; justify-content: space-between; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .pestanyes a { padding: 8px 12px; font-size: 13px; flex: 0 0 auto; }
  .pestanyes .pes-total { display: none; }
  .pestanyes .nom-llarg { display: none; }
  /* pestanya Pressupost: el resum amb el botó «Fes el PDF per al client» va abans de les línies; el bloc «Al PDF» (portada i condicions), després */
  .editor .rail { display: contents; }
  .editor > div:first-child { order: 2; }
  .editor .rail > .panell:first-child { order: 1; }
  .editor .rail > .panell:last-child { order: 3; }
}