/* =========================================================
   ALFA SPORT — HOME
   ========================================================= */

.alfa-home {
    width: 100%;
    overflow: hidden;

    background: var(--alfa-bg);
}


/* =========================================================
   HERO
   ========================================================= */

.alfa-hero {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 88vh;

    background: var(--alfa-bg-dark);

    overflow: hidden;
}

.alfa-hero__background {
    position: absolute;
    inset: 0;

    z-index: 0;
}

.alfa-hero__background-img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.alfa-hero__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(5, 10, 8, 0.93) 0%,
            rgba(5, 10, 8, 0.82) 30%,
            rgba(5, 10, 8, 0.38) 58%,
            rgba(5, 10, 8, 0.05) 100%
        );
}

.alfa-hero .alfa-container {
    position: relative;
    z-index: 2;
}

.alfa-hero__content {
    width: 100%;
    max-width: 750px;

    padding:
        85px
        0
        95px;
}


/* eyebrow */

.alfa-hero__eyebrow {
display: block;
    margin-bottom: 14px;
    color: rgb(255 255 255 / 47%);
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* H1 */

.alfa-hero__title {
    margin:
        0
        0
        7px;

    color: #fff;

    font-family: var(--alfa-font-display);

    font-size: clamp(52px, 5vw, 60px);
    font-weight: 700;
    line-height: 0.98;

    letter-spacing: -0.025em;
}


/* subtitle */

.alfa-hero__subtitle {
    margin:
        0
        0
        22px;
    color: #fff;
    font-family: var(--alfa-font-display);

    font-size: clamp(29px, 2.5vw, 30px);
    font-weight: 700;
    line-height: 1.18;

    letter-spacing: -0.015em;
}


/* paragraph */

.alfa-hero__text {
    max-width: 510px;

    margin:
        0
        0
        31px;

    color: rgba(255,255,255,0.82);

    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}


/* button */

.alfa-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 50px;

    padding:
        0
        23px;

    background: var(--alfa-green);
    color: #fff;

    border:
        1px
        solid
        rgba(255,255,255,0.24);

    border-radius: var(--alfa-radius-sm);

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.035em;

    transition:
        background-color var(--alfa-transition),
        transform var(--alfa-transition),
        border-color var(--alfa-transition);
}

.alfa-hero__button svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.alfa-hero__button:hover {
    background: var(--alfa-green-soft);

    border-color: rgba(255,255,255,0.45);

    transform: translateY(-2px);
}


/* =========================================================
   TRUST BAR
   ========================================================= */

.alfa-trust {
    position: relative;
    z-index: 5;

    background:
        linear-gradient(
            90deg,
            var(--alfa-green-deep),
            var(--alfa-green)
        );

    color: #fff;
}

.alfa-trust__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    min-height: 112px;
}

.alfa-trust__item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 18px;

    padding:
        25px
        30px;
}

.alfa-trust__item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 29px;
    right: 0;
    bottom: 29px;

    width: 1px;

    background:
        rgba(255,255,255,0.16);
}


/* icon */

.alfa-trust__icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    color: #fff;
}

.alfa-trust__icon svg {
    width: 38px;
    height: 38px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* text */

.alfa-trust__content {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.alfa-trust__content strong {
    color: #fff;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
}

.alfa-trust__content span {
    color: rgba(255,255,255,0.7);

    font-size: 12px;
    font-weight: 400;
}


/* =========================================================
   GENERIC HOME SECTION HEADING
   ========================================================= */

.alfa-home-section-heading {
    display: flex;
    align-items: center;

    gap: 22px;

    margin-bottom: 30px;
}

.alfa-home-section-heading__title {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 11px;
}

.alfa-home-section-heading h2 {
    margin: 0;

    color: var(--alfa-text-dark);

    font-family: var(--alfa-font-display);

    font-size: 27px;
    font-weight: 700;
    line-height: 1.2;

    text-transform: uppercase;
}

.alfa-home-section-heading__clover {
    color: var(--alfa-green);

    font-size: 19px;
    line-height: 1;
}

.alfa-home-section-heading__line {
    flex: 1;

    height: 1px;

    background: var(--alfa-border);
}

.alfa-home-section-heading__link {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 7px;

    color: var(--alfa-text-dark);

    font-size: 12px;
    font-weight: 600;

    transition: color var(--alfa-transition-fast);
}

.alfa-home-section-heading__link svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
}

.alfa-home-section-heading__link:hover {
    color: var(--alfa-green);
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.alfa-home-categories {
    background: var(--alfa-bg);
}

.alfa-home-categories__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


/* card */

.alfa-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 150px;

    padding: 22px;

    background:
        rgba(255,255,255,0.38);

    color: var(--alfa-text-dark);

    border:
        1px
        solid
        var(--alfa-border);

    border-radius: var(--alfa-radius-md);

    transition:
        background-color var(--alfa-transition),
        border-color var(--alfa-transition),
        color var(--alfa-transition),
        transform var(--alfa-transition),
        box-shadow var(--alfa-transition);
}

.alfa-category-card:hover {
    background: #fff;

    color: var(--alfa-green);

    border-color:
        rgba(0,60,50,0.3);

    box-shadow: var(--alfa-shadow-sm);

    transform: translateY(-3px);
}

.alfa-category-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100px;
    height: 100px;
}

.alfa-category-card__icon svg {
    width: 50px;
    height: 50px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.alfa-category-card span {
    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
}


/* =========================================================
   PART FINDER — CTA FULL WIDTH
   Fondo a todo el ancho / contenido máx. 1440px
   ========================================================= */

.alfa-part-finder {
    position: relative;
    width: 100%;
    min-height: 350px;
    background: var(--alfa-bg-soft);
    border-top: 1px solid var(--alfa-border);
    border-bottom: 1px solid var(--alfa-border);
    overflow: hidden;
}

.alfa-part-finder > .alfa-container {
    position: relative;
    z-index: 2;
    min-height: 350px;
    display: flex;
    align-items: center;
}

.alfa-part-finder__background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 58%;
    z-index: 0;
}

.alfa-part-finder__background::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            var(--alfa-bg-soft) 0%,
            rgba(242,239,232,0.88) 15%,
            rgba(242,239,232,0.2) 65%,
            rgba(242,239,232,0.05) 100%
        );
}

.alfa-part-finder__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alfa-part-finder__content {
    position: relative;
    z-index: 2;
    width: 52%;
    max-width: 600px;
    padding: 64px 0;
}

.alfa-part-finder__eyebrow,
.alfa-brand-banner__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--alfa-red);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.alfa-part-finder h2 {
    margin: 0 0 17px;
    color: var(--alfa-text-dark);
    font-family: var(--alfa-font-display);
    font-size: clamp(31px, 3vw, 43px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.alfa-part-finder p {
    max-width: 500px;
    margin: 0 0 26px;
    color: var(--alfa-text-soft);
    font-size: 15px;
    line-height: 1.7;
}

.alfa-part-finder .alfa-btn svg {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}


/* =========================================================
   BRAND BANNER — CTA FULL WIDTH
   Fondo a todo el ancho / contenido máx. 1440px
   ========================================================= */

.alfa-brand-banner {
    position: relative;
    width: 100%;
    background:
        linear-gradient(
            120deg,
            #111411,
            #090b09
        );
    overflow: hidden;
}

.alfa-brand-banner > .alfa-container {
    position: relative;
    z-index: 2;
}

.alfa-brand-banner__inner {
    position: relative;
    display: grid;
    grid-template-columns: 48% 52%;
    min-height: 360px;
    overflow: hidden;
}

/* image */

.alfa-brand-banner__image {
    position: relative;
    min-height: 360px;
    /* La imagen llega visualmente al borde izquierdo de la pantalla */
    margin-left: calc((100vw - min(100vw, var(--alfa-container))) / -2);
}

.alfa-brand-banner__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(9,11,9,0.05),
            rgba(9,11,9,0.72)
        );
}

.alfa-brand-banner__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* content */

.alfa-brand-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    max-width: 620px;
    padding: 55px 0 55px 70px;
}

.alfa-brand-banner__eyebrow {
    color: rgba(255,255,255,0.52);
}

.alfa-brand-banner__content h2 {
    margin: 0 0 16px;
    color: #fff;
    font-family: var(--alfa-font-display);
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.alfa-brand-banner__content p {
    max-width: 480px;
    margin: 0 0 24px;
    color: rgba(255,255,255,0.68);
    font-size: 14px;
    line-height: 1.7;
}

/* button */

.alfa-brand-banner__button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    background: var(--alfa-green);
    color: #fff;
    border-radius: var(--alfa-radius-sm);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transition:
        background-color var(--alfa-transition),
        transform var(--alfa-transition);
}

.alfa-brand-banner__button:hover {
    background: var(--alfa-green-soft);
    transform: translateY(-2px);
}

.alfa-brand-banner__button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* watermark */

.alfa-brand-banner__watermark {
    position: absolute;
    top: 50%;
    right: -15px;
    z-index: 1;
    color: rgba(255,255,255,0.025);
    font-family: var(--alfa-font-display);
    font-size: 190px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}


/* =========================================================
   VALUES
   ========================================================= */

.alfa-values {

    background: var(--alfa-bg);
}

.alfa-values__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}

.alfa-value {
    position: relative;

    display: flex;
    align-items: center;

    gap: 18px;

    padding:
        10px
        30px;
}

.alfa-value:first-child {
    padding-left: 0;
}

.alfa-value:last-child {
    padding-right: 0;
}

.alfa-value:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 8px;
    right: 0;
    bottom: 8px;

    width: 1px;

    background: var(--alfa-border);
}

.alfa-value__icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    color: var(--alfa-green);
}

.alfa-value__icon svg {
    width: 45px;
    height: 45px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.alfa-value strong {
    display: block;

    margin-bottom: 5px;

    color: var(--alfa-text-dark);

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
}

.alfa-value p {
    margin: 0;

    color: var(--alfa-text-soft);

    font-size: 12px;
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .alfa-hero {
        min-height: 540px;
    }

    .alfa-trust__item {
        padding-inline: 18px;
    }

    .alfa-home-categories__grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .alfa-values__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 30px 0;
    }

    .alfa-value:nth-child(2)::after {
        display: none;
    }

}


/* =========================================================
   TABLET VERTICAL
   ========================================================= */

@media (max-width: 850px) {

    .alfa-hero {
        min-height: 520px;
    }

    .alfa-hero__content {
        max-width: 570px;
    }

    .alfa-trust__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .alfa-trust__item:nth-child(2)::after {
        display: none;
    }

    .alfa-trust__item {
        min-height: 95px;
    }

    .alfa-home-categories__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .alfa-part-finder__content {
        width: 65%;
    }

    .alfa-brand-banner__inner {
        grid-template-columns:
            42%
            58%;
    }

    .alfa-brand-banner__content {
        padding:
            45px
            0
            45px
            45px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    /* HERO */

    .alfa-hero {
        align-items: flex-end;

        min-height: 600px;
    }

    .alfa-hero__background-img {
        object-position: 80% center;
    }

    .alfa-hero__overlay {
        background:
            linear-gradient(
                0deg,
                rgba(5,10,8,0.97) 0%,
                rgba(5,10,8,0.82) 42%,
                rgba(5,10,8,0.3) 75%,
                rgba(5,10,8,0.12) 100%
            );
    }

    .alfa-hero__content {
        max-width: 100%;

        padding:
            250px
            0
            48px;
    }

    .alfa-hero__eyebrow {
        font-size: 10px;
    }

    .alfa-hero__title {
        font-size: 44px;
    }

    .alfa-hero__subtitle {
        font-size: 20px;
        font-weight: 400;
    }

    .alfa-hero__subtitle br {
        display: none;
    }

    .alfa-hero__text {
        font-size: 14px;
    }


    /* TRUST */

    .alfa-trust__grid {
        grid-template-columns: 1fr 1fr;
    }

    .alfa-trust__item {
        min-height: 105px;

        padding:
            18px
            10px;
    }

    .alfa-trust__item:nth-child(odd)::after {
        display: block;
    }

    .alfa-trust__item:nth-child(even)::after {
        display: none;
    }

    .alfa-trust__icon {
        width: 34px;
    }

    .alfa-trust__icon svg {
        width: 29px;
        height: 29px;
    }

    .alfa-trust__content strong {
        font-size: 10px;
    }

    .alfa-trust__content span {
        font-size: 10px;
    }


    /* SECTION HEADING */

    .alfa-home-section-heading {
        flex-wrap: wrap;

        gap: 10px;

        margin-bottom: 22px;
    }

    .alfa-home-section-heading h2 {
        font-size: 23px;
    }

    .alfa-home-section-heading__line {
        display: none;
    }

    .alfa-home-section-heading__link {
        width: 100%;

        margin-top: 2px;
    }


    /* CATEGORIES */

    .alfa-home-categories__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .alfa-category-card {
        min-height: 125px;

        padding: 15px;
    }

    .alfa-category-card__icon {
        width: 44px;
        height: 44px;
    }

    .alfa-category-card__icon svg {
        width: 42px;
        height: 42px;
    }

    .alfa-category-card span {
        font-size: 11px;
    }


    /* PART FINDER */

    .alfa-part-finder {
        min-height: 480px;
    }

    .alfa-part-finder > .alfa-container {
        min-height: 480px;
        align-items: flex-start;
    }

    .alfa-part-finder__background {
        top: auto;
        width: 100%;
        height: 52%;
    }

    .alfa-part-finder__background::after {
        background:
            linear-gradient(
                180deg,
                var(--alfa-bg-soft) 0%,
                rgba(242,239,232,0.4) 50%,
                rgba(242,239,232,0.05) 100%
            );
    }

    .alfa-part-finder__content {
        width: 100%;
        max-width: 100%;
        padding:
            38px
            0
            250px;
    }

    .alfa-part-finder h2 {
        font-size: 30px;
    }


    /* BANNER */

    .alfa-brand-banner__inner {
        display: flex;
        flex-direction: column-reverse;

        min-height: 0;
    }

    .alfa-brand-banner__image {
        min-height: 250px;
        margin-left: calc(var(--alfa-gutter) * -1);
        margin-right: calc(var(--alfa-gutter) * -1);
    }

    .alfa-brand-banner__image::after {
        background:
            linear-gradient(
                180deg,
                rgba(9,11,9,0),
                rgba(9,11,9,0.65)
            );
    }

    .alfa-brand-banner__content {
        max-width: 100%;
        padding:
            38px
            0
            44px;
    }

    .alfa-brand-banner__content h2 {
        font-size: 29px;
    }

    .alfa-brand-banner__content h2 br {
        display: none;
    }

    .alfa-brand-banner__watermark {
        font-size: 120px;
    }


    /* VALUES */

    .alfa-values__grid {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .alfa-value,
    .alfa-value:first-child,
    .alfa-value:last-child {
        padding:
            22px
            0;
    }

    .alfa-value:not(:last-child)::after,
    .alfa-value:nth-child(2)::after {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;

        display: block;

        width: 100%;
        height: 1px;
    }

}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 430px) {

    .alfa-trust__item {
        gap: 9px;
    }

    .alfa-home-categories__grid {
        gap: 8px;
    }

    .alfa-category-card {
        min-height: 115px;
    }

}



/* =========================================
   ALFA SPORT - PROCESO DE COMPRA DARK
   ========================================= */

.as-process {
    --as-green: #003C32;
    --as-green-light: #82B8A9;
    --as-white: #FFFFFF;
    --as-muted: #D1D5D2;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 110px 0 90px;
    color: var(--as-white);

    background-color: #080D0B;
    background-image:
        linear-gradient(
            90deg,
            rgba(3, 9, 7, 0.98) 0%,
            rgba(3, 9, 7, 0.94) 25%,
            rgba(3, 9, 7, 0.87) 48%,
            rgba(3, 9, 7, 0.60) 73%,
            rgba(3, 9, 7, 0.32) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3, 9, 7, 0.75) 0%,
            transparent 55%
        ),
        url("https://alfasport.es/wp-content/uploads/2026/10/6619b7a0-e407-472a-8131-2ccf45790277.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.as-process *,
.as-process *::before,
.as-process *::after {
    box-sizing: border-box;
}

.as-process__container {
    position: relative;
    z-index: 2;
    width: min(100% - 64px, 1440px);
    margin: 0 auto;
}

/* =========================================
   CABECERA
   ========================================= */

.as-process__header {
    max-width: 850px;
    margin-bottom: 72px;
}

.as-process__eyebrow {
    display: block;
    margin-bottom: 18px;

    color: var(--as-green-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.15em;
}

.as-process__title {
    margin: 0 0 24px;

    color: #FFFFFF;
    font-family: "Michroma", sans-serif;
    font-size: clamp(27px, 3vw, 43px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.045em;
}

.as-process__title span {
    color: #A9D1C4;
}

.as-process__intro {
    max-width: 720px;
    margin: 0;

    color: #D6DCD8;
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================
   GRID DE PASOS
   ========================================= */

.as-process__steps {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 25px;

    margin: 0;
    padding: 0;
    list-style: none;
}

.as-process__step {
    position: relative;
    min-width: 0;
    padding: 0;
}

/* NÚMEROS */

.as-process__number {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    margin-bottom: 27px;

    background: linear-gradient(
        135deg,
        #006052,
        #003C32
    );

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;

    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
}

/* CONECTORES */

.as-process__step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 51px;

    width: calc(100% - 35px);
    height: 1px;

    background: rgba(190, 221, 210, 0.45);
}

/* ICONOS */

.as-process__icon {
    display: flex;
    align-items: center;

    height: 48px;
    margin-bottom: 20px;

    color: #F4FAF6;
}

.as-process__icon svg {
    width: 35px;
    height: 35px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* TÍTULOS Y DESCRIPCIONES */

.as-process__step h3 {
    margin: 0 0 12px;

    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.02em;
}

.as-process__step p {
    margin: 0;

    color: #CED5D0;
    font-size: 13px;
    line-height: 1.7;
}

/* =========================================
   FRANJA DE ENVÍOS
   ========================================= */

.as-process__shipping {
    display: flex;
    align-items: center;
    gap: 30px;

    margin-top: 65px;
    padding: 10px;

    background: rgba(0, 38, 31, 0.78);

    border: 1px solid rgba(154, 203, 184, 0.35);
    border-radius: 12px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.as-process__shipping-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    min-width: 55px;
    height: 55px;
    color: #FFFFFF;

    border-right: 1px solid rgba(255,255,255,0.25);
}

.as-process__shipping-icon svg {
    width: 30px;
    height: 30px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.as-process__shipping-content strong {
    display: block;
    margin-bottom: 7px;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
}

.as-process__shipping-content p {
    margin: 0;

    color: #DCE7E1;
    font-size: 15px;
    line-height: 1.7;
}

.as-process__separator {
    padding: 0 8px;
    color: #91B9AA;
}

/* NOTA INFERIOR */

.as-process__note {
    margin: 22px 0 0;

    color: #BCC9C1;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1199px) {

    .as-process {
        padding: 85px 0;
        background-position: 60% center;
    }

    .as-process__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 30px;
        row-gap: 48px;
    }

    .as-process__step:nth-child(4)::after {
        display: none;
    }

    .as-process__step h3 {
        font-size: 16px;
    }

    .as-process__step p {
        font-size: 14px;
    }

}

/* =========================================
   TABLET PEQUEÑA
   ========================================= */

@media (max-width: 767px) {

    .as-process {
        padding: 65px 0;

        background-image:
            linear-gradient(
                90deg,
                rgba(3,9,7,0.96),
                rgba(3,9,7,0.84)
            ),
            url("https://racingdivision.es/wp-content/uploads/2026/10/6619b7a0-e407-472a-8131-2ccf45790277.png");

        background-position: 65% center;
    }

    .as-process__container {
        width: min(100% - 36px, 1440px);
    }

    .as-process__header {
        margin-bottom: 45px;
    }

    .as-process__title {
        font-size: clamp(25px, 5vw, 33px);
        line-height: 1.5;
    }

    .as-process__intro {
        font-size: 14px;
    }

    .as-process__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px 25px;
    }

    .as-process__step::after {
        display: none;
    }

    .as-process__number {
        margin-bottom: 18px;
    }

    .as-process__icon {
        margin-bottom: 15px;
    }

    .as-process__shipping {
        margin-top: 48px;
        padding: 24px;
        gap: 20px;
    }

    .as-process__shipping-content strong {
        font-size: 18px;
    }

    .as-process__shipping-content p {
        font-size: 13px;
    }

}

/* =========================================
   MÓVIL
   ========================================= */

@media (max-width: 520px) {

    .as-process__steps {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .as-process__step {
        display: grid;
        grid-template-columns: 45px minmax(0, 1fr);
        column-gap: 18px;
        padding-bottom: 34px;
    }

    .as-process__step:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 43px;
        left: 19px;
        bottom: 5px;

        width: 1px;
        background: rgba(190,221,210,0.35);
    }

    .as-process__number {
        grid-column: 1;
        grid-row: 1 / span 3;
        margin: 0;
    }

    .as-process__icon {
        grid-column: 2;
        grid-row: 1;

        height: 36px;
        margin-bottom: 10px;
    }

    .as-process__icon svg {
        width: 29px;
        height: 29px;
    }

    .as-process__step h3 {
        grid-column: 2;
        grid-row: 2;

        margin-bottom: 8px;
        font-size: 16px;
    }

    .as-process__step p {
        grid-column: 2;
        grid-row: 3;

        font-size: 13px;
        line-height: 1.75;
    }

    .as-process__shipping {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;

        margin-top: 15px;
        padding: 24px;
    }

    .as-process__shipping-icon {
        width: 45px;
        min-width: 0;
        height: 45px;
        border-right: 0;
    }

    .as-process__shipping-content strong {
        font-size: 19px;
    }

    .as-process__shipping-content p {
        font-size: 14px;
    }

    .as-process__separator {
        padding: 0 4px;
    }

    .as-process__note {
        text-align: left;
        font-size: 11px;
    }

}



/* =========================================
   ALFA SPORT — RECAMBIOS FUERA DE CATÁLOGO
   ========================================= */

.as-parts {
    --parts-green: #003C32;
    --parts-green-dark: #002F28;
    --parts-cream: #F5F3EE;
    --parts-text: #121715;
    --parts-muted: #626A66;

    background: var(--parts-cream);
    padding: 105px 0;
    overflow: hidden;
}

.as-parts *,
.as-parts *::before,
.as-parts *::after {
    box-sizing: border-box;
}

.as-parts__container {
    width: min(100% - 64px, 1440px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.5fr;
    gap: 75px;
    align-items: start;
}

/* =========================================
   COLUMNA IZQUIERDA
   ========================================= */

.as-parts__content {
    padding-top: 8px;
}

.as-parts__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 30px;

    color: var(--parts-green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.as-parts__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--parts-green);
}

.as-parts__title {
    margin: 0 0 26px;

    color: #101412;
    font-family: "Michroma", sans-serif;
    font-size: clamp(26px, 2.6vw, 39px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.045em;
}

.as-parts__title span {
    color: var(--parts-green);
}

.as-parts__lead {
    margin: 0 0 20px;

    color: #505853;
    font-size: 16px;
    line-height: 1.85;
}

.as-parts__description {
    margin: 0 0 28px;

    color: #606862;
    font-size: 14px;
    line-height: 1.9;
}

/* BOTÓN */

.as-parts__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    min-height: 54px;
    padding: 0 26px;

    background: var(--parts-green);
    color: #FFFFFF;

    border: 1px solid var(--parts-green);
    border-radius: 5px;

    font-size: 12px;
    font-weight: 700;
    text-decoration: none;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.as-parts__button:hover,
.as-parts__button:focus-visible {
    background: #005447;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.as-parts__button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* NOTA INFERIOR IZQUIERDA */

.as-parts__note {
    display: flex;
    align-items: center;
    gap: 22px;

    margin-top: 28px;
    padding: 23px 24px;

    background: #EBEEE8;
    border-radius: 10px;
}

.as-parts__note-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    min-width: 54px;
    height: 54px;

    border-right: 1px solid #C7D0C8;
    color: var(--parts-green);
}

.as-parts__note-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.as-parts__note p {
    margin: 0;
    color: #46514B;
    font-size: 13px;
    line-height: 1.8;
}

.as-parts__note strong {
    color: var(--parts-green);
    font-weight: 700;
}

/* =========================================
   COLUMNA DERECHA
   ========================================= */

.as-parts__visual {
    min-width: 0;
}

/* TARJETAS */

.as-parts__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
}

.as-parts__card {
    min-width: 0;
    min-height: 240px;
    padding: 26px 23px;

    background: rgba(255,255,255,0.42);
    border: 1px solid #DADDD7;
    border-radius: 9px;

    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.as-parts__card:hover {
    transform: translateY(-4px);
    border-color: #A8BDB2;
    box-shadow: 0 12px 30px rgba(0,40,30,0.06);
}

.as-parts__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;
    margin-bottom: 23px;

    background: #E9EDE7;
    border-radius: 50%;
    color: var(--parts-green);
}

.as-parts__card-icon svg {
    width: 31px;
    height: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.as-parts__card h3 {
    margin: 0 0 13px;

    color: #111715;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

.as-parts__card p {
    margin: 0;
    color: var(--parts-muted);
    font-size: 13px;
    line-height: 1.75;
}

/* =========================================
   ILUSTRACIÓN TÉCNICA
   ========================================= */

.as-parts__blueprint {
    width: 100%;
    height: 205px;
    margin: 14px 0 0;

    background-image:
        url("URL_DE_TU_IMAGEN_TECNICA");

    background-size: cover;
    background-position: center 54%;
    background-repeat: no-repeat;

    mix-blend-mode: multiply;
    opacity: 0.72;
}

/* =========================================
   FRANJA CÓMO FUNCIONA
   ========================================= */

.as-parts__how {
    padding: 29px 30px 32px;

    background: linear-gradient(
        135deg,
        #003C32 0%,
        #002D26 100%
    );

    border-radius: 10px;
    color: #FFFFFF;
}

.as-parts__how-heading {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 28px;
}

.as-parts__how-heading > span:first-child {
    flex-shrink: 0;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.as-parts__how-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.25);
}

.as-parts__how-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.as-parts__how-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.as-parts__how-item:not(:last-child) {
    padding-right: 16px;
    border-right: 1px solid rgba(255,255,255,0.16);
}

.as-parts__how-item > svg {
    width: 30px;
    min-width: 30px;
    height: 30px;

    fill: none;
    stroke: #FFFFFF;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.as-parts__how-item h4 {
    margin: 0 0 8px;

    color: #FFFFFF;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

.as-parts__how-item p {
    margin: 0;

    color: #D1E1D9;
    font-size: 11px;
    line-height: 1.75;
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1199px) {

    .as-parts {
        padding: 85px 0;
    }

    .as-parts__container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .as-parts__content {
        max-width: 800px;
    }

    .as-parts__title {
        font-size: clamp(28px, 4vw, 39px);
    }

    .as-parts__cards {
        gap: 16px;
    }

    .as-parts__card {
        min-height: 220px;
    }

}

/* =========================================
   TABLET PEQUEÑA
   ========================================= */

@media (max-width: 767px) {

    .as-parts {
        padding: 65px 0;
    }

    .as-parts__container {
        width: min(100% - 36px, 1440px);
        gap: 38px;
    }

    .as-parts__eyebrow {
        margin-bottom: 22px;
        font-size: 10px;
    }

    .as-parts__title {
        font-size: clamp(24px, 5vw, 32px);
        line-height: 1.55;
    }

    .as-parts__lead {
        font-size: 15px;
    }

    .as-parts__description {
        font-size: 14px;
    }

    .as-parts__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .as-parts__card {
        min-height: 0;
        padding: 23px;
    }

    .as-parts__card:last-child {
        grid-column: 1 / -1;
    }

    .as-parts__blueprint {
        height: 170px;
    }

    .as-parts__how-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .as-parts__how-item:not(:last-child) {
        padding: 0 0 20px;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.16);
    }

    .as-parts__how-item h4 {
        font-size: 13px;
    }

    .as-parts__how-item p {
        font-size: 12px;
    }

}

/* =========================================
   MÓVIL
   ========================================= */

@media (max-width: 520px) {

    .as-parts__title br {
        display: none;
    }

    .as-parts__title {
        font-size: 25px;
        line-height: 1.55;
        overflow-wrap: anywhere;
    }

    .as-parts__button {
        width: 100%;
        justify-content: space-between;
    }

    .as-parts__note {
        align-items: flex-start;
        padding: 20px;
        gap: 15px;
    }

    .as-parts__note-icon {
        width: 40px;
        min-width: 40px;
        height: 45px;
    }

    .as-parts__note-icon svg {
        width: 25px;
        height: 25px;
    }

    .as-parts__cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .as-parts__card,
    .as-parts__card:last-child {
        grid-column: auto;
    }

    .as-parts__card {
        padding: 22px;
    }

    .as-parts__card-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 15px;
    }

    .as-parts__card-icon svg {
        width: 27px;
        height: 27px;
    }

    .as-parts__blueprint {
        height: 135px;
        background-size: cover;
    }

    .as-parts__how {
        padding: 25px 22px;
    }

    .as-parts__how-heading {
        margin-bottom: 23px;
    }

}


.as-parts__visual{
    background-image: url("https://alfasport.es/wp-content/uploads/2026/10/Plano-tecnico-de-Alfa-Romeo-clasico.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


/* =========================================
   ALFA SPORT — MODELOS DESTACADOS
   ========================================= */

.alfa-models {
    --models-green: #003C32;
    --models-cream: #F5F3EE;
    --models-text: #111715;
    --models-muted: #666D68;
    --models-border: #DADDD7;

    background: var(--models-cream);
    padding: 90px 0 95px;
}

.alfa-models *,
.alfa-models *::before,
.alfa-models *::after {
    box-sizing: border-box;
}

.alfa-models__container {
    width: min(100% - 64px, 1440px);
    margin: 0 auto;
}

/* =========================================
   CABECERA
   ========================================= */

.alfa-models__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.alfa-models__heading {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.alfa-models__heading h2 {
    margin: 0;
    color: var(--models-text);
    font-family: "Michroma", sans-serif;
    font-size: clamp(23px, 2vw, 30px);
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

.alfa-models__heading h2 span {
    color: var(--models-green);
    font-family: sans-serif;
    font-size: 16px;
    vertical-align: middle;
}

.alfa-models__line {
    flex: 1;
    height: 1px;
    background: var(--models-border);
}

.alfa-models__all {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: var(--models-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .25s ease;
}

.alfa-models__all:hover {
    color: var(--models-green);
}

.alfa-models__all svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.alfa-models__intro {
    max-width: 650px;
    margin: 19px 0 35px;
    color: var(--models-muted);
    font-size: 15px;
    line-height: 1.8;
}

/* =========================================
   GRID
   ========================================= */

.alfa-models__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

/* =========================================
   TARJETAS
   ========================================= */

.alfa-models__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: #eeece0;
    border: 1px solid var(--models-border);
    border-radius: 9px;
    color: var(--models-text);
    text-decoration: none;
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.alfa-models__card:hover {
    transform: translateY(-4px);
    border-color: #A8BDB2;
    box-shadow: 0 12px 30px rgba(0,40,30,.055);
}

.alfa-models__card:focus-visible {
    outline: 2px solid var(--models-green);
    outline-offset: 4px;
}

/* =========================================
   IMAGEN DEL COCHE
   ========================================= */

.alfa-models__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    background: #F8F7F3;
}

.alfa-models__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
    transition: transform .4s ease;
}



/* =========================================
   PIE DE TARJETA
   ========================================= */

.alfa-models__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
    padding: 20px 24px;
}

.alfa-models__card-footer h3 {
    margin: 0;
    color: var(--models-text);
    font-family: "Michroma", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
}

.alfa-models__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;
    border: 1px solid #D5DED7;
    border-radius: 50%;

    color: var(--models-green);
    font-size: 18px;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.alfa-models__card:hover .alfa-models__arrow {
    background: var(--models-green);
    border-color: var(--models-green);
    color: #FFFFFF;
}

/* =========================================
   PIE DE SECCIÓN
   ========================================= */

.alfa-models__bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 35px;
}

.alfa-models__bottom p {
    margin: 0;
    color: var(--models-muted);
    font-size: 14px;
}

.alfa-models__bottom a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--models-green);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.alfa-models__bottom a:hover {
    text-decoration: underline;
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1024px) {

    .alfa-models {
        padding: 75px 0;
    }

    .alfa-models__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .alfa-models__image {
        aspect-ratio: 1.9 / 1;
    }

}

/* =========================================
   MÓVIL
   ========================================= */

@media (max-width: 600px) {

    .alfa-models {
        padding: 55px 0 65px;
    }

    .alfa-models__container {
        width: min(100% - 36px, 1440px);
    }

    .alfa-models__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .alfa-models__heading {
        width: 100%;
        gap: 15px;
    }

    .alfa-models__heading h2 {
        font-size: 23px;
    }

    .alfa-models__all {
        font-size: 12px;
    }

    .alfa-models__intro {
        margin: 17px 0 28px;
        font-size: 14px;
    }

    .alfa-models__grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .alfa-models__image {
        aspect-ratio: 2 / 1;
        padding: 10px 10px 0;
    }

    .alfa-models__card-footer {
        padding: 17px 20px;
    }

    .alfa-models__card-footer h3 {
        font-size: 14px;
    }

    .alfa-models__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 28px;
    }

}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {
    .alfa-models__card,
    .alfa-models__image img,
    .alfa-models__arrow {
        transition: none;
    }
}