/* =========================================================
   JICALAB — PÁGINAS LEGALES
   /aviso-legal/ · /condiciones-de-venta/ · /privacidad/ · /cookies/
   Textos literales de jicalab.com con estructura de lectura:
   - cabecera verde con pills para moverse entre los cuatro textos;
   - índice generado desde los h2 (lateral fijo en escritorio, desplegable en móvil y tablet);
   - columna de lectura de ~75 caracteres por línea y tarjeta de ayuda a la derecha cuando hay sitio.
   Depende de jicalab.css (tokens, .pill, .help-card, .link-inline, .table, .todo).
   Prefijo de clases propias: lg-
   ========================================================= */

/* ---------- Cabecera: navegación entre los textos legales (pills claras sobre verde) ---------- */
.lg-nav { padding-bottom: clamp(24px, 3vw, 36px); }
.lg-nav .pill { border-color: rgb(255 255 255 / .3); color: var(--white); }
.lg-nav .pill:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .7); color: var(--white); }
.lg-nav .pill[aria-current="page"] { background: var(--white); border-color: var(--white); color: var(--green-deep); }
/* Móvil: 2 × 2 con columnas a la medida del texto (se reparten el sobrante), cada pill en una sola línea:
   «Aviso legal» + «Condiciones de venta», «Privacidad» + «Cookies» */
@media (max-width: 760px) {
  .lg-nav .pills { display: grid; grid-template-columns: auto auto; gap: 8px; }
  .lg-nav .pill { width: 100%; min-height: 44px; justify-content: center; padding-inline: 8px; white-space: nowrap; }
}
@media (max-width: 359px) { .lg-nav .pill { font-size: 11px; letter-spacing: .05em; padding-inline: 6px; } }

/* ---------- Rejilla: índice · texto · ayuda ---------- */
.lg-main.section { padding-top: clamp(36px, 5vw, 80px); }
.lg-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.lg-aside, .lg-side { display: none; min-width: 0; }
.lg-doc { min-width: 0; max-width: 40em; font-size: 16px; } /* ~75 caracteres por línea (1ch de DM Sans mide 0,69em: 70ch serían ~100 caracteres) */
@media (min-width: 1600px) { .lg-doc { font-size: 17px; } }

/* Tablet ancha: texto + ayuda; el índice va como desplegable arriba del texto */
@media (min-width: 900px) and (max-width: 1100px) {
  .lg-layout { grid-template-columns: minmax(0, 1fr) clamp(284px, 28vw, 300px); column-gap: clamp(32px, 4vw, 48px); } /* ayuda con filas en una línea */
  .lg-side { display: block; }
}
/* Escritorio: índice lateral fijo · texto · ayuda */
@media (min-width: 1101px) {
  .lg-layout { grid-template-columns: clamp(196px, 17vw, 290px) minmax(0, 1fr) clamp(284px, 19vw, 320px); column-gap: clamp(32px, 4vw, 84px); }
  .lg-aside, .lg-side { display: block; }
  .lg-toc-m { display: none; }
  .lg-doc { justify-self: center; width: 100%; }
}

/* ---------- Índice lateral (escritorio) ---------- */
.lg-toc { position: sticky; top: calc(var(--header-h) + 2 * var(--gutter) + 24px); max-height: calc(100vh - var(--header-h) - 2 * var(--gutter) - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.lg-toc__title { display: block; margin-bottom: 14px; }
.lg-toc__list { display: grid; border-left: 1px solid var(--line); }
.lg-toc__list a { display: block; margin-left: -1px; padding: 7px 8px 7px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--muted); transition: color .2s var(--ease), border-color .2s var(--ease); }
.lg-toc__list a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.lg-toc__list a[aria-current] { color: var(--green-dark); border-left-color: var(--green); }
.lg-toc__list a:focus-visible { outline-offset: -2px; border-radius: 6px; }
@media (pointer: coarse) { .lg-toc__list a { padding-block: 12px; min-height: 44px; } } /* 44 px en pantallas táctiles grandes */

/* ---------- Índice desplegable (móvil y tablet) ---------- */
.lg-toc-m { margin-bottom: clamp(32px, 5vw, 48px); border-radius: var(--r-card); background: var(--cream); transition: box-shadow .2s var(--ease); }
.lg-toc-m:hover { box-shadow: 0 10px 26px rgb(30 34 22 / .07); }
.lg-toc-m summary { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 60px; padding: 14px 56px 14px 22px; cursor: pointer; list-style: none; }
.lg-toc-m summary::-webkit-details-marker { display: none; }
.lg-toc-m summary::after { content: ''; position: absolute; right: 24px; top: 50%; width: 11px; height: 11px; margin-top: -8px; border-right: 1.5px solid var(--green); border-bottom: 1.5px solid var(--green); transform: rotate(45deg); transition: transform .25s var(--ease), margin .25s var(--ease); }
.lg-toc-m[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.lg-toc-m summary:focus-visible { outline-offset: -2px; border-radius: var(--r-card); }
.lg-toc-m__label { flex: none; font: 600 12px/1.3 var(--font-alt); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.lg-toc-m__count { font-size: 13.5px; color: var(--muted); }
.lg-toc-m__list { display: grid; padding: 0 22px 12px; }
.lg-toc-m__list li + li { border-top: 1px solid var(--line); }
.lg-toc-m__list a { display: flex; align-items: center; min-height: 48px; padding-block: 8px; font-size: 15px; line-height: 1.35; color: var(--text); transition: color .2s var(--ease); }
.lg-toc-m__list a:hover { color: var(--green-dark); }
.lg-toc-m__list a[aria-current] { color: var(--green-dark); font-weight: 500; }
.lg-toc-m__list a:focus-visible { outline-offset: -2px; border-radius: 6px; }
/* Textos largos en móvil y tablet: el desplegable acompaña la lectura (fijo bajo la cabecera) y dice en qué apartado estás */
@media (max-width: 1100px) {
  .lg-toc-m { position: sticky; top: calc(var(--header-h) + 2 * var(--gutter)); z-index: 5; }
  .lg-toc-m.is-stuck, .lg-toc-m[open] { box-shadow: 0 14px 34px rgb(30 34 22 / .12); }
  .lg-toc-m summary { flex-wrap: nowrap; }
  .lg-toc-m__count { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .lg-toc-m[open] .lg-toc-m__list { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
  .lg-prose h2[id] { scroll-margin-top: 76px; } /* el apartado elegido queda por debajo del desplegable fijo */
}

/* ---------- Texto legal ---------- */
.lg-prose { font-size: 1em; line-height: 1.75; color: var(--text); }
.lg-prose > * + * { margin-top: 16px; }
.lg-prose > :first-child { margin-top: 0; }
.lg-prose strong { font-weight: 600; color: var(--ink); }
.lg-prose h2 { margin-top: clamp(36px, 3.6vw, 52px); padding-top: clamp(26px, 2.4vw, 34px); border-top: 1px solid var(--line); font-size: clamp(24px, 2.1vw, 30px); font-weight: 450; letter-spacing: -.02em; line-height: 1.18; text-wrap: balance; }
.lg-prose > h2:first-child { padding-top: 0; border-top: 0; }
.lg-prose h3 { margin-top: 32px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; }
.lg-prose h2 + *, .lg-prose h3 + * { margin-top: 14px; }
.lg-n { color: var(--green); font-variant-numeric: tabular-nums; }
.lg-prose a.link-inline { overflow-wrap: anywhere; text-decoration-thickness: 1px; }
.lg-prose a.link-inline:hover { text-decoration-thickness: 2px; }
.lg-prose a[href^="tel:"] { white-space: nowrap; } /* el teléfono no se parte en dos líneas */

/* Listas: viñeta verde y números en círculo, con aire entre elementos */
.lg-prose ul, .lg-prose ol { display: grid; gap: 10px; }
.lg-prose ul > li { position: relative; padding-left: 24px; }
.lg-prose ul > li::before { content: ''; position: absolute; left: 5px; top: .74em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.lg-prose ol { counter-reset: lg; }
.lg-prose ol > li { position: relative; min-height: 28px; padding-left: 42px; counter-increment: lg; }
.lg-prose ol > li::before { content: counter(lg); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--green); display: grid; place-items: center; font: 600 12px/1 var(--font); color: var(--green); }
.lg-prose li > ul { margin-top: 10px; }

/* Ficha de datos (titular, responsable…): filas etiqueta / valor, como las tablas de la web */
.lg-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(20px, 2.6vw, 36px); margin: 20px 0 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--white); }
/* subgrid: la columna de etiquetas mide lo que la más larga, igual en todas las filas */
.lg-facts > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 4px; align-items: baseline; padding: 14px 22px; border-top: 1px solid var(--line); transition: background .2s var(--ease); }
.lg-facts > div:first-child { border-top: 0; }
.lg-facts > div:hover { background: var(--green-tint); }
.lg-facts dt { font: 600 11px/1.5 var(--font-alt); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lg-facts dd { margin: 0; min-width: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .lg-facts, .lg-facts > div { grid-template-columns: minmax(0, 1fr); }
  .lg-facts > div { padding: 12px 16px; }
}
/* Teléfono, email y web de la ficha: zona táctil de 44 px sin mover el texto ni cambiar la altura de la fila */
@media (pointer: coarse) { .lg-facts dd a { display: inline-block; padding-block: 11px; margin-block: -11px; } }

/* Lista de navegadores (cookies): nombre, ruta y enlace en cada fila */
.lg-prose .lg-browsers { gap: 0; border-top: 1px solid var(--line); }
.lg-prose .lg-browsers > li { max-width: none; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lg-prose .lg-browsers > li::before { display: none; }

/* Pendiente / añadido (prototipo): la etiqueta va en línea, no flotando sobre el texto */
.lg-flag { position: relative; padding: 16px 18px; border-radius: var(--r-card); background: #fcf7f1; }
.lg-flag > .todo-tag { position: static; display: inline-block; max-width: none; margin-bottom: 12px; }
.lg-flag > .todo-tag:only-child { margin-bottom: 0; }
.lg-flag > * + * { margin-top: 14px; }
body.hide-todo .lg-flag { padding: 0; background: none; }
body.hide-todo .lg-flag:empty, body.hide-todo .lg-flag--note { display: none; }

/* Tabla de cookies (pendiente de auditoría): tabla en escritorio, filas apiladas en móvil */
.lg-prose .table { margin: 0; }
.lg-prose .table td[colspan] { color: var(--muted); text-align: center; padding-block: 22px; }
@media (max-width: 600px) {
  .lg-prose .table, .lg-prose .table tbody, .lg-prose .table tr, .lg-prose .table td { display: block; width: 100%; }
  .lg-prose .table thead { display: none; } /* cada celda lleva su etiqueta (data-th) */
  .lg-prose .table td { border-top: 0; padding: 8px 16px; }
  .lg-prose .table td[data-th]::before { content: attr(data-th); display: block; font: 600 10.5px/1.6 var(--font-alt); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .lg-prose .table tr + tr { border-top: 1px solid var(--line); }
}

/* Modelo de formulario de desistimiento: una hoja con renglones para rellenar */
.lg-form { display: grid; gap: 0; padding: clamp(18px, 2.4vw, 28px); border-radius: calc(var(--r-card) - 6px); background: var(--white); border: 1px solid var(--line); }
.lg-form__intro { font-size: 14.5px; color: var(--muted); }
.lg-form__row { display: grid; gap: 4px; padding-block: 14px; border-bottom: 1px dashed var(--line-strong); }
.lg-form__row:last-of-type { border-bottom: 0; }
.lg-form__k { font: 600 11px/1.5 var(--font-alt); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lg-form__v { color: var(--ink); }
.lg-form__note { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.lg-form__blank { display: block; height: 26px; }
.lg-form__foot { padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.lg-form + .btn { margin-top: 18px; }
@media (max-width: 760px) {
  .lg-flag { padding: 14px 12px; }
  .lg-form { padding: 16px; }
  .lg-form + .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; }
}

/* Volver arriba */
.lg-top { margin-top: clamp(40px, 5vw, 64px); }
.lg-top:hover .icon-arrow { transform: translateY(-3px); }

/* ---------- Ayuda (columna derecha) ---------- */
.lg-side .help-card { position: sticky; top: calc(var(--header-h) + 2 * var(--gutter) + 24px); gap: 18px; padding: 24px 22px 12px; }
.lg-side .help-card__title { max-width: 16ch; font-size: 22px; }
.lg-side .help-list { margin-top: 4px; grid-auto-rows: auto; } /* cada fila a su altura: si un subtítulo va a dos líneas no estira las demás */
.lg-side .help-link { min-height: 60px; }
.lg-side .help-link small { white-space: normal; } /* el subtítulo puede ir a dos líneas, sin cortarse */
@media (max-width: 1100px) { .lg-side .help-card__title { font-size: 20px; } }

/* ---------- Impresión: solo el texto legal ---------- */
@media print {
  .site-header, .nl-sheet, .footer, .wa-float, .toast, .lg-nav, .lg-aside, .lg-side, .lg-toc-m, .lg-top, .lg-form + .btn, .todo-tag { display: none !important; }
  body { background: #fff; }
  .sheet { margin: 0; border-radius: 0; }
  .cat-hero { background: none; color: var(--ink); }
  .cat-hero::before, .cat-hero .crumbs { display: none; }
  .cat-hero h1, .cat-hero .lead { color: var(--ink); }
  .lg-main.section { padding-top: 0; }
  .lg-layout { display: block; }
  .lg-flag { padding: 0; background: none; outline: 0; }
  .lg-prose a.link-inline { color: var(--ink); }
}