/* Páginas de texto del sitio nuevo: Términos y Privacidad (2026-09-21).
   Va DESPUÉS de `nuevo.css` y solo agrega lo propio: la cabecera de documento, el índice lateral
   y la tipografía de lectura. Nav, pie, botones y paleta salen de `nuevo.css` tal cual.

   `.legal-wrap` NO se renombra: `/api/legal/{doc}` lo recorta de esta página para el clickwrap del
   alta (v2 y teléfono), que le pone su propia tipografía. */

/* ── Cabecera del documento ── */
.doc-head{padding:calc(var(--nav-h) + clamp(56px,9vw,120px)) var(--gut) clamp(40px,6vw,72px);border-bottom:1px solid var(--line);
  /* Fondo dorado de la home (2026-09-21): un velo oscuro para que el título se lea encima del oro y
     un degradado abajo que funde la cabecera con el negro de la página. */
  background:
    linear-gradient(180deg,rgba(0,0,0,0) 55%,var(--bg) 100%),
    linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 60%,rgba(0,0,0,0)),
    url(/nuevo/fondo-legal-1672.webp) left center/cover no-repeat,
    var(--bg)}
@media (max-width:900px){ .doc-head{background:
    linear-gradient(180deg,rgba(0,0,0,0) 55%,var(--bg) 100%),
    linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.15) 60%,rgba(0,0,0,0)),
    url(/nuevo/fondo-legal-900.webp) left center/cover no-repeat,
    var(--bg)} }
.doc-head-in{width:min(1200px,100%);margin:0 auto}
.doc-title{font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.04em;font-weight:500;max-width:16ch}
.doc-title .g{background:var(--grad-glow);-webkit-background-clip:text;background-clip:text;color:transparent}
.doc-sub{margin-top:22px;font-size:clamp(16px,1.3vw,19px);color:var(--txt-2);max-width:56ch}
.doc-sub a{color:var(--txt);text-decoration:underline;text-decoration-color:rgba(201,168,76,.5);text-underline-offset:3px}
.doc-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.doc-chip{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;
  font-family:var(--mono);font-size:12px;color:var(--txt-2)}

/* ── Cuerpo: índice a la izquierda, texto a la derecha ── */
.doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,6vw,96px);
  width:min(1200px,calc(100% - 2*var(--gut)));margin:0 auto;padding:clamp(48px,6vw,80px) 0 clamp(80px,10vw,140px)}
.toc{position:sticky;top:calc(var(--nav-h) + 28px);align-self:start;max-height:calc(100vh - var(--nav-h) - 56px);overflow:auto;
  scrollbar-width:thin;scrollbar-color:#2A2A2A transparent}
.toc-h{font-family:var(--mono);font-size:12px;color:var(--txt-3);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:1px solid transparent;font-size:13.5px;line-height:1.35;
  color:var(--txt-3);transition:color .2s,border-color .2s}
.toc a:hover{color:var(--txt-2)}
.toc a.on{color:var(--txt);border-left-color:var(--gold)}

/* ── Tipografía de lectura ── */
.legal-wrap{max-width:72ch;font-size:16px;line-height:1.7;color:var(--txt-2)}
.legal-wrap section{scroll-margin-top:calc(var(--nav-h) + 24px)}
.legal-wrap section + section{margin-top:52px;padding-top:44px;border-top:1px solid var(--line)}
.legal-wrap h2{font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.025em;font-weight:500;color:var(--txt);margin:0 0 18px}
.legal-wrap h2 .n{font-family:var(--mono);font-size:.55em;letter-spacing:0;color:var(--gold);vertical-align:.35em;margin-right:12px}
.legal-wrap h3{font-size:17px;font-weight:500;color:var(--txt);margin:28px 0 8px}
.legal-wrap p{margin:0 0 14px}
.legal-wrap strong{color:var(--txt);font-weight:500}
.legal-wrap a{color:var(--txt);text-decoration:underline;text-decoration-color:rgba(201,168,76,.5);text-underline-offset:3px}
.legal-wrap a:hover{text-decoration-color:var(--gold)}
.legal-wrap ul,.legal-wrap ol{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.legal-wrap li{position:relative;padding-left:22px}
.legal-wrap ul li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;transform:rotate(45deg);background:var(--gold);opacity:.8}
.legal-wrap ol{counter-reset:li}
.legal-wrap ol li{counter-increment:li}
.legal-wrap ol li::before{content:counter(li,lower-alpha) ")";position:absolute;left:0;font-family:var(--mono);font-size:13px;color:var(--gold)}
/* Recuadros: el aviso en mayúsculas de las limitaciones se lee como bloque, no como grito. */
.legal-wrap .aviso{margin:18px 0;padding:18px 20px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2);color:var(--txt-2)}
.legal-wrap .aviso p:last-child{margin-bottom:0}
.legal-wrap .pendiente{color:var(--gold);font-family:var(--mono);font-size:.9em}
.legal-wrap table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14.5px}
.legal-wrap th,.legal-wrap td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:1px solid var(--line)}
.legal-wrap th{font-weight:500;color:var(--txt);font-size:13px;font-family:var(--mono)}

/* ── Cierre: la misma tarjeta de la demo del sitio, en chico ── */
.doc-cta{width:min(1200px,calc(100% - 2*var(--gut)));margin:0 auto clamp(80px,10vw,120px);padding:clamp(28px,4vw,44px);
  border:1px solid var(--line);border-radius:20px;background:var(--bg-2);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.doc-cta h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;font-weight:500}
.doc-cta p{margin-top:8px;color:var(--txt-2)}

@media (max-width:860px){
  .doc{grid-template-columns:1fr}
  .toc{display:none}
}