:root {
    --nw-lime: #8dc73d;
    --nw-lime-texto: #5f6512;
    --nw-blue: #23ace1;
    --nw-blue-texto: #1b6d8f;
    --nw-ground: #f6f7f5;
    --nw-panel: #edefec;
    --nw-ink: #403f41;
    --nw-dark: #2b2e30;
    --nw-muted: #686b6e;
    --nw-muted-2: #9aa09b;
    --nw-muted-3: #8a908b;
    --nw-muted-dark: #b9beba;
    --nw-border: #dde0de;
    --nw-border-2: #c9cdc7;
    --nw-dark-border: #4a4e51;
    --nw-suave: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/montserrat/montserrat-variavel.woff2') format('woff2');
}

html {
    background: var(--nw-ground);
    color: var(--nw-ink);
    font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
}

[x-cloak] {
    display: none !important;
}

input,
select,
textarea,
button {
    border-radius: 0;
    font-family: inherit;
}

:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

summary {
    list-style: none;
    cursor: pointer;
}

summary::-webkit-details-marker {
    display: none;
}

.progresso {
    transform: scaleX(var(--progresso, 0));
    transform-origin: left center;
}

.js .revelar {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.8s var(--nw-suave);
    transition-delay: var(--atraso, 0ms);
}

.js .revelar-esquerda {
    transform: translateX(-28px);
}

.js .revelar-direita {
    transform: translateX(28px);
}

.js .revelar-sem-fade {
    opacity: 1;
}

.js .revelado {
    opacity: 1;
    transform: none;
}

.js .regua > * {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s var(--nw-suave);
}

.js .regua > :last-child {
    transition-delay: 0.25s;
}

.js .revelado.regua > *,
.js .revelado .regua > * {
    transform: scaleX(1);
}

.fluxo {
    animation: fluxo 16s linear infinite;
}

.pulso {
    animation: pulso 1.6s ease-in-out infinite;
}

.pacote {
    animation: pacote 3.6s var(--nw-suave) infinite;
    animation-delay: var(--atraso, 0ms);
    opacity: 0;
}

.pacote-vertical {
    animation-name: pacote-vertical;
}

.cascata {
    transform-origin: top left;
    transition: transform 0.7s var(--nw-suave), opacity 0.7s ease, border-color 0.3s ease;
}

.ferramenta svg {
    color: var(--nw-muted);
    transition: color 0.3s ease, transform 0.4s var(--nw-suave);
}

.ferramenta:hover svg {
    color: var(--nw-ink);
    transform: scale(1.12);
}

.fluxo-linha {
    stroke-dasharray: 10 18;
    stroke-linecap: square;
    animation: fluir 1.4s linear infinite;
    animation-delay: var(--atraso, 0ms);
}

.no-negocio {
    animation: aparecer 0.7s var(--nw-suave) both;
    animation-delay: var(--atraso, 0ms);
}

.progresso-da-aba {
    transform: scaleX(0);
    transform-origin: left center;
    animation: progresso-da-aba var(--intervalo, 5000ms) linear forwards;
}

@keyframes progresso-da-aba {
    to {
        transform: scaleX(1);
    }
}

.linha-da-resposta {
    animation: aparecer 0.5s var(--nw-suave) both;
    animation-delay: var(--atraso, 0ms);
}

.digitando::after {
    content: '';
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    margin-left: 0.15em;
    vertical-align: text-bottom;
    background: currentColor;
    animation: pulso 1s steps(2, start) infinite;
}

@keyframes fluxo {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

@keyframes pulso {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }
}

@keyframes fluir {
    to {
        stroke-dashoffset: -28;
    }
}

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes pacote {
    0% {
        left: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: calc(100% - 14px);
        opacity: 0;
    }
}

@keyframes pacote-vertical {
    0% {
        top: 0;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        top: calc(100% - 14px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .revelar,
    .js .regua > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .fluxo,
    .pulso,
    .pacote,
    .linha-da-resposta,
    .progresso-da-aba,
    .fluxo-linha,
    .no-negocio,
    .digitando::after {
        animation: none;
    }

    .pacote {
        opacity: 1;
        left: 50%;
    }

    .pacote-vertical {
        top: 50%;
    }

    .progresso,
    .cascata,
    .ferramenta svg {
        transition: none;
    }
}