/* ============================================================================
   legal pages: aviso-legal, privacidad, terminos. One pinned .sheet on the
   desk, same vocabulary as 404.css, just long-form. Nothing to sell here: no
   CTA, no eyebrow, no prop. Read top to bottom, one column, one measure.

   This one stylesheet is loaded by all three pages: each build (--page=
   aviso-legal | privacidad | terminos) copies this file to
   css/sections/pages/<page>.css, since build.mjs loads only the CSS file
   matching --page. Keep the three copies identical; edit this file and
   re-copy, never edit a copy alone.
   ========================================================================= */

.s-legal{
  position:relative;
  padding:calc(var(--gap-section) * 1.2) var(--desk-pad);
  display:grid;
  place-items:center;
}

.s-legal .s-legal-sheet{
  position:relative;
  width:min(760px,100%);
  padding:clamp(28px,4vw,48px);
  display:flex;
  flex-direction:column;
  gap:var(--gap-object);
  transform:rotate(var(--rot,0deg));
}

.s-legal h1{margin:0}

.s-legal .s-legal-updated{
  margin:calc(var(--sp-3) * -1) 0 0;
  color:var(--ink-soft);
}

.s-legal .s-legal-block{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}

.s-legal .s-legal-block h2{margin:0}

.s-legal .s-legal-block p{
  margin:0;
  color:var(--ink-soft);
  max-width:var(--measure);
  white-space:pre-line; /* a body leaf may join several paragraphs with "\n" */
}

.s-legal .s-legal-list{
  margin:0;
  padding-left:1.2em;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  max-width:var(--measure);
}

.s-legal .s-legal-list li{
  color:var(--ink-soft);
}

@media (max-width:899px){
  .s-legal{padding:var(--gap-section) 12px}
  .s-legal .s-legal-sheet{--rot:0deg}
  .s-legal .s-legal-block p,
  .s-legal .s-legal-list{max-width:none}
}