/* ============================================================
   Banner Tafeta Forro · Arletex Design System v3.3
   --------------------------------------------------------------
   Feature image-only banner. Va debajo de metodos-pago (ink).
   Section fondo white para respiro.

   Aspect ratios del asset:
     desktop ≥768px → 1900/400
     móvil  <768px  →  700/500

   Declaración:
     marco : Top-rule orange 4px + border ink 2px (card frame)
     hover : lift-orange (translate -4,-4 + shadow grows) +
             image scale 1.04
   ============================================================ */

.arl-bn {
    --bn-ink:        var(--ax-ink, #1F2530);
    --bn-paper:      var(--ax-paper, #FAF6EE);
    --bn-cream:      var(--ax-cream, #F2EDE4);
    --bn-white:      var(--ax-white, #FFFFFF);
    --bn-orange:     var(--ax-orange, #F15A29);
    --bn-orange-dp:  var(--ax-orange-deep, #B0401A);
    --bn-rule:       2px;

    position: relative;
    background: var(--bn-white);
    color: var(--bn-ink);
    padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px);
    font-family: 'Lato', system-ui, sans-serif;
    overflow: hidden;
    isolation: isolate;
}

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

/* ---------- Card — image-only con frame editorial ----------- */
.arl-bn__card {
    position: relative;
    display: block;
    background: var(--bn-cream);
    border: var(--bn-rule) solid var(--bn-ink);
    border-radius: 0;
    text-decoration: none;
    color: var(--bn-ink);
    isolation: isolate;
    overflow: hidden;
    box-shadow: 8px 8px 0 0 var(--bn-ink);
    transition: transform .26s ease, box-shadow .26s ease;
}
.arl-bn__card::before {
    /* Top-rule orange 4px interno — accent line de marca */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--bn-orange);
    z-index: 2;
    pointer-events: none;
}
.arl-bn__card:hover,
.arl-bn__card:focus-visible {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 0 var(--bn-orange);
    outline: none;
    text-decoration: none;
}
.arl-bn__card:focus-visible {
    box-shadow: 12px 12px 0 0 var(--bn-orange),
                0 0 0 3px var(--bn-ink);
}
.arl-bn__card:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 0 var(--bn-orange);
}

/* ---------- Imagen — aspect ratio responsivo ---------------- */
.arl-bn__pic {
    display: block;
    width: 100%;
    aspect-ratio: 1900 / 400;   /* desktop */
    overflow: hidden;
    background: var(--bn-cream);
}
.arl-bn__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .55s ease;
    filter: saturate(.95) brightness(.98);
}
.arl-bn__card:hover .arl-bn__pic img,
.arl-bn__card:focus-visible .arl-bn__pic img {
    transform: scale(1.04);
    filter: saturate(1.05) brightness(1);
}

/* ---------- Responsive — móvil cambia aspect ratio ---------- */
@media (max-width: 767px) {
    .arl-bn__pic { aspect-ratio: 700 / 500; }
}

@media (max-width: 575px) {
    .arl-bn { padding: 48px 0 56px; }
    .arl-bn__card {
        box-shadow: 6px 6px 0 0 var(--bn-ink);
    }
    .arl-bn__card:hover,
    .arl-bn__card:focus-visible {
        transform: translate(-3px, -3px);
        box-shadow: 9px 9px 0 0 var(--bn-orange);
    }
}

/* ---------- Reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .arl-bn__card,
    .arl-bn__pic img {
        transition: none !important;
    }
    .arl-bn__card:hover,
    .arl-bn__card:active,
    .arl-bn__card:hover .arl-bn__pic img {
        transform: none !important;
    }
}