/* ── Documentos legales ─────────────────────────────────────────────────────
   Va SIEMPRE después de `portafolio.css`, y solo lleva lo que cambia. Los
   tokens, las @font-face, la base, la cabecera y el pie ya vienen de allí.

   Antes esto era una hoja completa en otro proyecto de Pages, con la paleta
   copiada a mano y una comprobación vigilando que las dos copias no divergieran.
   Al pasar todo a un solo proyecto esa copia desapareció: los colores se definen
   una vez, en `portafolio.css`.

   🔴 Rehecha el 28-sep-2026 con la dirección nueva. Se quedaba con las formas
   viejas —tarjetas de 10 px de radio y avisos de 8— y con los títulos de las
   tarjetas en la sans mientras los encabezados ya iban en slab. Aquí todo va a
   canto vivo y los títulos en slab, como en el resto del sitio.

   ⚠️ Esto es SOLO presentación. El texto de los documentos es el que Play
   aceptó y no se toca: ni una palabra, ni el orden, ni las direcciones.
   ─────────────────────────────────────────────────────────────────────────── */

/* Aquí se LEE, no se mira: 46 rem es la medida correcta para texto largo, y es
   la que ya tenían estos documentos. La portada usa 1180 px, así que hay que
   estrechar `.wrap` a propósito. */
.wrap{max-width:46rem;width:auto;margin:0 auto;padding:0 1.25rem 4rem}

/* …pero la CABECERA no: va al ancho del resto del sitio. Metida en la columna
   de lectura quedaba encajonada y «Eliminar datos» se partía en dos líneas. */
.wrap-ancho{max-width:none;width:min(1180px,calc(100% - 80px));padding:0}

/* Texto más grande y más aireado que en el resto del sitio, por lo mismo.
   `overflow-wrap` porque estos documentos llevan correos y URLs largas, y en
   una pantalla estrecha una sola de ellas ensancha la página entera. */
body{font:400 17px/1.72 var(--sans);overflow-wrap:break-word}

/* El subrayado se pinta en gris y engorda al apuntarlo. En carmesí no valdría:
   sobre negro se queda en 2,48:1 y un subrayado hay que verlo. */
a{color:var(--plata);text-decoration-color:var(--trama-viva);
  text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-color:var(--plata);text-decoration-thickness:2px}

/* ── Texto del documento ────────────────────────────────────────────────── */
h1{font-family:var(--slab);font-size:clamp(1.8rem,4vw,2.3rem);font-weight:700;
  line-height:1.15;letter-spacing:0;margin:0 0 .35rem;text-wrap:balance}
/* `portafolio.css` deja los h2 enormes, que es lo que pide una portada y lo que
   estorba en un documento: aquí son separadores de apartado. */
h2{font-family:var(--slab);font-size:1.18rem;font-weight:600;line-height:1.3;
  letter-spacing:0;margin:2.4rem 0 .7rem;padding-top:1.3rem;
  border-top:1px solid var(--trama)}
h2:first-of-type{border-top:0;padding-top:0}
p,li{margin:0 0 .75rem}
ul,ol{padding-left:1.3rem}
li::marker{color:var(--grafito)}
strong{color:var(--plata);font-weight:600}
.meta{color:var(--grafito);font-size:.9rem;margin-bottom:1.5rem}
.sub{color:var(--grafito);margin:0 0 2.5rem}

/* A canto vivo, como el resto del sitio.
   📌 `aviso` lleva el filete en carmesí aclarado y `destacado` en plata: uno
   advierte y el otro informa, y la diferencia tiene que notarse. El carmesí de
   la marca (#972324) se queda en 2,48:1 y no se vería, así que aquí se usa la
   versión aclarada, que llega a 4,10:1. No es el sello — es un filete. */
.destacado{border-left:2px solid var(--trama-viva);background:#ffffff08;
  padding:.85rem 1.1rem;margin:1rem 0}
.aviso{border-left:2px solid var(--carmesi-vivo);background:#97232412;
  padding:.85rem 1.1rem;margin:1rem 0}

/* ── Tablas: las de la política son largas y se leen en el móvil ─────────── */
table{width:100%;border-collapse:collapse;font-size:.93rem;margin:.6rem 0 1.2rem;
  display:block;overflow-x:auto}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--trama);
  vertical-align:top}
th{color:var(--grafito);font-weight:600;white-space:nowrap}
code{font-family:var(--mono);font-size:.9em;color:var(--plata)}

/* ── Índice de documentos ───────────────────────────────────────────────── */
/* Sin radio y sin salto al apuntar: se levanta el borde, que es el recurso que
   usa la rejilla de proyectos. Un mismo sitio, un mismo gesto. */
ul:has(> li > a.card){list-style:none;padding:0;margin:0;display:grid;gap:.65rem}
a.card{display:block;padding:1rem 1.15rem;background:var(--plano2);
  border:1px solid var(--trama);border-left:2px solid var(--trama-viva);
  text-decoration:none;color:var(--plata);transition:border-color .16s}
a.card:hover{border-left-color:var(--plata)}
a.card b{font-family:var(--slab);font-weight:600;font-size:1.02rem;letter-spacing:0}
a.card span{display:block;color:var(--grafito);font-size:.87rem;margin-top:.25rem}

/* ── Cabecera y pie ─────────────────────────────────────────────────────── */
/* Las etiquetas de aquí son más largas que las del resto del sitio, así que la
   reserva es mayor. La del botón la pide «Go to the site», la más larga: 86 px de
   texto + 40 de relleno + 2 de borde. Con 9,6rem sobraban hasta 50 px por lado. */
header{--nav-ancho:15.5rem;--boton-ancho:8.1rem;margin-bottom:2.6rem}
/* El pie del portafolio es una fila repartida; el de un documento es un bloque
   de texto con la identificación del responsable. */
/* Solo el pie de los SEIS DOCUMENTOS va como bloque de texto: ahí no hay
   navegación, hay identificación del responsable. El índice usa el pie de tres
   piezas del resto del sitio, que viene de `portafolio.css`. */
.doc-footer{display:block;margin-top:3.2rem;padding:1.3rem 0 0;
  border-top:1px solid var(--trama);color:var(--grafito);font-size:.88rem;
  line-height:1.6}
.doc-footer a{color:var(--grafito);text-decoration:none;
  border-bottom:1px solid transparent}
.doc-footer a:hover{color:var(--plata);border-bottom-color:var(--plata)}

/* La columna de lectura es estrecha, así que la cabecera se parte antes que en
   el resto del sitio: cinco piezas no caben en 46 rem. */
@media (max-width:1000px){ .wrap-ancho{width:calc(100% - 44px)} }
@media (max-width:760px){
  header{display:flex;flex-wrap:wrap;gap:14px;padding:18px 0}
  .brand{margin-right:auto}
  header nav{order:3;width:100%;justify-content:space-between;margin:0;
    padding-top:12px;border-top:1px solid var(--trama)}
  .contact-link{justify-self:auto}
}