/* JPJ Enginyer d'Edificació — estil
   Tipografia: Utsaah (si és instal·lada al dispositiu: Windows/Office) i Hind (incrustada) com a reserva.
   Utsaah és petita: size-adjust la iguala a Hind. */
@font-face{font-family:"JPJ Utsaah";src:local("Utsaah"),local("Utsaah Regular");font-weight:400;font-style:normal;size-adjust:118%;}
@font-face{font-family:"JPJ Utsaah";src:local("Utsaah Bold"),local("Utsaah-Bold");font-weight:700;font-style:normal;size-adjust:118%;}
@font-face{font-family:"JPJ Hind";src:url("../fonts/hind-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"JPJ Hind";src:url("../fonts/hind-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"JPJ Hind";src:url("../fonts/hind-latin-600-normal.woff2") format("woff2");font-weight:600 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"JPJ Hind";src:url("../fonts/hind-latin-ext-600-normal.woff2") format("woff2");font-weight:600 700;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --verd:#5FA642;          /* només text gran i elements gràfics */
  --verd-fosc:#3F7A2B;     /* text petit, botons, enllaços */
  --verd-clar:#E8F0E4;
  --taronja:#F95F00;       /* accent, mai text corregut */
  --taronja-suau:#FCCBA8;
  --text:#333333;
  --gris:#595959;
  --linia:#AAAAAA;
  --fons:#F6F9F2;           /* fons pastel verd molt clar */
  --radi:10px;
  --ample:1120px;
  --font:"JPJ Utsaah","JPJ Hind","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--font);font-size:1.125rem;line-height:1.6;color:var(--text);background:var(--fons)}
img{max-width:100%;height:auto;display:block}
a{color:var(--verd-fosc);text-underline-offset:3px}
a:hover{color:#2d5a1f}
:focus-visible{outline:3px solid var(--taronja);outline-offset:3px;border-radius:3px}
h1,h2,h3{font-weight:700;line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2rem,4.6vw,3.2rem);color:var(--verd)}
h2{font-size:clamp(1.6rem,3vw,2.1rem);color:var(--verd)}
h3{font-size:1.25rem;color:var(--verd-fosc)}
p{margin:0 0 1em}

.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--text);padding:.7rem 1rem;z-index:100;border:2px solid var(--taronja)}
.skip:focus{left:8px;top:8px}

/* Capçalera */
.cap{position:sticky;top:0;z-index:50;background:#fff;border-top:3px solid var(--text);border-bottom:1px solid var(--linia)}
.cap__in{max-width:var(--ample);margin:0 auto;padding:.5rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo img{width:180px;height:auto}
.menu{display:flex;align-items:center;gap:1.4rem}
.menu a{color:var(--text);text-decoration:none;font-weight:600;padding:.4rem .1rem;border-bottom:3px solid transparent}
.menu a:hover{border-bottom-color:var(--verd)}
.menu a[aria-current="page"]{border-bottom-color:var(--taronja)}
.menu .idioma{border:1.5px solid var(--verd-fosc);border-radius:999px;padding:.2rem .85rem;color:var(--verd-fosc);font-size:1rem}
.menu .idioma:hover{background:var(--verd-clar)}
.menu-btn{display:none;align-items:center;gap:.5rem;background:var(--verd-clar);color:var(--verd-fosc);border:0;border-radius:999px;padding:.55rem 1rem;font:inherit;font-weight:600;cursor:pointer}
.menu-btn__ico{width:18px;height:2px;background:currentColor;position:relative;display:inline-block}
.menu-btn__ico::before,.menu-btn__ico::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.menu-btn__ico::before{top:-6px}.menu-btn__ico::after{top:6px}

/* Seccions */
.centrat{max-width:var(--ample);margin:0 auto;padding:0 1.25rem}
.hero{padding:clamp(2rem,6vw,4.5rem) 1.25rem 2rem;text-align:center}
.hero__sup{color:var(--verd-fosc);font-weight:600;margin-bottom:1rem}
.hero h1{max-width:20em;margin:0 auto 1.5rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.fotos-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:var(--ample);margin:1.5rem auto 0;padding:0 1.25rem}
.seccio{padding:clamp(2.2rem,5vw,4rem) 0}
.seccio--clara{background:var(--verd-clar)}
.seccio__cap{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.sobre{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.sobre p{font-size:1.2rem}
.etiqueta{display:inline-block;background:#fff;border:1.5px solid var(--verd-fosc);color:var(--verd-fosc);border-radius:999px;padding:.1rem .8rem;font-size:1rem;font-weight:600}

/* Targetes */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;list-style:none;padding:0;margin:0}
.targeta{display:flex;flex-direction:column;background:#fff;border:1px solid #d6d6d6;border-top:4px solid var(--verd);border-radius:var(--radi);padding:1.2rem 1.25rem 1.3rem;height:100%}
.targeta h3{margin-bottom:.4rem}
.targeta h3 a{color:var(--verd-fosc);text-decoration:none}
.targeta h3 a::after{content:"";position:absolute;inset:0}
.targeta{position:relative}
.targeta p{color:var(--text);font-size:1.05rem;margin:0 0 .8rem}
.targeta__peu{margin-top:auto;color:var(--verd-fosc);font-weight:600}
.targeta:hover{box-shadow:0 4px 18px rgba(0,0,0,.09)}
.targeta--projecte .meta{color:var(--gris);font-size:1rem;margin-bottom:.4rem}

/* Imatges i marcadors */
.foto{border-radius:var(--radi);overflow:hidden;background:var(--verd-clar)}
.foto--ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--gris);padding:1rem;border:1.5px dashed var(--linia);background:var(--verd-clar);font-size:1rem}
.galeria{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin:0 0 1rem;padding:0;list-style:none}
.galeria li{flex:0 0 calc((100% - 1.5rem)/3)}
.galeria--4{max-width:640px;margin-left:auto;margin-right:auto}
.galeria--4 li{flex-basis:calc((100% - .75rem)/2)}
.galeria--2 li{flex-basis:calc((100% - .75rem)/2)}
@media (max-width:700px){.galeria--5 li{flex-basis:calc((100% - .75rem)/2)}}
.galeria li{margin:0}
.galeria .zoom{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radi);background:var(--verd-clar)}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.galeria .zoom:hover img{transform:scale(1.04)}
.fase{margin:1.4rem 0 .6rem}
.targeta__img{width:calc(100% + 2.5rem);max-width:none;margin:-1.2rem -1.25rem 1rem;aspect-ratio:4/3;object-fit:cover;border-radius:6px 6px 0 0}
/* Visor de fotos */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;margin:0}
.lb::backdrop{background:rgba(0,0,0,.88)}
.lb__in{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:3.5rem 3.5rem 3rem}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px}
.lb__alt{position:absolute;left:0;right:0;bottom:.6rem;text-align:center;color:#fff;font-size:1rem;padding:0 1rem}
.lb button{position:absolute;background:rgba(255,255,255,.92);color:#222;border:0;border-radius:50%;width:48px;height:48px;font:inherit;font-size:1.6rem;line-height:1;cursor:pointer}
.lb .lb__x{top:max(.6rem,env(safe-area-inset-top));right:max(.6rem,env(safe-area-inset-right))}
.lb .lb__p{left:max(.5rem,env(safe-area-inset-left));top:50%;transform:translateY(-50%)}
.lb .lb__n{right:max(.5rem,env(safe-area-inset-right));top:50%;transform:translateY(-50%)}

/* Pàgines interiors */
.pagina{max-width:860px;margin:0 auto;padding:1.5rem 1.25rem 3rem}
.pagina--ampla{max-width:var(--ample)}
.molla{font-size:1rem;color:var(--gris);margin-bottom:1.2rem}
.molla a{color:var(--verd-fosc)}
.lead{font-size:1.3rem;color:var(--gris)}
.bloc{margin:2.2rem 0;padding-left:1.1rem;border-left:4px solid var(--taronja-suau)}
.llista{list-style:none;padding:0;margin:0}
.llista li{position:relative;padding:.25rem 0 .25rem 1.6rem}
.llista li::before{content:"";position:absolute;left:0;top:.85em;width:.55rem;height:.55rem;background:var(--verd);border-radius:2px}
.llista--check li::before{width:.75rem;height:.4rem;background:none;border-left:3px solid var(--verd-fosc);border-bottom:3px solid var(--verd-fosc);transform:rotate(-45deg);top:.7em;border-radius:0}
.passos{counter-reset:p;list-style:none;padding:0;margin:0}
.passos li{counter-increment:p;position:relative;padding:.35rem 0 .35rem 2.6rem}
.passos li::before{content:counter(p);position:absolute;left:0;top:.3rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--verd-fosc);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1rem}
.nota{background:var(--verd-clar);border-left:4px solid var(--verd-fosc);padding:.8rem 1rem;border-radius:0 var(--radi) var(--radi) 0;font-size:1.05rem}
.avis-exemple{background:#fff4ec;border:1.5px solid var(--taronja);border-radius:var(--radi);padding:.8rem 1rem;font-size:1.05rem;margin-bottom:1.2rem}
.dades{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.4rem;background:var(--verd-clar);padding:1rem 1.2rem;border-radius:var(--radi);margin:1.4rem 0}
.dades dt{font-weight:700;color:var(--verd-fosc)}
.dades dd{margin:0}

/* Botons */
.boto{display:inline-block;background:var(--verd-fosc);color:#fff;text-decoration:none;font-weight:700;padding:.75rem 1.5rem;border-radius:999px;border:2px solid var(--verd-fosc)}
.boto:hover{background:#2d5a1f;border-color:#2d5a1f;color:#fff}
.boto--buit{background:#fff;color:var(--verd-fosc)}
.boto--buit:hover{background:var(--verd-clar);color:var(--verd-fosc)}
.cta-bloc{margin-top:2.5rem}

/* Formulari */
.contacte{display:grid;grid-template-columns:1fr 1.3fr;gap:2.5rem}
.form label{display:block;font-weight:600;margin:.9rem 0 .25rem}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{width:100%;font:inherit;padding:.65rem .8rem;border:1.5px solid var(--gris);border-radius:8px;background:#fff;color:var(--text)}
.form textarea{min-height:9rem;resize:vertical}
.form .req{color:#b00020}
.form .check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;margin-top:1rem}
.form .check input{margin-top:.45rem;width:1.1rem;height:1.1rem}
.form .trampa{position:absolute;left:-9999px}
.form button{margin-top:1.2rem;font:inherit;cursor:pointer}
.estat{margin-top:1rem;padding:.7rem 1rem;border-radius:8px;display:none}
.estat.ok{display:block;background:var(--verd-clar);border-left:4px solid var(--verd-fosc)}
.estat.error{display:block;background:#fdecea;border-left:4px solid #b00020}

/* Peu */
.peu{background:var(--verd-clar);margin-top:3rem;padding:2rem 1.25rem 1rem;font-size:1rem}
.peu__in{max-width:var(--ample);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.peu a{color:var(--verd-fosc)}
.peu__copy{max-width:var(--ample);margin:1.5rem auto 0;border-top:1px solid var(--linia);padding-top:.8rem;color:var(--gris)}

html{-webkit-text-size-adjust:100%}
.cap__in,.pagina,.centrat,.peu,.fotos-hero{padding-left:max(1.25rem,env(safe-area-inset-left));padding-right:max(1.25rem,env(safe-area-inset-right))}
.menu-btn,.menu a,.boto,.form button{min-height:44px}
.menu a{display:inline-flex;align-items:center}
@media (min-width:861px) and (max-width:1100px){.menu{gap:1rem}.logo img{width:160px}.grid{grid-template-columns:repeat(2,1fr)}.fotos-hero{grid-template-columns:repeat(3,1fr);gap:.8rem}}
@media (max-width:860px){
  .menu{max-height:calc(100vh - 4.5rem);overflow:auto}
  .menu a{width:100%;padding:.5rem 0}
  .menu .idioma{width:auto;padding:.4rem 1rem}
  .sobre{gap:1.5rem}
  .grid{grid-template-columns:1fr 1fr}
  .fotos-hero{grid-template-columns:1fr}
  .sobre,.contacte,.peu__in{grid-template-columns:1fr}
  .menu-btn{display:inline-flex}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:flex-start;padding:1rem 1.25rem 1.4rem;border-bottom:1px solid var(--linia);gap:.6rem}
  .menu.obert{display:flex}
  .logo img{width:150px}
}
@media (max-width:560px){
  body{font-size:1.05rem}
  .grid{grid-template-columns:1fr}.dades{grid-template-columns:1fr}
  .galeria{gap:.5rem}.galeria li,.galeria--3 li{flex-basis:calc((100% - .5rem)/2)}
  .hero__cta .boto{width:100%;text-align:center}
  .lb__in{padding:3.5rem .5rem 3rem}
  .lb .lb__p,.lb .lb__n{top:auto;bottom:.5rem;transform:none}
  .bloc{padding-left:.8rem}
}
@media (max-width:360px){.logo img{width:130px}.cap__in{gap:.5rem}}
@media (hover:none){.galeria .zoom:hover img{transform:none}}
@media print{.cap,.menu-btn,.cta-bloc,.skip{display:none}.bloc{break-inside:avoid}}

/* ===== Dinamisme (millora progressiva: sense JS tot es veu igual; respecta prefers-reduced-motion) ===== */
.progres{position:fixed;top:0;left:0;height:4px;width:100%;background:linear-gradient(90deg,var(--verd),var(--taronja));transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.cap{transition:box-shadow .25s}
.cap.cap--scroll{box-shadow:0 3px 14px rgba(0,0,0,.1)}
.cap.cap--scroll .logo img{width:150px}
.logo img{transition:width .25s}
.menu a{transition:border-color .2s,color .2s}
.boto{transition:transform .18s,box-shadow .18s,background .18s}
.boto:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(63,122,43,.3)}
.boto:active{transform:translateY(0)}
.targeta{transition:transform .22s,box-shadow .22s,border-top-color .22s}
.targeta:hover{transform:translateY(-5px);box-shadow:0 10px 26px rgba(0,0,0,.13);border-top-color:var(--taronja)}
.targeta__peu{display:inline-block;transition:transform .2s}
.targeta:hover .targeta__peu{transform:translateX(6px)}
.targeta__img{transition:transform .35s}
.targeta--projecte{overflow:hidden}
.targeta--projecte:hover .targeta__img{transform:scale(1.05)}
.hero__sup{display:inline-block;background:var(--verd-clar);padding:.25rem 1rem;border-radius:999px}
/* Fotos de la portada: lleugerament inclinades, s'ajusten en passar-hi per sobre */
@media (min-width:861px){
  .fotos-hero .foto{transition:rotate .3s,scale .3s,translate .3s,box-shadow .3s,opacity .6s,transform .6s;box-shadow:0 8px 22px rgba(0,0,0,.12)}
  .fotos-hero .foto:nth-child(1){rotate:-2deg}
  .fotos-hero .foto:nth-child(2){translate:0 -10px}
  .fotos-hero .foto:nth-child(3){rotate:2deg}
  .fotos-hero .foto:hover{rotate:0deg;scale:1.04;box-shadow:0 14px 32px rgba(0,0,0,.2);z-index:2;position:relative}
}
.fotos-hero .foto img{transition:transform .5s}
.fotos-hero .foto:hover img{transform:scale(1.06)}
/* Aparició en fer scroll */
html.js .rev{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--r,0s)}
html.js .rev.rev--si{opacity:1;transform:none}
html.js .fotos-hero .foto.rev{transition:opacity .6s ease var(--r,0s),transform .6s ease var(--r,0s)}
html.js .hero__sup,html.js .hero h1,html.js .hero__cta{animation:puja .7s ease both}
html.js .hero h1{animation-delay:.12s}
html.js .hero__cta{animation-delay:.24s}
@keyframes puja{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Subratllat animat als títols de secció */
.seccio h2,.pagina h1{background:linear-gradient(var(--taronja),var(--taronja)) 0 100%/0 4px no-repeat;padding-bottom:.15em;transition:background-size .7s ease .2s}
html:not(.js) .seccio h2,html:not(.js) .pagina h1,.seccio h2.rev--si,.pagina h1.rev--si{background-size:3.2rem 4px}
/* Botó per tornar a dalt */
.amunt{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;border:0;background:var(--verd-fosc);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s,background .2s;z-index:40}
.amunt.amunt--si{opacity:1;transform:none;pointer-events:auto}
.amunt:hover{background:var(--taronja)}
@media (prefers-reduced-motion:reduce){html.js .rev{opacity:1;transform:none}.progres{display:none}.fotos-hero .foto{rotate:none!important;translate:none!important}}

/* Portada: bàner ample amb fosa creuada i zoom lent (sense JS es veu només la primera foto) */
.fotos-hero{display:block}
.banner{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:16/9;max-height:60vh;width:100%;background:var(--verd-clar);box-shadow:0 10px 30px rgba(0,0,0,.15)}
.banner .pas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.3s ease}
.banner .pas--on{opacity:1}
html.js .banner .pas--zoom{animation:zoomlent 9s ease-out both}
@keyframes zoomlent{from{transform:scale(1)}to{transform:scale(1.07)}}
.banner__punts{position:absolute;left:0;right:0;bottom:.8rem;display:flex;justify-content:center;gap:.5rem;z-index:2}
.banner__punts button{width:12px;height:12px;min-height:0;padding:0;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.35);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.banner__punts button[aria-current="true"]{background:#fff}
@media (max-width:700px){.banner{aspect-ratio:4/3;border-radius:10px}}
@media (prefers-reduced-motion:reduce){html.js .banner .pas--zoom{animation:none}.banner .pas{transition:none}}

/* Projectes destacats: 2 targetes que canvien cada setmana (el JS en trià el parell; sense JS, els 2 primers) */
.grid--rotatiu{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto}
.grid--rotatiu:not(.rot-ok)>li:nth-child(n+3){display:none}
.grid--rotatiu>li.rot-fora{display:none}
@media (max-width:560px){.grid--rotatiu{grid-template-columns:1fr}}

/* Qui sóc: foto + text */
.sobre--foto{grid-template-columns:minmax(0,.55fr) 1.45fr;gap:3rem;align-items:center}
.sobre__foto{margin:0;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15);aspect-ratio:1100/1250;background:var(--verd-clar)}
.sobre__foto img{width:100%;height:100%;object-fit:cover}
.sobre__text h2{margin-bottom:.5em}
@media (max-width:860px){.sobre--foto{grid-template-columns:1fr;gap:1.5rem}.sobre__foto{max-width:300px;margin:0 auto}}
.qr{display:block;max-width:200px;margin-top:.5rem}.qr img{width:100%;height:auto;border-radius:12px;border:1px solid var(--linia)}
.ig{display:inline-flex;align-items:center;color:var(--verd-fosc);text-decoration:none}.ig:hover{opacity:.7}.ig-ico{display:block}.peu .ig{margin-top:.2rem}