/* Páginas legales de Horizun Hub (/legal/terminos/, /legal/privacidad/, /legal/reembolsos/).
   Creadas 2026-10-07 (interventoría #11, #15, #16 y #18).
   Diseño de TEXTO, sobrio: columna de lectura, filetes finos entre secciones y un índice
   lateral en escritorio. Nada de rejillas de tarjetas grises (ver la regla de diseño del
   dueño en public/horizun-group/index.html). */

.legal-layout {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
  padding: 10px 0 40px;
}

/* Índice: lista simple con filete a la izquierda; pegajoso en escritorio. */
.legal-toc { position: sticky; top: 24px; border-left: 2px solid var(--line-2); padding-left: 16px; }
.legal-toc .overline { display: block; margin-bottom: 12px; font-size: 11px; color: var(--muted); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { margin: 0 0 9px; font-size: 14px; line-height: 1.4; }
.legal-toc a { color: var(--ink-2); }
.legal-toc a:hover { color: var(--cyan); }

.legal-doc { max-width: 760px; }
.legal-doc section { border-top: 1px solid var(--line); padding: 26px 0 8px; scroll-margin-top: 20px; }
.legal-doc section:first-child { border-top: 0; padding-top: 0; }
.legal-doc h2 { font-size: clamp(20px, 2.4vw, 24px); margin: 0 0 14px; }
.legal-doc h2 .n { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--teal); margin-right: 10px; letter-spacing: .06em; }
.legal-doc h3 { font-size: 17px; margin: 20px 0 8px; color: var(--ink); }
.legal-doc p, .legal-doc li { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
.legal-doc p { margin: 0 0 14px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 16px; padding-left: 22px; }
.legal-doc li { margin: 0 0 6px; }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--cyan); }
.legal-doc a:hover { text-decoration: underline; }

/* Ficha del responsable: filas con línea fina, sin recuadro. */
.legal-doc .legal-ficha { margin: 4px 0 18px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.legal-ficha li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.legal-ficha li > span:first-child { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }

/* Tabla de encargados: filas con línea fina. Se desplaza dentro de sí misma en el celular. */
.legal-tabla-wrap { overflow-x: auto; margin: 4px 0 18px; }
.legal-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-tabla th { text-align: left; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 14px 10px 0; border-bottom: 1px solid var(--line-2); }
.legal-tabla td { color: var(--ink-2); padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.legal-tabla td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* Nota destacada: filete a la izquierda, sin fondo de tarjeta. */
.legal-nota { margin: 6px 0 18px; padding: 2px 0 2px 18px; border-left: 3px solid var(--teal); }
.legal-nota p:last-child { margin-bottom: 0; }

/* Los enlaces de WhatsApp arrancan con [hidden] (ver legal.js): que ningún display les gane. */
.legal-doc [hidden] { display: none !important; }

.legal-vigencia { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--muted); margin: 0; }

@media (max-width: 860px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
}
@media (max-width: 560px) {
  .legal-ficha li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legal-doc p, .legal-doc li { font-size: 16px; }
}