/* =============================================================================
   WaterProof WEB — Documentos legales (/web/terms-of-use/, /web/privacy-policy/).
   Depende de tokens + base + components.

   Son documentos largos —los términos de uso tienen 22 cláusulas y 20.000
   caracteres—, así que la maqueta prioriza dos cosas: una medida de lectura
   corta (no el ancho del contenedor) y un índice lateral fijo que diga en qué
   parte del documento está el lector.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.wpl-hero { padding:56px 0 44px; background:var(--primary-50);
  border-bottom:1px solid var(--border-blue); }
.wpl-hero h1 { color:var(--primary-900); font-size:clamp(28px,3.2vw,40px); line-height:1.2; }
.wpl-hero__meta { margin-top:12px; color:var(--text-3); font-size:var(--fs-sm); font-weight:600; }

/* --- Layout: índice + documento ------------------------------------------- */
.wpl-body { padding:44px 0 88px; }
.wpl-layout { display:grid; gap:44px; align-items:start; }
@media (min-width:960px){ .wpl-layout { grid-template-columns:300px 1fr; } }

/* --- Índice lateral ------------------------------------------------------- */
.wpl-toc h2 { font-size:var(--fs-xl); color:var(--primary-900); margin-bottom:16px; }
.wpl-toc ol { display:grid; gap:10px; counter-reset:clausula; }
.wpl-toc li { counter-increment:clausula; display:flex; gap:10px; align-items:baseline;
  font-size:var(--fs-sm); line-height:1.45; }
.wpl-toc li::before { content:counter(clausula) "."; flex:0 0 auto; color:var(--muted);
  font-weight:700; font-variant-numeric:tabular-nums; }
.wpl-toc a { color:var(--text-3); }
.wpl-toc a:hover { color:var(--blue); text-decoration:none; }
/* La cláusula que se está leyendo, marcada por legal.js. */
.wpl-toc li.is-current a { color:var(--blue-dark); font-weight:700; }
.wpl-toc li.is-current::before { color:var(--blue); }
/* En pantalla ancha el índice acompaña al documento; en móvil va arriba y se
   desplaza con la página, que en un documento largo es lo esperable. */
@media (min-width:960px){
  .wpl-toc nav { position:sticky; top:calc(var(--nav-h) + 24px);
    max-height:calc(100vh - var(--nav-h) - 48px); overflow-y:auto;
    padding-right:8px; }
}

/* --- Documento ------------------------------------------------------------ */
/* 72ch: los párrafos son largos y una línea más ancha se vuelve difícil de
   seguir renglón a renglón. */
.wpl-doc { max-width:72ch; }
.wpl-doc__headline { font-family:var(--wp-font); font-weight:700; font-size:var(--fs-lg);
  color:var(--primary-900); line-height:1.35; padding:18px 20px; margin-bottom:26px;
  background:var(--primary-100); border-left:4px solid var(--blue);
  border-radius:0 var(--rounded-md) var(--rounded-md) 0; }
.wpl-doc__lead { margin-bottom:12px; }
.wpl-doc__lead p { color:var(--text-2); font-size:var(--fs-lg); line-height:1.7; }
.wpl-doc__lead p + p { margin-top:14px; }

/* --- Cláusula ------------------------------------------------------------- */
.wpl-clause { padding-top:30px; scroll-margin-top:calc(var(--nav-h) + 16px); }
.wpl-clause h2 { font-size:var(--fs-xl); color:var(--primary-900); margin-bottom:12px;
  /* Los encabezados vienen en mayúsculas del original; se dejan tal cual porque
     así se citan las cláusulas, pero sin apretar el interletrado. */
  line-height:1.35; }
.wpl-clause p { color:var(--text-2); font-size:var(--fs-md); line-height:1.75; text-align:justify; }
.wpl-clause p + p { margin-top:14px; }
.wpl-clause ul, .wpl-clause ol { margin:14px 0; padding-left:24px; display:grid; gap:8px; }
.wpl-clause ul li { list-style:disc; }
.wpl-clause ol li { list-style:decimal; }
.wpl-clause li { color:var(--text-2); font-size:var(--fs-md); line-height:1.65; }
.wpl-clause h4 { color:var(--primary-900); font-size:var(--fs-md); margin:16px 0 8px; }
.wpl-clause a { color:var(--blue); word-break:break-word; }

/* --- Aviso de cláusulas sin traducir -------------------------------------- */
.wpl-note { margin-top:36px; padding:14px 18px; background:var(--primary-50);
  border:1px dashed var(--border-blue); border-radius:var(--rounded-md);
  color:var(--text-3); font-size:var(--fs-sm); }

/* --- Enlace al otro documento --------------------------------------------- */
.wpl-sibling { margin-top:36px; padding-top:22px; border-top:1px solid var(--border-blue); }
.wpl-sibling a { display:inline-flex; align-items:center; gap:8px; color:var(--primary-900);
  font-weight:700; font-size:var(--fs-md); }
.wpl-sibling a:hover { color:var(--blue); text-decoration:none; }
.wpl-sibling svg { width:16px; height:16px; }