:root {
    --black: #050505;
    --green-primary: #a8ff3e;
    --green-dark: #08361f;
    --green-light: #c8ff76;
    --yellow-glow: #f3e45c;
    --teal-dark: #0b5864;
}

html {
    background: var(--black);
}

.woko-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--black);
}

.mesh {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
}

.mesh-teal {
    width: 88vw;
    height: 88vw;
    background: var(--teal-dark);
    filter: blur(160px);
    opacity: 0.52;
    transform: translate(-50%, -50%) translate(50vw, 56vh) scale(1.2);
}

.mesh-dark {
    width: 90vw;
    height: 90vw;
    background: var(--green-dark);
    filter: blur(150px);
    opacity: 0.55;
    transform: translate(-50%, -50%) translate(68vw, 78vh) scale(1.25);
}

.mesh-primary {
    width: 55vw;
    height: 55vw;
    background: var(--green-primary);
    filter: blur(130px);
    opacity: 0.5;
    transform: translate(-50%, -50%) translate(78vw, 78vh) scale(1.08);
}

.mesh-yellow {
    width: 24vw;
    height: 24vw;
    background: var(--yellow-glow);
    filter: blur(80px);
    opacity: 0.28;
    transform: translate(-50%, -50%) translate(82vw, 68vh) scale(0.78);
}

.mesh-light {
    width: 30vw;
    height: 30vw;
    background: var(--green-light);
    filter: blur(90px);
    opacity: 0.36;
    transform: translate(-50%, -50%) translate(88vw, 62vh) scale(0.62);
}

.mesh-black {
    width: 80vw;
    height: 80vw;
    background: var(--black);
    filter: blur(130px);
    opacity: 0.8;
    transform: translate(-50%, -50%) translate(18vw, 22vh) scale(1.28);
}

.mesh-noise {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    pointer-events: none;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}

@media (max-width: 768px) {
    .mesh-teal {
        filter: blur(90px);
    }

    .mesh-dark {
        filter: blur(80px);
    }

    .mesh-primary {
        filter: blur(70px);
    }

    .mesh-yellow {
        filter: blur(45px);
    }

    .mesh-light {
        filter: blur(50px);
    }

    .mesh-black {
        filter: blur(70px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mesh {
        will-change: auto;
    }
}

[data-preactio-panel] {
    max-height: none;
    overflow: visible;
}

@media (min-width: 1024px) {
    [data-preactio-panel] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 500ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    [data-preactio][data-open="consigues"] [data-preactio-panel="consigues"],
    [data-preactio][data-open="como"] [data-preactio-panel="como"] {
        max-height: 120px;
    }
}

[data-preactio-progress] {
    transform: scaleX(0);
    transform-origin: left center;
}

.preactio-spot {
    position: absolute;
    width: 28%;
    aspect-ratio: 1;
    background: url("../assets/preactio-spot.png") center / contain no-repeat;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    will-change: left, top, opacity, transform;
}

.preactio-spot--sm {
    width: 16%;
}

.preactio-lock {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    overflow: visible;
    pointer-events: none;
}

.preactio-lock-rect {
    fill: none;
    stroke-linecap: butt;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .preactio-spot {
        opacity: 0;
    }

    .preactio-spot:not(.preactio-spot--sm) {
        opacity: 0.9;
        left: 50%;
        top: 48%;
        transform: translate(-50%, -50%);
    }

    .preactio-lock-rect {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@media (max-width: 767px) {
    [data-header]>div {
        padding-inline: 12px;
    }

    [data-header] img {
        height: 24px;
    }

    [data-header] [data-cases-download] {
        width: 40px;
        height: 40px;
        justify-content: center;
    }

    [data-header] [data-cases-download] span:not([aria-hidden]) {
        display: none;
    }

    [data-header] a[href="#auditoria"] {
        height: 40px;
        padding-inline: 6px;
        font-size: 14px;
    }
}