.h360-wheel {
    --h360-orange: #ff5d00;
    --h360-text: #23272c;
    --h360-bg: #f4f5f6;
    --h360-step-01: #FFD3B8;
    --h360-step-02: #FFAF80;
    --h360-step-03: #FF8A48;
    --h360-step-04: #FF5D00;
    --h360-step-05: #D94E00;
    background: var(--h360-bg);
    padding: 70px 24px 100px;
}

.h360-wheel,
.h360-wheel * {
    box-sizing: border-box;
}

.h360-wheel .wheel-wrap {
    max-width: 960px;
    margin: 0 auto 20px;
    text-align: center;
}

.h360-wheel .eyebrow {
    color: var(--h360-orange);
    font-family: "BreuerText", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.h360-wheel h2 {
    color: #1F1D21;
    font-family: "BreuerText", sans-serif;
    font-size: 26px;
    font-weight: 700;
    margin: 6px 0 40px;
}

.h360-wheel .wheel-svg-wrap {
    position: relative;
    width: min(560px, 88vw);
    margin: 0 auto;
}

.h360-wheel .wheel-svg {
    display: block;
    overflow: visible;
}

.h360-wheel .wheel-connector {
    fill: none;
    stroke-width: 3px;
    stroke-linecap: round;
    opacity: 1;
}

.h360-wheel .connector-diseno {
    stroke: #FFCDB2;
}

.h360-wheel .connector-materiales {
    stroke: #FFA579;
}

.h360-wheel .connector-prototipo {
    stroke: #FF7F48;
}

.h360-wheel .connector-ensamblaje {
    stroke: #FF5320;
}

.h360-wheel .connector-logistica {
    stroke: #DE451A;
}

.h360-wheel .wheel-sector-link {
    cursor: pointer;
    outline: none;
}

.h360-wheel .wheel-arc {
    transform-origin: 400px 400px;
    transition: filter .32s ease, transform .32s ease;
    animation: h360ArcIn .7s cubic-bezier(.2, .7, .3, 1) both;
}

.h360-wheel .wheel-sector-link:nth-child(1) .wheel-arc { animation-delay: .02s; }
.h360-wheel .wheel-sector-link:nth-child(2) .wheel-arc { animation-delay: .10s; }
.h360-wheel .wheel-sector-link:nth-child(3) .wheel-arc { animation-delay: .18s; }
.h360-wheel .wheel-sector-link:nth-child(4) .wheel-arc { animation-delay: .26s; }
.h360-wheel .wheel-sector-link:nth-child(5) .wheel-arc { animation-delay: .34s; }

.h360-wheel .wheel-arc--01 { fill: var(--h360-step-01); }
.h360-wheel .wheel-arc--02 { fill: var(--h360-step-02); }
.h360-wheel .wheel-arc--03 { fill: var(--h360-step-03); }
.h360-wheel .wheel-arc--04 { fill: var(--h360-step-04); }
.h360-wheel .wheel-arc--05 { fill: var(--h360-step-05); }

.h360-wheel .wheel-sector-link.is-active .wheel-arc,
.h360-wheel .wheel-sector-link:hover .wheel-arc,
.h360-wheel .wheel-sector-link:focus-visible .wheel-arc {
    filter:
        drop-shadow(0 0 6px rgba(255, 93, 0, .62))
        drop-shadow(0 0 15px rgba(255, 93, 0, .42))
        brightness(1.04);
}

.h360-wheel .step-num {
    fill: #fff;
    font-family: "BreuerText", sans-serif;
    font-size: 26px;
    font-weight: 700;
}

.h360-wheel .step-num--dark {
    fill: #312b28;
}

@keyframes h360ArcIn {
    from {
        opacity: 0;
        transform: scale(.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.h360-wheel .wheel-center {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 33%;
    height: 33%;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 12px 32px rgba(20,20,25,.14), 0 2px 8px rgba(20,20,25,.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    text-align: center;
}

.h360-wheel .wheel-center img.brand-logo {
    width: 68%;
    max-width: 150px;
    height: auto;
    display: block;
    margin-bottom: 12px;
}

.h360-wheel .wheel-center-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}

.h360-wheel .wheel-center-title-line1,
.h360-wheel .wheel-center-title-line2 {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #1F1D21;
    text-transform: uppercase;
    font-family: "BreuerText", sans-serif;
}

.h360-wheel .wheel-label {
    position: absolute;
    width: 148px;
    text-align: center;
    transform: translate(-50%, -50%);
}

.h360-wheel .wheel-label a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

.h360-wheel .wheel-label span.num {
    display: block;
    margin-bottom: 3px;
    font-family: "BreuerText", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}

.h360-wheel .wheel-label .num--01 { color: var(--h360-step-01); }
.h360-wheel .wheel-label .num--02 { color: var(--h360-step-02); }
.h360-wheel .wheel-label .num--03 { color: var(--h360-step-03); }
.h360-wheel .wheel-label .num--04 { color: var(--h360-step-04); }
.h360-wheel .wheel-label .num--05 { color: var(--h360-step-05); }

.h360-wheel .wheel-label span.txt {
    display: block;
    color: var(--h360-text);
    font-family: "BreuerText", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: color .25s ease;
}

.h360-wheel .wheel-label.is-active span.txt,
.h360-wheel .wheel-label a:hover span.txt,
.h360-wheel .wheel-label a:focus-visible span.txt {
    color: var(--h360-orange);
}

.h360-wheel .wheel-label img.icon {
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
    display: block;
    object-fit: contain;
    transition: filter .25s ease, transform .25s ease;
}

.h360-wheel .wheel-label.is-active img.icon,
.h360-wheel .wheel-label a:hover img.icon,
.h360-wheel .wheel-label a:focus-visible img.icon {
    filter:
        invert(43%)
        sepia(98%)
        saturate(3431%)
        hue-rotate(2deg)
        brightness(104%)
        contrast(104%);

    transform: translateY(-3px) scale(1.05);
}

html {
    scroll-behavior: smooth;
}



@media (prefers-reduced-motion: reduce) {
    .h360-wheel .wheel-arc,
    .h360-wheel .wheel-label span.txt,
    .h360-wheel .wheel-label img.icon {
        animation: none;
        transition: none;
    }
}

@media (max-width: 600px) {
    .h360-wheel {
        padding: 50px 12px 75px;
    }

    .h360-wheel h2 {
        font-size: 22px;
        margin-bottom: 28px;
    }

    .h360-wheel .wheel-svg-wrap {
        width: min(560px, 96vw);
    }

    .h360-wheel .wheel-label {
        width: 104px;
    }

    .h360-wheel .wheel-label span.txt {
        font-size: 10.5px;
    }

    .h360-wheel .wheel-label img.icon {
        width: 30px;
        height: 30px;
    }

    .h360-wheel .wheel-center img.brand-logo {
        width: 72%;
        margin-bottom: 8px;
    }

    .h360-wheel .wheel-center-title-line1,
    .h360-wheel .wheel-center-title-line2 {
        font-size: 14px;
    }
}