/* Xadaf Consultoria — disseny «B» de Lovable (repo josepportell/xadaf-consultoria-web),
   portat a CSS pla. Tokens = bloc [data-theme="b"] de src/styles.css de Lovable;
   mides = les classes Tailwind de cada component (rem, breakpoints sm 640 / md 768 / lg 1024).
   Sense atributs style="" a l'HTML (CSP). */

:root{
  --font-display:"Archivo","Archivo Local",system-ui,sans-serif;
  --font-body:"Source Sans 3","Source Sans Local",system-ui,sans-serif;
  --radius:.125rem;
  --background:oklch(.985 .003 255);
  --foreground:oklch(.2 .03 255);
  --card:oklch(1 0 0);
  --primary:oklch(.3 .06 255);
  --primary-foreground:oklch(.98 .005 255);
  --secondary:oklch(.94 .01 255);
  --muted:oklch(.95 .008 255);
  --muted-foreground:oklch(.47 .025 255);
  --accent:oklch(.72 .15 80);
  --accent-text:oklch(.5 .11 70);
  --accent-foreground:oklch(.2 .03 255);
  --border:oklch(.88 .012 255);
  --destructive:oklch(.577 .245 27.325);
  --marca:#10243c;
  --marca-foreground:#f7f4ec;
  --marca-groc:#f2b21a;
  --w:72rem;
}

@font-face{font-family:"Archivo Local";font-weight:700;font-display:swap;src:local("Archivo Bold"),url(/assets/fonts/archivo-700.woff2) format("woff2")}
@font-face{font-family:"Archivo Local";font-weight:800;font-display:swap;src:url(/assets/fonts/archivo-800.woff2) format("woff2")}
@font-face{font-family:"Source Sans Local";font-weight:400;font-display:swap;src:local("Source Sans 3"),url(/assets/fonts/source-sans-3-400.ttf) format("truetype")}
@font-face{font-family:"Source Sans Local";font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-600.ttf) format("truetype")}

*,*::before,*::after{box-sizing:border-box;border:0 solid var(--border)}
[hidden]{display:none!important}
html{line-height:1.5;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-body);display:flex;min-height:100vh;flex-direction:column;-webkit-font-smoothing:antialiased}
main{flex:1}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{list-style:none;padding:0}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;color:var(--primary)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:color-mix(in oklab,var(--accent) 45%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.serif{font-family:var(--font-display)}
.skip{position:absolute;left:-999px;top:8px;background:var(--marca);color:var(--marca-foreground);padding:.5rem 1rem;z-index:50}
.skip:focus{left:8px}

/* ---- contenidor ---- */
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:1.5rem}
.band{border-block:1px solid var(--border);background:var(--card)}

/* ---- capçalera ---- */
.top{position:sticky;top:0;z-index:20;background:var(--marca)}
.top .in{max-width:var(--w);margin-inline:auto;padding:1rem 1.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.brand img{height:2.5rem;width:auto}
.top nav{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;font-size:.875rem;line-height:1.25rem}
.top nav a{color:color-mix(in oklab,var(--marca-foreground) 75%,transparent)}
.top nav a:hover{color:var(--marca-groc)}
.top nav a[aria-current="page"]{color:var(--marca-groc);font-weight:500}

/* ---- botons ---- */
.btn{display:inline-block;border-radius:0;padding:.75rem 1.5rem;font:inherit;font-weight:500;cursor:pointer;background:var(--accent);color:var(--accent-foreground)}
.btn:hover{background:color-mix(in oklab,var(--accent) 90%,transparent)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.out{background:transparent;border:1px solid color-mix(in oklab,var(--primary) 30%,transparent);color:var(--primary)}
.btn.out:hover{background:var(--secondary)}

/* ---- capçalera de pàgina ---- */
.eyebrow{font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--accent-text)}
.page-head{border-bottom:1px solid var(--border)}
.page-head .wrap{padding-block:4rem}
.page-head h1{margin-top:1rem;max-width:48rem;font-size:2.25rem;line-height:1.25}
.page-head .intro{margin-top:1.5rem;max-width:42rem;font-size:1.125rem;line-height:1.75rem;color:var(--muted-foreground)}

/* ---- portada ---- */
.hero{display:grid;gap:3rem;align-items:center;padding-block:4rem}
.hero h1{margin-top:1.25rem;font-size:2.25rem;line-height:1.08}
.hero .lead{margin-top:1.5rem;max-width:36rem;font-size:1.125rem;line-height:1.75rem;color:var(--muted-foreground)}
.hero .acts{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}

.fitxa{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:0 20px 50px -25px color-mix(in oklab,var(--primary) 35%,transparent)}
.fitxa-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-bottom:1px solid var(--border);padding:1rem 1.5rem}
.fitxa-top span:first-child{font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-foreground)}
.pill{border-radius:9999px;background:color-mix(in oklab,var(--accent) 10%,transparent);padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500;color:var(--accent-text);white-space:nowrap}
.fitxa-body{padding:1.25rem 1.5rem}
.fitxa .obra{font-family:var(--font-display);font-size:1.25rem;line-height:1.75rem;color:var(--primary)}
.fitxa .lloc{font-size:.875rem;line-height:1.25rem;color:var(--muted-foreground)}
.fitxa .cap{margin-top:1.25rem;border-radius:0;background:var(--muted);padding:.75rem 1rem}
.fitxa .cap .k{font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}
.fitxa .cap .v{font-family:var(--font-display);font-size:1.875rem;line-height:2.25rem;color:var(--primary)}
.fitxa .cap .n{font-size:.75rem;line-height:1rem;color:var(--muted-foreground)}
.fitxa dl{margin-top:1rem;font-size:.875rem;line-height:1.25rem}
.fitxa dl>div{display:grid;grid-template-columns:7rem 1fr;gap:.75rem;padding-block:.625rem;border-top:1px solid var(--border)}
.fitxa dl>div:first-child{border-top:0}
.fitxa dt{color:var(--muted-foreground)}
.fitxa dd.call{color:var(--accent-text)}

.two{display:grid;gap:3rem;padding-block:4rem}
.two h2{font-size:1.875rem;line-height:2.25rem}
.two ul{margin-top:1.5rem}
.two li+li{margin-top:1rem}
.two .no{color:var(--muted-foreground)}
.two .si{border-left:2px solid var(--accent);padding-left:2rem}

.stats{padding-block:5rem}
.stats .grid{margin-top:2rem;display:grid;gap:1px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--border)}
.stats .grid>div{background:var(--background);padding:1.5rem}
.stats .n{font-family:var(--font-display);font-size:2.25rem;line-height:2.5rem;color:var(--primary)}
.stats .t{margin-top:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--muted-foreground)}
.stats .src{margin-top:1rem;font-size:.75rem;line-height:1rem;color:var(--muted-foreground)}

.cards3{display:grid;gap:1.5rem}
.box{border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.box.c{background:var(--card)}
.box h3{font-size:1.25rem;line-height:1.75rem}
.box p{margin-top:.5rem;color:var(--muted-foreground)}

.cta-band{margin-top:5rem}
.cta-band .in{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:1.5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:2rem}
.cta-band h2{font-size:1.5rem;line-height:2rem}
.cta-band p{margin-top:.5rem;color:var(--muted-foreground)}

/* ---- Com treballem ---- */
.sec{padding-block:4rem}
.steps4{display:grid;gap:1.5rem}
.steps4 li{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:1.5rem}
.steps4 .num{font-family:var(--font-display);font-size:3rem;line-height:1;color:color-mix(in oklab,var(--accent) 40%,transparent)}
.steps4 .who{margin-top:.75rem;font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-foreground)}
.steps4 h3{margin-top:.25rem;font-size:1.25rem;line-height:1.75rem}
.steps4 p.d{margin-top:.75rem;font-size:.875rem;line-height:1.25rem;color:var(--muted-foreground)}

.example{display:grid;gap:3rem;padding-block:4rem}
.example h2,.sec h2{font-size:1.875rem;line-height:2.25rem}
.example p.t{margin-top:1rem;color:var(--muted-foreground)}
.bars>div+div{margin-top:.75rem}
.bars .row{display:flex;justify-content:space-between;font-size:.875rem;line-height:1.25rem}
.bars .row b{font-weight:500;color:var(--primary)}
.bars .track{margin-top:.25rem;height:.5rem;border-radius:9999px;background:var(--muted)}
.bars .fill{height:.5rem;border-radius:9999px;background:var(--accent)}
.w30{width:30.2%}.w26{width:26.4%}.w7{width:7.4%}
.bars .src{padding-top:.5rem;font-size:.75rem;line-height:1rem;color:var(--muted-foreground)}
.narrow{max-width:48rem;margin-inline:auto;padding:4rem 1.5rem}
.narrow h2{font-size:1.875rem;line-height:2.25rem}
.narrow p{margin-top:1rem;font-size:1.125rem;line-height:1.75rem;color:var(--muted-foreground)}

/* ---- Un mes amb nosaltres ---- */
.sec h2+.steps-m{margin-top:2rem}
.steps-m{display:grid;gap:1rem}
.steps-m>div{border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.steps-m .p{font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text)}
.steps-m h3{margin-top:.5rem;font-size:1.125rem;line-height:1.75rem}
.steps-m .d{margin-top:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--muted-foreground)}
.sub{margin-top:.75rem;max-width:42rem;color:var(--muted-foreground)}
.tbl{margin-top:2rem;overflow-x:auto}
table{width:100%;min-width:640px;border-collapse:collapse;text-align:left;font-size:.875rem;line-height:1.25rem}
thead{font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}
th{font-weight:500;padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--border)}
td{padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--border);vertical-align:top;color:var(--muted-foreground)}
td:nth-child(2){color:var(--foreground)}
td:first-child{font-weight:500;color:var(--primary)}
td.on{color:var(--accent-text);font-weight:500}
.total{margin-top:2.5rem;display:grid;gap:1.5rem}
.total .tot{border-radius:var(--radius);background:var(--primary);color:var(--primary-foreground);padding:1.5rem}
.total .tot .k{font-size:.875rem;line-height:1.25rem;color:color-mix(in oklab,var(--primary-foreground) 70%,transparent)}
.total .tot .v{margin-top:.25rem;font-family:var(--font-display);font-size:3rem;line-height:1}
.total .tot .d{margin-top:.75rem;font-size:.875rem;line-height:1.25rem;color:color-mix(in oklab,var(--primary-foreground) 80%,transparent)}
.total ul{align-self:center}
.total li+li{margin-top:.75rem}
.total li b{font-family:var(--font-display);font-size:1.5rem;line-height:2rem;font-weight:400;color:var(--primary)}
.total li span{color:var(--muted-foreground)}
.fine{margin-top:1rem;font-size:.75rem;line-height:1rem;color:var(--muted-foreground)}
.zones{margin-top:2rem;display:grid;gap:1rem}
.zones .n{font-family:var(--font-display);font-size:3rem;line-height:1;color:var(--primary)}
.zones .c{margin-top:.25rem;color:var(--muted-foreground)}

/* ---- Preus ---- */
.plans{display:grid;gap:1.5rem}
.plans .box{display:flex;flex-direction:column;background:var(--card)}
.plans h3{font-size:1.125rem;line-height:1.75rem}
.plans .pr{margin-top:1rem;font-family:var(--font-display);font-size:2.25rem;line-height:2.5rem;color:var(--primary)}
.plans .u{font-size:.875rem;line-height:1.25rem;color:var(--accent-text)}
.plans .box p.d{margin-top:1rem;font-size:.875rem;line-height:1.25rem}
.quote{margin-top:3rem;max-width:48rem;border-left:2px solid var(--accent);padding-left:1.5rem}
.quote p{font-family:var(--font-display);font-size:1.5rem;line-height:2rem;color:var(--primary)}
.sec .fine{margin-top:1.5rem;font-size:.875rem;line-height:1.25rem}

/* ---- Contacte ---- */
.contact{display:grid;gap:1.5rem;padding-block:4rem}
.contact .box{background:var(--card);padding:2rem}
.contact .k{font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.18em;color:var(--accent-text)}
.contact h2{margin-top:.5rem;font-size:1.875rem;line-height:2.25rem}
.contact .box p.d{margin-top:.5rem;color:var(--muted-foreground)}
.contact .btn{margin-top:1.5rem}
.contact-note{padding-bottom:4rem;color:var(--muted-foreground)}
.contact-note a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}

/* ---- peu ---- */
.foot{margin-top:6rem;background:var(--marca);color:var(--marca-foreground)}
.foot .in{max-width:var(--w);margin-inline:auto;padding:3rem 1.5rem;display:grid;gap:2rem;font-size:.875rem;line-height:1.25rem}
.foot img{height:2.25rem;width:auto}
.foot p{color:color-mix(in oklab,var(--marca-foreground) 70%,transparent)}
.foot img+p{margin-top:.5rem}
.foot .c p{color:color-mix(in oklab,var(--marca-foreground) 80%,transparent)}
.foot .c p:first-child{font-weight:500;color:var(--marca-foreground)}
.foot .c p{margin-top:0}.foot .c p:nth-child(2){margin-top:.5rem}
.foot .d p+p{margin-top:.5rem}
.foot a:hover{color:var(--marca-groc)}
.foot .legal-line{grid-column:1/-1;border-top:1px solid color-mix(in oklab,var(--marca-foreground) 15%,transparent);padding-top:1.5rem;font-size:.75rem;line-height:1rem;color:color-mix(in oklab,var(--marca-foreground) 60%,transparent);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}
.foot .legal-line span{max-width:44rem}
.foot .legal-line nav{display:flex;gap:1.25rem}

/* ---- pàgines legals i 404 ---- */
.legal{padding-block:4rem}
.legal>*,.formwrap>*{max-width:48rem}
.legal>.page-head{max-width:none}
.legal h2{margin-top:2.5rem;font-size:1.5rem;line-height:2rem}
.legal p,.legal li{margin-top:1rem;color:var(--muted-foreground)}
.legal ul{padding-left:1.25rem;list-style:disc}
.legal li{margin-top:.5rem}
.legal b{color:var(--foreground);font-weight:600}
.legal a,.note a,.hint a,.consent a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}
.falta{background:#fde68a;color:#78350f;padding:0 .3rem;font-weight:600;white-space:nowrap}

/* ---- formulari d'alta ---- */
.formwrap{padding-block:4rem}
.form{display:flex;flex-direction:column;gap:2.5rem}
fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:1.25rem}
legend{width:100%;padding:0 0 .75rem;margin-bottom:.5rem;border-bottom:1px solid var(--border);font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;font-size:1.5rem;line-height:2rem;color:var(--primary)}
.fld{display:flex;flex-direction:column;gap:.375rem;min-width:0}
.fld>label,.fld>.lab{font-weight:600}
.hint{font-size:.875rem;line-height:1.25rem;color:var(--muted-foreground);font-weight:400}
.row2{display:grid;gap:1.25rem}
input[type=text],input[type=email],input[type=tel],select,textarea{font:inherit;color:var(--foreground);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:.625rem .75rem;width:100%;min-width:0}
input:hover,select:hover,textarea:hover{border-color:var(--muted-foreground)}
textarea{min-height:6rem;resize:vertical}
.opts{display:flex;flex-wrap:wrap;gap:.625rem 1.5rem}
.opts label{display:flex;gap:.5rem;align-items:flex-start;cursor:pointer;min-width:0}
.opts input,.consent input{width:1.25rem;height:1.25rem;margin:.125rem 0 0;flex:none;accent-color:var(--primary)}
.consent{display:flex;gap:.625rem;align-items:flex-start;font-size:.9375rem}
.err{color:var(--destructive);font-size:.875rem;line-height:1.25rem;font-weight:600}
.err:empty{display:none}
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border:2px solid var(--destructive)}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.status{padding:1rem 1.25rem;border:1px solid var(--primary);border-radius:var(--radius);background:var(--secondary)}
.status.bad{border-color:var(--destructive);background:color-mix(in oklab,var(--destructive) 8%,var(--card))}
.note{font-size:.875rem;line-height:1.25rem;color:var(--muted-foreground)}
.formwrap .contact-alt{margin-top:3rem;border-top:1px solid var(--border);padding-top:2rem}
.formwrap .contact-alt h2{font-size:1.5rem;line-height:2rem}
.formwrap .contact-alt p{margin-top:.5rem;color:var(--muted-foreground)}
.formwrap .contact-alt a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}

/* ---- 404 ---- */
.nf{padding-block:6rem;text-align:center}
.nf h1{font-size:4.5rem;line-height:1}
.nf h2{margin-top:1rem;font-size:1.25rem;line-height:1.75rem}
.nf p{margin-top:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--muted-foreground)}
.nf .btn{margin-top:1.5rem}

/* ---- sm 640 ---- */
@media (min-width:640px){
  .stats .grid{grid-template-columns:repeat(2,1fr)}
  .zones{grid-template-columns:repeat(3,1fr)}
}
/* ---- md 768 ---- */
@media (min-width:768px){
  .page-head .wrap{padding-block:5rem}
  .page-head h1{font-size:3rem;line-height:1.25}
  .hero{grid-template-columns:1.1fr 1fr;padding-block:6rem}
  .hero h1{font-size:3.75rem}
  .two{grid-template-columns:repeat(2,1fr)}
  .cards3{grid-template-columns:repeat(3,1fr)}
  .cta-band .in{flex-direction:row;align-items:center}
  .steps4{grid-template-columns:repeat(4,1fr)}
  .example{grid-template-columns:repeat(2,1fr)}
  .steps-m{grid-template-columns:repeat(4,1fr)}
  .total{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:repeat(2,1fr)}
  .foot .in{grid-template-columns:repeat(3,1fr)}
  .row2{grid-template-columns:1fr 1fr}
}
/* ---- lg 1024 ---- */
@media (min-width:1024px){
  .stats .grid{grid-template-columns:repeat(4,1fr)}
  .plans{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.contact-alt .rows{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.75rem 2.5rem}
.contact-alt .rows span{display:block;font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.18em;color:var(--accent-text)}

/* ---- Preguntes freqüents ---- */
.faq{padding-top:5rem}
.faq h2{font-size:1.875rem;line-height:2.25rem}
.faq .sub{margin-top:.75rem;max-width:42rem;color:var(--muted-foreground)}
.faq .list{margin-top:2rem;border-top:1px solid var(--border);max-width:48rem}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.125rem 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;font-size:1.125rem;line-height:1.75rem;color:var(--primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-weight:400;font-size:1.5rem;line-height:1;color:var(--accent-text)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding-bottom:1.25rem;max-width:42rem;color:var(--muted-foreground)}