a {
    color: currentColor;
    text-decoration: none;

    &:is(:hover, :focus) {
        text-decoration: underline from-font;
    }

    &:focus-visible {
        outline: var(--link--outline--Width) solid var(--link--outline--Color);
        outline-offset: var(--link--outline--Offset);
    }

    &:has(img) {
        --link--outline--Offset : var(--img--outline--Offset);
        --link--outline--Color  : var(--img--outline--Color);
        --link--outline--Width  : var(--img--outline--Width);

        display: block;
    }
}

.p-home {
    --link--outline--Color                       : currentColor;
    --link--outline--Offset                      : 3px;
    --link--outline--Width                       : 2px;
    --img--outline--Color                        : currentColor;
    --img--outline--Offset                       : 0;
    --img--outline--Width                        : 2px;
    --btn--outline--Color                        : #000;
    --btn--BackgroundColor                       : #F6A016;
    --btn--Color                                 : #FFFFFF;
    --btn--Width                                 : 100%;
    --card--GridTemplateColumns                  : repeat(2, 1fr);
    --card-info--BackgroundColor                 : transparent;
    --card-info--Color                           : currentColor;
    --card-info--Order                           : unset;
    --card-info--Padding                         : 24px; 
    --card__link--before--BackgroundColor        : rgba(13, 31, 97, .6);
    --card__link--before--Display                : none;
    --card__link--after--Display                 : none;
    --card__img--AspectRatio                     : 1 / 1;
    --card__img--Height                          : auto;
    --card__img--ObjectPosition                  : center;
    --header__box--Padding                       : 40px 24px 32px;
    --header__img--ObjectPosition                : left center;
    --header__info--Height                       : 800px;
    --header__info--after--BackgroundImage       : linear-gradient(180deg, rgba(0, 0, 0, 0) 26.5%, rgba(0, 0, 0, .60) 41.09%, rgba(0, 0, 0, .70) 100%);
    --header__tit--Width                         : 277px;
    --heading-h3--Color                          : currentColor;
    --heading-h3--FontSize                       : 24px;
    --heading-h4--Color                          : currentColor;
    --heading-h4--FontSize                       : 20px;
    --header--info--Padding                      : 24px;
    --module--grid--Columns                      : 2;

    background-color: #E3E6ED;
    margin-inline: auto;
    max-width: 1280px;
}

.p-home img {
    display: block;
    max-width: 100%;
}

.c-eno-heading-h2 {
    color: #fff;
    font-size: 28px;
}

.c-eno-heading-h3 {
    color: var(--heading-h3--Color);
    font-size: var(--heading-h3--FontSize);
}

:is(.c-eno-heading-h2, .c-eno-heading-h3) {
    font-weight: 600;
}

.c-eno-heading-h4 {
    color: var(--heading-h4--Color);
    font-size: var(--heading-h4--FontSize);
    font-weight: 700;
    text-transform: uppercase;
}

.c-eno-header {
    --card-info--BackgroundColor : transparent;
    --heading-h4--Color          : #ADB4CA;
    --card-info--Padding         : var(--header--info--Padding);
    --img--outline--Color        : #fff;
    --btn--outline--Color        : #fff;
    --btn--Color                 : #0F1D2D;

    .c-eno-card-info {
        align-self: end;
        z-index: 1;
    }
}

.c-eno-header__box {
    aspect-ratio: 1 / 1;
    background-color: #0D1F61;
    color: #fff;
    display: grid;
    justify-items: center;
    padding: var(--header__box--Padding);
}

.c-eno-header__banner {
    align-content: space-between;
    display: grid;
}

.c-eno-header__tit  {
    width: var(--header__tit--Width);
}

.c-eno-header__num  {
    font-size: 18px;
    text-align: center;
}

.c-eno-header__num-tit {
    color: #fff;
    font-size: 22px;
}

.c-eno-header__num-date {
    opacity: .5;
}

.c-eno-header__brands {
    align-items: center;
    display: flex;
    justify-content: space-between;
    align-self: end;
    width: 100%;
}

.c-eno-header__img {
    position: absolute;
    height: 100%;
    object-fit: cover;
    object-position: var(--header__img--ObjectPosition);
    width: 100%;
}

.c-eno-header__info {
    background-color: #000;
    color: #fff;
    display: grid;
    height: var(--header__info--Height);
    overflow: hidden;
    position: relative;
}

.c-eno-header__info::after {
    background-image: var(--header__info--after--BackgroundImage);
    content: "";
    inset: 0;
    position: absolute;
}

.c-eno-card {
    position: relative;
}

.c-eno-card--sabias {
    --heading-h4--Color : #7B500B;

    background-color: #F2F2F2;
}

.c-eno-card--viene {
    --heading-h4--Color : #354376;

    background-color: #E3E6ED;
}

.c-eno-card__link:is(:hover, :focus, :active) {

    background-color: #fff;

    img {
        opacity: .8;
    }
}

.c-eno-card__link {
    
    --img--outline--Width : 0;

    position: relative;

    &::before, &::after {
        content: "";
        position: absolute;
    }

    &::before {
        background-color: var(--card__link--before--BackgroundColor);
        display: var(--card__link--before--Display);
        inset: 0;
        opacity: .5;
        z-index: 1;
    }

    &::after {
        border: 3px ridge #ccc;
        display: var(--card__link--after--Display);
        inset: 4px;
        z-index: 4;
    }

    &:focus-visible::after {
        --card__link--after--Display : block;
    }
}

.c-eno-card__link:active {
    background-color: #000;
}

.c-eno-card__img {
    aspect-ratio: var(--card__img--AspectRatio);
    height: var(--card__img--Height);
    object-fit: cover;
    object-position: var(--card__img--ObjectPosition) center;
}

.c-eno-card__img--left {
    --card__img--ObjectPosition : left;
}

.c-eno-card__img--right {
    --card__img--ObjectPosition : right;
}

.c-eno-card-info {
    background-color: var(--card-info--BackgroundColor);
    color: var(--card-info--Color);
    line-height: 1.5;
    padding: var(--card-info--Padding);
    position: relative;
} 

.c-eno-btn {
    --link--outline--Color : var(--btn--outline--Color);

    background-color: var(--btn--BackgroundColor);
    border-radius: 4px;
    color: var(--btn--Color);
    cursor: pointer;
    display: inline-grid;
    font-weight: 700;
    height: 40px;
    min-width: 100px;
    place-items: center;
    width: var(--btn--Width);

    &:is(:hover, :focus, :active) {
        text-decoration: none;
    }

    &:is(:hover, :focus) {
        background-color: color-mix(in srgb, var(--btn--BackgroundColor), #FFFFFF 20%);
    }

    &:active {
        background-color: color-mix(in srgb, var(--btn--BackgroundColor), #000000 20%);
    }
}

.c-eno-module--foco {
    --heading-h4--Color    :#636E96;
    --card-info--Color     :#0D1F61;
    --btn--BackgroundColor :#0D1F61;
}


.c-eno-module--conocenos {
    --heading-h4--Color           : #636E96;
    --card__link--before--Display : block;
    --card-info--BackgroundColor  : #0D1F61;
    --card-info--Color            : #FFFFFF;
    --img--outline--Color         : #FFFFFF;
    --btn--outline--Color         : #FFFFFF;

    .c-eno-card:nth-child(odd) {
        --btn--Color : #0F1D2D;
    }
        
    .c-eno-card:nth-child(even) {
        --card__link--before--BackgroundColor  : rgba(221, 144, 20, 0.5);
        --heading-h4--Color                    : #7B500B;
        --card-info--BackgroundColor           : #F6A016;
        --card-info--Color                     : #191002;
        --btn--BackgroundColor                 : #0D1F61;
        --link--outline--Color                 : #000;
        --btn--outline--Color                  : #000;
    }

    .c-eno-card__img {
       filter: grayscale(1);
    }

    .c-eno-card-info {
        z-index: 2;
    }
}

.c-eno-module--grid {
    --btn--BackgroundColor : #6E7781;
    --heading-h3--FontSize   : 20px;
    --heading-h4--FontSize   : 16px;
    --card-info--Padding     : 24px 0;

    background-color: #E3E6ED;

    .c-eno-card {
        padding: 24px 24px 0;
    }
}

.c-eno-module--imagenes {
    --heading-h4--Color          :#7B500B;
    --card-info--BackgroundColor :#F6A016;
    --card-info--Color           :#191002;
    --btn--BackgroundColor       :#0D1F61;
    --link--outline--Color       :#000;
    --btn--outline--Color        :#000;
}

.c-footer {
   --img--outline--Color : #fff;
}

@media (width >= 768px)  {

    .p-home {
        --btn--Width                           : auto;
        --header__box--Padding                 : 32px 40px 32px 56px;
        --header__tit--Width                   : 222px;
        --header__img--ObjectPosition          : 0 25%;
        --header__info--after--BackgroundImage : linear-gradient(270deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 39.79%, rgba(0, 0, 0, 0.40) 56.76%, rgba(0, 0, 0, 0.00) 68.22%),
            linear-gradient(180deg, rgba(0, 0, 0, 0.00) 39.15%, rgba(0, 0, 0, 0.30) 60.51%, rgba(0, 0, 0, 0.60) 100%);
        --header__info--Height                 : auto;
        --header--info--Padding                : 24px 24px 24px 224px;
    }

    .c-eno-header__box {
        align-items: center;
        aspect-ratio: auto;
        display: flex;
        justify-content: space-between;
    }

    .c-eno-header__banner {
        align-self: stretch;
    }

    .c-eno-header__brands {
        align-self: normal;
        flex-direction: column;
        gap: 32px;
        width: auto;
    }

    .c-eno-header__info {
        justify-items: end;
        text-align: right;
    }

    .c-eno-card {
        display: grid;
        grid-template-columns: var(--card--GridTemplateColumns);
    }

    .c-eno-card-info {
        order: var(--card-info--Order);
    }

    .c-eno-module--foco {
        --card-info--Order  : -1;
        --card__img--Height : 100%;
    }

    .c-eno-module--conocenos .c-eno-card:nth-child(odd) {
        --card-info--Order: -1;
    }

    .c-eno-module--grid {
        --card-info--Padding        : 24px 0 0;
        --card--GridTemplateColumns : none;
        
        display: grid;
        grid-template-columns: repeat(var(--module--grid--Columns), 1fr); 

        .c-eno-card {
            grid-template-rows: auto 1fr;
            height: auto;
            padding: 24px 12px;
        }

        .c-eno-card:nth-child(odd) {
            padding-inline-start: 24px;
        }

        .c-eno-card:nth-child(even),
        .c-eno-card:last-child {
            padding-inline-end: 24px;
        }

        .c-eno-card-info {
            display: grid;
            height: 100%;
            justify-items: start;
        }

        .c-eno-btn {
            align-self: end;
        }
    }

    .c-eno-module--imagenes {
        --card--GridTemplateColumns : none;
    }
}

@media (width >= 1280px)  {

    .p-home {
        --header__box--Padding        : 48px 16px 40px;
        --header__tit--Width          : 250px;
        --header__img--ObjectPosition : 0 30%;
        --header--info--Padding       : 44px 24px 24px 346px;
        --card-info--Padding          : 32px;
        --card--GridTemplateColumns   : repeat(3, 1fr);
        --card__img--AspectRatio      : auto;
        --card__img--Height           : 100%;
    }

    .c-eno-header {
        display: flex;
    }

    .c-eno-header__box {
        aspect-ratio: 1 / 1;
        display: grid;
        flex: none;
        justify-content: center;
        width: 33.33%;
    }

    .c-eno-header__banner {
        align-content: space-between;
        display: grid;
    }

    .c-eno-header__num-tit {
        font-size: 20px;
    }

    .c-eno-header__brands {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        align-self: end;
        width: 100%;
    }

    .c-eno-card {
        height: 426px;
    }

    .c-eno-module--grid {
        --module--grid--Columns : 3;
        --card__img--Height     : 250px;

        .c-eno-card {
            height: auto;
            padding-block: 32px;
            padding-inline: 22px;
            place-content: start;
        }

        .c-eno-card:nth-child(3n+1) {
            padding-inline-end: 12px;
            padding-inline-start: 32px;
        }

        .c-eno-card:nth-child(3n) {
            padding-inline-end: 32px;
            padding-inline-start: 12px;
        }

        .c-eno-card-info {
            padding-block-end: 0;
            padding-inline: 0;
        }
    }

    .c-eno-module--imagenes {
        --card--GridTemplateColumns : repeat(3, 1fr);
    }

    .u-narrow {
        aspect-ratio: unset;
    }

    .u-wide {
        grid-column: span 2;
    }
}