/* ============================================================
   Comparativa Material · Arletex Design System
   --------------------------------------------------------------
   Díptico "¿Algodón o Poliéster?" — interlink editorial.
   Portado desde el TSG de Xoxtla (registro @showcase sobre ink).
   CSS autocontenido y scopeado bajo .arl-duo para no filtrar
   estilos al resto del home. Tokens locales con fallback a los
   --ax-* del sistema (cada partial del home define los suyos).

   Declaración:
     registro : @showcase  (vitrina audaz sobre fondo ink)
     apertura : eyebrow naranja + título display con dúo em
     marco    : bgword gigante "MATERIAL" detrás + moneda "o"
     hover    : ink-flood + zoom + barra diagonal de acento
   ============================================================ */

.arl-duo {
    --dm-ink:          var(--ax-ink, #1F2530);
    --dm-paper:        var(--ax-paper, #FAF6EE);
    --dm-orange:       var(--ax-orange, #F15A29);
    --dm-orange-dp:    var(--ax-orange-deep, #B0401A);
    --dm-purple:       var(--ax-purple, #6A52A2);
    --dm-purple-dp:    var(--ax-purple-deep, #4C3A75);
    --dm-muted-dark:   var(--ax-muted-dark, #A8A39A);
    --dm-pure-black:   var(--ax-pure-black, #0E0E0E);
    --dm-rule-on-dark: var(--ax-rule-on-dark, rgba(250, 246, 238, 0.16));

    --dm-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --dm-font-accent:  var(--ax-font-accent, 'Fraunces', 'Georgia', serif);
    --dm-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --dm-font-mono:    var(--ax-font-mono, 'JetBrains Mono', 'SF Mono', ui-monospace, monospace);

    --dm-motion-fast: 120ms;
    --dm-motion-base: 200ms;
    --dm-motion-slow: 320ms;
    --dm-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

    position: relative;
    background: var(--dm-ink);
    color: var(--dm-paper);
    padding: clamp(64px, 8vw, 96px) 0;
    font-family: var(--dm-font-body);
    overflow: hidden;
    isolation: isolate;
}
.arl-duo *,
.arl-duo *::before,
.arl-duo *::after { box-sizing: border-box; }
.arl-duo a { text-decoration: none; color: inherit; }
.arl-duo h2 { margin: 0; }

.arl-duo > .container {
    position: relative;
    z-index: 1;
    max-width: 1380px;
    padding-left:  clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
}

/* ── Palabra de fondo gigante ───────────────────────────── */
.arl-duo__bgword {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0;
    font-family: var(--dm-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;
}

/* ── Header ─────────────────────────────────────────────── */
.arl-duo__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.arl-duo__eyebrow {
    display: inline-block; font-family: var(--dm-font-body); font-weight: 700;
    font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 9999px; line-height: 1;
    background: var(--dm-orange); color: var(--dm-paper);
    margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
.arl-duo__title {
    font-family: var(--dm-font-display); font-weight: 400; text-transform: uppercase;
    letter-spacing: -.01em; color: var(--dm-paper);
    font-size: clamp(2.4rem, 5.4vw, 4rem) !important; line-height: .95;
}
.arl-duo__title em {
    font-family: var(--dm-font-accent); font-style: italic; font-weight: 400;
    text-transform: lowercase; letter-spacing: -.025em; color: var(--dm-orange);
    display: inline-block;
}
.arl-duo__title em:nth-of-type(2) { color: var(--dm-purple); }
.arl-duo__lede {
    font-family: var(--dm-font-accent); font-style: italic; color: var(--dm-muted-dark);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.5; max-width: 52ch;
    margin: clamp(1rem, 2vw, 1.4rem) 0 0;
}

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

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

.arl-duo__media { position: absolute; inset: 0; z-index: 0; }
.arl-duo__media picture { display: block; width: 100%; height: 100%; }
.arl-duo__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--dm-motion-slow) var(--dm-ease-out), filter var(--dm-motion-slow) var(--dm-ease-out);
    filter: saturate(.92) contrast(1.02);
}
.arl-duo__card:hover .arl-duo__media img { transform: scale(1.07); filter: saturate(1.05) contrast(1.05); }
/* velo oscuro para legibilidad del texto */
.arl-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(--dm-motion-base) var(--dm-ease-out);
}
/* barra diagonal de acento que barre en hover */
.arl-duo__card::before {
    content: ''; position: absolute; z-index: 1; top: -10%; bottom: -10%; left: -38%; width: 34%;
    background: var(--dm-orange); transform: skewX(-12deg) translateX(-120%);
    opacity: .92; pointer-events: none;
    transition: transform var(--dm-motion-slow) var(--dm-ease-out);
}
.arl-duo__card--poliester::before { background: var(--dm-purple); }
.arl-duo__card:hover::before { transform: skewX(-12deg) translateX(40%); }

.arl-duo__index {
    position: absolute; top: clamp(16px, 2vw, 22px); right: clamp(16px, 2vw, 22px); z-index: 3;
    font-family: var(--dm-font-mono); font-weight: 700; font-size: clamp(.85rem, 1.4vw, 1.1rem);
    letter-spacing: .16em; color: var(--dm-paper);
    border: 1.5px solid var(--dm-rule-on-dark); padding: 6px 10px; line-height: 1;
    background: rgba(14,14,14,.35); backdrop-filter: blur(2px);
}
.arl-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;
}
.arl-duo__kicker {
    display: inline-block; font-family: var(--dm-font-body); font-weight: 700;
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--dm-paper); background: var(--dm-orange); padding: 5px 12px; line-height: 1; margin-bottom: 12px;
}
.arl-duo__card--poliester .arl-duo__kicker { background: var(--dm-purple); }
.arl-duo__mega {
    font-family: var(--dm-font-display); text-transform: uppercase;
    font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: .86; letter-spacing: -.01em;
    color: var(--dm-paper);
}
.arl-duo__desc {
    font-family: var(--dm-font-body); color: var(--dm-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;
}
.arl-duo__ctab {
    display: inline-flex; align-items: center; gap: 12px; margin-top: 18px;
    font-family: var(--dm-font-body); font-weight: 700; font-size: .82rem;
    letter-spacing: .06em; text-transform: uppercase;
    background: var(--dm-paper); color: var(--dm-ink); padding: 13px 20px;
    box-shadow: 0 5px 0 rgba(14,14,14,.55);
    transition: transform var(--dm-motion-fast) var(--dm-ease-out), box-shadow var(--dm-motion-fast) var(--dm-ease-out), background var(--dm-motion-fast) var(--dm-ease-out), color var(--dm-motion-fast) var(--dm-ease-out);
}
.arl-duo__ctab i { transition: transform var(--dm-motion-base) var(--dm-ease-out); }
.arl-duo__card:hover .arl-duo__ctab { background: var(--dm-orange); color: var(--dm-paper); transform: translateY(-2px); box-shadow: 0 7px 0 var(--dm-orange-dp); }
.arl-duo__card--poliester:hover .arl-duo__ctab { background: var(--dm-purple); color: var(--dm-paper); box-shadow: 0 7px 0 var(--dm-purple-dp); }
.arl-duo__card:hover .arl-duo__ctab i { transform: translateX(5px); }

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

/* ── Moneda "o" central ─────────────────────────────────── */
.arl-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(--dm-paper); border: 3px solid var(--dm-orange);
    font-family: var(--dm-font-accent); font-style: italic; color: var(--dm-ink);
    font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1;
    box-shadow: 0 0 0 6px var(--dm-ink);
    pointer-events: none;
}
/* La moneda solo aparece centrada cuando hay dos columnas */
@media (max-width: 759.98px) { .arl-duo__vs { display: none; } }

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