/* ============================================================
   Intro Home · Arletex Design System v3.3
   --------------------------------------------------------------
   Manifesto editorial entre hero (ink) y carousel-nuevos-productos
   (paper). Es el bloque del H1 SEO: tipografía grita, fondo white
   respira, MegaText "TELAS" decorativo de fondo.

   Declaración:
     registro : @manifest
     apertura : ManifestoClaim (sin eyebrow, sin border-bottom)
     marco    : Bleed-edge (sin marco) + MegaText decorativo
     hover    : ghost-fill (links del body se rellenan orange)
   ============================================================ */

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

    position: relative;
    background: var(--in-white);
    color: var(--in-ink);
    padding: clamp(80px, 11vw, 144px) 0 clamp(80px, 11vw, 144px);
    font-family: 'Lato', system-ui, sans-serif;
    overflow: hidden;
    isolation: isolate;
}

/* MegaText decorativo "TELAS" — bleed editorial, ultra-tenue */
.arl-intro__mega {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Anton', 'Arial Narrow', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(240px, 38vw, 560px);
    line-height: .85;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px #f15a2921;
            text-stroke: 1.5px #f15a2921;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    white-space: nowrap;
    transform: translateY(-2%);
}

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

.arl-intro__inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
}

/* ---------- H1 ManifestoClaim — la frase empieza fría ------- */
.arl-intro__display {
    font-family: 'Anton', 'Arial Narrow', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(56px, 9vw, 132px) !important;
    line-height: .88;
    letter-spacing: -.018em;
    color: var(--in-ink);
    margin: 0;
    max-width: 18ch;
}
.arl-intro__display em {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    font-size: .96em;
    color: var(--in-orange);
    letter-spacing: -.025em;
    display: inline-block;
}

/* ---------- Lede Fraunces italic muted --------------------- */
.arl-intro__lede {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 32px);
    line-height: 1.35;
    color: var(--in-muted);
    margin: clamp(24px, 3vw, 36px) 0 0;
    max-width: 44ch;
    letter-spacing: -.005em;
}
.arl-intro__lede em {
    font-style: italic;
    color: var(--in-orange);
}

/* ---------- Body Lato + links ghost-fill -------------------- */
.arl-intro__body {
    font-family: 'Lato', sans-serif;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.7;
    color: var(--in-ink);
    margin: clamp(32px, 4vw, 48px) 0 0;
    max-width: 60ch;
    padding-top: clamp(24px, 3vw, 36px);
    border-top: var(--in-rule) solid var(--in-ink);
}
.arl-intro__body b {
    font-weight: 800;
    color: var(--in-ink);
}

/* Links — ghost-fill canónico: underline-tinted → fill orange en hover */
.arl-intro__body a {
    color: var(--in-ink);
    text-decoration: none;
    font-weight: 800;
    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-intro__body a:hover,
.arl-intro__body a:focus-visible {
    color: var(--in-white);
    background-image: linear-gradient(var(--in-orange), var(--in-orange));
    outline: none;
}
.arl-intro__body a:focus-visible {
    outline: 2px solid var(--in-ink);
    outline-offset: 2px;
}

/* ---------- Signoff editorial mono -------------------------- */
.arl-intro__signoff {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: clamp(36px, 4.5vw, 56px) 0 0;
}
.arl-intro__signoff-rule {
    flex: 0 0 56px;
    height: 2px;
    background: var(--in-orange);
    display: inline-block;
}
.arl-intro__signoff-mark {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--in-muted);
    line-height: 1;
}

/* ---------- Responsive -------------------------------------- */
@media (max-width: 991px) {
    .arl-intro__mega {
        font-size: clamp(200px, 48vw, 380px);
    }
    .arl-intro__display { max-width: none; }
}

@media (max-width: 575px) {
    .arl-intro { padding: 64px 0 64px; }
    .arl-intro__mega {
        font-size: clamp(160px, 60vw, 320px);
        -webkit-text-stroke-width: 1px;
                text-stroke-width: 1px;
    }
    .arl-intro__display { font-size: clamp(42px, 13vw, 80px); }
    .arl-intro__lede { font-size: clamp(18px, 5.2vw, 24px); }
    .arl-intro__body { line-height: 1.65; }
    .arl-intro__signoff-mark { font-size: 9.5px; letter-spacing: .18em; }
}

/* ---------- Reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .arl-intro__body a {
        transition: none !important;
    }
}