/* Legal v3 — página completa; una sola hoja para las cuatro políticas, que comparten vista.
   Consume tokens.css + base.css + components.css.
   Fuente visual: Legal.dc.html:188-333 (los valores que el export resuelve en JS, en su
   renderVals, líneas 526-605).

   Tres notas de traducción del template a CSS:

   1. Dos anchos deciden esta página y los dos salen del dc-script: el padding del hero con
      `mob = w < 760` (pagePad, línea 593) y la rejilla más el aside pegajoso con `desk = w >= 1000`
      (legalCols y asidePos, 594-595). Aquí la base es el caso estrecho y hay una media query por
      umbral. Los demás ternarios del dc-script son de otras páginas del export.
   2. Los estados que el template calcula en JS para el aside —fondo, borde, color de texto, color
      de icono y grosor de la fila activa (docs, 600-603)— son aquí una clase,
      .lg-nav__item--active, porque la fila activa la decide la URL visitada y no un estado de
      componente: cada política es una página propia.
   3. Esta página no anima nada por su cuenta: el único reveal del template es el escalonado de la
      rejilla (data-reveal-stagger, línea 197), que mueve modules/reveal.js. */

/* ---------- 1 · hero (Legal.dc.html:188-194) ---------- */
.lg-hero{background:#f7faf8;background-image:radial-gradient(700px 420px at 12% -60px,rgba(127,214,163,.35),rgba(127,214,163,0) 65%),radial-gradient(760px 460px at 88% -80px,rgba(46,139,87,.22),rgba(46,139,87,0) 65%),radial-gradient(1100px 520px at 50% -120px,#e7f0e9,rgba(231,240,233,0) 60%);background-repeat:no-repeat}
/* .container ya pone el padding lateral; aquí se le añade el vertical del template */
.lg-hero__inner{padding:36px clamp(18px,4vw,28px) 40px;display:flex;flex-direction:column;gap:34px;align-items:center;text-align:center}
.lg-hero__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.lg-hero__title{margin:0;font-size:clamp(30px,4.8vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.02em;max-width:720px;text-wrap:balance}
.lg-hero__grad{background:linear-gradient(92deg,#1e5c3a,#2e8b57 55%,#7fd6a3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;margin-right:-.06em}
.lg-hero__lead{margin:0;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-secondary);max-width:560px;text-wrap:pretty}

/* ---------- 2 · rejilla, aside y documento (Legal.dc.html:196-330) ---------- */
.lg-main{background:var(--c-white)}
.lg-main__inner{padding:clamp(32px,4.5vw,55px) clamp(18px,4vw,28px) clamp(64px,9vw,110px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.5vw,44px);align-items:start}

.lg-nav{display:flex;flex-direction:column;gap:6px}
.lg-nav__item{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:var(--r-btn);background:var(--c-white);border:1px solid var(--c-border-chip);transition:all .15s}
.lg-nav__item:hover{border-color:var(--c-border-success)}
.lg-nav__item i{font-size:15px;line-height:1;color:var(--c-muted)}
.lg-nav__text{font-size:13.5px;font-weight:500;color:var(--c-body);line-height:1.35}
.lg-nav__item--active{background:var(--c-tint-badge);border-color:var(--c-border-success)}
.lg-nav__item--active i{color:var(--c-green-text)}
.lg-nav__item--active .lg-nav__text{font-weight:700;color:var(--c-green-text)}

.lg-help{margin-top:14px;padding:14px;border-radius:var(--r-sub);background:var(--c-page);border:1px solid var(--c-border-chip);display:flex;flex-direction:column;gap:7px}
.lg-help__title{font-size:12.5px;font-weight:700;color:var(--c-ink)}
.lg-help__text{font-size:12.5px;color:var(--c-secondary);line-height:1.55}
.lg-help__link{font-size:12.5px;font-weight:600;color:var(--c-green-text);display:inline-flex;align-items:center;gap:6px}
.lg-help__link i{font-size:12px;line-height:1}

/* el template abre un segundo div dentro de la columna solo para apilar el documento
   (líneas 213 y 215); aquí las dos cosas caben en un elemento */
.lg-doc{max-width:780px;width:100%;display:flex;flex-direction:column}
.lg-doc__title{margin:0;font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.02em}

/* ---------- 3 · contenido de BD (esto no sale del template) ----------
   $static_content es el HTML de `pages` para las cuatro políticas en los cuatro idiomas,
   normalizado el 2026-08-19 (cambios ronda 2): sin wrappers Bootstrap ni clases utilitarias —
   h3 de sección, p, ul/ol, strong, a, la tabla de cookies dentro de .table-responsive y las
   imágenes del marcador {{business_address}}. Se estila con la tipografía del documento del
   template (Legal.dc.html:218-244); el respaldo del HTML anterior está en
   `pages_legal_bak_20260819`. */

/* h3 es el encabezado de sección (el título del documento es el h2 de la vista) */
.lg-content h3{margin:34px 0 0;font-size:17.5px;font-weight:700;color:var(--c-ink);line-height:1.35;letter-spacing:-.01em}
.lg-content p{margin:10px 0 0;font-size:15px;line-height:1.75;color:var(--c-body);text-wrap:pretty}
.lg-content ul,.lg-content ol{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.lg-content li{font-size:15px;line-height:1.75;color:var(--c-body);text-wrap:pretty}
.lg-content ol,.lg-content ol li{list-style:decimal}
.lg-content strong,.lg-content b{color:var(--c-ink)}
/* el color lo pone base.css; el subrayado es el de los enlaces internos del documento del
   template (línea 236) */
.lg-content a{text-decoration:underline;overflow-wrap:anywhere}
/* el marcador {{business_address}} inserta una imagen con la ficha de la empresa; el HTML de BD
   la dimensiona por atributo (height="100" en términos, width="350px" en privacidad) y ese tamaño
   legacy se respeta — sin height:auto, que lo pisaría */
.lg-content img{max-width:100%}

/* la política de cookies trae una tabla de cookies (5 columnas) */
.lg-content .table-responsive{overflow-x:auto;margin-top:10px}
.lg-content table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.6;color:var(--c-body)}
.lg-content th,.lg-content td{padding:10px 12px;border:1px solid var(--c-border-chip);vertical-align:top}
.lg-content th{text-align:left;font-weight:700;color:var(--c-ink);background:var(--c-page)}

/* ---------- ancho >= 760 px: el hero recupera su padding grande (Legal.dc.html:593) ---------- */
@media (min-width:760px){
  .lg-hero__inner{padding:clamp(54px,8vw,90px) clamp(18px,4vw,28px) clamp(40px,6vw,64px)}
}

/* ---------- ancho >= 1000 px: dos columnas y aside pegajoso (Legal.dc.html:594-595) ---------- */
@media (min-width:1000px){
  .lg-main__inner{grid-template-columns:250px minmax(0,1fr)}
  .lg-nav{position:sticky;top:96px}
}