/* =========================================================================
   Arletex Design System v3.5.1 — Blog: ¿Qué es el poliéster?
   (/blog/que-es-poliester) · Prefijo: qp- / --qp-*
   ─────────────────────────────────────────────────────────────────────────
   FIRMA PROPIA DE ESTE BLOG: "LA CADENA DEL POLÍMERO".
   El poliéster no es una tela: es una FIBRA. Por eso la página se lee
   como una ficha de laboratorio textil — la pieza espectacular es la
   CADENA (PET → chip → fibra → hilo → tela), un diagrama en CSS que se
   repite como regla divisoria (—◆—◆—) a lo largo del artículo.
   El purple marca la voz "blog"; orange sigue siendo el CTA.

   Chrome legacy: el slide superior (.slider-nav) y el breadcrumb
   bootstrap se conservan FUERA de .qp-page, homogéneos con el sitio.

   Piso de legibilidad v3.5.1: NADA visible por debajo de 14px
   (0.875rem). Los mono-labels usan clamp(.86rem, 1.1vw, 1rem).

   Mapa de secciones (registro · apertura · marco · fondo · hover):
     01 Apertura         Manifiesto · ManifestoClaim · —          · paper · —
     02 Qué es           Dossier    · Dossier        · Top-rule   · white · rule-draw
     03 De qué está hecho Técnico   · LabelLateral   · Side-rule  · cream · lift
     04 ¿Es plástico?    Periódico  · QuoteOpener    · Double     · white · —
     05 Características  Almanaque  · IndexRow       · Index-tab  · paper · lift
     05B No todas iguales Fanzine   · ManifestoClaim · Full-frame · white · lift
     06 100% poliéster   Periódico  · RunInHeadline  · Top-rule   · white · lift
     07 Mezclas          Técnico    · NumberProtag   · Side-rule  · cream · —
     08 Ventajas/desv.   Almanaque  · IndexRow       · Bleed      · INK   · —
     09 Usos             Galería    · IndexRow       · Top-rule   · white · ink-flood chips
     10 Historia         Periódico  · DropCap        · Marginalia · paper · —
     11 FAQ              Dossier    · RunInHeadline  · Top-rule   · white · side-shift
     12 CTA final        Manifiesto-CTA · MegaTextBg · Bleed      · INK   · press-chunky
   ========================================================================= */

/* Slide legacy oculto en móvil: esta hoja solo la carga esta página, así que
   la regla no afecta a otras landings (mismo criterio que la TSG
   /telas/tela-poliester). El breadcrumb se conserva. */
@media (max-width: 767px) {
    .slider-nav { display: none; }
}

/* ─── Tokens locales (fallback a --ax-* global) ────────────────────────── */
.qp-page {
    --qp-ink:          var(--ax-ink, #1F2530);
    --qp-paper:        var(--ax-paper, #FAF6EE);
    --qp-cream:        var(--ax-cream, #F2EDE4);
    --qp-white:        var(--ax-white, #FFFFFF);
    --qp-orange:       var(--ax-orange, #F15A29);
    --qp-orange-deep:  var(--ax-orange-deep, #B0401A);
    --qp-purple:       var(--ax-purple, #6A52A2);
    --qp-purple-deep:  #4E3B7E;
    --qp-yellow:       var(--ax-yellow, #FFEB3B);
    --qp-muted:        var(--ax-muted, #6E6A60);
    --qp-muted-dark:   var(--ax-muted-dark, #A8A39A);
    --qp-rule:         rgba(31, 37, 48, 0.16);
    --qp-rule-on-dark: rgba(250, 246, 238, 0.20);
    --qp-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --qp-font-accent:  var(--ax-font-accent, 'Fraunces', Georgia, serif);
    --qp-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --qp-font-mono:    var(--ax-font-mono, 'JetBrains Mono', ui-monospace, 'Courier New', monospace);
    --qp-motion-fast:  140ms;
    --qp-motion-base:  220ms;
    --qp-ease-out:     cubic-bezier(.22, 1, .36, 1);
    /* Firma: la cadena del polímero (eslabón + enlace) */
    --qp-chain-h: repeating-linear-gradient(90deg,
        var(--qp-ink) 0 16px, transparent 16px 26px);

    background: var(--qp-white);
    color: var(--qp-ink);
    font-family: var(--qp-font-body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;   /* seguro anti-hueco lateral (mega-text) */
}
.qp-page *, .qp-page *::before, .qp-page *::after { box-sizing: border-box; }

/* Guardia sobre fondo oscuro: products.css declara global
   `p, h2, small, h1, li { color: #1e1e1e }`; ese color directo gana sobre la
   herencia del contenedor y apaga el texto en paneles ink. :where() deja la
   especificidad en 0,0,1 (gana por orden de carga) sin pisar utilitarias. */
:where(.qp-section--ink, .qp-versus__pane--dark) p,
:where(.qp-section--ink, .qp-versus__pane--dark) li,
:where(.qp-section--ink, .qp-versus__pane--dark) h1,
:where(.qp-section--ink, .qp-versus__pane--dark) h2,
:where(.qp-section--ink, .qp-versus__pane--dark) small { color: var(--qp-paper); }

/* Anclas: el header es fixed y su alto real cambia por breakpoint */
.qp-section[id] { scroll-margin-top: 125px; }
@media (max-width: 1080px) { .qp-section[id] { scroll-margin-top: 116px; } }
@media (max-width: 767px)  { .qp-section[id] { scroll-margin-top: 170px; } }

/* ─── Container ────────────────────────────────────────────────────────── */
.qp-container {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}
.qp-container--narrow { max-width: 900px; }

/* ─── Sections: fondos, paddings, marcos ───────────────────────────────── */
.qp-section        { padding: clamp(64px, 8vw, 96px) 0; background: var(--qp-white); }
.qp-section--hero  { padding: clamp(72px, 10vw, 120px) 0 clamp(56px, 7vw, 80px); }
.qp-section--paper { background: var(--qp-paper); }
.qp-section--cream { background: var(--qp-cream); }
.qp-section--ink   { background: var(--qp-ink); color: var(--qp-paper); }

.qp-section--top-rule    { border-top: 2px solid var(--qp-orange); }
.qp-section--double-rule { border-top: 1px solid var(--qp-ink); border-bottom: 1px solid var(--qp-ink); }
.qp-section--side-rule   { border-left: 3px solid var(--qp-purple); }

/* Index-tab: pestaña de archivador montada sobre el rule superior */
.qp-section--index-tab { position: relative; border-top: 2px solid var(--qp-ink); }
.qp-tab {
    position: absolute;
    top: 0;
    left: clamp(20px, 4vw, 56px);
    transform: translateY(-100%);
    background: var(--qp-ink);
    color: var(--qp-paper);
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 14px;
}

/* ─── Tipografía base ──────────────────────────────────────────────────── */
.qp-display {
    font-family: var(--qp-font-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: .95;
    letter-spacing: .01em;
    margin: 0;
    color: inherit;
}
.qp-display--xl { font-size: clamp(2.7rem, 7.8vw, 6rem); line-height: .88; letter-spacing: -0.01em; }
.qp-display--lg { font-size: clamp(1.95rem, 4.4vw, 3.3rem); }
.qp-display--md { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.qp-display--sm { font-size: clamp(1.15rem, 2vw, 1.5rem); }

.qp-display em {
    font-family: var(--qp-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -0.025em;
    color: var(--qp-orange-deep);   /* AA sobre claro cuando el texto es pequeño */
}
.qp-display--xl em,
.qp-display--lg em { color: var(--qp-orange); }   /* ≥24px: el naranja pleno pasa AA large */
.qp-section--ink .qp-display em { color: var(--qp-orange); }

.qp-body { font-size: clamp(1rem, 1.15vw, 1.0625rem); margin: 0 0 1.1rem; }
.qp-body:last-child { margin-bottom: 0; }
.qp-body strong { font-weight: 700; }
/* Links de prosa: rule-draw (subrayado que se traza al hover) */
.qp-link {
    color: var(--qp-ink);
    text-decoration: none;
    font-weight: 700;
    background-image: linear-gradient(var(--qp-orange) 0 0);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 2px;
    padding-bottom: 2px;
    transition: background-size var(--qp-motion-base) var(--qp-ease-out);
    box-shadow: inset 0 -2px 0 var(--qp-rule);
}
.qp-link:hover,
.qp-link:focus-visible { background-size: 100% 2px; color: var(--qp-ink); text-decoration: none; }
.qp-section--ink .qp-link,
.qp-versus__pane--dark .qp-link { color: var(--qp-paper); box-shadow: inset 0 -2px 0 var(--qp-rule-on-dark); }
.qp-section--ink .qp-link:hover,
.qp-section--ink .qp-link:focus-visible,
.qp-versus__pane--dark .qp-link:hover,
.qp-versus__pane--dark .qp-link:focus-visible { color: var(--qp-paper); }

.qp-mono {
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Eyebrow-stamp (sello editorial); data-stamp pinta la viñeta izquierda */
.qp-stamp {
    display: inline-flex;
    align-items: stretch;
    margin: 0 0 clamp(.9rem, 2vw, 1.25rem);
    border: 1.5px solid var(--qp-ink);
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.3;
}
.qp-stamp::before {
    content: attr(data-stamp);
    display: inline-flex;
    align-items: center;
    background: var(--qp-purple);
    color: var(--qp-white);
    padding: 6px 11px;
    font-weight: 700;
}
.qp-stamp > span {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    background: var(--qp-white);
    color: var(--qp-ink);
}
.qp-stamp--orange::before { background: var(--qp-orange); color: var(--qp-ink); }
.qp-section--ink .qp-stamp { border-color: var(--qp-paper); }

/* ─── FIRMA · la cadena como regla divisoria (—◆—◆—) ───────────────────── */
.qp-chainrule {
    position: relative;
    height: 3px;
    background-image: var(--qp-chain-h);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    margin: clamp(1.75rem, 3.5vw, 2.75rem) 0;
}
.qp-chainrule::before,
.qp-chainrule::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 13px;
    height: 13px;
    background: var(--qp-orange);
    border: 2px solid var(--qp-ink);
    transform: translateY(-50%) rotate(45deg);
}
.qp-chainrule::before { left: 0; }
.qp-chainrule::after  { right: 0; }

/* ─── Botones ──────────────────────────────────────────────────────────── */
.qp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 48px;
    font-family: var(--qp-font-body);
    font-weight: 800;
    font-size: clamp(.95rem, 1.1vw, 1.05rem);
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 28px;
    border: 2px solid transparent;
    cursor: pointer;
    transition:
        transform var(--qp-motion-fast) var(--qp-ease-out),
        box-shadow var(--qp-motion-fast) var(--qp-ease-out),
        background-color var(--qp-motion-base) var(--qp-ease-out),
        color var(--qp-motion-base) var(--qp-ease-out);
}
.qp-btn:hover { text-decoration: none; }

/* press-chunky */
.qp-btn--primary {
    background: var(--qp-orange);
    color: var(--qp-white);
    box-shadow: 0 6px 0 var(--qp-orange-deep);
}
.qp-btn--primary:hover  { color: var(--qp-white); transform: translateY(-2px); box-shadow: 0 8px 0 var(--qp-orange-deep); }
.qp-btn--primary:active { transform: translateY(2px); box-shadow: 0 0 0 var(--qp-orange-deep); }

/* ghost-fill */
.qp-btn--ghost {
    background: transparent;
    color: var(--qp-paper);
    border-color: var(--qp-paper);
}
.qp-btn--ghost:hover  { background: var(--qp-orange); border-color: var(--qp-orange); color: var(--qp-ink); }
.qp-btn--ghost:active { background: var(--qp-orange-deep); color: var(--qp-paper); }

/* ─── Hover helper: lift-orange ────────────────────────────────────────── */
.qp-lift {
    transition:
        transform var(--qp-motion-base) var(--qp-ease-out),
        box-shadow var(--qp-motion-base) var(--qp-ease-out);
}
.qp-lift:hover  { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--qp-orange); }
.qp-lift:active { transform: translate(-1px, -1px); }

/* =========================================================================
   01 · APERTURA — Manifiesto: la ficha de la fibra
   (el slide y el breadcrumb legacy viven fuera de .qp-page)
   ========================================================================= */
.qp-hero__head { max-width: 1040px; }
.qp-hero__title { margin: 0 0 clamp(.75rem, 2vw, 1.25rem); }
.qp-hero__lede {
    font-family: var(--qp-font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2.4vw, 1.9rem);
    line-height: 1.32;
    color: var(--qp-muted);
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    max-width: 34ch;
    text-transform: none;
}

/* Telemetría: la etiqueta de laboratorio, colgada de la cadena */
.qp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 2.5rem;
    list-style: none;
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    padding: clamp(.9rem, 1.6vw, 1.1rem) 0;
    border-top: 2px solid var(--qp-ink);
    background-image: var(--qp-chain-h);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 3px;
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--qp-muted);
}
.qp-hero__meta li { display: flex; flex-direction: column; gap: .15rem; }
.qp-hero__meta strong { color: var(--qp-ink); font-weight: 700; letter-spacing: .04em; }

/* =========================================================================
   02 · ¿QUÉ ES EL POLIÉSTER? — Dossier: prosa + ficha lateral
   ========================================================================= */
.qp-dossier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .44fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}
.qp-dossier__head {
    grid-column: 1 / -1;
    display: grid;
    gap: clamp(.75rem, 1.5vw, 1rem);
    padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
    margin-bottom: clamp(.5rem, 1vw, 1rem);
    border-bottom: 2px solid var(--qp-ink);
}
.qp-dossier__title { margin: 0; }
.qp-dossier__prose { max-width: 68ch; }

/* Ficha de la fibra: definición en formato dato */
.qp-ficha {
    border: 2px solid var(--qp-ink);
    background: var(--qp-paper);
    padding: clamp(20px, 3vw, 28px);
    margin: 0;
}
.qp-ficha__cap {
    display: block;
    margin-top: 0;
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--qp-ink);
    padding-bottom: .75rem;
    margin-bottom: .75rem;
    border-bottom: 2px solid var(--qp-ink);
}
.qp-ficha__list { margin: 0; }
.qp-ficha__row + .qp-ficha__row { border-top: 1px dashed var(--qp-rule); }
.qp-ficha__row {
    display: grid;
    gap: .1rem;
    padding: .7rem 0;
}
.qp-ficha__row dt {
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, .95rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--qp-muted);
    font-weight: 400;
}
.qp-ficha__row dd {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    color: var(--qp-ink);
}

/* =========================================================================
   03 · ¿DE QUÉ ESTÁ HECHO? — Técnico: LA CADENA (pieza firmada)
   ========================================================================= */
.qp-lateral {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1rem, 2vw, 1.5rem);
    border-top: 2px solid var(--qp-orange);
}
.qp-lateral__rail {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding-right: clamp(.5rem, 1vw, 1rem);
}
.qp-lateral__rail .qp-mono { color: var(--qp-ink); letter-spacing: .3em; }
.qp-lateral__title { margin: 0 0 .6rem; }
.qp-lateral__note  { max-width: 64ch; color: var(--qp-muted); margin: 0; }

/* Diagrama: 5 eslabones unidos por la cadena */
.qp-chain {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(12px, 1.6vw, 20px);
    position: relative;
    padding-top: clamp(18px, 3vw, 28px);
}
.qp-chain::before {              /* la cadena que atraviesa los eslabones */
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: clamp(96px, 9vw, 118px);   /* a la altura del glifo de cada eslabón */
    height: 3px;
    background-image: var(--qp-chain-h);
    z-index: 0;
}
.qp-link-node {
    position: relative;
    z-index: 1;
    margin: 0;
    background: var(--qp-white);
    border: 2px solid var(--qp-ink);
    padding: clamp(14px, 2vw, 20px) clamp(10px, 1.4vw, 16px) clamp(14px, 2vw, 18px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
}
.qp-link-node__ix {
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    color: var(--qp-white);
    background: var(--qp-ink);
    padding: 3px 9px;
    font-weight: 700;
}
.qp-link-node__glyph {
    width: clamp(42px, 5vw, 56px);
    height: clamp(42px, 5vw, 56px);
    display: grid;
    place-items: center;
    border: 2px solid var(--qp-ink);
    background: var(--qp-cream);
    font-family: var(--qp-font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    line-height: 1;
    color: var(--qp-ink);
}
.qp-link-node--key .qp-link-node__glyph { background: var(--qp-orange); color: var(--qp-white); border-color: var(--qp-orange-deep); }
.qp-link-node__name {
    font-family: var(--qp-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    letter-spacing: .03em;
    line-height: 1.1;
}
.qp-link-node__desc {
    margin: 0;
    font-size: clamp(.9rem, 1.05vw, .98rem);
    line-height: 1.45;
    color: var(--qp-muted);
}

/* Nota al pie del diagrama */
.qp-note {
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    padding: clamp(16px, 2.4vw, 24px) clamp(18px, 2.6vw, 26px);
    background: var(--qp-white);
    border-left: 4px solid var(--qp-purple);
}
.qp-note p { margin: 0; max-width: 72ch; }
.qp-note .qp-mono { display: block; color: var(--qp-purple-deep); margin-bottom: .35rem; }

/* =========================================================================
   04 · ¿ES LO MISMO QUE PLÁSTICO? — Periódico: QuoteOpener + comparación
   ========================================================================= */
.qp-quote {
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    max-width: 30ch;
}
.qp-quote__mark {
    display: block;
    font-family: var(--qp-font-accent);
    font-style: italic;
    font-size: clamp(3.5rem, 8vw, 6rem);
    line-height: .6;
    color: var(--qp-orange);
}
.qp-quote__title { margin: .35rem 0 0; }
.qp-quote-lede { max-width: 68ch; margin: 0 0 clamp(2rem, 4vw, 2.75rem); }

.qp-versus {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid var(--qp-ink);
    position: relative;
}
.qp-versus__pane {
    padding: clamp(24px, 4vw, 44px) clamp(20px, 3.5vw, 40px);
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.qp-versus__pane--light { background: var(--qp-white); }
.qp-versus__pane--dark  { background: var(--qp-ink); color: var(--qp-paper); }
.qp-versus__pane--light + .qp-versus__pane--dark { border-left: 2px solid var(--qp-ink); }
.qp-versus__label {
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--qp-muted);
}
.qp-versus__pane--dark .qp-versus__label { color: var(--qp-muted-dark); }
.qp-versus__title { margin: 0; }
.qp-versus__pane--dark .qp-versus__title em { color: var(--qp-orange); }
.qp-versus__text { margin: 0; font-size: clamp(.98rem, 1.1vw, 1.05rem); }
.qp-versus__pane--dark .qp-versus__text { color: var(--qp-paper); }
.qp-versus__foot {
    grid-column: 1 / -1;
    border-top: 2px solid var(--qp-ink);
    background: var(--qp-cream);
    padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3.5vw, 40px);
}
.qp-versus__foot p { margin: 0; max-width: 76ch; }
.qp-versus__foot strong { color: var(--qp-ink); }

/* =========================================================================
   05 · CARACTERÍSTICAS — Almanaque: índice de propiedades
   ========================================================================= */
.qp-index-head {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(.75rem, 1.5vw, 1rem);
    border-bottom: 2px solid var(--qp-ink);
}
.qp-index-head__title  { margin: 0; }
.qp-index-head__leader {
    flex: 1 1 auto;
    align-self: flex-end;
    margin-bottom: .35em;
    border-bottom: 3px dotted var(--qp-rule);
}
.qp-index-head__tally { flex: 0 0 auto; color: var(--qp-ink); white-space: nowrap; }
.qp-section--ink .qp-index-head { border-bottom-color: var(--qp-paper); }

.qp-props-intro { max-width: 68ch; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }

.qp-props {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 22px);
    list-style: none;
    margin: 0;
    padding: 0;
}
.qp-prop {
    background: var(--qp-white);
    border: 2px solid var(--qp-ink);
    padding: clamp(18px, 2.6vw, 26px);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
/* Cabecera de la ficha: ícono en cuadro (eco del glifo de la cadena) + folio */
.qp-prop__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .3rem;
}
.qp-prop__icon {
    flex: 0 0 auto;
    width: clamp(44px, 4.4vw, 52px);
    height: clamp(44px, 4.4vw, 52px);
    display: grid;
    place-items: center;
    border: 2px solid var(--qp-ink);
    background: var(--qp-cream);
    color: var(--qp-orange-deep);
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    line-height: 1;
    transition:
        background-color var(--qp-motion-base) var(--qp-ease-out),
        color var(--qp-motion-base) var(--qp-ease-out);
}
.qp-prop:hover .qp-prop__icon,
.qp-prop:focus-within .qp-prop__icon { background: var(--qp-ink); color: var(--qp-orange); }

.qp-prop__ix {
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    color: var(--qp-orange-deep);
    font-weight: 700;
}
.qp-prop__name {
    font-family: var(--qp-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 1.9vw, 1.45rem);
    letter-spacing: .03em;
    line-height: 1.05;
}
.qp-prop__text { margin: 0; font-size: clamp(.94rem, 1.05vw, 1rem); color: var(--qp-muted); }

/* =========================================================================
   05B · NO TODAS SON IGUALES — Fanzine: la advertencia con muestras
   ========================================================================= */
.qp-frame {
    border: 2px solid var(--qp-ink);
    padding: clamp(26px, 4.5vw, 52px);
    position: relative;
    background: var(--qp-white);
}
.qp-frame__tab {
    position: absolute;
    top: 0;
    left: clamp(20px, 4vw, 40px);
    transform: translateY(-50%);
    background: var(--qp-purple);
    color: var(--qp-white);
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 7px 14px;
}
.qp-claim {
    position: relative;
    max-width: 66ch;
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    padding-right: clamp(0px, 12vw, 150px);
}
.qp-claim__text {
    font-family: var(--qp-font-accent);
    font-style: italic;
    font-size: clamp(1.5rem, 3.2vw, 2.5rem);
    line-height: 1.22;
    margin: 0 0 .85rem;
    color: var(--qp-ink);
}
.qp-claim__text strong {
    font-style: normal;
    font-family: var(--qp-font-display);
    font-weight: 400;
    text-transform: uppercase;
    background: var(--qp-ink);
    color: var(--qp-paper);
    padding: 0 .18em;
}
.qp-claim__sub { margin: 0; color: var(--qp-muted); max-width: 56ch; }

.qp-burst {
    position: absolute;
    right: 0;
    top: -6px;
    transform: rotate(-8deg);
    background: var(--qp-yellow);
    color: var(--qp-ink);
    border: 2px solid var(--qp-ink);
    font-family: var(--qp-font-display);
    text-transform: uppercase;
    font-size: clamp(.95rem, 1.4vw, 1.1rem);
    letter-spacing: .04em;
    line-height: 1.12;
    padding: 11px 15px;
    text-align: center;
    box-shadow: 4px 4px 0 var(--qp-ink);
}

.qp-samples {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(14px, 2vw, 22px);
}
.qp-sample {
    margin: 0;
    border: 2px solid var(--qp-ink);
    background: var(--qp-white);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--qp-ink);
}
.qp-sample:hover { text-decoration: none; color: var(--qp-ink); }
.qp-sample img { width: 100%; height: auto; display: block; border-bottom: 2px solid var(--qp-ink); }
.qp-sample__cap { display: block; padding: 12px 14px 14px; }
.qp-sample__name {
    display: block;
    font-family: var(--qp-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    letter-spacing: .03em;
    line-height: 1.1;
}
.qp-sample__note {
    display: block;
    margin-top: .3rem;
    font-size: clamp(.9rem, 1.05vw, .98rem);
    color: var(--qp-muted);
    line-height: 1.45;
}

/* =========================================================================
   06 · TELA 100% POLIÉSTER — Periódico: run-in + catálogo
   ========================================================================= */
.qp-runin {
    display: flex;
    align-items: center;
    gap: clamp(.5rem, 1.5vw, 1rem);
    flex-wrap: wrap;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    padding-bottom: clamp(.75rem, 1.5vw, 1rem);
    border-bottom: 1px solid var(--qp-rule);
}
.qp-runin .qp-stamp { margin: 0; }
.qp-runin__divider {
    font-family: var(--qp-font-accent);
    font-style: italic;
    color: var(--qp-orange);
    font-size: 1.5em;
    flex-shrink: 0;
}
.qp-runin__title { margin: 0; }
.qp-section--ink .qp-runin { border-bottom-color: var(--qp-rule-on-dark); }

.qp-prose-block { max-width: 68ch; margin: 0 0 clamp(2rem, 4vw, 3rem); }

.qp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.2vw, 26px);
}
.qp-card {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--qp-ink);
    background: var(--qp-white);
    text-decoration: none;
    color: var(--qp-ink);
}
.qp-card:hover { text-decoration: none; color: var(--qp-ink); }
.qp-card img { width: 100%; height: auto; display: block; border-bottom: 2px solid var(--qp-ink); }
.qp-card__body { padding: clamp(14px, 2vw, 20px); display: flex; flex-direction: column; gap: .35rem; }
.qp-card__name {
    font-family: var(--qp-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    letter-spacing: .03em;
    line-height: 1.05;
}
.qp-card__compo {
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, .95rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--qp-orange-deep);
    font-weight: 700;
}
.qp-card__uso { margin: 0; font-size: clamp(.92rem, 1.05vw, 1rem); color: var(--qp-muted); }

/* =========================================================================
   07 · MEZCLAS — Técnico: la barra de composición
   ========================================================================= */
.qp-numhead {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: end;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--qp-rule);
}
@media (min-width: 720px) {
    .qp-numhead { grid-template-columns: minmax(0, .34fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }
}
.qp-numhead__num {
    font-family: var(--qp-font-display);
    font-size: clamp(3.6rem, 10vw, 7.5rem);
    line-height: .82;
    letter-spacing: -0.03em;
    color: var(--qp-orange);
    font-variant-numeric: tabular-nums;
}
.qp-numhead__num small {
    display: block;
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--qp-ink);
    margin-top: .5rem;
}
.qp-numhead__title { margin: 0 0 .7rem; }
.qp-numhead__text  { margin: 0; max-width: 62ch; color: var(--qp-muted); }

.qp-blend {
    border: 2px solid var(--qp-ink);
    background: var(--qp-white);
    padding: clamp(22px, 3.5vw, 36px);
}
.qp-blend__cap {
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--qp-ink);
    margin: 0 0 .9rem;
}
.qp-blend__bar {
    display: flex;
    height: clamp(56px, 8vw, 72px);
    border: 2px solid var(--qp-ink);
    overflow: hidden;
}
.qp-blend__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--qp-font-display);
    text-transform: uppercase;
    font-size: clamp(1rem, 1.8vw, 1.35rem);
    letter-spacing: .04em;
    line-height: 1;
    padding: 0 10px;
    text-align: center;
}
.qp-blend__seg--pol { flex: 65; background: var(--qp-orange); color: var(--qp-white); }
.qp-blend__seg--alg { flex: 35; background: var(--qp-cream); color: var(--qp-ink); border-left: 2px solid var(--qp-ink); }
.qp-blend__legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
    margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
}
.qp-blend__legend div { display: flex; flex-direction: column; gap: .2rem; }
.qp-blend__legend dt {
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, .95rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--qp-muted);
}
.qp-blend__legend dd { margin: 0; font-size: clamp(.95rem, 1.05vw, 1rem); }

/* =========================================================================
   08 · VENTAJAS Y DESVENTAJAS — Almanaque: tabla sobre ink
   Dos columnas del cliente (Característica / Qué significa); el signo
   +/− es señal visual, no una tercera columna de texto.
   ========================================================================= */
.qp-vd__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    margin: 0 0 clamp(1.25rem, 2.2vw, 1.75rem);
    color: var(--qp-muted-dark);
}

/* Marcador +/− : cuadrado sólido, sin blur ni radius */
.qp-vd__key {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    font-family: var(--qp-font-display);
    font-size: 1rem;
    line-height: 1;
    border: 2px solid currentColor;
}
.qp-vd__key--plus  { background: var(--qp-orange); color: var(--qp-white); border-color: var(--qp-orange-deep); }
.qp-vd__key--minus { background: transparent; color: var(--qp-paper); }

.qp-table-wrap { overflow-x: auto; }

.qp-vd {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--qp-paper);
    background: var(--qp-ink);
}
.qp-vd thead th {
    text-align: left;
    background: var(--qp-paper);
    color: var(--qp-ink);
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 13px clamp(16px, 2.2vw, 22px);
}
.qp-vd tbody th,
.qp-vd tbody td {
    padding: clamp(15px, 2.2vw, 22px) clamp(16px, 2.2vw, 22px);
    border-top: 1px solid var(--qp-rule-on-dark);
    vertical-align: top;
    text-align: left;
    color: var(--qp-paper);
}
.qp-vd tbody tr:nth-child(even) th,
.qp-vd tbody tr:nth-child(even) td { background: rgba(250, 246, 238, 0.04); }

/* Columna 1: el nombre de la característica con su signo */
.qp-vd tbody th {
    font-weight: 400;
    width: 34%;
    min-width: 230px;
}
.qp-vd tbody th .qp-vd__key { margin-right: .7rem; vertical-align: middle; }
.qp-vd__name {
    font-family: var(--qp-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    letter-spacing: .03em;
    line-height: 1.1;
    vertical-align: middle;
}
.qp-vd__tag {
    display: block;
    margin: .4rem 0 0 2.2rem;
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, .95rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--qp-muted-dark);
}

/* Columna 2: la lectura en prosa */
.qp-vd tbody td { font-size: clamp(1rem, 1.15vw, 1.0625rem); line-height: 1.6; }

.qp-vd__note {
    margin: clamp(1.5rem, 2.5vw, 2rem) 0 0;
    padding-left: clamp(14px, 2vw, 20px);
    border-left: 3px solid var(--qp-orange);
    max-width: 72ch;
    color: var(--qp-muted-dark);
    font-size: clamp(.95rem, 1.05vw, 1rem);
}

/* =========================================================================
   09 · USOS — Galería: chips + contact-sheet
   ========================================================================= */
.qp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(2rem, 3.5vw, 2.75rem); padding: 0; list-style: none; }
.qp-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 18px;
    border: 2px solid var(--qp-ink);
    border-radius: 9999px;                  /* pill: única excepción al radius 0 */
    font-family: var(--qp-font-body);
    font-weight: 700;
    font-size: clamp(.92rem, 1.05vw, 1rem);
    color: var(--qp-ink);
    text-decoration: none;
    background: var(--qp-white);
    transition:
        background-color var(--qp-motion-base) var(--qp-ease-out),
        color var(--qp-motion-base) var(--qp-ease-out);
}
.qp-chip:hover,
.qp-chip:focus-visible { background: var(--qp-ink); color: var(--qp-paper); text-decoration: none; }
.qp-chip:active { background: var(--qp-orange); color: var(--qp-ink); border-color: var(--qp-orange-deep); }

.qp-sheet {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(12px, 1.8vw, 20px);
}
.qp-sheet figure {
    margin: 0;
    border: 2px solid var(--qp-ink);
    background: var(--qp-white);
}
.qp-sheet img { width: 100%; height: auto; display: block; border-bottom: 2px solid var(--qp-ink); }
.qp-sheet figcaption {
    padding: 9px 12px;
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, .95rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--qp-ink);
}

/* Cierre del bloque de usos: el puente al hub */
.qp-bridge {
    margin-top: clamp(2.25rem, 4vw, 3.25rem);
    border: 2px solid var(--qp-ink);
    background: var(--qp-paper);
    padding: clamp(22px, 3.5vw, 40px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(18px, 3vw, 32px);
    align-items: center;
}
.qp-bridge__title { margin: 0 0 .5rem; }
.qp-bridge__text  { margin: 0; max-width: 56ch; color: var(--qp-muted); }

/* =========================================================================
   10 · HISTORIA — Periódico: DropCap + marginalia
   ========================================================================= */
.qp-marginalia {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .38fr);
    gap: clamp(24px, 5vw, 64px);
    align-items: start;
}
.qp-marginalia__main { max-width: 66ch; }
.qp-dropcap {
    float: left;
    font-family: var(--qp-font-accent);
    font-style: italic;
    font-size: clamp(4rem, 8vw, 6rem);
    line-height: .82;
    color: var(--qp-orange-deep);
    padding: .1em .15em 0 0;
    margin-top: .05em;
}
.qp-marginalia__notes {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 24px);
    padding-left: clamp(16px, 2vw, 24px);
    border-left: 3px solid var(--qp-orange);
}
.qp-marginalia__note { margin: 0; font-size: clamp(.94rem, 1.05vw, 1rem); line-height: 1.5; color: var(--qp-muted); }
.qp-marginalia__note strong {
    display: block;
    font-family: var(--qp-font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--qp-ink);
    margin-bottom: .3rem;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

/* =========================================================================
   11 · FAQ — details/summary + ax-faq.js
   ========================================================================= */
.qp-faq { border-top: 2px solid var(--qp-ink); }
.qp-faq__item { border-bottom: 1px solid var(--qp-rule); }
.qp-faq__q {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: clamp(16px, 2.5vw, 22px) 58px clamp(16px, 2.5vw, 22px) 8px;
    transition: transform var(--qp-motion-base) var(--qp-ease-out);
}
.qp-faq__q::-webkit-details-marker { display: none; }
.qp-faq__q::before {                       /* barra side-shift */
    content: "";
    position: absolute;
    left: -12px;
    top: 12px;
    bottom: 12px;
    width: 0;
    background: var(--qp-orange);
    transition: width var(--qp-motion-base) var(--qp-ease-out);
}
.qp-faq__q:hover { transform: translateX(4px); }
.qp-faq__q:hover::before { width: 3px; }
.qp-faq__q h3 {
    display: inline;
    margin: 0;
    font-family: var(--qp-font-body);
    font-weight: 800;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.4;
    color: var(--qp-ink);
}
.qp-faq__q::after {                        /* +/− */
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 2px solid var(--qp-ink);
    font-family: var(--qp-font-display);
    font-size: 1.15rem;
    line-height: 1;
    transition:
        background-color var(--qp-motion-base) var(--qp-ease-out),
        color var(--qp-motion-base) var(--qp-ease-out);
}
.qp-faq__item[open] .qp-faq__q::after { content: "−"; background: var(--qp-ink); color: var(--qp-paper); }
.qp-faq__a { padding: 0 8px clamp(18px, 2.5vw, 24px); max-width: 72ch; }
.qp-faq__a p { margin: 0 0 .8rem; color: var(--qp-ink); }
.qp-faq__a p:last-child { margin-bottom: 0; }
.qp-faq__a .qp-mono { display: inline-block; color: var(--qp-orange-deep); margin-bottom: .4rem; }

/* =========================================================================
   12 · CTA FINAL — mega-text sobre ink
   ========================================================================= */
.qp-cta { position: relative; isolation: isolate; overflow: hidden; }
.qp-cta__mega {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--qp-font-display);
    font-size: clamp(7rem, 24vw, 20rem);
    line-height: 1;
    text-transform: uppercase;
    color: var(--qp-rule-on-dark);
    z-index: -1;
    pointer-events: none;
    white-space: nowrap;
}
.qp-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.qp-cta__title { margin: 0 0 clamp(1rem, 2vw, 1.5rem); }
.qp-cta__sub   { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); color: var(--qp-muted-dark); max-width: 50ch; }
.qp-cta__actions { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 20px); }
.qp-cta__media { margin: 0; }
.qp-cta__media a { display: block; border: 2px solid var(--qp-paper); }
.qp-cta__media img { width: 100%; height: auto; display: block; }
.qp-cta__media figcaption {
    margin-top: .6rem;
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, .95rem);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--qp-muted-dark);
}

/* =========================================================================
   BOTÓN FLOTANTE DE NAVEGACIÓN (ax-fab.js · [data-ax-fab])
   Se apila junto a los flotantes globales (.btn-you / .btn-wsp, right:16
   bottom:98-223, z-index:100) y abre el panel hacia arriba, por encima de
   ellos. z-index 110: sobre los flotantes, bajo el header (999).
   ========================================================================= */
.qp-fab {
    /* Vive FUERA de .qp-page (que lleva overflow-x: hidden) para que ningún
       contexto de recorte pueda afectar al fixed: por eso redeclara aquí los
       tokens que usa, con el mismo fallback a --ax-*. */
    --qp-ink:         var(--ax-ink, #1F2530);
    --qp-paper:       var(--ax-paper, #FAF6EE);
    --qp-white:       var(--ax-white, #FFFFFF);
    --qp-orange:      var(--ax-orange, #F15A29);
    --qp-orange-deep: var(--ax-orange-deep, #B0401A);
    --qp-purple:      var(--ax-purple, #6A52A2);
    --qp-muted:       var(--ax-muted, #6E6A60);
    --qp-rule:        rgba(31, 37, 48, 0.16);
    --qp-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --qp-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --qp-font-mono:    var(--ax-font-mono, 'JetBrains Mono', ui-monospace, 'Courier New', monospace);
    --qp-motion-fast:  140ms;
    --qp-motion-base:  220ms;
    --qp-ease-out:     cubic-bezier(.22, 1, .36, 1);

    position: fixed;
    right: 16px;
    bottom: 24px;
    z-index: 110;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font-family: var(--qp-font-body);
}
.qp-fab.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity var(--qp-motion-base) var(--qp-ease-out),
        visibility var(--qp-motion-base),
        transform var(--qp-motion-base) var(--qp-ease-out);
}

.qp-fab__toggle {
    box-sizing: border-box;
    order: 2;                      /* el toggle abajo, el panel encima */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 14px 20px;
    background: var(--qp-ink);
    color: var(--qp-paper);
    border: 2px solid var(--qp-ink);
    cursor: pointer;
    font-family: var(--qp-font-display);
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 5px 5px 0 var(--qp-orange);
    transition:
        transform var(--qp-motion-fast) var(--qp-ease-out),
        box-shadow var(--qp-motion-fast) var(--qp-ease-out);
}
.qp-fab__toggle i { font-size: 1.1em; color: var(--qp-orange); }
.qp-fab__toggle:hover  { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--qp-orange); }
.qp-fab__toggle:active { transform: translate(1px, 1px);   box-shadow: 3px 3px 0 var(--qp-orange); }
.qp-fab.is-open .qp-fab__toggle i::before { content: "\f00d"; }   /* fa-times */

.qp-fab__panel {
    order: 1;
    box-sizing: border-box;
    width: min(310px, calc(100vw - 32px));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--qp-white);
    border: 2px solid var(--qp-ink);
    border-top: 3px solid var(--qp-orange);
    box-shadow: 7px 7px 0 var(--qp-ink);
    padding: clamp(14px, 2vw, 18px);
}
.qp-fab__panel[hidden] { display: none; }

.qp-fab__title {
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, 1rem);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--qp-ink);
    margin: 0 0 10px;
}
.qp-fab__list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    border-top: 1px solid var(--qp-rule);
}
.qp-fab__list a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--qp-rule);
    color: var(--qp-ink);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    transition:
        background-color var(--qp-motion-fast) var(--qp-ease-out),
        color var(--qp-motion-fast) var(--qp-ease-out),
        padding-left var(--qp-motion-fast) var(--qp-ease-out);
}
.qp-fab__list a:hover,
.qp-fab__list a:focus-visible {
    background: var(--qp-ink);
    color: var(--qp-paper);
    padding-left: 12px;
    text-decoration: none;
}
.qp-fab__num {
    flex: 0 0 auto;
    font-family: var(--qp-font-mono);
    font-size: clamp(.86rem, 1.1vw, .95rem);
    letter-spacing: .08em;
    color: var(--qp-muted);
    font-variant-numeric: tabular-nums;
}
.qp-fab__list a:hover .qp-fab__num,
.qp-fab__list a:focus-visible .qp-fab__num { color: var(--qp-orange); }

.qp-fab__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 16px;
    background: var(--qp-orange);
    color: var(--qp-white);
    border: 2px solid var(--qp-ink);
    text-decoration: none;
    font-family: var(--qp-font-display);
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.15;
    text-align: center;
    box-shadow: 0 4px 0 var(--qp-orange-deep);
    transition:
        transform var(--qp-motion-fast) var(--qp-ease-out),
        box-shadow var(--qp-motion-fast) var(--qp-ease-out);
}
.qp-fab__cta:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 var(--qp-orange-deep); color: var(--qp-white); text-decoration: none; }
.qp-fab__cta:active { transform: translateY(1px);  box-shadow: 0 2px 0 var(--qp-orange-deep); }

.qp-fab button:focus-visible,
.qp-fab a:focus-visible { outline: 3px solid var(--qp-purple); outline-offset: 3px; }

/* Móvil: el panel ocupa el ancho disponible y el toggle se compacta para
   no chocar con los flotantes globales de WhatsApp/YouTube. */
@media (max-width: 575px) {
    .qp-fab { right: 12px; bottom: 16px; }
    .qp-fab__panel { width: calc(100vw - 24px); max-height: 62vh; box-shadow: 5px 5px 0 var(--qp-ink); }
    .qp-fab__toggle { padding: 13px 16px; font-size: .9rem; box-shadow: 4px 4px 0 var(--qp-orange); }
}
/* Pantallas cortas: el panel no debe comerse todo el alto útil */
@media (max-height: 560px) {
    .qp-fab__panel { max-height: 54vh; }
}

@media print { .qp-fab { display: none; } }

/* ─── Includes compartidos: respiro entre bloques ──────────────────────── */
.qp-shared-include { padding: 32px 0; }

/* ─── Accesibilidad ────────────────────────────────────────────────────── */
.qp-page a:focus-visible,
.qp-page summary:focus-visible,
.qp-page button:focus-visible {
    outline: 3px solid var(--qp-purple);
    outline-offset: 3px;
}
.qp-section--ink a:focus-visible,
.qp-versus__pane--dark a:focus-visible { outline-color: var(--qp-yellow); }

@media (prefers-reduced-motion: reduce) {
    .qp-page *,
    .qp-page *::before,
    .qp-page *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
    .qp-chain { grid-template-columns: repeat(3, 1fr); }
    .qp-chain::before { display: none; }     /* la cadena solo lee bien en una fila */
    .qp-sheet { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
    .qp-dossier { grid-template-columns: 1fr; }
    .qp-props   { grid-template-columns: repeat(2, 1fr); }
    .qp-samples { grid-template-columns: repeat(2, 1fr); }
    .qp-cards   { grid-template-columns: repeat(2, 1fr); }
    .qp-marginalia { grid-template-columns: 1fr; }
    .qp-marginalia__notes {
        border-left: 0;
        border-top: 3px solid var(--qp-orange);
        padding-left: 0;
        padding-top: 18px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
    }
    .qp-marginalia__note { flex: 1 1 220px; }
    .qp-cta__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .qp-versus { grid-template-columns: 1fr; }
    .qp-versus__pane--light + .qp-versus__pane--dark { border-left: 0; border-top: 2px solid var(--qp-ink); }
    .qp-blend__legend { grid-template-columns: 1fr; }
    .qp-bridge { grid-template-columns: 1fr; }
    .qp-sheet  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .qp-lateral { grid-template-columns: 1fr; }
    .qp-lateral__rail { writing-mode: horizontal-tb; transform: none; padding-right: 0; }
    .qp-chain { grid-template-columns: repeat(2, 1fr); }
    .qp-claim { padding-right: 0; padding-top: clamp(58px, 15vw, 76px); }
    .qp-burst { top: 0; }
    .qp-index-head { flex-wrap: wrap; }
    .qp-index-head__leader { display: none; }
    .qp-index-head__tally  { flex-basis: 100%; }
    .qp-blend__seg { font-size: 1rem; }
}

/* La tabla colapsa a fichas apiladas: el <th> encabeza cada bloque */
@media (max-width: 620px) {
    .qp-vd thead { display: none; }
    .qp-vd tbody tr { display: block; border-top: 2px solid var(--qp-paper); }
    .qp-vd tbody tr:first-child { border-top: 0; }
    .qp-vd tbody th,
    .qp-vd tbody td { display: block; border-top: 0; width: auto; min-width: 0; }
    .qp-vd tbody td::before {
        content: attr(data-columna);
        display: block;
        font-family: var(--qp-font-mono);
        font-size: clamp(.86rem, 1.1vw, .95rem);
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--qp-muted-dark);
        margin-bottom: .3rem;
    }
    .qp-vd tbody th { padding-bottom: 0; }
}

@media (max-width: 460px) {
    .qp-props   { grid-template-columns: 1fr; }
    .qp-samples { grid-template-columns: 1fr; }
    .qp-cards   { grid-template-columns: 1fr; }
    .qp-chain   { grid-template-columns: 1fr; }
    .qp-sheet   { grid-template-columns: 1fr; }
}