:root {
    --mj-turquesa: var(--mji-aqua, #21a8b5);
    --mj-morado: var(--mji-purple, #4b0d48);
    --mj-magenta: var(--mji-violet, #90218a);
    --mj-blanco: #fff;
    --mj-brand-trail-width: 48px;
}

.mj-brand-trail-host {
    position: relative;
}

.mj-brand-trail {
    position: absolute;
    z-index: 5;
    inset: 0 auto auto 0;
    width: var(--mj-brand-trail-width);
    height: var(--mj-brand-trail-height, 100%);
    overflow: hidden;
    background: var(--mj-brand-trail-color, var(--mj-turquesa));
    color: var(--mj-blanco);
    pointer-events: none;
}

.mj-brand-trail--position-right {
    right: 0;
    left: auto;
}

@media (min-width: 1025px) {
    .mj-brand-trail--hide-desktop {
        display: none;
    }
}

.mj-brand-trail svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
}

.mj-brand-trail path,
.mj-brand-trail circle {
    vector-effect: non-scaling-stroke;
}

/* El hero propio de Talleres empieza a 24 px del borde en portátiles.
   Esta compensación fluida evita solaparlo sin cambiar la anchura del hero. */
.mj-brand-trail-page--talleres .mjto-hero.mj-brand-trail-host > .mjto-shell {
    padding-left: clamp(0px, calc(64px - ((100vw - min(1240px, calc(100vw - 48px))) / 2)), 40px);
}

.mj-brand-trail__route {
    stroke-width: 2;
    stroke-dasharray: 8 10;
    stroke-linecap: round;
}

.mj-brand-trail__heart {
    stroke-width: 3;
    stroke-dasharray: 3 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mj-brand-trail__detail {
    stroke: var(--mj-blanco);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mj-brand-trail__detail--accent {
    fill: var(--mj-magenta);
    stroke: var(--mj-magenta);
}

.mj-brand-trail__horizontal {
    display: none !important;
}

@media (min-width: 701px) and (max-width: 1024px) {
    :root {
        --mj-brand-trail-width: 40px;
    }

    .mj-brand-trail__detail {
        display: none;
    }

    .mj-brand-trail--hide-tablet {
        display: none;
    }
}

@media (max-width: 700px) {
    .mj-brand-trail--hide-phone {
        display: none;
    }

    .mj-brand-trail-page--talleres .mjto-hero.mj-brand-trail-host > .mjto-shell {
        padding-left: 0;
    }

    .mj-brand-trail--mobile-horizontal {
        inset: 0 0 auto;
        width: 100%;
        height: 26px;
    }

    .mj-brand-trail--mobile-horizontal .mj-brand-trail__vertical {
        display: none;
    }

    .mj-brand-trail--mobile-horizontal .mj-brand-trail__horizontal {
        display: block !important;
    }

    .mj-brand-trail--mobile-vertical {
        width: 20px;
    }

    .mj-brand-trail__detail {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mj-brand-trail,
    .mj-brand-trail * {
        animation: none !important;
        transition: none !important;
    }
}

@media print {
    .mj-brand-trail {
        display: none;
    }
}