/* Documentos legales de K'íiwik — capa delgada sobre el sistema CENOTE.
   NO redefine tokens ni fuentes: los toma de ../style.css, que va enlazado
   antes que este archivo. Aquí solo vive lo que es propio del documento —
   su composición como losa y las reglas de impresión.

   Un documento legal es la forma más pura de lo que el sistema llama losa:
   una plancha de chukum con tinta encima. Antes era la excepción del sitio
   (papel claro, CSS aparte, hex sueltos); ahora es el mismo material que
   una tarjeta, solo que a página completa. Esa es la unificación: no se
   oscureció el documento, se reconoció que el resto ya era del material
   del documento.

   Google Play revisa estas páginas: siguen siendo claras y imprimibles. */

/* La losa del documento vive en el agua, no en el abismo: es un texto
   largo de lectura seguida y le toca la losa más clara de las tres. */
.documento {
  --losa: var(--chukum);
  --losa-hueco: var(--chukum-hueco);
  --losa-filete: var(--chukum-filete);
  --sup: var(--losa);
  --sup-hueco: var(--losa-hueco);
  --sup-filete: var(--losa-filete);
  --sup-borde-ui: var(--acento-piedra);
  --sup-tinta: var(--tinta);
  --sup-tinta-suave: var(--tinta-suave);
  --sup-tinta-meta: var(--tinta-meta);
  --sup-acento: var(--acento-piedra);
  --sup-peso: 420;

  background: var(--sup);
  color: var(--sup-tinta);
  font-weight: var(--sup-peso);
  border-radius: 4px;
  max-width: 46rem;
  margin: 48px auto 96px;
  padding: 72px clamp(28px, 5vw, 60px) 88px;
}
@media (max-width: 720px) {
  /* En angosto la losa ocupa el ancho completo: un margen lateral de 2px
     alrededor de un texto largo no es un encuadre, es una molestia. */
  .documento {
    margin: 0 0 48px;
    border-radius: 0;
    padding: 48px clamp(20px, 6vw, 32px) 64px;
  }
}

.documento h1 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1.1;
  margin: 0 0 8px;
}
.documento h2 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 2.4rem 0 0.8rem;
  color: var(--sup-tinta);
}
.documento p {
  max-width: 68ch; /* §4.3, innegociable */
}
.kicker {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sup-acento);
  margin-bottom: 24px;
}
.fecha {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--sup-tinta-meta);
  margin: 0 0 2rem;
}
/* Marcador de contenido por escribir. Sobrevive porque el sitio se revisa
   buscando "[PENDIENTE" antes de publicar. */
.pendiente {
  background: var(--sup-hueco);
  border: 1px dashed var(--sup-borde-ui);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  color: var(--sup-tinta-suave);
}

/* Los otros dos documentos, al cierre de cada uno. Google Play exige que el
   aviso de privacidad y la ruta de eliminación de datos sean alcanzables, y
   quien llega a uno de los tres suele venir buscando otro: antes cada página
   enlazaba a los demás por su cuenta —privacidad a los dos, eliminación a uno
   solo, términos a ninguno— con un <p style="margin-top"> suelto. Esto lo
   vuelve un componente, así los tres cierran igual.
   Va DENTRO de la losa, separado por un filete: sigue siendo parte del
   documento, no navegación del sitio. */
.otros-documentos {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sup-filete);
}
.otros-documentos p {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sup-tinta-meta);
  margin: 0 0 0.75rem;
}
.otros-documentos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

/* El pie queda FUERA de la losa, sobre la piedra: cierra la página con el
   mismo material con que la abre el nav. */
.pie-doc {
  padding: 0 clamp(28px, 5vw, 60px) 48px;
  max-width: 46rem;
  margin: 0 auto;
  color: var(--sup-tinta-meta);
  font-size: 0.9rem;
}

@media print {
  .nav-cenote,
  .pie-doc,
  .grano {
    display: none;
  }
  body {
    background: #fff;
  }
  .documento {
    background: #fff;
    color: #000;
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }
  .documento p,
  .fecha,
  .kicker {
    color: #000;
  }
  a {
    color: #000;
  }
  /* El bloque de los otros dos SÍ se imprime: en una copia en papel es lo
     único que dice que los otros documentos existen. Su filete sale de una
     variable pensada para fondo oscuro, así que en blanco hay que fijarlo. */
  .otros-documentos {
    border-top-color: #000;
  }
}