@font-face { font-family:"Alegreya"; src:url("fonts/Alegreya-variable.ttf"); font-weight:400 800; font-display:swap; }
  @font-face { font-family:"Source Sans 3"; src:url("fonts/SourceSans3-Regular.ttf.woff2") format("woff2"); font-weight:400; font-display:swap; }
  @font-face { font-family:"Source Sans 3"; src:url("fonts/SourceSans3-Semibold.ttf.woff2") format("woff2"); font-weight:600; font-display:swap; }

  :root{
    --petroli:#325b74; --fum:#211F1C; --paper:#F6F4EF; --blanc:#FFFFFF;
    --gris-text:#57606a; --filet:#DDD8CE;
    --serif:'Alegreya', Georgia, 'Times New Roman', serif;
    --sans:'Source Sans 3', -apple-system, 'Segoe UI', system-ui, sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{font-size:112.5%} /* 18px de base: tot el rem escala d'aquí */
  body{background:var(--paper);color:var(--fum);font-family:var(--sans);line-height:1.6}
  /* .wrap només mana en horitzontal (longhands): el padding VERTICAL el posen header/section,
     que són selectors d'element i perdrien contra la classe si aquí hi hagués el shorthand. */
  .wrap{max-width:680px;margin:0 auto;padding-left:24px;padding-right:24px}
  a{color:var(--petroli)}

  header{padding:40px 0 56px;text-align:center}
  .idioma{text-align:right;font-size:.85rem;margin-bottom:24px}
  .idioma a{color:var(--gris-text);text-decoration:none;border-bottom:1px solid var(--filet)}
  .idioma a:hover{color:var(--petroli);border-color:var(--petroli)}
  .enso{width:96px;height:96px;margin:0 auto 20px}
  h1{font-family:var(--serif);font-weight:600;font-size:2.4rem;color:var(--fum);letter-spacing:.01em}
  .tagline{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--petroli);margin-top:8px}
  .hero-text{margin:28px auto 0;max-width:34em;font-size:1.08rem}
  .cta{display:inline-block;margin-top:28px;background:var(--petroli);color:var(--blanc);
       text-decoration:none;padding:12px 28px;border-radius:4px;font-weight:600}
  .cta:hover{background:#28495d}

  section{padding:40px 0 24px}
  section + section{padding-top:24px} /* entre seccions menys salt que hero→primera */
  h2{font-family:var(--serif);font-weight:600;font-size:1.6rem;color:var(--petroli);margin-bottom:24px}
  .servei{margin-bottom:28px}
  .servei h3{font-family:var(--serif);font-weight:600;font-size:1.2rem;margin-bottom:6px}
  .servei p{color:var(--fum)}

  .confianca p{margin-bottom:16px}
  .confianca .destacat{font-family:var(--serif);font-size:1.15rem;color:var(--petroli)}

  .contacte{text-align:center}
  .contacte .mail{font-family:var(--serif);font-size:1.4rem;font-weight:600;display:inline-block;margin:12px 0}
  .contacte .on{color:var(--gris-text);font-size:.95rem}

  footer{padding:32px 0;text-align:center}
  .punxo{display:inline-flex;align-items:center;gap:8px;background:var(--petroli);
         border-radius:13px;height:26px;padding:0 12px 0 5px;text-decoration:none}
  .punxo svg{width:17px;height:17px;display:block}
  .punxo span{font-family:var(--serif);font-size:13px;color:var(--blanc);line-height:1}
  footer .peu{color:var(--gris-text);font-size:.85rem;margin-top:14px}