/* La pàgina legal. En fitxer i no en línia: style-src 'self'.
 *
 * Fa servir el sistema de la web -els mateixos tokens, les mateixes dues
 * famílies- però en una sola columna estreta: això es llegeix, no s'ullada.
 */

.cap--legal { justify-content: flex-start; background: var(--fons-3); }
.cap--legal .cap__logo { height: clamp(40px, 5vh, 54px); }
/* El logo de la capçalera es un enllaç a la portada: 44 px de diana, que a
   1280 es quedava en 40 i a 390 en 42. */
.cap--legal a { display: inline-flex; align-items: center; min-height: 44px; }

.legal {
  max-width: 68ch;
  margin: 0 auto;
  padding: clamp(36px, 6vh, 72px) var(--marge) clamp(56px, 9vh, 112px);
  font-size: 16px;
  line-height: 1.75;
  color: var(--tinta-fluixa);
}

.legal h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.08; margin: 0; color: var(--tinta); }
.legal__data { margin: 10px 0 clamp(28px, 4vh, 46px); font-size: 13px; color: var(--tinta-feble); }

.legal h2 {
  font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin: clamp(34px, 5vh, 56px) 0 clamp(12px, 1.6vh, 18px);
}
.legal h3 { font-size: 17px; font-weight: 600; color: var(--tinta); margin: clamp(22px, 3vh, 32px) 0 6px; }
.legal p { margin: 0 0 14px; }
.legal strong { color: var(--tinta); font-weight: 600; }
/* :not(.bo) NO es un adorno. «.legal a» es (0,1,1) i «.bo--ple» (0,1,0),
   aixi que sense aixo el boton del final sortia en terracota SOBRE
   terracota: invisible. Ho va caçar sondas.mjs amb un contrast d'1. */
.legal a:not(.bo) { color: var(--accent); text-underline-offset: 3px; }

/* El telefon i el correu de la fitxa son diana de dit: cadascun va sol al
   seu <dd>, aixi que donar-los 44 px d'alt no trenca cap paragraf. */
.legal__dades a { display: inline-flex; align-items: center; min-height: 44px; }

/* Les dades del titular, en dues columnes: és una fitxa, no un paràgraf. */
.legal__dades { display: grid; grid-template-columns: minmax(0, 13em) 1fr; gap: 8px clamp(16px, 2.4vw, 32px); margin: 0; }
.legal__dades dt { font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); padding-top: 3px; }
.legal__dades dd { margin: 0; }

.legal__tornar { margin-top: clamp(40px, 6vh, 72px); }

@media (max-width: 599px) {
  /* A 375 px, 13em d'etiqueta deixen el valor en una columna de quatre
     caràcters. Una sota l'altra. */
  .legal__dades { grid-template-columns: 1fr; gap: 2px; }
  .legal__dades dd { margin-bottom: 12px; }
}