/* cocotechpro · full d'estils compartit. Els colors i les tipografies
   surten de la línia gràfica de la marca: no n'afegeixis de nous. */

/* ---------- tipografies, servides des d'aquest mateix servidor ----------
   Outfit i Instrument Sans, totes dues amb llicència SIL Open Font 1.1.
   Els arxius i les llicències són a la carpeta /tipografies. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;
  src:url("tipografies/outfit-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:800;font-display:swap;
  src:url("tipografies/outfit-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("tipografies/instrument-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("tipografies/instrument-sans-latin-600-normal.woff2") format("woff2")}

:root{
  --lila:#6E3BD1;
  --groc:#FFC93C;
  --tinta:#171512;
  --paper:#FBF7EE;
  --lila-clar:#F0E7FF;
  --gris:#7A7268;
  --display:"Outfit","Instrument Sans",sans-serif;
  --cos:"Instrument Sans","Outfit",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--tinta);
  font-family:var(--cos);font-size:17.5px;font-weight:400;line-height:1.72;
}
img,svg{display:block;max-width:100%}

/* ---------- tipografia ---------- */
h1,h2,h3,h4,.marca-nom,.xifra,.preu,.etiqueta,.boto{font-family:var(--display);letter-spacing:-.03em}
h1{font-size:clamp(2.3rem,6.2vw,4.3rem);font-weight:800;line-height:1.02;margin:0}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800;line-height:1.08;margin:0 0 1.4rem;max-width:22ch}
h3{font-size:1.25rem;font-weight:800;line-height:1.25;margin:0 0 .6rem}
h4{font-size:1.02rem;font-weight:600;margin:0 0 .5rem}
p{margin:0 0 1.15rem;max-width:56ch}
.gran{font-size:1.22rem;line-height:1.6;max-width:46ch;margin-bottom:1.4rem}
.petit{font-size:.92rem;line-height:1.66;color:var(--gris);max-width:56ch}
.etiqueta{font-size:.8rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--lila);margin:0 0 2rem;display:flex;align-items:center;gap:.65rem}
.etiqueta::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--groc);flex:0 0 auto}
a{color:var(--lila);text-decoration:none;border-bottom:1.5px solid var(--groc)}
a:hover{color:var(--tinta)}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--lila);outline-offset:3px}

/* ---------- estructura ---------- */
.full{padding-left:1.6rem;padding-right:1.6rem}
.centre{max-width:1080px;margin:0 auto}
section{padding:8.5rem 0;position:relative;overflow:hidden;scroll-margin-top:4.5rem}
@media(max-width:640px){section{padding:5rem 0}}

/* fons de secció: mai més de dos colors més el fons */
.fons-lila{background:var(--lila);color:var(--paper)}
.fons-lila h2,.fons-lila h3{color:var(--paper)}
.fons-lila .etiqueta{color:var(--groc)}
.fons-lila a{color:var(--groc);border-color:var(--groc)}
.fons-tinta{background:var(--tinta);color:var(--paper)}
.fons-tinta h2,.fons-tinta h3{color:var(--paper)}
.fons-tinta .etiqueta{color:var(--groc)}
.fons-clar{background:var(--lila-clar)}
.fons-lila .petit,.fons-tinta .petit{color:rgba(251,247,238,.78)}
.fons-tinta .tres,.fons-tinta .tres > div,.fons-tinta .tres > div + div{border-color:rgba(251,247,238,.26)}

/* ---------- barra superior ---------- */
.barra{background:var(--paper);border-bottom:2px solid var(--tinta);position:sticky;top:0;z-index:20}
.barra-int{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:1.4rem;padding:.85rem 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.55rem;border:0;flex:0 0 auto}
.logo svg{width:34px;height:34px}
.marca-nom{font-size:1.35rem;line-height:1;color:var(--tinta)}
.marca-nom b{font-weight:800}
.marca-nom i{font-style:normal;font-weight:600;color:var(--lila)}
.marca-nom sup{font-size:40%;font-weight:600;color:var(--lila);top:-.7em;position:relative;margin-left:.06em}
.menu{display:flex;gap:1.3rem;margin-left:auto;flex-wrap:wrap}
.menu a{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--tinta);border:0;letter-spacing:-.02em}
.menu a:hover{color:var(--lila)}
.idioma{display:flex;border:1.5px solid var(--tinta)}
.idioma a{font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.02em;
  padding:.36rem .62rem;color:var(--tinta);border:0;text-decoration:none;white-space:nowrap}
.idioma a:hover{background:var(--tinta);color:var(--paper)}
@media(max-width:820px){.menu{display:none}}

/* ---------- portada ---------- */
.portada{position:relative;overflow:hidden;padding:7rem 0 6.5rem;scroll-margin-top:4.5rem}
.bombeta-fons{position:absolute;right:-13%;top:-6%;width:min(760px,88vw);opacity:1;pointer-events:none;z-index:0}
.portada .centre{position:relative;z-index:1}
.portada h1{max-width:20ch}
.reclams{display:flex;flex-wrap:wrap;gap:0;margin:3.4rem 0 0;border-top:2px solid var(--tinta)}
.reclam{flex:1 1 220px;border-bottom:2px solid var(--tinta);padding:1.5rem 2rem 1.5rem 0}
.reclam b{font-family:var(--display);font-weight:800;font-size:1rem;display:block;letter-spacing:-.03em}
.reclam span{font-size:.88rem;color:var(--gris)}

/* ---------- botons ---------- */
.accions{display:flex;flex-wrap:wrap;gap:.8rem;margin:2.6rem 0 0}
.boto{display:inline-block;font-weight:600;font-size:1rem;letter-spacing:-.02em;padding:.85rem 1.3rem;border:2px solid var(--lila);background:var(--lila);color:var(--paper);border-bottom:2px solid var(--lila);cursor:pointer}
.boto:hover{background:var(--tinta);border-color:var(--tinta);color:var(--paper)}
.boto.buit{background:none;color:var(--lila)}
.boto.buit:hover{background:var(--tinta);border-color:var(--tinta);color:var(--paper)}
.boto.groc{background:var(--groc);border-color:var(--groc);color:var(--tinta)}
.boto.groc:hover{background:var(--paper);border-color:var(--paper);color:var(--tinta)}

/* ---------- graella de blocs plans ---------- */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid currentColor;margin:3.2rem 0 0}
.tres > div{border-bottom:2px solid currentColor;padding:2.2rem 2.2rem 2.6rem 0}
.tres > div + div{border-left:2px solid currentColor;padding-left:2.2rem}
@media(max-width:820px){
  .tres{grid-template-columns:1fr}
  .tres > div + div{border-left:0;padding-left:0}
}
.fase{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lila);display:block;margin-bottom:.7rem}
.fons-lila .fase,.fons-tinta .fase{color:var(--groc)}

.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3.4rem;margin:3rem 0 0}

/* ---------- llistes ---------- */
ul.punts{list-style:none;padding:0;margin:1rem 0}
ul.punts li{position:relative;padding-left:1.5rem;margin-bottom:.8rem;max-width:52ch;line-height:1.6}
ul.punts li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:50%;background:var(--groc)}
ul.punts.no li::before{background:none;border-top:2px solid var(--gris);border-radius:0;width:.7rem;top:.85em}

/* ---------- taula de serveis ---------- */
.taula{margin:2.2rem 0 0;border-top:2px solid var(--tinta)}
.fila{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:.9rem 0;border-bottom:1px solid rgba(23,21,18,.14)}
.fila span:first-child{max-width:44ch}
.fila .preu{font-family:var(--display);font-weight:800;font-size:1.1rem;white-space:nowrap;letter-spacing:-.03em}
.fila em{font-style:normal;display:block;font-size:.86rem;color:var(--gris)}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;margin:3.2rem 0 0;border:2px solid var(--tinta);background:var(--paper)}
.pla{padding:2.4rem 2rem;display:flex;flex-direction:column}
.pla + .pla{border-left:2px solid var(--tinta)}
@media(max-width:900px){.pla + .pla{border-left:0;border-top:2px solid var(--tinta)}}
.pla.destacat{background:var(--lila);color:var(--paper)}
.pla.destacat h3{color:var(--paper)}
.pla.destacat .preu{color:var(--groc)}
.pla.destacat .petit{color:rgba(251,247,238,.80)}
.pla.destacat ul.punts li::before{background:var(--groc)}
.preu{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.04em;margin:.9rem 0 .1rem;line-height:1}
.preu small{font-family:var(--cos);font-weight:400;font-size:.8rem;letter-spacing:0}
.recomanat{font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--groc);color:var(--tinta);padding:.2rem .45rem;vertical-align:.25em;margin-left:.4rem}
.pla ul.punts{font-size:.94rem;margin-top:1.4rem}

/* ---------- formularis ---------- */
form{margin:2.8rem 0 0;max-width:640px}
.camp{margin-bottom:1.5rem}
label{display:block;font-family:var(--display);font-weight:600;font-size:.86rem;letter-spacing:-.01em;margin-bottom:.5rem}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font-family:var(--cos);font-size:1rem;padding:.7rem .8rem;
  border:2px solid var(--tinta);background:var(--paper);color:var(--tinta);border-radius:0;
}
textarea{min-height:110px;resize:vertical}
.fons-lila label{color:var(--paper)}
.fons-lila input,.fons-lila select,.fons-lila textarea{border-color:var(--paper)}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;line-height:1.5;max-width:56ch}
.consent input{margin-top:.25rem;width:1.1rem;height:1.1rem;accent-color:var(--lila);flex:0 0 auto}
.consent label{font-family:var(--cos);font-weight:400;font-size:.9rem;margin:0}
.parella{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:560px){.parella{grid-template-columns:1fr}}

/* ---------- preguntes ---------- */
details{border-bottom:1px solid rgba(23,21,18,.14);padding:1.5rem 0}
details:first-of-type{border-top:2px solid var(--tinta)}
summary{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--lila);font-weight:800}
details[open] summary::after{content:"–"}
details p{margin:1rem 0 0}

/* ---------- peu ---------- */
.franja{background:var(--groc);color:var(--tinta);padding:3.2rem 0}
.franja .centre{display:flex;flex-wrap:wrap;gap:1.6rem 3rem;align-items:flex-start}
.franja .dades{font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.02em;line-height:1.7}
.franja .dades a{color:var(--tinta);border-color:var(--tinta)}
.baix{background:var(--tinta);color:rgba(251,247,238,.66);padding:1.6rem 0;font-size:.84rem}
.baix .centre{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center}
.baix a{color:rgba(251,247,238,.66);border:0;text-decoration:underline;text-decoration-color:var(--groc)}
.baix a:hover{color:var(--paper)}

.salta{position:absolute;left:-9999px}
.salta:focus{position:static;display:inline-block;padding:.6rem 1rem;background:var(--tinta);color:var(--paper)}
@media print{.barra,.bombeta-fons{display:none}body{background:#fff}}


/* ---------- avís d'estat del projecte ---------- */
.avis-estat{margin:3rem 0 0;padding:1.6rem 1.8rem;background:var(--lila-clar);border-left:6px solid var(--lila);max-width:62ch}
.avis-estat p{margin:0;font-size:.97rem;line-height:1.68;max-width:none}

/* ---------- caixa de la tarifa ---------- */
.caixa-tarifa{margin:3.6rem 0 0;padding:2.2rem 2.2rem 2.4rem;background:var(--lila-clar);max-width:66ch}
.caixa-tarifa p{margin:0;max-width:56ch}

/* ---------- segona bombeta de fons ---------- */
.bombeta-esq{right:auto;left:-15%;top:auto;bottom:-16%;width:min(540px,70vw)}

/* ---------- botó flotant de WhatsApp ---------- */
.wa-flota{
  --bg:var(--groc); --fg:var(--tinta);
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:40;
  display:flex;align-items:center;gap:.6rem;
  background:var(--bg);color:var(--fg);border:2px solid var(--tinta);
  padding:.75rem 1.2rem .75rem .9rem;text-decoration:none;
}
.wa-flota:hover{--bg:var(--tinta);--fg:var(--groc);color:var(--fg)}
.wa-flota svg{width:30px;height:30px;flex:0 0 auto}
.wa-text{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.02em;white-space:nowrap}
@media(max-width:640px){
  .wa-flota{right:1rem;bottom:1rem;padding:.7rem;gap:0}
  .wa-flota svg{width:32px;height:32px}
  .wa-text{display:none}
}
@media print{.wa-flota{display:none}}