@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scrollbar-color: #0000ff #000000;
    scrollbar-width: thin;
}


body {
    color: #FAFAFA;

    background-color: #00040f;
    font-family: "Sora", sans-serif;
    position: relative;
    z-index: 1;
}



header {
    position: relative;
    z-index: 1;
}

header::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 80%),
        url('/assets/bg-header.png') no-repeat top/cover;
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
}

nav {
    backdrop-filter: blur(8px);
    background-color: #0073ff10;
    position: relative;
    z-index: 999;
}

.title {
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

.logo-shadow {
    filter: drop-shadow(0 0 10px rgba(0, 115, 255, 0.068)34);
}

.imagem-degrade {
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    filter: drop-shadow(0 0 10px #0073ff34) brightness(0.9);
}

.colors {
    color: #000;
}

.carrosel-shadow {
    box-shadow: 0 0 1000px #0073ffa1;
    /* rotate: -3deg; */
}

.carrosel-shadow-2 {
    box-shadow: 0 0 1000px #00aeffab;
    rotate: 8deg;
}

.container-slide {
    white-space: nowrap;
    overflow: hidden;
    background-color: #0072ff;
}

.paginas-slide {
    display: inline-block;
    animation: carrosel 10s linear infinite;

}

.swiper-slide {
    position: relative;
    z-index: 10 !important;
}

.card-shadow {
    box-shadow: 0 0 1000px #0073ff17;
    transition: all 0.3s ease;
    /* rotate: -3deg; */
}

.card-shadow:hover {
    transform: scale(1.03);
}

.container-slide:hover .paginas-slide {
    animation-play-state: paused;
}

.image-shadow {
    filter: drop-shadow(0 0 10px #0073ff05);
}

.faq-item {
    transition: all 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.open .faq-answer {
    max-height: 500px;
}

.arrow {
    transition: transform 0.3s ease;
}

.faq-item.open .arrow {
    transform: rotate(180deg);
}

.inclusos-shadow {
    filter: drop-shadow(0 0 2px rgba(0, 115, 255, 0.37));
}

.garantia-shadow {
    filter: drop-shadow(0 0 800px #0073ff);
    animation: spin-glow 6s linear infinite;
}

.btn-shadow {
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1));
}

/* ANIMAÇÕES */
@keyframes spin-glow {
    0% {
        transform: rotate(0deg);
        filter: drop-shadow(0 0 800px #0073ff);
    }

    50% {
        filter: drop-shadow(0 0 1200px #0099ff);
    }

    100% {
        transform: rotate(360deg);
        filter: drop-shadow(0 0 800px #0073ff);
    }
}

@keyframes carrosel {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes subirDescer {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes moveTop {
    0% {
        left: -50%;
    }

    100% {
        left: 100%;
    }
}

@keyframes moveRight {
    0% {
        top: -50%;
    }

    100% {
        top: 100%;
    }
}

@keyframes moveBottom {
    0% {
        right: -50%;
    }

    100% {
        right: 100%;
    }
}

@keyframes moveLeft {
    0% {
        bottom: -50%;
    }

    100% {
        bottom: 100%;
    }
}

.animate-moveTop {
    animation: moveTop 2s linear infinite;
}

.animate-moveRight {
    animation: moveRight 2s linear infinite;
}

.animate-moveBottom {
    animation: moveBottom 2s linear infinite;
}

.animate-moveLeft {
    animation: moveLeft 2s linear infinite;
}

.animate-float {
    animation: subirDescer 2.5s ease-in-out infinite;
}

.button {
    --black-700: #0073ff;
    --border_radius: 9999px;
    --transtion: 0.3s ease-in-out;
    --offset: 2px;

    cursor: pointer;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    transform-origin: center;

    padding: 1rem 2rem;
    background-color: transparent;

    border: none;
    border-radius: var(--border_radius);
    transform: scale(calc(1 + (var(--active, 0) * 0.1)));

    transition: all 0.3s ease;
}

.button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;
    height: 100%;
    background-color: var(--black-700);

    border-radius: var(--border_radius);


    transition: all var(--transtion);
    z-index: 0;
}

.button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;
    height: 100%;
    background-color: hsla(260 97% 61% / 0.75);
    background-image: radial-gradient(at 51% 89%,
            hsla(266, 45%, 74%, 1) 0px,
            transparent 50%),
        radial-gradient(at 100% 100%, hsla(266, 36%, 60%, 1) 0px, transparent 50%),
        radial-gradient(at 22% 91%, hsla(266, 36%, 60%, 1) 0px, transparent 50%);
    background-position: top;

    opacity: var(--active, 0);
    border-radius: var(--border_radius);
    transition: opacity var(--transtion);
    z-index: 2;
}

.button:hover {
    opacity: 0.8;
}

.button .dots_border {
    --size_border: calc(100% + 2px);

    overflow: hidden;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: var(--size_border);
    height: var(--size_border);
    background-color: transparent;

    border-radius: var(--border_radius);
    z-index: -10;
}

.button .dots_border::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left;
    transform: rotate(0deg);

    width: 100%;
    height: 2rem;
    background-color: white;

    mask: linear-gradient(transparent 0%, white 120%);
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}


.button .text_button {
    position: relative;
    z-index: 10;

    font-size: 1.1rem;
    font-weight: 500;
    color: white;
}


.beneficios-efeito {
    --black-700: #000;
    --border_radius: 9999px;
    --transtion: 0.3s ease-in-out;
    --offset: 2px;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    transform-origin: center;

    background-color: transparent;

    border: none;
    border-radius: var(--border_radius);
    transform: scale(calc(1 + (var(--active, 0) * 0.1)));

    transition: transform var(--transtion);
}

.beneficios-efeito::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;
    height: 100%;
    background-color: var(--black-700);

    border-radius: var(--border_radius);


    transition: all var(--transtion);
    z-index: 0;
}


.beneficios-efeito .dots_border {
    --size_border: calc(100% + 2px);

    overflow: hidden;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: var(--size_border);
    height: var(--size_border);
    background-color: transparent;

    border-radius: var(--border_radius);
    z-index: -10;
}

.beneficios-efeito .dots_border::before {
    content: "";
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left;
    transform: rotate(0deg);

    width: 100%;
    height: 2rem;
    background-color: #0073ff;

    mask: linear-gradient(transparent 0%, white 120%);
    animation: rotate 4s linear infinite;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}


.beneficios-efeito .text_button {
    position: relative;
    z-index: 10;

    font-size: 1.1rem;
    font-weight: 500;
    color: white;
}

.tablet-shadow {
    filter: drop-shadow(0 0 50px rgba(0, 0, 126, 0.336));
}


/* ESTILOS PARA ÁUDIO */
.audio-card {
    transition: all 0.3s ease;
}

.audio-card:hover {
    transform: scale(1.03);
    border-color: #0072ff !important;
}

.audio-play-btn {
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(0, 115, 255, 0.5);
}

.audio-play-btn:hover {
    box-shadow: 0 0 30px rgba(0, 115, 255, 0.8);
    transform: scale(1.1);
}

.audio-play-btn.playing {
    background-color: #0072ff;
}

.audio-waveform {
    width: 100%;
}

.audio-waveform .bar {
    width: 4px;
    background: linear-gradient(to top, #0072ff, #00c6ff);
    border-radius: 2px;
    transition: all 0.1s ease;
}

.audio-waveform .bar.active {
    height: 100% !important;
    box-shadow: 0 0 10px rgba(0, 115, 255, 0.8);
}

.audio-time {
    font-family: 'Courier New', monospace;
}

.audio-duration {
    font-family: 'Courier New', monospace;
}