/*
  El aviso de privacidad y la política de cookies.

  Orden de carga: `marca.css` → `landing.css` → este. **Los tres, en ese orden.** De
  `landing.css` salen la barra de navegación (`.nav`, `.menu`) y el pie (`.pie`), que son
  literalmente los mismos de la portada: no se duplican acá para que no se separen con el
  tiempo. Este archivo va al final y gana en lo que se pisan — sobre todo la tipografía del
  cuerpo, que acá es de documento y no de página de venta.

  Lo propio de estas dos páginas es una columna angosta con medida de línea de texto largo:
  son documentos para leerse, no para recorrerse con el pulgar.
*/

.documento {
  max-width: 680px;
  margin: 0 auto;
  padding: 34px var(--margen) 60px;
}

/*
  La barra es `sticky`, así que sin esto un salto desde el índice deja el título tapado. En la
  portada el equivalente es `section[id]`; acá las anclas son los `<h2>` numerados.
*/
h2[id], #contenido { scroll-margin-top: 76px; }

h1 {
  font-size: clamp(27px, 5.4vw, 36px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.7px;
  margin: 0 0 10px;
}

.fecha {
  font-size: 14px;
  color: var(--texto-tenue);
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--borde);
}

h2 {
  font-size: 21px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 38px 0 12px;
}

h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }

p { margin: 0 0 16px; color: var(--texto-suave); }
p.destacado { color: var(--texto); }

ul, ol { margin: 0 0 18px; padding-left: 22px; color: var(--texto-suave); }
li { margin-bottom: 9px; }
li > strong { color: var(--texto); font-weight: 500; }

a { color: var(--acento); text-underline-offset: 3px; }

/* Índice de secciones. */
.indice {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 20px;
  margin: 0 0 34px;
}

.indice h2 {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--texto-tenue);
  margin: 0 0 10px;
}

.indice ol { margin: 0; font-size: 15px; }
.indice li { margin-bottom: 5px; }

/* Marca los datos sin llenar: rojo y monoespaciada para que no se cuelen a producción. */
.pendiente {
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: 0.92em;
  color: var(--acento);
  background: var(--sobre-acento);
  border: 1px dashed var(--acento);
  border-radius: 5px;
  padding: 1px 6px;
}

.tabla-envoltura { overflow-x: auto; margin: 0 0 20px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }

th, td {
  text-align: left;
  padding: 11px 13px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}

thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-tenue);
  font-weight: 500;
  border-bottom-width: 2px;
}

td { color: var(--texto-suave); }

/*
  El pie entero viene de `landing.css`. Lo único que hay que deshacer es su hueco de móvil:
  allá reserva 110px para la barra fija del CTA, que en estas dos páginas no existe — sin esto
  el documento termina en un vacío que parece un error de maquetación.
*/
@media (max-width: 720px) {
  .pie { padding-bottom: 40px; }
}