/*
 * legal.css: la piel de los documentos legales — privacy, terms, cookies, legal, disclaimer y
 * security.
 *
 * POR QUÉ EXISTE: las seis traían cada una su <style> con la paleta vieja (grano de ruido, cursor
 * de mira verde, highlights cian a mano) casi idéntico, con comentarios distintos. Con la landing
 * v3 pasan a UNA piel, como las de acceso tienen assets/auth.css.
 *
 * 🔴 ESTO ES SÓLO PIEL. El texto legal no se toca desde acá (su estado vive en
 * docs/legal-pendientes.md, que no se publica), y un cambio de redacción es una decisión, no un estilo.
 *
 * NI UN COLOR PROPIO: todo es token de theme.css; en el sitio público resuelve a grafito (ADR-0027).
 * USO: <link rel="stylesheet" href="/assets/legal.css"> después de theme.css, y
 *      <script src="/assets/legal.js" defer></script>, que arma el índice lateral.
 */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--bg); color:var(--txt); font-family:var(--font-ui); font-size:var(--fs-15);
  line-height:1.62; font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(90% 60% at 80% 0%,var(--surface) 0%,transparent 60%)}
::selection{background:var(--accent); color:var(--bg)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
/* 📕 Acá había un `#site-nav{position:relative;z-index:50}`. Lo borró el 2026-09-24 el
   arreglo de la barra fija: nav.js ahora declara `#site-nav{position:sticky;top:0;z-index:50}`,
   y ese `relative` tiene la MISMA especificidad. No rompía —el <style> de nav.js se inyecta
   después de los <link>, así que ganaba por orden—, pero era una dependencia silenciosa:
   mover un <link> abajo del <script> habría despegado la barra sin que nada lo dijera. */
#site-footer{position:relative; z-index:1}

/* ── El documento ── */
.legal-wrap{position:relative; z-index:1; max-width:1120px; margin:0 auto;
  padding:clamp(48px,8vh,96px) clamp(18px,4vw,44px) clamp(64px,10vh,120px)}
.legal-badge{display:block; font-size:var(--fs-10); font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent)}
.legal-title{margin:18px 0 0; font-weight:800; font-size:clamp(var(--fs-20),4.4vw,var(--fs-22));
  line-height:1.02; letter-spacing:-.034em; color:var(--txt-hi); text-wrap:balance; max-width:18ch}
.legal-updated{margin:18px 0 0; font-size:var(--fs-10); letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3); font-variant-numeric:tabular-nums}

/* Con índice (lo arma legal.js): dos columnas. Sin JS, el documento se lee igual en una. */
.legal-grid{display:block; margin-top:clamp(40px,6vh,64px); border-top:1px solid var(--line)}
@media(min-width:1000px){
  .legal-grid{display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(40px,6vw,96px)}
}
.legal-indice{display:none}
@media(min-width:1000px){
  .legal-indice{display:block; position:sticky; top:96px; align-self:start; padding-top:28px;
    max-height:calc(100vh - 120px); overflow-y:auto}
}
.legal-indice p{margin:0 0 12px; font-size:var(--fs-9); font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-3)}
.legal-indice ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--line)}
/* Con `.legal-wrap` delante: si no, `.legal-wrap a` (misma especificidad, más abajo) los pinta de blanco y les pone subrayado. */
.legal-wrap .legal-indice a{display:block; padding:6px 0 6px 14px; margin-left:-1px; border-left:1px solid transparent;
  font-size:var(--fs-12); line-height:1.4; color:var(--txt-3); text-decoration:none; border-bottom:0;
  transition:color var(--dur-hover),border-color var(--dur-hover)}
.legal-wrap .legal-indice a:hover{color:var(--txt-hi)}
.legal-wrap .legal-indice a.on{color:var(--accent); border-left-color:var(--accent)}
.legal-cuerpo{min-width:0; max-width:70ch}

/* ── Secciones: el filete separa, no una caja por sección (el patrón .faq de la landing) ── */
.legal-section{padding:28px 0; border-bottom:1px solid var(--line); scroll-margin-top:88px}
.legal-section h2{margin:0 0 14px; font-size:var(--fs-16); font-weight:700; letter-spacing:-.01em;
  color:var(--txt-hi); text-wrap:balance}
.legal-section p{margin:0 0 12px; font-size:var(--fs-14); line-height:1.78; color:var(--txt-2)}
.legal-section p:last-child{margin-bottom:0}
.legal-section strong{font-weight:600; color:var(--txt)}
.legal-section ul{list-style:none; margin:12px 0; padding:0; border-top:1px solid var(--line)}
.legal-section ul li{position:relative; padding:11px 0 11px 22px; border-bottom:1px solid var(--line);
  font-size:var(--fs-14); line-height:1.7; color:var(--txt-2)}
.legal-section ul li::before{content:""; position:absolute; left:2px; top:20px; width:6px; height:6px;
  background:var(--accent)}
.legal-wrap a{color:var(--txt-hi); text-decoration:none; border-bottom:1px solid var(--line2);
  transition:color var(--dur-hover),border-color var(--dur-hover)}
.legal-wrap a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.legal-wrap code{font-family:var(--font-ui); font-size:.9em; padding:1px 6px; background:var(--plot);
  border:1px solid var(--line2); color:var(--txt); font-variant-numeric:tabular-nums}

/* Un recuadro que se destaca: la receta del panel .plan (radio 0, filete de acento arriba) */
.legal-highlight{margin:20px 0; padding:20px 24px; background:var(--surface);
  border:1px solid var(--line2); border-top:2px solid var(--accent)}
.legal-highlight p{margin:0; color:var(--txt)}
/* El aviso de riesgo del disclaimer: misma forma, en rojo porque ALERTA (regla (b): en un
   control o un aviso el color codifica) */
.warning-box{margin:clamp(32px,5vh,48px) 0 0; padding:22px 26px; max-width:70ch;
  background:color-mix(in srgb,var(--red) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--red) 40%,transparent); border-top:2px solid var(--red)}
.warning-box p{margin:0; font-size:var(--fs-14); line-height:1.78; color:var(--txt)}
.warning-box strong{font-weight:600; color:var(--txt-hi)}

.legal-contact{margin-top:36px; padding:22px 26px; border:1px solid var(--line2); background:var(--surface)}
.legal-contact p{margin:0; font-size:var(--fs-14); color:var(--txt-2)}

/* Marcador de redacción pendiente: hueco SIN RELLENAR, ver docs/legal-pendientes.md */
.pend{background:var(--red-lo); border:1px solid var(--red-md); padding:1px 6px; color:var(--red); font-weight:500}