/* =========================================================
   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;
    }

}