/* ============================================================================
   Mekanaves — Mapa de España con rutas (mapa 3)
   Hoja de estilos del componente. Todo va prefijado con .mkmapa3 para que no
   toque nada del tema, de Elementor ni de los bloques de mapa anteriores.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. FUENTES
   Si el tema ya carga las tipografías Mekanaves (o ya las declaraste en
   mapa.css), no repitas nada aquí. Si no, sube los .ttf de /fuentes y ajusta
   las rutas: /wp-content/uploads/fuentes/… o /wp-content/themes/<tema>/fuentes/…
   --------------------------------------------------------------------------- */
/*
@font-face{font-family:"Stack Sans Notch";src:url("../fuentes/StackSansNotch-VariableFont_wght.ttf") format("truetype-variations");font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"Stack Sans Headline";src:url("../fuentes/StackSansHeadline-VariableFont_wght.ttf") format("truetype-variations");font-weight:200 700;font-style:normal;font-display:swap}
@font-face{font-family:"Mozilla Text";src:url("../fuentes/MozillaText-VariableFont_wght.ttf") format("truetype-variations");font-weight:300 700;font-style:normal;font-display:swap}
*/

/* ---------------------------------------------------------------------------
   2. TOKENS
   Los mismos valores del design system, acotados al componente. El mapa 3D
   (mapa3.js) usa estas variables en su mensaje de error, así que deben existir.
   Si el tema ya las define en :root, puedes borrar este bloque sin más.
   --------------------------------------------------------------------------- */
.mkmapa3 {
    /* Marca */
    --red: #EB072B;
    --red-hover: #C9102E;
    --red-press: #A80E27;
    --graphite: #3D3C3F;
    --graphite-deep: #2A292B;
    --white: #FFFFFF;

    /* Grises acero */
    --steel-light: #F3F4F5;
    --steel-mid: #D6D9DB;
    --steel: #9BA4AC;
    --steel-dark: #5B6268;

    /* Tipografía */
    --font-display: "Stack Sans Notch", "Stack Sans Headline", system-ui, sans-serif;
    --font-sans: "Mozilla Text", system-ui, -apple-system, sans-serif;
    --fs-body-s: 14px;
}

/* ---------------------------------------------------------------------------
   3. COMPONENTE
   --------------------------------------------------------------------------- */
.mkmapa3 {
    background: var(--white, #fff);
    padding: clamp(56px, 7vw, 96px) clamp(24px, 4vw, 40px);
    font-family: var(--tipo-general, var(--font-sans, system-ui, sans-serif));
    color: var(--graphite, #3D3C3F);
    -webkit-font-smoothing: antialiased;

    .mkmapa3__box {
        max-width: var(--content-max, 1280px);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: clamp(24px, 3vw, 40px);
    }

    /* --- Titular (opcional: en Elementor suele ponerlo el propio widget) -- */
    .mkmapa3__intro {
        max-width: 620px;
    }

    .mkmapa3__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs, 8px);
        font-family: var(--tipo-general, var(--font-sans, system-ui, sans-serif));
        font-size: var(--fs-eyebrow, 12px);
        font-weight: 600;
        letter-spacing: var(--ls-eyebrow, .15em);
        text-transform: uppercase;
        line-height: 1;
        color: var(--red, #EB072B);
    }

    .mkmapa3__bolt {
        display: block;
        flex: none;
        width: 10px;
        height: 10px;
        color: var(--red, #EB072B);
    }

    .mkmapa3__title {
        margin: 12px 0 0;
        font-family: var(--tipo-titulos, var(--font-display, system-ui, sans-serif));
        font-size: var(--fs-h2, 32px);
        font-weight: 700;
        line-height: var(--lh-heading, 1.08);
        letter-spacing: var(--ls-heading, -.01em);
        color: var(--graphite, #3D3C3F);
    }

    /* --- Mapa 3D --------------------------------------------------------- */
    .mkmapa3__lienzo {
        position: relative;
        background: transparent;
        height: clamp(420px, 64vh, 700px);
    }
}