/* LAS PÁGINAS DE TEXTO (11/11/2026): privacidad, reembolsos, 404 y las que
   vengan (about, faq, gramática por tema, «learn French with Arsène Lupin»…).
   Es la pauta de paginas.css y de refunds.html de QuixoteSpanish: una
   columna de lectura, titular grande, filas separadas por filetes finos y
   nada de cajas. Va detrás de style.css y cabecera.css: la enlaza cada página
   en `extra` de head() (tools/plantilla.mjs).

   Piezas:
     main.pg                columna de lectura
     .pg-head               eyebrow + h1 + .lead
     .ex-filas              lista de filas con título en negrita (b.k) y texto
     .pg-tabla              tabla plana con filetes
     .pg-cita               cita en francés con la traducción debajo
     .pg-acts               fila de botones (.btn-p / .btn-s de style.css) */

main.pg{max-width:46em;margin:0 auto;padding:clamp(32px,6vw,72px) 24px clamp(80px,10vw,140px)}
@media (max-width:560px){main.pg{padding-left:16px;padding-right:16px}}
.pg-head{margin-bottom:28px}
.pg-head h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,5.4vw,60px);line-height:1.04;letter-spacing:-.02em;margin:12px 0 14px;text-wrap:balance}
.pg-head h1 em{font-style:italic;color:var(--velours)}
:root[data-theme="dark"] .pg-head h1 em{color:var(--oro)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pg-head h1 em{color:var(--oro)}}
.pg-head .lead{font-family:var(--lc-serif);font-size:clamp(19px,2.2vw,22px);line-height:1.5;color:var(--ink2);margin:0}
main.pg h2{font-family:var(--display);font-size:clamp(24px,3vw,30px);line-height:1.15;margin:52px 0 10px;padding-top:18px;border-top:2px solid var(--ink)}
main.pg h3{font-size:17px;margin:26px 0 6px}
main.pg p,main.pg li{line-height:1.7;color:var(--ink2)}
main.pg p{margin:0 0 14px}
main.pg a{color:var(--ink);text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--velours) 60%,transparent)}
main.pg code{font-family:var(--mono);font-size:.88em;background:var(--sunk);padding:1px 6px;border-radius:4px}

.ex-filas{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--ink)}
.ex-filas>li{padding:16px 0;border-bottom:1px solid var(--line)}
.ex-filas b.k{display:block;font-size:15.5px;margin-bottom:4px;color:var(--ink)}
.ex-filas p{margin:0;font-size:15.5px}

.pg-tabla{width:100%;border-collapse:collapse;margin:14px 0 18px;font-size:15px}
.pg-tabla th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 12px 8px 0;border-bottom:2px solid var(--ink)}
.pg-tabla td{vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:var(--ink2);line-height:1.55}
.pg-tabla td:first-child{white-space:nowrap}
@media (max-width:620px){.pg-tabla td:first-child{white-space:normal}}

.pg-cita{margin:32px 0;padding:6px 0 6px 22px;border-left:3px solid var(--oro)}
.pg-cita p{margin:0}
.pg-cita .fr{font-family:var(--lc-serif);font-size:clamp(20px,2.4vw,24px);line-height:1.45;color:var(--ink)}
.pg-cita .en{font-size:15px;color:var(--muted);margin-top:8px}
.pg-acts{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 18px}

/* 404: la tarjeta de visita del ladrón, que ha pasado por aquí antes que tú */
.pg-404 .carte{margin:36px 0 8px;transform:rotate(-2deg);justify-self:start}