/* Columna Digital legal and policy pages in the "Papel" look (Aviso de Privacidad, Términos, Cookies, Compliance & Copyright, Normas
   editoriales, Correcciones, Réplica, Accesibilidad, Republicar). Needs paper.css (colours, title band). Layout only: the page text is
   the approved wording, untouched; public/paper/legal.js adds the table of contents, clause addresses and the history box. */

/* ---- the frame: contents column + document column */
.site-page .pp-legal { position: relative; padding-top: 30px; }
.pp-legal.has-toc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 64px; align-items: start; }
.pp-legal .lg-doc { min-width: 0; max-width: 74ch; color: var(--pp-text); }

/* ---- table of contents */
.lg-toc { position: sticky; top: 58px; z-index: 2; min-width: 0; }
.lg-toc details { max-height: calc(100vh - 82px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 6px 6px 0; }
.lg-toc summary { list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; cursor: pointer;
  padding: 0 0 10px; margin: 0 0 6px; border-bottom: 1px solid var(--pp-hair); position: sticky; top: 0; background: var(--pp-paper); }
.lg-toc summary::-webkit-details-marker { display: none; }
.lg-toc summary span { font: 700 10.5px/1.2 var(--pp-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pp-gold); }
.lg-toc summary small { font: 400 12px/1.2 var(--pp-sans); color: var(--pp-mute); }
.site-page .pp .lg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.lg-toc li { margin: 0; }
.site-page .pp .lg-toc a { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); gap: 0 4px; padding: 6px 8px 6px 10px; margin-left: -1px;
  border-left: 2px solid transparent; text-decoration: none; color: var(--pp-text); font: 400 13.5px/1.4 var(--pp-sans); transition: color .15s, border-color .15s, background-color .15s; }
.site-page .pp .lg-toc a:not(:has(.lg-tn)) { grid-template-columns: minmax(0, 1fr); }
.site-page .pp .lg-toc a:hover { color: var(--pp-ink); background: var(--pp-paper-2); }
.site-page .pp .lg-toc a.is-here { color: var(--pp-ink); font-weight: 600; border-left-color: var(--pp-gold-2); background: var(--pp-paper-2); }
.lg-tn { font: 600 12.5px/1.55 var(--pp-serif); color: var(--pp-gold); font-variant-numeric: tabular-nums; }
.lg-toc a:has(.lg-tn) .lg-tn:not(:empty) { white-space: nowrap; }
/* the clause words of the Terms (Primera, Segunda...) are long: the title goes under them */

/* the Terms count their clauses in words (Primera, Segunda...): the word as a small line over the title */
.site-page .pp .lg-toc--words a { display: block; }
.lg-toc--words .lg-tn { display: block; font: 700 10px/1.4 var(--pp-sans); letter-spacing: .12em; text-transform: uppercase; }
.lg-toc--words .lg-tn:empty { display: none; }

/* ---- meta line: last-updated badge, history link, print */
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 26px; padding: 0 0 18px; border-bottom: 1px solid var(--pp-hair); }
.site-page .pp .lg-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 6px 12px 6px 10px; border: 1px solid var(--pp-edge);
  border-radius: 999px; background: var(--pp-card); font: 600 12.5px/1.2 var(--pp-sans) !important; color: var(--pp-ink) !important; text-align: left; }
.site-page .pp .lg-badge::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--pp-gold-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.site-page .pp .lg-histlink { font: 600 13px/1.2 var(--pp-sans); }
.site-page .pp .lg-print { margin-left: auto; padding: 6px 12px; border: 1px solid var(--pp-edge); border-radius: 3px; background: transparent; color: var(--pp-ink);
  font: 600 12.5px/1.2 var(--pp-sans); cursor: pointer; }
.site-page .pp .lg-print:hover { background: var(--pp-paper-2); }

/* ---- the text */
.site-page .pp-legal .lg-doc > p, .site-page .pp-legal .lg-doc li, .site-page .pp-legal .lg-doc td { font-size: 17px; line-height: 1.75; color: var(--pp-text); hyphens: manual; -webkit-hyphens: manual; }
.site-page .pp-legal .lg-doc > p { margin: 0 0 14px; }
.site-page .pp-legal .lg-doc strong { color: var(--pp-ink); }
.site-page .pp-legal .lg-doc em { color: var(--pp-ink); }
.site-page .pp-legal .lg-doc :is(ol, ul) { margin: 4px 0 18px; padding-inline-start: 26px; color: var(--pp-text); }
.site-page .pp-legal .lg-doc li { margin: 0 0 8px; padding-inline-start: 4px; }
.site-page .pp-legal .lg-doc li::marker { color: var(--pp-gold); font: 600 0.95em var(--pp-serif); }
.site-page .pp-legal .lg-doc code { font-size: 13.5px; }

/* clause headings: number in gold over a serif title */
.site-page .pp-legal .lg-doc > h2 { position: relative; margin: 46px 0 16px; padding: 0 0 10px; font: 700 23px/1.25 var(--pp-serif); color: var(--pp-ink); scroll-margin-top: 64px; }
.site-page .pp-legal .lg-doc > h2:first-child, .site-page .pp-legal .lg-meta + h2 { margin-top: 0; }
.lg-n { display: inline-block; min-width: 1.15em; margin-right: .3em; color: var(--pp-gold); font-variant-numeric: tabular-nums; }
.lg-n--word { display: block; margin: 0 0 4px; font: 700 11px/1.2 var(--pp-sans); letter-spacing: .16em; text-transform: uppercase; }
.site-page .pp-legal .lg-doc > h3 { margin: 28px 0 10px; font: 700 18px/1.3 var(--pp-serif); color: var(--pp-ink); scroll-margin-top: 64px; }

/* numbered sub-clauses: the number hangs in the margin */
.site-page .pp-legal .lg-doc > p.lg-cl { position: relative; padding-inline-start: 3.4em; scroll-margin-top: 64px; }
.lg-cl .lg-num { position: absolute; left: 0; top: 0; width: 3em; font: 600 15px/1.95 var(--pp-serif); color: var(--pp-gold); font-variant-numeric: tabular-nums; }
.lg-h3 .lg-num { color: var(--pp-gold); margin-right: .1em; }
.lg-cl:target, .lg-doc > h2:target, .lg-doc > h3:target { animation: lg-flash 2.4s ease-out 1; }
@keyframes lg-flash { 0%, 30% { background: color-mix(in srgb, var(--pp-gold-2) 18%, transparent); } 100% { background: transparent; } }
html[data-motion="off"] .lg-cl:target, html[data-motion="off"] .lg-doc > :target { animation: none; }

/* in a numbered clause the mark sits under the hanging number (it takes no room in the text) */
.site-page .pp .lg-cl > a.lg-a { position: absolute; left: 0; top: 2.1em; margin: 0; }
/* the link mark after each clause (drawn by CSS: copying the text never picks it up) */
.site-page .pp a.lg-a { display: inline-block; width: 18px; height: 18px; margin-left: 6px; vertical-align: -2px; opacity: 0; text-decoration: none; border-radius: 3px; transition: opacity .15s; }
.lg-a::before { content: ""; display: block; width: 100%; height: 100%; background: var(--pp-gold-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E") center / 15px no-repeat; }
.lg-a.is-copied::after { content: "Enlace copiado"; position: absolute; transform: translate(26px, -22px); padding: 3px 8px; border-radius: 3px; background: var(--pp-ink); color: var(--pp-paper); font: 600 11.5px/1.4 var(--pp-sans); white-space: nowrap; pointer-events: none; }
.lg-doc > :hover > a.lg-a, .site-page .pp a.lg-a:focus-visible, .lg-a.is-copied { opacity: 1; }
@media (hover: none) { .site-page .pp .lg-doc > h2 > a.lg-a { opacity: .55; } }

/* definitions (ol.defs): the defined term in serif */
.site-page .pp-legal .lg-doc ol.defs { list-style: none; padding: 0; margin: 6px 0 22px; border-top: 1px solid var(--pp-hair); }
.site-page .pp-legal .lg-doc ol.defs li { margin: 0; padding: 10px 0 10px; border-bottom: 1px solid var(--pp-hair); font-size: 15.5px; line-height: 1.65; }
.site-page .pp-legal .lg-doc ol.defs li > strong:first-child { font-family: var(--pp-serif); font-size: 16.5px; }
/* third parties (privacy, clause 6): one card each */
.site-page .pp-legal .lg-doc ol.parties { padding-inline-start: 0; list-style: none; display: grid; gap: 10px; }
.site-page .pp-legal .lg-doc ol.parties li { margin: 0; padding: 14px 16px; background: var(--pp-card); border: 1px solid var(--pp-hair); border-left: 3px solid var(--pp-gold-2); font-size: 15px; line-height: 1.65; }
.site-page .pp-legal .lg-doc ol.parties li > strong:first-child { display: block; margin-bottom: 4px; font: 700 16px/1.35 var(--pp-serif); }
.site-page .pp-legal .lg-doc ol.parties em { font-style: normal; font-weight: 600; color: var(--pp-gold); }

/* tables (cookies) */
.pp-legal .table-wrap { overflow-x: auto; margin: 6px 0 22px; border: 1px solid var(--pp-hair); background: var(--pp-card); }
.pp-legal table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; min-width: 560px; }
.pp-legal th:nth-child(1) { width: 25%; } .pp-legal th:nth-child(2) { width: 19%; } .pp-legal th:nth-child(3) { width: 33%; }
.pp-legal th { text-align: left; padding: 10px 12px; font: 700 11px/1.3 var(--pp-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-gold); border-bottom: 2px solid var(--pp-edge); background: var(--pp-paper-2); }
.site-page .pp-legal td { padding: 10px 12px; vertical-align: top; border-bottom: 1px solid var(--pp-hair); font-size: 14px !important; line-height: 1.55 !important; }
.pp-legal tr:last-child td { border-bottom: 0; }
.site-page .pp-legal td:first-child { font: 600 12.5px/1.5 ui-monospace, Menlo, monospace !important; color: var(--pp-ink); overflow-wrap: anywhere; }

/* the change history */
.lg-history { margin: 56px 0 0; padding: 22px 24px 8px; background: var(--pp-card); border: 1px solid var(--pp-hair); position: relative; }
.lg-history::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: url(/brand/footer-gold.webp) 30% 50% / 700px auto, var(--pp-gold-2); }
.site-page .pp-legal .lg-history > h2 { margin: 0 0 12px; padding: 0; font: 700 11px/1.2 var(--pp-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pp-gold); }
.site-page .pp-legal .lg-history > h2::after { display: none; }
.site-page .pp-legal .lg-history ul { list-style: none; margin: 0; padding: 0; }
.site-page .pp-legal .lg-history li { position: relative; margin: 0; padding: 0 0 16px 22px; font-size: 14.5px; line-height: 1.6; }
.lg-history li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--pp-gold-2); }
.lg-history li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 16px; bottom: 0; width: 1px; background: var(--pp-edge); }
.site-page .pp-legal .lg-history li > strong:first-child { display: block; font: 700 14.5px/1.4 var(--pp-serif); }
/* without the script, the heading and list keep a quiet look */
.site-page .pp-legal .lg-doc > h2#historial { margin-top: 56px; }
.site-page .pp-legal .lg-doc > ul.history { font-size: 14.5px; }

/* the DMCA notice form inside the document */
.site-page .pp-legal .lg-doc form { margin: 8px 0 14px; }
.site-page .pp-legal .lg-doc form .btn { align-self: flex-start; min-height: 42px; padding: 0 20px; border: 0; border-radius: 3px; background: var(--pp-wine); color: #fff; font: 700 14px/1 var(--pp-sans); cursor: pointer; }
.site-page .pp-legal .lg-doc .form-note { font-size: 13.5px !important; color: var(--pp-mute) !important; }

/* ---- phones and tablets: contents fold out above the text */
@media (max-width: 1099px) {
  .pp-legal.has-toc { display: block; }
  .lg-toc { position: relative; top: 0; margin: 0 0 22px; }
  .lg-toc details { max-height: none; overflow: visible; padding: 0; border: 1px solid var(--pp-hair); background: var(--pp-card); }
  .lg-toc summary { position: static; margin: 0; padding: 13px 16px; border: 0; background: transparent; }
  .lg-toc summary::after { content: "+"; margin-left: auto; font: 400 20px/1 var(--pp-sans); color: var(--pp-gold); }
  .lg-toc details[open] summary::after { content: "\2212"; }
  .lg-toc details[open] summary { border-bottom: 1px solid var(--pp-hair); }
  .lg-toc ol { padding: 6px 0 8px !important; }
  .site-page .pp .lg-toc a { padding: 8px 16px; }
  .pp-legal .lg-doc { max-width: 72ch; margin: 0 auto; }
}
@media (max-width: 640px) {
  .site-page .pp-legal { padding-top: 20px; }
  .site-page .pp-legal .lg-doc > p, .site-page .pp-legal .lg-doc li { font-size: 16px; line-height: 1.7; }
  .site-page .pp-legal .lg-doc > h2 { font-size: 20.5px; margin-top: 36px; }
  .site-page .pp-legal .lg-doc > p.lg-cl { padding-inline-start: 0; }
  .site-page .pp .lg-cl > a.lg-a { display: none; }
  .lg-cl .lg-num { position: static; display: inline; width: auto; margin-right: .3em; font-size: 15.5px; line-height: inherit; }
  .site-page .pp .lg-print { margin-left: 0; }
  .lg-history { padding: 18px 16px 4px; }
}

/* ---- print: the document only, black on white */
@media print {
  @page { margin: 18mm 16mm; }
  body:has(.pp-legal) > *:not(main), body:has(.pp-legal) header, body:has(.pp-legal) footer, body:has(.pp-legal) nav:not(.lg-toc),
  body:has(.pp-legal) .site-notice, body:has(.pp-legal) #cookie-banner, body:has(.pp-legal) .push-offer,
  .lg-toc, .lg-print, .lg-a, .lg-histlink { display: none !important; }
  body:has(.pp-legal), body:has(.pp-legal) .page-body, body:has(.pp-legal) .page-hero { background: #fff !important; color: #000 !important; }
  body.theme-portal:has(.pp) .page-hero { padding: 0 0 8pt; }
  body.theme-portal:has(.pp) .page-hero::after { display: none; }
  body.theme-portal:has(.pp) .page-hero h1 { color: #000; font-size: 22pt; }
  .pp-legal { --pp-ink: #000; --pp-text: #111; --pp-mute: #444; --pp-gold: #000; --pp-gold-2: #555; --pp-hair: #bbb; --pp-edge: #999; --pp-card: #fff; --pp-paper: #fff; --pp-paper-2: #f2f2f2; }
  .pp-legal.has-toc { display: block; padding: 0; }
  .pp-legal .lg-doc { max-width: none; }
  .site-page .pp-legal .lg-doc > p, .site-page .pp-legal .lg-doc li { font-size: 10.5pt; line-height: 1.5; }
  .site-page .pp-legal .lg-doc > h2 { font-size: 13pt; margin: 16pt 0 6pt; break-after: avoid; }
  .site-page .pp-legal .lg-doc > h2::after { display: none; }
  .site-page .pp-legal .lg-doc > p.lg-cl { break-inside: avoid; }
  .lg-history, .pp-legal .table-wrap, .site-page .pp-legal .lg-doc ol.parties li { break-inside: avoid; box-shadow: none; }
  .lg-history::before { display: none; }
  .site-page .pp a { color: #000; text-decoration: underline; }
  .site-page .pp-legal .lg-doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; overflow-wrap: anywhere; }
}
@media (max-width: 1099px) { .site-page .pp-legal .lg-doc > :is(h2, h3, p) { scroll-margin-top: 84px; } }
.site-page .pp-legal .lg-doc li[id] { scroll-margin-top: 84px; }
.site-page .pp-legal .lg-doc li[id]:target { animation: lg-flash 2.4s ease-out 1; }