/* TaxiTrux · páginas de lectura larga (términos y privacidad). Va después de taxitru.css.
   En celular no es una versión achicada: el índice queda bajo el pulgar y la tabla se lee como tarjetas.
   Orden: 1) encabezado  2) armazón e índices  3) cuerpo de lectura  4) tarjetas  5) mejoras  6) impresión. */

:root {
  --lec-side: 272px;
  --lec-gap: clamp(48px, 6vw, 104px);
  --lec-text: 68ch;
  --lec-drop: 76px; /* lo que ocupa la barra del índice en celular */
  --lec-mark: #0b0a09;
  --wall: clamp(420px, 44vw, 720px) clamp(52px, 5.5vw, 90px);
}

/* ── 1. Encabezado de noche ── */
.lec-frame { width: 100%; max-width: calc(var(--lec-side) + var(--lec-gap) + 760px); margin-inline: auto; }
.lec-hero { position: relative; overflow: clip; padding: clamp(40px, 7vw, 104px) 0 clamp(28px, 4vw, 56px); }
/* Muro de adobe: el mismo friso en filas, apagado detrás del título. El ave va aparte, en el amarillo de la marca. */
.lec-hero::before, .lec-hero::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: min(78%, 980px); pointer-events: none;
  background: var(--adobe-lit); opacity: .13; -webkit-mask: var(--friso-a) right bottom / var(--wall); mask: var(--friso-a) right bottom / var(--wall);
}
.lec-hero::after { background: var(--taxi); opacity: .15; -webkit-mask-image: var(--friso-b); mask-image: var(--friso-b); }
.lec-hero .wrap { position: relative; }
.lec-hero h1 {
  max-width: 11em; color: var(--ink); font: 700 clamp(50px, 14.4vw, 148px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.008em;
}
.lec-hero .meta { margin: clamp(16px, 2.4vw, 28px) 0 0; color: var(--muted); font-size: clamp(15px, .3vw + 14px, 17px); }

/* ── 2. Armazón e índices ── */
.lec-doc { display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(28px, 5vw, 72px) 0 clamp(48px, 7vw, 104px); }
.prose { grid-area: 1 / 1; min-width: 0; padding-bottom: var(--lec-drop); }
.toc-side { display: none; }

.toc-title { color: var(--muted); font-size: 14px; font-weight: 500; }
.toc-side ol, .toc-sheet ol { counter-reset: none; }
.toc-side a, .toc-sheet a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; color: var(--muted); line-height: 1.25; text-decoration: none; }
.toc-n { flex: none; min-width: 1.5em; font-variant-numeric: tabular-nums; }
.toc-side a[aria-current], .toc-sheet a[aria-current] { color: var(--ink); font-weight: 700; }
.toc-print { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 8px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.toc-print .i { width: 20px; height: 20px; }

/* Celular: barra bajo el pulgar. Es pegajosa dentro del documento, así que nunca tapa el pie.
   El <details> va en el DOM antes del texto y aquí se ubica al final de la misma celda. */
.toc-drop { grid-area: 1 / 1; align-self: end; position: sticky; bottom: 0; z-index: 30; padding: 0 0 max(12px, var(--safe-b)); }
.toc-drop[open] { z-index: 45; }
.toc-drop summary {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px 6px 14px; list-style: none; cursor: pointer;
  border: 1px solid var(--night-line); border-radius: 14px; background: var(--night-2); color: var(--night-ink); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6);
  touch-action: manipulation;
}
.toc-drop summary::-webkit-details-marker { display: none; }
.toc-drop summary .i { color: var(--taxi); }
/* Al abrir, un velo de toda la pantalla que sigue siendo el <summary>: tocar afuera cierra, sin JavaScript. */
.toc-drop[open] summary::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, .62); }
.toc-now { flex: 1; min-width: 0; font-weight: 700; font-size: 16px; line-height: 1.2; }
.toc-now > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.toc-count { flex: none; padding: 3px 8px 2px; border-radius: 6px 6px 2px 2px; background: var(--taxi); color: var(--on-taxi); font: 700 15px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.toc-chev { color: var(--night-muted) !important; }
.toc-drop[open] .toc-chev { transform: rotate(180deg); }
.toc-sheet {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); max-height: min(68vh, 560px); max-height: min(68svh, 560px);
  padding: 16px 18px 10px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--night-line); border-radius: 18px; box-shadow: 0 -18px 50px rgba(0, 0, 0, .5);
}
.toc-sheet.is-night { background-color: var(--night-2); }
.toc-sheet a { min-height: 48px; border-bottom: 1px solid var(--line); font-size: 17px; }
.toc-sheet li:last-child a { border-bottom: 0; }
.toc-sheet a[aria-current] { color: var(--taxi); }
.toc-sheet .toc-title { margin-bottom: 4px; }
.toc-sheet .toc-print { width: 100%; min-height: 48px; margin-top: 0; border-top: 1px solid var(--line); }

@media (min-width: 980px) {
  .lec-doc { grid-template-columns: var(--lec-side) minmax(0, 1fr); column-gap: var(--lec-gap); }
  .prose { grid-area: auto; padding-bottom: 0; }
  .toc-drop { display: none; }
  .toc-side {
    position: sticky; top: calc(var(--topbar) + 28px); align-self: start; display: block; max-height: calc(100vh - var(--topbar) - 56px); max-height: calc(100svh - var(--topbar) - 56px);
    padding: 2px 6px 2px 2px; overflow-y: auto; scrollbar-width: thin; font-size: 16px;
  }
  .toc-side ol { position: relative; margin-top: 10px; padding-left: 16px; border-left: 2px solid var(--line); }
  .toc-mark { position: absolute; left: -2px; top: 0; width: 4px; height: 44px; border-radius: 2px; background: var(--taxi-strong); }
}
@media (hover: hover) {
  .toc-side a:hover, .toc-sheet a:hover, .toc-print:hover { color: var(--ink); }
  .lec-next:hover { border-color: var(--ink); }
}

/* ── 3. Cuerpo de lectura ── */
.prose { font-size: clamp(18px, .25vw + 17px, 19.5px); line-height: 1.72; }
.prose > section { max-width: var(--lec-text); margin-top: clamp(48px, 6vw, 76px); scroll-margin-top: calc(var(--stick) + 32px); }
.prose > section:first-child { margin-top: 0; }
.prose h2 {
  display: flex; align-items: baseline; gap: .38em; margin-bottom: .55em; color: var(--ink);
  font: 700 clamp(30px, 3.1vw, 42px)/1.05 var(--display); text-transform: uppercase; letter-spacing: 0;
}
/* Sin número en el título (privacidad): el rombo escalonado de la marca hace de señal. */
@supports selector(:has(a)) {
  .prose h2:not(:has(.lec-n))::before { content: ""; flex: none; align-self: flex-start; margin-top: .2em; width: .62em; height: .62em; background: var(--taxi-strong); clip-path: var(--stair); }
}
/* El número es el letrero del techo del taxi, igual que en el logo. */
.lec-n { flex: none; padding: .1em .3em .04em; border-radius: 5px 5px 2px 2px; background: var(--taxi); color: var(--on-taxi); font-size: .78em; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.prose h3 { font-size: 21px; line-height: 1.25; }
.prose p + p, .prose p + ul, .prose ul + p, .prose ol + p, .prose p + ol, .prose ol + ul, .prose .lec-table + p { margin-top: 1em; }
/* padding en un enlace en línea: no mueve el texto y lleva el área táctil a 44 px. */
.prose a { padding-block: 12px; color: var(--accent); text-decoration-thickness: 1px; }
.prose strong { font-weight: 700; color: var(--ink); }
.prose ul > li { position: relative; padding-left: 1.3em; }
.prose ul > li + li { margin-top: .7em; }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: .62em; width: .5em; height: .5em; background: var(--adobe); clip-path: var(--stair); }
/* Dato pendiente: que el abogado y el dueño lo encuentren de un vistazo. */
.prose .todo { padding: .04em .32em; border-radius: 4px; background: var(--wash); color: var(--ink); font-style: italic; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.prose em { font-style: italic; }

/* Los pasos del precio son una ruta con paradas. */
.prose .steps { counter-reset: paso; }
.prose .steps > li { position: relative; counter-increment: paso; padding: 0 0 1.25em 3em; }
.prose .steps > li::before {
  content: counter(paso); position: absolute; z-index: 1; left: 0; top: .05em; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%;
  background: var(--ink); color: var(--on-ink); font: 700 .92em/1 var(--display);
}
.prose .steps > li::after { content: ""; position: absolute; left: calc(.92em - 1px); top: .4em; bottom: -.4em; border-left: 2px dashed var(--outline); }
.prose .steps > li:last-child { padding-bottom: 0; }
.prose .steps > li:last-child::after { display: none; }
.prose .steps > li:last-child::before { background: var(--taxi); color: var(--on-taxi); }

/* Tabla ancha: filas abiertas, sin rejilla. */
.lec-table { display: table; margin: 1em 0 0; font-size: .95em; }
.lec-table thead th { padding: 0 16px 10px 0; color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; border-bottom: 2px solid var(--ink); }
.lec-table tbody th, .lec-table td { padding: 16px 16px 16px 0; line-height: 1.6; }
.lec-table td { padding-right: 0; }
.lec-table tbody th { width: 27%; color: var(--ink); font-size: inherit; font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.3; }

/* "Tus derechos": bloque de noche en medio del texto, el único del documento. */
.lec-card.is-night { margin: 0; padding: clamp(20px, 3vw, 32px); border-color: var(--night-line); border-radius: 18px; background-color: var(--night-2); }
.lec-card h3 { margin-bottom: 12px; color: var(--ink); }
.lec-card strong { color: var(--ink); }
.lec-card .todo { background: var(--wash); }

/* Sigue leyendo */
.lec-more { display: grid; gap: 12px; max-width: var(--lec-text); margin-top: clamp(48px, 6vw, 76px); padding-top: 24px; border-top: 1px solid var(--line); }
.lec-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink) !important; text-decoration: none; }
.lec-next b { display: block; font: 700 22px/1.1 var(--display); text-transform: uppercase; }
.lec-next small { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.35; }
@media (min-width: 640px) { .lec-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 4. En celular la tabla se lee como tarjetas. Solo en pantalla: al imprimir sigue siendo tabla. ── */
@media screen and (max-width: 719px) {
  .prose { padding-bottom: calc(var(--lec-drop) + 8px); }
  .lec-table, .lec-table tbody, .lec-table tr, .lec-table tbody th, .lec-table td { display: block; width: auto; }
  .lec-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .lec-table tbody { display: grid; gap: 12px; }
  .lec-table tr { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .lec-table tbody th, .lec-table td { padding: 14px 16px; border: 0; }
  .lec-table tbody th { background: var(--raised); }
  .lec-table tbody th > span { display: block; font: 700 22px/1.1 var(--display); text-transform: uppercase; }
  .lec-table tbody th::before, .lec-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 14px; font-weight: 500; line-height: 1.3; font-family: var(--sans); text-transform: none; }
}

/* ── 5. Mejoras: todo detrás de @supports y de la preferencia de movimiento ── */
@supports (text-wrap: pretty) {
  .prose p, .prose li { text-wrap: pretty; }
}
@supports (mask-composite: intersect) {
  /* El muro de adobe se apaga hacia el título para no ensuciar la lectura. */
  .lec-hero::before {
    -webkit-mask: linear-gradient(to right, transparent, #000 62%), var(--friso-a) right bottom / var(--wall);
    mask: linear-gradient(to right, transparent, #000 62%), var(--friso-a) right bottom / var(--wall);
  }
  .lec-hero::after {
    -webkit-mask: linear-gradient(to right, transparent, #000 62%), var(--friso-b) right bottom / var(--wall);
    mask: linear-gradient(to right, transparent, #000 62%), var(--friso-b) right bottom / var(--wall);
  }
  /* Después del atajo "mask", que lo reinicia. */
  .lec-hero::before, .lec-hero::after { -webkit-mask-composite: source-in; mask-composite: intersect; }
}

/* El taxi avanza con la lectura. Sin soporte o con movimiento reducido no aparece nada. */
.road { display: none; }
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .road { display: block; position: fixed; z-index: 35; left: 0; right: 0; top: max(var(--stick), env(safe-area-inset-top, 0px)); height: 16px; overflow: hidden; pointer-events: none; background: var(--night-1); }
    .road-run { position: absolute; left: 0; right: 0; top: 0; bottom: 0; animation: road-run linear both; animation-timeline: scroll(root block); }
    .road-run::before { content: ""; position: absolute; left: 0; right: 16px; top: 6px; height: 3px; background: var(--taxi-strong); box-shadow: 0 1px 0 var(--lec-mark); }
    .road-car { position: absolute; right: 0; top: 1px; width: 32px; height: 14px; }
    @keyframes road-run { from { transform: translateX(calc(-100% + 36px)); } to { transform: none; } }
  }
  @supports (animation-timeline: view()) {
    .lec-hero + .friso { view-timeline: --lec-friso block; }
    .lec-hero + .friso i { animation: lec-slide linear both; animation-timeline: --lec-friso; animation-range: cover; }
    @keyframes lec-slide { from { transform: translateX(calc(-1 * var(--fw) / 2)); } to { transform: translateX(calc(var(--fw) / 2)); } }
  }
  .toc-mark { transition: transform .28s var(--ease); }
  .toc-chev { transition: transform .2s var(--ease); }
  .lec-next { transition: transform .18s var(--ease); }
  .toc-drop[open] .toc-sheet { animation: sheet-up .22s var(--ease) both; }
  .toc-drop[open] summary::before { animation: scrim-in .2s linear both; }
  @keyframes sheet-up { from { transform: translateY(12px); opacity: .4; } }
  @media (hover: hover) { .lec-next:hover { transform: translateY(-2px); } }
}

/* ── 6. Impresión limpia: una columna, tinta negra y sin navegación ── */
@page { margin: 18mm 16mm; }
@media print {
  .topbar, .road, .toc-side, .toc-drop, .lec-more, .foot-grid, .lec-hero::before, .lec-hero::after { display: none !important; }
  .lec-hero, .foot, .lec-card.is-night, .card.is-night { background: #ffffff !important; color: #000000; }
  .lec-hero { padding: 0 0 10pt; border-bottom: 1.5pt solid #000000; overflow: visible; }
  .lec-hero .wrap, .wrap { max-width: none; padding: 0; }
  .lec-hero h1 { max-width: none; color: #000000; font-size: 28pt; line-height: 1; }
  .lec-hero h1::before { content: "TaxiTrux"; display: block; margin-bottom: 4pt; font: 700 12pt/1 var(--sans); text-transform: none; }
  .lec-hero .meta { margin-top: 6pt; color: #333333; font-size: 10pt; }
  .lec-frame { max-width: none; }
  .lec-doc { display: block; padding: 12pt 0 0; }
  .prose { padding: 0; font-size: 11pt; line-height: 1.5; }
  .prose > section, .lec-more { max-width: none; }
  .prose > section { margin-top: 16pt; }
  .prose h2 { margin-bottom: 5pt; color: #000000; font-size: 15pt; break-after: avoid; }
  .prose h2::before { display: none !important; }
  .lec-n { padding: 0; background: none; color: #000000; font-size: 1em; }
  .prose h3 { font-size: 12pt; }
  .prose li, .lec-table tr, .lec-card { break-inside: avoid; }
  .prose p { orphans: 3; widows: 3; }
  .prose ul { padding-left: 14pt; list-style: disc; }
  .prose ul > li { padding-left: 0; }
  .prose ul > li + li { margin-top: 3pt; }
  .prose ul > li::before { display: none; }
  .prose .steps { padding-left: 16pt; list-style: decimal; }
  .prose .steps > li { padding: 0 0 3pt 0; }
  .prose .steps > li::before, .prose .steps > li::after { display: none; }
  .prose .todo { padding: 0; background: none; color: #000000; font-weight: 700; }
  .prose a { color: #000000; text-decoration: underline; }
  .lec-table { font-size: 10pt; }
  .lec-table thead th { border-bottom: 1pt solid #000000; color: #000000; }
  .lec-table tbody th, .lec-table td { padding: 5pt 8pt 5pt 0; border-bottom: .5pt solid #999999; line-height: 1.4; }
  .lec-card.is-night { padding: 8pt 10pt; border: 1pt solid #000000; border-radius: 0; }
  .lec-card h3, .lec-card strong { color: #000000; }
  .foot { padding: 10pt 0 0; font-size: 9pt; }
  .foot-legal { margin: 0; padding-top: 6pt; border-top: .5pt solid #999999; color: #333333; font-size: 9pt; }
  .foot-legal .todo { color: #000000; }
}