/*
 * mobile.css — Appmax Blog
 *
 * Built from scratch as a purpose-built mobile experience.
 * Desktop styles are NEVER touched — all rules below live inside
 * a @media (max-width: 767px) block, or a (min-width: 768px) and
 * (max-width: 1023px) block for tablet refinements.
 *
 * Design principles (synthesised from a 6-site research dive across
 * NYT, Linear, Stripe Press & Blog, Every.to, Rauno Freiberg / Vaul,
 * and Brian Lovin):
 *
 *   1. Off-black instead of #000, off-white instead of #fff.
 *   2. 4-level text + 4-level surface tokens (Brian Lovin / Linear).
 *   3. Non-round weights (510/590/680) for richer hierarchy on a
 *      single variable font (Linear).
 *   4. Editorial serif (Source Serif 4) for article body —
 *      open-source NYT/Every flavor.
 *   5. Tokenised easings and durations (Linear).
 *   6. Safe-area aware gutters using max(env(...), …) (Linear).
 *   7. Progressive enhancement via @supports for dvh/svh and
 *      Display P3 colour (Linear, Rauno).
 *   8. 44px+ tap targets, 16px+ form inputs (anti-zoom iOS).
 *
 * Section index:
 *
 *   01. Tokens (CSS custom properties)
 *   02. Document & body base
 *   03. Reset & hygiene
 *   04. Form input anti-zoom
 *   05. Image & media defaults
 *   06. Tap target & focus
 *   07. Skip link
 *   08. Header / Nav (sticky 56px, blur, hide-on-scroll)
 *   09. Mobile drawer (hamburger overlay)
 *   10. Search modal (fullscreen)
 *   11. Editorias chips (sticky, listing pages only)
 *   12. Reading progress bar (article pages, 3px purple)
 *   13. Back-to-top FAB
 *   14. Footer (dense vertical stack)
 *   15. Universal mobile card pattern
 *   16. Section header (label + link row)
 *   17. Buttons (universal pill pattern)
 *   18. Home — Mobile-First (scoped body.home)
 *   19. Breadcrumb (article + category)
 *   20. Article — Cluster (reading view + inline TOC + bio + CTAs)
 *   21. Article — Pillar (full-bleed hero + TOC bottom sheet FAB)
 *   22. Category — mini-hero + featured + feed + pagination
 *   23. Search results page (archive header)
 *   24. Newsletter band (standalone variant)
 *   25. 404 — Page not found
 *   26. Touch & performance polish
 *   27. Tablet refinements (768-1023px)
 */


/* ══════════════════════════════════════════════════════════════════
   01. Tokens
   The single source of truth for mobile. Every rule below references
   these custom properties — never raw hex/px.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    :root {
        /* ── Surfaces ──────────────────────────────────────────────── */
        --m-bg-main:      #F7F3FF;   /* off-white page canvas */
        --m-bg-surface:   #FFFFFF;   /* cards, elevated blocks */
        --m-bg-elevated:  #FFFFFF;   /* modals, popovers */
        --m-bg-subtle:    #EFE6FF;   /* lilac accents (newsletter, hero) */
        --m-bg-mono:      #FAFAFA;   /* code blocks */

        /* ── Text (4-level hierarchy, Brian Lovin pattern) ─────────── */
        --m-tx-primary:    #1A1424;  /* near-black with purple ink */
        --m-tx-secondary:  #4A3D5C;
        --m-tx-tertiary:   #7A6D96;
        --m-tx-quaternary: #A89EC4;

        /* ── Accent (Appmax purple) ────────────────────────────────── */
        --m-accent:        #7B40E8;
        --m-accent-hover:  #6532C4;
        --m-accent-deep:   #45337C;
        --m-accent-tint:   #EFE6FF;
        --m-accent-faint:  rgba(123, 64, 232, 0.08);

        /* ── Borders (translucent, scale with backgrounds) ─────────── */
        --m-border-subtle:    rgba(123, 64, 232, 0.08);
        --m-border-medium:    rgba(123, 64, 232, 0.18);
        --m-border-strong:    rgba(123, 64, 232, 0.32);
        --m-border-dim:       rgba(26, 20, 36, 0.06);

        /* ── Typography stacks (DM Sans across the board — same as desktop) */
        --m-font-ui:     "DM Sans", -apple-system, BlinkMacSystemFont,
                         "Segoe UI", Helvetica, Arial, sans-serif;
        --m-font-body:   "DM Sans", -apple-system, BlinkMacSystemFont,
                         "Segoe UI", Helvetica, Arial, sans-serif;
        --m-font-display:"DM Sans", -apple-system, BlinkMacSystemFont,
                         "Segoe UI", Helvetica, Arial, sans-serif;
        --m-font-mono:   "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

        /* Gradients — pulled from the desktop tokens.css so mobile keeps
           the same visual identity. G1 = hero pillar / CTA close;
           G2 = editoria hub manifesto; G3 = newsletter + primary CTA. */
        --m-g1: linear-gradient(135deg, #F7F3FF 0%, #A888F4 40%, #45337C 75%, #131326 100%);
        --m-g2: linear-gradient(135deg, #45337C 0%, #A888F4 40%, #45337C 70%, #131326 100%);
        --m-g3: linear-gradient(135deg, #9B6AFA 0%, #131326 100%);

        /* ── Weights (non-round Linear pattern, leverages variable axis) */
        --m-fw-regular:  400;
        --m-fw-medium:   510;
        --m-fw-semibold: 590;
        --m-fw-bold:     680;

        /* ── Type scale (mobile-first, NYT measure + Linear ratios) ── */
        --m-fs-micro:   0.6875rem;  /* 11px — eyebrow, micro labels      */
        --m-fs-mini:    0.75rem;    /* 12px — meta, captions             */
        --m-fs-small:   0.875rem;   /* 14px — UI default, byline         */
        --m-fs-body:    1.0625rem;  /* 17px — article body               */
        --m-fs-lead:    1.125rem;   /* 18px — lead paragraph, dek        */
        --m-fs-h4:      1.0625rem;  /* 17px — h4                         */
        --m-fs-h3:      1.25rem;    /* 20px — h3                         */
        --m-fs-h2:      1.5rem;     /* 24px — h2                         */
        --m-fs-h1:      2rem;       /* 32px — h1                         */
        --m-fs-hero:    2.25rem;    /* 36px — featured hero h1           */
        --m-fs-display: 2.75rem;    /* 44px — magazine cover             */

        /* Line heights */
        --m-lh-tight:   1.15;
        --m-lh-snug:    1.25;
        --m-lh-base:    1.5;
        --m-lh-relaxed: 1.65;
        --m-lh-loose:   1.8;

        /* Letter spacing */
        --m-tracking-tight:   -0.022em;  /* hero h1 */
        --m-tracking-snug:    -0.013em;  /* h2 / h3 */
        --m-tracking-normal:   0;
        --m-tracking-wide:     0.06em;   /* uppercase labels */
        --m-tracking-widest:   0.12em;   /* section eyebrows */

        /* ── Layout ────────────────────────────────────────────────── */
        --m-nav-height:    56px;
        --m-gutter:        20px;
        --m-section-gap:   56px;
        --m-measure:       42rem;   /* article body width (~672px, NYT 676) */

        --m-gutter-left:   max(env(safe-area-inset-left),  var(--m-gutter));
        --m-gutter-right:  max(env(safe-area-inset-right), var(--m-gutter));
        --m-safe-top:      env(safe-area-inset-top, 0px);
        --m-safe-bottom:   env(safe-area-inset-bottom, 0px);

        /* ── Radius ────────────────────────────────────────────────── */
        --m-r-xs:   4px;
        --m-r-sm:   8px;
        --m-r-md:   12px;
        --m-r-lg:   16px;
        --m-r-xl:   20px;
        --m-r-pill: 999px;

        /* ── Easings (Linear inventory) ────────────────────────────── */
        --m-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
        --m-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
        --m-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
        --m-ease-ios:       cubic-bezier(0.32, 0.72, 0, 1);

        /* ── Durations ─────────────────────────────────────────────── */
        --m-t-instant: 80ms;
        --m-t-fast:    150ms;
        --m-t-base:    220ms;
        --m-t-slow:    350ms;
        --m-t-drawer:  500ms;

        /* ── Layers (Linear pattern) ───────────────────────────────── */
        --m-z-nav:        100;
        --m-z-chips:      99;
        --m-z-fab:        80;
        --m-z-drawer:     110;
        --m-z-modal:      200;
        --m-z-toast:      1100;

        /* ── Shadows (used sparingly — flat editorial default) ─────── */
        --m-shadow-soft:
            0 1px 2px rgba(26, 20, 36, 0.04),
            0 6px 16px rgba(26, 20, 36, 0.06);
        --m-shadow-fab:
            0 4px 14px rgba(123, 64, 232, 0.32),
            0 1px 3px rgba(26, 20, 36, 0.10);

        /* ── Viewport units progressive enhancement (Linear) ───────── */
        --m-vh:  1vh;
        --m-svh: 1vh;
        --m-dvh: 1vh;

        /* ── Root font-size: 16px keeps form inputs at the 16px ───── */
        /* threshold iOS uses to skip auto-zoom on focus.              */
        font-size: 16px;
    }

    /* Progressive: small viewport units (Safari mobile address bar fix) */
    @supports (height: 1svh) {
        :root {
            --m-svh: 1svh;
            --m-dvh: 1dvh;
        }
    }

    /* Progressive: Display P3 wide-gamut purple (Rauno + Linear) */
    @supports (color: color(display-p3 1 1 1)) {
        :root {
            --m-accent: color(display-p3 0.483 0.251 0.910);
        }
    }
}


/* ══════════════════════════════════════════════════════════════════
   02. Document & body base
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    html {
        background: var(--m-bg-main);
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
                text-size-adjust: 100%;
        /* Keep scrollbar gutter stable so layout doesn't jump (NYT). */
        scrollbar-gutter: stable;
    }

    body {
        background: var(--m-bg-main);
        color: var(--m-tx-primary);
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-body);
        font-weight: var(--m-fw-regular);
        line-height: var(--m-lh-base);
        font-feature-settings: "kern", "ss01";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        /* Neutralise the bright blue tap flash on Android Chrome. */
        -webkit-tap-highlight-color: rgba(123, 64, 232, 0.10);
        /* Prevent horizontal overflow from any rogue full-bleed child. */
        overflow-x: hidden;
    }
}


/* ══════════════════════════════════════════════════════════════════
   03. Reset & hygiene
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Anchor scroll offset — when jumping to a heading, it sits below
       the sticky nav. Used by the in-article TOC and any anchor links. */
    [id] {
        scroll-margin-top: calc(var(--m-nav-height) + 16px);
    }

    /* Container alignment — single mobile gutter, safe-area aware. */
    .container {
        max-width: none;
        margin-inline: auto;
        padding-left:  var(--m-gutter-left);
        padding-right: var(--m-gutter-right);
    }

    /* Section block: vertical rhythm */
    .page-section {
        padding-block: var(--m-section-gap) 0;
    }

    .page-section:last-of-type {
        padding-bottom: var(--m-section-gap);
    }
}


/* ══════════════════════════════════════════════════════════════════
   04. Form input anti-zoom
   All native fields at 16px minimum so iOS Safari skips auto-zoom on
   focus. Component-level rules can bump higher (17/18px) — never lower.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    textarea,
    select {
        font-size: max(16px, 1rem);
        font-family: var(--m-font-ui);
    }
}


/* ══════════════════════════════════════════════════════════════════
   05. Image & media defaults
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    img,
    video,
    iframe,
    svg {
        max-width: 100%;
        height: auto;
        display: block;
    }
}


/* ══════════════════════════════════════════════════════════════════
   06. Tap target & focus
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* All anchors and buttons reach the 44px WCAG mobile tap minimum
       when they're standalone (not inline in prose). Inline links keep
       their natural size — overridden in section 03 of article rules. */
    button,
    [role="button"] {
        font-family: var(--m-font-ui);
        cursor: pointer;
    }

    /* Focus-visible ring uses the accent token. Replaces the browser
       default blue/orange ring with brand-coloured focus. */
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    [tabindex]:focus-visible {
        outline: 2px solid var(--m-accent);
        outline-offset: 2px;
        border-radius: var(--m-r-xs);
    }

    /* Selection — branded so reading feels Appmax. */
    ::selection {
        background: var(--m-accent);
        color: var(--m-bg-surface);
    }
}


/* ══════════════════════════════════════════════════════════════════
   07. Skip link (accessibility)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .skip-link {
        position: absolute;
        top: -100px;
        left: 0;
        z-index: var(--m-z-toast);
        padding: 12px 16px;
        background: var(--m-accent);
        color: var(--m-bg-surface);
        font-weight: var(--m-fw-semibold);
        font-size: var(--m-fs-small);
        text-decoration: none;
        border-radius: 0 0 var(--m-r-sm) 0;
    }

    .skip-link:focus {
        top: 0;
    }

    /* Body lock helper — applied by mobile.js while drawer/sheet open */
    body.mobile-no-scroll {
        overflow: hidden;
        touch-action: none;
    }
}


/* ══════════════════════════════════════════════════════════════════
   08. Header / Nav (sticky 56px, off-white blur, hide-on-scroll)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .nav {
        position: sticky;
        top: 0;
        z-index: var(--m-z-nav);
        height: var(--m-nav-height);
        background: rgba(247, 243, 255, 0.92);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
                backdrop-filter: saturate(180%) blur(16px);
        border-bottom: 1px solid var(--m-border-subtle);
        transition: transform var(--m-t-base) var(--m-ease-out-quart);
        will-change: transform;
    }

    /* When chips follow the nav, remove the nav's own border so the
       header + chips read as a single visual zone (chips carry the
       single bottom hairline). */
    .nav:has(~ .editorias-chips) {
        border-bottom: none;
    }

    .nav.nav--hidden {
        transform: translateY(-100%);
    }

    .nav .container {
        max-width: none;
        padding-left:  var(--m-gutter-left);
        padding-right: var(--m-gutter-right);
        height: 100%;
    }

    .nav__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 100%;
    }

    /* Logo — Appmax wordmark, ~22px tall */
    .nav__logo {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
        margin-left: -8px;   /* pull a touch left so it kisses the gutter */
        flex-shrink: 0;
    }

    .nav__logo-img {
        height: 22px;
        width: auto;
        display: block;
    }

    /* Desktop primary nav (the editorias menu) is hidden on mobile —
       chips bar below the header takes over navigation. */
    .nav__links {
        display: none !important;
    }

    /* Hamburger is also hidden on mobile — chips replace it entirely. */
    .nav__hamburger {
        display: none !important;
    }

    /* Search icon — sits at the far right of the header.
       margin-left:auto pushes it past the logo since the hamburger
       (formerly between them) is hidden.

       font-size:0 hides the "Buscar" text node (and the ⌘K hint span)
       without removing them from the DOM — important because they're
       text content of the <button>, not elements. The SVG icon keeps
       its own explicit width/height so it stays visible. */
    .nav__search {
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        margin-left: auto;
        margin-right: -8px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--m-tx-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--m-r-sm);
        font-size: 0;
        line-height: 0;
        gap: 0;
        transition: background var(--m-t-fast) var(--m-ease-out-quart);
    }

    .nav__search:active {
        background: var(--m-accent-faint);
    }

    /* Icon-only search trigger — hide the "Buscar" text and ⌘K hint */
    .nav__search-hint,
    .nav__search > *:not(.nav__search-icon) {
        display: none;
    }

    .nav__search-icon {
        width: 22px;
        height: 22px;
        display: block;
    }

    /* Hamburger: 3 lines that morph into × when expanded */
    .nav__hamburger {
        flex-direction: column;
        gap: 5px;
    }

    .nav__hamburger-line {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--m-tx-primary);
        border-radius: 2px;
        transition:
            transform var(--m-t-base) var(--m-ease-out-quart),
            opacity   var(--m-t-base) var(--m-ease-out-quart);
    }

    .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}


/* ══════════════════════════════════════════════════════════════════
   09. Mobile drawer (hamburger overlay)
   Fade + scale, fullscreen, body-scroll-locked
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .nav__drawer {
        position: fixed;
        inset: 0;
        z-index: var(--m-z-drawer);
        background: var(--m-bg-main);
        padding:
            calc(var(--m-nav-height) + var(--m-safe-top) + 24px)
            var(--m-gutter-right)
            calc(var(--m-safe-bottom) + 32px)
            var(--m-gutter-left);
        overflow-y: auto;
        opacity: 0;
        transform: scale(0.985);
        pointer-events: none;
        visibility: hidden;
        transition:
            opacity   var(--m-t-base) var(--m-ease-out-quart),
            transform var(--m-t-base) var(--m-ease-out-quart),
            visibility 0s linear var(--m-t-base);
    }

    .nav__drawer.is-open {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
        visibility: visible;
        transition-delay: 0s, 0s, 0s;
    }

    .nav__drawer-close {
        position: absolute;
        top: calc(var(--m-safe-top) + 10px);
        right: var(--m-gutter-right);
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--m-tx-primary);
        cursor: pointer;
        border-radius: var(--m-r-sm);
    }

    .nav__drawer-links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .nav__drawer-links li {
        border-bottom: 1px solid var(--m-border-subtle);
    }

    .nav__drawer-links li:last-child {
        border-bottom: none;
    }

    .nav__drawer-links a {
        display: flex;
        align-items: center;
        min-height: 56px;
        font-family: var(--m-font-ui);
        font-size: 1.125rem;
        font-weight: var(--m-fw-semibold);
        color: var(--m-tx-primary);
        text-decoration: none;
    }
}


/* ══════════════════════════════════════════════════════════════════
   10. Search modal (fullscreen on mobile)
   Polished version of the existing components.css search modal
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .search-modal {
        padding: 0;
        align-items: stretch;
    }

    .search-modal__backdrop {
        background: var(--m-bg-main);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .search-modal__panel {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
        min-height: calc(var(--m-dvh) * 100);
        box-shadow: none;
        background: var(--m-bg-main);
        display: flex;
        flex-direction: column;
    }

    .search-modal__header {
        padding:
            calc(var(--m-safe-top) + 12px)
            var(--m-gutter-right)
            12px
            var(--m-gutter-left);
        gap: 12px;
        position: sticky;
        top: 0;
        background: var(--m-bg-main);
        z-index: 1;
        border-bottom: 1px solid var(--m-border-subtle);
        display: flex;
        align-items: center;
    }

    .search-modal__search-icon {
        width: 20px;
        height: 20px;
        opacity: 0.5;
        color: var(--m-tx-secondary);
        flex-shrink: 0;
    }

    .search-modal__input {
        flex: 1;
        font-size: 16px;
        font-family: var(--m-font-ui);
        font-weight: var(--m-fw-medium);
        color: var(--m-tx-primary);
        background: transparent;
        border: none;
        outline: none;
        padding: 8px 0;
        min-height: 44px;
    }

    .search-modal__input::placeholder {
        color: var(--m-tx-quaternary);
    }

    .search-modal__close {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 0;            /* hide the "Esc" text */
        line-height: 1;
        color: var(--m-tx-primary);
        background: var(--m-accent-faint);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* Replace the "Esc" label with a × glyph in mobile only */
    .search-modal__close::before {
        content: "\00d7";        /* multiplication sign × */
        font-size: 22px;
        font-family: var(--m-font-ui);
        font-weight: var(--m-fw-medium);
        line-height: 1;
        color: var(--m-tx-primary);
    }

    .search-modal__results {
        max-height: none;
        flex: 1;
        padding: 8px 0 calc(var(--m-safe-bottom) + 16px);
        overflow-y: auto;
    }

    /* Hide keyboard hints — useless on touch */
    .search-modal__footer {
        display: none;
    }

    .search-modal__empty {
        padding: 56px var(--m-gutter);
        text-align: center;
        color: var(--m-tx-tertiary);
        font-size: var(--m-fs-small);
    }

    .search-modal__suggestions-label {
        padding: 16px var(--m-gutter) 8px;
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: var(--m-tx-tertiary);
    }

    .search-result {
        padding: 12px var(--m-gutter);
        gap: 12px;
        min-height: 56px;
    }

    .search-result__icon {
        width: 36px;
        height: 36px;
    }

    .search-result__title {
        font-size: var(--m-fs-small);
        white-space: normal;
        color: var(--m-tx-primary);
    }

    .search-result__meta {
        font-size: var(--m-fs-mini);
        color: var(--m-tx-tertiary);
    }

    .search-result:active {
        background: var(--m-accent-faint);
    }
}


/* ══════════════════════════════════════════════════════════════════
   11. Editorias chips (sticky under nav, listing pages only)
   ══════════════════════════════════════════════════════════════════ */

.editorias-chips { display: none; }

@media (max-width: 767px) {

    .editorias-chips {
        display: block;
        position: sticky;
        top: var(--m-nav-height);
        z-index: var(--m-z-chips);
        background: rgba(247, 243, 255, 0.92);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
                backdrop-filter: saturate(180%) blur(16px);
        border-bottom: 1px solid var(--m-border-subtle);
        transition: transform var(--m-t-base) var(--m-ease-out-quart);
        will-change: transform;
    }

    /* Chips follow the nav's hide-on-scroll — mobile.js toggles both. */
    .editorias-chips.editorias-chips--hidden {
        transform: translateY(calc(var(--m-nav-height) * -1 - 100%));
    }

    .editorias-chips__track {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        padding:
            10px var(--m-gutter-right) 10px var(--m-gutter-left);
    }

    .editorias-chips__track::-webkit-scrollbar {
        display: none;
    }

    .editorias-chips__chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
        display: inline-flex;
        align-items: center;
        height: 34px;
        padding: 0 14px;
        border-radius: var(--m-r-pill);
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        font-weight: var(--m-fw-medium);
        line-height: 1;
        color: var(--m-tx-primary);
        background: transparent;
        border: 1px solid var(--m-border-medium);
        text-decoration: none;
        white-space: nowrap;
        transition:
            background   var(--m-t-fast) var(--m-ease-out-quart),
            color        var(--m-t-fast) var(--m-ease-out-quart),
            border-color var(--m-t-fast) var(--m-ease-out-quart);
    }

    .editorias-chips__chip:active {
        transform: scale(0.97);
    }

    .editorias-chips__chip.is-active {
        background: var(--m-accent);
        color: var(--m-bg-surface);
        border-color: var(--m-accent);
        font-weight: var(--m-fw-semibold);
    }
}


/* ══════════════════════════════════════════════════════════════════
   12. Reading progress bar (article pages, 3px purple)
   ══════════════════════════════════════════════════════════════════ */

.reading-progress { display: none; }

@media (max-width: 767px) {

    .reading-progress {
        display: block;
        position: fixed;
        top: var(--m-nav-height);
        left: 0;
        right: 0;
        height: 3px;
        background: transparent;
        z-index: calc(var(--m-z-nav) - 1);
        pointer-events: none;
        transition: opacity var(--m-t-base) var(--m-ease-out-quart);
    }

    .reading-progress::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        background: var(--m-accent);
        transform-origin: left center;
        transform: scaleX(var(--m-progress, 0));
    }

    /* mobile.js applies scaleX directly via inline style — the var
       fallback above keeps the bar at 0 width before JS runs. */
    .reading-progress {
        transform-origin: left center;
        transform: scaleX(0);
    }

    /* When nav hides, the progress bar follows */
    .nav.nav--hidden ~ .reading-progress {
        transform: translateY(calc(var(--m-nav-height) * -1)) scaleX(var(--m-progress, 0));
    }
}


/* ══════════════════════════════════════════════════════════════════
   13. Back-to-top FAB
   ══════════════════════════════════════════════════════════════════ */

.back-to-top { display: none; }

@media (max-width: 767px) {

    .back-to-top {
        display: inline-flex;
        position: fixed;
        right: 16px;
        bottom: calc(16px + var(--m-safe-bottom));
        z-index: var(--m-z-fab);
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: var(--m-accent);
        color: var(--m-bg-surface);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: var(--m-shadow-fab);
        opacity: 0;
        transform: translateY(8px) scale(0.92);
        pointer-events: none;
        transition:
            opacity   var(--m-t-base) var(--m-ease-out-quart),
            transform var(--m-t-base) var(--m-ease-out-quart),
            background var(--m-t-fast) var(--m-ease-out-quart);
    }

    .back-to-top.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    .back-to-top:active {
        background: var(--m-accent-hover);
        transform: scale(0.94);
    }
}


/* ══════════════════════════════════════════════════════════════════
   14. Footer (dense vertical stack)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .footer {
        padding:
            56px var(--m-gutter-right) calc(40px + var(--m-safe-bottom)) var(--m-gutter-left);
    }

    .footer .container {
        padding: 0;
    }

    .footer__grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
        grid-template-columns: 1fr;
    }

    .footer__logo-img {
        height: 24px;
        margin-bottom: 12px;
    }

    .footer__brand-text {
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        max-width: none;
        margin: 0;
    }

    .footer__col-title {
        font-size: var(--m-fs-micro);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        margin: 0 0 12px;
        color: rgba(255, 255, 255, 0.7);
    }

    .footer__links {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .footer__links li {
        margin: 0;
    }

    .footer__links a {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: var(--m-fs-small);
        text-decoration: none;
        color: rgba(255, 255, 255, 0.7);
    }

    .footer__links a:hover,
    .footer__links a:active {
        color: var(--m-bg-surface);
    }
}

/* ── Tablet refinement: footer in 2 columns ── */
@media (min-width: 768px) and (max-width: 1023px) {

    .footer__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}


/* ══════════════════════════════════════════════════════════════════
   15. Universal mobile card pattern
   Vertical stack: image 16:9 → category → title → excerpt → meta.
   Used by home feeds, category feeds, related-posts.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .cards-grid {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .cards-grid > li {
        margin: 0;
    }

    .card {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        background: var(--m-bg-surface);
        border: 1px solid var(--m-border-subtle);
        border-radius: var(--m-r-lg);
        box-shadow: none;
        overflow: hidden;
        position: static;
        text-decoration: none;
    }

    .card::after { display: none; }

    /* Image sits flush with the card's top edge — top corners follow
       the card radius (via parent overflow: hidden), bottom corners
       stay square so it joins the body cleanly. */
    .card__image-wrap {
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 0;
        overflow: hidden;
        background: var(--m-accent-faint);
        margin: 0;
    }

    .card__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .card__body {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .card__category {
        display: inline-block;
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-mini);
        font-weight: var(--m-fw-semibold);
        text-transform: uppercase;
        letter-spacing: var(--m-tracking-wide);
        color: var(--m-accent);
        min-height: 0;
        text-decoration: none;
    }

    .card__title {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-h3);
        font-weight: var(--m-fw-semibold);
        line-height: var(--m-lh-snug);
        letter-spacing: var(--m-tracking-snug);
        color: var(--m-tx-primary);
        text-decoration: none;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
    }

    .card__excerpt {
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        color: var(--m-tx-secondary);
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card__meta {
        font-size: var(--m-fs-mini);
        color: var(--m-tx-tertiary);
        margin: 0;
    }

    .card__meta-sep {
        margin-inline: 6px;
        color: var(--m-tx-quaternary);
    }

    /* Premium pillar card — same shape, accent treatment on the tag */
    .card--premium {
        background: transparent;
        border: none;
        border-left: none;
        padding: 0;
        margin: 0;
    }

    .card--premium .card__category {
        color: var(--m-accent);
        font-weight: var(--m-fw-bold);
    }

    .card--premium .card__pillar-cta {
        display: inline-block;
        margin-top: 4px;
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-mini);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-wide);
        text-transform: uppercase;
        color: var(--m-accent);
        text-decoration: none;
    }

    /* Cards without an image just hide the image slot */
    .card:not(:has(.card__image-wrap)) .card__image-wrap {
        display: none;
    }
}


/* ══════════════════════════════════════════════════════════════════
   16. Section header (label + link row)
   Used above each home/category section
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .section-header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 20px;
    }

    .section-header__title {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: var(--m-tx-tertiary);
        line-height: 1.4;
        margin: 0;
    }

    .section-header__link {
        flex-shrink: 0;
        white-space: nowrap;
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-mini);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-wide);
        text-transform: uppercase;
        color: var(--m-accent);
        text-decoration: none;
    }
}


/* ══════════════════════════════════════════════════════════════════
   17. Buttons (universal pill pattern on mobile)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Primary button — purple fill.
       border-radius 24px (not 999px) so multi-line text doesn't deform
       into an oval/circle. With 50px height + short text, it still
       reads as a pill; with wrap, it gracefully becomes a rounded
       rectangle. */
    .home-hero__cta--primary,
    .cta-close__btn:not(.cta-close__btn--secondary),
    .pillar-parent-block__cta,
    .stream-hook__cta,
    .newsletter-band__submit,
    .error-404__search-submit,
    .banner-mockup__cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 50px;
        padding: 12px 24px;
        border-radius: 24px;
        background: var(--m-accent);
        color: var(--m-bg-surface);
        font-family: var(--m-font-ui);
        font-weight: var(--m-fw-semibold);
        font-size: var(--m-fs-body);
        line-height: 1.3;
        text-decoration: none;
        border: none;
        cursor: pointer;
        max-width: 100%;
        word-break: normal;
        transition:
            background var(--m-t-fast) var(--m-ease-out-quart),
            transform  var(--m-t-fast) var(--m-ease-out-quart);
    }

    .home-hero__cta--primary:active,
    .cta-close__btn:active,
    .pillar-parent-block__cta:active,
    .stream-hook__cta:active,
    .newsletter-band__submit:active,
    .error-404__search-submit:active {
        transform: scale(0.98);
        background: var(--m-accent-hover);
    }

    /* Secondary button — outlined accent, same radius rules */
    .home-hero__cta--secondary,
    .cta-close__btn--secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 50px;
        padding: 12px 24px;
        border-radius: 24px;
        background: transparent;
        color: var(--m-accent);
        font-family: var(--m-font-ui);
        font-weight: var(--m-fw-semibold);
        font-size: var(--m-fs-body);
        line-height: 1.3;
        text-decoration: none;
        border: 1.5px solid var(--m-accent);
        cursor: pointer;
        max-width: 100%;
    }

    /* Form inputs (newsletter, 404 search) keep the pill — they're
       always single-line. */
    .newsletter-band__input,
    .error-404__search-input {
        border-radius: var(--m-r-pill);
    }

    /* Defensive: legacy Elementor + Gutenberg block buttons inside
       any article body. Catches Elementor (.elementor-button-*),
       Gutenberg (.wp-block-button), role-button anchors, AND any
       <a> that carries an inline background style or a "button"/
       "cta" class (which is how the existing legacy posts seem to
       wrap their CTAs). Forces gradient pill + white text. */
    .post-elementor [class*="elementor-button"],
    .post-elementor .elementor-button-wrapper a,
    .post-elementor a[role="button"],
    .post-elementor a[style*="background"],
    .post-elementor a[class*="button"],
    .post-elementor a[class*="btn"],
    .post-elementor a[class*="cta"],
    .article-body [class*="elementor-button"],
    .article-body .elementor-button-wrapper a,
    .article-body .wp-block-button__link,
    .article-body .wp-block-button > a,
    .article-body a[role="button"],
    .article-body a[style*="background"],
    .article-body a[class*="button"],
    .article-body a[class*="btn"],
    .article-body a[class*="cta"],
    main [class*="elementor-button"],
    main .elementor-button-wrapper a {
        border-radius: 24px !important;
        aspect-ratio: auto !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        min-height: 50px !important;
        padding: 14px 28px !important;
        line-height: 1.25 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: var(--m-g3) !important;
        background-color: var(--m-accent) !important; /* fallback */
        color: #ffffff !important;
        font-family: var(--m-font-ui) !important;
        font-weight: var(--m-fw-semibold) !important;
        font-size: var(--m-fs-small) !important;
        text-decoration: none !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(123, 64, 232, 0.25) !important;
        margin: 16px 0 !important;
    }

    /* Inner text / spans inside legacy buttons — force pure white,
       no underline, no inherited dark color. */
    .post-elementor [class*="elementor-button"] *,
    .post-elementor .elementor-button-wrapper a *,
    .post-elementor a[role="button"] *,
    .post-elementor a[style*="background"] *,
    .post-elementor a[class*="button"] *,
    .post-elementor a[class*="cta"] *,
    .article-body [class*="elementor-button"] *,
    .article-body .elementor-button-wrapper a *,
    .article-body .wp-block-button__link *,
    .article-body .wp-block-button > a *,
    .article-body a[role="button"] *,
    .article-body a[style*="background"] *,
    .article-body a[class*="button"] *,
    .article-body a[class*="cta"] *,
    main [class*="elementor-button"] *,
    main .elementor-button-wrapper a * {
        color: #ffffff !important;
        text-decoration: none !important;
        background: transparent !important;
    }

    /* Active state — slight depress */
    .post-elementor [class*="elementor-button"]:active,
    .post-elementor .elementor-button-wrapper a:active,
    .post-elementor a[style*="background"]:active,
    .post-elementor a[class*="button"]:active,
    .post-elementor a[class*="cta"]:active,
    .article-body [class*="elementor-button"]:active,
    .article-body .elementor-button-wrapper a:active,
    .article-body .wp-block-button__link:active,
    .article-body a[role="button"]:active,
    .article-body a[style*="background"]:active,
    .article-body a[class*="button"]:active,
    .article-body a[class*="cta"]:active {
        transform: scale(0.98);
        opacity: 0.92;
    }
}


/* ══════════════════════════════════════════════════════════════════
   18. Home — Mobile-First (scoped to body.home / .home)
   Flow: hero lead-story → editorias hidden (chips do it) → pillar
   feed → newsletter inline → latest feed → most-read → banner.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Reorder main flow via flex ────────────────────────────────── */
    body.home #main-content,
    body.blog #main-content {
        display: flex;
        flex-direction: column;
    }

    body.home .home-hero,
    body.blog .home-hero                                 { order: 1; }
    body.home [aria-labelledby="pillar-heading"],
    body.blog [aria-labelledby="pillar-heading"]         { order: 2; }
    body.home [aria-labelledby="latest-heading"],
    body.blog [aria-labelledby="latest-heading"]         { order: 3; }
    body.home [aria-labelledby="most-read-heading"],
    body.blog [aria-labelledby="most-read-heading"]      { order: 4; }
    body.home .container:has(> .banner-mockup),
    body.blog .container:has(> .banner-mockup)           { order: 5; }
    body.home .newsletter-band,
    body.blog .newsletter-band                           { order: 6; }

    /* Editorias section is replaced by the chips bar */
    body.home [aria-labelledby="editorias-heading"],
    body.blog [aria-labelledby="editorias-heading"] {
        display: none;
    }


    /* ── 1. HERO → Lead story (featured pillar card) ──────────────── */
    body.home .home-hero,
    body.blog .home-hero {
        padding: 32px 0 24px;
    }

    body.home .home-hero .container,
    body.blog .home-hero .container {
        padding-left:  var(--m-gutter-left);
        padding-right: var(--m-gutter-right);
    }

    body.home .home-hero__inner,
    body.blog .home-hero__inner {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Marketing copy ABOVE the featured card — eyebrow + h1 + sub + CTAs */
    body.home .home-hero__eyebrow,
    body.blog .home-hero__eyebrow {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: var(--m-accent);
        margin: 0 0 16px;
    }

    body.home .home-hero__eyebrow::before,
    body.blog .home-hero__eyebrow::before {
        display: none;
    }

    body.home .home-hero__h1,
    body.blog .home-hero__h1 {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-hero);
        font-weight: var(--m-fw-bold);
        line-height: var(--m-lh-tight);
        letter-spacing: var(--m-tracking-tight);
        color: var(--m-tx-primary);
        text-wrap: balance;
        margin: 0 0 16px;
    }

    /* No italic on the <em> in the hero h1 — keep the line rhythm flat
       and avoid the "Conhecimento que vira margem" looking detached
       from the rest of the headline. */
    body.home .home-hero__h1 em,
    body.blog .home-hero__h1 em {
        font-style: normal;
        color: inherit;
    }

    body.home .home-hero__sub,
    body.blog .home-hero__sub {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-lead);
        line-height: var(--m-lh-relaxed);
        color: var(--m-tx-secondary);
        margin: 0 0 24px;
        max-width: none;
    }

    body.home .home-hero__ctas,
    body.blog .home-hero__ctas {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    /* Featured pillar card — G1 gradient (matches desktop) */
    body.home .home-hero__pillar,
    body.blog .home-hero__pillar {
        display: block;
        min-height: 0;
        padding: 28px 24px;
        border-radius: var(--m-r-lg);
        text-align: left;
        box-shadow: none;
        background: var(--m-g1);
        color: var(--m-bg-surface);
    }

    body.home .home-hero__pillar-title,
    body.blog .home-hero__pillar-title {
        color: var(--m-bg-surface);
    }

    body.home .home-hero__pillar-lead,
    body.blog .home-hero__pillar-lead {
        color: rgba(255, 255, 255, 0.85);
    }

    body.home .home-hero__pillar-meta,
    body.blog .home-hero__pillar-meta {
        color: rgba(255, 255, 255, 0.7);
    }

    body.home .home-hero__pillar-badges,
    body.blog .home-hero__pillar-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }

    body.home .home-hero__badge--pillar,
    body.home .home-hero__badge--editoria,
    body.blog .home-hero__badge--pillar,
    body.blog .home-hero__badge--editoria {
        font-size: var(--m-fs-micro);
        padding: 4px 10px;
    }

    body.home .home-hero__pillar-title,
    body.blog .home-hero__pillar-title {
        font-family: var(--m-font-display);
        font-size: 1.5rem;
        font-weight: var(--m-fw-semibold);
        line-height: var(--m-lh-snug);
        letter-spacing: var(--m-tracking-snug);
        margin: 0 0 12px;
    }

    body.home .home-hero__pillar-lead,
    body.blog .home-hero__pillar-lead {
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        margin: 0 0 16px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.home .home-hero__pillar-meta,
    body.blog .home-hero__pillar-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 16px;
        font-size: var(--m-fs-mini);
        opacity: 0.85;
    }


    /* ── 2 & 4. FEED sections (pillar guides + latest articles) ──── */
    body.home [aria-labelledby="pillar-heading"],
    body.home [aria-labelledby="latest-heading"],
    body.blog [aria-labelledby="pillar-heading"],
    body.blog [aria-labelledby="latest-heading"] {
        padding-block: var(--m-section-gap) 0;
        background: transparent;
    }

    body.home .page-section--alt,
    body.blog .page-section--alt {
        background: transparent;
    }


    /* ── 3. NEWSLETTER full-bleed, seamless transition into footer ──
       Vertical gradient ends in #131326 — the exact same color as the
       footer (--color-footer-bg = --purple-900). Combined with zero
       margin/radius and a 1px negative margin-bottom to absorb any
       sub-pixel rounding, the newsletter visually melts into the
       footer instead of looking like a detached card. */
    body.home .newsletter-band,
    body.blog .newsletter-band,
    body.page-artigos .newsletter-band {
        margin: 0 0 -1px 0;
        padding: 56px var(--m-gutter-left) 64px;
        background: linear-gradient(180deg,
            #9B6AFA 0%,
            #5E3DB8 45%,
            #2B1E5E 78%,
            #131326 100%);
        border-radius: 0;
        border: none;
        text-align: center;
        color: var(--m-bg-surface);
    }

    body.home .newsletter-band .container,
    body.blog .newsletter-band .container,
    body.page-artigos .newsletter-band .container {
        padding: 0;
        max-width: none;
    }

    body.home .newsletter-band__eyebrow,
    body.blog .newsletter-band__eyebrow {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        margin: 0 0 12px;
    }

    body.home .newsletter-band__title,
    body.blog .newsletter-band__title {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-h2);
        font-weight: var(--m-fw-bold);
        line-height: var(--m-lh-snug);
        letter-spacing: var(--m-tracking-snug);
        margin: 0 0 12px;
        text-wrap: balance;
        color: var(--m-bg-surface);
    }

    body.home .newsletter-band__description,
    body.blog .newsletter-band__description {
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        color: rgba(255, 255, 255, 0.8);
        margin: 0 0 24px;
    }


    /* ── 5. MOST READ → numbered list ──────────────────────────────── */
    body.home [aria-labelledby="most-read-heading"],
    body.blog [aria-labelledby="most-read-heading"] {
        padding-block: var(--m-section-gap) 0;
    }


    /* ── 6. BANNER → discreet, neutral card ──────────────────────── */
    body.home .container:has(> .banner-mockup),
    body.blog .container:has(> .banner-mockup) {
        padding-block: var(--m-section-gap) var(--m-section-gap);
    }

    body.home .banner-mockup,
    body.blog .banner-mockup {
        background: var(--m-bg-surface);
        border: 1px solid var(--m-border-medium);
        border-radius: var(--m-r-lg);
        padding: 20px;
        margin: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        min-height: 0;
        box-shadow: none;
    }

    body.home .banner-mockup__divider,
    body.blog .banner-mockup__divider {
        display: none;
    }

    body.home .banner-mockup__sponsored,
    body.blog .banner-mockup__sponsored {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: var(--m-tx-tertiary);
    }

    body.home .banner-mockup__logo,
    body.blog .banner-mockup__logo {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-h3);
        font-weight: var(--m-fw-bold);
        letter-spacing: var(--m-tracking-snug);
        color: var(--m-accent);
    }

    body.home .banner-mockup__copy,
    body.blog .banner-mockup__copy {
        order: 2;
        flex-basis: auto;
        width: 100%;
    }

    body.home .banner-mockup__eyebrow,
    body.blog .banner-mockup__eyebrow {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        letter-spacing: var(--m-tracking-wide);
        color: var(--m-tx-tertiary);
    }

    body.home .banner-mockup__headline,
    body.blog .banner-mockup__headline {
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        color: var(--m-tx-primary);
    }

    /* Banner CTA — keep it compact, single line */
    body.home .banner-mockup__cta,
    body.blog .banner-mockup__cta {
        min-height: 44px;
        padding: 10px 20px;
        font-size: var(--m-fs-small);
        white-space: nowrap;
        align-self: flex-start;
        width: auto;
    }


    /* ── Most-read — small cards, balanced typography ─────────────── */
    .most-read__grid {
        display: flex;
        flex-direction: column;
        gap: 8px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .most-read__item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 14px 16px;
        border: 1px solid var(--m-border-subtle);
        border-radius: var(--m-r-md);
        background: var(--m-bg-surface);
        text-decoration: none;
        min-height: 0;
        height: auto;
        box-shadow: none;
    }

    .most-read__rank {
        font-family: var(--m-font-mono);
        font-size: 1.25rem;           /* 20px — balanced with title */
        font-weight: var(--m-fw-bold);
        color: var(--m-accent);
        opacity: 0.5;
        line-height: 1;
        flex-shrink: 0;
        min-width: 1.75rem;
        margin-top: 2px;
    }

    .most-read__content {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .most-read__category {
        font-family: var(--m-font-mono);
        font-size: 0.6875rem;         /* 11px */
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-wide);
        text-transform: uppercase;
        color: var(--m-accent);
    }

    .most-read__title {
        font-family: var(--m-font-ui);
        font-size: 0.9375rem;         /* 15px — more readable */
        font-weight: var(--m-fw-semibold);
        line-height: var(--m-lh-snug);
        color: var(--m-tx-primary);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .most-read__meta {
        font-size: var(--m-fs-mini);
        color: var(--m-tx-tertiary);
        margin-top: 2px;
    }
}


/* ══════════════════════════════════════════════════════════════════
   19. Breadcrumb (article + category)
   Horizontal scroll, no scrollbar, ellipsis on current
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Breadcrumb is hidden on mobile — it clutters the small viewport
       without much navigational value (the chips bar handles the
       editoria-level navigation, and back-button is one tap away).
       The markup stays in the DOM for SEO / screen readers. */
    .breadcrumb {
        display: none;
    }
}


/* ══════════════════════════════════════════════════════════════════
   20. Article — Cluster (reading view)
   Body 17px Source Serif 4 / 1.65, measure 42rem (≈672px),
   inline TOC accordion at top, inline sidebar items at bottom.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Hero (cluster) ───────────────────────────────────────────── */
    .hero-cluster {
        padding: 16px 0 24px;
    }

    .hero-cluster .container {
        padding-left:  var(--m-gutter-left);
        padding-right: var(--m-gutter-right);
    }

    .hero-cluster__image-wrap {
        border-radius: var(--m-r-lg);
        margin: 0 0 20px;
        overflow: hidden;
        aspect-ratio: 16 / 9;
        background: var(--m-accent-faint);
    }

    .hero-cluster__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Editoria tag (mono uppercase roxo) */
    .hero-pillar__editoria-tag {
        display: inline-block;
        margin-bottom: 12px;
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-mini);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-wide);
        text-transform: uppercase;
        color: var(--m-accent);
        text-decoration: none;
    }

    .hero-cluster__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-mini);
        color: var(--m-tx-tertiary);
        margin-bottom: 16px;
        align-items: center;
    }

    .hero-cluster__h1 {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-hero);
        font-weight: var(--m-fw-bold);
        line-height: var(--m-lh-tight);
        letter-spacing: var(--m-tracking-tight);
        color: var(--m-tx-primary);
        text-wrap: balance;
        margin: 0 0 16px;
    }

    .hero-cluster__description {
        font-family: var(--m-font-body);
        font-size: var(--m-fs-lead);
        line-height: var(--m-lh-relaxed);
        color: var(--m-tx-secondary);
        margin: 0 0 20px;
    }

    .hero-cluster__author {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid var(--m-border-subtle);
    }

    .hero-cluster__author-avatar {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .hero-cluster__author-name {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        font-weight: var(--m-fw-semibold);
        line-height: 1.2;
        margin: 0;
        color: var(--m-tx-primary);
    }

    .hero-cluster__author-role {
        font-size: var(--m-fs-mini);
        color: var(--m-tx-tertiary);
        line-height: 1.2;
        margin: 0;
    }


    /* ── Pulso operacional — G1 gradient subtle note above article ─ */
    .pulso-operacional {
        padding: 14px 16px;
        margin: 16px 0 24px;
        border-radius: var(--m-r-md);
        display: flex;
        gap: 12px;
        align-items: flex-start;
        background: var(--m-g1);
        color: var(--m-bg-surface);
        border: none;
    }

    .pulso-operacional__dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-top: 8px;
        border-radius: 50%;
        background: var(--m-accent);
        flex-shrink: 0;
        animation: pulse-dot 2s var(--m-ease-in-out) infinite;
    }

    @keyframes pulse-dot {
        0%, 100% { opacity: 1; }
        50%      { opacity: 0.4; }
    }

    .pulso-operacional__text {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        margin: 0;
        color: var(--m-bg-surface);
    }


    /* ── TOC inline accordion (cluster default) ───────────────────── */
    .toc--inline {
        display: block;
        margin: 8px 0 32px;
        padding: 16px 20px;
        background: var(--m-bg-surface);
        border: 1px solid var(--m-border-subtle);
        border-radius: var(--m-r-md);
    }

    .toc--inline .toc__title {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: var(--m-tx-tertiary);
        margin: 0 0 12px;
    }

    .toc--inline .toc__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .toc--inline .toc__list li {
        margin: 0;
        counter-increment: toc-step;
    }

    .toc--inline .toc__list {
        counter-reset: toc-step;
    }

    .toc--inline .toc__list a {
        display: flex;
        align-items: baseline;
        min-height: 40px;
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-snug);
        color: var(--m-tx-primary);
        text-decoration: none;
        padding: 8px 0;
        border-bottom: 1px solid var(--m-border-subtle);
    }

    .toc--inline .toc__list li:last-child a {
        border-bottom: none;
    }

    .toc--inline .toc__list a::before {
        content: counter(toc-step, decimal-leading-zero);
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-mini);
        color: var(--m-accent);
        margin-right: 12px;
        flex-shrink: 0;
        min-width: 1.5rem;
    }

    .toc--inline .toc__list a.is-active {
        color: var(--m-accent);
        font-weight: var(--m-fw-semibold);
    }


    /* ── Article layout (single column, sidebar inline at bottom) ── */
    .article-layout {
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding-bottom: 56px;
        grid-template-columns: 1fr;
    }

    .article-layout__sidebar {
        display: flex;
        flex-direction: column;
        gap: 24px;
        position: static;
        width: 100%;
        margin: 0;
    }

    /* Hide sidebar TOC duplicate — inline TOC at top is enough */
    .article-layout__sidebar .toc:not(.toc--inline) {
        display: none;
    }


    /* ── Article body (Source Serif 4, 17px, measure 42rem) ──────── */
    .article-body {
        font-family: var(--m-font-body);
        font-size: var(--m-fs-body);
        line-height: var(--m-lh-relaxed);
        color: var(--m-tx-primary);
        padding: 0;
        max-width: var(--m-measure);
    }

    .article-body p {
        font-family: var(--m-font-body);
        font-size: var(--m-fs-body);
        line-height: var(--m-lh-relaxed);
        margin: 0 0 20px;
        color: var(--m-tx-primary);
    }

    .article-body h2 {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-h2);
        font-weight: var(--m-fw-bold);
        line-height: var(--m-lh-snug);
        letter-spacing: var(--m-tracking-snug);
        color: var(--m-tx-primary);
        margin: 40px 0 12px;
        border-top: 3px solid var(--m-accent);
        padding-top: 16px;
        text-wrap: balance;
    }

    .article-body h3 {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-h3);
        font-weight: var(--m-fw-semibold);
        line-height: var(--m-lh-snug);
        margin: 28px 0 8px;
        color: var(--m-tx-primary);
    }

    .article-body h4 {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-h4);
        font-weight: var(--m-fw-bold);
        margin: 20px 0 8px;
        color: var(--m-tx-primary);
    }

    .article-body strong, .article-body b {
        font-weight: var(--m-fw-bold);
        color: var(--m-tx-primary);
    }

    .article-body em, .article-body i {
        font-style: italic;
    }

    .article-body a {
        color: var(--m-accent);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
    }

    .article-body ul,
    .article-body ol {
        margin: 0 0 24px 24px;
        padding: 0;
    }

    .article-body li {
        font-family: var(--m-font-body);
        font-size: var(--m-fs-body);
        line-height: var(--m-lh-relaxed);
        margin-bottom: 8px;
    }

    .article-body blockquote {
        margin: 28px 0;
        padding-left: 20px;
        border-left: 3px solid var(--m-accent);
        font-family: var(--m-font-body);
        font-size: var(--m-fs-body);
        line-height: var(--m-lh-relaxed);
        color: var(--m-tx-secondary);
        font-style: italic;
    }

    .article-body code {
        font-family: var(--m-font-mono);
        font-size: 0.9em;
        background: var(--m-accent-faint);
        padding: 1px 6px;
        border-radius: 4px;
        word-break: break-word;
        color: var(--m-accent-deep);
    }

    .article-body pre {
        margin: 24px 0;
        padding: 16px;
        background: var(--m-bg-mono);
        border-radius: var(--m-r-md);
        overflow-x: auto;
        font-size: var(--m-fs-small);
        border: 1px solid var(--m-border-subtle);
    }

    .article-body pre code {
        background: transparent;
        padding: 0;
        color: var(--m-tx-primary);
    }

    .article-body img,
    .article-body figure {
        margin: 28px 0;
        border-radius: var(--m-r-lg);
        max-width: 100%;
    }

    .article-body figure img {
        border-radius: var(--m-r-lg);
        margin: 0;
    }

    .article-body figcaption {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-mini);
        color: var(--m-tx-tertiary);
        margin-top: 8px;
        text-align: center;
        line-height: var(--m-lh-base);
    }

    /* Tables — re-layout as stacked cards on mobile.
       Each row becomes a card; the first cell of each row gets
       emphasis as if it were a heading. No data-label needed,
       so it works on Elementor / Gutenberg tables out of the box. */
    .article-body table,
    .post-elementor table {
        display: block;
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
        border: none;
        background: transparent;
        margin: 24px 0;
    }

    .article-body table thead,
    .post-elementor table thead {
        display: none;
    }

    .article-body table tbody,
    .post-elementor table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .article-body table tr,
    .post-elementor table tr {
        display: flex;
        flex-direction: column;
        padding: 16px;
        border: 1px solid var(--m-border-subtle);
        border-radius: var(--m-r-md);
        background: var(--m-bg-surface);
        width: 100%;
    }

    .article-body table td,
    .article-body table th,
    .post-elementor table td,
    .post-elementor table th {
        display: block;
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        padding: 4px 0;
        border: none;
        text-align: left;
        white-space: normal;
        width: 100%;
    }

    /* First cell of each row reads as a header: bolder, with a
       subtle hairline separating it from the rest of the values. */
    .article-body table td:first-child,
    .article-body table th:first-child,
    .post-elementor table td:first-child,
    .post-elementor table th:first-child {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-body);
        font-weight: var(--m-fw-bold);
        color: var(--m-tx-primary);
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--m-border-subtle);
    }

    .article-body iframe {
        aspect-ratio: 16 / 9;
        height: auto;
        width: 100%;
        margin: 24px 0;
        border-radius: var(--m-r-lg);
    }

    .article-body hr {
        border: none;
        border-top: 1px solid var(--m-border-medium);
        margin: 40px auto;
        width: 60px;
    }


    /* ── Bio author block ──────────────────────────────────────────── */
    .bio-author {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 12px;
        align-items: start;
        padding: 20px;
        margin: 40px 0 0;
        background: var(--m-bg-surface);
        border: 1px solid var(--m-border-subtle);
        border-radius: var(--m-r-md);
    }

    .bio-author__avatar {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50%;
    }

    .bio-author > div {
        grid-column: 2;
    }

    .bio-author__name {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        font-weight: var(--m-fw-bold);
        margin: 0 0 2px;
        color: var(--m-tx-primary);
    }

    .bio-author__role {
        font-size: var(--m-fs-mini);
        color: var(--m-tx-tertiary);
        margin: 0 0 12px;
    }

    .bio-author__text {
        font-family: var(--m-font-body);
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        margin: 0;
        color: var(--m-tx-primary);
    }

    .bio-author__note {
        font-size: var(--m-fs-mini);
        color: var(--m-tx-quaternary);
        margin-top: 12px;
        font-style: italic;
        line-height: var(--m-lh-base);
    }

    .bio-author__links {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 16px;
    }

    .bio-author__link {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-mini);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-wide);
        text-transform: uppercase;
        color: var(--m-accent);
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }


    /* ── CTA close (Próximo passo) — G1 gradient ──────────────────── */
    .cta-close {
        padding: 40px 24px;
        margin: 40px 0 0;
        background: var(--m-g1);
        color: var(--m-bg-surface);
        border: none;
        border-radius: var(--m-r-lg);
    }

    .cta-close__eyebrow {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.75);
        margin: 0 0 12px;
    }

    .cta-close__title {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-h2);
        line-height: var(--m-lh-snug);
        letter-spacing: var(--m-tracking-snug);
        font-weight: var(--m-fw-bold);
        margin: 0 0 12px;
        color: var(--m-bg-surface);
        text-wrap: balance;
    }

    .cta-close__description {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        color: rgba(255, 255, 255, 0.85);
        margin: 0 0 24px;
    }

    /* CTA close primary button inverts on dark gradient */
    .cta-close__btn:not(.cta-close__btn--secondary) {
        background: var(--m-bg-surface);
        color: var(--m-tx-primary);
    }

    .cta-close__btn:not(.cta-close__btn--secondary):active {
        background: var(--m-bg-surface);
        color: var(--m-accent);
    }

    .cta-close__btn--secondary {
        color: var(--m-bg-surface);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .cta-close__actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }


    /* ── Pillar parent block — G1 gradient (cluster sidebar) ─────── */
    .pillar-parent-block {
        padding: 24px;
        background: var(--m-g1);
        color: var(--m-bg-surface);
        border-radius: var(--m-r-md);
        margin: 0;
        box-shadow: none;
        border: none;
    }

    .pillar-parent-block__label {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.75);
        margin: 0 0 8px;
    }

    .pillar-parent-block__title {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-body);
        line-height: var(--m-lh-snug);
        font-weight: var(--m-fw-semibold);
        color: var(--m-bg-surface);
        text-decoration: none;
        display: block;
        margin: 0 0 16px;
    }

    .pillar-parent-block__cta {
        background: var(--m-bg-surface);
        color: var(--m-tx-primary);
    }

    .pillar-parent-block__cta:active {
        background: var(--m-bg-surface);
        color: var(--m-accent);
    }


    /* ── Stream-hook (sidebar tool card) ──────────────────────────── */
    .stream-hook {
        padding: 24px;
        background: var(--m-g1);
        color: var(--m-bg-surface);
        border: none;
        border-radius: var(--m-r-md);
        box-shadow: none;
        width: 100%;
    }

    .stream-hook__label {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.75);
        margin: 0 0 8px;
    }

    .stream-hook__title {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-body);
        line-height: var(--m-lh-snug);
        font-weight: var(--m-fw-semibold);
        margin: 0 0 8px;
        color: var(--m-bg-surface);
    }

    .stream-hook__description {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        color: rgba(255, 255, 255, 0.85);
        margin: 0 0 16px;
    }

    .stream-hook__cta {
        background: var(--m-bg-surface);
        color: var(--m-tx-primary);
    }

    .stream-hook__cta:active {
        background: var(--m-bg-surface);
        color: var(--m-accent);
    }


    /* ── Sibling clusters list ─────────────────────────────────────── */
    .sibling-clusters {
        padding: 0;
        background: transparent;
        border: none;
        margin: 0;
    }

    .sibling-clusters__title {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: var(--m-tx-tertiary);
        margin: 0 0 12px;
    }

    .sibling-clusters__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .sibling-clusters__item {
        border-bottom: 1px solid var(--m-border-subtle);
    }

    .sibling-clusters__item:last-child {
        border-bottom: none;
    }

    .sibling-clusters__item a {
        display: flex;
        align-items: center;
        min-height: 48px;
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-snug);
        color: var(--m-tx-primary);
        text-decoration: none;
        padding: 12px 0;
    }


    /* ── Related posts at end of article ───────────────────────────── */
    .related-posts {
        padding-block: 56px;
        margin-top: 32px;
        border-top: 1px solid var(--m-border-medium);
    }
}


/* ══════════════════════════════════════════════════════════════════
   21. Article — Pillar (full-bleed hero + TOC bottom sheet)
   Pillar uses .hero-pillar-d variant + .toc-fab/.toc-sheet markup
   injected only on body.single-post with appmax_post_type=pillar.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Hero — Pillar D (full-bleed variant) ──────────────────────── */
    .hero-pillar-d {
        padding: 0;
        margin: 0;
    }

    .hero-pillar-d__image-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: var(--m-accent-faint);
    }

    .hero-pillar-d__bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-pillar-d__body {
        padding:
            24px var(--m-gutter-right) 24px var(--m-gutter-left);
    }

    .hero-pillar-d__tag {
        display: inline-block;
        margin-bottom: 12px;
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-mini);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-wide);
        text-transform: uppercase;
        color: var(--m-accent);
        text-decoration: none;
    }

    .hero-pillar-d__h1 {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-display);
        font-weight: var(--m-fw-bold);
        line-height: var(--m-lh-tight);
        letter-spacing: var(--m-tracking-tight);
        color: var(--m-tx-primary);
        text-wrap: balance;
        margin: 0 0 16px;
    }

    .hero-pillar-d__sub {
        font-family: var(--m-font-body);
        font-size: var(--m-fs-lead);
        line-height: var(--m-lh-relaxed);
        color: var(--m-tx-secondary);
        margin: 0 0 20px;
    }

    .hero-pillar-d__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-mini);
        color: var(--m-tx-tertiary);
    }


    /* ── TOC FAB — pillar only ─────────────────────────────────────── */
    /* Hidden by default everywhere; only PHP renders it on pillar.    */
    .toc-fab {
        position: fixed;
        right: 16px;
        bottom: calc(72px + var(--m-safe-bottom)); /* above back-to-top */
        z-index: var(--m-z-fab);
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: 1px solid var(--m-border-medium);
        background: var(--m-bg-surface);
        color: var(--m-accent);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow:
            0 8px 24px rgba(26, 20, 36, 0.15),
            0 2px 4px rgba(26, 20, 36, 0.08);
        transition:
            transform   var(--m-t-fast) var(--m-ease-out-quart),
            background  var(--m-t-fast) var(--m-ease-out-quart),
            color       var(--m-t-fast) var(--m-ease-out-quart);
    }

    .toc-fab:active {
        transform: scale(0.94);
    }

    .toc-fab[aria-expanded="true"] {
        background: var(--m-accent);
        color: var(--m-bg-surface);
        border-color: var(--m-accent);
    }


    /* ── TOC Bottom Sheet (Vaul-inspired vanilla) ─────────────────── */
    .toc-sheet {
        position: fixed;
        inset: 0;
        z-index: var(--m-z-drawer);
        pointer-events: none;
    }

    .toc-sheet[hidden] {
        display: none;
    }

    .toc-sheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(26, 20, 36, 0.45);
        opacity: 0;
        transition: opacity var(--m-t-base) var(--m-ease-out-quart);
        pointer-events: auto;
    }

    .toc-sheet__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 80vh;
        max-height: 80dvh;
        background: var(--m-bg-surface);
        border-radius: var(--m-r-xl) var(--m-r-xl) 0 0;
        box-shadow: 0 -12px 32px rgba(26, 20, 36, 0.18);
        transform: translate3d(0, 100%, 0);
        transition: transform var(--m-t-drawer) var(--m-ease-ios);
        display: flex;
        flex-direction: column;
        pointer-events: auto;
        padding-bottom: var(--m-safe-bottom);
        touch-action: none;
        will-change: transform;
    }

    .toc-sheet.is-open .toc-sheet__backdrop {
        opacity: 1;
    }

    .toc-sheet.is-open .toc-sheet__panel {
        transform: translate3d(0, 0, 0);
    }

    /* Drag handle (swipe-down-to-dismiss) */
    .toc-sheet__handle {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 0 8px;
        cursor: grab;
        touch-action: none;
    }

    .toc-sheet__handle::before {
        content: "";
        display: block;
        width: 40px;
        height: 5px;
        border-radius: 999px;
        background: var(--m-border-strong);
    }

    .toc-sheet__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px 12px;
        border-bottom: 1px solid var(--m-border-subtle);
    }

    .toc-sheet__title {
        margin: 0;
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: var(--m-tx-tertiary);
    }

    .toc-sheet__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: var(--m-accent-faint);
        color: var(--m-tx-primary);
        cursor: pointer;
    }

    .toc-sheet__list {
        list-style: none;
        margin: 0;
        padding: 8px 0;
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
        counter-reset: toc-step;
    }

    .toc-sheet__list li {
        margin: 0;
        counter-increment: toc-step;
    }

    .toc-sheet__list a {
        display: flex;
        align-items: baseline;
        gap: 14px;
        min-height: 52px;
        padding: 12px 24px;
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-body);
        color: var(--m-tx-primary);
        text-decoration: none;
        line-height: var(--m-lh-snug);
        border-left: 3px solid transparent;
    }

    .toc-sheet__list a::before {
        content: counter(toc-step, decimal-leading-zero);
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-mini);
        font-weight: var(--m-fw-semibold);
        color: var(--m-accent);
        flex-shrink: 0;
        min-width: 1.5rem;
    }

    .toc-sheet__list a.is-active {
        color: var(--m-accent);
        font-weight: var(--m-fw-semibold);
        border-left-color: var(--m-accent);
        background: var(--m-accent-faint);
    }

    .toc-sheet__list a:active {
        background: var(--m-accent-faint);
    }
}


/* Default hide of TOC fab/sheet on desktop (they only render via PHP
   inside the article — but we hide them defensively here too). */
.toc-fab,
.toc-sheet,
.editorias-modal {
    display: none;
}


/* ══════════════════════════════════════════════════════════════════
   Editorias Modal (mobile-only, home only)
   Opened by the "Explorar editorias" hero CTA on phones. Desktop
   keeps the same CTA as a plain anchor — scrolls to #editorias-heading.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .editorias-modal {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--m-z-modal);
        pointer-events: none;
    }

    .editorias-modal[hidden] {
        display: none;
    }

    .editorias-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(26, 20, 36, 0.55);
        opacity: 0;
        transition: opacity var(--m-t-base) var(--m-ease-out-quart);
        pointer-events: auto;
    }

    .editorias-modal__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 85vh;
        max-height: 85dvh;
        background: var(--m-bg-main);
        border-radius: var(--m-r-xl) var(--m-r-xl) 0 0;
        box-shadow: 0 -12px 32px rgba(26, 20, 36, 0.22);
        transform: translate3d(0, 100%, 0);
        transition: transform var(--m-t-drawer) var(--m-ease-ios);
        display: flex;
        flex-direction: column;
        pointer-events: auto;
        padding-bottom: calc(var(--m-safe-bottom) + 12px);
    }

    .editorias-modal.is-open .editorias-modal__backdrop {
        opacity: 1;
    }

    .editorias-modal.is-open .editorias-modal__panel {
        transform: translate3d(0, 0, 0);
    }

    /* Drag handle indicator (purely visual — no swipe gesture wired) */
    .editorias-modal__panel::before {
        content: "";
        display: block;
        width: 40px;
        height: 5px;
        border-radius: 999px;
        background: var(--m-border-strong);
        margin: 12px auto 4px;
    }

    .editorias-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 24px 16px;
        border-bottom: 1px solid var(--m-border-subtle);
    }

    .editorias-modal__title {
        margin: 0;
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-h3);
        font-weight: var(--m-fw-bold);
        color: var(--m-tx-primary);
    }

    .editorias-modal__close {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: var(--m-accent-faint);
        color: var(--m-tx-primary);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
    }

    .editorias-modal__close::before {
        content: "\00d7";
        font-size: 22px;
        font-family: var(--m-font-ui);
        line-height: 1;
    }

    .editorias-modal__list {
        list-style: none;
        margin: 0;
        padding: 8px 12px 12px;
        overflow-y: auto;
        flex: 1;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .editorias-modal__list li {
        margin: 0;
    }

    .editorias-modal__item {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 56px;
        padding: 14px 16px;
        font-family: var(--m-font-ui);
        text-decoration: none;
        border-radius: var(--m-r-md);
        background: var(--m-bg-surface);
        border: 1px solid var(--m-border-subtle);
        transition: background var(--m-t-fast) var(--m-ease-out-quart);
    }

    .editorias-modal__item:active {
        background: var(--m-accent-faint);
    }

    .editorias-modal__item-name {
        flex: 1;
        font-size: var(--m-fs-body);
        font-weight: var(--m-fw-semibold);
        color: var(--m-tx-primary);
        line-height: var(--m-lh-snug);
    }

    .editorias-modal__item-count {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-wide);
        text-transform: uppercase;
        color: var(--m-tx-tertiary);
        flex-shrink: 0;
    }

    .editorias-modal__item-arrow {
        color: var(--m-accent);
        flex-shrink: 0;
    }
}

@media (max-width: 767px) {
    /* Re-enable when present in DOM (PHP injects only on pillar) */
    .toc-fab { display: inline-flex; }
    .toc-sheet { display: block; }
    .toc-sheet[hidden] { display: none; }
}


/* ══════════════════════════════════════════════════════════════════
   22. Category (editoria) — mini-hero + featured + feed
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* ── Mini-hero (G2 gradient — same as desktop) ────────────────── */
    .editoria-hero {
        min-height: 0;
        padding: 32px 0 32px;
        background: var(--m-g2);
        color: var(--m-bg-surface);
        align-items: flex-start;
    }

    .editoria-hero .container {
        padding-left:  var(--m-gutter-left);
        padding-right: var(--m-gutter-right);
    }

    .editoria-hero__inner {
        display: block;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .editoria-hero__content {
        text-align: left;
    }

    /* Hide decorative cover (3D image) — saves a viewport */
    .editoria-hero__visual,
    .editoria-hero__cover {
        display: none !important;
    }

    .editoria-hero__label {
        display: inline-block;
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        margin: 0 0 12px;
    }

    .editoria-hero__title {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-hero);
        font-weight: var(--m-fw-bold);
        line-height: var(--m-lh-tight);
        letter-spacing: var(--m-tracking-tight);
        color: var(--m-bg-surface);
        text-wrap: balance;
        margin: 0 0 12px;
    }

    .editoria-hero__description {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        color: rgba(255, 255, 255, 0.85);
        margin: 0 0 24px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .editoria-hero__stats {
        display: flex;
        gap: 24px;
        margin: 0;
    }

    .editoria-hero__stat-value {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-h3);
        font-weight: var(--m-fw-bold);
        line-height: 1;
        color: var(--m-bg-surface);
        margin: 0;
    }

    .editoria-hero__stat-label {
        font-size: var(--m-fs-micro);
        color: rgba(255, 255, 255, 0.65);
        margin: 0;
        letter-spacing: var(--m-tracking-wide);
        text-transform: uppercase;
    }

    /* Breadcrumb inside dark editoria hero — invert colors */
    .editoria-hero .breadcrumb__link,
    .editoria-hero .breadcrumb__separator {
        color: rgba(255, 255, 255, 0.55);
    }

    .editoria-hero .breadcrumb__current {
        color: rgba(255, 255, 255, 0.9);
    }


    /* ── Card destaque (featured article of the editoria) ────────── */
    .card-destaque {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        max-height: none !important;
        gap: 0;
        padding: 0;
        margin: 32px 0 0;
        background: var(--m-bg-surface);
        border: 1px solid var(--m-border-subtle);
        border-radius: var(--m-r-lg);
        box-shadow: none;
        overflow: hidden;
        text-decoration: none;
    }

    .card-destaque__image-wrap {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 0;
        overflow: hidden;
        background: var(--m-accent-faint);
    }

    .card-destaque__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 16 / 9 !important;
    }

    .card-destaque__body {
        padding: 20px !important;
        gap: 8px;
        display: flex;
        flex-direction: column;
    }

    .card-destaque__title {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-h2);
        font-weight: var(--m-fw-semibold);
        line-height: var(--m-lh-snug);
        letter-spacing: var(--m-tracking-snug);
        color: var(--m-tx-primary);
    }

    .card-destaque__meta {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--m-fs-mini);
        color: var(--m-tx-tertiary);
    }

    .card-destaque__avatar {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        flex-shrink: 0;
    }


    /* ── Editoria manifesto band — G2 gradient (matches desktop) ─── */
    .editoria-manifesto-band {
        padding: 48px var(--m-gutter-right) 48px var(--m-gutter-left);
        margin: 40px 0 0;
        background: var(--m-g2);
        color: var(--m-bg-surface);
    }

    .editoria-manifesto-band__quote {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-lead);
        line-height: var(--m-lh-snug);
        letter-spacing: var(--m-tracking-snug);
        font-weight: var(--m-fw-medium);
        text-wrap: balance;
        color: var(--m-bg-surface);
        font-style: italic;
        margin: 0;
    }


    /* ── All-articles grid (uses the universal .card pattern) ────── */
    [aria-labelledby="articles-heading"] {
        padding: 40px 0;
    }


    /* ── Pagination — minimal prev/next ──────────────────────────── */
    .pagination,
    .navigation.pagination {
        margin-top: 40px;
        padding-top: 24px;
        border-top: 1px solid var(--m-border-subtle);
    }

    .navigation.pagination .nav-links {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .pagination a,
    .pagination .current,
    .pagination .page-numbers {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-mini);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-wide);
        text-transform: uppercase;
        color: var(--m-accent);
        text-decoration: none;
        padding: 12px 16px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        border-radius: var(--m-r-md);
    }

    .pagination .current {
        background: var(--m-accent-faint);
    }


    /* ── Empty state (no posts in category) ───────────────────────── */
    .empty-state {
        text-align: center;
        padding: 56px var(--m-gutter);
        max-width: none;
        margin: 0;
    }

    .empty-state__title {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-h3);
        font-weight: var(--m-fw-semibold);
        margin: 0 0 8px;
        color: var(--m-tx-primary);
    }

    .empty-state__description {
        font-family: var(--m-font-body);
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        color: var(--m-tx-secondary);
        margin: 0;
    }
}


/* ══════════════════════════════════════════════════════════════════
   23. Search results page (archive header)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .archive-header {
        padding: 32px 0 24px;
        margin-bottom: 24px;
        border-bottom: 1px solid var(--m-border-subtle);
    }

    .archive-header .container {
        padding-left:  var(--m-gutter-left);
        padding-right: var(--m-gutter-right);
    }

    .archive-header__eyebrow {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: var(--m-accent);
        margin: 0 0 8px;
    }

    .archive-header__title {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-h1);
        font-weight: var(--m-fw-bold);
        line-height: var(--m-lh-tight);
        letter-spacing: var(--m-tracking-tight);
        color: var(--m-tx-primary);
        margin: 0 0 8px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .archive-header__sub {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        color: var(--m-tx-tertiary);
        margin: 0;
    }
}


/* ══════════════════════════════════════════════════════════════════
   24. Newsletter band (standalone — non-home pages use this)
   On home it's already styled inside section 18 (lilac inline card).
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .newsletter-band {
        padding: 48px var(--m-gutter-right) 48px var(--m-gutter-left);
        text-align: center;
        background: var(--m-g3);
        color: var(--m-bg-surface);
    }

    .newsletter-band__eyebrow {
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-micro);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-widest);
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        margin: 0 0 12px;
    }

    .newsletter-band__title {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-h2);
        font-weight: var(--m-fw-bold);
        line-height: var(--m-lh-snug);
        letter-spacing: var(--m-tracking-snug);
        color: var(--m-bg-surface);
        text-wrap: balance;
        margin: 0 0 12px;
    }

    .newsletter-band__description {
        font-family: var(--m-font-ui);
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        color: rgba(255, 255, 255, 0.8);
        margin: 0 0 24px;
    }

    .newsletter-band__form {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 100%;
    }

    .newsletter-band__input {
        width: 100%;
        min-height: 50px;
        font-size: 16px;
        font-family: var(--m-font-ui);
        padding: 0 20px;
        border-radius: var(--m-r-pill);
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: rgba(255, 255, 255, 0.95);
        color: var(--m-tx-primary);
    }

    .newsletter-band__input::placeholder {
        color: var(--m-tx-tertiary);
    }

    .newsletter-band__privacy {
        font-size: var(--m-fs-mini);
        color: rgba(255, 255, 255, 0.6);
        margin: 16px 0 0;
    }
}


/* ══════════════════════════════════════════════════════════════════
   25. 404 — Page not found
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    .error-404 {
        text-align: center;
        padding: 56px var(--m-gutter-right) 56px var(--m-gutter-left);
        max-width: 36rem;
        margin: 0 auto;
    }

    .error-404__eyebrow {
        font-family: var(--m-font-display);
        font-size: clamp(4rem, 22vw, 6rem);
        font-weight: var(--m-fw-bold);
        line-height: 0.9;
        color: var(--m-accent);
        letter-spacing: -0.04em;
        margin: 0 0 16px;
        opacity: 0.9;
    }

    .error-404__title {
        font-family: var(--m-font-display);
        font-size: var(--m-fs-h1);
        font-weight: var(--m-fw-bold);
        line-height: var(--m-lh-tight);
        letter-spacing: var(--m-tracking-tight);
        color: var(--m-tx-primary);
        text-wrap: balance;
        margin: 0 0 12px;
    }

    .error-404__description {
        font-family: var(--m-font-body);
        font-size: var(--m-fs-small);
        line-height: var(--m-lh-base);
        color: var(--m-tx-secondary);
        margin: 0 auto 24px;
        max-width: 36ch;
    }

    .error-404__search {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 100%;
        margin: 0 auto 20px;
    }

    .error-404__search-input {
        width: 100%;
        min-height: 50px;
        font-size: 16px;
        font-family: var(--m-font-ui);
        padding: 0 20px;
        border-radius: var(--m-r-pill);
        border: 1px solid var(--m-border-medium);
        background: var(--m-bg-surface);
        color: var(--m-tx-primary);
    }

    .error-404__home-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--m-font-mono);
        font-size: var(--m-fs-small);
        font-weight: var(--m-fw-semibold);
        letter-spacing: var(--m-tracking-wide);
        text-transform: uppercase;
        color: var(--m-tx-secondary);
        text-decoration: none;
    }
}


/* ══════════════════════════════════════════════════════════════════
   26. Touch & performance polish (final hygiene pass)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* Suppress 3D editoria card transforms (perf on low-end Android) */
    .editoria-card {
        transform: none !important;
        will-change: auto;
    }

    .editoria-card:hover {
        transform: none !important;
    }

    /* Suppress generic card hover transforms — no hover on touch */
    .card:hover,
    .most-read__item:hover {
        transform: none;
    }

    /* Use small viewport unit (svh) where 100vh would be too tall
       (Safari mobile address bar). Honour-progressive fallback. */
    .home-hero,
    .editoria-hero {
        min-height: 0;
    }

    /* Prevent overflow from any rogue child blowing up the viewport */
    main, article, section, .container {
        max-width: 100%;
    }

    /* Lazy-load fallback hint for older browsers */
    img:not([loading]) {
        loading: lazy;
    }

    /* Reduce motion preferences */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }

        .nav { transition: none !important; }
        .back-to-top, .toc-fab, .toc-sheet__panel {
            transition: opacity var(--m-t-fast) ease !important;
        }
        .pulso-operacional__dot {
            animation: none !important;
        }
    }

    /* Light-only color scheme (no dark mode on mobile by default;
       Appmax brand is light-first) */
    html {
        color-scheme: light;
    }
}


/* ══════════════════════════════════════════════════════════════════
   27. Tablet refinements (768-1023px)
   Light touches — tablet uses mostly the desktop layout still,
   but we polish the article reading view + footer here.
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {

    .article-layout {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .article-layout__sidebar {
        position: static;
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .article-layout__sidebar > * {
        margin: 0;
    }

    /* Tablet footer: 2 cols already handled in section 14 */
}