/* ==========================================================================
   legal-pricing.css · /privacidad, /terminos y /cookies con el lenguaje de
   /pricing (26-oct-2026).

   SOLO PRESENTACIÓN. El texto legal no se toca (tests/diseno-acceso.test.mjs lo
   compara palabra por palabra); el marcado interior conserva sus clases de
   Tailwind y esta hoja las reinterpreta dentro de .lp-doc: una columna de
   lectura de ~70 caracteres, letra de 16 px con interlineado amplio, los
   títulos de sección con su línea, y un índice fijo a la izquierda en
   escritorio (desplegable arriba en el móvil).

   NI UN #RRGGBB: todo var(--sn-*) de public/css/brand.css. Prefijo lp-.
   ========================================================================== */

html.lp-html { background: var(--sn-bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.lp-html { scroll-behavior: auto; } }

body.lp-body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--sn-bg);
  color: var(--sn-text);
  font-family: var(--sn-font);
  -webkit-font-smoothing: antialiased;
}

.lp-main { position: relative; flex: 1 0 auto; padding: 112px 0 96px; isolation: isolate; overflow-x: clip; }
/* La atmósfera de /pricing. */
.lp-main::before {
  content: ""; position: absolute; inset: -10% -16% auto auto;
  width: 64vw; height: 64vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(closest-side, rgb(var(--sn-accent-rgb) / 0.12), transparent 70%);
  z-index: -1; pointer-events: none;
}

.lp-grid {
  max-width: 1160px; margin: 0 auto; padding: 0 24px; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
}
@media (min-width: 1024px) {
  .lp-grid { grid-template-columns: 250px minmax(0, 72ch); gap: 72px; justify-content: center; }
}

/* --- El índice --------------------------------------------------------------- */
.lp-toc { font-size: 14px; }
@media (min-width: 1024px) {
  .lp-toc { position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 6px; }
}
.lp-toc-box {
  border: 1px solid var(--sn-line); border-radius: 18px; background: var(--sn-surface);
  padding: 4px 16px;
}
@media (min-width: 1024px) { .lp-toc-box { border: 0; background: none; padding: 0; } }
.lp-toc-sum {
  list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--sn-font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sn-accent);
}
.lp-toc-sum::-webkit-details-marker { display: none; }
.lp-toc-sum::after { content: "+"; font-size: 18px; letter-spacing: 0; transition: transform 200ms ease; }
.lp-toc-box[open] .lp-toc-sum::after { transform: rotate(45deg); }
.lp-toc-sum:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; border-radius: 6px; }
.lp-toc-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 0; }
.lp-toc-list a, .lp-toc-otros a {
  display: block; padding: 7px 0 7px 12px; border-left: 1px solid var(--sn-line);
  color: var(--sn-text-muted); text-decoration: none; line-height: 1.4;
}
.lp-toc-list a:hover, .lp-toc-otros a:hover { color: var(--sn-text); border-left-color: var(--sn-accent); }
.lp-toc-list a:focus-visible, .lp-toc-otros a:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 2px; border-radius: 4px; }
.lp-toc-k {
  margin: 24px 0 8px; font-family: var(--sn-font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sn-text-muted);
}
.lp-toc-otros { list-style: none; margin: 0; padding: 0; }
@media (max-width: 1023px) { .lp-toc-k, .lp-toc-otros { display: none; } }

/* --- El documento ------------------------------------------------------------ */
.lp-doc { min-width: 0; color: rgb(var(--sn-text-rgb) / 0.88); }
.lp-doc--gap > * + * { margin-top: 44px; }

/* «LEGAL», en la etiqueta de /pricing. */
.lp-doc [class*="tracking-[0.2em]"] {
  font-family: var(--sn-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sn-accent); margin-bottom: 16px;
}
.lp-doc h1 {
  font-size: clamp(34px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700;
  color: var(--sn-text); margin: 0 0 16px; text-wrap: balance;
}
/* La línea de versión, en mono pequeña. */
.lp-doc h1 + p { font-family: var(--sn-font-mono); font-size: 12px; line-height: 1.7; letter-spacing: 0.02em; color: var(--sn-text-muted); }

.lp-doc section[id] { scroll-margin-top: 96px; }
.lp-doc h2 {
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700;
  color: var(--sn-text); margin: 0 0 16px; padding-top: 32px; border-top: 1px solid var(--sn-line);
}
.lp-doc h3, .lp-doc h4 { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--sn-text); letter-spacing: -0.01em; margin-top: 24px; }

.lp-doc p, .lp-doc li { font-size: 16px; line-height: 1.75; }
.lp-doc p + p { margin-top: 10px; }
.lp-doc ul, .lp-doc ol { padding-left: 4px; }
.lp-doc li + li { margin-top: 6px; }
.lp-doc li::marker { color: var(--sn-accent); }
.lp-doc strong, .lp-doc b, .lp-doc .font-bold, .lp-doc .font-semibold { color: var(--sn-text); }

/* Los colores de Tailwind, a los tokens. */
.lp-doc [class*="text-slate-"], .lp-doc [class*="text-gray-"] { color: inherit; }
.lp-doc .text-slate-50, .lp-doc .text-slate-100 { color: var(--sn-text); }
.lp-doc .text-gray-400, .lp-doc .text-slate-400, .lp-doc .text-slate-500 { color: var(--sn-text-muted); }
.lp-doc a, .lp-doc [class*="text-sky-"] { color: var(--sn-accent); }
.lp-doc a { text-decoration: underline; text-decoration-color: rgb(var(--sn-accent-rgb) / 0.4); text-underline-offset: 3px; overflow-wrap: anywhere; }
.lp-doc a:hover { text-decoration-color: var(--sn-accent); }
.lp-doc a:focus-visible, .lp-doc button:focus-visible { outline: 2px solid var(--sn-accent); outline-offset: 3px; border-radius: 3px; }

/* Las cajas: borde fino y radio generoso, como las tarjetas de /pricing. */
.lp-doc [class*="border-slate-"], .lp-doc [class*="border-gray-"] { border-color: var(--sn-line); }
.lp-doc [class*="bg-slate-9"], .lp-doc [class*="bg-gray-9"] { background: var(--sn-surface); }
.lp-doc .rounded-xl, .lp-doc .rounded-lg, .lp-doc .rounded-2xl { border-radius: 16px; }
.lp-doc [class*="shadow-"] { box-shadow: none; }
.lp-doc [class*="border-sky-"], .lp-doc [class*="border-cyan-"], .lp-doc [class*="border-amber-"], .lp-doc [class*="border-emerald-"] { border-color: rgb(var(--sn-accent-rgb) / 0.4); }
.lp-doc [class*="bg-sky-"], .lp-doc [class*="bg-cyan-"], .lp-doc [class*="bg-amber-"], .lp-doc [class*="bg-emerald-"] { background: var(--sn-accent-soft); }

/* Tablas: se desplazan en horizontal dentro de su caja, nunca la página. */
.lp-doc .overflow-x-auto { -webkit-overflow-scrolling: touch; }
.lp-doc table { width: 100%; border-collapse: collapse; }
.lp-doc th, .lp-doc td { font-size: 14px; line-height: 1.55; padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sn-line); }
.lp-doc th { font-family: var(--sn-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sn-text-muted); font-weight: 500; }
.lp-doc thead, .lp-doc thead tr { background: var(--sn-surface); }

/* Botones del texto (abrir la configuración de cookies). */
.lp-doc button { min-height: 44px; }

/* Los términos traían su índice dentro del texto: con el de la izquierda sobra. */
.lp-doc > section.rounded-xl { display: none; }

@media (max-width: 720px) {
  .lp-main { padding-top: 88px; }
  .lp-grid { padding: 0 16px; }
}