/* Cims — sistema visual v2 ("la serralada de la teva vida").
   Colors dels mapes topogràfics: paper de mapa, tinta de bosc, corba de
   nivell, gel i roca. Una condensada per a noms de cims i cotes (la
   retolació dels mapes) i una serif de lectura per al text.
   El disseny anterior es guarda a l'etiqueta git disseny-v1 i a
   app-classic.html / index-classic.html. */
:root {
  --paper: #edefea;      /* paper de mapa: fred, no crema */
  --paper-2: #e3e7e0;    /* franges, fons de fila, hover */
  --paper-3: #f6f7f4;    /* camps de formulari */
  --ink: #1a1f1c;        /* text */
  --forest: #1e4636;     /* la serralada, els botons */
  --forest-2: #2c5c48;
  --contour: #a0653a;    /* corbes de nivell, fites */
  --glacier: #6e93a8;    /* focus, detalls secundaris */
  --rock: #5b5f5c;       /* text secundari */
  --line: #cfd4cc;       /* línies fines */
  --danger: #a4372b;
  --display: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --text: "Source Serif 4", Georgia, serif;
  --wrap: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--paper); color: var(--ink); font-family: var(--text); font-size: 18px; line-height: 1.6; }
a { color: var(--forest); }
:focus-visible { outline: 3px solid var(--glacier); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums lining-nums; }
[hidden] { display: none !important; }

/* ---------- capçalera ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px;
       padding: 20px 0; flex-wrap: wrap; }
.mark { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: .5px;
        color: var(--forest); text-decoration: none; white-space: nowrap; }
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.nav a, .nav button { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display);
       font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 8px 12px;
       border-radius: 4px; background: none; border: 0; cursor: pointer; }
.nav a:hover, .nav button:hover { background: var(--paper-2); }
.nav svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav .solid { background: var(--forest); color: var(--paper); }
.nav .solid:hover { background: var(--forest-2); }
.nav button:disabled { opacity: .7; cursor: default; }
.pill-pro { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--contour); }

/* ---------- botons ---------- */
.btn { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 20px;
       letter-spacing: .2px; background: var(--forest); color: var(--paper); line-height: 1.2;
       padding: 13px 26px; border-radius: 4px; text-decoration: none; border: 0; cursor: pointer; }
.btn:hover { background: var(--forest-2); }
.btn.quiet { background: none; color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--forest); }
.btn.quiet:hover { background: var(--paper-2); }
.btn.strava { background: #fc4c02; color: #fff; }
.btn.strava:hover { background: #e24300; }
.btn.small { font-size: 17px; padding: 9px 16px; }

/* ---------- títols de secció: frases, no etiquetes ---------- */
h2.sec { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.1;
         letter-spacing: -.2px; margin: 0 0 18px; }
.lede { color: var(--rock); max-width: 60ch; }

/* ---------- la serralada ---------- */
.range { position: relative; }
.range svg { display: block; width: 100%; height: auto; overflow: visible; }
.range .fill { fill: var(--forest); }
.range .ridge { fill: none; stroke: var(--forest-2); stroke-width: 1.5; }
.range .contour { stroke: var(--contour); stroke-width: 1; stroke-dasharray: 2 5; opacity: .75; }
.range .contour-l { fill: var(--contour); font-family: var(--display); font-size: 14px; }
.range .year { stroke: var(--line); stroke-width: 1; }
.range .year-l { fill: var(--rock); font-family: var(--display); font-size: 15px; }
.range .pin { fill: var(--paper); stroke: var(--forest); stroke-width: 2; }
.range .pin-l { font-family: var(--display); font-size: 16px; font-weight: 700; fill: var(--ink); }
.range .pin-s { font-family: var(--display); font-size: 14px; fill: var(--rock); }
.range .pin-l, .range .pin-s, .range .contour-l { paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.range .ms { fill: var(--contour); stroke: var(--paper); stroke-width: 1.5; }
.range .edge { stroke: var(--contour); stroke-width: 1.5; }
.range .hot { fill: var(--contour); }
.range .reveal { animation: reveal 1.8s cubic-bezier(.3,.6,.2,1) both; }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.range .tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper);
              font-family: var(--display); font-size: 16px; padding: 6px 10px; border-radius: 3px;
              white-space: nowrap; transform: translate(-50%, -120%); opacity: 0; transition: opacity .12s; z-index: 5; }
.range .tip.on { opacity: 1; }
.range .tip small { color: #b9c4bc; margin-left: 6px; }
.range .tip em { display: block; font-style: normal; color: #e0b48c; font-size: 14px; }
.range-ctrl { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.range-ctrl .play { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display);
                    font-size: 17px; font-weight: 700; color: var(--forest); background: none; cursor: pointer;
                    border: 0; box-shadow: inset 0 0 0 1.5px var(--forest); border-radius: 4px; padding: 7px 14px; }
.range-ctrl .play:hover { background: var(--paper-2); }
.range-ctrl .play svg { width: 12px; height: 12px; fill: currentColor; }
.range-ctrl input { flex: 1; min-width: 160px; accent-color: var(--forest); }
.range-ctrl .readout { font-family: var(--display); font-size: 17px; color: var(--rock); min-width: 15ch; }
.range-cap { color: var(--rock); font-size: 15px; font-style: italic; margin-top: 8px; }

footer.foot { margin: 80px 0 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px;
              color: var(--rock); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
footer.foot a { color: var(--rock); }
.pwr-logo { height: 18px; width: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { padding: 0 18px; }
  h2.sec { font-size: 28px; }
  .range-ctrl .readout { min-width: 0; width: 100%; }
}