/* ============================================================
   Envíos a toda la república · Arletex Design System v3.3
   --------------------------------------------------------------
   Value-props de servicio + logo de marca + CTA Pedidos Especiales.

   Declaración:
     registro : @technical  (control panel · garantías de servicio)
     apertura : LabelLateral (rail mono vertical + border-top orange)
     marco    : Side-rule (3px orange a la izquierda del contenido)
     hover    : side-shift en spec-cards · lift-orange en banners
     fondo    : white (base) con sub-bloques cream

   Mono protagonista (índices S/01…S/04 como "denominación" postal).
   Iconos grandes (traen su propio círculo morado). Spec-cards con
   tratamiento POSTAGE STAMP: borde perforado (mask 4 lados +
   mask-composite intersect), relleno cream, keyline impreso interior
   y sombra sólida offset — la metáfora del sello refuerza "Envíos·MX".
   Conserva el logo "a un click de distancia" (identidad de marca) y
   la imagen de pedidos especiales.
   ============================================================ */

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

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

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

/* ---------- Marco Side-rule · barra orange izquierda --------- */
.arl-en__inner {
    position: relative;
    padding-left: clamp(18px, 2.4vw, 32px);
}
.arl-en__inner::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 3px;
    background: var(--en-orange);
}

/* ============================================================
   Apertura LabelLateral · rail mono vertical + título
   ============================================================ */
.arl-en__head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(14px, 2.4vw, 32px);
    align-items: start;
    margin-bottom: clamp(28px, 4vw, 48px);
    padding-top: clamp(14px, 2vw, 22px);
    border-top: var(--en-rule) solid var(--en-orange);
}
.arl-en__rail {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding-right: clamp(2px, .6vw, 8px);
    align-self: stretch;
}
.arl-en__rail span {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--en-muted);
}
.arl-en__head-body { min-width: 0; }
.arl-en__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 clamp(8px, 1vw, 14px);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--en-muted);
}
.arl-en__eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--en-orange);
}
.arl-en__title {
    font-family: 'Anton', 'Arial Narrow', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(30px, 5vw, 58px);
    line-height: .92;
    letter-spacing: -.015em;
    color: var(--en-ink);
    margin: 0;
}
.arl-en__title em {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: -.025em;
    color: var(--en-orange);
}

/* ============================================================
   Main · 2 columnas (props 2×2 · imagen pedidos especiales)
   ============================================================ */
.arl-en__main {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(16px, 2.2vw, 28px);
    align-items: start;
}

/* Columna derecha · banner pedidos + logo apilados */
.arl-en__aside {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8vw, 22px);
}

/* ---------- Grid de spec-cards (2×2) ------------------------ */
.arl-en__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.6vw, 20px);
}

/* ============================================================
   POSTAGE STAMP — perforación compartida (cards + banner)
   --------------------------------------------------------------
   4 radial-gradients en mask (uno por borde) + mask-composite
   intersect (Baseline 2023): cada capa es opaca salvo los dientes
   de un lado; al intersectarlas sólo se recortan las perforaciones
   de los 4 bordes y el centro queda intacto. Fondo cream sobre la
   sección white → las perforaciones revelan blanco como los dientes
   de una estampilla. La metáfora del sello refuerza "Envíos · MX".
   ============================================================ */
.arl-en__card,
.arl-en__media {
    --perf-r: 6px;     /* radio de la perforación */
    --perf-g: 15px;    /* separación entre dientes */
    -webkit-mask:
        radial-gradient(var(--perf-r) at 50% 0,    #0000 97%, #000) 0 0    / var(--perf-g) 100% repeat-x,
        radial-gradient(var(--perf-r) at 50% 100%, #0000 97%, #000) 0 100% / var(--perf-g) 100% repeat-x,
        radial-gradient(var(--perf-r) at 0 50%,    #0000 97%, #000) 0 0    / 100% var(--perf-g) repeat-y,
        radial-gradient(var(--perf-r) at 100% 50%, #0000 97%, #000) 100% 0 / 100% var(--perf-g) repeat-y;
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(var(--perf-r) at 50% 0,    #0000 97%, #000) 0 0    / var(--perf-g) 100% repeat-x,
        radial-gradient(var(--perf-r) at 50% 100%, #0000 97%, #000) 0 100% / var(--perf-g) 100% repeat-x,
        radial-gradient(var(--perf-r) at 0 50%,    #0000 97%, #000) 0 0    / 100% var(--perf-g) repeat-y,
        radial-gradient(var(--perf-r) at 100% 50%, #0000 97%, #000) 100% 0 / 100% var(--perf-g) repeat-y;
    mask-composite: intersect;
}

/* ---------- Spec-card · estampilla pequeña (cream + keyline) - */
.arl-en__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(12px, 1.4vw, 18px);
    background: var(--en-cream);
    border: 0;
    border-radius: 0;
    padding: clamp(28px, 3vw, 38px) clamp(24px, 2.6vw, 32px);
    filter: drop-shadow(3px 3px 0 rgba(31, 37, 48, .16));
    transition: transform .22s ease, filter .22s ease;
}
/* Keyline interior — marco impreso de la estampilla */
.arl-en__card::before {
    content: "";
    position: absolute;
    inset: 11px;
    border: 1.5px solid rgba(31, 37, 48, .22);
    pointer-events: none;
    transition: border-color .22s ease;
}
.arl-en__card:hover,
.arl-en__card:focus-within {
    transform: translateX(6px);
    filter: drop-shadow(5px 5px 0 var(--en-orange));
}
.arl-en__card:hover::before,
.arl-en__card:focus-within::before { border-color: var(--en-orange); }

/* Denominación del sello — esquina superior derecha (estilo valor postal) */
.arl-en__index {
    position: absolute;
    top: clamp(18px, 2vw, 24px);
    right: clamp(20px, 2.2vw, 28px);
    z-index: 2;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--en-orange);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* icono grande — la imagen trae su propio círculo morado */
.arl-en__icon {
    display: inline-flex;
    text-decoration: none;
    line-height: 0;
}
.arl-en__icon img {
    display: block;
    width: clamp(80px, 8vw, 104px);
    height: auto;
    transition: transform .25s ease;
}
.arl-en__icon:hover img,
.arl-en__icon:focus-visible img { transform: scale(1.06); }
.arl-en__icon:focus-visible {
    outline: 3px solid var(--en-orange);
    outline-offset: 4px;
}

.arl-en__name {
    font-family: 'Anton', 'Arial Narrow', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(16px, 1.5vw, 21px);
    line-height: 1.05;
    letter-spacing: -.005em;
    color: var(--en-ink);
    margin: 0;
}
.arl-en__name strong { font-weight: 400; color: inherit; }
.arl-en__name a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(transparent 60%, rgba(241, 90, 41, .32) 60%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: background-image .22s ease, color .22s ease;
}
.arl-en__name a:hover,
.arl-en__name a:focus-visible {
    color: var(--en-orange);
    background-image: linear-gradient(transparent 60%, rgba(241, 90, 41, 0) 60%);
    outline: none;
    text-decoration: none;
}

/* ============================================================
   Banner pedidos especiales · imagen completa clickable (7/5)
   La imagen ya es un CTA autocontenido (título + botón + logo),
   por eso no lleva footer: se muestra completa, sin recortar.
   ============================================================ */
.arl-en__media {
    display: block;
    position: relative;
    background: var(--en-cream);
    padding: clamp(12px, 1.4vw, 18px);
    text-decoration: none;
    overflow: hidden;
    line-height: 0;
    /* sombra sólida que respeta el contorno dentado (igual que cards) */
    filter: drop-shadow(3px 3px 0 rgba(31, 37, 48, .16));
    transition: transform .25s ease, filter .25s ease;
}
/* Keyline interior — marco impreso del sello grande */
.arl-en__media::before {
    content: "";
    position: absolute;
    inset: clamp(7px, .9vw, 11px);
    border: 1.5px solid rgba(31, 37, 48, .22);
    pointer-events: none;
    z-index: 2;
    transition: border-color .22s ease;
}
.arl-en__media:hover,
.arl-en__media:focus-visible {
    outline: none;
    transform: translate(-4px, -4px);
    filter: drop-shadow(6px 6px 0 var(--en-orange));
}
.arl-en__media:hover::before,
.arl-en__media:focus-visible::before { border-color: var(--en-orange); }
.arl-en__media picture { display: block; }
.arl-en__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 7 / 5;        /* 700×500 — se ve completa, sin crop */
    object-fit: contain;
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.arl-en__media:hover img,
.arl-en__media:focus-visible img { transform: scale(1.03); }

/* ============================================================
   Logo de marca "a un click de distancia" · bajo el banner.
   Tratado como ETIQUETA DE ENVÍO: borde dashed ("recortar aquí")
   que dialoga con la perforación de las estampillas — el lado
   derecho de la sección lee como sello + etiqueta de paquetería.
   ============================================================ */
.arl-en__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 32px);
    background: var(--en-white);
    border: 2px dashed var(--en-ink);
    border-left: 4px solid var(--en-orange);
    line-height: 0;
}
.arl-en__logo img {
    display: block;
    width: 100%;
    max-width: clamp(240px, 30vw, 380px);
    height: auto;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 859px) {
    .arl-en__main { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 575px) {
    .arl-en { padding: 56px 0; }
    .arl-en__head { gap: 12px; }
    .arl-en__rail { writing-mode: horizontal-tb; transform: none; padding: 0; }
    .arl-en__grid { gap: 12px; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .arl-en__card,
    .arl-en__card::before,
    .arl-en__icon img,
    .arl-en__media,
    .arl-en__media::before,
    .arl-en__media img,
    .arl-en__name a {
        transition: none !important;
    }
    .arl-en__card:hover,
    .arl-en__card:focus-within,
    .arl-en__icon:hover img,
    .arl-en__media:hover,
    .arl-en__media:focus-visible,
    .arl-en__media:hover img {
        transform: none !important;
    }
}