/* ============================================================
   Venta de Telas en Ciudad de México — TSG de ubicación
   Arletex Design System v3.5 · CSS autocontenido y scopeado.
   Todo vive bajo .ax-page para no afectar header/footer del sitio.
   Base portada de landing-telas-guadalajara.css (sistema ax-* genérico)
   + componentes propios al final: trío editorial México DF,
   pliego Chiconcuac con drop cap y badges de icono en "Evita problemas".
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
    --ax-ink:        #1F2530;
    --ax-paper:      #FAF6EE;
    --ax-cream:      #F2EDE4;
    --ax-white:      #FFFFFF;
    --ax-orange:     #F15A29;
    --ax-orange-deep:#B0401A;
    --ax-purple:     #6A52A2;
    --ax-purple-deep:#4C3A75;
    --ax-yellow:     #FFEB3B;
    --ax-muted:      #6E6A60;
    --ax-muted-dark: #A8A39A;
    --ax-whatsapp:   #25D366;
    --ax-danger:     #E11D48;
    --ax-success:    #00A442;
    --ax-pure-black: #0E0E0E;
    --ax-rule:          rgba(31, 37, 48, 0.14);
    --ax-rule-on-dark:  rgba(250, 246, 238, 0.16);

    --ax-font-display: 'Anton', 'Arial Narrow', sans-serif;
    --ax-font-accent:  'Fraunces', 'Georgia', serif;
    --ax-font-body:    'Lato', system-ui, sans-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-shadow-card-md:    14px 14px 0 var(--ax-ink);
    --ax-shadow-card-hover: 5px 5px 0 var(--ax-orange);
}

/* ── Base de página (scopeada) ──────────────────────────── */
.ax-page {
    background: var(--ax-white);
    color: var(--ax-ink);
    font-family: var(--ax-font-body);
    -webkit-font-smoothing: antialiased;
    /* clip (no hidden): recorta el desbordamiento horizontal de los mega-textos
       SIN crear un contenedor de scroll, para no romper position:sticky de los hijos. */
    overflow-x: clip;
}
.ax-page *,
.ax-page *::before,
.ax-page *::after { box-sizing: border-box; }
.ax-page img { max-width: 100%; display: block; }
.ax-page ul { margin: 0; padding: 0; list-style: none; }
.ax-page a { text-decoration: none; color: inherit; }
.ax-page h1, .ax-page h2, .ax-page h3, .ax-page h4 { margin: 0; }

.ax-page *:focus-visible {
    outline: 3px solid var(--ax-orange);
    outline-offset: 2px;
}

/* ── Section / Container / Layout ───────────────────────── */
.ax-section { width: 100%; position: relative; background: var(--ax-white); color: var(--ax-ink); }
.ax-section--default { padding: clamp(64px, 8vw, 96px) 0; }
.ax-section--hero    { padding: clamp(96px, 14vw, 160px) 0; }
.ax-section--paper   { background: var(--ax-paper); }
.ax-section--ink     { background: var(--ax-ink); color: var(--ax-paper); }
.ax-section--top-border { border-top: 2px solid var(--ax-orange); }

/* Marcos */
.ax-section--side-rule {
    border-left: 3px solid var(--ax-orange);
    padding-left: clamp(20px, 4vw, 56px);
}
.ax-section--side-rule .ax-container { padding-left: 0; }
.ax-section--double-rule { border-top: 1px solid var(--ax-ink); border-bottom: 1px solid var(--ax-ink); }

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

/* ── Card slider (Telas más solicitadas) ─────────────────
   Desktop ≥1024: grilla de 4 · <1024: carrusel scroll-snap de 2 por vista */
.ax-cardslider { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); }

.ax-slider-hint { display: none; }

@media (max-width: 1023px) {
    .ax-cardslider {
        display: flex;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-padding-left: clamp(20px, 4vw, 56px);
        /* full-bleed a los bordes del container; el padding re-alinea las cards */
        margin-inline: calc(-1 * clamp(20px, 4vw, 56px));
        padding: 4px clamp(20px, 4vw, 56px) 18px;
        scrollbar-width: thin;
        scrollbar-color: var(--ax-orange) var(--ax-rule);
    }
    .ax-cardslider > .ax-card {
        flex: 0 0 calc((100% - 16px) / 2);   /* 2 visibles (1 gap de 16px) */
        scroll-snap-align: start;
        scroll-snap-stop: always;
        box-shadow: 8px 8px 0 var(--ax-ink);
    }
    /* Tipografía compacta dentro del slider móvil — menos alto vertical */
    .ax-cardslider > .ax-card .ax-card__body { padding: 14px 14px 4px; gap: 7px; }
    .ax-cardslider > .ax-card .ax-eyebrow { font-size: .6rem; padding: 5px 11px; letter-spacing: .12em; }
    .ax-cardslider > .ax-card .ax-brand-bold { font-size: .92rem; line-height: 1.22; }
    /* "Ideal para" se oculta en móvil (sigue en el DOM para SEO; visible en desktop) */
    .ax-cardslider > .ax-card .ax-card__ideal { display: none; }
    .ax-cardslider > .ax-card .ax-disclosure__summary { font-size: .66rem; padding: 3px 0; }
    .ax-cardslider > .ax-card .ax-card__foot { padding: 0 14px 14px; }
    .ax-cardslider > .ax-card .ax-btn--sm { padding: 9px 13px; font-size: .7rem; gap: 7px; }

    .ax-cardslider::-webkit-scrollbar { height: 6px; }
    .ax-cardslider::-webkit-scrollbar-track { background: var(--ax-rule); }
    .ax-cardslider::-webkit-scrollbar-thumb { background: var(--ax-orange); }

    .ax-slider-hint {
        display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
        font-family: var(--ax-font-mono); font-size: .7rem; letter-spacing: .12em;
        text-transform: uppercase; color: var(--ax-muted);
    }
    .ax-slider-hint i { color: var(--ax-orange); animation: ax-hint-nudge 1.6s var(--ax-ease-out) infinite; }
}
@keyframes ax-hint-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .ax-slider-hint i { animation: none; } }

/* ── Tipografía aplicada ────────────────────────────────── */
.ax-display-heavy {
    font-family: var(--ax-font-display); font-weight: 400;
    font-size: clamp(3.5rem, 7.6vw, 6rem); line-height: 0.9;
    letter-spacing: -0.01em; text-transform: uppercase;
}
.ax-display-heavy--xl { font-size: clamp(3.25rem, 10vw, 7rem) !important; line-height: .88; letter-spacing: -0.02em; }
.ax-display-medium {
    font-family: var(--ax-font-display); font-weight: 400;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem) !important; line-height: 0.95;
    letter-spacing: -0.005em; text-transform: uppercase;
}
.ax-display-heavy em, .ax-display-medium 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;
}
.ax-body {
    font-family: var(--ax-font-body); font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.0625rem); line-height: 1.65;
}
.ax-body strong { font-weight: 700; }
.ax-brand-bold { font-family: var(--ax-font-body); font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.4; }
.ax-mono { font-family: var(--ax-font-mono); font-size: clamp(0.65rem, 0.85vw, 0.7rem); letter-spacing: 0.12em; }
.ax-text-muted { color: var(--ax-muted); }

/* ── Eyebrows ───────────────────────────────────────────── */
.ax-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;
}
.ax-eyebrow--orange { background: var(--ax-orange); color: var(--ax-paper); border-color: var(--ax-orange); }
.ax-eyebrow--solid { background: var(--ax-ink); color: var(--ax-paper); border-color: var(--ax-ink); }

.ax-eyebrow-stamp {
    font-family: var(--ax-font-accent); font-style: italic; font-weight: 400;
    font-size: clamp(0.9rem, 1.05vw, 1.1rem); color: var(--ax-muted); line-height: 1.4;
    margin: 0; display: inline-flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.ax-eyebrow-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;
}
.ax-eyebrow-stamp--on-dark { color: var(--ax-muted-dark); }

/* ── Section headers (aperturas) ────────────────────────── */
.ax-section-header--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);
}
.ax-section-header__divider { font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-orange); font-size: 1.5em; flex-shrink: 0; }

.ax-section-header--index {
    display: flex; align-items: baseline; gap: .75rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(.75rem, 1.5vw, 1rem);
    border-bottom: 2px solid var(--ax-ink);
}
.ax-section-header__index-leader { flex: 1 1 auto; align-self: flex-end; margin-bottom: .35em; border-bottom: 3px dotted var(--ax-rule); }
.ax-section-header__index-tally { flex: 0 0 auto; color: var(--ax-muted); text-transform: uppercase; white-space: nowrap; }
@media (max-width: 560px) { .ax-section-header--index { flex-wrap: wrap; } .ax-section-header__index-leader { display: none; } .ax-section-header__index-tally { flex-basis: 100%; } }

/* ── Botones ────────────────────────────────────────────── */
.ax-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px;
    font-family: var(--ax-font-body); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; border-radius: 0; border: none; cursor: pointer;
    transition: transform var(--ax-motion-fast) var(--ax-ease-out), box-shadow var(--ax-motion-fast) var(--ax-ease-out);
    min-height: 44px; line-height: 1.15;
}
.ax-btn--primary  { background: var(--ax-orange); color: var(--ax-paper); box-shadow: 0 6px 0 var(--ax-orange-deep); }
.ax-btn--whatsapp { background: var(--ax-whatsapp); color: var(--ax-white); box-shadow: 0 6px 0 #0F8C40; }
.ax-btn--ghost    { background: transparent; color: var(--ax-paper); border: 1.5px solid var(--ax-paper); box-shadow: none; }
.ax-btn--lg       { padding: 18px 34px; font-size: 1.02rem; }
.ax-btn--sm       { padding: 11px 18px; font-size: .8rem; }

.ax-interactive--press { transition: transform var(--ax-motion-fast) var(--ax-ease-out), box-shadow var(--ax-motion-fast) var(--ax-ease-out); }
.ax-btn--primary:hover, .ax-btn--whatsapp:hover { transform: translateY(-2px); }
.ax-btn--primary:active, .ax-btn--whatsapp:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ax-orange-deep); }
.ax-btn--whatsapp:active { box-shadow: 0 0 0 #0F8C40; }
.ax-btn--ghost:hover { background: var(--ax-orange); color: var(--ax-ink); border-color: var(--ax-orange); }
/* Fix: el reset .ax-page a {color:inherit} le gana a .ax-btn — forzamos color de texto por variante */
.ax-page a.ax-btn--primary,
.ax-page a.ax-btn--whatsapp,
.ax-page a.ax-btn--ghost { color: var(--ax-paper); }
.ax-page a.ax-btn--whatsapp { color: var(--ax-white); }
.ax-page a.ax-btn--ghost:hover { color: var(--ax-ink); }

/* ── Card ───────────────────────────────────────────────── */
.ax-card {
    position: relative;
    display: flex; flex-direction: column; background: var(--ax-white);
    border: 1.5px solid var(--ax-ink); border-radius: 0; box-shadow: var(--ax-shadow-card-md);
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.ax-card--lift:hover { transform: translate(-5px, -5px); box-shadow: 9px 9px 0 var(--ax-orange); }
.ax-card--top-border { border-top: 4px solid var(--ax-orange); }
/* Media 1:1 — coincide con las imágenes de catálogo (sin recorte) y da peso visual.
   min-height:0 evita que el alto intrínseco de la imagen estire el flex-item;
   picture en block para que height:100% del <img> resuelva contra el contenedor. */
.ax-card__media { aspect-ratio: 1/1; overflow: hidden; background: var(--ax-cream); min-height: 0; }
.ax-card__media > picture { display: block; width: 100%; height: 100%; }
.ax-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ax-motion-slow) var(--ax-ease-out); }
.ax-card--lift:hover .ax-card__media img { transform: scale(1.04); }
.ax-card__body { padding: 20px 22px 8px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ax-card__ideal { font-family: var(--ax-font-body); font-size: .9rem; line-height: 1.5; color: var(--ax-muted); }
.ax-card__ideal b { color: var(--ax-ink); font-weight: 700; }
.ax-card__foot { padding: 0 22px 22px; margin-top: auto; }

/* Disclosure: descripción SEO colapsable (queda en el DOM, oculta por defecto) */
.ax-disclosure { margin-top: 2px; }
.ax-disclosure__summary {
    cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ax-font-body); font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .1em; color: var(--ax-orange); padding: 6px 0;
}
.ax-disclosure__summary::-webkit-details-marker { display: none; }
.ax-disclosure__summary::after {
    content: '+'; font-family: var(--ax-font-display); font-size: 1.15rem; line-height: 1; color: var(--ax-orange);
}
.ax-disclosure[open] .ax-disclosure__summary::after { content: '\2212'; }
.ax-disclosure__summary:hover { color: var(--ax-ink); }
.ax-disclosure__summary:hover::after { color: var(--ax-ink); }
.ax-disclosure__body { margin-top: 6px; }

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

/* Card horizontal (telas secundarias) */
.ax-cardh {
    display: grid; grid-template-columns: 132px 1fr; background: var(--ax-white);
    border: 1.5px solid var(--ax-ink); border-left: 6px solid var(--ax-orange);
    box-shadow: 8px 8px 0 var(--ax-ink); position: relative;
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.ax-cardh:hover { transform: translate(-4px, -4px); box-shadow: 11px 11px 0 var(--ax-orange); }
.ax-cardh__media { overflow: hidden; background: var(--ax-cream); min-height: 0; }
.ax-cardh__media > picture { display: block; width: 100%; height: 100%; }
.ax-cardh__media img { width: 100%; height: 100%; object-fit: cover; }
.ax-cardh__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ax-cardh__title { font-size: 1.05rem; line-height: 1.3; }
.ax-cardh__link {
    align-self: flex-start; margin-top: 8px;
    font-family: var(--ax-font-body); font-weight: 700; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .06em;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ax-orange); color: var(--ax-paper); padding: 10px 16px;
    box-shadow: 0 4px 0 var(--ax-orange-deep);
    transition: transform var(--ax-motion-fast) var(--ax-ease-out), box-shadow var(--ax-motion-fast) var(--ax-ease-out);
}
.ax-cardh__link i { color: var(--ax-ink); }
.ax-cardh__link:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ax-orange-deep); }
.ax-cardh__link:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ax-orange-deep); }
@media (max-width: 460px) { .ax-cardh { grid-template-columns: 96px 1fr; } }

/* ── Carrusel vertical de "Otras telas" ──────────────────
   Desktop/tablet: grilla fluida · móvil: carrusel scroll-snap vertical de 1 item */
.ax-cardh-slider {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(16px, 2vw, 24px);
}
.ax-cardh-vhint { display: none; }

/* CTA "¿buscas otra tela?" — ocupa la celda vacía de la grilla */
.ax-othercta {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px;
    background: var(--ax-ink); color: var(--ax-paper);
    border: 1.5px solid var(--ax-ink); border-left: 6px solid var(--ax-orange);
    box-shadow: 8px 8px 0 var(--ax-ink); padding: clamp(20px, 2.5vw, 28px);
}
.ax-othercta__title {
    font-family: var(--ax-font-display); text-transform: uppercase; line-height: 1;
    font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--ax-paper); letter-spacing: .01em; margin: 0;
}
.ax-othercta__title em {
    font-family: var(--ax-font-accent); font-style: italic; text-transform: lowercase;
    color: var(--ax-orange); font-weight: 400;
}
.ax-othercta--below { display: none; }   /* solo se muestra en móvil, debajo del carrusel */

@media (max-width: 767px) {
    .ax-othercta--grid { display: none; }                 /* el CTA del grid no entra al carrusel */
    .ax-othercta--below { display: flex; margin-top: 16px; box-shadow: 8px 8px 0 var(--ax-ink); }
    .ax-cardh-slider {
        display: block;
        grid-template-columns: none;
        height: clamp(210px, 60vw, 250px);
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--ax-orange) var(--ax-rule);
        border: 1px solid var(--ax-rule);
    }
    .ax-cardh-slider > .ax-cardh {
        height: clamp(210px, 60vw, 250px);
        scroll-snap-align: start;
        scroll-snap-stop: always;
        grid-template-columns: 36% 1fr;
        border: none; border-left: 5px solid var(--ax-orange);
        box-shadow: none; overflow: hidden;
    }
    .ax-cardh-slider > .ax-cardh:hover { transform: none; box-shadow: none; background: var(--ax-white); }
    .ax-cardh-slider > .ax-cardh .ax-cardh__body { justify-content: center; gap: 7px; padding: 16px; }
    .ax-cardh-slider > .ax-cardh .ax-cardh__title { font-size: .9rem; line-height: 1.2; }
    .ax-cardh-slider > .ax-cardh .ax-cardh__link { font-size: .74rem; letter-spacing: .05em; }
    /* En el carrusel, el "Leer más" se oculta (descripción queda en el DOM para SEO) */
    .ax-cardh-slider > .ax-cardh .ax-disclosure { display: none; }
    .ax-cardh-slider::-webkit-scrollbar { width: 6px; }
    .ax-cardh-slider::-webkit-scrollbar-track { background: var(--ax-rule); }
    .ax-cardh-slider::-webkit-scrollbar-thumb { background: var(--ax-orange); }

    .ax-cardh-vhint {
        display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
        font-family: var(--ax-font-mono); font-size: .7rem; letter-spacing: .12em;
        text-transform: uppercase; color: var(--ax-muted);
    }
    .ax-cardh-vhint i { color: var(--ax-orange); animation: ax-hint-nudge-y 1.6s var(--ax-ease-out) infinite; }
}
@keyframes ax-hint-nudge-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ax-cardh-vhint i { animation: none; } }

/* ── Hero (slim) ────────────────────────────────────────── */
.ax-hero { isolation: isolate; overflow: hidden; }
.ax-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ax-hero__bg picture { display: block; width: 100%; height: 100%; }
.ax-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.ax-hero__bg::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(90deg, rgba(31, 37, 48, .85) 0%, rgba(31, 37, 48, .55) 48%, rgba(31, 37, 48, .15) 100%),
        linear-gradient(0deg, rgba(31, 37, 48, .38) 0%, rgba(31, 37, 48, 0) 34%);
}
.ax-hero__inner { max-width: 720px; position: relative; z-index: 2; }
.ax-hero__title { color: var(--ax-paper); margin-top: clamp(1rem, 2vw, 1.5rem) !important; }
.ax-hero__lede {
    font-family: var(--ax-font-accent); font-style: italic;
    font-size: clamp(1.2rem, 2.2vw, 1.7rem); color: var(--ax-muted-dark);
    margin-top: clamp(1rem, 2vw, 1.5rem) !important; max-width: 36ch; line-height: 1.4;
}
.ax-hero__lede em { font-style: italic; color: var(--ax-orange); }
.ax-hero__online {
    display: flex; align-items: flex-start; gap: 11px;
    margin-top: clamp(1.1rem, 2vw, 1.4rem) !important; max-width: 52ch;
    border-left: 3px solid var(--ax-orange); padding-left: 14px;
    font-family: var(--ax-font-body); font-size: clamp(.88rem, 1.05vw, .98rem);
    line-height: 1.5; color: var(--ax-muted-dark);
}
.ax-hero__online i { color: var(--ax-orange); margin-top: 3px; flex-shrink: 0; font-size: 1.05em; }
.ax-hero__online strong { color: var(--ax-paper); font-weight: 700; }
.ax-hero__mega {
    position: absolute; right: clamp(-20px, -1vw, 0px); bottom: -2vw; z-index: 1;
    font-family: var(--ax-font-display); text-transform: uppercase;
    font-size: clamp(7rem, 22vw, 20rem); line-height: .8; color: var(--ax-rule-on-dark);
    pointer-events: none; letter-spacing: -0.03em; white-space: nowrap;
}
.ax-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.ax-hero__chips { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: clamp(1.75rem, 3vw, 2.5rem) !important; }
.ax-hero__chips li {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--ax-font-body); font-weight: 700; font-size: .8rem; letter-spacing: .02em;
    color: var(--ax-paper); border: 1px solid var(--ax-rule-on-dark); padding: 9px 16px;
}
.ax-hero__chips i { color: var(--ax-orange); }

/* Breadcrumb: usa el estilo global de products.css (.breadcrumb) — sin CSS propio aquí. */

/* ── Intro + confianza (SEO) ────────────────────────────── */
.ax-intro-split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .ax-intro-split { grid-template-columns: 1.15fr .85fr; } }
.ax-intro-trust {
    border: 1px solid var(--ax-rule); border-top: 3px solid var(--ax-orange);
    background: var(--ax-white); padding: clamp(20px, 3vw, 28px);
}
.ax-intro-trust__title {
    font-family: var(--ax-font-body); font-weight: 700; font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ax-muted); margin-bottom: 16px;
}
.ax-intro-trust ul { display: flex; flex-direction: column; gap: 12px; }
.ax-intro-trust li {
    display: flex; align-items: flex-start; gap: 12px;
    font-family: var(--ax-font-body); font-weight: 700; font-size: .92rem; line-height: 1.35;
    color: var(--ax-ink); padding-bottom: 12px; border-bottom: 1px solid var(--ax-rule);
}
.ax-intro-trust li:last-child { padding-bottom: 0; border-bottom: none; }
.ax-intro-trust li i { color: var(--ax-orange); font-size: 1rem; margin-top: 2px; flex-shrink: 0; width: 18px; text-align: center; }

/* ── Opening atrevido (Telas más solicitadas) ───────────── */
.ax-bold-open {
    position: relative; overflow: hidden;
    padding-top: clamp(2.75rem, 7vw, 5.5rem);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
@media (min-width: 920px) { .ax-bold-open { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); } }
.ax-bold-open > * { position: relative; z-index: 1; }
.ax-bold-open__mega {
    position: absolute; top: 0; left: -.04em; z-index: 0;
    font-family: var(--ax-font-display); text-transform: uppercase;
    font-size: clamp(5rem, 17vw, 13rem); line-height: .9; letter-spacing: -.03em;
    color: rgba(31, 37, 48, 0.055); pointer-events: none; white-space: nowrap; user-select: none;
}
.ax-bold-open .ax-eyebrow--orange { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.ax-bold-open .ax-bold-open__title {
    font-size: clamp(2.6rem, 6.4vw, 4.75rem) !important;
    line-height: .92; max-width: 18ch; color: var(--ax-ink);
}
.ax-bold-open .ax-hl {
    display: inline-block; background: var(--ax-ink); color: var(--ax-paper);
    padding: 0 .14em; line-height: 1; box-shadow: 6px 6px 0 var(--ax-orange);
}
.ax-bold-open__intro {
    font-family: var(--ax-font-body); color: var(--ax-muted);
    font-size: clamp(.95rem, 1.1vw, 1.0625rem); line-height: 1.65;
    max-width: 64ch; margin-top: clamp(1.5rem, 2.5vw, 2rem);
}
/* CTA mayoreo — panel atrevido a la derecha del opening */
.ax-mayoreo-cta {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    background: var(--ax-orange); border: 2px solid var(--ax-ink); border-radius: 0;
    padding: clamp(20px, 2.5vw, 28px); text-decoration: none;
    box-shadow: 10px 10px 0 var(--ax-ink);
    transition: transform var(--ax-motion-fast) var(--ax-ease-out), box-shadow var(--ax-motion-fast) var(--ax-ease-out);
}
.ax-mayoreo-cta:hover { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--ax-ink); }
.ax-mayoreo-cta:active { transform: translate(2px, 2px); box-shadow: 6px 6px 0 var(--ax-ink); }
.ax-mayoreo-cta__kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ax-font-mono); font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ax-ink) !important;
}
.ax-mayoreo-cta__title {
    font-family: var(--ax-font-display); text-transform: uppercase; line-height: .92;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem); color: var(--ax-ink) !important; letter-spacing: .01em;
}
.ax-mayoreo-cta__title em {
    font-family: var(--ax-font-accent); font-style: italic; font-weight: 400;
    text-transform: lowercase; color: var(--ax-paper) !important; letter-spacing: -.01em;
}
.ax-mayoreo-cta__action {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 8px;
    background: var(--ax-ink); color: var(--ax-paper) !important;
    font-family: var(--ax-font-body); font-weight: 700; font-size: .85rem;
    letter-spacing: .06em; text-transform: uppercase; padding: 12px 20px;
    box-shadow: 0 5px 0 var(--ax-pure-black);
    transition: transform var(--ax-motion-fast) var(--ax-ease-out), box-shadow var(--ax-motion-fast) var(--ax-ease-out);
}
.ax-mayoreo-cta__action i { transition: transform var(--ax-motion-base) var(--ax-ease-out); }
.ax-mayoreo-cta:hover .ax-mayoreo-cta__action { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ax-pure-black); }
.ax-mayoreo-cta:hover .ax-mayoreo-cta__action i { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) {
    .ax-mayoreo-cta:hover, .ax-mayoreo-cta:hover .ax-mayoreo-cta__action,
    .ax-mayoreo-cta:hover .ax-mayoreo-cta__action i { transform: none; }
}

/* Scroll suave a anclas (solo si el usuario no pidió menos movimiento) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── Sección Mayoreo (split editorial sobre ink · Fanzine) ── */
.ax-quote { position: relative; overflow: hidden; }
.ax-quote__mega {
    position: absolute; top: 0; left: -.04em; z-index: 0;
    font-family: var(--ax-font-display); text-transform: uppercase;
    font-size: clamp(5rem, 20vw, 16rem); line-height: .82; letter-spacing: -.03em;
    color: rgba(250, 246, 238, 0.045); pointer-events: none; white-space: nowrap; user-select: none;
}
.ax-quote__split { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 940px) { .ax-quote__split { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } }
.ax-quote__aside .ax-eyebrow--orange { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.ax-quote__title {
    color: var(--ax-paper) !important; font-size: clamp(2.1rem, 4.4vw, 3.4rem) !important;
    line-height: .95; max-width: 16ch;
}
.ax-quote__lede {
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-muted-dark);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.5; max-width: 46ch;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ax-quote__points { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(1.5rem, 3vw, 2rem); }
.ax-quote__points li {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--ax-font-body); font-weight: 700; font-size: .95rem; color: var(--ax-paper);
}
.ax-quote__points i { color: var(--ax-orange); width: 22px; text-align: center; font-size: 1.1rem; flex-shrink: 0; }

.ax-quote__form { position: relative; }
.ax-quote__burst {
    position: absolute; top: -18px; right: clamp(8px, 3vw, 28px); z-index: 4;
    font-family: var(--ax-font-display); text-transform: uppercase; letter-spacing: .04em;
    font-size: clamp(.8rem, 1.4vw, 1rem); line-height: 1;
    background: var(--ax-yellow); color: var(--ax-ink);
    padding: 10px 16px; transform: rotate(-7deg); box-shadow: 4px 4px 0 var(--ax-ink);
}
/* FormCard sobre ink: la sombra ink se pierde → naranja para que resalte */
.ax-quote .ax-formca { box-shadow: 14px 14px 0 var(--ax-orange); }
.ax-quote .ax-formca__rule { height: 6px; }
@media (max-width: 575px) { .ax-quote .ax-formca { box-shadow: 8px 8px 0 var(--ax-orange); } }

/* ── Pairing cards (¿Qué tela elegir?) — cuadrícula con encanto ── */
.ax-pairs { display: grid; gap: clamp(16px, 2vw, 22px); margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
@media (min-width: 1024px) { .ax-pairs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px) and (max-width: 1023px) { .ax-pairs { grid-template-columns: repeat(2, 1fr); } }

.ax-pair {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    background: var(--ax-white); border: 1.5px solid var(--ax-ink); border-top: 4px solid var(--ax-orange);
    padding: clamp(18px, 2.2vw, 24px); text-decoration: none;
    box-shadow: 6px 6px 0 var(--ax-ink);
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.ax-pair:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--ax-orange); }
.ax-pair__icon {
    width: 50px; height: 50px; display: grid; place-items: center;
    background: var(--ax-cream); border: 1.5px solid var(--ax-ink); color: var(--ax-orange); font-size: 1.25rem;
    transition: background var(--ax-motion-base) var(--ax-ease-out), color var(--ax-motion-base) var(--ax-ease-out);
}
.ax-pair:hover .ax-pair__icon { background: var(--ax-orange); color: var(--ax-paper); }
.ax-pair__project { font-family: var(--ax-font-body); font-weight: 700; font-size: 1rem; color: var(--ax-ink); line-height: 1.3; }
.ax-pair__sep {
    margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ax-rule);
    font-family: var(--ax-font-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ax-muted);
}
.ax-pair__fabric {
    font-family: var(--ax-font-display); text-transform: uppercase; letter-spacing: .01em; line-height: 1;
    font-size: clamp(1.35rem, 2vw, 1.75rem); color: var(--ax-ink);
    display: inline-flex; align-items: center; gap: 10px;
}
.ax-pair__fabric i { color: var(--ax-orange); font-size: .8em; transition: transform var(--ax-motion-base) var(--ax-ease-out); }
.ax-pair:hover .ax-pair__fabric i { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
    .ax-pair:hover, .ax-pair:hover .ax-pair__fabric i { transform: none; }
}

/* ── Chips de municipios (envíos) ───────────────────────── */
.ax-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.ax-chip {
    font-family: var(--ax-font-body); font-weight: 700; font-size: .85rem;
    letter-spacing: .03em; padding: 9px 16px; border: 1.5px solid var(--ax-ink);
    background: var(--ax-white); color: var(--ax-ink);
    transition: background var(--ax-motion-fast) var(--ax-ease-out), color var(--ax-motion-fast) var(--ax-ease-out);
}
.ax-chip i { color: var(--ax-orange); margin-right: 6px; }
.ax-chip:hover { background: var(--ax-ink); color: var(--ax-paper); }
.ax-chip:hover i { color: var(--ax-orange); }

/* ── FAQ — layout 2 columnas + items tipo card ──────────── */
.ax-faqsec__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .ax-faqsec__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }
@media (min-width: 940px) { .ax-faqsec__aside { position: sticky; top: 130px; } }
.ax-faqsec__aside .ax-eyebrow--orange { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.ax-faqsec__title { font-size: clamp(2rem, 4.4vw, 3.2rem) !important; line-height: .95; }
.ax-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;
}
.ax-faqsec__cta { margin-top: 4px; }

.ax-faq { display: flex; flex-direction: column; gap: 12px; }
.ax-faq__item {
    background: var(--ax-white); 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);
}
.ax-faq__item:hover { border-color: var(--ax-ink); }
.ax-faq__item[open] {
    border-color: var(--ax-ink); border-left: 4px solid var(--ax-orange);
    box-shadow: 5px 5px 0 var(--ax-ink);
}
.ax-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);
}
.ax-faq__q::-webkit-details-marker { display: none; }
.ax-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);
}
.ax-faq__item[open] .ax-faq__q { color: var(--ax-orange); }
.ax-faq__item[open] .ax-faq__q::after {
    transform: rotate(45deg); background: var(--ax-orange); color: var(--ax-paper); border-color: var(--ax-orange);
}
.ax-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;
}

/* ── FormCard mayoristas ────────────────────────────────── */
.ax-formca-wrap { padding-bottom: 28px; }
.ax-formca {
    position: relative; background: var(--ax-paper); color: var(--ax-ink);
    border: 2px solid var(--ax-ink); border-radius: 0;
    padding: clamp(28px, 4.5vw, 56px); box-shadow: 14px 14px 0 var(--ax-ink);
}
.ax-formca__rule { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ax-orange); }
.ax-formca__head { margin-bottom: clamp(24px, 3.5vw, 40px); }
.ax-formca__eyebrow {
    display: inline-block; font-family: var(--ax-font-display); background: var(--ax-orange);
    color: var(--ax-paper); padding: 8px 14px 7px; font-size: 14px; letter-spacing: 0.14em;
    text-transform: uppercase; line-height: 1; margin-bottom: 18px;
}
.ax-formca__title {
    font-family: var(--ax-font-display); text-transform: uppercase; color: var(--ax-ink);
    font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: 0.95; letter-spacing: 0.005em;
    margin: 0 0 16px; max-width: 22ch;
}
.ax-formca__title em { font-family: var(--ax-font-accent); font-style: italic; font-weight: 400; text-transform: lowercase; color: var(--ax-orange); letter-spacing: -0.01em; font-size: 1.02em; }
.ax-formca__lead { font-family: var(--ax-font-accent); font-style: italic; color: #4A5160; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.5; max-width: 60ch; margin: 0; }

.ax-formca__grid { display: grid; grid-template-columns: 1fr; gap: 32px 28px; }
@media (min-width: 768px) { .ax-formca__grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
.ax-formca__field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ax-formca__field--full { grid-column: 1 / -1; }
.ax-formca__fieldset { border: none; padding: 0; margin: 0; }
.ax-formca__label-row { display: inline-flex; align-items: baseline; gap: 10px; }
.ax-formca__num { font-family: var(--ax-font-mono); color: var(--ax-orange); font-size: 13px; letter-spacing: 0.16em; font-weight: 700; line-height: 1; flex-shrink: 0; }
.ax-formca__label { font-family: var(--ax-font-display); text-transform: uppercase; color: var(--ax-ink); font-size: clamp(1rem, 1.6vw, 1.15rem); letter-spacing: 0.04em; line-height: 1.1; }

.ax-formca__input {
    width: 100%; background: var(--ax-white); color: var(--ax-ink);
    border: 2px solid var(--ax-ink); border-radius: 0; padding: 15px 18px;
    font-family: var(--ax-font-body); font-size: 1rem; line-height: 1.3;
    box-shadow: 6px 6px 0 var(--ax-ink);
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out), border-color var(--ax-motion-base) var(--ax-ease-out);
    -webkit-appearance: none; appearance: none;
}
.ax-formca__input:focus, .ax-formca__input:focus-visible {
    outline: none; border-color: var(--ax-orange);
    transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ax-ink);
}
.ax-formca__input[aria-invalid="true"] { border-color: var(--ax-danger); box-shadow: 6px 6px 0 var(--ax-danger); }
.ax-formca__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2530' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; }

.ax-formca__radio-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.ax-formca__radio-option {
    position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
    background: var(--ax-white); color: var(--ax-ink); border: 2px solid var(--ax-ink); border-radius: 0;
    cursor: pointer; font-family: var(--ax-font-body); font-weight: 700; font-size: .95rem;
    text-transform: uppercase; letter-spacing: .06em; box-shadow: 4px 4px 0 transparent;
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow 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);
}
.ax-formca__radio-option input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.ax-formca__radio-option:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ax-ink); }
.ax-formca__radio-option:has(input:checked) { background: var(--ax-ink); color: var(--ax-paper); border-color: var(--ax-ink); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ax-orange); }
.ax-formca__radio-option:focus-within { outline: 3px solid var(--ax-orange); outline-offset: 3px; }

.ax-formca__actions { margin-top: clamp(32px, 4.5vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ax-formca__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 16px;
    padding: clamp(18px, 2.4vw, 24px) clamp(24px, 4vw, 44px);
    background: var(--ax-whatsapp); color: var(--ax-white); border: 2px solid var(--ax-ink); border-radius: 0;
    font-family: var(--ax-font-display); font-size: clamp(1.1rem, 2vw, 1.5rem); letter-spacing: 0.04em;
    text-transform: uppercase; line-height: 1.05; cursor: pointer; box-shadow: 8px 8px 0 var(--ax-ink); text-align: center;
    transition: transform var(--ax-motion-fast) var(--ax-ease-out), box-shadow var(--ax-motion-fast) var(--ax-ease-out);
}
.ax-formca__cta-icon { font-size: 1.6em; line-height: 1; flex-shrink: 0; }
.ax-formca__cta:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ax-ink); }
.ax-formca__cta:active { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--ax-ink); }
.ax-formca__cta:focus-visible { outline: 3px solid var(--ax-ink); outline-offset: 4px; }
.ax-formca__microcopy { font-family: var(--ax-font-accent); font-style: italic; color: #4A5160; font-size: clamp(.95rem, 1.4vw, 1.05rem); text-align: center; max-width: 60ch; margin: 0 auto; line-height: 1.5; }
.ax-formca__microcopy 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; }

/* ── Sección Asesoría "Elige la tela correcta" (split editorial) ── */
.ax-advice { position: relative; overflow: hidden; }
.ax-advice__mega {
    position: absolute; top: 0; right: -.04em; z-index: 0;
    font-family: var(--ax-font-display); text-transform: uppercase;
    font-size: clamp(4.5rem, 16vw, 13rem); line-height: .85; letter-spacing: -.03em;
    color: rgba(31, 37, 48, 0.045); pointer-events: none; white-space: nowrap; user-select: none;
}
.ax-advice__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 920px) { .ax-advice__grid { grid-template-columns: 1fr 1fr; } }
.ax-advice__head .ax-eyebrow--solid { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.ax-advice__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem) !important; line-height: .95; }
.ax-advice__lede {
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-ink);
    font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.45;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ax-advice__dropcap {
    float: left; font-family: var(--ax-font-display); font-style: normal;
    font-size: clamp(3.5rem, 7vw, 5rem); line-height: .72; color: var(--ax-orange);
    padding: .06em .14em 0 0; margin-top: .04em;
}
.ax-advice__mark { font-style: normal; background: var(--ax-ink); color: var(--ax-paper); padding: 0 .14em; }
.ax-advice__body { padding-top: clamp(.25rem, 1.5vw, 1rem); }
.ax-advice__callout {
    border-left: 4px solid var(--ax-orange); background: var(--ax-white);
    padding: 16px 20px; margin-top: clamp(1.5rem, 3vw, 2rem);
    font-family: var(--ax-font-body); color: var(--ax-ink); line-height: 1.6;
    box-shadow: 6px 6px 0 var(--ax-ink);
}
.ax-advice__callout em { font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-orange); font-weight: 400; }
.ax-advice__cta { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* ── Sección Envíos (split técnico + panel ink) ─────────── */
.ax-ship__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 920px) { .ax-ship__grid { grid-template-columns: 1.05fr .95fr; align-items: center; } }
.ax-ship__main .ax-eyebrow--solid { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.ax-ship__title { font-size: clamp(2.1rem, 4.6vw, 3.3rem) !important; line-height: .95; }
.ax-ship__lede { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 56ch; }
.ax-ship__chips { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.ax-ship__cta { margin-top: clamp(1.5rem, 3vw, 2rem); }

.ax-ship__panel {
    position: relative; background: var(--ax-ink); color: var(--ax-paper);
    border-top: 4px solid var(--ax-orange);
    padding: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 32px);
    box-shadow: 12px 12px 0 var(--ax-orange);
}
.ax-ship__tab {
    position: absolute; top: 0; left: clamp(24px, 3vw, 32px); transform: translateY(-100%);
    background: var(--ax-orange); color: var(--ax-ink);
    font-family: var(--ax-font-mono); font-size: .7rem; letter-spacing: .12em;
    text-transform: uppercase; padding: 6px 14px;
}
.ax-ship__panel-eyebrow {
    font-family: var(--ax-font-mono); color: var(--ax-orange);
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.ax-ship__panel-lede {
    font-family: var(--ax-font-display); text-transform: uppercase; color: var(--ax-paper);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1; margin-top: 12px; letter-spacing: .01em;
}
.ax-ship__panel-lede em {
    font-family: var(--ax-font-accent); font-style: italic; text-transform: lowercase;
    color: var(--ax-orange); font-weight: 400;
}
.ax-ship__specs { margin: clamp(1.5rem, 2.5vw, 1.75rem) 0 0; display: flex; flex-direction: column; }
.ax-ship__specs li {
    display: flex; align-items: baseline; gap: 14px;
    padding: 13px 0; border-bottom: 1px solid var(--ax-rule-on-dark);
    font-family: var(--ax-font-body); font-weight: 700; font-size: .98rem;
    text-transform: uppercase; letter-spacing: .03em; color: var(--ax-paper);
}
.ax-ship__specs li:first-child { border-top: 1px solid var(--ax-rule-on-dark); }
.ax-ship__num {
    font-family: var(--ax-font-mono); color: var(--ax-orange); font-size: .8rem;
    letter-spacing: .1em; font-weight: 700; flex-shrink: 0;
}
.ax-ship__panel-foot {
    font-family: var(--ax-font-body); color: var(--ax-muted-dark);
    font-size: .9rem; line-height: 1.55; margin-top: clamp(1.25rem, 2.5vw, 1.5rem);
}

/* ── Prosa / cierre de sección ──────────────────────────── */
.ax-prose p + p { margin-top: 1.1rem; }
.ax-prose em { font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-ink); background: rgba(241, 90, 41, .12); padding: 0 .15em; }
.ax-prose a { color: var(--ax-purple); font-weight: 700; }

/* anchor con offset por header fixed */
.ax-anchor { scroll-margin-top: 130px; }
@media (max-width: 991px) { .ax-anchor { scroll-margin-top: 120px; } }

/* ── Responsive sombras formca ──────────────────────────── */
@media (max-width: 575px) {
    .ax-formca { box-shadow: 8px 8px 0 var(--ax-ink); }
    .ax-formca__title { font-size: clamp(1.75rem, 8vw, 2.4rem); }
    .ax-formca__input { box-shadow: 4px 4px 0 var(--ax-ink); }
    .ax-formca__input:focus, .ax-formca__input:focus-visible { box-shadow: 7px 7px 0 var(--ax-ink); }
    .ax-formca__cta { box-shadow: 6px 6px 0 var(--ax-ink); }
    .ax-formca__cta:hover { box-shadow: 9px 9px 0 var(--ax-ink); }
}

/* ── Motion-safe ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ax-page *, .ax-page *::before, .ax-page *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
    .ax-card--lift:hover, .ax-cardh:hover, .ax-formca__input:focus,
    .ax-formca__radio-option:hover, .ax-formca__radio-option:has(input:checked),
    .ax-formca__cta:hover, .ax-formca__cta:active { transform: none; }
    .ax-card--lift:hover .ax-card__media img { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   Díptico de material — interlink Algodón ⟷ Poliéster
   @showcase · sobre ink · hover ink-flood + zoom + barra diagonal
   ════════════════════════════════════════════════════════════ */
.ax-duo { position: relative; overflow: hidden; }
.ax-duo__bgword {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0;
    font-family: var(--ax-font-display); text-transform: uppercase;
    font-size: clamp(6rem, 24vw, 22rem); line-height: 1; letter-spacing: -.04em;
    color: rgba(250, 246, 238, 0.035); pointer-events: none; white-space: nowrap; user-select: none;
}
.ax-duo .ax-container { position: relative; z-index: 1; }

.ax-duo__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ax-duo__head .ax-eyebrow--orange { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.ax-duo__title { color: var(--ax-paper) !important; font-size: clamp(2.4rem, 5.4vw, 4rem) !important; line-height: .95; }
.ax-duo__title em:nth-of-type(2) { color: var(--ax-purple); }
.ax-duo__lede {
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-muted-dark);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.5; max-width: 52ch;
    margin-top: clamp(1rem, 2vw, 1.4rem);
}

.ax-duo__grid {
    position: relative; display: grid; gap: clamp(20px, 3vw, 36px);
}
@media (min-width: 760px) { .ax-duo__grid { grid-template-columns: 1fr 1fr; } }

/* ── Tarjeta de material ── */
.ax-duo__card {
    position: relative; display: block; overflow: hidden; isolation: isolate;
    aspect-ratio: 17 / 10;   /* coincide con las imágenes → cover no recorta */
    background: var(--ax-pure-black);
    border: 2px solid var(--ax-paper);
    box-shadow: 12px 12px 0 var(--ax-orange);
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.ax-duo__card--poliester { box-shadow: 12px 12px 0 var(--ax-purple); }
.ax-duo__card:hover { transform: translate(-5px, -5px); box-shadow: 17px 17px 0 var(--ax-orange); }
.ax-duo__card--poliester:hover { box-shadow: 17px 17px 0 var(--ax-purple); }

.ax-duo__media { position: absolute; inset: 0; z-index: 0; }
.ax-duo__media picture { display: block; width: 100%; height: 100%; }
.ax-duo__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--ax-motion-slow) var(--ax-ease-out), filter var(--ax-motion-slow) var(--ax-ease-out);
    filter: saturate(.92) contrast(1.02);
}
.ax-duo__card:hover .ax-duo__media img { transform: scale(1.07); filter: saturate(1.05) contrast(1.05); }
/* velo oscuro para legibilidad del texto */
.ax-duo__media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(14,14,14,.86) 0%, rgba(14,14,14,.42) 48%, rgba(14,14,14,.12) 100%);
    transition: opacity var(--ax-motion-base) var(--ax-ease-out);
}
/* barra diagonal de acento que barre en hover */
.ax-duo__card::before {
    content: ''; position: absolute; z-index: 1; top: -10%; bottom: -10%; left: -38%; width: 34%;
    background: var(--ax-orange); transform: skewX(-12deg) translateX(-120%);
    opacity: .92; pointer-events: none;
    transition: transform var(--ax-motion-slow) var(--ax-ease-out);
    mix-blend-mode: normal;
}
.ax-duo__card--poliester::before { background: var(--ax-purple); }
.ax-duo__card:hover::before { transform: skewX(-12deg) translateX(40%); }

.ax-duo__index {
    position: absolute; top: clamp(16px, 2vw, 22px); right: clamp(16px, 2vw, 22px); z-index: 3;
    font-family: var(--ax-font-mono); font-weight: 700; font-size: clamp(.85rem, 1.4vw, 1.1rem);
    letter-spacing: .16em; color: var(--ax-paper);
    border: 1.5px solid var(--ax-rule-on-dark); padding: 6px 10px; line-height: 1;
    background: rgba(14,14,14,.35); backdrop-filter: blur(2px);
}
.ax-duo__content {
    position: absolute; inset: auto 0 0 0; z-index: 2;
    padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; align-items: flex-start;
}
.ax-duo__kicker {
    display: inline-block; font-family: var(--ax-font-body); font-weight: 700;
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--ax-paper); background: var(--ax-orange); padding: 5px 12px; line-height: 1; margin-bottom: 12px;
}
.ax-duo__card--poliester .ax-duo__kicker { background: var(--ax-purple); }
.ax-duo__mega {
    font-family: var(--ax-font-display); text-transform: uppercase;
    font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: .86; letter-spacing: -.01em;
    color: var(--ax-paper);
}
.ax-duo__desc {
    font-family: var(--ax-font-body); color: var(--ax-paper); opacity: .9;
    font-size: clamp(.9rem, 1.1vw, 1rem); line-height: 1.5; max-width: 34ch;
    margin-top: 12px;
    /* recorta a 2 líneas para mantener la composición limpia */
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ax-duo__ctab {
    display: inline-flex; align-items: center; gap: 12px; margin-top: 18px;
    font-family: var(--ax-font-body); font-weight: 700; font-size: .82rem;
    letter-spacing: .06em; text-transform: uppercase;
    background: var(--ax-paper); color: var(--ax-ink); padding: 13px 20px;
    box-shadow: 0 5px 0 rgba(14,14,14,.55);
    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);
}
.ax-duo__ctab i { transition: transform var(--ax-motion-base) var(--ax-ease-out); }
.ax-duo__card:hover .ax-duo__ctab { background: var(--ax-orange); color: var(--ax-paper); transform: translateY(-2px); box-shadow: 0 7px 0 var(--ax-orange-deep); }
.ax-duo__card--poliester:hover .ax-duo__ctab { background: var(--ax-purple); color: var(--ax-paper); box-shadow: 0 7px 0 var(--ax-purple-deep); }
.ax-duo__card:hover .ax-duo__ctab i { transform: translateX(5px); }

.ax-duo__card:focus-visible { outline: 4px solid var(--ax-orange); outline-offset: 4px; }
.ax-duo__card--poliester:focus-visible { outline-color: var(--ax-purple); }

/* ── Moneda "o" central ── */
.ax-duo__vs {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4;
    width: clamp(56px, 7vw, 76px); height: clamp(56px, 7vw, 76px);
    display: grid; place-items: center; border-radius: 9999px;
    background: var(--ax-paper); border: 3px solid var(--ax-orange);
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-ink);
    font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1;
    box-shadow: 0 0 0 6px var(--ax-ink);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ax-duo__card:hover { transform: none; }
    .ax-duo__card:hover .ax-duo__media img { transform: none; }
    .ax-duo__card::before { display: none; }
    .ax-duo__card:hover .ax-duo__ctab { transform: none; }
    .ax-duo__card:hover .ax-duo__ctab i { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   COMPONENTES PROPIOS DE CHIAPAS
   Bloques SEO con imagen propia que el template de chihuahua
   no contempla: feature split (tienda/proveedor/precio/rollos),
   thumbstrip (telas deportivas), video testimonial y coverage.
   ════════════════════════════════════════════════════════════ */

/* ── Feature split (imagen + prosa, alternando lado) ─────── */
.ax-features { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 5rem); }
.ax-feature { display: grid; gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 860px) {
    .ax-feature { grid-template-columns: 1fr 1fr; }
    .ax-feature--reverse .ax-feature__media { order: 2; }
}
.ax-feature__media { position: relative; }
.ax-feature__media picture { display: block; }
.ax-feature__media img {
    width: 100%; border: 2px solid var(--ax-ink);
    box-shadow: 12px 12px 0 var(--ax-orange);
}
.ax-feature--reverse .ax-feature__media img { box-shadow: -12px 12px 0 var(--ax-purple); }
.ax-feature__kicker {
    font-family: var(--ax-font-mono); color: var(--ax-orange);
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; display: block;
}
.ax-feature__title {
    font-family: var(--ax-font-display); text-transform: uppercase;
    font-size: clamp(1.9rem, 4vw, 3rem) !important; line-height: .95;
    letter-spacing: -.005em; color: var(--ax-ink); margin: 12px 0 0;
}
.ax-section--ink .ax-feature__title { color: var(--ax-paper); }
.ax-feature__title em {
    font-family: var(--ax-font-accent); font-style: italic; font-weight: 400;
    text-transform: lowercase; color: var(--ax-orange); letter-spacing: -.025em;
}
.ax-feature__sub {
    font-family: var(--ax-font-body); font-weight: 700; color: var(--ax-muted);
    font-size: .95rem; letter-spacing: .02em; margin: 8px 0 0;
}
.ax-feature__body {
    font-family: var(--ax-font-body); color: var(--ax-muted);
    font-size: clamp(.95rem, 1.1vw, 1.0625rem); line-height: 1.65;
    margin: clamp(1rem, 2vw, 1.4rem) 0 0; max-width: 60ch;
}
.ax-section--ink .ax-feature__body { color: var(--ax-muted-dark); }
.ax-feature__body strong { color: var(--ax-ink); font-weight: 700; }
.ax-section--ink .ax-feature__body strong { color: var(--ax-paper); }
.ax-feature__cta { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ── Thumbstrip (carrusel de miniaturas — telas deportivas) ── */
.ax-thumbstrip {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
    gap: clamp(12px, 1.5vw, 18px); margin-top: clamp(1.5rem, 3vw, 2.25rem);
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    scroll-padding-left: clamp(20px, 4vw, 56px);
    margin-inline: calc(-1 * clamp(20px, 4vw, 56px));
    padding: 4px clamp(20px, 4vw, 56px) 16px;
    scrollbar-width: thin; scrollbar-color: var(--ax-orange) var(--ax-rule);
}
.ax-thumbstrip::-webkit-scrollbar { height: 6px; }
.ax-thumbstrip::-webkit-scrollbar-track { background: var(--ax-rule); }
.ax-thumbstrip::-webkit-scrollbar-thumb { background: var(--ax-orange); }
.ax-thumb {
    scroll-snap-align: start; position: relative; display: block;
    border: 1.5px solid var(--ax-ink); background: var(--ax-cream);
    box-shadow: 6px 6px 0 var(--ax-ink);
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.ax-thumb:hover { transform: translate(-4px, -4px); box-shadow: 9px 9px 0 var(--ax-orange); }
.ax-thumb__media { aspect-ratio: 1/1; overflow: hidden; }
.ax-thumb__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ax-motion-slow) var(--ax-ease-out); }
.ax-thumb:hover .ax-thumb__media img { transform: scale(1.05); }
.ax-thumb__name {
    display: block; font-family: var(--ax-font-body); font-weight: 700;
    font-size: .8rem; letter-spacing: .03em; text-transform: uppercase;
    color: var(--ax-ink); padding: 10px 12px; border-top: 1.5px solid var(--ax-ink);
    background: var(--ax-white);
}

/* ── Video testimonial (split: marco vertical + copy) ────── */
.ax-video__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .ax-video__grid { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); } }
.ax-video__stage { position: relative; justify-self: center; width: 100%; max-width: 340px; }
.ax-video__frame {
    position: relative; aspect-ratio: 9 / 16; width: 100%;
    border: 2px solid var(--ax-paper); background: var(--ax-pure-black);
    box-shadow: 14px 14px 0 var(--ax-orange); overflow: hidden;
}
.ax-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ax-video__ref {
    position: absolute; bottom: -14px; left: -10px; z-index: 2;
    font-family: var(--ax-font-mono); font-size: .62rem; letter-spacing: .14em;
    text-transform: uppercase; background: var(--ax-orange); color: var(--ax-ink);
    padding: 5px 12px; box-shadow: 3px 3px 0 var(--ax-pure-black);
}
.ax-video__copy .ax-eyebrow--orange { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.ax-video__title { color: var(--ax-paper) !important; font-size: clamp(2rem, 4.4vw, 3.2rem) !important; line-height: .95; }
.ax-video__lede {
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-muted-dark);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.5; max-width: 48ch;
    margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ax-video__note { font-family: var(--ax-font-body); color: var(--ax-paper); font-weight: 700; font-size: .95rem; margin-top: 1rem; }
.ax-video__cta { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* ── Coverage de ciudades (chips grandes con detalle) ────── */
.ax-coverage__head { max-width: 64ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.ax-coverage__lede {
    font-family: var(--ax-font-body); color: var(--ax-muted);
    font-size: clamp(.95rem, 1.1vw, 1.0625rem); line-height: 1.65; margin-top: 1rem;
}
.ax-coverage__grid {
    display: grid; gap: clamp(14px, 2vw, 20px);
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ax-city {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--ax-white); border: 1.5px solid var(--ax-ink); border-top: 4px solid var(--ax-orange);
    padding: clamp(16px, 2vw, 20px); box-shadow: 6px 6px 0 var(--ax-ink);
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.ax-city:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--ax-orange); }
.ax-city__name {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--ax-font-body); font-weight: 700; font-size: 1.05rem; color: var(--ax-ink); line-height: 1.25;
}
.ax-city__name i { color: var(--ax-orange); font-size: 1rem; flex-shrink: 0; }
.ax-city__desc { font-family: var(--ax-font-body); color: var(--ax-muted); font-size: .9rem; line-height: 1.5; }
.ax-city--more { background: var(--ax-ink); border-color: var(--ax-ink); border-top-color: var(--ax-orange); }
.ax-city--more .ax-city__name { color: var(--ax-paper); }
.ax-city--more .ax-city__desc { color: var(--ax-muted-dark); }
.ax-coverage__cta { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

@media (prefers-reduced-motion: reduce) {
    .ax-thumb:hover, .ax-thumb:hover .ax-thumb__media img,
    .ax-city:hover { transform: none; }
}

/* ── Cards simplificadas (solo imagen + nombre + botón) ──── */
.ax-card__body--simple {
    justify-content: center; text-align: left;
    padding-top: 18px; padding-bottom: 6px;
}
.ax-card__body--simple .ax-brand-bold { font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.25; }
.ax-cardh__body--simple { justify-content: center; gap: 14px; }
.ax-cardh__body--simple .ax-cardh__title { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }

/* ════════════════════════════════════════════════════════════
   PROMO BANNERS — carrusel (Bootstrap 4) y banner único
   Reestilizados al sistema: radius 0, borde ink + sombra offset,
   controles cuadrados ink con chevron paper.
   ════════════════════════════════════════════════════════════ */
.ax-promo-band { padding: clamp(28px, 4.5vw, 48px) 0; }
.ax-promo-band--paper { background: var(--ax-paper); }
.ax-promo-band--cream { background: var(--ax-cream); }

.ax-promo { position: relative; }
.ax-promo__viewport {
    position: relative; border: 2px solid var(--ax-ink); border-radius: 0;
    box-shadow: 10px 10px 0 var(--ax-orange); overflow: hidden; background: var(--ax-cream);
}
.ax-promo .carousel-item picture { display: block; }
.ax-promo .carousel-item img { width: 100%; display: block; }

/* Controles cuadrados centrados verticalmente */
.ax-promo__ctrl {
    width: clamp(42px, 5vw, 56px); height: clamp(42px, 5vw, 56px);
    top: 50%; bottom: auto; transform: translateY(-50%) scale(.92);
    background: var(--ax-ink); border: 2px solid var(--ax-paper); border-radius: 0;
    /* ocultos por defecto · aparecen al hover sobre el carrusel */
    opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center;
    box-shadow: 4px 4px 0 var(--ax-orange);
    transition: opacity var(--ax-motion-base) var(--ax-ease-out), visibility var(--ax-motion-base) var(--ax-ease-out),
                background var(--ax-motion-fast) var(--ax-ease-out), transform var(--ax-motion-fast) var(--ax-ease-out), box-shadow var(--ax-motion-fast) var(--ax-ease-out);
}
.ax-promo__ctrl--prev { left: clamp(10px, 1.6vw, 18px); }
.ax-promo__ctrl--next { right: clamp(10px, 1.6vw, 18px); }
/* visibles al hover del carrusel o al enfocar con teclado */
.ax-promo:hover .ax-promo__ctrl,
.ax-promo:focus-within .ax-promo__ctrl { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
.ax-promo__ctrl:hover { background: var(--ax-orange); transform: translateY(-50%) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ax-ink); }
.ax-promo__ctrl:focus-visible { outline: 3px solid var(--ax-orange); outline-offset: 3px; }
/* en dispositivos táctiles (sin hover) se mantienen siempre visibles */
@media (hover: none) {
    .ax-promo__ctrl { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
}
.ax-promo__ico { width: 46%; height: 46%; background: center / contain no-repeat; }
.ax-promo__ctrl--prev .ax-promo__ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF6EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
.ax-promo__ctrl--next .ax-promo__ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF6EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); }

/* Indicadores cuadrados */
.ax-promo .carousel-indicators { margin-bottom: 10px; }
.ax-promo .carousel-indicators li {
    width: 22px; height: 5px; border-radius: 0; background: var(--ax-paper);
    border: 1px solid var(--ax-ink); opacity: .65; box-shadow: 2px 2px 0 rgba(31,37,48,.35);
}
.ax-promo .carousel-indicators li.active { background: var(--ax-orange); opacity: 1; }

/* Banner único (no carrusel) */
.ax-promobox {
    display: block; border: 2px solid var(--ax-ink); border-radius: 0;
    box-shadow: 10px 10px 0 var(--ax-orange); overflow: hidden; background: var(--ax-cream);
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.ax-promobox:hover { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--ax-orange); }
.ax-promobox picture { display: block; }
.ax-promobox img { width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
    .ax-promo__ctrl:hover { transform: translateY(-50%); }
    .ax-promobox:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   EVITA PROBLEMAS — sección atrevida sobre ink
   @fanzine · MegaText "CERO" · badges tachados (prohibido)
   ════════════════════════════════════════════════════════════ */
.ax-evita { position: relative; overflow: hidden; }
.ax-evita__bgword {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0;
    font-family: var(--ax-font-display); text-transform: uppercase;
    font-size: clamp(8rem, 30vw, 28rem); line-height: 1; letter-spacing: -.04em;
    color: rgba(250, 246, 238, 0.04); pointer-events: none; white-space: nowrap; user-select: none;
}
.ax-evita .ax-container { position: relative; z-index: 1; }

.ax-evita__head { max-width: 64ch; margin: 0 auto clamp(2.25rem, 4.5vw, 3.25rem); text-align: center; }
.ax-evita__head .ax-eyebrow--orange { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.ax-evita__title { color: var(--ax-paper) !important; font-size: clamp(2.2rem, 5.4vw, 3.8rem) !important; line-height: .95; }
.ax-evita__lede {
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-muted-dark);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.5; max-width: 56ch;
    margin: clamp(1rem, 2vw, 1.4rem) auto 0;
}

.ax-evita__grid { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 720px)  { .ax-evita__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ax-evita__grid { grid-template-columns: repeat(3, 1fr); } }

.ax-evita__card {
    position: relative; display: flex; align-items: center; gap: clamp(16px, 2vw, 20px);
    background: var(--ax-paper); color: var(--ax-ink);
    border: 2px solid var(--ax-ink); border-top: 4px solid var(--ax-orange); border-radius: 0;
    padding: clamp(18px, 2.4vw, 24px); box-shadow: 8px 8px 0 var(--ax-orange);
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.ax-evita__card:hover { transform: translate(-5px, -5px); box-shadow: 13px 13px 0 var(--ax-orange); }
.ax-evita__num {
    position: absolute; top: 10px; right: 12px;
    font-family: var(--ax-font-mono); font-weight: 700; font-size: .7rem;
    letter-spacing: .14em; color: var(--ax-muted);
}

/* Badge tachado (efecto "prohibido / lo evitas") */
.ax-evita__badge {
    position: relative; flex-shrink: 0;
    width: clamp(58px, 7vw, 70px); height: clamp(58px, 7vw, 70px);
    display: grid; place-items: center;
    background: var(--ax-ink); border: 2px solid var(--ax-ink);
}
.ax-evita__badge i { color: var(--ax-paper); font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.ax-evita__badge::before {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(135deg, transparent calc(50% - 2.5px), var(--ax-orange) calc(50% - 2.5px),
                var(--ax-orange) calc(50% + 2.5px), transparent calc(50% + 2.5px));
}
.ax-evita__card:hover .ax-evita__badge { background: var(--ax-orange); border-color: var(--ax-orange); }
.ax-evita__card:hover .ax-evita__badge i { color: var(--ax-ink); }
.ax-evita__card:hover .ax-evita__badge::before {
    background: linear-gradient(135deg, transparent calc(50% - 2.5px), var(--ax-ink) calc(50% - 2.5px),
                var(--ax-ink) calc(50% + 2.5px), transparent calc(50% + 2.5px));
}

.ax-evita__body { min-width: 0; }
.ax-evita__name {
    font-family: var(--ax-font-display); text-transform: uppercase; line-height: .98;
    font-size: clamp(1.15rem, 1.9vw, 1.5rem); letter-spacing: .005em; color: var(--ax-ink);
}
.ax-evita__sol {
    font-family: var(--ax-font-body); color: var(--ax-muted);
    font-size: clamp(.86rem, 1vw, .95rem); line-height: 1.45; margin-top: 6px;
}

.ax-evita__foot { margin-top: clamp(2.25rem, 4vw, 3rem); text-align: center; }
.ax-evita__foot-line {
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-paper);
    font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.4; margin: 0 auto clamp(1.25rem, 2.5vw, 1.5rem); max-width: 40ch;
}
.ax-evita__foot-line em { font-style: italic; color: var(--ax-orange); }

@media (prefers-reduced-motion: reduce) {
    .ax-evita__card:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   BILLBOARD — Tafeta forro negra (producto más buscado)
   Sobre negro puro · MegaText "NEGRO" · split imagen + copy
   ════════════════════════════════════════════════════════════ */
.ax-billboard {
    position: relative; overflow: hidden;
    background: var(--ax-pure-black); color: var(--ax-paper);
    border-top: 3px solid var(--ax-orange); border-bottom: 3px solid var(--ax-orange);
}
.ax-billboard__bgword {
    position: absolute; top: 50%; right: -.03em; transform: translateY(-50%); z-index: 0;
    font-family: var(--ax-font-display); text-transform: uppercase;
    font-size: clamp(7rem, 26vw, 24rem); line-height: .8; letter-spacing: -.04em;
    color: rgba(250, 246, 238, 0.05); pointer-events: none; white-space: nowrap; user-select: none;
}
.ax-billboard .ax-container { position: relative; z-index: 1; }
.ax-billboard__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .ax-billboard__grid { grid-template-columns: 1fr 1fr; } }

/* wrapper sin recorte para que el sticker (burst) no se corte */
.ax-billboard__media { position: relative; }
@media (max-width: 899px) { .ax-billboard__media { order: 2; } }
.ax-billboard__frame {
    position: relative; border: 2px solid var(--ax-paper); overflow: hidden;
    box-shadow: 16px 16px 0 var(--ax-orange);
    aspect-ratio: 4 / 3; background: var(--ax-pure-black);
}
.ax-billboard__frame picture { display: block; width: 100%; height: 100%; }
.ax-billboard__frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); }
.ax-billboard__burst {
    position: absolute; top: -16px; left: clamp(10px, 3vw, 24px); z-index: 3;
    font-family: var(--ax-font-display); text-transform: uppercase; letter-spacing: .04em;
    font-size: clamp(.78rem, 1.4vw, 1rem); line-height: 1;
    background: var(--ax-yellow); color: var(--ax-ink);
    padding: 9px 15px; transform: rotate(-6deg); box-shadow: 4px 4px 0 var(--ax-ink);
}

.ax-billboard__kicker {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--ax-font-mono); font-size: .72rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ax-orange);
}
.ax-billboard__title {
    color: var(--ax-paper) !important; margin-top: clamp(1rem, 2vw, 1.4rem);
    font-size: clamp(2.6rem, 6.5vw, 5rem) !important; line-height: .9;
}
.ax-billboard__title em { color: var(--ax-orange); }
.ax-billboard__lede {
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-muted-dark);
    font-size: clamp(1.1rem, 1.9vw, 1.45rem); line-height: 1.45; max-width: 46ch;
    margin-top: clamp(1rem, 2vw, 1.5rem);
}
.ax-billboard__lede strong { color: var(--ax-paper); font-style: normal; font-weight: 700; }
.ax-billboard__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.ax-billboard__chips li {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ax-font-body); font-weight: 700; font-size: .8rem; letter-spacing: .02em;
    color: var(--ax-paper); border: 1px solid var(--ax-rule-on-dark); padding: 8px 14px;
}
.ax-billboard__chips i { color: var(--ax-orange); }
.ax-billboard__cta { margin-top: clamp(1.75rem, 3vw, 2.25rem); }

@media (prefers-reduced-motion: reduce) {
    .ax-billboard__media { box-shadow: 16px 16px 0 var(--ax-orange); }
}

/* ════════════════════════════════════════════════════════════
   STOCK · carrusel de telas destacadas en existencia
   Reutiliza las flechas de .ax-promo y el lenguaje del billboard.
════════════════════════════════════════════════════════════ */
.ax-stock {
    position: relative; overflow: hidden;
    background: var(--ax-pure-black); color: var(--ax-paper);
    border-top: 3px solid var(--ax-orange); border-bottom: 3px solid var(--ax-orange);
}
.ax-stock__bgword {
    position: absolute; top: 50%; right: -.03em; transform: translateY(-50%); z-index: 0;
    font-family: var(--ax-font-display); text-transform: uppercase;
    font-size: clamp(7rem, 26vw, 24rem); line-height: .8; letter-spacing: -.04em;
    color: rgba(250, 246, 238, 0.05); pointer-events: none; white-space: nowrap; user-select: none;
}
.ax-stock .ax-container { position: relative; z-index: 1; }
.ax-stock__head { max-width: 64ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.ax-stock__title {
    color: var(--ax-paper) !important; margin-top: clamp(.8rem, 1.6vw, 1.2rem);
    font-size: clamp(2.1rem, 5vw, 3.6rem) !important; line-height: .95;
}
.ax-stock__title em { color: var(--ax-orange); }

.ax-stock__carousel { position: relative; }
/* Bootstrap recorta .carousel-inner (overflow:hidden); damos aire para que
   el sello en top:-16px y la sombra sólida del marco no se corten. */
.ax-stock__carousel .carousel-inner { padding: 26px 0 20px; }
.ax-stock__carousel .carousel-indicators {
    position: static; display: flex; justify-content: center; flex-wrap: wrap;
    margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}

.ax-stockslide { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .ax-stockslide { grid-template-columns: 1fr 1fr; } }

.ax-stockslide__media { position: relative; }
@media (max-width: 899px) { .ax-stockslide__media { order: 2; } }
.ax-stockslide__frame {
    position: relative; border: 2px solid var(--ax-paper); overflow: hidden;
    box-shadow: 16px 16px 0 var(--ax-orange);
    aspect-ratio: 1 / 1; background: var(--ax-pure-black);
}
.ax-stockslide__frame picture { display: block; width: 100%; height: 100%; }
.ax-stockslide__frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.03); }
.ax-stockslide__stamp {
    position: absolute; top: -16px; left: clamp(10px, 3vw, 24px); z-index: 3;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ax-font-display); text-transform: uppercase; letter-spacing: .04em;
    font-size: clamp(.78rem, 1.4vw, 1rem); line-height: 1;
    background: var(--ax-yellow); color: var(--ax-ink);
    padding: 9px 15px; transform: rotate(-6deg); box-shadow: 4px 4px 0 var(--ax-ink);
}

@media (max-width: 899px) { .ax-stockslide__copy { order: 1; } }
.ax-stockslide__kicker {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--ax-font-mono); font-size: .72rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ax-orange);
}
.ax-stockslide__name {
    color: var(--ax-paper) !important; margin-top: clamp(1rem, 2vw, 1.4rem);
    font-size: clamp(2.4rem, 6vw, 4.4rem) !important; line-height: .9;
}
.ax-stockslide__name em { color: var(--ax-orange); }
.ax-stockslide__lede {
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-muted-dark);
    font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.45; max-width: 46ch;
    margin-top: clamp(1rem, 2vw, 1.4rem);
}
.ax-stockslide__lede strong { color: var(--ax-paper); font-style: normal; font-weight: 700; }
.ax-stockslide__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(1.25rem, 2.5vw, 1.6rem); }
.ax-stockslide__chips li {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ax-font-body); font-weight: 700; font-size: .8rem; letter-spacing: .02em;
    color: var(--ax-paper); border: 1px solid var(--ax-rule-on-dark); padding: 8px 14px;
}
.ax-stockslide__chips i { color: var(--ax-orange); }
.ax-stockslide__cta { margin-top: clamp(1.6rem, 3vw, 2.1rem); }

@media (prefers-reduced-motion: reduce) {
    .ax-stockslide__frame { box-shadow: 16px 16px 0 var(--ax-orange); }
}

/* ════════════════════════════════════════════════════════════
   COMPONENTES PROPIOS DE CIUDAD DE MÉXICO
   Bloques que el template base no contempla: badges con icono
   propio en "Evita problemas", trío editorial de México DF y el
   pliego Chiconcuac (drop cap + galería asimétrica).
   ════════════════════════════════════════════════════════════ */

/* ── Evita problemas · badge con icono PNG propio ─────────
   Los iconos de CDMX son trazo ink sobre transparente: el badge
   va en cream (no en ink) para que el icono se lea, conservando
   la barra diagonal naranja de "esto lo evitas".                 */
.ax-evita__badge--img { background: var(--ax-cream); border-color: var(--ax-ink); }
.ax-evita__badge--img img {
    width: 62%; height: 62%; object-fit: contain; display: block;
}
.ax-evita__card:hover .ax-evita__badge--img { background: var(--ax-orange); border-color: var(--ax-orange); }
/* sobre naranja el icono ink sigue legible; solo invertimos la barra */
.ax-evita__card:hover .ax-evita__badge--img::before {
    background: linear-gradient(135deg, transparent calc(50% - 2.5px), var(--ax-paper) calc(50% - 2.5px),
                var(--ax-paper) calc(50% + 2.5px), transparent calc(50% + 2.5px));
}

/* ── Trío editorial (Venta de telas en México DF) ─────────
   Tres columnas: imagen enmarcada + titular Anton + prosa.
   Sin card box — el marco de la foto es el único contenedor.     */
.ax-trio {
    display: grid; gap: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 720px)  { .ax-trio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ax-trio { grid-template-columns: repeat(3, 1fr); } }

.ax-trio__item { display: flex; flex-direction: column; }
.ax-trio__media { position: relative; }
.ax-trio__media picture { display: block; }
.ax-trio__media img {
    width: 100%; border: 2px solid var(--ax-ink);
    box-shadow: 10px 10px 0 var(--ax-ink);
    transition: transform var(--ax-motion-base) var(--ax-ease-out), box-shadow var(--ax-motion-base) var(--ax-ease-out);
}
.ax-trio__item:hover .ax-trio__media img { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 var(--ax-orange); }
.ax-trio__num {
    position: absolute; top: -14px; left: -10px; z-index: 2;
    font-family: var(--ax-font-display); font-size: clamp(.78rem, 1.3vw, .95rem);
    letter-spacing: .1em; line-height: 1; text-transform: uppercase;
    background: var(--ax-orange); color: var(--ax-paper); padding: 8px 13px;
    box-shadow: 3px 3px 0 var(--ax-ink);
}
.ax-trio__title {
    font-family: var(--ax-font-display); text-transform: uppercase; letter-spacing: .005em;
    font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1; color: var(--ax-ink);
    margin: clamp(1.4rem, 2.6vw, 1.9rem) 0 0;
}
.ax-trio__title em {
    font-family: var(--ax-font-accent); font-style: italic; font-weight: 400;
    text-transform: lowercase; color: var(--ax-orange); letter-spacing: -.025em;
}
.ax-trio__rule { height: 2px; background: var(--ax-ink); margin: 14px 0 0; }
.ax-trio__body {
    font-family: var(--ax-font-body); color: var(--ax-muted);
    font-size: clamp(.92rem, 1.05vw, 1rem); line-height: 1.65; margin: 14px 0 0;
}
.ax-trio__body + .ax-trio__body { margin-top: .9rem; }
.ax-trio__body strong { color: var(--ax-ink); font-weight: 700; }
.ax-trio__body a { color: var(--ax-purple); font-weight: 700; }
.ax-trio__foot { margin-top: clamp(2rem, 4vw, 2.75rem); }

@media (prefers-reduced-motion: reduce) {
    .ax-trio__item:hover .ax-trio__media img { transform: none; }
}


/* ── Registro @carta · membrete + prosa firmada ───────────
   "Tienda de telas CDMX": la marca habla en primera persona.
   Fondo cálido siempre (nunca ink) y medida corta de lectura.    */
.ax-postmark {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    font-family: var(--ax-font-mono); font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ax-muted); margin: 0;
}
.ax-postmark__sep { color: var(--ax-orange); }
.ax-letter { max-width: 64ch; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ax-letter__title { font-size: clamp(2.1rem, 4.6vw, 3.4rem) !important; line-height: .95; }
.ax-letter__sub {
    font-family: var(--ax-font-body); font-weight: 700; color: var(--ax-muted);
    font-size: .95rem; letter-spacing: .02em; margin: 12px 0 0;
}
.ax-letter__salutation {
    font-family: var(--ax-font-accent); font-style: italic; color: var(--ax-ink);
    font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.35; margin: clamp(1rem, 2vw, 1.4rem) 0 0;
}
.ax-letter__salutation em { font-style: italic; color: var(--ax-orange); }
.ax-letter__body {
    font-family: var(--ax-font-body); color: var(--ax-muted);
    font-size: clamp(.98rem, 1.15vw, 1.09rem); line-height: 1.75; margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}
.ax-letter__body + .ax-letter__body { margin-top: 1.15rem; }
.ax-letter__body strong { color: var(--ax-ink); font-weight: 700; }
.ax-letter__body a { color: var(--ax-purple); font-weight: 700; }
.ax-letter__sign {
    display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 3vw, 2rem);
    margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--ax-rule);
}
.ax-letter__signature {
    font-family: var(--ax-font-accent); font-style: italic; line-height: 1;
    font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--ax-orange); margin: 0;
}
.ax-letter__role {
    font-family: var(--ax-font-mono); font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ax-muted); margin: .35rem 0 0;
}

/* ── Telas más vendidas en CDMX ───────────────────────────
   @showcase · galería de 10 telas sobre cream. Reutiliza
   .ax-cardslider (grilla 4 · carrusel snap en móvil) y añade
   la línea "Uso principal" + el bloque de ayuda al final.      */
.ax-topsell { background: var(--ax-cream); border-top: 3px solid var(--ax-orange); }
.ax-topsell__head {
    display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 920px) { .ax-topsell__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.ax-topsell__head .ax-eyebrow--orange { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.ax-topsell__title { font-size: clamp(2.2rem, 5vw, 3.6rem) !important; line-height: .95; }
.ax-topsell__lede {
    font-family: var(--ax-font-body); color: var(--ax-muted);
    font-size: clamp(.95rem, 1.1vw, 1.0625rem); line-height: 1.7; max-width: 62ch; margin: 0;
}

/* Sobre cream la card blanca necesita contraste de sombra */
.ax-topsell .ax-card { box-shadow: 10px 10px 0 var(--ax-ink); }

/* Línea "Uso principal" — visible siempre, también en el carrusel móvil */
.ax-card__use {
    font-family: var(--ax-font-mono); font-size: .68rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ax-muted); line-height: 1.45;
    margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--ax-rule);
}
.ax-card__use b { color: var(--ax-orange); font-weight: 700; }
@media (max-width: 1023px) {
    .ax-cardslider > .ax-card .ax-card__use { font-size: .62rem; letter-spacing: .06em; padding-top: 8px; }
}

/* Bloque de ayuda "¿No sabes qué tela elegir?" */
.ax-topsell__help {
    flex-direction: column; align-items: flex-start;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem); gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 860px) {
    .ax-topsell__help { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(2rem, 4vw, 3rem); }
}
.ax-topsell__help-text {
    font-family: var(--ax-font-body); color: var(--ax-muted-dark);
    font-size: clamp(.9rem, 1.05vw, 1rem); line-height: 1.6; max-width: 62ch; margin: 12px 0 0;
}
.ax-topsell__help .ax-btn { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   FIX · márgenes de titulares vs. reset de la base
   `.ax-page h1…h4 { margin: 0 }` (0,1,1) gana por especificidad
   a las clases de componente (0,1,0), así que los titulares
   perdían su separación superior. En el trío eso hacía que la
   sombra sólida de 10px de la foto se montara sobre el título.
   Se re-declaran scopeadas bajo .ax-page (0,2,0) para ganar.
   ════════════════════════════════════════════════════════════ */
.ax-page .ax-trio__title    { margin: clamp(1.5rem, 2.8vw, 2rem) 0 0; }
.ax-page .ax-letter__sub    { margin: 12px 0 0; }
.ax-page .ax-feature__title { margin: 12px 0 0; }
.ax-page .ax-formca__title  { margin: 0 0 16px; }