/* ==========================================================================
   Markad Publicidad Estudio — Sistema de layout
   ========================================================================== */


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

.mk-container {
    width: min(
        calc(
            100% - (
                var(--mk-container-padding) * 2
            )
        ),
        var(--mk-container-width)
    );
    margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Contenedor ampliado
   -------------------------------------------------------------------------- */

.mk-container--wide {
    width: min(
        calc(
            100% - (
                var(--mk-container-padding) * 2
            )
        ),
        var(--mk-container-wide)
    );
    margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Contenedor fluido
   -------------------------------------------------------------------------- */

.mk-container--fluid {
    width: 100%;
    padding-inline: var(--mk-container-padding);
}


/* --------------------------------------------------------------------------
   Contenedor estrecho para contenidos
   -------------------------------------------------------------------------- */

.mk-container--narrow {
    width: min(
        calc(
            100% - (
                var(--mk-container-padding) * 2
            )
        ),
        840px
    );
    margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Página
   -------------------------------------------------------------------------- */

.site-main {
    position: relative;
    min-height: 60vh;
    isolation: isolate;
}


/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */

.mk-section {
    position: relative;
    padding-block: var(--mk-space-24);
}

.mk-section--small {
    padding-block: var(--mk-space-16);
}

.mk-section--large {
    padding-block: var(--mk-space-32);
}

.mk-section--flush {
    padding-block: 0;
}


/* --------------------------------------------------------------------------
   Fondos de sección
   -------------------------------------------------------------------------- */

.mk-section--white {
    background: var(--mk-white);
}

.mk-section--soft {
    background: var(--mk-background-soft);
}

.mk-section--indigo {
    background: var(--mk-indigo-900);
    color: var(--mk-white);
}

.mk-section--dark {
    background: var(--mk-indigo-950);
    color: var(--mk-white);
}

.mk-section--gradient {
    background: var(--mk-gradient-brand);
    color: var(--mk-white);
}


/* --------------------------------------------------------------------------
   Encabezado de sección
   -------------------------------------------------------------------------- */

.mk-section-heading {
    max-width: 780px;
    margin-bottom: var(--mk-space-16);
}

.mk-section-heading--center {
    margin-inline: auto;
    text-align: center;
}

.mk-section-heading__title {
    margin-bottom: var(--mk-space-5);
}

.mk-section-heading__description {
    max-width: 680px;
    color: var(--mk-text-secondary);
    font-size: clamp(
        1rem,
        1.4vw,
        1.2rem
    );
    line-height: 1.7;
}

.mk-section-heading--center
.mk-section-heading__description {
    margin-inline: auto;
}

.mk-section--indigo
.mk-section-heading__description,
.mk-section--dark
.mk-section-heading__description,
.mk-section--gradient
.mk-section-heading__description {
    color: var(--mk-text-light-muted);
}


/* --------------------------------------------------------------------------
   Grid general
   -------------------------------------------------------------------------- */

.mk-grid {
    display: grid;
    gap: var(--mk-space-8);
}

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

.mk-grid--3 {
    grid-template-columns: repeat(
        3,
        minmax(0, 1fr)
    );
}

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


/* --------------------------------------------------------------------------
   Layout de dos columnas
   -------------------------------------------------------------------------- */

.mk-split {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    align-items: center;
    gap: clamp(
        40px,
        7vw,
        100px
    );
}

.mk-split--reverse
.mk-split__media {
    order: -1;
}


/* --------------------------------------------------------------------------
   Flexbox general
   -------------------------------------------------------------------------- */

.mk-flex {
    display: flex;
}

.mk-flex--center {
    align-items: center;
    justify-content: center;
}

.mk-flex--between {
    align-items: center;
    justify-content: space-between;
}

.mk-flex--wrap {
    flex-wrap: wrap;
}

.mk-flex--column {
    flex-direction: column;
}


/* --------------------------------------------------------------------------
   Elementos apilados
   -------------------------------------------------------------------------- */

.mk-stack {
    display: flex;
    flex-direction: column;
}

.mk-stack--small {
    gap: var(--mk-space-3);
}

.mk-stack--medium {
    gap: var(--mk-space-6);
}

.mk-stack--large {
    gap: var(--mk-space-10);
}


/* --------------------------------------------------------------------------
   Separación del contenido
   -------------------------------------------------------------------------- */

.mk-content-flow > * + * {
    margin-top: var(--mk-space-6);
}

.mk-content-flow--small > * + * {
    margin-top: var(--mk-space-4);
}

.mk-content-flow--large > * + * {
    margin-top: var(--mk-space-10);
}


/* --------------------------------------------------------------------------
   Salto de navegación accesible
   -------------------------------------------------------------------------- */

.skip-link {
    position: fixed;
    z-index: calc(
        var(--mk-z-modal) + 1
    );
    top: 16px;
    left: 16px;
    padding: 12px 18px;
    border-radius: var(--mk-border-radius-md);
    background: var(--mk-white);
    color: var(--mk-indigo-900);
    font-weight: 800;
    box-shadow: var(--mk-shadow-md);
    transform: translateY(-160%);
    transition:
        transform var(--mk-transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}


/* --------------------------------------------------------------------------
   Medios
   -------------------------------------------------------------------------- */

.mk-media-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mk-media-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .mk-section {
        padding-block: var(--mk-space-20);
    }

    .mk-section--large {
        padding-block: var(--mk-space-24);
    }

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

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

    .mk-split {
        gap: var(--mk-space-12);
    }

}


/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .mk-section,
    .mk-section--large {
        padding-block: var(--mk-space-16);
    }

    .mk-section--small {
        padding-block: var(--mk-space-12);
    }

    .mk-section-heading {
        margin-bottom: var(--mk-space-10);
    }

    .mk-grid--2,
    .mk-grid--3,
    .mk-grid--4 {
        grid-template-columns: minmax(
            0,
            1fr
        );
    }

    .mk-split {
        grid-template-columns: minmax(
            0,
            1fr
        );
        gap: var(--mk-space-10);
    }

    .mk-split--reverse
    .mk-split__media {
        order: initial;
    }

}