/* =========================================================================
   Arletex Design System v3.5 — Tela Popelina (/telas/popelina)
   Hoja editorial por página. Prefijo de clase y de token: pop- / --pop-*.
   Tokens locales con fallback a --ax-* global y, si no, a hex del sistema.
   ─────────────────────────────────────────────────────────────────────────
   CONCEPTO: "El armario de camisas". La popelina es la tela de camisas y
   uniformes; la página se lee como una CARTA DE TONOS / cuello de camisa.
   Firma: la fila de muestras (carta de tonos) + la costura mono vertical +
   el burst amarillo "MÁS VENDIDA". Se respeta ≥55% blanco; ink como
   puntuación; orange como acento; yellow como señal escasa; purple x1.

   Mapa de secciones (registro · apertura · marco · fondo · hover):
     00 Marquee+JumpNav   —          · cinta + nav         · Top/Bottom · INK   · ghost
     01 Hero intro        Vitrina    · SwatchHead          · Top-rule   · white · press
     02 Tipos (scroller)  Galería    · Dossier             · Bleed      · white · lift
     04 Colores (incl.)   Vitrina    · SwatchHead          · Side-rule  · cream · caption
     05 Banner envíos     Galería    · figura link         · Bleed      · white · lift
     06 Usos (scroller)   Periódico  · IndexRow            · Brick      · paper · ink-flood
     07 Banner rollos     Galería    · figura link         · Bleed      · white · lift
     08 Variante Stretch  Dossier    · DropCap             · Double     · white · press
     10 Popelinas Blancas Periódico  · RunIn               · Margin     · cream · lift
     11 ¿Cuál ideal? gal. Galería    · NumberProtagonist   · Brick      · white · caption
     12 Más vendida       Fanzine    · NumberProtagonist   · Overlap    · INK   · press
     13 Tabla comparativa Dossier    · LabelLateral (mono) · Index-tab  · paper · ink-flood
     14 ¿Qué es? + video  Carta      · Postmark            · Full-frame · cream · lift
     15 FAQ               Dossier    · RunIn + <details>   · Top-rule   · white · side
     16 CTA final         Manifiesto · MegaTextBg          · Bleed+grad · INK   · press
   ========================================================================= */

/* ─── Tokens locales + reset de caja (scoped) ──────────────────────────── */
.pop-page,
.pop-section {
    --pop-ink:           var(--ax-ink, #1F2530);
    --pop-ink-soft:      #14181f;
    --pop-paper:         var(--ax-paper, #FAF6EE);
    --pop-cream:         var(--ax-cream, #F2EDE4);
    --pop-white:         var(--ax-white, #FFFFFF);
    --pop-orange:        var(--ax-orange, #F15A29);
    --pop-orange-deep:   var(--ax-orange-deep, #B0401A);
    --pop-purple:        var(--ax-purple, #6A52A2);
    --pop-yellow:        var(--ax-yellow, #FFEB3B);
    --pop-yellow-deep:   var(--ax-yellow-deep, #C9A200);
    --pop-muted:         var(--ax-muted, #6E6A60);
    --pop-muted-dark:    var(--ax-muted-dark, #A8A39A);
    --pop-rule:          rgba(31, 37, 48, 0.16);
    --pop-rule-on-dark:  rgba(250, 246, 238, 0.18);
    --pop-whatsapp:      var(--ax-whatsapp, #25D366);
    --pop-whatsapp-deep: #0F8C40;
    --pop-font-display:  var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --pop-font-accent:   var(--ax-font-accent, 'Fraunces', Georgia, serif);
    --pop-font-body:     var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --pop-font-mono:     var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);

    --pop-ease:          cubic-bezier(0.22, 1, 0.36, 1);
    --pop-motion-fast:   0.16s;
}

/* Envuelve solo las secciones rediseñadas (NO el slide/breadcrumb).
   overflow-x:clip contiene sombras offset, mega-text y bleed sin romper el
   sticky de la FAQ (clip en X deja el eje Y libre). */
.pop-page { overflow-x: clip; }
.pop-page *,
.pop-page *::before,
.pop-page *::after { box-sizing: border-box; }

/* ─── Section base ──────────────────────────────────────────────────────── */
.pop-section {
    width: 100%;
    position: relative;
    background: var(--pop-white);
    color: var(--pop-ink);
    font-family: var(--pop-font-body);
    padding: clamp(48px, 8vw, 96px) 0;
}
.pop-section--paper { background: var(--pop-paper); }
.pop-section--cream { background: var(--pop-cream); color: var(--pop-ink); }
.pop-section--tight { padding: clamp(26px, 4vw, 44px) 0; }
/* Anclas de la JumpNav bajo header fixed (113/104/158 → margen seguro) */
.pop-section[id] { scroll-margin-top: 100px; }
@media (max-width: 991px) { .pop-section[id] { scroll-margin-top: 116px; } }
@media (max-width: 767px) { .pop-section[id] { scroll-margin-top: 170px; } }

.pop-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
.pop-container--narrow { max-width: 760px; }

/* ─── Eyebrow stamp (rectángulo recto — firma editorial, radius 0) ──────── */
.pop-eyebrow {
    font-family: var(--pop-font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.15rem);
    color: var(--pop-muted);
    line-height: 1.4;
    margin: 0 0 clamp(16px, 2vw, 22px);
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.pop-eyebrow[data-stamp]:not([data-stamp=""])::before {
    content: attr(data-stamp);
    font-family: var(--pop-font-display);
    font-style: normal;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    line-height: 1;
    border: 1px solid var(--pop-orange-deep);
    color: var(--pop-orange-deep);   /* orange-deep ≈ 5.9:1 sobre blanco — AA en texto pequeño */
    flex-shrink: 0;
}

/* ─── Display title Anton + <em> Fraunces (voz humana, N-04/N-05) ───────── */
.pop-title {
    font-family: var(--pop-font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--pop-ink);
    line-height: 0.92;
    letter-spacing: -0.005em;
    margin: 0;
}
.pop-title--xl { font-size: clamp(2.5rem, 7.3vw, 5.5rem) !important; }
.pop-title--md { font-size: clamp(1.9rem, 4.4vw, 3.3rem) !important; }
.pop-title--sm { font-size: clamp(1.55rem, 3.4vw, 2.5rem) !important; }
.pop-title--xs { font-size: clamp(1.3rem, 2.6vw, 1.95rem) !important; }
.pop-title em {
    font-family: var(--pop-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;            /* la <em> Fraunces va recta y minúscula */
    letter-spacing: -0.025em;
    color: var(--pop-orange);
}
.pop-title a { color: inherit; text-decoration: none; transition: color var(--pop-motion-fast) var(--pop-ease); }
.pop-title a:hover { color: var(--pop-orange); }

/* ─── Lead / prosa ──────────────────────────────────────────────────────── */
.pop-lead {
    font-family: var(--pop-font-body);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.65;
    color: var(--pop-ink);
    max-width: 66ch;
    margin: 0;
}
.pop-lead strong { font-weight: 800; }
.pop-lead a {
    color: var(--pop-ink);
    text-decoration: underline;
    text-decoration-color: var(--pop-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: color var(--pop-motion-fast) var(--pop-ease);
}
.pop-lead a:hover { color: var(--pop-orange); }

.pop-prose { max-width: 74ch; }
.pop-prose p {
    font-family: var(--pop-font-body);
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.7;
    color: var(--pop-ink);
    margin: 0 0 1.1em;
}
.pop-prose p:last-child { margin-bottom: 0; }
.pop-prose strong { font-weight: 800; }
.pop-prose ul { margin: 0 0 1.1em; padding-left: 1.1em; }
.pop-prose li { font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; margin-bottom: 0.5em; color: var(--pop-ink); }
.pop-prose li strong { font-weight: 800; }
.pop-prose a {
    color: var(--pop-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--pop-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: color var(--pop-motion-fast) var(--pop-ease), text-underline-offset var(--pop-motion-fast) var(--pop-ease);
}
.pop-prose a:hover { color: var(--pop-orange); text-underline-offset: 4px; }

/* ─── Acciones + CTA chunky (press-chunky · sombra sólida · radius 0) ────── */
.pop-actions {
    margin-top: clamp(24px, 3.5vw, 36px);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.pop-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 30px;
    min-height: 44px;
    font-family: var(--pop-font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.32rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.05;
    text-decoration: none;
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--pop-motion-fast) var(--pop-ease),
                box-shadow var(--pop-motion-fast) var(--pop-ease);
}
.pop-cta--whatsapp {
    background: var(--pop-whatsapp);
    color: #fff;
    box-shadow: 8px 8px 0 var(--pop-ink);
}
.pop-cta--whatsapp i { font-size: 1.3em; line-height: 1; }
.pop-cta--whatsapp:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 var(--pop-ink);
    color: #fff;
    text-decoration: none;
}
.pop-cta--whatsapp:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--pop-ink); }
.pop-cta--orange {
    background: var(--pop-orange);
    color: #fff;
    box-shadow: 8px 8px 0 var(--pop-ink);
}
.pop-cta--orange:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--pop-ink); color: #fff; text-decoration: none; }
.pop-cta--orange:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--pop-ink); }
.pop-cta:focus-visible { outline: 3px solid var(--pop-orange); outline-offset: 3px; }
.pop-cta--sm { padding: 12px 22px; font-size: clamp(0.95rem, 1.3vw, 1.12rem); box-shadow: 6px 6px 0 var(--pop-ink); }
.pop-cta--sm:hover  { box-shadow: 8px 8px 0 var(--pop-ink); }
.pop-cta--sm:active { box-shadow: 3px 3px 0 var(--pop-ink); }

/* ─── Botón sólido naranja / outline (navegación a otras TSG) ───────────── */
.pop-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 13px 26px;
    min-height: 44px;
    font-family: var(--pop-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    cursor: pointer;
    color: var(--pop-ink);
    background: transparent;
    transition: transform var(--pop-motion-fast) var(--pop-ease),
                box-shadow var(--pop-motion-fast) var(--pop-ease),
                background var(--pop-motion-fast) var(--pop-ease),
                color var(--pop-motion-fast) var(--pop-ease);
}
.pop-btn i { transition: transform var(--pop-motion-fast) var(--pop-ease); }
.pop-btn--outline:hover { background: var(--pop-ink); color: var(--pop-white); text-decoration: none; }
.pop-btn--outline:hover i { transform: translateX(4px); }
.pop-btn--solid {
    background: var(--pop-orange);
    color: #fff;
    border-color: var(--pop-ink);
    box-shadow: 0 6px 0 var(--pop-orange-deep);
}
.pop-btn--solid:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--pop-orange-deep); color: #fff; }
.pop-btn--solid:hover i { transform: translateX(4px); }
.pop-btn--solid:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--pop-orange-deep); }
.pop-btn:focus-visible { outline: 3px solid var(--pop-orange); outline-offset: 3px; }

/* ─── Figura editorial (Galería · frame-chunky · radius 0) ─────────────── */
.pop-figure {
    margin: 0;
    background: var(--pop-white);
    border: 2px solid var(--pop-ink);
    border-top: 3px solid var(--pop-orange);
    box-shadow: 10px 10px 0 var(--pop-ink);
    line-height: 0;
    overflow: hidden;
}
.pop-figure img { display: block; width: 100%; height: auto; }
.pop-figure--banner { margin-top: clamp(28px, 4vw, 48px); }
.pop-figure--link { display: block; position: relative; transition: transform var(--pop-motion-fast) var(--pop-ease), box-shadow var(--pop-motion-fast) var(--pop-ease); }
.pop-figure--link:hover { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--pop-orange); }
/* caption-reveal sobre banners clicables */
.pop-figure__cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: var(--pop-ink);
    color: var(--pop-paper);
    font-family: var(--pop-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
    padding: 9px 14px;
    transform: translateY(100%);
    transition: transform 0.3s var(--pop-ease);
}
.pop-figure__cap i { color: var(--pop-orange); }
.pop-figure--link:hover .pop-figure__cap,
.pop-figure--link:focus-visible .pop-figure__cap { transform: translateY(0); }

/* =========================================================================
   01 · Hero intro — Vitrina · SwatchHead · Top-rule orange
   ========================================================================= */
.pop-section--intro {
    border-top: 3px solid var(--pop-orange);
    padding-top: clamp(34px, 5vw, 60px);
}
.pop-section--intro .pop-title { max-width: 16ch; }
.pop-hero__head { margin-bottom: clamp(18px, 2.6vw, 26px); }

/* ─── SwatchHead — la "carta de tonos" (firma de la página) ──────────────── */
.pop-swatchrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 clamp(20px, 3vw, 30px);
    border: 2px solid var(--pop-ink);
    box-shadow: 6px 6px 0 var(--pop-ink);
    width: max-content;
    max-width: 100%;
}
.pop-swatchrow__chip {
    width: clamp(38px, 6vw, 56px);
    height: clamp(38px, 6vw, 56px);
    background: var(--tone, var(--pop-cream));
    position: relative;
    border-right: 1px solid rgba(31,37,48,0.25);
}
.pop-swatchrow__chip:last-child { border-right: 0; }
.pop-swatchrow__chip::after {
    content: attr(data-name);
    position: absolute;
    left: 50%; bottom: calc(100% + 7px);
    transform: translateX(-50%);
    background: var(--pop-ink);
    color: var(--pop-paper);
    font-family: var(--pop-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 3px 7px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--pop-motion-fast) var(--pop-ease);
    max-width: 60vw;
}
.pop-swatchrow__chip:hover::after { opacity: 1; }
.pop-swatchrow__tag {
    align-self: center;
    font-family: var(--pop-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pop-muted);
    padding: 0 14px;
}

/* =========================================================================
   Aperturas (cabeceras editoriales) — Dossier / RunIn / NumberProtagonist /
   LabelLateral / Postmark
   ========================================================================= */
/* Dossier — eyebrow + título + rule 2px ink */
.pop-header--dossier {
    margin-bottom: clamp(26px, 4vw, 40px);
    padding-bottom: clamp(14px, 2.2vw, 22px);
    border-bottom: 2px solid var(--pop-ink);
}
.pop-header--dossier .pop-title { margin-top: 8px; }
.pop-header--dossier .pop-subtitle { margin-top: clamp(10px, 1.4vw, 14px); }

/* Cabecera #tipos en 2 columnas: texto + callout de mayoreo (rule full-width) */
.pop-tipohead {
    display: grid;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    margin-bottom: clamp(26px, 4vw, 40px);
    padding-bottom: clamp(16px, 2.4vw, 24px);
    border-bottom: 2px solid var(--pop-ink);
}
.pop-tipohead__text .pop-title { margin-top: 8px; }
.pop-tipohead__text .pop-subtitle { margin-top: clamp(10px, 1.4vw, 14px); }
@media (min-width: 880px) {
    .pop-tipohead { grid-template-columns: minmax(0, 1fr) auto; }
    .pop-tipohead .pop-mayoreo-cta { width: clamp(280px, 26vw, 340px); }
}

/* ── Callout "Cotiza al mayoreo · Pedir precio" → ancla del formulario ──── */
.pop-mayoreo-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: var(--pop-orange);
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    padding: clamp(20px, 2.5vw, 28px);
    text-decoration: none;
    box-shadow: 10px 10px 0 var(--pop-ink);
    transition: transform var(--pop-motion-fast) var(--pop-ease),
                box-shadow var(--pop-motion-fast) var(--pop-ease);
}
.pop-mayoreo-cta:hover,
.pop-mayoreo-cta:focus-visible { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--pop-ink); text-decoration: none; }
.pop-mayoreo-cta:active { transform: translate(2px, 2px); box-shadow: 6px 6px 0 var(--pop-ink); }
.pop-mayoreo-cta__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--pop-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pop-ink);
}
.pop-mayoreo-cta__title {
    font-family: var(--pop-font-display);
    text-transform: uppercase;
    line-height: 0.92;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    color: var(--pop-ink);
    letter-spacing: 0.01em;
}
.pop-mayoreo-cta__title em {
    font-family: var(--pop-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    color: var(--pop-paper);
    letter-spacing: -0.01em;
}
.pop-mayoreo-cta__action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    background: var(--pop-ink);
    color: var(--pop-paper);
    font-family: var(--pop-font-body);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 20px;
    box-shadow: 0 5px 0 #000;
    transition: transform var(--pop-motion-fast) var(--pop-ease),
                box-shadow var(--pop-motion-fast) var(--pop-ease);
}
.pop-mayoreo-cta__action i { transition: transform var(--pop-motion-fast) var(--pop-ease); }
.pop-mayoreo-cta:hover .pop-mayoreo-cta__action { transform: translateY(-2px); box-shadow: 0 7px 0 #000; }
.pop-mayoreo-cta:hover .pop-mayoreo-cta__action i { transform: translateY(3px); }
@media (max-width: 575px) {
    .pop-mayoreo-cta { box-shadow: 6px 6px 0 var(--pop-ink); }
    .pop-mayoreo-cta:hover, .pop-mayoreo-cta:focus-visible { box-shadow: 9px 9px 0 var(--pop-ink); }
}

/* Scroll suave a anclas (#cotizacion-mayoreo) si el usuario no pidió menos movimiento */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
    .pop-mayoreo-cta:hover, .pop-mayoreo-cta:focus-visible,
    .pop-mayoreo-cta:hover .pop-mayoreo-cta__action,
    .pop-mayoreo-cta:hover .pop-mayoreo-cta__action i { transform: none; }
}

.pop-subtitle {
    font-family: var(--pop-font-accent);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    color: var(--pop-muted);
    line-height: 1.5;
    margin: 0;
}

/* RunInHeadline — eyebrow inline + em-dash + título, hairline */
.pop-runin {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    margin-bottom: clamp(22px, 3vw, 34px);
    padding-bottom: clamp(14px, 2vw, 20px);
    border-bottom: 1px solid var(--pop-rule);
}
.pop-eyebrow--inline { margin: 0; }
.pop-runin__divider {
    font-family: var(--pop-font-accent);
    font-style: italic;
    color: var(--pop-orange);
    font-size: 1.5em;
    line-height: 1;
    flex-shrink: 0;
}
@media (max-width: 600px) { .pop-runin__divider { display: none; } }

/* NumberProtagonist — número gigante naranja + cabecera */
.pop-numhead {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.5rem, 2vw, 1rem);
    align-items: end;
    margin-bottom: clamp(20px, 3vw, 32px);
    padding-bottom: clamp(16px, 2.4vw, 24px);
    border-bottom: 1px solid var(--pop-rule);
}
@media (min-width: 768px) {
    .pop-numhead { grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.2rem); }
}
.pop-numhead__num {
    font-family: var(--pop-font-display);
    font-size: clamp(3.75rem, 12vw, 7.5rem);
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--pop-orange);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
}
.pop-numhead__num small {
    font-family: var(--pop-font-accent);
    font-style: italic;
    font-size: 0.22em;
    letter-spacing: 0;
    text-transform: lowercase;
    color: var(--pop-muted);
}
.pop-numhead__body { min-width: 0; }
.pop-numhead__body .pop-eyebrow { margin-bottom: clamp(8px, 1.2vw, 12px); }
.pop-numhead__body .pop-title { line-height: 0.95; }

/* LabelLateral — rail mono vertical (costura · firma) */
.pop-lathead {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1rem, 3vw, 2.4rem);
    align-items: start;
    margin-bottom: clamp(28px, 4.5vw, 46px);
}
.pop-lathead__rail {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: flex;
    align-items: center;
    align-self: stretch;
}
.pop-lathead__rail-mono {
    font-family: var(--pop-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--pop-purple);          /* acento purple x1 en la página */
    white-space: nowrap;
}
.pop-lathead__body { min-width: 0; }
@media (max-width: 640px) {
    .pop-lathead { grid-template-columns: 1fr; gap: 0.5rem; }
    .pop-lathead__rail { writing-mode: horizontal-tb; transform: none; align-self: start; }
}

/* Postmark — dateline / sello editorial (Carta) */
.pop-postmark {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--pop-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pop-muted);
    margin: 0 0 clamp(14px, 2vw, 20px);
}
.pop-postmark::before {
    content: "";
    width: 34px; height: 34px;
    border: 2px solid var(--pop-orange);
    border-radius: 9999px;             /* pill: única excepción al radius 0 */
    display: inline-block;
    flex-shrink: 0;
    background:
        radial-gradient(circle at center, transparent 36%, var(--pop-orange) 37%, var(--pop-orange) 41%, transparent 42%);
}

/* =========================================================================
   02 / 06 · Scroller horizontal (scroll-snap, sin slick) — tipos & usos
   ========================================================================= */
.pop-section--bleed { overflow: hidden; }     /* contiene el bleed del scroller */
.pop-scroller-wrap { position: relative; }
.pop-scroller {
    display: flex;
    gap: clamp(16px, 2vw, 24px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--pop-orange) transparent;
    /* sangra a los bordes del container (page tiene overflow-x:clip) */
    margin: 0 calc(-1 * clamp(20px, 4vw, 48px));
    padding: 8px clamp(20px, 4vw, 48px) 18px;
}
.pop-scroller::-webkit-scrollbar { height: 8px; }
.pop-scroller::-webkit-scrollbar-track { background: var(--pop-rule); }
.pop-scroller::-webkit-scrollbar-thumb { background: var(--pop-orange); }
.pop-scroller > .pop-card {
    flex: 0 0 clamp(248px, 30vw, 320px);
    scroll-snap-align: start;
}
/* Flechas de control (desktop) — wired por pop-popelina.js */
.pop-scroller-nav { display: none; gap: 10px; justify-content: flex-end; margin-bottom: 10px; }
@media (min-width: 920px) { .pop-scroller-nav { display: flex; } }
.pop-scroller-arrow {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    background: var(--pop-white);
    color: var(--pop-ink);
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    box-shadow: 3px 3px 0 var(--pop-ink);
    cursor: pointer;
    transition: background var(--pop-motion-fast) var(--pop-ease),
                color var(--pop-motion-fast) var(--pop-ease),
                transform var(--pop-motion-fast) var(--pop-ease),
                box-shadow var(--pop-motion-fast) var(--pop-ease);
}
.pop-scroller-arrow:hover { background: var(--pop-ink); color: var(--pop-white); }
.pop-scroller-arrow:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pop-ink); }
.pop-scroller-hint {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--pop-font-mono);
    font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--pop-muted);
    margin: 6px 0 0;
}
.pop-scroller-hint i { color: var(--pop-orange); }
@media (min-width: 920px) { .pop-scroller-hint { display: none; } }

/* ─── Card (tipos + usos) · lift-orange ──────────────────────────────────── */
.pop-card {
    display: flex;
    flex-direction: column;
    background: var(--pop-white);
    color: var(--pop-ink);
    border: 1px solid var(--pop-rule);
    border-top: 3px solid var(--pop-orange);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--pop-ink);
    overflow: hidden;
    transition: transform var(--pop-motion-fast) var(--pop-ease),
                box-shadow var(--pop-motion-fast) var(--pop-ease);
}
.pop-card:hover,
.pop-card:focus-within {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--pop-orange);
}
.pop-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    line-height: 0;
    border-bottom: 1px solid var(--pop-rule);
    background: var(--pop-cream);
}
/* El contenedor adopta el ratio real de cada carrusel para que object-fit:cover
   NO recorte: Tipos = 1:1 (imágenes 500/1080 cuadradas) · Usos = 7:5 (700×500). */
#tipos .pop-card__media { aspect-ratio: 1 / 1; }
#usos  .pop-card__media { aspect-ratio: 7 / 5; }
.pop-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.45s var(--pop-ease);
}
.pop-card:hover .pop-card__media img,
.pop-card:focus-within .pop-card__media img { transform: scale(1.045); }
.pop-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(16px, 1.9vw, 22px);
}
.pop-card__title {
    font-family: var(--pop-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--pop-ink);
    margin: 0;
}
.pop-card__title a { color: inherit; text-decoration: none; transition: color var(--pop-motion-fast) var(--pop-ease); }
.pop-card__title a:hover { color: var(--pop-orange); }
.pop-card__desc {
    font-family: var(--pop-font-body);
    font-size: clamp(0.92rem, 1.05vw, 1rem);
    line-height: 1.55;
    color: var(--pop-muted);
    margin: 0;
}
.pop-card__desc strong { color: var(--pop-ink); font-weight: 700; }
.pop-card__desc a {
    color: var(--pop-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--pop-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: color var(--pop-motion-fast) var(--pop-ease);
}
.pop-card__desc a:hover { color: var(--pop-orange); }
.pop-card__cta {
    margin-top: auto;
    padding-top: clamp(10px, 1.4vw, 14px);
}
.pop-card__cta .pop-btn { width: 100%; justify-content: center; }
/* Variante ink-flood para las cards de USO (registro Periódico) */
.pop-card--use { border-top-color: var(--pop-ink); }
.pop-card--use:hover,
.pop-card--use:focus-within { box-shadow: 8px 8px 0 var(--pop-ink); }
.pop-card--use .pop-card__title a:hover { color: var(--pop-orange); }

/* =========================================================================
   04 · Colores — envoltorio del include legacy (catalogo-slick)
   Side-rule + marco editorial alrededor del carrusel existente.
   ========================================================================= */
.pop-section--colores .pop-container { border-left: 3px solid var(--pop-orange); }
@media (max-width: 640px) {
    .pop-section--colores .pop-container {
        border-left: 0;
        border-top: 3px solid var(--pop-orange);
        padding-top: clamp(20px, 5vw, 28px);
    }
}
.pop-colores-frame { margin-top: clamp(22px, 3vw, 34px); }
/* Reestiliza las cabeceras h2 del include de colores a algo discreto */
.pop-section--colores .catalogo-slick h2 {
    font-family: var(--pop-font-body);
    font-size: clamp(0.92rem, 1.1vw, 1.02rem) !important;
    font-weight: 700;
    margin-top: 10px;
}
.pop-section--colores .catalogo-slick h2 a { color: var(--pop-ink); }
.pop-section--colores .catalogo-slick h2 a:hover { color: var(--pop-orange); }

/* =========================================================================
   08 · Variante Stretch — Dossier · DropCap · Double-rule · zigzag
   ========================================================================= */
.pop-section--double-rule {
    border-top: 1px solid var(--pop-rule);
    border-bottom: 1px solid var(--pop-rule);
}
.pop-zigzag .pop-zz {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 60px);
    align-items: center;
}
.pop-zigzag .pop-zz + .pop-zz { margin-top: clamp(44px, 8vw, 92px); }
.pop-zz__text  { min-width: 0; }
.pop-zz__media { order: 2; margin: 0; }
.pop-zz--rev .pop-zz__text  { order: 2; }
.pop-zz--rev .pop-zz__media { order: 1; }
.pop-zz__text .pop-title   { margin-bottom: clamp(14px, 2vw, 20px); }
.pop-zz__text .pop-prose   { max-width: 60ch; }
.pop-zz__text .pop-actions { margin-top: clamp(20px, 3vw, 28px); }
@media (max-width: 860px) {
    .pop-zigzag .pop-zz { grid-template-columns: 1fr; gap: clamp(20px, 5vw, 30px); }
    .pop-zz__media, .pop-zz--rev .pop-zz__media,
    .pop-zz__text,  .pop-zz--rev .pop-zz__text { order: 0; }
    .pop-zigzag .pop-zz + .pop-zz { margin-top: clamp(38px, 9vw, 52px); }
}
.pop-dropcap { max-width: 64ch; }
.pop-dropcap p:first-of-type::first-letter {
    float: left;
    font-family: var(--pop-font-accent);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(3.2rem, 7vw, 4.8rem);
    line-height: 0.78;
    color: var(--pop-orange);
    padding: 0.06em 0.12em 0 0;
    margin-top: 0.04em;
}
/* Acciones lado a lado (variante stretch) */
.pop-actions--split { gap: 12px; }
.pop-actions--split .pop-cta,
.pop-actions--split .pop-btn { flex: 1 1 220px; justify-content: center; }

/* =========================================================================
   10 · Popelinas Blancas — Periódico · RunIn · Margin-frame · zigzag dúo
   ========================================================================= */
.pop-section--margin .pop-container {
    border: 2px solid var(--pop-ink);
    padding-top: clamp(28px, 4vw, 44px);
    padding-bottom: clamp(28px, 4vw, 44px);
    box-shadow: 8px 8px 0 var(--pop-ink);
    background: var(--pop-white);
}
.pop-spec {
    list-style: none;
    margin: clamp(14px, 2vw, 18px) 0 0;
    padding: 0;
    border-top: 1px solid var(--pop-rule);
}
.pop-spec li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--pop-rule);
    font-family: var(--pop-font-body);
    font-size: clamp(0.92rem, 1.1vw, 1rem);
}
.pop-spec li span:first-child { font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82em; color: var(--pop-muted); align-self: center; }
.pop-spec li span:last-child { font-family: var(--pop-font-mono); color: var(--pop-ink); }

/* =========================================================================
   11 · ¿Cuál ideal? — Galería · brick / contact-sheet (6 tiles de stock)
   ========================================================================= */
/* Mosaico editorial de 6 tiles. Móvil-first: 2 columnas uniformes (span 2,
   sin huecos). Desktop: mosaico 3×3 EXACTO con grid-template-areas (3 tiles
   altos + 3 cortos, cierre perfecto sin borde dentado). */
.pop-brick {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(124px, 26vw, 200px);
    gap: clamp(10px, 1.4vw, 16px);
}
.pop-brick__tile {
    position: relative;
    display: block;
    overflow: hidden;
    border: 2px solid var(--pop-ink);
    box-shadow: 5px 5px 0 var(--pop-ink);
    grid-row: span 2;
    line-height: 0;
    text-decoration: none;
    transition: transform var(--pop-motion-fast) var(--pop-ease), box-shadow var(--pop-motion-fast) var(--pop-ease);
}
.pop-brick__tile:hover,
.pop-brick__tile:focus-visible { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--pop-orange); }
.pop-brick__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--pop-ease); }
.pop-brick__tile:hover img { transform: scale(1.06); }
.pop-brick__cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(20,24,31,0.86), transparent);
    color: var(--pop-paper);
    font-family: var(--pop-font-body);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
    padding: 26px 12px 11px;
}
.pop-brick__cap i { color: var(--pop-orange); margin-left: 4px; transition: transform var(--pop-motion-fast) var(--pop-ease); }
.pop-brick__tile:hover .pop-brick__cap i { transform: translateX(4px); }
@media (min-width: 761px) {
    .pop-brick {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: clamp(108px, 14.5vw, 174px);
        grid-template-areas:
            "t1 t2 t3"
            "t1 t4 t5"
            "t6 t4 t5";
    }
    .pop-brick__tile { grid-row: auto; }
    .pop-brick__tile:nth-child(1) { grid-area: t1; }   /* alto */
    .pop-brick__tile:nth-child(2) { grid-area: t2; }
    .pop-brick__tile:nth-child(3) { grid-area: t3; }
    .pop-brick__tile:nth-child(4) { grid-area: t4; }   /* alto */
    .pop-brick__tile:nth-child(5) { grid-area: t5; }   /* alto */
    .pop-brick__tile:nth-child(6) { grid-area: t6; }
}
@media (max-width: 460px) {
    .pop-brick { gap: 8px; grid-auto-rows: clamp(120px, 40vw, 168px); }
    .pop-brick__cap { font-size: 0.72rem; padding: 20px 9px 8px; }
}

/* =========================================================================
   Sección INK (Fanzine "Más vendida" + CTA final) — puntuación dramática
   ========================================================================= */
.pop-section--ink {
    background: var(--pop-ink);
    color: var(--pop-paper);
    overflow: hidden;
}
.pop-section--ink::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(250, 246, 238, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(250, 246, 238, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.pop-section--ink > .pop-container { position: relative; z-index: 1; }
.pop-section--ink .pop-title { color: var(--pop-paper); }
.pop-section--ink .pop-eyebrow { color: rgba(250, 246, 238, 0.62); }
.pop-section--ink .pop-lead { color: rgba(250, 246, 238, 0.82); }
.pop-section--ink .pop-lead strong { color: var(--pop-paper); }
.pop-section--ink .pop-prose p { color: rgba(250, 246, 238, 0.82); }
.pop-section--ink .pop-prose li { color: rgba(250, 246, 238, 0.82); }
.pop-section--ink .pop-prose li::marker { color: var(--pop-orange); }
.pop-section--ink .pop-prose strong { color: var(--pop-paper); }
.pop-section--ink .pop-prose a { color: var(--pop-paper); }
.pop-section--ink .pop-prose a:hover { color: var(--pop-orange); }
.pop-section--ink .pop-numhead { border-bottom-color: var(--pop-rule-on-dark); }
.pop-section--ink .pop-numhead__num small { color: var(--pop-muted-dark); }
/* stamp relleno sobre ink (la señal gana contraste) */
.pop-section--ink .pop-eyebrow[data-stamp]:not([data-stamp=""])::before {
    background: var(--pop-orange-deep);   /* relleno: blanco sobre orange-deep ≈ 6:1 (AA) */
    color: var(--pop-white);
    border-color: var(--pop-orange-deep);
}
.pop-section--ink .pop-figure { border-color: var(--pop-orange); }
.pop-section--ink .pop-cta--whatsapp { border-color: var(--pop-paper); box-shadow: 8px 8px 0 var(--pop-orange); }
.pop-section--ink .pop-cta--whatsapp:hover  { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--pop-orange); }
.pop-section--ink .pop-cta--whatsapp:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--pop-orange); }
.pop-section--ink .pop-cta--orange { border-color: var(--pop-paper); box-shadow: 8px 8px 0 var(--pop-paper); }
.pop-section--ink .pop-cta--orange:hover { box-shadow: 11px 11px 0 var(--pop-paper); }

/* ─── Overlap: foto + ficha de 3 tonos sobrepuesta (Más vendida) ─────────── */
.pop-overlap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}
.pop-overlap__media {
    position: relative;
    margin: 0;
    border: 2px solid var(--pop-orange);
    box-shadow: 12px 12px 0 var(--pop-orange);
    line-height: 0;
    /* SIN overflow:hidden — el burst yellow sobresale del marco sin recortarse */
}
.pop-overlap__media > picture { display: block; overflow: hidden; line-height: 0; }
.pop-overlap__media img { width: 100%; height: auto; display: block; }
.pop-overlap__panel { min-width: 0; }
/* Burst amarillo "MÁS VENDIDA" — única señal yellow de la página */
.pop-burst {
    position: absolute;
    top: -20px; right: -16px;
    z-index: 3;
    width: clamp(92px, 12vw, 124px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    text-align: center;
    background: var(--pop-yellow);
    color: var(--pop-ink);
    font-family: var(--pop-font-display);
    font-size: clamp(12px, 1.5vw, 16px);
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0.02em;
    border: 2px solid var(--pop-ink);
    border-radius: 9999px;             /* pill: única excepción al radius 0 */
    transform: rotate(-8deg);
    padding: 12px;
    pointer-events: none;
}
@media (max-width: 860px) {
    .pop-overlap { grid-template-columns: 1fr; gap: clamp(28px, 7vw, 40px); }
    .pop-burst { top: -14px; right: 8px; }
}

/* =========================================================================
   13 · Tabla comparativa — Dossier · LabelLateral · Index-tab · ledger
   ========================================================================= */
.pop-section--ledger { border-top: 2px solid var(--pop-ink); }
.pop-section--ledger .pop-tab {
    position: absolute;
    top: 0;
    left: clamp(20px, 4vw, 48px);
    transform: translateY(-100%);
    background: var(--pop-ink);
    color: var(--pop-paper);
    font-family: var(--pop-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 14px;
}
.pop-ledger-wrap {
    overflow-x: auto;
    border: 2px solid var(--pop-ink);
    box-shadow: 8px 8px 0 var(--pop-ink);
    background: var(--pop-white);
    -webkit-overflow-scrolling: touch;
}
.pop-ledger {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-family: var(--pop-font-body);
}
.pop-ledger thead th {
    background: var(--pop-ink);
    color: var(--pop-paper);
    font-family: var(--pop-font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.92rem;
    text-align: left;
    padding: 14px 16px;
    border-right: 1px solid var(--pop-rule-on-dark);
}
.pop-ledger thead th:last-child { border-right: 0; }
.pop-ledger tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--pop-rule);
    border-right: 1px solid var(--pop-rule);
    font-size: clamp(0.9rem, 1.05vw, 1rem);
    color: var(--pop-ink);
    vertical-align: top;
    line-height: 1.45;
}
.pop-ledger tbody td:last-child { border-right: 0; }
.pop-ledger tbody tr:nth-child(even) { background: var(--pop-cream); }
.pop-ledger tbody tr:hover { background: rgba(241, 90, 41, 0.07); }
.pop-ledger .pop-ledger__mono { font-family: var(--pop-font-mono); font-size: 0.92em; white-space: nowrap; }
.pop-ledger__name {
    font-family: var(--pop-font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.05rem;
    color: var(--pop-ink);
    text-decoration: none;
    border-bottom: 3px solid var(--pop-orange);
    transition: color var(--pop-motion-fast) var(--pop-ease);
}
.pop-ledger__name:hover { color: var(--pop-orange); }

/* =========================================================================
   14 · ¿Qué es la popelina? — Carta · Postmark · Full-frame · iconos + video
   ========================================================================= */
.pop-explainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 2px solid var(--pop-ink);
    box-shadow: 12px 12px 0 var(--pop-ink);
    background: var(--pop-ink);
    overflow: hidden;
}
.pop-explainer__copy {
    padding: clamp(26px, 3.5vw, 48px);
    color: var(--pop-paper);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 3px solid var(--pop-orange);
}
.pop-explainer__copy .pop-title { color: var(--pop-paper); }
.pop-explainer__copy .pop-postmark { color: var(--pop-muted-dark); }
.pop-explainer__lead {
    font-family: var(--pop-font-body);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.6;
    color: rgba(250, 246, 238, 0.84);
    margin: clamp(12px, 1.8vw, 18px) 0 clamp(18px, 2.6vw, 26px);
}
.pop-explainer__lead strong { color: var(--pop-paper); font-weight: 800; }
.pop-iconwall {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.2vw, 12px);
}
.pop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: clamp(12px, 1.6vw, 16px) 8px;
    background: rgba(250, 246, 238, 0.05);
    border: 1px solid var(--pop-rule-on-dark);
    transition: background var(--pop-motion-fast) var(--pop-ease), transform var(--pop-motion-fast) var(--pop-ease);
}
.pop-icon:hover { background: rgba(241, 90, 41, 0.14); transform: translateY(-3px); }
.pop-icon img { width: clamp(34px, 4vw, 46px); height: auto; }
.pop-icon span {
    font-family: var(--pop-font-body);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: var(--pop-paper);
    line-height: 1.2;
}
.pop-explainer__video {
    position: relative;
    min-height: 280px;
    line-height: 0;
}
.pop-explainer__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) {
    .pop-explainer { grid-template-columns: 1fr; }
    .pop-explainer__copy { border-right: 0; border-bottom: 3px solid var(--pop-orange); }
    .pop-explainer__video { aspect-ratio: 16 / 9; min-height: 0; }
}

/* =========================================================================
   15 · FAQ · Dossier · Top-rule orange · 2 columnas + acordeón <details>
   Contrato ax-faq (data-ax-faq + ax-faq.js): exclusivo por grupo, animado.
   El contenido está en el DOM (SEO intacto). Sin JS, <details> nativo sirve.
   ========================================================================= */
.pop-section--faq { border-top: 3px solid var(--pop-orange); }
.pop-faqsec__grid { display: grid; gap: clamp(2rem, 4vw, 3.2rem); align-items: start; }
@media (min-width: 940px) {
    .pop-faqsec__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
    .pop-faqsec__aside { position: sticky; top: 130px; }
}
.pop-faqsec__note {
    font-family: var(--pop-font-accent);
    font-style: italic;
    color: var(--pop-muted);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    max-width: 42ch;
    margin: clamp(1.2rem, 2.4vw, 1.6rem) 0;
}
.pop-faq { display: flex; flex-direction: column; gap: 12px; }
.pop-faq__item {
    background: var(--pop-white);
    border: 1.5px solid var(--pop-rule);
    transition: border-color var(--pop-motion-fast) var(--pop-ease),
                box-shadow var(--pop-motion-fast) var(--pop-ease);
}
.pop-faq__item:hover { border-color: var(--pop-ink); }
.pop-faq__item[open] {
    border-color: var(--pop-ink);
    border-left: 4px solid var(--pop-orange);
    box-shadow: 5px 5px 0 var(--pop-ink);
}
.pop-faq__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(13px, 1.8vw, 17px) clamp(16px, 2.2vw, 22px);
    /* side-shift: el bloque entero se desplaza al abrir */
    transition: padding-left var(--pop-motion-fast) var(--pop-ease);
}
.pop-faq__q::-webkit-details-marker { display: none; }
.pop-faq__q::marker { content: ""; }
.pop-faq__item:hover .pop-faq__q { padding-left: calc(clamp(16px, 2.2vw, 22px) + 5px); }
.pop-faq__q-text {
    flex: 1;
    font-family: var(--pop-font-body);
    font-weight: 700;
    font-size: clamp(0.98rem, 1.4vw, 1.12rem);
    line-height: 1.35;
    color: var(--pop-ink);
    margin: 0;
    transition: color var(--pop-motion-fast) var(--pop-ease);
}
/* Icono +/× como pseudo-elemento (summary contiene solo el <h3> → HTML válido) */
.pop-faq__q::after {
    content: '+';
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-family: var(--pop-font-display);
    font-size: 1.35rem;
    line-height: 1;
    background: var(--pop-cream);
    color: var(--pop-orange);
    border: 1.5px solid var(--pop-ink);
    transition: transform var(--pop-motion-fast) var(--pop-ease),
                background var(--pop-motion-fast) var(--pop-ease),
                color var(--pop-motion-fast) var(--pop-ease);
}
.pop-faq__item[open] .pop-faq__q-text { color: var(--pop-orange); }
.pop-faq__item[open] .pop-faq__q::after {
    transform: rotate(45deg);
    background: var(--pop-orange);
    color: var(--pop-paper);
    border-color: var(--pop-orange);
}
/* .pop-reveal: envoltorio que ax-faq.js anima (height+opacity) de forma
   inline; no requiere estilos propios. */
.pop-faq__a {
    font-family: var(--pop-font-body);
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
    line-height: 1.65;
    color: var(--pop-muted);
    max-width: 72ch;
    padding: 0 clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 20px);
    margin: 0;
}
.pop-faq__a a {
    color: var(--pop-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--pop-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* =========================================================================
   16 · CTA final — Manifiesto · MegaTextBg (única) · INK + gradiente permitido
   ========================================================================= */
.pop-section--cta {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(241,90,41,0.28), transparent 55%),
        var(--pop-ink);
}
.pop-megahead {
    position: relative;
    isolation: isolate;
    padding-top: clamp(20px, 5vw, 56px);
}
.pop-megahead__bg {
    position: absolute;
    top: 0; left: 0;
    font-family: var(--pop-font-display);
    font-size: clamp(4.2rem, 17vw, 12rem);
    line-height: 0.78;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--pop-rule-on-dark);
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
}
.pop-megahead__fg { position: relative; max-width: 40ch; }
.pop-megahead .pop-title { color: var(--pop-paper); }
.pop-megahead .pop-lead { color: rgba(250, 246, 238, 0.84); margin-top: clamp(12px, 1.8vw, 18px); }
.pop-megahead .pop-lead strong { color: var(--pop-paper); }

/* =========================================================================
   Modal compartir (legacy reestilizado a radius 0)
   ========================================================================= */
.pop-page .modal-content { border-radius: 0; border: 2px solid var(--pop-ink); }
.pop-page #shareModal .rss-fab { border-radius: 0 !important; transition: transform var(--pop-motion-fast) var(--pop-ease); }
.pop-page #shareModal a:hover .rss-fab { transform: translateY(-3px); }

/* =========================================================================
   Reveal sutil al entrar (decorativo · progressive enhancement, sin JS).
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        @keyframes pop-rise { from { opacity: 0; transform: translateY(26px); } }
        .pop-rise {
            animation: pop-rise 0.8s var(--pop-ease) backwards;
            animation-timeline: view();
            animation-range: entry 0% cover 30%;
        }
    }
}

/* =========================================================================
   Accesibilidad — focus visible global + motion safe
   ========================================================================= */
.pop-page :focus-visible {
    outline: 3px solid var(--pop-orange);
    outline-offset: 3px;
    border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
    .pop-page *,
    .pop-page *::before,
    .pop-page *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }
    .pop-cta:hover, .pop-cta:active,
    .pop-card:hover, .pop-card:focus-within,
    .pop-figure--link:hover,
    .pop-brick__tile:hover,
    .pop-btn--solid:hover, .pop-btn--solid:active { transform: none; }
    .pop-card:hover .pop-card__media img,
    .pop-brick__tile:hover img { transform: none; }
}

/* =========================================================================
   Afinado móvil — sombras más compactas (evita overflow + peso visual)
   ========================================================================= */
@media (max-width: 575px) {
    .pop-cta--whatsapp, .pop-cta--orange { box-shadow: 6px 6px 0 var(--pop-ink); }
    .pop-cta--whatsapp:hover, .pop-cta--orange:hover { box-shadow: 8px 8px 0 var(--pop-ink); }
    .pop-figure { box-shadow: 6px 6px 0 var(--pop-ink); }
    .pop-card { box-shadow: 3px 3px 0 var(--pop-ink); }
    .pop-card:hover, .pop-card:focus-within { box-shadow: 6px 6px 0 var(--pop-orange); }
    .pop-card--use:hover, .pop-card--use:focus-within { box-shadow: 6px 6px 0 var(--pop-ink); }
    .pop-overlap__media { box-shadow: 7px 7px 0 var(--pop-orange); }
    .pop-explainer, .pop-ledger-wrap, .pop-section--margin .pop-container { box-shadow: 6px 6px 0 var(--pop-ink); }
    .pop-section--ink .pop-cta--whatsapp { box-shadow: 6px 6px 0 var(--pop-orange); }
    .pop-section--ink .pop-cta--whatsapp:hover { box-shadow: 8px 8px 0 var(--pop-orange); }
    .pop-brick__tile { box-shadow: 3px 3px 0 var(--pop-ink); }
    .pop-brick__tile:hover, .pop-brick__tile:focus-visible { box-shadow: 6px 6px 0 var(--pop-orange); }
}