/* ============================================================
   Servicios Venta · Arletex Design System v3.3
   --------------------------------------------------------------
   Mayoreo + Online — registro @dossier (default, catálogo).
   Dos cards horizontales con image+text, alternando dirección.

   Declaración:
     registro : @dossier
     apertura : NumberProtagonist mini por card (01 / 02)
     marco    : Card full-frame 2px ink + top-rule orange interno
     hover    : image scale 1.04 · ghost-fill side-shift en links ·
                chunky-press en CTA
   ============================================================ */

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

    position: relative;
    background: var(--sv-cream);
    color: var(--sv-ink);
    padding: clamp(72px, 9vw, 120px) 0 clamp(72px, 9vw, 120px);
    font-family: 'Lato', system-ui, sans-serif;
    overflow: hidden;
    isolation: isolate;
}

.arl-sv > .container {
    max-width: 1380px;
    padding-left:  clamp(20px, 4vw, 56px);
    padding-right: clamp(20px, 4vw, 56px);
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 32px);
    align-items: stretch;
}

/* ---------- Card compacto · vertical (image top + body) ----- */
.arl-sv__card {
    display: flex;
    flex-direction: column;
    background: var(--sv-white);
    border: var(--sv-rule) solid var(--sv-ink);
    border-radius: 0;
    isolation: isolate;
    overflow: hidden;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.arl-sv__card::before {
    /* Top-rule orange interno — accent line en la parte superior */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--sv-orange);
    z-index: 2;
    pointer-events: none;
}

/* ---------- Media block — imagen editorial ------------------ */
.arl-sv__media {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    background: var(--sv-cream);
    isolation: isolate;
    border-bottom: var(--sv-rule) solid var(--sv-ink);
}
.arl-sv__pic {
    display: block;
    width: 100%;
    aspect-ratio: 91 / 76;
    overflow: hidden;
}
.arl-sv__pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9) brightness(.98);
    transition: transform .7s cubic-bezier(.22,.61,.36,1), filter .55s ease;
}
.arl-sv__media:hover .arl-sv__pic img,
.arl-sv__media:focus-visible .arl-sv__pic img {
    transform: scale(1.04);
    filter: saturate(1.05) brightness(1);
}
.arl-sv__media:focus-visible {
    outline: 3px solid var(--sv-orange);
    outline-offset: -3px;
}

/* ---------- Body — eyebrow + h2 + text + CTA ---------------- */
.arl-sv__body {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.2vw, 16px);
    padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px) clamp(22px, 2.4vw, 28px);
    flex: 1;
    min-width: 0;
}

.arl-sv__eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin: 0;
    line-height: 1;
    flex-wrap: wrap;
}
.arl-sv__eyebrow-stamp {
    display: inline-flex;
    align-items: center;
    background: var(--sv-ink);
    color: var(--sv-paper);
    padding: 7px 12px 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 3px 3px 0 var(--sv-orange);
}
.arl-sv__eyebrow-tx {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sv-muted);
    line-height: 1;
}

/* H2 — Anton uppercase, h2 wrapping <a> preservado por SEO */
.arl-sv__title {
    font-family: 'Anton', 'Arial Narrow', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: .96;
    letter-spacing: -.012em;
    color: var(--sv-ink);
    margin: 0;
}
.arl-sv__title a,
.arl-sv__title a strong {
    color: inherit;
    text-decoration: none;
    font-weight: 400;
    transition: color .22s ease;
}
.arl-sv__title a:hover,
.arl-sv__title a:focus-visible {
    color: var(--sv-orange);
    text-decoration: none;
    outline: none;
}

/* Body text — Lato compacto, links ghost-fill side-shift */
.arl-sv__text {
    font-family: 'Lato', sans-serif;
    font-size: clamp(13px, .95vw, 14.5px);
    line-height: 1.6;
    color: var(--sv-ink);
    margin: 0;
}

/* Links del body — underline orange-tinted → fill completo on hover */
.arl-sv__text a {
    color: var(--sv-ink);
    text-decoration: none;
    background-image: linear-gradient(transparent 62%, rgba(241, 90, 41, .32) 62%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 1px 3px;
    transition: background-image .22s ease, color .22s ease;
}
.arl-sv__text a strong {
    font-weight: 800;
    color: inherit;
}
.arl-sv__text a:hover,
.arl-sv__text a:focus-visible {
    color: var(--sv-paper);
    background-image: linear-gradient(var(--sv-orange), var(--sv-orange));
    outline: none;
    text-decoration: none;
}
.arl-sv__text a:focus-visible {
    outline: 2px solid var(--sv-ink);
    outline-offset: 2px;
}

/* CTA chunky press — botón ink compacto con flecha orange */
.arl-sv__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sv-paper);
    text-decoration: none;
    padding: 12px 16px 11px;
    background: var(--sv-ink);
    border: var(--sv-rule) solid var(--sv-ink);
    border-radius: 0;
    line-height: 1;
    margin-top: auto;
    box-shadow: 5px 5px 0 0 var(--sv-orange);
    transition: transform .22s ease, box-shadow .22s ease,
                background .22s ease, color .22s ease;
}
.arl-sv__cta i {
    color: var(--sv-orange);
    font-size: 12px;
    transition: transform .22s ease, color .22s ease;
}
.arl-sv__cta:hover,
.arl-sv__cta:focus-visible {
    background: var(--sv-orange);
    color: var(--sv-ink);
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 0 var(--sv-ink);
    outline: none;
    text-decoration: none;
}
.arl-sv__cta:hover i,
.arl-sv__cta:focus-visible i {
    color: var(--sv-ink);
    transform: translateX(3px);
}
.arl-sv__cta:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--sv-ink);
}

/* ---------- Responsive -------------------------------------- */
@media (max-width: 720px) {
    /* Stack a 1 columna en móvil */
    .arl-sv > .container {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 575px) {
    .arl-sv { padding: 56px 0 64px; }
    .arl-sv__title { font-size: clamp(20px, 6vw, 26px); }
    .arl-sv__eyebrow { gap: 8px; }
    .arl-sv__eyebrow-tx { font-size: 10px; }
    .arl-sv__cta {
        font-size: 10.5px;
        padding: 11px 14px 10px;
        letter-spacing: .14em;
    }
}

/* ---------- Reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .arl-sv__pic img,
    .arl-sv__cta,
    .arl-sv__cta i,
    .arl-sv__title a,
    .arl-sv__text a {
        transition: none !important;
    }
    .arl-sv__media:hover .arl-sv__pic img,
    .arl-sv__cta:hover,
    .arl-sv__cta:hover i,
    .arl-sv__cta:active {
        transform: none !important;
    }
}