/* ============================================================
   Sección Nosotros — bloque editorial Arletex
   Sigue DESIGN.md: Anton + Fraunces, esquinas rectas,
   borde superior 2px naranja, sombras sólidas offset,
   gesto hover translate(-3px,-3px) + sombra naranja.
   Combina patrón Eyebrow+Heading (5.6), banner editorial,
   prosa 2 columnas tipo periódico y stats row [bloque-11].
   ============================================================ */

/* ─── Sección Nosotros · sistema editorial ─────────────────────────── */
.arl-nos {
    --nos-ink:     #1F2530;
    --nos-orange:  #F15A29;
    --nos-surface: #FFFFFF;       /* fondo de sección (white-bg) */
    --nos-paper:   #FAF6EE;       /* superficie editorial — cards/stamp/hover */
    --nos-cream:   #F2EDE4;
    --nos-muted:   #6E6A60;
    --nos-rule:    rgba(14, 14, 14, 0.12);

    position: relative;
    background: var(--nos-surface);
    border-top: 2px solid var(--nos-orange);
    padding: clamp(56px, 8vw, 96px) 0;
    color: var(--nos-ink);
    font-family: 'Lato', 'Gandhi Sans', sans-serif;

    /* Grilla sutil de textura editorial (más tenue sobre blanco) */
    background-image:
        repeating-linear-gradient(0deg,  transparent 0 47px, rgba(14,14,14,.025) 47px 48px),
        repeating-linear-gradient(90deg, transparent 0 47px, rgba(14,14,14,.025) 47px 48px);
}

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

/* ─── Header editorial (eyebrow + heading) ─────────────────────────── */
.arl-nos__header {
    margin-bottom: clamp(32px, 5vw, 56px);
    max-width: 920px;
}

.arl-nos__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(.95rem, 1.05vw, 1.1rem);
    color: var(--nos-muted);
    margin-bottom: .9rem;
}

.arl-nos__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--nos-orange);
    border-radius: 0;
    transform: rotate(45deg);
}

.arl-nos__display {
    font-family: 'Anton', 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: clamp(2.4rem, 6.4vw, 5.4rem);
    line-height: .98;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--nos-ink);
    margin: 0;
}

.arl-nos__display em {
    display: inline-block;
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    color: var(--nos-orange);
    margin-top: .15em;
    letter-spacing: -.01em;
}

/* ─── Banner editorial full-width (pieza dramática) ────────────────── */
.arl-nos__banner {
    position: relative;
    margin: 0 0 clamp(40px, 6vw, 72px);
    background: var(--nos-cream);
    border: 2px solid var(--nos-ink);
    box-shadow: 14px 14px 0 var(--nos-ink);
    transition: transform .3s ease, box-shadow .3s ease;
    overflow: visible;
}

.arl-nos__banner:hover {
    transform: translate(-3px, -3px);
    box-shadow: 17px 17px 0 var(--nos-orange);
}

.arl-nos__banner-img {
    display: block;
    width: 100%;
    height: auto;
}

.arl-nos__stamp {
    position: absolute;
    top: -16px;
    left: clamp(20px, 3vw, 40px);
    z-index: 2;
    font-family: 'Anton', sans-serif;
    font-size: .9rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--nos-paper);
    background: var(--nos-orange);
    padding: 8px 14px;
    border: 2px solid var(--nos-ink);
}

/* ─── Prosa: lead full-width + 2 columnas tipo periódico ──────────── */
.arl-nos__prose {
    border-top: 2px solid var(--nos-ink);
    padding-top: 1.75rem;
    margin-bottom: clamp(48px, 7vw, 80px);
}

.arl-nos__lead {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
    line-height: 1.45;
    color: var(--nos-ink);
    max-width: 60ch;
    margin: 0 0 clamp(28px, 4vw, 44px);
    letter-spacing: -.005em;
}

.arl-nos__columns {
    column-count: 2;
    column-gap: clamp(32px, 4vw, 56px);
    column-rule: 1px solid var(--nos-rule);
}

.arl-nos__columns p {
    font-family: 'Lato', sans-serif;
    font-size: clamp(.95rem, 1.05vw, 1.0625rem);
    line-height: 1.75;
    color: var(--nos-ink);
    margin: 0 0 1.15rem;
    text-align: left;
    break-inside: avoid-column;
}

.arl-nos__columns p:last-child  { margin-bottom: 0; }
.arl-nos__columns p:first-child { margin-top: 0; }

.arl-nos__prose strong { font-weight: 700; color: var(--nos-ink); }

.arl-nos__link {
    color: var(--nos-ink);
    text-decoration: none;
    background-image: linear-gradient(var(--nos-orange), var(--nos-orange));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 2px;
    transition: background-size .3s ease, color .3s ease;
}
.arl-nos__link:hover {
    background-size: 100% 100%;
    color: var(--nos-paper);
}

/* ─── Stats row · 6 KPIs editoriales ───────────────────────────────── */
.arl-nos__stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
}

.arl-nos__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    padding: 1.4rem 1.1rem 1.25rem;
    background: var(--nos-paper);
    border: 1px solid var(--nos-ink);
    border-top: 2px solid var(--nos-ink);
    box-shadow: 8px 8px 0 var(--nos-ink);
    transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease, background .25s ease;
}

.arl-nos__stat:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0 var(--nos-orange);
    border-top-color: var(--nos-orange);
}

.arl-nos__stat-icon {
    font-size: 1.4rem;
    color: var(--nos-orange);
    margin-bottom: .25rem;
    line-height: 1;
}

.arl-nos__stat-num,
.arl-nos__stat-word {
    font-family: 'Anton', 'Roboto Condensed', sans-serif;
    font-weight: 400;
    line-height: .95;
    color: var(--nos-orange);
    text-transform: uppercase;
    letter-spacing: .005em;
}

.arl-nos__stat-num {
    font-size: clamp(2.4rem, 3.6vw, 3.4rem);
}

.arl-nos__stat-unit {
    font-size: .55em;
    margin-left: .05em;
    color: var(--nos-orange);
    opacity: .85;
}

.arl-nos__stat-word {
    font-size: clamp(1.5rem, 2vw, 2rem);
}

.arl-nos__stat-label {
    font-family: 'Lato', sans-serif;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nos-muted);
    line-height: 1.3;
    margin-top: .15rem;
}

/* ─── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .arl-nos__banner {
        box-shadow: 8px 8px 0 var(--nos-ink);
    }
    .arl-nos__banner:hover {
        box-shadow: 11px 11px 0 var(--nos-orange);
    }
    .arl-nos__columns {
        column-count: 1;
        column-rule: none;
    }
    .arl-nos__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .arl-nos {
        padding: 56px 0;
    }
    .arl-nos__display em {
        transform: rotate(-2deg);
    }
    .arl-nos__lead {
        font-size: 1.1rem;
    }
    .arl-nos__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .arl-nos__stat {
        padding: 1.1rem .9rem 1rem;
        box-shadow: 6px 6px 0 var(--nos-ink);
    }
    .arl-nos__stat:hover {
        box-shadow: 8px 8px 0 var(--nos-orange);
    }
}