/* PÚBLICO text pages (privacy) in the "Ruta de público" look; loaded after ruta.css, which holds the fonts, tokens, board header and footer. */
.board .doc-kick { margin: 10px 0 2px; font: 800 15px/1.2 var(--sign); color: var(--paper); }
.doc-h1 { font-size: clamp(56px, 17vw, 150px); margin: 2px 0 14px; }
.board .doc-date { display: inline-block; margin: 0 0 6px; padding: 7px 10px 6px; background: var(--yellow); color: var(--ink); font: 800 15px/1.2 var(--sign); }
.board { padding-bottom: 24px; }

.doc { display: flow-root; background: var(--paper); padding: 0 0 56px; }
.doc article { max-width: 46rem; }
.doc h2 { font: 900 clamp(30px, 8.4vw, 46px)/.95 var(--cond); font-stretch: 66%; text-transform: uppercase; letter-spacing: -.003em; margin: 44px 0 12px; padding-top: 14px; border-top: 4px solid var(--ink); text-wrap: balance; }
.doc p, .doc li { font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.doc strong { color: var(--ink); font-weight: 750; }
.doc ul { list-style: none; margin: 0 0 1em; padding: 0; }
.doc li { position: relative; padding-left: 22px; margin: 0 0 .55em; }
.doc li::before { content: "›"; position: absolute; left: 2px; top: 0; font: 900 20px/1.35 var(--sign); color: var(--red); }
.doc a { color: var(--ink); text-decoration-thickness: 2px; text-decoration-color: var(--red); }
.doc .mail { display: inline-flex; align-items: center; min-height: 44px; font: 800 17px/1.2 var(--sign); word-break: break-all; }

/* the short version: a yellow square block */
.tldr { margin: 0 calc(var(--gutter) * -1); padding: 22px var(--gutter) 10px; background: var(--yellow); }
.doc .tldr-h { margin: 0 0 10px; padding: 0; border: 0; font: 400 34px/1 var(--brush); text-transform: none; color: var(--ink); transform: rotate(-3deg); transform-origin: left center; }
.tldr li { color: var(--ink); font-weight: 600; }
.tldr li::before { color: var(--ink); }

.doc-back { margin: 48px 0 0; }
.doc-back a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 3px solid var(--ink); text-decoration: none; font: 800 16px/1 var(--sign); }
.doc-page .foot { padding-bottom: calc(40px + var(--safe-b)); }

@media (min-width: 720px) {
  .board { border-bottom: 6px solid var(--yellow); }
  .tldr { margin: 34px 0 0; padding: 24px 28px 12px; }
}
@media (min-width: 1000px) {
  .doc { padding-bottom: 96px; }
  .doc article { max-width: none; display: grid; grid-template-columns: minmax(0, 46rem) 340px; column-gap: 72px; align-content: start; }
  .doc article > * { grid-column: 1; }
  .doc article > .tldr { grid-column: 2; grid-row: 1 / span 80; align-self: start; position: sticky; top: 24px; margin-top: 44px; }
  .doc article > .tldr + h2 { margin-top: 44px; }
  .doc p, .doc li { font-size: 19px; }
}
.doc-kick .dot { font-style: normal; color: var(--yellow); display: inline-block; margin: 0 .2em; }