:root {
      --bg: #f5f9fc;
      --text: #1c2b3a;
      --muted: #6c8ca1;
      --accent: #3889c6;
      --card-bg: #e8f4fc;
      --card-border: #173b5f;
      --line: #bcd2e4;
    }

    body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1em;
  line-height: 1.6;
  max-width: 960px;
  margin: auto;
}
    header {
       
      background-image: url('/img/arbre-posta-sol.png');
      background-size: cover;
      background-position: center;
      padding: 40px 20px;
      text-align: center;
      color: white;
        text-shadow: 0 0 5px rgba(0,0,0,0.5);
        border-radius: 15px;
    }

    .logo {
      max-width: 100px;
      margin-bottom: 12px;
    }

    h1 {
      font-size: clamp(28px, 5vw, 40px);
      margin: 0;
    }

    .subtitle {
      font-size: clamp(16px, 2.5vw, 20px);
      color: var(--muted);
      margin-top: 8px;
    }

    .arbre {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 40px;
      padding: 40px 20px;
    }

    .nivell {
      display: flex;
      justify-content: center;
      gap: 24px;
      position: relative;
    }
     /* Permet que elements dins .nivell es moguin a la següent línia si cal */
     .nivell { flex-wrap: wrap; }

     /* Posicionar la primera parella a l'esquerra en aquest nivell especific
       i deixar espai a la dreta perquè la segona parella (absoluta) no solapi */
     .nivell.fills .membre:first-child { margin-right: auto; }

    .nivell::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 32px;
      background: var(--line);
      top: 100%;
    }

    .membre {
  max-width: 120px;
  width: auto;
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 0 5px #b0c7db;
  border: 2px solid #173b5f;
  background-color: #e8f4fc;
  text-align: center;
  transition: box-shadow 0.2s, background 0.2s;
  text-decoration: none;
}

/* Assegurar que els elements .membre posicionin el ::before correctament */
.membre { position: relative; }

/* Salt de línia controlat dins de l'enllaç: usar spans en comptes de <br> */
.membre .line1 { display: inline; }
.membre .line2 { display: block; }

/* Garantir amplada consistent per a parella i evitar trencaments quan hi ha salts */
.nivell .parella .membre { display: inline-block; width: 120px; box-sizing: border-box; vertical-align: middle; }


    .membre:hover {
      background: #b6e1fb;
      box-shadow: 0 0 10px var(--accent);
      z-index: 2;
    }

    .membre::before {
      content: "";
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 2px;
      background: var(--line);
    }

    .arbre > .nivell:first-child .membre::before {
      display: none;
    }

    .nivell.bes-avis { font-size: 1.1em; color: #3b4a6a; }
    .nivell.avis { font-size: 1.1em; font-weight: bold; color: #1a5bf5; }
    .nivell.fills { font-size: 1.1em; color: #63718a; }
    .nivell.nets { font-size: 1em; color: #7a8ca1; }
    .nivell.bes-nets { font-size: 0.95em; color: #8995ac; }

    .membre p {
      margin: 4px 0 0;
      font-size: 0.85em;
      color: #555;
    }

    /* Wrapper per parelles: permet afegir un segon membre posicionat sense moure l'arbre */
    .nivell .parella {
      width: auto;
      position: absolute; /* fora del flux per no empènyer altres elements */
      right: 0; /* col·loca la parella al marge dret del nivell */
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      white-space: nowrap;
      z-index: 2;
    }
    .nivell .parella .membre {
      width: auto;
      box-sizing: border-box;
    }
    .nivell .parella .segon {
      position: absolute;
      top: 50%;
      left: 110%;
      transform: translateY(-50%);
      z-index: 2;
      display: inline-block;
    }

    @media (max-width: 520px) {
      .nivell .parella {
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }
      .nivell .parella .membre {
        width: auto;
      }
      .nivell .parella .segon {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        display: inline-block;
        margin-top: 6px;
        width: 100%;
        box-sizing: border-box;
      }
    }

    /* En pantalles grans, donar espai al costat dret perquè la parella absoluta no surti
       del contenidor ni solapi l'arbre. Ajusta a gust. */
    @media (min-width: 521px) {
      .nivell.fills { padding-right: 160px; }
    }