/* ===========================================================
   Celudig — estilos de las páginas legales
   Se carga DESPUÉS de pro.css y solo agrega lo del documento:
   índice lateral, tarjeta de contenido, tablas y listas de datos.
   No redefine body, fondo, tipografía, nav ni footer: todo eso
   lo sigue poniendo pro.css, para que estas páginas se vean
   igual que el resto del sitio.
   =========================================================== */

:root {
  /* Degradado SOLO para texto. El de marca (--grad) termina en
     naranja #ff7a3d, que sobre el fondo claro da 2.51:1 y no pasa
     el mínimo de 3:1 de WCAG AA. Este llega a 5.01:1. */
  --grad-text: linear-gradient(95deg, #2a6cff 0%, #7a5cff 42%, #c9357f 72%, #c2410c 100%);
  /* Igual, pero un paso más oscuro: va detrás del número blanco de
     cada sección, que es texto pequeño y necesita 4.5:1. Con los
     topes claros del degradado de arriba se quedaba en 4.37:1. */
  --grad-badge: linear-gradient(135deg, #1f57d6 0%, #5f3fd6 50%, #b02d6e 100%);
  /* Enlace dentro del documento: el azul del sitio sobre blanco
     da 4.63:1, suficiente; este es el mismo token. */
  --legal-link: #0062c7;
}

/* El nav de pro.css es fijo: los saltos del índice tienen que
   dejarle ese espacio o el título queda tapado. */
html { scroll-padding-top: calc(var(--ribbon-h) + var(--nav-h) + 1.25rem); }

/* El título hereda .grad de pro.css, pero con los topes legibles */
.legal-head h1 .grad { background-image: var(--grad-text); }
.legal-meta { margin-top: 1.25rem; font-size: .88rem; color: var(--ink-3); }

/* ── Cuerpo: índice + documento ── */
.legal-layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  padding-bottom: 5rem;
}
@media (min-width: 940px) {
  .legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 3rem; }
}

.legal-toc {
  font-size: .88rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.1rem 1rem;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
@media (min-width: 940px) {
  .legal-toc {
    position: sticky;
    top: calc(var(--ribbon-h) + var(--nav-h) + .75rem);
    max-height: calc(100vh - var(--ribbon-h) - var(--nav-h) - 2.5rem);
    overflow-y: auto;
  }
}
.legal-toc > strong {
  display: block;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ink-3);
  margin: 0 .5rem .6rem;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; margin: 0; }
.legal-toc a {
  display: flex;
  gap: .65rem;
  padding: .4rem .5rem;
  border-radius: 10px;
  color: var(--ink-2);
  line-height: 1.35;
}
.legal-toc a::before {
  content: counter(toc);
  color: var(--legal-link);
  font-weight: 600;
  min-width: 1.4em;
}
.legal-toc a:hover { background: rgba(0, 113, 227, .07); color: var(--ink); }

.legal-doc {
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2.75rem 3rem;
  max-width: 820px;
}
@media (max-width: 640px) { .legal-doc { padding: 1.75rem 1.25rem; border-radius: 18px; } }

.legal-doc section + section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.legal-doc h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 .85rem;
  display: flex;
  gap: .7rem;
  align-items: baseline;
}
.legal-doc h2 .n {
  flex: none;
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  background: var(--grad-badge);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  transform: translateY(-2px);
}
.legal-doc h3 { font-size: 1rem; margin: 1.4rem 0 .35rem; }
.legal-doc p, .legal-doc li { font-size: 1rem; color: var(--ink-2); line-height: 1.65; }
.legal-doc p { margin: 0 0 .75rem; }
/* pro.css hace `ul { list-style: none }` para los menús del sitio.
   En un documento legal las viñetas sí hacen falta, así que se
   reponen solo aquí dentro. */
.legal-doc ul { list-style: disc; }
.legal-doc ol { list-style: decimal; }
.legal-doc ul, .legal-doc ol { padding-left: 1.25rem; margin: 0 0 .75rem; }
.legal-doc li { margin-bottom: .35rem; }
.legal-doc li::marker { color: var(--legal-link); }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--legal-link); text-decoration: underline; text-underline-offset: 3px; }

.legal-note {
  background: linear-gradient(100deg, rgba(0, 113, 227, .07), rgba(122, 92, 255, .07));
  border: 1px solid rgba(122, 92, 255, .2);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin: .9rem 0;
}
.legal-note p:last-child { margin-bottom: 0; }

.legal-datos {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.25rem;
  margin: .5rem 0 .75rem;
  font-size: .95rem;
}
.legal-datos dt { font-weight: 600; color: var(--ink); }
.legal-datos dd { margin: 0; color: var(--ink-2); }
@media (max-width: 520px) {
  .legal-datos { grid-template-columns: 1fr; gap: .1rem; }
  .legal-datos dd { margin-bottom: .6rem; }
}

.legal-table-wrap { overflow-x: auto; margin: .6rem 0 .9rem; }
.legal-doc table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 520px; }
.legal-doc th, .legal-doc td {
  text-align: left;
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-2);
}
.legal-doc th { font-weight: 600; color: var(--ink); background: rgba(0, 113, 227, .05); }

/* Cierre: puente al otro documento legal */
.legal-next {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.legal-next p { margin: 0; color: var(--ink-2); font-size: .95rem; }

@media print {
  .ribbon, .nav, .nav-mobile, .legal-toc, .footer, .wa-float, .skip-link, .bg-mesh, .bg-grain { display: none !important; }
  .legal-layout { display: block; padding: 0; }
  .legal-doc { border: 0; padding: 0; background: none; }
}