/* ══ Página de privacidad — lo propio de esta página ═══════════════════════
   El header, el menú, el pie, el chip de estado y los botones vienen de
   `heredado.css` (el mismo archivo que usa /gracias/, extraído del
   `estilos.css` de la landing). Acá va sólo el documento: el cuerpo de texto
   legal con la misma tipografía y ritmo de la landing.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La pantalla: el documento ocupa lo que sobra, como el hero de gracias ── */
.pantalla {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@supports (min-height: 100svh) {
  .pantalla { min-height: 100svh; }
}

.pantalla > main {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── El documento ────────────────────────────────────────────────────────── */

.doc {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: var(--s56) var(--s24) var(--s24);
}

.doc__cabecera {
  border-bottom: 1px solid var(--linea);
  padding-bottom: var(--s24);
  margin-bottom: var(--s40);
}

/* El chip es `.parte__marca` de la landing: lavado sólido, sin translúcidos.
   Sobrio: nada de glass ni sombras. */
.doc__cabecera .parte__marca { margin: 0 0 var(--s16); }

.doc__titulo {
  margin: 0;
  color: var(--tinta);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.doc__bajada {
  margin-top: var(--s16);
  max-width: 56ch;
  color: var(--pizarra);
  font-size: var(--t-body);
  line-height: 1.6;
}

.doc__fecha {
  margin-top: var(--s16);
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--pizarra);
}

/* ── El cuerpo del texto ─────────────────────────────────────────────────── */

.doc__cuerpo p,
.doc__cuerpo li {
  font-size: var(--t-body-sm);
  line-height: 1.65;
  color: var(--tinta);
}

.doc__seccion { margin-top: var(--s40); }

.doc__seccion:first-child { margin-top: 0; }

.doc__seccion h2 {
  margin: 0 0 var(--s16);
  font-size: var(--t-heading-sm);
  font-weight: 700;
  line-height: var(--lh-heading-sm);
  color: var(--tinta);
}

.doc__seccion p { margin: var(--s16) 0 0; }

.doc__seccion p + p { margin-top: var(--s12, 12px); }

.doc__seccion ul {
  margin: var(--s12, 12px) 0 0;
  padding-left: 22px;
}

.doc__seccion li { margin-top: var(--s8); }

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

.doc__cuerpo a:hover { color: var(--acento); }

.doc__cuerpo i { color: var(--pizarra); }

/* La tabla de herramientas: la misma línea de la landing — bordes finos,
   sin adornos. En 420 px scrollea adentro de la fila en vez de partirla. */
.doc__tabla {
  width: 100%;
  margin-top: var(--s16);
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.doc__tabla th,
.doc__tabla td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--linea);
}

.doc__tabla thead th {
  font-size: var(--t-caption);
  font-weight: 700;
  color: var(--pizarra);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.doc__tabla tbody th { font-weight: 700; white-space: nowrap; }

.doc__tabla td { color: var(--tinta); }

/* ── Pantallas chicas ────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .doc { padding: var(--s32) var(--s16) var(--s24); }

  .doc__cabecera { margin-bottom: var(--s32); }

  .doc__seccion { margin-top: var(--s32); }

  /* La tabla no puede partir el texto en filas de dos palabras: las columnas
     fijas quedan y el texto de cada celda fluye. */
  .doc__tabla tbody th { white-space: normal; }
}

@media (max-width: 520px) {
  .doc__tabla thead { display: none; }

  .doc__tabla,
  .doc__tabla tbody,
  .doc__tabla tr,
  .doc__tabla th,
  .doc__tabla td {
    display: block;
    width: 100%;
  }

  .doc__tabla tr { border-bottom: 1px solid var(--linea-fuerte); padding: var(--s12, 12px) 0; }

  .doc__tabla th,
  .doc__tabla td { border-bottom: 0; padding: 2px 0 0; }

  .doc__tabla tbody th { padding-bottom: 2px; }
}