/* portal.noubau.com — marca de la web nova de noubau (docs/BRAND.md de noubau-web-2026):
   negre 50 · blanc 40 · terracota 5 · pastel 5; Be Vietnam Pro; cantonades de 2 px. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-latin-800-normal.woff2) format('woff2')}

:root{
  --ink:#1b1b1b; --paper:#fff; --muted:#6e6e6e; --soft:#8a8a8a; --rule:#e6e6e6; --panel:#f7f6f5;
  --tc:#c97a5a; --tc-ink:#a85c3e; --tc-deep:#8e4c33; --on-tc:#fff; --wash:#f4ebe7; --pastel:#cbb0a5;
  --ok:#2f7350; --ok-wash:#e7f2ec; --warn:#9a6312; --warn-wash:#f8efdf; --bad:#a8402f; --bad-wash:#f8e9e6;
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --r:2px;
  --gl:max(20px,env(safe-area-inset-left,0px)); --gr:max(20px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:400;margin:0;letter-spacing:-0.04em;line-height:1.08;text-wrap:balance}
p{margin:0}
a{color:var(--tc-ink)}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--tc);outline-offset:2px}
[hidden]{display:none!important}
.kick{font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tc-ink)}
.num{font-variant-numeric:tabular-nums}
.small{font-size:13px;color:var(--soft)}
.muted{color:var(--muted)}
svg.logo{height:18px;width:auto;fill:currentColor;display:block}
.logo-img{display:block;height:22px;width:auto}

/* Capçalera */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:16px;padding:12px var(--gr) 12px var(--gl);padding-top:max(12px,env(safe-area-inset-top,0px));flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.top .esp{flex:1}
.lang{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.lang button{border:0;background:none;padding:4px 9px;font-size:12.5px;cursor:pointer;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.user{display:flex;align-items:center;gap:10px;font-size:14px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--wash);color:var(--tc-ink);display:grid;place-items:center;font-weight:800;font-size:12px}
.linkbtn{background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;cursor:pointer;font-size:13.5px}

.main{max-width:1440px;margin:0 auto;padding:28px var(--gr) 64px var(--gl)}
.carregant{color:var(--soft)}

/* Botons i camps */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r);border:1px solid var(--ink);background:transparent;padding:10px 16px;cursor:pointer;font-weight:500;font-size:15px;color:var(--ink);line-height:1.2;text-decoration:none}
.btn:hover{background:var(--panel)}
.btn.pri{background:var(--tc-ink);border-color:var(--tc-ink);color:var(--on-tc)}
.btn.pri:hover{background:var(--tc-deep);border-color:var(--tc-deep)}
.btn.ghost{border-color:var(--rule)}
.btn.sm{padding:6px 10px;font-size:13.5px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.fld{display:grid;gap:5px;min-width:0;align-content:start}
.fld label,.lbl{font-size:12.5px;color:var(--muted);font-weight:500}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);padding:9px 10px;font-size:15px;min-width:0}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ink);outline:none}
.fld.err input,.fld.err select{border-color:var(--bad)}
.hint{font-size:12px;color:var(--soft)}
.unit{position:relative}
.unit input{padding-right:44px}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.unit i{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:var(--soft);pointer-events:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.check input{margin-top:4px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:3px 9px;border-radius:999px;background:var(--panel);color:var(--muted);white-space:nowrap;line-height:1.4}
.pill.ok{background:var(--ok-wash);color:var(--ok)}
.pill.warn{background:var(--warn-wash);color:var(--warn)}
.pill.tc{background:var(--wash);color:var(--tc-ink)}
.card{border:1px solid var(--rule);border-radius:var(--r);padding:20px;display:grid;gap:14px;background:var(--paper)}
.card.panel{background:var(--panel);border-color:transparent}
.errbox{border-left:2px solid var(--bad);background:var(--bad-wash);padding:10px 12px;font-size:14px}
.warnbox{border-left:2px solid var(--warn);background:var(--warn-wash);padding:10px 12px;font-size:13.5px}

/* Entrada */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start;padding-top:12px}
.hero h1{font-size:clamp(2.2rem,1.3rem + 3.2vw,3.8rem);letter-spacing:-0.06em;line-height:1.02;margin-top:12px}
.hero .lead{font-size:1.12rem;color:var(--muted);max-width:52ch;margin-top:16px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-top:1px solid var(--rule)}
.steps3 div{padding:14px 16px 0 0;display:grid;gap:6px;align-content:start}
.steps3 div + div{padding-left:16px;border-left:1px solid var(--rule)}
.steps3 p{font-size:14px;color:var(--muted)}
.trust{display:flex;gap:8px 18px;flex-wrap:wrap;font-size:13px;color:var(--soft);margin-top:26px}
.codi input{font-size:28px;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums;padding:12px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:28px}}
@media (max-width:560px){.steps3{grid-template-columns:1fr}.steps3 div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule);margin-top:10px}}

/* Calculadora */
.calc{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
@media (max-width:1360px){.calc{grid-template-columns:1fr}}
.proj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px;margin-bottom:16px}
@media (max-width:700px){.proj{grid-template-columns:1fr}}
.sostres{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin-bottom:22px}
.sostre{border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);padding:8px;cursor:pointer;display:grid;gap:6px;text-align:left;font-size:12.5px;color:var(--muted);line-height:1.25}
.sostre svg{width:100%;height:auto;display:block}
.sostre[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sec-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:6px 0 10px;flex-wrap:wrap}
.sec-t h2{font-size:1.35rem}

.tipus{border:1px solid var(--rule);border-radius:var(--r);margin-bottom:12px}
.t-line{display:grid;grid-template-columns:54px 66px 86px 86px 86px minmax(160px,1fr) 100px 132px 96px 20px;gap:8px;align-items:end;padding:12px}
.t-line .tag{font-weight:800;font-size:11px;letter-spacing:.06em;color:var(--tc-ink);text-transform:uppercase;padding-bottom:11px;white-space:nowrap}
.t-line .fld label,.t-line .lbl{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.t-line .fld input,.t-line .fld select{padding:8px 8px;font-size:14.5px}
.t-line .unit input{padding-right:36px}
.pos{display:flex;gap:4px}
.pos button{flex:1;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper);padding:2px;cursor:pointer;height:38px}
.pos button svg{width:100%;height:100%;display:block}
.pos button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--panel)}
.acer{display:flex;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;height:38px}
.acer button{flex:1;border:0;background:none;cursor:pointer;font-size:12.5px;color:var(--muted)}
.acer button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.t-del{background:none;border:0;color:var(--soft);cursor:pointer;font-size:18px;line-height:1;padding:0 0 10px}
.t-del:hover{color:var(--bad)}
.t-com{padding:0 12px 12px 82px}
.t-com textarea{width:100%;border:1px dashed var(--rule);border-radius:var(--r);background:none;padding:7px 9px;font-size:14px;resize:vertical;min-height:36px}
.t-com textarea:focus{outline:none;border-style:solid;border-color:var(--ink)}
.t-res{border-top:1px solid var(--rule);background:var(--panel);padding:10px 12px 10px 82px;display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;min-height:46px}
.code{font-weight:500;font-size:1.15rem;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
@media (max-width:1000px){
  .t-line{grid-template-columns:repeat(4,minmax(0,1fr));}
  .t-line .tag{grid-column:1/-1;padding-bottom:0}
  .t-line .w2{grid-column:span 2}
  .t-del{position:absolute;right:10px;top:8px;padding:0}
  .tipus{position:relative}
  .t-com,.t-res{padding-left:12px}
}
@media (max-width:560px){.t-line{grid-template-columns:repeat(2,minmax(0,1fr))}}
.addt{width:100%;border:1px dashed var(--pastel);background:none;padding:12px;border-radius:var(--r);cursor:pointer;color:var(--tc-ink);font-weight:500}

.side{position:sticky;top:76px;display:grid;gap:14px}
@media (max-width:1360px){.side{position:static;max-width:560px}}
.side h2{font-size:1.5rem}
.big{font-size:2.6rem;letter-spacing:-0.05em;line-height:1}
.sum{width:100%;border-collapse:collapse;font-size:14px}
.sum td{padding:7px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.sum td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:10px}
.sum .c{font-weight:500}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btns-t{font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:-6px}
.desat{font-size:12.5px;color:var(--soft)}

/* Projectes */
.plist{border-top:1px solid var(--rule)}
.prow{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.prow b{font-weight:500}
@media (max-width:700px){.prow{grid-template-columns:1fr}}

/* Modal */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;z-index:50;padding:max(16px,env(safe-area-inset-top,0px)) var(--gr) max(16px,env(safe-area-inset-bottom,0px)) var(--gl)}
.mod{background:var(--paper);border-radius:var(--r);max-width:620px;width:100%;max-height:100%;overflow:auto;padding:24px;display:grid;gap:16px}
.mod h2{font-size:1.6rem}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.mgrid{grid-template-columns:1fr}}
.mact{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.fitxa{border:1px solid var(--rule);border-radius:var(--r);padding:14px;display:grid;gap:8px;font-size:14px;background:var(--panel)}
.fitxa table{width:100%;border-collapse:collapse;font-size:13px}
.fitxa td{padding:4px 0;border-bottom:1px solid var(--rule)}
.fitxa td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.foc{border:1px solid var(--ink);border-radius:var(--r);padding:14px;display:grid;gap:10px}
.foc legend{padding:0 6px;font-weight:500}
.radios{display:flex;gap:8px;flex-wrap:wrap}
.radios label{display:flex;gap:8px;align-items:center;border:1px solid var(--rule);border-radius:var(--r);padding:8px 12px;cursor:pointer;font-size:14px}
.radios input:checked + span{font-weight:500}
.radios label:has(input:checked){border-color:var(--ink);background:var(--panel)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:var(--r);font-size:14px;z-index:60;max-width:calc(100% - 32px)}
.peu{max-width:1440px;margin:0 auto;padding:20px var(--gr) 40px var(--gl);border-top:1px solid var(--rule);display:flex;gap:8px 18px;flex-wrap:wrap;font-size:13px;color:var(--soft)}
.peu a{color:var(--soft)}
/* Google Places */
.pac-container{font-family:var(--font);border-radius:var(--r)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ════════ Entrada (explicació a l'esquerra, entrar a la dreta) ════════ */
.login{display:grid;gap:16px;padding:28px}
.login h2{font-size:clamp(1.7rem,1.3rem + 1vw,2.2rem);letter-spacing:-0.045em;line-height:1.05}
.login .fld input{padding:12px 13px;font-size:16px;transition:border-color .2s,box-shadow .2s}
.login .fld input:focus{border-color:var(--ink);box-shadow:0 0 0 4px var(--wash)}
.login .codi input{font-size:28px;letter-spacing:.42em;padding:13px}
.big-btn{padding:13px 18px;font-size:16px;justify-content:space-between;transition:background .2s}
.big-btn .fletxa{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.big-btn:hover .fletxa{transform:translateX(5px)}
.login-links{display:flex;gap:18px;flex-wrap:wrap}
.hero{padding-top:28px;padding-bottom:20px}

/* ════════ Capçalera i capçalera de pàgina (com el prototip) ════════ */
.top{gap:18px;padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:14px}
.top .brand{gap:12px}
.top-nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:8px}
.top-nav button{background:none;border:0;padding:8px 13px;border-radius:var(--r);cursor:pointer;color:var(--muted);font-size:15px;transition:background .15s,color .15s}
.top-nav button:hover{color:var(--ink)}
.top-nav button[aria-current="page"]{color:var(--ink);background:var(--panel)}
.user{position:relative;display:flex;align-items:center;gap:12px;font-size:14.5px}
.user-prof{color:var(--muted)}
.top .avatar{border:0;cursor:pointer;width:36px;height:36px;font-size:12.5px;transition:box-shadow .2s}
.top .avatar:hover,.top .avatar[aria-expanded="true"]{box-shadow:0 0 0 3px var(--wash)}
.menu-usuari{position:absolute;right:0;top:calc(100% + 10px);width:250px;background:var(--paper);border:1px solid var(--rule);border-radius:4px;box-shadow:0 12px 32px rgba(0,0,0,.12);padding:8px;display:grid;gap:2px;z-index:30;animation:entraLogin .18s ease both}
.mu-cap{display:grid;gap:2px;padding:8px 10px 10px;border-bottom:1px solid var(--rule);margin-bottom:4px}
.mu-cap b{font-weight:500}
.mu-cap span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.mu-fila{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;font-size:14px;color:var(--muted)}
.mu-item{background:none;border:0;text-align:left;padding:9px 10px;border-radius:3px;cursor:pointer;font-size:14.5px}
.mu-item:hover{background:var(--panel)}
.phead{margin:6px 0 22px;display:grid;gap:8px}
.phead h1{font-size:clamp(2rem,1.4rem + 1.9vw,3rem);letter-spacing:-0.05em;line-height:1.04}
.phead-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.phead-row > div{display:grid;gap:8px}
.muted-k{color:var(--muted)}
.phead-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:15.5px}
.phead-meta .pill{font-size:13.5px;padding:4px 12px}
.doclist{border-top:1px solid var(--rule);max-width:820px}
.doclist a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:background .15s}
.doclist a:hover{background:var(--panel)}
.dl-t{display:grid;gap:3px;min-width:0}
.dl-t b{font-weight:500;font-size:16px}
.dl-t span{font-size:14px;color:var(--muted)}
.dl-f{font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--tc-ink);white-space:nowrap}
@media (max-width:760px){.top-nav{order:3;width:100%;margin-left:0}.user-prof{display:none}}