/**
 * global.css — Mallorkinas Child Theme
 * Estilos base globales: body, contenedores, títulos, párrafos, enlaces, imágenes, utilidades.
 */

/* =========================================================
   BASE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--mk-font-main);
    font-size: var(--mk-font-size-base);
    line-height: var(--mk-line-height-base);
    color: var(--mk-text-main);
    background-color: var(--mk-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   CONTENEDORES
   ========================================================= */

.mk-container {
    max-width: var(--mk-container-width);
    margin-inline: auto;
    padding-inline: 20px;
}

.mk-container--wide {
    max-width: var(--mk-container-width-wide);
    margin-inline: auto;
    padding-inline: 20px;
}

/* =========================================================
   SECCIONES
   ========================================================= */

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

.mk-section--sm {
    padding-block: calc(var(--mk-section-padding) / 2);
}

.mk-section--alt {
    background-color: var(--mk-bg-section);
}

/* =========================================================
   TIPOGRAFÍA
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mk-font-heading);
    line-height: var(--mk-line-height-tight);
    color: var(--mk-text-main);
    margin-top: 0;
}

h1 { font-size: var(--mk-font-size-h1); }
h2 { font-size: var(--mk-font-size-h2); }
h3 { font-size: var(--mk-font-size-h3); }
h4 { font-size: var(--mk-font-size-lg); }

p {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--mk-text-main);
}

/* =========================================================
   ENLACES
   ========================================================= */

a {
    color: var(--mk-color-primary);
    text-decoration: none;
    transition: color var(--mk-transition);
}

a:hover {
    color: var(--mk-color-primary-hover);
}

/* =========================================================
   IMÁGENES
   ========================================================= */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   LISTAS
   ========================================================= */

ul, ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

/* =========================================================
   UTILIDADES
   ========================================================= */

.mk-text-center  { text-align: center; }
.mk-text-left    { text-align: left; }
.mk-text-right   { text-align: right; }
.mk-text-muted   { color: var(--mk-text-muted); }
.mk-text-primary { color: var(--mk-color-primary); }

.mk-mt-0  { margin-top: 0; }
.mk-mb-0  { margin-bottom: 0; }
.mk-mb-sm { margin-bottom: 16px; }
.mk-mb-md { margin-bottom: 32px; }
.mk-mb-lg { margin-bottom: 48px; }

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

.mk-d-none   { display: none; }
.mk-d-block  { display: block; }
.mk-d-flex   { display: flex; }
.mk-d-grid   { display: grid; }

.mk-gap-sm { gap: 8px; }
.mk-gap-md { gap: 16px; }
.mk-gap-lg { gap: 24px; }

/* =========================================================
   DIVIDER
   ========================================================= */

.mk-divider {
    border: none;
    border-top: 1px solid var(--mk-border-color);
    margin-block: 32px;
}

/* =========================================================
   BADGE
   ========================================================= */

.mk-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--mk-radius-pill);
    font-size: var(--mk-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background-color: var(--mk-color-primary);
    color: var(--mk-text-on-primary);
}

.mk-badge--outline {
    background: transparent;
    border: 1px solid var(--mk-color-primary);
    color: var(--mk-color-primary);
}

/* =========================================================
   FOCUS (accesibilidad)
   ========================================================= */

:focus-visible {
    outline: 2px solid var(--mk-color-primary);
    outline-offset: 2px;
}