/* ==========================================================================
   Markad Publicidad Estudio — Clases auxiliares
   ========================================================================== */


/* --------------------------------------------------------------------------
   Accesibilidad
   -------------------------------------------------------------------------- */

.mk-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.mk-sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}


/* --------------------------------------------------------------------------
   Visualización
   -------------------------------------------------------------------------- */

.mk-block {
    display: block;
}

.mk-inline-block {
    display: inline-block;
}

.mk-inline-flex {
    display: inline-flex;
}

.mk-hidden {
    display: none !important;
}


/* --------------------------------------------------------------------------
   Posicionamiento
   -------------------------------------------------------------------------- */

.mk-relative {
    position: relative;
}

.mk-absolute {
    position: absolute;
}

.mk-fixed {
    position: fixed;
}

.mk-sticky {
    position: sticky;
}


/* --------------------------------------------------------------------------
   Ancho
   -------------------------------------------------------------------------- */

.mk-w-full {
    width: 100%;
}

.mk-max-w-small {
    max-width: 480px;
}

.mk-max-w-medium {
    max-width: 680px;
}

.mk-max-w-large {
    max-width: 880px;
}

.mk-max-w-none {
    max-width: none;
}


/* --------------------------------------------------------------------------
   Altura
   -------------------------------------------------------------------------- */

.mk-h-full {
    height: 100%;
}

.mk-min-h-screen {
    min-height: 100vh;
}

.mk-min-h-screen-safe {
    min-height: 100svh;
}


/* --------------------------------------------------------------------------
   Alineación de texto
   -------------------------------------------------------------------------- */

.mk-text-left {
    text-align: left;
}

.mk-text-center {
    text-align: center;
}

.mk-text-right {
    text-align: right;
}


/* --------------------------------------------------------------------------
   Colores de texto
   -------------------------------------------------------------------------- */

.mk-text-white {
    color: var(--mk-white);
}

.mk-text-primary {
    color: var(--mk-text-primary);
}

.mk-text-secondary {
    color: var(--mk-text-secondary);
}

.mk-text-magenta {
    color: var(--mk-magenta-500);
}

.mk-text-indigo {
    color: var(--mk-indigo-900);
}


/* --------------------------------------------------------------------------
   Pesos tipográficos
   -------------------------------------------------------------------------- */

.mk-font-light {
    font-weight: 300;
}

.mk-font-regular {
    font-weight: 400;
}

.mk-font-medium {
    font-weight: 500;
}

.mk-font-semibold {
    font-weight: 600;
}

.mk-font-bold {
    font-weight: 700;
}

.mk-font-black {
    font-weight: 900;
}


/* --------------------------------------------------------------------------
   Transformación de texto
   -------------------------------------------------------------------------- */

.mk-uppercase {
    text-transform: uppercase;
}

.mk-lowercase {
    text-transform: lowercase;
}

.mk-capitalize {
    text-transform: capitalize;
}

.mk-nowrap {
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Márgenes automáticos
   -------------------------------------------------------------------------- */

.mk-mx-auto {
    margin-inline: auto;
}

.mk-ml-auto {
    margin-left: auto;
}

.mk-mr-auto {
    margin-right: auto;
}


/* --------------------------------------------------------------------------
   Separación superior
   -------------------------------------------------------------------------- */

.mk-mt-0 {
    margin-top: 0;
}

.mk-mt-4 {
    margin-top: var(--mk-space-4);
}

.mk-mt-6 {
    margin-top: var(--mk-space-6);
}

.mk-mt-8 {
    margin-top: var(--mk-space-8);
}

.mk-mt-10 {
    margin-top: var(--mk-space-10);
}

.mk-mt-12 {
    margin-top: var(--mk-space-12);
}

.mk-mt-16 {
    margin-top: var(--mk-space-16);
}


/* --------------------------------------------------------------------------
   Separación inferior
   -------------------------------------------------------------------------- */

.mk-mb-0 {
    margin-bottom: 0;
}

.mk-mb-4 {
    margin-bottom: var(--mk-space-4);
}

.mk-mb-6 {
    margin-bottom: var(--mk-space-6);
}

.mk-mb-8 {
    margin-bottom: var(--mk-space-8);
}

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

.mk-mb-12 {
    margin-bottom: var(--mk-space-12);
}

.mk-mb-16 {
    margin-bottom: var(--mk-space-16);
}


/* --------------------------------------------------------------------------
   Overflow
   -------------------------------------------------------------------------- */

.mk-overflow-hidden {
    overflow: hidden;
}

.mk-overflow-auto {
    overflow: auto;
}

.mk-no-scroll {
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Bordes redondeados
   -------------------------------------------------------------------------- */

.mk-radius-sm {
    border-radius: var(--mk-border-radius-sm);
}

.mk-radius-md {
    border-radius: var(--mk-border-radius-md);
}

.mk-radius-lg {
    border-radius: var(--mk-border-radius-lg);
}

.mk-radius-xl {
    border-radius: var(--mk-border-radius-xl);
}

.mk-radius-pill {
    border-radius: var(--mk-border-radius-pill);
}


/* --------------------------------------------------------------------------
   Sombras
   -------------------------------------------------------------------------- */

.mk-shadow-sm {
    box-shadow: var(--mk-shadow-sm);
}

.mk-shadow-md {
    box-shadow: var(--mk-shadow-md);
}

.mk-shadow-lg {
    box-shadow: var(--mk-shadow-lg);
}


/* --------------------------------------------------------------------------
   Fondos
   -------------------------------------------------------------------------- */

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

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

.mk-bg-indigo {
    background: var(--mk-indigo-900);
}

.mk-bg-dark {
    background: var(--mk-indigo-950);
}

.mk-bg-gradient {
    background: var(--mk-gradient-brand);
}


/* --------------------------------------------------------------------------
   Visibilidad según dispositivo
   -------------------------------------------------------------------------- */

.mk-desktop-only {
    display: initial;
}

.mk-mobile-only {
    display: none !important;
}


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

@media (max-width: 1024px) {

    .mk-hide-tablet {
        display: none !important;
    }

}


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

@media (max-width: 767px) {

    .mk-desktop-only {
        display: none !important;
    }

    .mk-mobile-only {
        display: initial !important;
    }

    .mk-hide-mobile {
        display: none !important;
    }

    .mk-text-center-mobile {
        text-align: center;
    }

}