/* El estilo de los documentos legales: Términos y Privacidad.
   Uno solo para los dos, con la paleta de la landing. Un documento legal se
   lee, no se recorre: columna angosta, tipografía grande y mucho aire entre
   secciones. */

/* **La tipografía es la del sitio nuevo** (18/09): Rubik en los títulos e
   Inter en el cuerpo. Antes cargaba una Manrope autohospedada que ya no se
   usa en ningún otro lado. La hoja de Google la traen los dos HTML. */

:root{
  --lima:#dbf963; --lima-ink:#14180b;
  --txt:#14161a; --dim:#5b626d; --faint:#6b7280;
  --bg:#ffffff; --panel:#f8f9fa; --line:#e1e4e8;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Un documento legal es todo párrafo: `pretty` evita que la última línea
   quede con una sola palabra, que en una columna angosta pasa seguido. */
p,li{text-wrap:pretty}
body{background:var(--bg);color:var(--txt);
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--lima-ink);text-decoration:underline;text-underline-offset:2px}

.top{border-bottom:1px solid var(--line);padding:18px 0}
.top .wrap{display:flex;align-items:center;justify-content:space-between}
/* El lockup como máscara, igual que en el resto del sitio: un solo archivo y
   toma el color de `background`, así sirve en claro y en oscuro. */
.top .lockup{display:block;height:26px;width:88px;background:var(--txt);
  -webkit-mask:url("img/pionono-lockup.png") left center/contain no-repeat;
  mask:url("img/pionono-lockup.png") left center/contain no-repeat}
.top a{text-decoration:none;color:var(--dim);font-size:14px;font-weight:600}

.wrap{max-width:760px;margin:0 auto;padding:0 24px}

header.doc{padding:56px 0 8px}
header.doc h1{font-family:'Rubik',sans-serif;font-size:38px;line-height:1.1;letter-spacing:-.03em;
  font-weight:800}
header.doc .fecha{color:var(--faint);font-size:14px;margin-top:12px}

/* El aviso de arriba: qué es este documento y a quién le habla. */
.resumen{background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:20px 22px;margin:26px 0 10px;
  font-size:15.5px;color:var(--dim)}
.resumen b{color:var(--txt)}

/* El índice. En un documento de veinte secciones, lo primero que hace falta
   es poder saltar a la que uno vino a leer. */
nav.indice{margin:34px 0 10px;padding:22px 24px;border:1px solid var(--line);
  border-radius:14px}
nav.indice h2{font-family:'Rubik',sans-serif;font-size:14px;letter-spacing:-.01em;
  color:var(--faint);margin-bottom:12px}
nav.indice ol{margin-left:18px;font-size:15px;color:var(--dim)}
nav.indice li{margin:5px 0}
nav.indice a{text-decoration:none;color:var(--dim)}
nav.indice a:hover{color:var(--txt);text-decoration:underline}

section{padding:34px 0 0;scroll-margin-top:24px}
section h2{font-family:'Rubik',sans-serif;font-size:21px;line-height:1.25;letter-spacing:-.02em;
  font-weight:800;margin-bottom:12px}
section h3{font-size:16.5px;font-weight:700;margin:22px 0 8px}
section p{margin:0 0 14px;color:#2b3038}
section ul,section ol{margin:0 0 14px 22px;color:#2b3038}
section li{margin:6px 0}
section b,strong{font-weight:700;color:var(--txt)}

/* Lo que todavía tiene que completar una persona, bien visible para que no se
   publique con un hueco adentro. */
.pendiente{background:#fff6d6;border:1px solid #f0d98a;border-radius:8px;
  padding:2px 7px;font-weight:700;font-size:.95em}

footer{margin-top:60px;border-top:1px solid var(--line);padding:26px 0 60px;
  color:var(--faint);font-size:14px}
footer a{color:var(--dim)}

@media (max-width:620px){
  header.doc{padding-top:38px}
  header.doc h1{font-family:'Rubik',sans-serif;font-size:30px}
  body{font-size:16px}
}

/* ---------- El dedo, en el teléfono (20/09) ----------
   Sale de auditar las catorce pantallas contra Apple HIG: acá los blancos que
   estaban abajo de 44 px eran el lockup, «Volver al sitio» y **cada renglón
   del índice**, que son quince enlaces apilados de 18 px. El índice queda más
   alto, y está bien: es una lista para tocar. */
@media (max-width:899px){
  .top a,.top .lockup{min-height:44px;display:flex;align-items:center}
  nav.indice a{display:flex;align-items:center;min-height:44px}
  nav.indice li{margin:0}
  a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  a[href^="mailto:"]{overflow-wrap:anywhere}
}