/* ============================================================
 * Arletex — Nosotros (rediseño Design System v3.3)
 * Prefijo de página: .nx-
 * Convive con products.css (tokens core: ink, white, orange,
 * purple, muted, font-body). Aquí se completan los faltantes.
 * ============================================================ */

:root {
    --ax-paper:        #FAF6EE;
    --ax-cream:        #F2EDE4;
    --ax-orange-deep:  #B0401A;
    --ax-yellow:       #FFEB3B;
    --ax-yellow-deep:  #C9B900;
    --ax-whatsapp:     #25D366;
    --ax-whatsapp-deep:#0F8C40;
    --ax-muted-dark:   #A8A39A;
    --ax-rule:         #E6E1D6;
    --ax-rule-on-dark: rgba(250, 246, 238, 0.18);

    --ax-font-display: 'Anton', 'Arial Narrow', sans-serif;
    --ax-font-accent:  'Fraunces', Georgia, serif;
    --ax-font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

    --ax-motion-fast:  120ms;
    --ax-motion-base:  200ms;
    --ax-motion-slow:  320ms;
    --ax-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ax-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
}

/* ====== Scoping & reset suave ============================== */
.nx-page {
    color: var(--ax-ink); background: #fff; scroll-behavior: smooth;
    /* contiene cualquier decoración (sombras, mega-text, stickers rotados)
       que se salga del viewport — evita scroll horizontal espurio */
    overflow-x: clip;
    position: relative;
}
.nx-page *,
.nx-page *::before,
.nx-page *::after { box-sizing: border-box; }
.nx-page img { max-width: 100%; display: block; }
.nx-page a { color: inherit; text-decoration: none; }
.nx-page h1, .nx-page h2, .nx-page h3, .nx-page h4, .nx-page p { margin: 0; }
.nx-page [id] { scroll-margin-top: 125px; }
@media (max-width: 1080px) { .nx-page [id] { scroll-margin-top: 116px; } }
@media (max-width: 767px)  { .nx-page [id] { scroll-margin-top: 170px; } }
.nx-page *:focus-visible { outline: 3px solid var(--ax-orange); outline-offset: 2px; }

/* ====== Layout: container, grid, stack ===================== */
.nx-container {
    width: 100%; max-width: 1380px; margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
}
.nx-container--narrow { max-width: 760px; }
.nx-container--wide   { max-width: 1600px; }

.nx-stack { display: flex; flex-direction: column; gap: 24px; }
.nx-stack--inline { flex-direction: row; align-items: center; flex-wrap: wrap; }
.nx-stack[data-gap="2"] { gap: 8px; }
.nx-stack[data-gap="3"] { gap: 12px; }
.nx-stack[data-gap="4"] { gap: 16px; }
.nx-stack[data-gap="6"] { gap: 24px; }
.nx-stack[data-gap="8"] { gap: 32px; }

.nx-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.nx-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nx-grid--4 { grid-template-columns: repeat(4, 1fr); }
.nx-grid--6 { grid-template-columns: repeat(6, 1fr); }
.nx-grid--halves { grid-template-columns: 1fr 1fr; }
@media (max-width: 1024px) {
    .nx-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .nx-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .nx-grid--3, .nx-grid--halves { grid-template-columns: 1fr; }
    .nx-grid--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .nx-grid--4 { grid-template-columns: 1fr; }
    .nx-grid--6 { grid-template-columns: 1fr 1fr; }
}

/* ====== Section base & backgrounds ========================= */
.nx-section { position: relative; width: 100%; padding: clamp(64px, 8vw, 96px) 0; }
.nx-section--hero  { padding: clamp(96px, 14vw, 160px) 0; }
.nx-section--tight { padding: 32px 0; }

.nx-section--white { background: #fff; color: var(--ax-ink); }
.nx-section--paper { background: var(--ax-paper); color: var(--ax-ink); }
.nx-section--cream { background: var(--ax-cream); color: var(--ax-ink); }
.nx-section--ink   { background: var(--ax-ink);   color: var(--ax-paper); }

/* ====== Frames ============================================= */
.nx-section--top-rule    { border-top: 2px solid var(--ax-orange); }
.nx-section--side-rule   { border-left: 3px solid var(--ax-orange); }
.nx-section--side-rule .nx-container { padding-left: clamp(20px, 4vw, 56px); }
.nx-section--double-rule { border-top: 1px solid var(--ax-ink); border-bottom: 1px solid var(--ax-ink); }
.nx-section--ink.nx-section--double-rule { border-color: var(--ax-orange); }
.nx-section--bleed > .nx-container { max-width: none; padding: 0; }
.nx-section--full-frame {
    border: 2px solid var(--ax-ink);
    margin: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 56px);
}
.nx-section--brick > .nx-container > .nx-brick-list > * {
    border-top: 3px solid var(--ax-ink);
    padding-top: clamp(24px, 4vw, 40px);
    margin-top: clamp(24px, 4vw, 40px);
}
.nx-section--brick > .nx-container > .nx-brick-list > *:nth-child(odd) { border-top-color: var(--ax-orange); }
.nx-section--brick > .nx-container > .nx-brick-list > *:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ====== Typography ========================================= */
.nx-display-heavy {
    font-family: var(--ax-font-display); font-weight: 400;
    font-size: clamp(2.6rem, 7.2vw, 5.6rem) !important; line-height: 0.9;
    letter-spacing: -0.01em; text-transform: uppercase;
}
.nx-display-heavy--xl {
    font-size: clamp(3rem, 10vw, 7.6rem); line-height: .88;
    letter-spacing: -0.02em;
}
.nx-display-medium {
    font-family: var(--ax-font-display); font-weight: 400;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem) !important; line-height: 0.96;
    letter-spacing: -0.005em; text-transform: uppercase;
}
.nx-display-heavy em,
.nx-display-medium em,
.nx-display-heavy--xl em {
    font-family: var(--ax-font-accent); font-style: italic; font-weight: 400;
    text-transform: lowercase; letter-spacing: -0.025em;
    color: var(--ax-orange); display: inline-block;
}
.nx-section--ink .nx-display-heavy em,
.nx-section--ink .nx-display-medium em,
.nx-section--ink .nx-display-heavy--xl em { color: var(--ax-paper); }

.nx-body {
    font-family: var(--ax-font-body); font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem); line-height: 1.65;
    max-width: 64ch;
}
.nx-body--lead {
    font-family: var(--ax-font-accent); font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5;
    color: var(--ax-muted); max-width: 56ch;
}
.nx-section--ink .nx-body--lead { color: var(--ax-muted-dark); }

.nx-mono {
    font-family: var(--ax-font-mono); font-size: 0.7rem;
    letter-spacing: 0.18em; text-transform: uppercase;
}
.nx-text-muted { color: var(--ax-muted); }
.nx-section--ink .nx-text-muted { color: var(--ax-muted-dark); }

/* ====== Eyebrows ============================================ */
.nx-eyebrow {
    display: inline-block;
    font-family: var(--ax-font-body); font-weight: 700;
    font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 6px 14px; border: 1px solid var(--ax-ink);
    border-radius: 9999px; line-height: 1;
    color: var(--ax-ink); background: transparent;
}
.nx-eyebrow--filled  { background: var(--ax-ink); color: var(--ax-paper); }
.nx-eyebrow--orange  { background: var(--ax-orange); color: var(--ax-paper); border-color: var(--ax-orange); }
.nx-section--ink .nx-eyebrow { border-color: var(--ax-paper); color: var(--ax-paper); }
.nx-section--ink .nx-eyebrow--filled { background: var(--ax-paper); color: var(--ax-ink); border-color: var(--ax-paper); }

.nx-stamp {
    font-family: var(--ax-font-accent); font-style: italic; font-weight: 400;
    font-size: clamp(0.9rem, 1.05vw, 1.05rem); color: var(--ax-muted);
    line-height: 1.4; display: inline-flex; align-items: baseline;
    gap: 0.65rem; flex-wrap: wrap;
}
.nx-stamp::before {
    content: attr(data-stamp);
    font-family: var(--ax-font-display); font-style: normal;
    font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.2rem 0.55rem; line-height: 1;
    border: 1px solid var(--ax-orange); color: var(--ax-orange);
    flex-shrink: 0;
}
.nx-section--ink .nx-stamp { color: var(--ax-muted-dark); }

/* ====== Headers (aperturas) ================================ */
.nx-h-dossier {
    display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 4vw, 4rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
    margin-bottom: clamp(2rem, 5vw, 4rem);
    border-bottom: 2px solid var(--ax-ink); align-items: end;
}
.nx-section--ink .nx-h-dossier { border-bottom-color: var(--ax-paper); }
@media (min-width: 860px) {
    .nx-h-dossier { grid-template-columns: minmax(0, .35fr) minmax(0, 1fr); }
}

.nx-h-manifesto { max-width: 22ch; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.nx-h-manifesto .nx-display-heavy--xl { margin-bottom: clamp(.75rem, 1.5vw, 1.25rem); }

.nx-h-runin {
    display: flex; align-items: center; gap: clamp(.5rem, 1.5vw, 1rem);
    flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding-bottom: clamp(.75rem, 1.5vw, 1rem);
    border-bottom: 1px solid var(--ax-rule);
}
.nx-section--ink .nx-h-runin { border-bottom-color: var(--ax-rule-on-dark); }
.nx-h-runin__divider {
    font-family: var(--ax-font-accent); font-style: italic;
    color: var(--ax-orange); font-size: 1.5em; flex-shrink: 0;
}

.nx-h-dropcap { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.nx-h-dropcap p {
    font-family: var(--ax-font-body); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55;
}
.nx-h-dropcap .nx-dropcap {
    float: left; font-family: var(--ax-font-accent); font-style: italic;
    font-size: clamp(3.6rem, 7vw, 5.4rem); line-height: .82;
    color: var(--ax-orange); padding: .1em .15em 0 0; margin-top: .05em;
}

/* IndexRow — titular + dot-leader + tally mono (señala enumeración) */
.nx-h-index {
    display: flex; align-items: flex-end; gap: clamp(.75rem, 1.5vw, 1.1rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    padding-bottom: clamp(.75rem, 1.5vw, 1rem);
    border-bottom: 2px solid var(--ax-ink);
}
.nx-h-index .nx-display-medium { flex: 0 1 auto; margin: 0; }
.nx-h-index__leader {
    flex: 1 1 auto; align-self: flex-end; margin-bottom: .42em;
    border-bottom: 3px dotted var(--ax-rule);
}
.nx-h-index__tally {
    flex: 0 0 auto; align-self: flex-end; margin-bottom: .42em;
    color: var(--ax-muted); white-space: nowrap;
}
.nx-h-index__lead { max-width: 60ch; margin: 0 0 clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 560px) {
    .nx-h-index { flex-wrap: wrap; gap: .5rem; }
    .nx-h-index__leader { display: none; }
    .nx-h-index__tally { flex-basis: 100%; align-self: flex-start; margin-bottom: 0; }
}

.nx-h-quote { max-width: 64ch; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.nx-h-quote__body { position: relative; padding-left: clamp(2rem, 5vw, 3.5rem); margin: 0; }
.nx-h-quote__body::before {
    content: '"'; position: absolute; left: 0; top: -.1em;
    font-family: var(--ax-font-display); font-size: clamp(3rem, 7vw, 6rem);
    line-height: 1; color: var(--ax-orange);
}
.nx-h-quote__body p {
    font-family: var(--ax-font-accent); font-style: italic;
    font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1.25;
    margin: 0 0 .8rem;
}
.nx-h-quote__body cite {
    font-family: var(--ax-font-body); font-style: normal;
    font-weight: 700; font-size: .8rem; text-transform: uppercase;
    letter-spacing: .12em; color: var(--ax-muted);
}

.nx-h-mega { position: relative; min-height: clamp(180px, 22vw, 280px);
    display: grid; place-items: center start; padding: clamp(2rem, 4vw, 3rem) 0;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem); isolation: isolate; overflow: hidden; }
.nx-h-mega__bg {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--ax-font-display); font-size: clamp(7rem, 22vw, 18rem);
    line-height: 1; text-transform: uppercase;
    color: var(--ax-rule-on-dark); z-index: -1; pointer-events: none;
    white-space: nowrap; opacity: .95;
}
.nx-h-mega__fg { position: relative; max-width: 38ch; }

.nx-h-lateral {
    display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start; margin-bottom: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1rem, 2vw, 1.5rem); border-top: 2px solid var(--ax-orange);
}
.nx-h-lateral__rail { writing-mode: vertical-rl; transform: rotate(180deg); padding-right: 0.5rem; }
.nx-h-lateral__rail span {
    font-family: var(--ax-font-mono); font-size: .7rem; letter-spacing: .3em;
    text-transform: uppercase; color: var(--ax-muted);
}
@media (max-width: 640px) {
    .nx-h-lateral { grid-template-columns: 1fr; }
    .nx-h-lateral__rail { writing-mode: horizontal-tb; transform: none; padding: 0; }
}

/* ====== Buttons / CTAs ===================================== */
.nx-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; min-height: 48px;
    font-family: var(--ax-font-body); font-weight: 700;
    font-size: .95rem; letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: 0; border: none; cursor: pointer; text-decoration: none;
    transition: transform var(--ax-motion-fast) var(--ax-ease-out),
                box-shadow var(--ax-motion-fast) var(--ax-ease-out),
                background var(--ax-motion-fast) var(--ax-ease-out),
                color var(--ax-motion-fast) var(--ax-ease-out);
}
.nx-btn i { font-size: 1.1em; }
.nx-btn--primary {
    background: var(--ax-orange); color: #fff;
    box-shadow: 0 6px 0 var(--ax-orange-deep);
}
.nx-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ax-orange-deep); }
.nx-btn--primary:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ax-orange-deep); }
.nx-btn--yellow {
    background: var(--ax-yellow); color: var(--ax-ink);
    box-shadow: 0 6px 0 var(--ax-yellow-deep);
}
.nx-btn--yellow:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ax-yellow-deep); }
.nx-btn--yellow:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ax-yellow-deep); }
.nx-btn--whatsapp {
    background: var(--ax-whatsapp); color: #fff;
    box-shadow: 0 6px 0 var(--ax-whatsapp-deep);
}
.nx-btn--whatsapp:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ax-whatsapp-deep); }
.nx-btn--whatsapp:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ax-whatsapp-deep); }
.nx-btn--ghost {
    background: transparent; color: var(--ax-paper);
    border: 1.5px solid var(--ax-paper);
    transition: background var(--ax-motion-base) var(--ax-ease-out),
                color var(--ax-motion-base) var(--ax-ease-out),
                border-color var(--ax-motion-base) var(--ax-ease-out);
    box-shadow: none;
}
.nx-btn--ghost:hover { background: var(--ax-yellow); color: var(--ax-ink); border-color: var(--ax-yellow-deep); }
.nx-btn--outline {
    background: transparent; color: var(--ax-ink); border: 1.5px solid var(--ax-ink);
    box-shadow: none;
    transition: background var(--ax-motion-base) var(--ax-ease-out),
                color var(--ax-motion-base) var(--ax-ease-out);
}
.nx-btn--outline:hover { background: var(--ax-ink); color: #fff; }

/* ====== Links (side-shift / arrow reveal) ================== */
.nx-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; color: var(--ax-ink);
    border-bottom: 1.5px solid transparent;
    transition: color var(--ax-motion-base) var(--ax-ease-out),
                border-color var(--ax-motion-base) var(--ax-ease-out);
}
.nx-link::after {
    content: '→'; transition: transform var(--ax-motion-base) var(--ax-ease-out);
    color: var(--ax-orange);
}
.nx-link:hover { color: var(--ax-orange); border-bottom-color: var(--ax-orange); }
.nx-link:hover::after { transform: translateX(4px); }

/* ====== HERO (Manifiesto / ink + foto) ===================== */
.nx-hero {
    position: relative; min-height: clamp(580px, 78vh, 780px);
    background: var(--ax-ink); color: var(--ax-paper); overflow: hidden;
    /* anula el padding-y del .nx-section--hero porque acá lo controla .nx-hero__body */
    padding: 0;
}
.nx-hero__media { position: absolute; inset: 0; z-index: 0; }
.nx-hero__media img,
.nx-hero__media picture { width: 100%; height: 100%; object-fit: cover; object-position: center right; display: block; }
/* Overlay doble: vertical para legibilidad + lateral para anclar el texto a la izquierda */
.nx-hero__media::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(31,37,48,.25) 0%, rgba(31,37,48,.45) 70%, rgba(31,37,48,.7) 100%);
}
.nx-hero__media::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(31,37,48,.7) 0%, rgba(31,37,48,.4) 38%, rgba(31,37,48,.08) 70%, rgba(31,37,48,0) 100%);
}
.nx-hero__mega {
    position: absolute; right: clamp(-32px, -2vw, -16px); bottom: clamp(-44px, -3vw, -24px);
    z-index: 1; pointer-events: none;
    font-family: var(--ax-font-display);
    font-size: clamp(7rem, 22vw, 18rem); line-height: .82;
    color: rgba(241, 90, 41, 0.16); text-transform: uppercase;
    letter-spacing: -0.04em; white-space: nowrap;
}
.nx-hero__body {
    position: relative; z-index: 2; width: 100%;
    padding: clamp(110px, 14vh, 180px) 0 clamp(56px, 7vw, 80px);
    display: flex; align-items: center; min-height: inherit;
}
.nx-hero__inner {
    max-width: 720px;
    display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 28px);
}
.nx-hero__eyebrow {
    align-self: flex-start;
    font-family: var(--ax-font-body); font-weight: 700;
    font-size: .72rem; letter-spacing: .24em; text-transform: uppercase;
    color: var(--ax-orange);
    padding: 7px 14px; border: 1px solid var(--ax-orange);
    line-height: 1;
}
.nx-hero__h1 {
    font-family: var(--ax-font-display); font-weight: 400;
    font-size: clamp(2.2rem, 5.6vw, 5rem) !important; line-height: .94;
    letter-spacing: -0.015em; text-transform: uppercase;
    max-width: 18ch; color: var(--ax-paper); margin: 0;
}
.nx-hero__h1 em {
    font-family: var(--ax-font-accent); font-style: italic; font-weight: 400;
    text-transform: lowercase; color: var(--ax-orange);
    letter-spacing: -0.025em;
}
.nx-hero__lead {
    font-family: var(--ax-font-body); font-size: clamp(0.98rem, 1.2vw, 1.1rem);
    line-height: 1.6; max-width: 54ch; color: var(--ax-paper);
    opacity: .92; margin: 0;
}
.nx-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 0; }
.nx-hero__micro {
    font-family: var(--ax-font-accent); font-style: italic;
    color: var(--ax-muted-dark); font-size: .95rem; margin: 0;
}

@media (max-width: 767px) {
    .nx-hero { min-height: clamp(560px, 88vh, 720px); }
    .nx-hero__media img,
    .nx-hero__media picture { object-position: center; }
    .nx-hero__media::after {
        background: linear-gradient(180deg, rgba(31,37,48,.2) 0%, rgba(31,37,48,.65) 100%);
    }
    .nx-hero__mega { font-size: clamp(6rem, 32vw, 10rem); right: -16px; bottom: -20px; }
    .nx-hero__body { padding-top: clamp(140px, 22vh, 220px); }
}

/* ====== Marquee strip ===================================== */
.nx-marquee {
    background: var(--ax-ink); color: var(--ax-paper);
    border-top: 1px solid var(--ax-orange);
    border-bottom: 1px solid var(--ax-orange);
    overflow: hidden; padding: 18px 0;
}
.nx-marquee__track {
    display: inline-flex; gap: 28px; align-items: center;
    white-space: nowrap; animation: nx-marquee 38s linear infinite;
    font-family: var(--ax-font-display); font-size: clamp(1.2rem, 2vw, 1.6rem);
    letter-spacing: .05em; text-transform: uppercase;
}
.nx-marquee__track span:nth-child(even) { color: var(--ax-orange); }
.nx-marquee__dot { color: var(--ax-orange); }
@keyframes nx-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ====== STATS cards (Sección 2) ============================ */
.nx-statcard {
    background: #fff; border: 1px solid var(--ax-rule);
    border-top: 2px solid var(--ax-orange);
    padding: clamp(20px, 2.5vw, 28px); position: relative;
    transition: transform var(--ax-motion-base) var(--ax-ease-out),
                box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.nx-statcard:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ax-orange); }
.nx-statcard__num {
    font-family: var(--ax-font-display);
    font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1;
    color: var(--ax-orange); margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.nx-statcard__title {
    font-family: var(--ax-font-display); font-size: clamp(1rem, 1.4vw, 1.2rem);
    text-transform: uppercase; letter-spacing: .02em; line-height: 1.1;
    margin-bottom: 8px;
}
.nx-statcard__body {
    font-family: var(--ax-font-body); font-size: .9rem; line-height: 1.55;
    color: var(--ax-muted);
}

/* ====== Timeline (Sección 3) — arco editorial =============== */
.nx-timeline {
    position: relative;
    list-style: none;
    margin: clamp(48px, 6vw, 72px) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding-top: 72px;          /* hueco para la línea + dot */
    counter-reset: nx-timeline;
}
/* Línea continua naranja que cruza todos los items */
.nx-timeline::before {
    content: '';
    position: absolute;
    top: 36px; left: 0; right: 0;
    height: 2px;
    background: var(--ax-orange);
    z-index: 0;
}
/* Flecha → al final del recorrido */
.nx-timeline::after {
    content: '';
    position: absolute;
    top: 28px; right: -2px;
    width: 0; height: 0;
    border-left: 14px solid var(--ax-orange);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    z-index: 1;
}

.nx-timeline__item {
    position: relative;
    padding: 0 clamp(14px, 1.8vw, 22px) 0 0;
    list-style: none;
}
.nx-timeline__item::marker { content: ''; }

/* Hairline vertical entre columnas (separa cada acto) */
.nx-timeline__item + .nx-timeline__item {
    padding-left: clamp(18px, 2.2vw, 28px);
    border-left: 1px solid var(--ax-rule);
}

/* Dot sobre la línea — outline para "pasado" */
.nx-timeline__dot {
    position: absolute;
    top: -44px;
    left: 0;
    width: 16px; height: 16px;
    background: var(--ax-paper);
    border: 3px solid var(--ax-orange);
    border-radius: 9999px;
    z-index: 2;
    transition: transform var(--ax-motion-base) var(--ax-ease-out);
}
.nx-timeline__item + .nx-timeline__item .nx-timeline__dot { left: clamp(18px, 2.2vw, 28px); }

/* Item "actual" — dot relleno y un poco más grande */
.nx-timeline__item--current .nx-timeline__dot {
    background: var(--ax-orange);
    width: 22px; height: 22px;
    top: -47px;
    box-shadow: 0 0 0 4px rgba(241,90,41,.18);
}

/* Capítulo mono encima del año */
.nx-timeline__chapter {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--ax-font-mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ax-muted);
    margin-bottom: 12px;
}
.nx-timeline__chapter::before {
    content: ''; width: 16px; height: 1px; background: var(--ax-muted);
}
.nx-timeline__item--current .nx-timeline__chapter { color: var(--ax-orange); }
.nx-timeline__item--current .nx-timeline__chapter::before { background: var(--ax-orange); }

/* Año — protagonista */
.nx-timeline__year {
    font-family: var(--ax-font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: var(--ax-orange);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}
.nx-timeline__item--current .nx-timeline__year {
    color: var(--ax-ink);
    position: relative; display: inline-block;
    padding: 4px 12px 6px;
    background: var(--ax-orange);
    color: var(--ax-paper);
}

/* Label */
.nx-timeline__label {
    font-family: var(--ax-font-display);
    font-weight: 400;
    font-size: clamp(.95rem, 1.4vw, 1.1rem);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.1;
    margin-bottom: 12px;
    color: var(--ax-ink);
}

/* Body */
.nx-timeline__body {
    font-family: var(--ax-font-body);
    font-size: .9rem;
    line-height: 1.55;
    color: var(--ax-muted);
    margin: 0;
    max-width: 28ch;
}

/* ── Mobile: línea vertical a la izquierda ── */
@media (max-width: 768px) {
    .nx-timeline {
        grid-template-columns: 1fr;
        gap: clamp(28px, 5vw, 40px);
        padding-top: 0;
        padding-left: 32px;
    }
    .nx-timeline::before {
        top: 4px; bottom: 4px; left: 7px; right: auto;
        width: 2px; height: auto;
    }
    .nx-timeline::after {
        top: auto; bottom: -2px; right: auto; left: 7px;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 14px solid var(--ax-orange);
        border-bottom: none;
        transform: translateX(-50%);
    }
    .nx-timeline__item { padding: 0; }
    .nx-timeline__item + .nx-timeline__item {
        padding-left: 0; border-left: none;
    }
    .nx-timeline__dot,
    .nx-timeline__item + .nx-timeline__item .nx-timeline__dot {
        top: 4px; left: -32px;
    }
    .nx-timeline__item--current .nx-timeline__dot { top: 1px; left: -35px; }
    .nx-timeline__body { max-width: none; }
}

/* ====== Audiences chips (Sección 5) ======================== */
.nx-chips { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: clamp(24px, 4vw, 40px); }
.nx-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px; background: #fff;
    border: 1.5px solid var(--ax-ink); font-family: var(--ax-font-body);
    font-weight: 700; font-size: .85rem; letter-spacing: .04em;
    text-transform: uppercase; line-height: 1;
    transition: transform var(--ax-motion-base) var(--ax-ease-out),
                box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.nx-chip::before {
    content: ''; width: 8px; height: 8px; background: var(--ax-orange);
}
.nx-chip:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ax-orange); }

/* ====== Fabric families grid (Sección 6) =================== */
.nx-fabrics { display: grid; gap: 0;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--ax-ink);
    border-left: 1px solid var(--ax-ink);
    margin-top: clamp(32px, 5vw, 56px);
}
@media (max-width: 1024px) { .nx-fabrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .nx-fabrics { grid-template-columns: repeat(2, 1fr); } }
.nx-fabric {
    padding: clamp(22px, 2.5vw, 32px) clamp(18px, 2.5vw, 28px);
    border-right: 1px solid var(--ax-ink);
    border-bottom: 1px solid var(--ax-ink);
    background: #fff; min-height: 140px; display: flex; flex-direction: column;
    justify-content: space-between;
    transition: background var(--ax-motion-base) var(--ax-ease-out),
                color var(--ax-motion-base) var(--ax-ease-out);
    color: var(--ax-ink);
}
.nx-fabric__num {
    font-family: var(--ax-font-mono); font-size: .7rem;
    letter-spacing: .22em; color: var(--ax-muted); margin-bottom: 12px;
}
.nx-fabric__name {
    font-family: var(--ax-font-display); font-size: clamp(1.4rem, 2vw, 1.7rem);
    text-transform: uppercase; line-height: 1.05;
}
.nx-fabric:hover { background: var(--ax-ink); color: var(--ax-paper); }
.nx-fabric:hover .nx-fabric__num { color: var(--ax-orange); }

/* ====== Spec list (Sección 7 - Técnico) =================== */
.nx-spec {
    display: grid; gap: 0; margin-top: clamp(28px, 4vw, 40px);
    border-top: 1px solid var(--ax-ink);
}
.nx-spec__row {
    display: grid; grid-template-columns: 220px 1fr;
    gap: 16px; padding: 18px 0;
    border-bottom: 1px solid var(--ax-rule);
    align-items: baseline;
}
.nx-spec__row dt {
    font-family: var(--ax-font-mono); font-size: .72rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--ax-orange);
}
.nx-spec__row dd {
    margin: 0; font-family: var(--ax-font-body); font-size: 1rem;
    line-height: 1.55;
}
@media (max-width: 640px) {
    .nx-spec__row { grid-template-columns: 1fr; gap: 6px; }
}

/* ====== Channels (Sección 8 - Brick stack) ================ */
.nx-brick-list { display: grid; gap: 0; }
.nx-channel { display: grid; grid-template-columns: 56px 1fr auto; gap: clamp(16px, 3vw, 32px); align-items: center; }
.nx-channel__num {
    font-family: var(--ax-font-display); font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1; color: var(--ax-orange); font-variant-numeric: tabular-nums;
}
.nx-channel__body { max-width: 60ch; }
.nx-channel__title {
    font-family: var(--ax-font-display); font-size: clamp(1.3rem, 2vw, 1.7rem);
    text-transform: uppercase; line-height: 1.05; margin-bottom: 8px;
}
.nx-channel__body p { font-family: var(--ax-font-body); font-size: .95rem; line-height: 1.55; color: var(--ax-muted); }
.nx-channel__cta { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 768px) {
    .nx-channel { grid-template-columns: 56px 1fr; }
    .nx-channel__cta { grid-column: 1 / -1; margin-top: 6px; }
}

/* ====== Policy/info link cards (Sección 10) =============== */
.nx-policies { display: grid; gap: 0; margin-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--ax-ink); }
.nx-policy {
    display: grid; grid-template-columns: 60px 1fr auto;
    gap: 16px; padding: 22px 16px; border-bottom: 1px solid var(--ax-ink);
    align-items: center; position: relative; cursor: pointer;
    color: var(--ax-ink); transition: padding var(--ax-motion-base) var(--ax-ease-out);
}
.nx-policy::before {
    content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
    width: 0; background: var(--ax-orange);
    transition: width var(--ax-motion-base) var(--ax-ease-out);
}
.nx-policy:hover { padding-left: 28px; }
.nx-policy:hover::before { width: 4px; }
.nx-policy__num {
    font-family: var(--ax-font-mono); font-size: .75rem;
    letter-spacing: .2em; color: var(--ax-orange);
}
.nx-policy__title {
    font-family: var(--ax-font-display); font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    text-transform: uppercase; line-height: 1.05;
}
.nx-policy__arrow { font-family: var(--ax-font-display); font-size: 1.4rem; color: var(--ax-orange); }
@media (max-width: 640px) {
    .nx-policy { grid-template-columns: 1fr auto; }
    .nx-policy__num { grid-column: 1 / -1; }
}

/* ====== E-E-A-T (Sección 11 - Fanzine ink) ================ */
.nx-pillar {
    background: rgba(250, 246, 238, 0.07);
    border: 1px solid rgba(250, 246, 238, 0.18);
    border-top: 2px solid var(--ax-paper);
    color: var(--ax-paper); padding: clamp(20px, 2.5vw, 28px);
    transition: border-top-color var(--ax-motion-base) var(--ax-ease-out),
                background var(--ax-motion-base) var(--ax-ease-out);
}
.nx-pillar:hover { border-top-color: var(--ax-orange); background: rgba(250, 246, 238, 0.11); }
.nx-pillar__num {
    font-family: var(--ax-font-mono); font-size: .72rem;
    letter-spacing: .2em; color: var(--ax-orange); margin-bottom: 14px;
}
.nx-pillar__title {
    font-family: var(--ax-font-display); font-size: clamp(1.4rem, 2vw, 1.8rem);
    text-transform: uppercase; line-height: 1.05; margin-bottom: 12px;
}
.nx-pillar__body { font-family: var(--ax-font-body); font-size: .95rem; line-height: 1.6; color: var(--ax-muted-dark); }

/* ====== Tienda física · sucursal Tenancingo ================ */
.nx-store {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    min-height: 620px;
    position: relative;
    border-top: 2px solid var(--ax-orange);
}
@media (max-width: 900px) { .nx-store { grid-template-columns: 1fr; min-height: 0; } }

/* ── Mapa con sticker overlay ── */
.nx-store__map {
    background: var(--ax-ink);
    position: relative;
    overflow: hidden;
}
.nx-store__map iframe {
    width: 100%; height: 100%; min-height: 540px;
    border: 0; display: block;
    filter: grayscale(15%) contrast(1.05);
}
@media (max-width: 900px) { .nx-store__map iframe { min-height: 380px; } }

.nx-store__pin {
    position: absolute;
    top: 22px; right: 22px; z-index: 4;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px 10px;
    background: var(--ax-orange); color: #fff;
    font-family: var(--ax-font-display);
    font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
    line-height: 1;
    box-shadow: 4px 4px 0 var(--ax-ink);
    transform: rotate(3deg);
    pointer-events: none;
}
.nx-store__pin i { font-size: 14px; }

.nx-store__stamp {
    position: absolute;
    bottom: 22px; left: 22px; z-index: 4;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: var(--ax-paper); color: var(--ax-ink);
    font-family: var(--ax-font-mono);
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    line-height: 1;
    border: 1.5px solid var(--ax-ink);
    box-shadow: 3px 3px 0 var(--ax-orange);
    pointer-events: none;
}

/* ── Info panel ── */
.nx-store__info {
    background: var(--ax-paper);
    padding: clamp(28px, 4vw, 52px);
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: clamp(22px, 3vw, 30px);
}

.nx-store__head {
    display: flex; flex-direction: column; gap: 12px;
    padding-bottom: clamp(18px, 2.5vw, 24px);
    border-bottom: 1px solid var(--ax-rule);
}
.nx-store__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--ax-font-mono);
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ax-orange);
}
.nx-store__eyebrow::before {
    content: ''; width: 24px; height: 1px; background: var(--ax-orange);
}
.nx-store__title {
    font-family: var(--ax-font-display); font-weight: 400;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    text-transform: uppercase; line-height: .98;
    letter-spacing: -0.005em; margin: 0;
}
.nx-store__title em {
    font-family: var(--ax-font-accent); font-style: italic; font-weight: 400;
    text-transform: lowercase; color: var(--ax-orange); letter-spacing: -0.02em;
}

.nx-store__group { display: grid; grid-template-columns: 1fr; gap: 10px; }
.nx-store__label {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--ax-font-mono);
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ax-orange);
}
.nx-store__label::before {
    content: ''; width: 14px; height: 1px; background: var(--ax-orange);
}

.nx-store__line {
    display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: baseline;
    font-family: var(--ax-font-body); font-size: .98rem; line-height: 1.5;
    color: var(--ax-ink); margin: 0;
}
.nx-store__line > i {
    color: var(--ax-orange); font-size: 14px; text-align: center;
    line-height: 1.5; padding-top: 2px;
}
.nx-store__line a {
    border-bottom: 1px solid transparent;
    transition: border-color var(--ax-motion-base) var(--ax-ease-out),
                color var(--ax-motion-base) var(--ax-ease-out);
}
.nx-store__line a:hover { color: var(--ax-orange); border-bottom-color: var(--ax-orange); }

/* Semana visual */
.nx-store__week {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 6px; margin-top: 4px;
}
.nx-store__day {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 10px 2px;
    background: #fff; border: 1px solid var(--ax-rule);
}
.nx-store__day--open { border-color: var(--ax-orange); }
.nx-store__day--closed { opacity: .5; }
.nx-store__day-label {
    font-family: var(--ax-font-mono); font-size: 10px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ax-muted);
}
.nx-store__day--open .nx-store__day-label { color: var(--ax-ink); }
.nx-store__day-mark {
    width: 8px; height: 8px; border-radius: 9999px;
    background: var(--ax-orange);
}
.nx-store__day--closed .nx-store__day-mark {
    background: transparent;
    border: 1.5px solid var(--ax-muted);
    width: 10px; height: 10px;
}
.nx-store__hours {
    margin: 6px 0 0; font-family: var(--ax-font-body);
    font-size: .92rem; color: var(--ax-ink);
}
.nx-store__hours strong {
    font-family: var(--ax-font-display); color: var(--ax-orange);
    font-weight: 400; letter-spacing: .02em;
}

.nx-store__cta {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding-top: clamp(14px, 2vw, 22px);
    border-top: 1px dashed var(--ax-rule);
    margin-top: 4px;
}
.nx-store__cta .nx-btn {
    flex: 1 1 calc(33.33% - 7px); min-width: 0;
    justify-content: center; padding: 14px 14px;
    font-size: .82rem; letter-spacing: .04em;
}
@media (max-width: 640px) {
    .nx-store__cta .nx-btn { flex: 1 1 100%; font-size: .9rem; }
}

/* ====== Misión y Visión · diptych split-tone =============== */
.nx-mv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: clamp(40px, 5vw, 64px);
    border: 2px solid var(--ax-ink);
    box-shadow: 12px 12px 0 var(--ax-orange);
}
@media (max-width: 860px) {
    .nx-mv { grid-template-columns: 1fr; box-shadow: 8px 8px 0 var(--ax-orange); }
}

.nx-mv__block {
    position: relative;
    padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
    display: flex; flex-direction: column;
    gap: clamp(18px, 2.2vw, 24px);
    overflow: hidden;
    isolation: isolate;
}
.nx-mv__block + .nx-mv__block { border-left: 2px solid var(--ax-ink); }
@media (max-width: 860px) {
    .nx-mv__block + .nx-mv__block { border-left: 0; border-top: 2px solid var(--ax-ink); }
}

/* Misión: light side (presente, lo que hacemos hoy) */
.nx-mv__block--mision {
    background: var(--ax-paper);
    color: var(--ax-ink);
}
/* Visión: dark side (futuro, hacia dónde vamos) */
.nx-mv__block--vision {
    background: var(--ax-ink);
    color: var(--ax-paper);
}

/* Quotation mark decorativa en esquina */
.nx-mv__block::before {
    content: '"';
    position: absolute;
    top: -22px; right: 14px;
    font-family: var(--ax-font-display);
    font-size: clamp(7rem, 12vw, 11rem);
    line-height: 1;
    color: var(--ax-orange);
    z-index: 0;
    opacity: .9;
    pointer-events: none;
}
.nx-mv__block--vision::before { color: var(--ax-orange); opacity: .85; }

/* Head: número grande + label mono */
.nx-mv__head {
    display: flex; align-items: baseline; gap: 18px;
    position: relative; z-index: 1;
}
.nx-mv__num {
    font-family: var(--ax-font-display); font-weight: 400;
    font-size: clamp(3.8rem, 6.5vw, 5.6rem);
    line-height: .85; letter-spacing: -0.025em;
    color: var(--ax-orange);
    font-variant-numeric: tabular-nums;
}
.nx-mv__label {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--ax-font-mono); font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--ax-orange);
    padding-bottom: 12px;
    align-self: flex-end;
    line-height: 1;
}
.nx-mv__label::before { content: ''; width: 36px; height: 3px; background: var(--ax-orange); }

/* Title */
.nx-mv__title {
    font-family: var(--ax-font-display); font-weight: 400;
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    text-transform: uppercase; line-height: 1.02;
    letter-spacing: -0.005em; margin: 0;
    position: relative; z-index: 1;
    max-width: 22ch;
}
.nx-mv__title em {
    font-family: var(--ax-font-accent); font-style: italic; font-weight: 400;
    text-transform: lowercase; color: var(--ax-orange); letter-spacing: -0.02em;
}
.nx-mv__block--vision .nx-mv__title { color: var(--ax-paper); }
.nx-mv__block--vision .nx-mv__title em { color: var(--ax-paper); }

/* Body */
.nx-mv__body {
    font-family: var(--ax-font-body); font-size: 1rem;
    line-height: 1.65; margin: 0;
    position: relative; z-index: 1;
    max-width: 46ch;
}
.nx-mv__block--mision .nx-mv__body { color: var(--ax-ink); }
.nx-mv__block--vision .nx-mv__body { color: var(--ax-muted-dark); }

/* Hairline footer con sello — refuerza la marca */
.nx-mv__seal {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--ax-rule);
    font-family: var(--ax-font-mono);
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--ax-muted);
    position: relative; z-index: 1;
}
.nx-mv__block--vision .nx-mv__seal {
    border-top-color: rgba(250, 246, 238, 0.18);
    color: var(--ax-muted-dark);
}

/* ====== FAQ (Sección 14) — layout 2 columnas + items tipo card ======
   Diseño portado de la landing Xoxtla (.tx-faqsec / .tx-faq) al
   namespace .nx-*. Aside sticky a la izquierda, lista de cards a la
   derecha; apertura/cierre suave vía WAAPI (nosotros.js). ============ */
.nx-faqsec__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 940px) { .nx-faqsec__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
@media (min-width: 940px) { .nx-faqsec__aside { position: sticky; top: 130px; } }
.nx-faqsec__aside .nx-eyebrow--orange { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.nx-faqsec__title { font-size: clamp(2rem, 4.4vw, 3.2rem) !important; line-height: .95; }
.nx-faqsec__note {
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-muted);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; max-width: 40ch;
    margin: clamp(1.25rem, 2.5vw, 1.75rem) 0;
}
.nx-faqsec__cta { margin-top: 4px; }

/* Wrapper que la WAAPI anima en altura (apertura/cierre suave, cross-browser) */
.nx-reveal { overflow: hidden; }

.nx-faq { display: flex; flex-direction: column; gap: 12px; }
.nx-faq__item {
    background: #fff; border: 1.5px solid var(--ax-rule);
    transition: border-color var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.nx-faq__item:hover { border-color: var(--ax-ink); }
.nx-faq__item[open] {
    border-color: var(--ax-ink); border-left: 4px solid var(--ax-orange);
    box-shadow: 5px 5px 0 var(--ax-ink);
}
.nx-faq__q {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: clamp(15px, 2vw, 19px) clamp(16px, 2.2vw, 22px);
    font-family: var(--ax-font-body); font-weight: 700; font-size: clamp(.98rem, 1.4vw, 1.12rem);
    line-height: 1.35; color: var(--ax-ink);
    transition: color var(--ax-motion-fast) var(--ax-ease-out);
}
.nx-faq__q::-webkit-details-marker { display: none; }
.nx-faq__q::after {
    content: '+'; flex-shrink: 0;
    width: 30px; height: 30px; display: grid; place-items: center;
    font-family: var(--ax-font-display); font-size: 1.35rem; line-height: 1;
    background: var(--ax-cream); color: var(--ax-orange); border: 1.5px solid var(--ax-ink);
    transition: transform var(--ax-motion-base) var(--ax-ease-out),
                background var(--ax-motion-base) var(--ax-ease-out),
                color var(--ax-motion-base) var(--ax-ease-out);
}
.nx-faq__item[open] .nx-faq__q { color: var(--ax-orange); }
.nx-faq__item[open] .nx-faq__q::after {
    transform: rotate(45deg); background: var(--ax-orange); color: var(--ax-paper); border-color: var(--ax-orange);
}
.nx-faq__a {
    font-family: var(--ax-font-body); font-size: clamp(.95rem, 1.1vw, 1.0625rem);
    line-height: 1.65; color: var(--ax-muted); max-width: 70ch;
    padding: 0 clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 20px); margin: 0;
}

/* ====== Microcopy · parche textil (etiqueta de marca) ====== */
.nx-micro {
    position: relative;
    display: block;
    max-width: 56ch;
    margin: clamp(40px, 5vw, 56px) auto 0 !important;
    padding: 24px clamp(26px, 3vw, 40px);
    background: var(--ax-paper);
    color: var(--ax-ink);
    border: 1.5px solid var(--ax-ink);
    border-radius: 0;
    font-family: var(--ax-font-accent); font-style: italic;
    font-size: clamp(.88rem, 1.1vw, .98rem);
    line-height: 1.5;
    text-align: center;
    transform: rotate(-.5deg);
    transform-origin: center;
    /* Sutil "tela" — gradiente diagonal muy bajo de textura */
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0 6px,
            rgba(31,37,48,.025) 6px 7px);
}

/* Pespunte dashed inset (la costura) */
.nx-micro::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px dashed var(--ax-ink);
    pointer-events: none;
}

/* Strip de marca tejida arriba — el "rótulo cosido" */
.nx-micro::after {
    content: '◆ ARLETEX · MX ◆';
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px 5px;
    background: var(--ax-ink);
    color: var(--ax-paper);
    font-family: var(--ax-font-mono);
    font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

/* HighlightedAccent dentro del parche (Anton sello naranja) */
.nx-micro em {
    font-style: normal; background: var(--ax-orange); color: var(--ax-paper);
    padding: 1px 8px; font-family: var(--ax-font-display);
    font-size: .85em; letter-spacing: .04em; text-transform: uppercase;
}

/* Variación micro de rotación entre instancias — evita "todos clonados" */
.nx-micro:nth-of-type(even) { transform: rotate(.4deg); }
.nx-micro:nth-of-type(1n)   { transform: rotate(-.7deg); }

/* Sobre fondo ink: parche oscuro con strip naranja */
.nx-section--ink .nx-micro {
    background: var(--ax-ink);
    border-color: var(--ax-paper);
    color: var(--ax-paper);
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0 6px,
            rgba(250,246,238,.04) 6px 7px);
}
.nx-section--ink .nx-micro::before { border-color: var(--ax-paper); }
.nx-section--ink .nx-micro::after {
    background: var(--ax-orange); color: var(--ax-paper);
}

@media (max-width: 640px) {
    .nx-micro,
    .nx-micro:nth-of-type(even),
    .nx-micro:nth-of-type(3n) { transform: none; }
    .nx-micro { padding: 24px 18px 20px; }
    .nx-micro::after {
        content: '◆ ARLETEX · MX ◆';
        font-size: 9px; padding: 4px 10px; letter-spacing: .18em;
    }
}

/* ====== Decorative dividers ================================ */
.nx-divider {
    height: 1px; background: var(--ax-rule); border: 0;
    margin: clamp(40px, 5vw, 64px) 0;
}

/* ====== Image placeholders (fotos reales pendientes) ======== */
.nx-placeholder {
    position: relative; display: block; width: 100%; margin: 0;
    background: var(--ax-cream); color: var(--ax-ink);
    border: 2px dashed var(--ax-ink);
    overflow: hidden;
}
.nx-placeholder[data-ratio="21:9"]  { aspect-ratio: 21 / 9; }
.nx-placeholder[data-ratio="16:9"]  { aspect-ratio: 16 / 9; }
.nx-placeholder[data-ratio="3:2"]   { aspect-ratio: 3 / 2; }
.nx-placeholder[data-ratio="4:3"]   { aspect-ratio: 4 / 3; }
.nx-placeholder[data-ratio="1:1"]   { aspect-ratio: 1 / 1; }
.nx-placeholder[data-ratio="3:4"]   { aspect-ratio: 3 / 4; }
.nx-placeholder[data-ratio="4:5"]   { aspect-ratio: 4 / 5; }

.nx-placeholder--paper { background: var(--ax-paper); border-color: var(--ax-ink); }
.nx-placeholder--ink   { background: var(--ax-ink); color: var(--ax-paper); border-color: var(--ax-paper); }

.nx-placeholder::before {
    content: ''; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(31,37,48,.045) 14px 28px);
    pointer-events: none;
}
.nx-placeholder--ink::before {
    background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(250,246,238,.06) 14px 28px);
}

.nx-placeholder__inner {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 24px; text-align: center;
}
.nx-placeholder__tag {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; background: var(--ax-orange); color: var(--ax-paper);
    font-family: var(--ax-font-mono);
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    line-height: 1;
}
.nx-placeholder__tag i { font-size: 13px; }
.nx-placeholder__title {
    font-family: var(--ax-font-display);
    font-size: clamp(1.05rem, 1.9vw, 1.5rem);
    text-transform: uppercase; line-height: 1.1; margin: 0;
    max-width: 28ch;
}
.nx-placeholder__caption {
    font-family: var(--ax-font-accent); font-style: italic;
    font-size: clamp(.85rem, 1.1vw, .95rem); color: var(--ax-muted);
    max-width: 38ch; line-height: 1.45; margin: 0;
}
.nx-placeholder--ink .nx-placeholder__caption { color: var(--ax-muted-dark); }
.nx-placeholder__meta {
    font-family: var(--ax-font-mono); font-size: 10px;
    letter-spacing: .22em; text-transform: uppercase; color: var(--ax-muted);
}
.nx-placeholder--ink .nx-placeholder__meta { color: var(--ax-muted-dark); }

/* ====== Real images (reemplazo de placeholders) =========== */
.nx-figure {
    position: relative; display: block; width: 100%; margin: 0;
    overflow: hidden; background: var(--ax-cream);
}
.nx-figure[data-ratio="21:9"] { aspect-ratio: 21 / 9; }
.nx-figure[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.nx-figure[data-ratio="3:2"]  { aspect-ratio: 3 / 2; }
.nx-figure[data-ratio="4:3"]  { aspect-ratio: 4 / 3; }
.nx-figure[data-ratio="4:5"]  { aspect-ratio: 4 / 5; }
.nx-figure[data-ratio="2:3"]  { aspect-ratio: 2 / 3; }
.nx-figure picture,
.nx-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ====== Side-figure (texto + foto vertical) =============== */
.nx-side-figure {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px); align-items: center;
}

/* Variante mirror: figura izquierda, texto derecha (mismo HTML) */
.nx-side-figure--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}
.nx-side-figure--reverse > :first-child  { grid-column: 2; grid-row: 1; }
.nx-side-figure--reverse > :nth-child(2) { grid-column: 1; grid-row: 1; }

@media (max-width: 860px) {
    .nx-side-figure { grid-template-columns: 1fr; }
    .nx-side-figure > .nx-placeholder,
    .nx-side-figure > .nx-figure { max-width: 480px; margin-inline: auto; }
    /* En móvil ambas variantes apilan igual (texto arriba, figura abajo) */
    .nx-side-figure--reverse > :first-child,
    .nx-side-figure--reverse > :nth-child(2) {
        grid-column: 1;
    }
}

/* ====== Gallery asimétrica (Galería de bodega) ============= */
.nx-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: clamp(180px, 20vw, 250px);
    gap: clamp(8px, 1vw, 14px);
    margin-top: clamp(32px, 5vw, 56px);
}
.nx-gallery__cell {
    position: relative; overflow: hidden; margin: 0; display: block;
}
.nx-gallery__cell--hero { grid-column: span 2; grid-row: span 2; }
.nx-gallery__cell--wide { grid-column: span 3; }
.nx-gallery__cell--tall { grid-row: span 2; }

.nx-gallery__cell .nx-placeholder {
    position: absolute; inset: 0;
    aspect-ratio: auto !important;
    border-width: 2px;
}
.nx-gallery__cell .nx-placeholder__inner { padding: 18px; gap: 10px; }
.nx-gallery__cell picture,
.nx-gallery__cell img {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; object-fit: cover; display: block;
}

.nx-gallery__caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 14px 16px;
    background: linear-gradient(0deg, rgba(31,37,48,.92) 0%, rgba(31,37,48,0) 100%);
    color: var(--ax-paper);
    font-family: var(--ax-font-mono);
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    pointer-events: none;
}

@media (max-width: 900px) {
    .nx-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: clamp(160px, 32vw, 220px);
    }
    .nx-gallery__cell--hero { grid-column: span 2; grid-row: span 2; }
    .nx-gallery__cell--wide { grid-column: span 2; grid-row: span 1; }
    .nx-gallery__cell--tall { grid-row: span 1; }
}

/* ====== Reduced motion ===================================== */
@media (prefers-reduced-motion: reduce) {
    .nx-page *, .nx-page *::before, .nx-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .nx-marquee__track { animation: none !important; }
}