/* Páginas legales e informativas — términos, privacidad, devoluciones,
   seguridad de pagos. KAN-24/25/26/27.

   POR QUÉ UNA HOJA COMPARTIDA. Las cuatro páginas llevaban su propio bloque
   `<style>` inline con las MISMAS reglas: 70 líneas en términos, 70 en
   privacidad, 97 en devoluciones, 52 en seguridad de pagos. Ya habían
   divergido (sólo términos estilaba los enlaces del cuerpo, así que un enlace
   dentro de privacidad se veía distinto del mismo enlace en términos). Una
   hoja, cacheable, y las diferencias reales de cada página se quedan en su
   propio bloque.

   La forma sale de `FISM Términos.dc.html`: migaja, título grande con su
   sello de última actualización, índice pegajoso a la izquierda y secciones
   numeradas con ficha. Es la única parte del sitio con lectura larga, así que
   la medida de línea y el índice no son adorno: son lo que hace que alguien
   encuentre la cláusula que busca. */

/* `.pl-section-spacing` vale 9rem arriba en desktop, pensado para una portada
   que abre con aire. Aquí ese aire dejaba 144px de vacío ANTES de la migaja, o
   sea el documento empezaba media pantalla más abajo de donde el lector lo
   busca. La comp abre a 44px. Se recorta sólo arriba: el colchón inferior sigue
   sirviendo para separar del pie. */
.lg-page.pl-section-spacing{padding-block:2.5rem 3.5rem}
@media(min-width:768px){.lg-page.pl-section-spacing{padding-block:2.75rem 4.5rem}}

/* ── Cabecera ────────────────────────────────────────────────────────── */
.lg-head{padding-bottom:1.75rem;border-bottom:1px solid var(--pl-border);margin-bottom:2rem}
.lg-crumbs{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.8125rem;color:var(--pl-text-faint,var(--pl-ink-soft));margin-bottom:.75rem}
.lg-crumbs a{color:var(--pl-ink-soft);text-decoration:none}
.lg-crumbs a:hover{color:var(--pl-brand);text-decoration:underline;text-underline-offset:3px}
.lg-crumbs [aria-current]{color:var(--pl-ink);font-weight:600}

.lg-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.lg-title{font-family:var(--font-display,inherit);font-size:clamp(1.75rem, 1rem + 3vw, 2.25rem);line-height:1.08;letter-spacing:-.025em;font-weight:700;color:var(--pl-ink);margin:0 0 .625rem}
.lg-lead{margin:0;font-size:.9375rem;line-height:1.6;color:var(--pl-ink-soft);max-width:39rem;text-wrap:pretty}

/* Sello de última actualización. En un documento legal la fecha NO es un pie
   de página: es lo primero que se comprueba para saber si lo que se lee sigue
   vigente. Por eso sube al encabezado y va en una ficha propia. */
.lg-stamp{flex:none;display:flex;align-items:center;gap:.7rem;background:var(--pl-surface-1);border:1px solid var(--pl-surface-3,var(--pl-border));border-radius:14px;padding:.875rem 1.125rem}
.lg-stamp i{color:var(--pl-brand);font-size:1.05rem}
.lg-stamp-k{font-size:.78125rem;font-weight:700;color:var(--pl-ink);line-height:1.3}
.lg-stamp-v{font-size:.75rem;color:var(--pl-ink-soft);line-height:1.3}

/* ── Rejilla: índice pegajoso + cuerpo ───────────────────────────────── */
.lg-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}
@media(min-width:1024px){.lg-grid{grid-template-columns:250px 1fr;gap:2.75rem}}

/* El índice sólo existe cuando hay columna para él: encajado arriba del texto
   en móvil sería una segunda pantalla de enlaces antes de la primera línea. */
.lg-toc{display:none}
@media(min-width:1024px){
  .lg-toc{display:flex;flex-direction:column;gap:.6rem;position:sticky;top:calc(var(--ds-nav-h,68px) + var(--ds-cintillo-h,0px) + 1.5rem)}
}
.lg-toc-lbl{font-size:.71875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--pl-text-faint,var(--pl-ink-soft))}
/* El <nav> es UN item flex del aside, así que sus enlaces heredaban `inline` y
   el índice salía como un párrafo corrido ("Informacion general Productos y
   precios Proceso…"). La columna tiene que declararse también aquí dentro. */
#lg-toc-list{display:flex;flex-direction:column;gap:.15rem}
.lg-toc a{font-size:.8125rem;line-height:1.45;color:var(--pl-ink-soft);text-decoration:none;padding:.28rem 0;border-left:2px solid transparent;padding-left:.7rem;margin-left:-.7rem;transition:color .2s,border-color .2s}
.lg-toc a:hover{color:var(--pl-brand)}
.lg-toc a[aria-current="true"]{color:var(--pl-brand);font-weight:700;border-left-color:var(--pl-brand)}
.lg-toc a:focus-visible{outline:2px solid var(--pl-brand);outline-offset:2px;border-radius:4px}

.lg-help{background:var(--pl-surface-1);border:1px solid var(--pl-surface-3,var(--pl-border));border-radius:14px;padding:.9375rem;margin-top:.5rem;display:flex;flex-direction:column;gap:.5rem}
.lg-help-t{font-size:.8125rem;font-weight:700;color:var(--pl-ink)}
.lg-help-p{font-size:.75rem;line-height:1.55;color:var(--pl-ink-soft);margin:0}
.lg-help a{font-size:.78125rem;font-weight:700;color:var(--pl-brand);text-decoration:none}
.lg-help a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── Cuerpo del documento ────────────────────────────────────────────── */
/* Sin tarjeta. La versión anterior metía TODO el documento dentro de una caja
   con borde y radio de 28px; a esta longitud eso no lee como tarjeta, lee como
   un marco alrededor de la página entera. La comp lo deja al aire y separa con
   tipografía, que es lo que separa de verdad en lectura larga. */
.lg-body{display:flex;flex-direction:column;gap:1.75rem;counter-reset:lg-sec}

/* Numeración por contador CSS, no a mano ni por JS: los documentos legales se
   editan con el tiempo y una sección insertada en medio renumeraba mal todo lo
   de abajo cuando el número estaba tecleado en el texto. */
.lg-body h2{counter-increment:lg-sec;display:flex;align-items:center;gap:.75rem;
  font-family:var(--font-display,inherit);font-size:1.1875rem;line-height:1.25;font-weight:700;
  color:var(--pl-ink);letter-spacing:-.01em;margin:.75rem 0 0;scroll-margin-top:calc(var(--ds-nav-h,68px) + var(--ds-cintillo-h,0px) + 1.5rem)}
@media(min-width:768px){.lg-body h2{font-size:1.375rem}}
.lg-body h2:first-child{margin-top:0}
.lg-body h2::before{content:counter(lg-sec);flex:none;width:1.75rem;height:1.75rem;
  background:var(--pl-brand-soft);color:var(--pl-brand);border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display,inherit);font-size:.8125rem;font-weight:700}

/* Documentos que NO son articulado. En términos o privacidad el número es
   parte de la cláusula («según el punto 4»); en «Cómo comprar» las secciones
   son temas, no cláusulas, y numerarlas sugiere un orden obligatorio que no
   existe: nadie tiene que leer «formas de pago» antes que «envío». */
.lg-body--plano h2::before{content:none}
.lg-body--plano h2{gap:0}

.lg-body p{font-size:.9375rem;line-height:1.75;color:var(--pl-ink-soft);margin:0;max-width:68ch;text-wrap:pretty}
@media(min-width:768px){.lg-body p{font-size:.96875rem}}

/* Las listas van en caja hundida: dentro de un texto largo una lista suelta se
   confunde con más párrafos, y estas listas son justo lo que el lector viene a
   buscar (plazos, requisitos, qué cubre y qué no). */
/* `:where()` a propósito: deja estas reglas en especificidad CERO para el
   selector envuelto, así una lista con estilo PROPIO de la página gana sin
   pelear. Sin esto, `.lg-body li::before` empataba con
   `.pl-buy-steps > li::before` y, por orden de fuente, borraba los numerales de
   los tres pasos de «Cómo comprar» dejando viñetas en su lugar (visto en el
   navegador, no deducido). El caso se repetirá en cada página que traiga su
   propia lista, así que la salida tiene que estar en la hoja común. */
/* Sólo las listas SIN clase, y con `:where()` para que además pesen cero.
   Las dos guardas responden a dos fallos distintos, los dos vistos en el
   navegador y no deducidos:

   1. `ul:not([class])` — una lista que la página estila ella misma SIEMPRE
      lleva clase. Sin este filtro, el `position:absolute` de esta viñeta se
      colaba en el `::before` de `.pl-buy-steps` (que sólo declaraba contenido
      y color), sacaba el numeral de la rejilla y el título del paso se subía
      encima del número. También le ponía un punto de más a los chips de pago,
      que ya llevan icono.
   2. `:where()` — sin él, `.lg-body li::before` empataba en especificidad con
      `.pl-buy-steps > li::before` y ganaba por orden de fuente.

   Va aquí y no como excepción por página a propósito: el choque se repite en
   cada página que traiga su propia lista. */
.lg-body :where(ul:not([class])){list-style:none;margin:0;padding:1.125rem 1.25rem;display:flex;flex-direction:column;gap:.5625rem;
  background:var(--pl-surface-1);border:1px solid var(--pl-surface-3,var(--pl-border));border-radius:16px;max-width:68ch}
.lg-body :where(ul:not([class]) > li){position:relative;padding-left:1.15rem;font-size:.875rem;line-height:1.65;color:var(--pl-ink-soft)}
.lg-body :where(ul:not([class]) > li)::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:999px;background:var(--pl-brand)}

.lg-body a{color:var(--pl-brand);font-weight:600;text-decoration:none}
.lg-body a:hover{text-decoration:underline;text-underline-offset:3px}
.lg-body strong{color:var(--pl-ink)}

/* Bloque de resumen (dos columnas: lo que sí / lo que hay que saber). Sólo lo
   usa la página que de verdad tiene las dos caras; no se fuerza en las cuatro. */
.lg-summary{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-bottom:2rem}
@media(min-width:768px){.lg-summary{grid-template-columns:1fr 1fr}}
.lg-sum{border-radius:20px;padding:1.625rem;border:1px solid}
.lg-sum-h{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem;
  font-family:var(--font-display,inherit);font-size:1.1875rem;font-weight:700;color:var(--pl-ink)}
.lg-sum-h i{width:2rem;height:2rem;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9375rem}
.lg-sum ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8125rem;background:none;border:0}
.lg-sum li{padding-left:0;display:flex;gap:.7rem;align-items:flex-start;font-size:.84375rem;line-height:1.55}
.lg-sum li::before{content:none}
.lg-sum li i{width:1.1875rem;height:1.1875rem;flex:none;margin-top:.1rem;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:.625rem}
.lg-sum--ok{border-color:#C7E7D4;background:#F5FBF7}
.lg-sum--ok .lg-sum-h i{background:var(--pl-ok)}
.lg-sum--ok li i{background:#DCF3E5;color:var(--ds-ok-strong,#15803D)}
.lg-sum--note{border-color:#EFE0D6;background:#FDF9F6}
.lg-sum--note .lg-sum-h i{background:var(--pl-warn)}
.lg-sum--note li i{background:#FBEADC;color:var(--pl-warn)}
[data-theme="dark"] .lg-sum--ok{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
[data-theme="dark"] .lg-sum--note{border-color:rgba(180,83,9,.35);background:rgba(180,83,9,.08)}

@media(prefers-reduced-motion:reduce){.lg-toc a{transition:none}}