/* ═══════════════════════════════════════════════════════════════
   RM Suite — documentos legales

   Hoja aparte de styles.css: estas páginas no comparten nada con la
   vitrina salvo la cabecera y el pie, y mezclarlas habría dejado
   ambas peor. Un contrato se lee o no sirve: medida corta, jerarquía
   clara y tablas legibles.
   ═══════════════════════════════════════════════════════════════ */

.doc-cab {
  padding: calc(var(--nav-h, 76px) + 64px) 0 48px;
  border-bottom: 1px solid var(--borde, rgba(255,255,255,.09));
}
.doc-cab .rotulo { margin-bottom: 18px; }
.doc-cab .rotulo a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* La vitrina pone todos los h1 en versalitas, que va bien para
   «Construimos tecnología» y fatal para «Acuerdo de Encargo de
   Tratamiento»: un título largo en mayúsculas se lee peor y ocupa el
   doble. Aquí manda la caja mixta. */
.doc-cab h1 {
  font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.06; margin: 0 0 14px;
  text-transform: none;
}
.doc-fecha {
  font-family: var(--mono, monospace); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; opacity: .72;
}

.doc { max-width: 74ch; }
.doc h2 {
  margin: 44px 0 14px; font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 800; letter-spacing: -.02em;
}
.doc h2:first-of-type { margin-top: 0; }
.doc p { margin-bottom: 14px; line-height: 1.78; }
.doc ul { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 9px; }
.doc li { line-height: 1.7; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }

/* El aviso de arriba: dice de qué va el documento en dos líneas, para
   quien no va a leerse las nueve secciones. */
.doc-nota {
  padding: 20px 22px; margin-bottom: 38px;
  border: 1px solid rgba(237, 28, 36, .30); border-left-width: 3px;
  border-radius: 12px; background: rgba(255, 255, 255, .028);
}
.doc-nota p:last-child { margin-bottom: 0; }

/* Las tablas llevan datos que importan —subencargados, plazos,
   créditos—: se desplazan en su caja antes que recortarse. */
.doc-tabla {
  width: 100%; border-collapse: collapse; margin: 6px 0 22px;
  border: 1px solid var(--borde, rgba(255,255,255,.09)); border-radius: 12px;
  overflow: hidden; display: table;
}
.doc-tabla th, .doc-tabla td {
  padding: 12px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--borde, rgba(255,255,255,.09));
  font-size: .9rem; line-height: 1.6;
}
.doc-tabla th {
  font-family: var(--mono, monospace); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255, 255, 255, .04);
}
.doc-tabla tr:last-child td { border-bottom: 0; }

@media (max-width: 720px) {
  .doc-tabla { display: block; overflow-x: auto; white-space: normal; min-width: 0; }
  .doc-tabla thead, .doc-tabla tbody, .doc-tabla tr { display: table; width: 100%; table-layout: fixed; }
}

/* Enlaces legales del pie */
.pie__legales {
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  padding-top: 20px; margin-top: 18px;
  border-top: 1px solid var(--borde, rgba(255,255,255,.09));
}
.pie__legales a {
  font-family: var(--mono, monospace); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  min-height: 44px; display: inline-flex; align-items: center; opacity: .8;
}
.pie__legales a:hover { opacity: 1; }