/* ==========================================================================
   Markad Publicidad Estudio — Hero slider
   ========================================================================== */


/* --------------------------------------------------------------------------
   Contenedor principal
   -------------------------------------------------------------------------- */

.mk-hero-slider {
    position: relative;
    min-height: 760px;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: var(--mk-indigo-950);
    color: var(--mk-white);
    isolation: isolate;
}

.mk-hero-slider__track {
    position: absolute;
    inset: 0;
}


/* ==========================================================================
   Diapositiva
   ========================================================================== */

.mk-hero-slide {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    grid-template-columns:
        40%
        60%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        visibility 900ms,
        opacity 900ms ease;
}

.mk-hero-slide.is-active {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}


/* ==========================================================================
   Panel izquierdo
   ========================================================================== */

.mk-hero-slide__content-panel {
    position: relative;
    z-index: 3;
    display: flex;
    min-width: 0;
    align-items: center;
    padding:
        calc(
            var(--mk-header-height)
            + 44px
        )
        clamp(36px, 4vw, 76px)
        110px
        max(
            var(--mk-container-padding),
            calc(
                (
                    100vw
                    - var(--mk-container-wide)
                )
                / 2
                + var(--mk-container-padding)
            )
        );
    overflow: hidden;
    background: var(--mk-indigo-950);
}


/* --------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */

.mk-hero-slide__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 540px;
}


/* --------------------------------------------------------------------------
   Etiqueta
   -------------------------------------------------------------------------- */

.mk-hero-slide__eyebrow {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 22px;
    color: var(--mk-magenta-400);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.mk-hero-slide__eyebrow::before {
    display: none;
}

/* --------------------------------------------------------------------------
   Título
   -------------------------------------------------------------------------- */

.mk-hero-slide__title {
    margin: 0;
    color: var(--mk-white);
    font-family: var(--mk-font-heading);
    font-size: clamp(
        2.35rem,
        3.35vw,
        4rem
    );
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.038em;
}

.mk-hero-slide__title span,
.mk-hero-slide__title strong {
    display: block;
}

.mk-hero-slide__title span {
    font-weight: 300;
}

.mk-hero-slide__title strong {
    margin-top: 8px;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   Descripción
   -------------------------------------------------------------------------- */

.mk-hero-slide__description {
    max-width: 500px;
    margin-top: 28px;
    color: var(--mk-text-light-muted);
    font-size: 1.04375rem;
    font-weight: 400;
    line-height: 1.7;
}


/* --------------------------------------------------------------------------
   Botón del hero
   -------------------------------------------------------------------------- */

.mk-hero-slide__button {
    min-height: 56px;
    margin-top: 34px;
    padding:
        7px
        7px
        7px
        24px;
    border: 1px solid
        rgba(255, 255, 255, 0.24);
    background:
        rgba(255, 255, 255, 0.07);
    color: var(--mk-white);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        border-color var(--mk-transition-base),
        background-color var(--mk-transition-base),
        box-shadow var(--mk-transition-base),
        transform var(--mk-transition-base);
}

.mk-hero-slide__button::before {
    display: none;
}


/* --------------------------------------------------------------------------
   Hover suave
   -------------------------------------------------------------------------- */

.mk-hero-slide__button:hover {
    border-color: var(--mk-magenta-500);
    background: var(--mk-magenta-700);
    color: var(--mk-white);
    box-shadow:
        0 12px 28px
        rgba(8, 13, 38, 0.2);
    transform: translateY(-1px);
}


/* --------------------------------------------------------------------------
   Foco accesible
   -------------------------------------------------------------------------- */

.mk-hero-slide__button:focus-visible {
    border-color: var(--mk-magenta-400);
    outline: 3px solid
        rgba(209, 91, 234, 0.3);
    outline-offset: 4px;
}


.mk-hero-slide__button-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    border: 1px solid
        rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background:
        rgba(255, 255, 255, 0.08);
    transition:
        background-color var(--mk-transition-base),
        transform var(--mk-transition-base);
}

.mk-hero-slide__button:hover
.mk-hero-slide__button-icon {
    background:
        rgba(255, 255, 255, 0.16);
    transform: translateX(2px);
}

.mk-hero-slide__button-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}


/* ==========================================================================
   Animación del contenido
   ========================================================================== */

.mk-hero-slide__eyebrow,
.mk-hero-slide__title,
.mk-hero-slide__description,
.mk-hero-slide__button {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 700ms ease,
        transform 900ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

.mk-hero-slide.is-active
.mk-hero-slide__eyebrow {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 180ms;
}

.mk-hero-slide.is-active
.mk-hero-slide__title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 280ms;
}

.mk-hero-slide.is-active
.mk-hero-slide__description {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 390ms;
}

.mk-hero-slide.is-active
.mk-hero-slide__button {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 490ms;
}


/* ==========================================================================
   Panel multimedia
   ========================================================================== */

.mk-hero-slide__media-panel {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    background: var(--mk-indigo-800);
}

.mk-hero-slide__media-panel picture {
    display: block;
    width: 100%;
    height: 100%;
}

.mk-hero-slide__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.06);
    transition:
        transform 8s
        cubic-bezier(0.2, 0.75, 0.3, 1);
}

.mk-hero-slide.is-active
.mk-hero-slide__media {
    transform: scale(1);
}


/* --------------------------------------------------------------------------
   Capa sobre imagen o video
   -------------------------------------------------------------------------- */

.mk-hero-slide__media-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(16, 26, 69, 0.34) 0%,
            rgba(16, 26, 69, 0.08) 38%,
            rgba(8, 13, 38, 0.16) 100%
        ),
        linear-gradient(
            180deg,
            rgba(8, 13, 38, 0.2) 0%,
            transparent 38%,
            rgba(8, 13, 38, 0.28) 100%
        );
    pointer-events: none;
}


/* ==========================================================================
   Flechas
   ========================================================================== */

.mk-hero-slider__arrows {
    position: absolute;
    z-index: 5;
    right: max(
        var(--mk-container-padding),
        calc(
            (
                100vw
                - var(--mk-container-wide)
            )
            / 2
            + var(--mk-container-padding)
        )
    );
    bottom: 38px;
    display: flex;
    gap: 10px;
}

.mk-hero-slider__arrow {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mk-border-medium);
    border-radius: 50%;
    background:
        rgba(8, 13, 38, 0.22);
    color: var(--mk-white);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.mk-hero-slider__arrow:hover {
    border-color: var(--mk-magenta-500);
    background: var(--mk-magenta-600);
    box-shadow:
        0 12px 32px
        rgba(163, 44, 204, 0.28);
    transform: translateY(-2px);
}

.mk-hero-slider__arrow svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}


/* ==========================================================================
   Paginación
   ========================================================================== */

.mk-hero-slider__pagination {
    position: absolute;
    z-index: 5;
    bottom: 42px;
    left: max(
        var(--mk-container-padding),
        calc(
            (
                100vw
                - var(--mk-container-wide)
            )
            / 2
            + var(--mk-container-padding)
        )
    );
    display: flex;
    align-items: center;
    gap: 18px;
}

.mk-hero-slider__pagination-button {
    position: relative;
    display: inline-flex;
    min-width: 30px;
    height: 34px;
    align-items: center;
    justify-content: flex-start;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.mk-hero-slider__pagination-button::after {
    width: 0;
    height: 2px;
    margin-left: 9px;
    background: var(--mk-magenta-500);
    content: '';
    transition:
        width var(--mk-transition-base);
}

.mk-hero-slider__pagination-button:hover,
.mk-hero-slider__pagination-button.is-active {
    color: var(--mk-white);
}

.mk-hero-slider__pagination-button.is-active::after {
    width: 32px;
}


/* ==========================================================================
   Portátiles y tablet horizontal
   ========================================================================== */

@media (max-width: 1280px) {

    .mk-hero-slide {
        grid-template-columns:
            44%
            56%;
    }

    .mk-hero-slide__content-panel {
        padding-right: 40px;
    }

    .mk-hero-slide__title {
        font-size: clamp(
            2.6rem,
            4.5vw,
            4.4rem
        );
    }

}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1024px) {

    .mk-hero-slider {
        min-height: 700px;
    }

    .mk-hero-slide {
        grid-template-columns:
            48%
            52%;
    }

    .mk-hero-slide__content-panel {
        padding:
            calc(
                var(--mk-header-height)
                + 34px
            )
            30px
            100px
            var(--mk-container-padding);
    }

    .mk-hero-slide__title {
        font-size: clamp(
            2.45rem,
            5vw,
            3.75rem
        );
    }

    .mk-hero-slide__description {
        font-size: 1rem;
    }

}


/* ==========================================================================
   Móvil
   ========================================================================== */

@media (max-width: 767px) {

    .mk-hero-slider {
        min-height: 720px;
        height: 100svh;
    }

    .mk-hero-slide {
        display: block;
    }

    .mk-hero-slide__media-panel {
        position: absolute;
        z-index: 0;
        inset: 0;
    }

    .mk-hero-slide__media {
        object-position: center;
    }

    .mk-hero-slide__media-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(8, 13, 38, 0.48) 0%,
                rgba(8, 13, 38, 0.64) 38%,
                rgba(8, 13, 38, 0.96) 100%
            );
    }

    .mk-hero-slide__content-panel {
        position: absolute;
        z-index: 3;
        inset: 0;
        align-items: flex-end;
        padding:
            calc(
                var(--mk-header-height-mobile)
                + 44px
            )
            var(--mk-container-padding)
            112px;
        background:
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(8, 13, 38, 0.18) 45%,
                rgba(8, 13, 38, 0.7) 100%
            );
    }

    .mk-hero-slide__content-panel::before,
    .mk-hero-slide__content-panel::after {
        display: none;
    }

    .mk-hero-slide__content {
        max-width: 100%;
    }

    .mk-hero-slide__eyebrow {
        gap: 12px;
        margin-bottom: 18px;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
    }

    .mk-hero-slide__eyebrow::before {
        width: 26px;
    }

    .mk-hero-slide__title {
        font-size: clamp(
            2.7rem,
            12vw,
            4.2rem
        );
        line-height: 0.98;
    }

    .mk-hero-slide__description {
        margin-top: 20px;
        font-size: 1rem;
        line-height: 1.6;
    }

    .mk-hero-slide__button {
        margin-top: 26px;
    }

    .mk-hero-slider__pagination {
        bottom: 30px;
        left: var(--mk-container-padding);
    }

    .mk-hero-slider__arrows {
        right: var(--mk-container-padding);
        bottom: 24px;
    }

    .mk-hero-slider__arrow {
        width: 46px;
        height: 46px;
    }

}


/* ==========================================================================
   Móviles pequeños
   ========================================================================== */

@media (max-width: 480px) {

    .mk-hero-slider__arrows {
        gap: 7px;
    }

    .mk-hero-slider__arrow {
        width: 43px;
        height: 43px;
    }

    .mk-hero-slider__pagination {
        gap: 10px;
    }

    .mk-hero-slider__pagination-button {
        min-width: 24px;
    }

    .mk-hero-slider__pagination-button.is-active::after {
        width: 20px;
    }

}


/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .mk-hero-slide,
    .mk-hero-slide__media,
    .mk-hero-slide__eyebrow,
    .mk-hero-slide__title,
    .mk-hero-slide__description,
    .mk-hero-slide__button {
        transition-duration: 0.01ms;
    }

}