/* =========================================================
   VRS SPORTS
   SITE INSTITUCIONAL
   ESTILO PRINCIPAL
========================================================= */

:root {
    --vrs-black: #080808;
    --vrs-dark: #101010;
    --vrs-orange: #ff5a00;
    --vrs-white: #ffffff;
    --vrs-gray: #a0a0a0;
    --vrs-border: rgba(255, 255, 255, 0.12);

    --container-width: 1280px;
}


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--vrs-black);
    color: var(--vrs-white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {
    width: min(100% - 80px, var(--container-width));
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

#header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    background: rgba(8, 8, 8, 0.88);

    backdrop-filter: blur(12px);

    border-bottom:
        1px solid
        var(--vrs-border);
}


/* =========================================================
   HEADER CONTAINER
========================================================= */

#header .container {
    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
    display: inline-flex;

    align-items: center;

    gap: 14px;
}

.logo::before {
    content: "";

    display: block;

    width: 5px;
    height: 44px;

    background: var(--vrs-orange);
}

.logo img {
    display: block;

    width: 165px;
    height: auto;
}


/* =========================================================
   NAVEGAÇÃO
========================================================= */

.navigation {
    display: flex;

    align-items: center;

    gap: 34px;

    margin-left: auto;
}

.navigation a {
    position: relative;

    color: var(--vrs-gray);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.5px;

    transition:
        color 0.25s ease;
}

.navigation a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--vrs-orange);

    transition:
        width 0.25s ease;
}

.navigation a:hover {
    color: var(--vrs-white);
}

.navigation a:hover::after {
    width: 100%;
}


/* =========================================================
   INSTAGRAM
========================================================= */

.instagram-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding: 0 20px;

    border:
        1px solid
        var(--vrs-orange);

    color: var(--vrs-white);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.instagram-link:hover {
    background: var(--vrs-orange);

    color: var(--vrs-black);
}


/* =========================================================
   BOTÃO MENU MOBILE
========================================================= */

.menu-button {
    display: none;

    align-items: center;

    justify-content: center;

    width: 44px;
    height: 44px;

    border:
        1px solid
        var(--vrs-orange);

    background:
        var(--vrs-orange);

    color:
        var(--vrs-black);

    cursor: pointer;

    font-size: 26px;

    line-height: 1;

    transition:
        background 0.25s ease,
        color 0.25s ease;
}

.menu-button:hover {
    background: transparent;

    color: var(--vrs-orange);
}


/* =========================================================
   MENU MOBILE
========================================================= */

.mobile-menu {
    display: none;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        var(--vrs-black);

    isolation: isolate;
}


/* =========================================================
   HERO CONTAINER
========================================================= */

.hero .container {
    position: relative;

    min-height: 100vh;

    width:
        min(
            100% - 80px,
            var(--container-width)
        );

    display: flex;

    align-items: center;

    z-index: 2;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1050px;

    padding-top: 70px;
}


/* =========================================================
   EYEBROW
========================================================= */

.hero .eyebrow {
    display: inline-block;

    margin-bottom: 22px;

    color:
        var(--vrs-orange);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

    opacity: 0;

    clip-path:
        inset(
            0 100% 0 0
        );

    animation:
        vrsRevealText
        1s
        cubic-bezier(
            0.77,
            0,
            0.175,
            1
        )
        1s
        forwards;
}


/* =========================================================
   HERO TITLE
========================================================= */

.hero h1 {
    max-width: 1000px;

    margin: 0;

    font-size:
        clamp(
            58px,
            6.5vw,
            104px
        );

    line-height: 0.86;

    font-weight: 900;

    letter-spacing: -4px;

    text-transform: uppercase;

    clip-path:
        inset(
            100% 0 0 0
        );

    animation:
        vrsTitleReveal
        1.3s
        cubic-bezier(
            0.77,
            0,
            0.175,
            1
        )
        0.8s
        forwards;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero p {
    max-width: 520px;

    margin-top: 34px;

    color:
        var(--vrs-gray);

    font-size: 17px;

    line-height: 1.7;

    opacity: 0;

    transform:
        translateY(18px);

    animation:
        vrsDescriptionReveal
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        1.8s
        forwards;
}


/* =========================================================
   HERO BUTTON
========================================================= */

.button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    margin-top: 34px;

    padding: 0 28px;

    background:
        var(--vrs-orange);

    color:
        var(--vrs-black);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(18px);

    animation:
        vrsButtonReveal
        0.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        2s
        forwards;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.button:hover {
    transform:
        translateY(-3px);

    background:
        var(--vrs-white);
}


/* =========================================================
   LINHA VERTICAL DE ENTRADA
========================================================= */

.hero::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;
    height: 0;

    background:
        var(--vrs-orange);

    z-index: 5;

    animation:
        vrsLineReveal
        1.2s
        cubic-bezier(
            0.77,
            0,
            0.175,
            1
        )
        forwards;
}


/* =========================================================
   ASSINATURA EDITORIAL
========================================================= */

.hero-editorial {
    position: absolute;

    right: 80px;
    bottom: 52px;

    display: flex;

    flex-direction: column;

    gap: 5px;

    z-index: 5;

    opacity: 0;

    animation:
        vrsEditorialReveal
        0.8s
        ease
        2.15s
        forwards;
}

.hero-editorial span {
    color:
        rgba(
            255,
            255,
            255,
            0.42
        );

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    text-align: right;
}

.hero-editorial span:first-child {
    color:
        var(--vrs-orange);
}


/* =========================================================
   MARCA VERTICAL
========================================================= */

.hero-vertical {
    position: absolute;

    right: 20px;
    top: 50%;

    color:
        rgba(
            255,
            255,
            255,
            0.18
        );

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 4px;

    writing-mode:
        vertical-rl;

    transform:
        translateY(-50%);

    z-index: 5;

    opacity: 0;

    animation:
        vrsVerticalReveal
        1s
        ease
        2.25s
        forwards;
}


/* =========================================================
   LINHA LARANJA EDITORIAL
========================================================= */

.hero-accent {
    position: absolute;

    right: 80px;
    bottom: 48px;

    width: 112px;
    height: 4px;

    background:
        var(--vrs-orange);

    z-index: 5;

    transform-origin:
        right;

    transform:
        scaleX(0);

    animation:
        vrsAccentReveal
        1s
        cubic-bezier(
            0.77,
            0,
            0.175,
            1
        )
        1.8s
        forwards;
}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll {
    position: absolute;

    left: 50%;
    bottom: 28px;

    width: 1px;
    height: 52px;

    background:
        rgba(
            255,
            255,
            255,
            0.14
        );

    transform:
        translateX(-50%);

    z-index: 10;

    overflow: hidden;
}

.hero-scroll span {
    position: absolute;

    top: -50%;
    left: 0;

    width: 100%;
    height: 45%;

    background:
        var(--vrs-orange);

    animation:
        vrsScrollDown
        1.8s
        cubic-bezier(
            0.77,
            0,
            0.175,
            1
        )
        infinite;
}


/* =========================================================
   IMAGEM — DESATIVADA POR ENQUANTO
========================================================= */

.hero-image {
    display: none;
}


/* =========================================================
   ANIMAÇÕES
========================================================= */

@keyframes vrsLineReveal {

    0% {
        height: 0;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        height: 100%;
        opacity: 0;
    }
}


@keyframes vrsRevealText {

    0% {
        opacity: 0;

        clip-path:
            inset(
                0 100% 0 0
            );
    }

    100% {
        opacity: 1;

        clip-path:
            inset(
                0 0 0 0
            );
    }
}


@keyframes vrsTitleReveal {

    0% {
        clip-path:
            inset(
                100% 0 0 0
            );

        transform:
            translateY(15px);
    }

    100% {
        clip-path:
            inset(
                0 0 0 0
            );

        transform:
            translateY(0);
    }
}


@keyframes vrsDescriptionReveal {

    0% {
        opacity: 0;

        transform:
            translateY(18px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes vrsButtonReveal {

    0% {
        opacity: 0;

        transform:
            translateY(18px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes vrsEditorialReveal {

    0% {
        opacity: 0;

        transform:
            translateY(12px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes vrsVerticalReveal {

    0% {
        opacity: 0;

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

    100% {
        opacity: 1;

        transform:
            translateY(-50%)
            translateX(0);
    }
}


@keyframes vrsAccentReveal {

    to {
        transform:
            scaleX(1);
    }
}


@keyframes vrsScrollDown {

    0% {
        top: -50%;
    }

    50% {
        top: 35%;
    }

    100% {
        top: 110%;
    }
}


/* =========================================================
   RESPONSIVIDADE — MOBILE
========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------
       CONTAINER
    ----------------------------------------- */

    .container {
        width:
            min(
                100% - 32px,
                var(--container-width)
            );
    }


    /* -----------------------------------------
       HEADER
    ----------------------------------------- */

    #header .container {
        min-height: 72px;

        gap: 20px;
    }

    .logo {
        gap: 10px;
    }

    .logo::before {
        width: 4px;
        height: 36px;
    }

    .logo img {
        width: 135px;
    }

    .navigation,
    .instagram-link {
        display: none;
    }

    .menu-button {
        display: flex;

        width: 44px;
        height: 44px;

        font-size: 28px;
    }


    /* -----------------------------------------
       MENU MOBILE
    ----------------------------------------- */

    .mobile-menu {
        display: block;

        position: absolute;

        top: 72px;
        left: 0;

        width: 100%;

        padding: 24px;

        background:
            #080808;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.12
            );

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        transition:
            all 0.25s ease;

        z-index: 999;
    }

    .mobile-menu.active {
        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);
    }

    .mobile-menu nav {
        display: flex;

        flex-direction: column;

        gap: 0;
    }

    .mobile-menu a {
        display: block;

        padding: 18px 0;

        color:
            var(--vrs-white);

        font-size: 16px;

        font-weight: 600;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.12
            );
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero {
        min-height: 100svh;

        align-items: center;
    }

    .hero .container {
        min-height: 100svh;

        width:
            min(
                100% - 32px,
                var(--container-width)
            );

        align-items: center;
    }

    .hero-content {
        max-width: 100%;

        padding-top: 55px;

        padding-bottom: 70px;
    }


    /* -----------------------------------------
       HERO EYEBROW
    ----------------------------------------- */

    .hero .eyebrow {
        margin-bottom: 18px;

        font-size: 10px;

        letter-spacing: 2.5px;
    }


    /* -----------------------------------------
       HERO TITLE
    ----------------------------------------- */

    .hero h1 {
        max-width: 100%;

        font-size:
            clamp(
                42px,
                12vw,
                72px
            );

        line-height: 0.88;

        letter-spacing: -2.5px;
    }


    /* -----------------------------------------
       HERO TEXT
    ----------------------------------------- */

    .hero p {
        max-width: 430px;

        margin-top: 26px;

        font-size: 15px;

        line-height: 1.6;
    }


    /* -----------------------------------------
       HERO BUTTON
    ----------------------------------------- */

    .button {
        min-height: 50px;

        margin-top: 28px;

        padding: 0 24px;

        font-size: 11px;
    }


    /* -----------------------------------------
       LINHA DE ENTRADA
    ----------------------------------------- */

    .hero::before {
        left: 20px;
    }


    /* -----------------------------------------
       ASSINATURA
    ----------------------------------------- */

    .hero-editorial {
        right: 16px;

        bottom: 26px;
    }

    .hero-editorial span {
        font-size: 7px;

        letter-spacing: 1.5px;
    }


    /* -----------------------------------------
       MARCA VERTICAL
    ----------------------------------------- */

    .hero-vertical {
        display: none;
    }


    /* -----------------------------------------
       LINHA LARANJA
    ----------------------------------------- */

    .hero-accent {
        right: 16px;

        bottom: 22px;

        width: 70px;

        height: 3px;
    }


    /* -----------------------------------------
       SCROLL
    ----------------------------------------- */

    .hero-scroll {
        bottom: 22px;

        height: 42px;
    }

}


/* =========================================================
   MOBILE PEQUENO
========================================================= */

@media (max-width: 420px) {

    .logo img {
        width: 125px;
    }

    .hero h1 {
        font-size: 42px;

        letter-spacing: -2px;
    }

    .hero p {
        font-size: 14px;
    }

    .hero-editorial {
        display: none;
    }

    .hero-accent {
        width: 55px;
    }

}
/* =========================================================
   VRS SPORTS — HERO V2
   DEPTH / ATMOSPHERE / EDITORIAL
========================================================= */


/* =========================================================
   CAMADA DE PROFUNDIDADE DO FUNDO
========================================================= */

.hero {
    background:
        radial-gradient(
            circle at 18% 48%,
            rgba(255, 90, 0, 0.055) 0%,
            rgba(255, 90, 0, 0.018) 22%,
            transparent 48%
        ),
        radial-gradient(
            circle at 78% 38%,
            rgba(255, 255, 255, 0.018) 0%,
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #090909 48%,
            #060606 100%
        );

    isolation: isolate;
}


/* =========================================================
   VRS GIGANTE NO FUNDO
========================================================= */

.hero::after {
    content: "VRS";

    position: absolute;

    right: -35px;
    top: 50%;

    transform:
        translateY(-50%)
        scale(1);

    color: transparent;

    font-size:
        clamp(
            260px,
            34vw,
            560px
        );

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -0.08em;

    -webkit-text-stroke:
        1px
        rgba(255, 255, 255, 0.028);

    opacity: 0;

    z-index: 0;

    pointer-events: none;

    animation:
        vrsGhostReveal
        1.8s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        )
        0.7s
        forwards;

    transition:
        transform 1.2s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/* =========================================================
   HALO ATRÁS DO CONTEÚDO
========================================================= */

.hero-content::before {
    content: "";

    position: absolute;

    left: -120px;
    top: 42%;

    width: 520px;
    height: 260px;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 90, 0, 0.055) 0%,
            rgba(255, 90, 0, 0.018) 38%,
            transparent 72%
        );

    filter: blur(28px);

    z-index: -1;

    pointer-events: none;
}


/* =========================================================
   LINHA EDITORIAL ATRÁS DO TÍTULO
========================================================= */

.hero-content::after {
    content: "";

    position: absolute;

    left: 0;
    top: 51%;

    width: 100vw;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018),
            transparent
        );

    z-index: -1;

    pointer-events: none;

    opacity: 0;

    animation:
        vrsLineSoftReveal
        1.2s
        ease
        1.8s
        forwards;
}


/* =========================================================
   TÍTULO — PROFUNDIDADE SUTIL
========================================================= */

.hero h1 {
    position: relative;

    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08),
        0 18px 45px rgba(0, 0, 0, 0.28);

    z-index: 3;
}


/* =========================================================
   EYEBROW — MAIS EDITORIAL
========================================================= */

.hero .eyebrow {
    position: relative;

    padding-left: 15px;
}

.hero .eyebrow::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 5px;
    height: 5px;

    background:
        var(--vrs-orange);

    transform:
        translateY(-50%);

    box-shadow:
        0 0 14px
        rgba(255, 90, 0, 0.45);
}


/* =========================================================
   DESCRIÇÃO — MAIS PROFUNDIDADE
========================================================= */

.hero p {
    position: relative;

    text-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.45);
}


/* =========================================================
   BOTÃO — MICRO PROFUNDIDADE
========================================================= */

.button {
    position: relative;

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.25);

    overflow: hidden;
}

.button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.16),
            transparent
        );

    transition:
        left 0.6s ease;
}

.button:hover::before {
    left: 100%;
}


/* =========================================================
   ASSINATURA — PROFUNDIDADE
========================================================= */

.hero-editorial {
    padding-right: 2px;

    filter:
        drop-shadow(
            0 8px 20px
            rgba(0, 0, 0, 0.4)
        );
}


/* =========================================================
   LINHA LARANJA — GLOW MUITO SUTIL
========================================================= */

.hero-accent {
    box-shadow:
        0 0 18px
        rgba(255, 90, 0, 0.18);
}


/* =========================================================
   SCROLL — MAIS PRESENTE
========================================================= */

.hero-scroll {
    box-shadow:
        0 0 12px
        rgba(255, 90, 0, 0.05);
}


/* =========================================================
   MICRO GRADE EDITORIAL
========================================================= */

.hero {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.012) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at 18% 48%,
            rgba(255, 90, 0, 0.055) 0%,
            rgba(255, 90, 0, 0.018) 22%,
            transparent 48%
        ),
        radial-gradient(
            circle at 78% 38%,
            rgba(255, 255, 255, 0.018) 0%,
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #050505 0%,
            #090909 48%,
            #060606 100%
        );

    background-size:
        80px 80px,
        80px 80px,
        auto,
        auto,
        auto;

    background-position:
        center,
        center,
        center,
        center,
        center;
}


/* =========================================================
   ANIMAÇÃO DO VRS GIGANTE
========================================================= */

@keyframes vrsGhostReveal {

    0% {
        opacity: 0;

        transform:
            translateY(-50%)
            translateX(40px)
            scale(1.04);
    }

    100% {
        opacity: 1;

        transform:
            translateY(-50%)
            translateX(0)
            scale(1);
    }
}


/* =========================================================
   LINHA SUAVE
========================================================= */

@keyframes vrsLineSoftReveal {

    0% {
        opacity: 0;

        transform:
            translateX(-40px);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);
    }
}


/* =========================================================
   MOVIMENTO MUITO SUTIL DO FUNDO
========================================================= */

@media (min-width: 769px) {

    .hero::after {
        animation:
            vrsGhostReveal
            1.8s
            cubic-bezier(
                0.22,
                1,
                0.36,
                1
            )
            0.7s
            forwards,
            vrsGhostFloat
            12s
            ease-in-out
            2.5s
            infinite;
    }

}


@keyframes vrsGhostFloat {

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

    50% {
        transform:
            translateY(
                calc(-50% - 8px)
            )
            translateX(-5px);
    }
}


/* =========================================================
   MOBILE — REDUZIR A PROFUNDIDADE
========================================================= */

@media (max-width: 768px) {

    .hero::after {
        right: -120px;

        font-size: 300px;

        opacity: 0.65;
    }

    .hero-content::before {
        left: -80px;

        width: 360px;
        height: 220px;

        opacity: 0.7;
    }

    .hero-content::after {
        width: 100vw;

        opacity: 0.5;
    }

    .hero {
        background-size:
            60px 60px,
            60px 60px,
            auto,
            auto,
            auto;
    }

}


/* =========================================================
   ACESSIBILIDADE — REDUZIR MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero *,
    .hero::before,
    .hero::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}
.hero::after {
    opacity: 0.55;
}
/* =========================================================
   VRS GHOST — PARALLAX
========================================================= */

@media (min-width: 769px) {

    .hero::after {
        margin-left: var(--vrs-parallax-x, 0px);
        margin-top: var(--vrs-parallax-y, 0px);

        transition:
            margin-left 0.15s linear,
            margin-top 0.15s linear;
    }

}
/* =========================================================
   VRS HERO — ATMOSFERA MOBILE
========================================================= */

@media (max-width: 768px) {

    .hero {
        background-color: #070707;

        box-shadow:
            inset 0 120px 160px rgba(255, 90, 0, 0.018),
            inset 0 -160px 180px rgba(0, 0, 0, 0.35);
    }


    /* Luz ambiente atrás do conteúdo */

    .hero .container::before {
        content: "";

        position: absolute;

        top: 5%;
        left: -35%;

        width: 130%;
        height: 70%;

        background:
            radial-gradient(
                ellipse at 30% 40%,
                rgba(255, 90, 0, 0.065) 0%,
                rgba(255, 90, 0, 0.025) 25%,
                transparent 62%
            ),
            radial-gradient(
                ellipse at 75% 25%,
                rgba(255, 255, 255, 0.018) 0%,
                transparent 48%
            );

        filter: blur(18px);

        pointer-events: none;

        z-index: -1;
    }


    /* Pequena atmosfera na parte inferior */

    .hero .container::after {
        content: "";

        position: absolute;

        left: 15%;
        bottom: -10%;

        width: 70%;
        height: 35%;

        background:
            radial-gradient(
                ellipse,
                rgba(255, 90, 0, 0.025) 0%,
                transparent 70%
            );

        filter: blur(30px);

        pointer-events: none;

        z-index: -1;
    }


    /* Deixa a grade ainda mais integrada */

    .hero {
        background-image:
            linear-gradient(
                rgba(255, 255, 255, 0.010) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.010) 1px,
                transparent 1px
            );

        background-size:
            60px 60px,
            60px 60px;

        background-position:
            center,
            center;
    }

}
/* =========================================================
   VRS SPORTS — SEÇÃO 02 / A VRS
   EXPERIÊNCIA • HISTÓRIA • IDENTIDADE
   VERSÃO LIMPA
========================================================= */

.about {
    position: relative;
    min-height: 100vh;

    padding: 150px 0 130px;

    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            650px 500px at 8% 38%,
            rgba(255, 90, 0, 0.055),
            transparent 72%
        ),
        radial-gradient(
            500px 500px at 88% 62%,
            rgba(255, 255, 255, 0.025),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            #080808 0%,
            #0c0c0c 48%,
            #080808 100%
        );
}


/* =========================================================
   GRID EDITORIAL
========================================================= */

.about::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.014) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.014) 1px,
            transparent 1px
        );

    background-size:
        90px 90px,
        90px 90px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 15%,
            black 82%,
            transparent 100%
        );

    pointer-events: none;

    opacity: 0.65;

    z-index: -3;
}


/* =========================================================
   LUZ AMBIENTE
========================================================= */

.about::after {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    left: -300px;
    top: 20%;

    background:
        radial-gradient(
            circle,
            rgba(255, 80, 0, 0.075),
            transparent 68%
        );

    filter: blur(35px);

    pointer-events: none;

    z-index: -2;
}


/* =========================================================
   NÚMERO GIGANTE — 02
========================================================= */

.about-background-number {
    position: absolute;

    right: -55px;
    top: 48%;

    transform: translateY(-50%);

    font-size:
        clamp(
            300px,
            38vw,
            620px
        );

    font-weight: 900;

    line-height: 0.72;

    letter-spacing: -0.09em;

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255, 255, 255, 0.025);

    opacity: 0.9;

    pointer-events: none;
    user-select: none;

    z-index: -1;
}


/* =========================================================
   CONTAINER
========================================================= */

.about .container {
    position: relative;

    z-index: 5;
}


/* =========================================================
   TOPO DA SEÇÃO
========================================================= */

.about-top {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-bottom: 85px;
}


/* =========================================================
   LABEL
========================================================= */

.about-label {
    position: relative;

    display: flex;

    align-items: center;

    gap: 16px;

    color: var(--vrs-orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.24em;

    text-transform: uppercase;

    white-space: nowrap;
}

.about-label::before {
    content: "";

    width: 5px;
    height: 5px;

    flex-shrink: 0;

    background:
        var(--vrs-orange);

    box-shadow:
        0 0 15px
        rgba(255, 90, 0, 0.4);
}


/* =========================================================
   ÍNDICE
========================================================= */

.about-index {
    color:
        rgba(255, 255, 255, 0.24);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.18em;
}


/* =========================================================
   LINHA SUPERIOR
========================================================= */

.about-line {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 90, 0, 0.25),
            transparent
        );
}


/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

.about-layout {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        420px;

    gap: 90px;

    align-items: center;
}


/* =========================================================
   MICRO LINHA CENTRAL
========================================================= */

.about-layout::before {
    content: "";

    position: absolute;

    width: 1px;
    height: 150px;

    left: 53%;

    top: 4%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 90, 0, 0.28),
            transparent
        );

    opacity: 0.55;

    pointer-events: none;
}


/* =========================================================
   TÍTULO
========================================================= */

.about-title {
    position: relative;

    max-width: 850px;

    margin: 0;

    color: #f4f4f4;

    font-size:
        clamp(
            54px,
            6vw,
            92px
        );

    line-height: 0.88;

    font-weight: 900;

    letter-spacing: -0.055em;

    text-transform: uppercase;

    text-shadow:
        0 0 35px
        rgba(255, 255, 255, 0.025);
}


/* =========================================================
   PARTE SECUNDÁRIA DO TÍTULO
========================================================= */

.about-title span {
    display: block;

    margin-top: 3px;

    color:
        rgba(255, 255, 255, 0.25);
}


/* =========================================================
   DETALHE LARANJA DO TÍTULO
========================================================= */

.about-title::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: -28px;

    width: 100px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--vrs-orange),
            transparent
        );

    box-shadow:
        0 0 16px
        rgba(255, 90, 0, 0.22);
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.about-description {
    position: relative;

    max-width: 620px;

    margin-top: 48px;

    display: grid;

    gap: 18px;
}


/* =========================================================
   MARCAÇÃO LATERAL
========================================================= */

.about-description::before {
    content: "";

    position: absolute;

    left: -22px;

    top: 3px;

    width: 2px;
    height: 58px;

    background:
        linear-gradient(
            to bottom,
            var(--vrs-orange),
            transparent
        );

    opacity: 0.75;
}


/* =========================================================
   PARÁGRAFOS
========================================================= */

.about-description p {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.56);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   ASSINATURA
========================================================= */

.about-signature {
    margin-top: 40px;

    padding-left: 15px;

    border-left:
        2px solid
        var(--vrs-orange);

    display: flex;

    flex-direction: column;

    gap: 7px;
}


.about-signature span:first-child {
    color:
        var(--vrs-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.22em;
}


.about-signature span:last-child {
    color:
        rgba(255, 255, 255, 0.3);

    font-size: 9px;

    letter-spacing: 0.18em;
}


/* =========================================================
   ÁREA DA FOTO
========================================================= */

.about-visual {
    position: relative;

    width: 100%;
    max-width: 420px;

    justify-self: end;

    z-index: 3;
}


/* =========================================================
   CAMADA ATRÁS DA FOTO
========================================================= */

.about-visual::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    left: -22px;
    top: 22px;

    border:
        1px solid
        rgba(255, 90, 0, 0.18);

    background:
        linear-gradient(
            135deg,
            rgba(255, 90, 0, 0.035),
            transparent 60%
        );

    z-index: -1;
}


/* =========================================================
   LUZ ATRÁS DA FOTO
========================================================= */

.about-visual::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 500px;

    right: -90px;
    top: 0;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 80, 0, 0.085),
            transparent 70%
        );

    filter: blur(38px);

    z-index: -2;

    pointer-events: none;
}


/* =========================================================
   FRAME DA FOTO
========================================================= */

.about-photo-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    isolation: isolate;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    background: #101010;

    box-shadow:
        0 35px 80px
        rgba(0, 0, 0, 0.55),

        0 0 0 1px
        rgba(255, 255, 255, 0.02),

        0 0 70px
        rgba(255, 80, 0, 0.035);
}


/* =========================================================
   FOTO
========================================================= */

.about-photo-frame img {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;

    transform:
        scale(1.015);

    filter:
        saturate(0.95)
        contrast(1.04)
        brightness(0.92);

    transition:
        transform 0.9s
        cubic-bezier(.22, 1, .36, 1),

        filter 0.5s ease;
}


/* =========================================================
   HOVER DA FOTO
========================================================= */

.about-photo-frame:hover img {
    transform:
        scale(1.045);

    filter:
        saturate(1.05)
        contrast(1.05)
        brightness(0.98);
}


/* =========================================================
   MARCAÇÃO SUPERIOR DA FOTO
========================================================= */

.about-photo-frame::before {
    content: "";

    position: absolute;

    top: -1px;
    left: -1px;

    width: 75px;
    height: 75px;

    border-top:
        2px solid
        var(--vrs-orange);

    border-left:
        2px solid
        var(--vrs-orange);

    box-shadow:
        0 0 30px
        rgba(255, 80, 0, 0.12);

    z-index: 5;

    pointer-events: none;
}


/* =========================================================
   LINHA LARANJA SOBRE A FOTO
========================================================= */

.about-photo-frame::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 25px;

    width: 120px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--vrs-orange)
        );

    box-shadow:
        0 0 20px
        rgba(255, 80, 0, 0.3);

    z-index: 5;

    pointer-events: none;
}


/* =========================================================
   NÚMERO / IDENTIFICAÇÃO DA FOTO
========================================================= */

.about-photo-number {
    position: absolute;

    left: -28px;
    top: 30px;

    color:
        var(--vrs-orange);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.2em;

    writing-mode: vertical-rl;

    z-index: 6;
}


/* =========================================================
   FUNDADOR
========================================================= */

.about-founder {
    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: baseline;

    gap: 15px;

    margin-top: 20px;

    padding-top: 17px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);
}


/* =========================================================
   PEQUENA LINHA LARANJA
========================================================= */

.about-founder::before {
    content: "";

    position: absolute;

    left: 0;
    top: -1px;

    width: 45px;
    height: 1px;

    background:
        var(--vrs-orange);
}


/* =========================================================
   NOME
========================================================= */

.about-founder strong {
    color: #fff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* =========================================================
   FUNÇÃO
========================================================= */

.about-founder span {
    color:
        rgba(255, 255, 255, 0.3);

    font-size: 8px;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


/* =========================================================
   EXPERIÊNCIA
========================================================= */

.about-experience {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        1fr
        minmax(180px, 0.7fr);

    align-items: end;

    gap: 35px;

    margin-top: 105px;

    padding:
        38px 0
        35px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);
}


/* =========================================================
   LINHA LARANJA DA EXPERIÊNCIA
========================================================= */

.about-experience::before {
    content: "";

    position: absolute;

    left: 0;
    top: -1px;

    width: 110px;
    height: 1px;

    background:
        var(--vrs-orange);

    box-shadow:
        0 0 18px
        rgba(255, 80, 0, 0.3);
}


/* =========================================================
   NÚMERO 20+
========================================================= */

.experience-number {
    position: relative;

    color: #f4f4f4;

    font-size:
        clamp(
            100px,
            11vw,
            175px
        );

    line-height: 0.72;

    font-weight: 900;

    letter-spacing: -0.08em;

    text-shadow:
        0 0 45px
        rgba(255, 255, 255, 0.035);
}


.experience-number span {
    color:
        var(--vrs-orange);

    text-shadow:
        0 0 25px
        rgba(255, 80, 0, 0.25);
}


/* =========================================================
   TEXTO DA EXPERIÊNCIA
========================================================= */

.experience-copy {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.experience-copy span {
    color:
        var(--vrs-orange);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.25em;

    text-transform: uppercase;
}


.experience-copy strong {
    max-width: 250px;

    color:
        rgba(255, 255, 255, 0.7);

    font-size: 16px;

    line-height: 1.05;

    text-transform: uppercase;
}


/* =========================================================
   LINHA FINAL
========================================================= */

.experience-line {
    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--vrs-orange),
            transparent
        );
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .about {
        min-height: auto;

        padding:
            105px 0
            85px;
    }


    .about::before {
        background-size:
            60px 60px;

        opacity: 0.42;
    }


    .about-background-number {
        right: -95px;

        top: 30%;

        font-size: 290px;

        opacity: 0.48;
    }


    .about-top {
        margin-bottom: 55px;
    }


    .about-index {
        display: none;
    }


    .about-layout {
        display: flex;

        flex-direction: column;

        gap: 60px;
    }


    .about-layout::before {
        display: none;
    }


    .about-title {
        font-size:
            clamp(
                46px,
                12.5vw,
                68px
            );

        line-height: 0.88;
    }


    .about-description {
        margin-top: 40px;

        padding-left: 18px;
    }


    .about-description::before {
        left: 0;
    }


    .about-description p {
        font-size: 15px;

        line-height: 1.68;
    }


    .about-visual {
        width: 84%;

        max-width: none;

        margin-left: auto;

        margin-right: 16px;
    }


    .about-visual::before {
        left: -16px;
        top: 16px;
    }


    .about-visual::after {
        width: 260px;
        height: 360px;

        right: -60px;
    }


    .about-photo-frame {
        aspect-ratio: 4 / 5;
    }


    .about-photo-number {
        left: -22px;
    }


    .about-founder {
        flex-direction: column;

        align-items: flex-start;

        gap: 7px;
    }


    .about-experience {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-top: 75px;
    }


    .experience-number {
        font-size: 120px;
    }


    .experience-line {
        width: 75%;
    }
}


/* =========================================================
   MOBILE PEQUENO
========================================================= */

@media (max-width: 420px) {

    .about {
        padding:
            90px 0
            70px;
    }


    .about-background-number {
        right: -120px;

        font-size: 260px;
    }


    .about-visual {
        width: 88%;

        margin-right: 8px;
    }


    .about-title {
        font-size:
            clamp(
                42px,
                12.5vw,
                60px
            );
    }


    .experience-number {
        font-size: 105px;
    }
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .about *,
    .about::before,
    .about::after {
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   SCROLLBAR — VRS SPORTS
   ========================================================= */

html {
    scrollbar-width: thin;
    scrollbar-color: #ff5a00 #090909;
}

/* Chrome / Edge / Safari */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #090909;
}

::-webkit-scrollbar-thumb {
    background: #ff5a00;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff6a1a;
}
/* =========================================================
   VRS SPORTS — SEÇÃO 03 / NOSSO PROPÓSITO
   DIREÇÃO VISUAL EDITORIAL
========================================================= */

.purpose {
    position: relative;
    min-height: 100vh;
    padding: 150px 0 170px;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            650px 450px at 8% 30%,
            rgba(255, 90, 0, 0.045),
            transparent 72%
        ),
        radial-gradient(
            500px 500px at 92% 80%,
            rgba(255, 255, 255, 0.018),
            transparent 72%
        ),
        linear-gradient(
            135deg,
            #080808 0%,
            #0b0b0b 48%,
            #070707 100%
        );
}


/* ---------------------------------------------------------
   GRID / TEXTURA DE FUNDO
--------------------------------------------------------- */

.purpose::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    opacity: 0.55;
    pointer-events: none;
    z-index: -3;
}


/* ---------------------------------------------------------
   LUZ AMBIENTE
--------------------------------------------------------- */

.purpose::after {
    content: "";
    position: absolute;

    width: 650px;
    height: 650px;

    left: -300px;
    top: 18%;

    background:
        radial-gradient(
            circle,
            rgba(255, 80, 0, 0.065),
            transparent 68%
        );

    filter: blur(35px);
    pointer-events: none;
    z-index: -2;
}


/* ---------------------------------------------------------
   CONTAINER
--------------------------------------------------------- */

.purpose > .container {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   CABEÇALHO
--------------------------------------------------------- */

.purpose .section-heading {
    position: relative;

    max-width: 1050px;

    margin: 0 0 95px;
    padding-left: 0;
}


/* Pequeno marcador */

.purpose .section-heading::before {
    content: "";

    display: block;

    width: 62px;
    height: 3px;

    margin-bottom: 28px;

    background:
        linear-gradient(
            90deg,
            var(--vrs-orange),
            rgba(255,90,0,0.08)
        );

    box-shadow:
        0 0 18px rgba(255,90,0,0.18);
}


/* Linha editorial lateral */

.purpose .section-heading::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 2px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            var(--vrs-orange),
            rgba(255,90,0,0.05),
            transparent
        );

    opacity: 0.8;
}


/* ---------------------------------------------------------
   EYEBROW
--------------------------------------------------------- */

.purpose .section-heading .eyebrow {
    display: block;

    margin-bottom: 22px;
    padding-left: 24px;

    color: var(--vrs-orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.25em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   TÍTULO
--------------------------------------------------------- */

.purpose .section-heading h2 {
    position: relative;

    max-width: 950px;

    margin: 0;
    padding-left: 24px;

    color: #f4f4f4;

    font-size: clamp(48px, 6vw, 88px);
    line-height: 0.92;

    font-weight: 900;
    letter-spacing: -0.055em;

    text-transform: uppercase;

    text-shadow:
        0 0 35px rgba(255,255,255,0.025);
}


/* palavra responsabilidade com contraste */

.purpose .section-heading h2::first-line {
    color: #f5f5f5;
}


/* ---------------------------------------------------------
   TEXTO
--------------------------------------------------------- */

.purpose .section-heading p {
    max-width: 700px;

    margin: 32px 0 0;
    padding-left: 24px;

    color: rgba(255,255,255,0.58);

    font-size: 16px;
    line-height: 1.85;

    letter-spacing: 0.01em;
}


/* ---------------------------------------------------------
   LINHA ENTRE TÍTULO E VALORES
--------------------------------------------------------- */

.purpose .values-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 0;

    margin-top: 0;

    border-top:
        1px solid rgba(255,255,255,0.10);
}


/* ---------------------------------------------------------
   CARDS / VALORES
--------------------------------------------------------- */

.purpose .value-card {
    position: relative;

    min-height: 190px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 38px 42px 40px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.018),
            rgba(255,255,255,0.005)
        );

    border-right:
        1px solid rgba(255,255,255,0.08);

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    overflow: hidden;

    transition:
        background 0.35s ease,
        transform 0.35s ease,
        border-color 0.35s ease;
}


/* detalhe laranja superior */

.purpose .value-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 42px;
    height: 2px;

    background: var(--vrs-orange);

    box-shadow:
        0 0 18px rgba(255,90,0,0.25);

    transition:
        width 0.35s ease;
}


/* brilho interno */

.purpose .value-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    bottom: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,90,0,0.055),
            transparent 68%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   NÚMERO
--------------------------------------------------------- */

.purpose .value-card > span {
    display: block;

    margin-bottom: 28px;

    color: var(--vrs-orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.22em;

    opacity: 0.9;
}


/* ---------------------------------------------------------
   NOME DO VALOR
--------------------------------------------------------- */

.purpose .value-card h3 {
    position: relative;

    margin: 0;

    color: #eeeeee;

    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -0.025em;
}


/* ---------------------------------------------------------
   EFEITO HOVER
--------------------------------------------------------- */

.purpose .value-card:hover {
    background:
        linear-gradient(
            135deg,
            rgba(255,90,0,0.055),
            rgba(255,255,255,0.015)
        );

    border-color:
        rgba(255,90,0,0.22);

    transform:
        translateY(-3px);
}


.purpose .value-card:hover::before {
    width: 100%;
}


/* ---------------------------------------------------------
   ORGANIZAÇÃO DOS 5 VALORES
--------------------------------------------------------- */

/* primeiro */
.purpose .value-card:nth-child(1) {
    border-left:
        1px solid rgba(255,255,255,0.08);
}


/* terceiro */
.purpose .value-card:nth-child(3) {
    border-left:
        1px solid rgba(255,255,255,0.08);
}


/* quinto ocupa a largura inteira */

.purpose .value-card:nth-child(5) {
    grid-column: 1 / -1;

    min-height: 210px;

    border-left:
        1px solid rgba(255,255,255,0.08);
}


/* quinto maior */

.purpose .value-card:nth-child(5) h3 {
    font-size: clamp(28px, 3vw, 42px);
}


/* ---------------------------------------------------------
   DETALHE EDITORIAL — NÚMERO 03 GIGANTE
--------------------------------------------------------- */

.purpose > .container::after {
    content: "03";

    position: absolute;

    right: -45px;
    top: -80px;

    color: transparent;

    font-size: clamp(280px, 34vw, 520px);
    line-height: 0.8;

    font-weight: 900;

    letter-spacing: -0.08em;

    -webkit-text-stroke:
        1px rgba(255,255,255,0.025);

    opacity: 0.8;

    pointer-events: none;
    user-select: none;

    z-index: -1;
}


/* ---------------------------------------------------------
   RESPONSIVO — TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {

    .purpose {
        padding: 120px 0 130px;
    }

    .purpose .section-heading {
        margin-bottom: 70px;
    }

    .purpose .section-heading h2 {
        font-size: clamp(44px, 8vw, 68px);
    }

    .purpose .value-card {
        min-height: 170px;
        padding: 32px;
    }

}


/* ---------------------------------------------------------
   RESPONSIVO — MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {

    .purpose {
        padding: 95px 0 100px;
    }

    .purpose .section-heading {
        margin-bottom: 55px;
    }

    .purpose .section-heading h2 {
        padding-left: 20px;

        font-size: clamp(38px, 11vw, 58px);
        line-height: 0.94;
    }

    .purpose .section-heading p {
        padding-left: 20px;

        font-size: 14px;
        line-height: 1.75;
    }

    .purpose .section-heading .eyebrow {
        padding-left: 20px;
    }

    .purpose .values-grid {
        grid-template-columns: 1fr;
    }

    .purpose .value-card {
        min-height: 150px;

        padding: 28px 25px;

        border-left:
            1px solid rgba(255,255,255,0.08);
    }

    .purpose .value-card:nth-child(5) {
        grid-column: auto;
        min-height: 170px;
    }

    .purpose .value-card h3 {
        font-size: 23px;
    }

    .purpose .value-card:nth-child(5) h3 {
        font-size: 28px;
    }

    .purpose > .container::after {
        right: -50px;
        top: -20px;

        font-size: 280px;
    }

}


/* ---------------------------------------------------------
   ACESSIBILIDADE / REDUÇÃO DE MOVIMENTO
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .purpose .value-card {
        transition: none;
    }

}
/* =========================================================
   VRS SPORTS — REFINO FINAL
   MENOS ESPAÇO MORTO • MAIS PROFUNDIDADE • TRANSIÇÕES
========================================================= */

:root {
    --vrs-orange-soft: rgba(255, 90, 0, 0.16);
    --vrs-white-soft: rgba(255,255,255,0.06);
    --vrs-white-faint: rgba(255,255,255,0.025);
    --vrs-section-space: clamp(82px, 8vw, 118px);
}

/* Espaçamento geral mais compacto */
.section {
    position: relative;
    padding: var(--vrs-section-space) 0;
    overflow: hidden;
    isolation: isolate;
}

/* As seções não precisam ocupar uma tela inteira */
.about,
.purpose {
    min-height: auto;
}

.about {
    padding: 96px 0 92px;
}

.purpose {
    padding: 94px 0 100px;
}

/* Fundo editorial comum */
.section:not(.hero)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

.section:not(.hero)::after {
    content: "";
    position: absolute;
    width: 46vw;
    height: 46vw;
    max-width: 650px;
    max-height: 650px;
    right: -18vw;
    top: 8%;
    z-index: -2;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.018);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(255,255,255,0.006),
        0 0 0 140px rgba(255,255,255,0.004);
    transform: translate3d(var(--vrs-parallax-x, 0px), var(--vrs-parallax-y, 0px), 0);
    transition: transform 0.25s linear;
}

/* Cabeçalho das seções */
.section-heading {
    position: relative;
    margin-bottom: clamp(42px, 5vw, 68px);
}

.section-heading .eyebrow,
.eyebrow {
    position: relative;
    display: inline-block;
    color: var(--vrs-orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.section-heading h2 {
    position: relative;
    max-width: 1000px;
    margin-top: 16px;
    font-size: clamp(48px, 6.2vw, 92px);
    line-height: 0.9;
    letter-spacing: -3px;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 16px 45px rgba(0,0,0,0.3);
}

.section-heading p {
    max-width: 620px;
    margin-top: 24px;
    color: var(--vrs-gray);
    font-size: 16px;
    line-height: 1.7;
}

/* Linha de transição entre blocos */
.vrs-section-transition {
    position: relative;
    height: 76px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #080808;
    border-top: 1px solid rgba(255,255,255,0.035);
    border-bottom: 1px solid rgba(255,255,255,0.035);
}

.vrs-section-transition::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 18vw;
    min-width: 120px;
    height: 1px;
    background: linear-gradient(90deg, var(--vrs-orange), transparent);
    transform-origin: left;
    transform: scaleX(0.35);
    transition: transform 1s cubic-bezier(.22,1,.36,1);
}

.vrs-section-transition.is-visible::before {
    transform: scaleX(1);
}

.vrs-section-transition-track {
    display: flex;
    align-items: center;
    gap: 54px;
    width: max-content;
    padding-left: 24vw;
    color: rgba(255,255,255,0.11);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    animation: vrsMarquee 24s linear infinite;
}

.vrs-section-transition-track b {
    color: var(--vrs-orange);
    font-weight: 800;
}

@keyframes vrsMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Reveal no scroll */
.vrs-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity 0.8s cubic-bezier(.22,1,.36,1),
        transform 0.8s cubic-bezier(.22,1,.36,1);
}

.vrs-reveal.vrs-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.vrs-reveal-left {
    opacity: 0;
    transform: translate3d(-34px,0,0);
    transition:
        opacity 0.85s cubic-bezier(.22,1,.36,1),
        transform 0.85s cubic-bezier(.22,1,.36,1);
}

.vrs-reveal-left.vrs-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
}

/* =========================================================
   04 — DIFERENCIAL
========================================================= */
.differential {
    padding: 96px 0 100px;
}

.differential-grid,
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--vrs-border);
    border-left: 1px solid rgba(255,255,255,0.04);
}

.differential-card,
.process-card {
    position: relative;
    min-height: 230px;
    padding: 30px 34px 34px;
    border-right: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: linear-gradient(145deg, rgba(255,255,255,0.018), transparent 55%);
    transition: transform .45s cubic-bezier(.22,1,.36,1), background .35s ease;
}

.differential-card::before,
.process-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 2px;
    background: var(--vrs-orange);
    transform: scaleX(0.35);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.differential-card:hover,
.process-card:hover {
    transform: translateY(-6px);
    background: linear-gradient(145deg, rgba(255,90,0,0.055), rgba(255,255,255,0.012));
}

.differential-card:hover::before,
.process-card:hover::before {
    transform: scaleX(1);
}

.differential-card > span,
.process-card > span {
    color: var(--vrs-orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.differential-card h3,
.process-card h3 {
    margin-top: 62px;
    font-size: clamp(24px, 2.3vw, 34px);
    line-height: .98;
    text-transform: uppercase;
}

.differential-card p,
.process-card p {
    margin-top: 16px;
    max-width: 360px;
    color: var(--vrs-gray);
    font-size: 14px;
    line-height: 1.6;
}

/* =========================================================
   05 — PROCESSO
========================================================= */
.process {
    padding: 96px 0 102px;
}

/* =========================================================
   06 — ACOMPANHAMENTO
========================================================= */
.management {
    padding: 96px 0 102px;
}

.management-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--vrs-border);
    border-left: 1px solid rgba(255,255,255,0.04);
}

.management-card {
    position: relative;
    min-height: 190px;
    padding: 28px 32px 30px;
    border-right: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    transition: background .35s ease, transform .4s cubic-bezier(.22,1,.36,1);
}

.management-card:hover {
    background: rgba(255,90,0,0.035);
    transform: translateY(-4px);
}

.management-card > span {
    color: var(--vrs-orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.management-card h3 {
    margin-top: 42px;
    font-size: 25px;
    line-height: 1;
    text-transform: uppercase;
}

.management-card p {
    max-width: 520px;
    margin-top: 13px;
    color: var(--vrs-gray);
    font-size: 14px;
    line-height: 1.6;
}

/* =========================================================
   07 — ATLETA VRS
========================================================= */
.athlete-profile {
    padding: 102px 0 100px;
}

.athlete-highlights {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--vrs-border);
    border-bottom: 1px solid var(--vrs-border);
}

.athlete-highlights > div {
    position: relative;
    min-height: 160px;
    padding: 26px 30px;
    border-right: 1px solid rgba(255,255,255,0.07);
}

.athlete-highlights > div:last-child {
    border-right: 0;
}

.athlete-highlights strong {
    display: block;
    font-size: clamp(58px, 7vw, 100px);
    line-height: .82;
    letter-spacing: -5px;
}

.athlete-highlights span {
    display: block;
    margin-top: 22px;
    color: var(--vrs-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

/* =========================================================
   08 — ATLETAS
========================================================= */
.athletes {
    padding: 96px 0 102px;
}

.athletes-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
}

.athlete-card {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    border: 1px solid rgba(255,255,255,0.08);
    background: #0b0b0b;
    transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}

.athlete-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,90,0,.4);
}

.athlete-image {
    height: 320px;
    background:
        linear-gradient(180deg, transparent 45%, rgba(0,0,0,.8)),
        radial-gradient(circle at 50% 30%, rgba(255,90,0,.07), transparent 45%),
        #111;
}

.athlete-info {
    position: relative;
    padding: 22px 24px;
   
}

.athlete-info h3 {
    font-size: 25px;
    text-transform: uppercase;
}

.athlete-info span {
    display: block;
    margin-top: 7px;
    color: var(--vrs-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* =========================================================
   09 — CASE
========================================================= */
.case {
    padding: 116px 0 118px;
}

.case-content {
    position: relative;
    max-width: 1040px;
    padding: 54px 0 56px 42px;
    border-left: 2px solid var(--vrs-orange);
    background: linear-gradient(90deg, rgba(255,90,0,.035), transparent 65%);
}

.case-content h2 {
    max-width: 900px;
    margin-top: 16px;
    font-size: clamp(54px, 7vw, 104px);
    line-height: .86;
    letter-spacing: -4px;
    text-transform: uppercase;
}

.case-content h3 {
    margin-top: 34px;
    font-size: 22px;
    text-transform: uppercase;
}

.case-content p {
    max-width: 720px;
    margin-top: 15px;
    color: var(--vrs-gray);
    line-height: 1.7;
}

.case-path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    color: var(--vrs-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.case-path span:nth-child(even) {
    color: rgba(255,255,255,.2);
}

/* =========================================================
   10 — CONEXÕES
========================================================= */
.network {
    padding: 96px 0 102px;
}

.clubs-grid {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--vrs-border);
}

.clubs-row {
    display: flex;
    justify-content: center;
}

.clubs-row-top .club-logo {
    width: 25%;
}

.clubs-row-bottom .club-logo {
    width: 25%;
}

.club-logo {
    min-height: 130px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(255,255,255,.24);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;

    border-right: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);

    transition:
        color .3s ease,
        background .3s ease;
}

.club-logo:hover {
    color: var(--vrs-white);
    background: rgba(255,90,0,.035);
}

/* =========================================================
   FUNDADOR — NÃO É FOCO DA PÁGINA, MAS FICA INTEGRADO
========================================================= */
.founder {
    padding: 96px 0 102px;
}

.founder .container {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) 1.1fr;
    gap: clamp(45px, 7vw, 100px);
    align-items: center;
}

.founder-image {
    min-height: 520px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(135deg, #151515, #0b0b0b);
}

.founder-content h2 {
    margin-top: 16px;
    font-size: clamp(50px, 6vw, 88px);
    line-height: .88;
    letter-spacing: -3px;
    text-transform: uppercase;
}

.founder-content h3 {
    margin-top: 32px;
    font-size: 25px;
    text-transform: uppercase;
}

.founder-content > span:not(.eyebrow) {
    display: block;
    margin-top: 7px;
    color: var(--vrs-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.founder-content p {
    max-width: 560px;
    margin-top: 20px;
    color: var(--vrs-gray);
    line-height: 1.7;
}

/* =========================================================
   FUTURO
========================================================= */
.future {
    padding: 96px 0 102px;
}

.timeline {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--vrs-border);
    border-bottom: 1px solid var(--vrs-border);
}

.timeline-item {
    position: relative;
    min-height: 180px;
    padding: 30px;
    border-right: 1px solid rgba(255,255,255,.07);
}

.timeline-item:last-child {
    border-right: 0;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 0;
    width: 52px;
    height: 2px;
    background: var(--vrs-orange);
}

.timeline-item span {
    color: var(--vrs-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.timeline-item h3 {
    margin-top: 52px;
    max-width: 260px;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}

/* =========================================================
   CONTATO
========================================================= */
.contact {
    padding: 118px 0 112px;
    border-top: 1px solid rgba(255,255,255,.05);
}

.contact-content {
    position: relative;
    padding: 42px 0 48px 42px;
    border-left: 2px solid var(--vrs-orange);
    background: linear-gradient(90deg, rgba(255,90,0,.04), transparent 65%);
}

.contact-content h2 {
    margin-top: 16px;
    font-size: clamp(54px, 8vw, 118px);
    line-height: .82;
    letter-spacing: -5px;
}

.contact-content p {
    margin-top: 26px;
    color: var(--vrs-gray);
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.contact-links a {
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,.12);
    font-size: 12px;
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.contact-links a:hover {
    border-color: var(--vrs-orange);
    background: rgba(255,90,0,.07);
    transform: translateY(-3px);
}

/* Footer mais compacto */
#footer {
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Scroll lateral com identidade VRS */
::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: #272727;
    border-radius: 20px;
    border: 1px solid #0a0a0a;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--vrs-orange);
}

html {
    scrollbar-color: #272727 #050505;
    scrollbar-width: thin;
}

/* =========================================================
   RESPONSIVO
========================================================= */
@media (max-width: 900px) {
    .section,
    .about,
    .purpose,
    .differential,
    .process,
    .management,
    .athlete-profile,
    .athletes,
    .network,
    .founder,
    .future {
        padding: 78px 0 82px;
    }

    .differential-grid,
    .process-grid,
    .athlete-highlights,
    .athletes-grid,
    .clubs-grid,
    .timeline {
        grid-template-columns: 1fr;
    }

    .management-grid {
        grid-template-columns: 1fr;
    }

    .differential-card,
    .process-card {
        min-height: 190px;
    }

    .differential-card h3,
    .process-card h3 {
        margin-top: 40px;
    }

    .athlete-highlights > div {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .athlete-highlights > div:last-child {
        border-bottom: 0;
    }

    .founder .container {
        grid-template-columns: 1fr;
    }

    .founder-image {
        min-height: 420px;
    }
}

@media (max-width: 640px) {
    .section,
    .about,
    .purpose,
    .differential,
    .process,
    .management,
    .athlete-profile,
    .athletes,
    .case,
    .network,
    .founder,
    .future,
    .contact {
        padding: 64px 0 68px;
    }

    .section-heading {
        margin-bottom: 38px;
    }

    .section-heading h2 {
        font-size: clamp(39px, 11vw, 60px);
        letter-spacing: -2px;
    }

    .section-heading p {
        font-size: 14px;
    }

    .differential-card,
    .process-card,
    .management-card,
    .timeline-item {
        min-height: 165px;
        padding: 24px;
    }

    .differential-card h3,
    .process-card h3,
    .management-card h3,
    .timeline-item h3 {
        margin-top: 34px;
        font-size: 22px;
    }

    .athlete-card {
        min-height: 360px;
    }

    .athlete-image {
        height: 260px;
    }

    .case-content,
    .contact-content {
        padding: 32px 0 34px 22px;
    }

    .case-content h2,
    .contact-content h2 {
        font-size: clamp(43px, 12vw, 66px);
        letter-spacing: -3px;
    }

    .case-path {
        gap: 8px;
        line-height: 1.5;
    }

    .vrs-section-transition {
        height: 56px;
    }

    .vrs-section-transition-track {
        gap: 34px;
        padding-left: 35vw;
        font-size: 8px;
        letter-spacing: 3px;
    }

    .section:not(.hero)::after {
        width: 90vw;
        height: 90vw;
        right: -55vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vrs-section-transition-track {
        animation: none;
    }

    .vrs-reveal,
    .vrs-reveal-left {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================================
   08 — ATLETAS VRS — CARROSSEL FINAL
   Adicionado sem alterar os demais blocos do site.
========================================================= */

.athletes {
    padding: 92px 0 104px;
    overflow: hidden;
}

.athletes-grid {
    position: relative;
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    padding: 8px 0 24px;
}

.athletes-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    padding: 0;
    margin: 0;
    gap: 0;
    will-change: transform;
    animation: vrsAthletesScroll 48s linear infinite;
}

.athletes-grid:hover .athletes-track {
    animation-play-state: paused;
}

.athletes-set {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 0 6px;
    flex-shrink: 0 12px;
}


.athlete-card {
    position: relative;
    flex: 0 0 280px;
    width: 280px;
    height: 430px;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: #0b0b0b;
    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        border-color .35s ease,
        box-shadow .45s ease;
}

.athlete-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 54px;
    height: 2px;
    background: var(--vrs-orange);
    z-index: 8;
    transition: width .45s cubic-bezier(.22,1,.36,1);
}

.athlete-card:hover {
    transform: translateY(-7px);
    border-color: rgba(255,90,0,.48);
    box-shadow: 0 22px 55px rgba(0,0,0,.42);
}

.athlete-card:hover::before {
    width: 100%;
}

.athlete-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 330px;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0, 0, 0, 0.75) 100%
        ),
        #111;
}

.athlete-image img {
  display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 26%;
    transition:
        transform 0.8s cubic-bezier(.22,1,.36,1),
        filter 0.5s ease;
}

.athlete-card:hover .athlete-image img {
    transform: scale(1.06);
    filter: saturate(1.08);
}


.athlete-number {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.55);
    background: rgba(8,8,8,.25);
    backdrop-filter: blur(5px);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 9;
}

.athlete-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 29px 25px 24px;
    z-index: 7;

    background: linear-gradient(180deg,
        rgba(8,8,8,0),
        rgba(8,8,8,.84) 25%,
        rgba(8,8,8,.98) 65%);
}

.athlete-info h3 {
    margin: 0;
    font-size: clamp(21px, 1.7vw, 27px);
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -.7px;
}

.athlete-info span {
    display: block;
    margin-top: 10px;
    color: var(--vrs-orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

@keyframes vrsAthletesScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 1100px) {
    .athlete-card {
        flex-basis: 290px;
        width: 290px;
        height: 470px;
    }
}

@media (max-width: 768px) {
    /* =========================================================
   ATLETAS VRS — CARROSSEL
   8 ATLETAS + DUPLICAÇÃO PARA LOOP INFINITO
========================================================= */

.athletes { padding: 92px 0 104px; overflow: hidden; }
.athletes-grid { position: relative; display: block; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; padding: 8px 0 24px; }
.athletes-track { display: flex; align-items: stretch; width: max-content; will-change: transform; animation: vrsAthletesScroll 52s linear infinite; }
.athletes-grid:hover .athletes-track { animation-play-state: paused; }
.athletes-set { display: flex; align-items: stretch; gap: 16px; flex: 0 0 auto; padding: 0 40px; }

.athlete-card { position: relative; flex: 0 0 304px; width: 304px; height: 486px; overflow: hidden; border: 1px solid rgba(255,255,255,.09); background: #0b0b0b; cursor: pointer; transition: transform .45s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .45s ease; }
.athlete-card::before { content: ""; position: absolute; top: 0; left: 0; width: 54px; height: 2px; background: var(--vrs-orange); z-index: 8; transition: width .45s cubic-bezier(.22,1,.36,1); }
.athlete-card:hover { transform: translateY(-7px); border-color: rgba(255,90,0,.48); box-shadow: 0 22px 55px rgba(0,0,0,.42); }
.athlete-card:hover::before { width: 100%; }

.athlete-image { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #111; }
.athlete-image::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.02) 28%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.96) 100%), radial-gradient(circle at 50% 28%, rgba(255,90,0,.09), transparent 44%); }
.athlete-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: transform 1s cubic-bezier(.22,1,.36,1), filter .8s ease; }
.athlete-card:hover .athlete-image img { transform: scale(1.065); filter: saturate(1.08); }

.athlete-number { position: absolute; top: 18px; right: 18px; width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.55); background: rgba(8,8,8,.25); backdrop-filter: blur(5px); font-size: 9px; font-weight: 800; letter-spacing: 1px; z-index: 9; }
.athlete-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 29px 25px 24px; z-index: 7; border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(8,8,8,0), rgba(8,8,8,.84) 25%, rgba(8,8,8,.98) 65%); }
.athlete-info h3 { margin: 0; font-size: clamp(21px, 1.7vw, 27px); line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: -.7px; }
.athlete-info span { display: block; margin-top: 10px; color: var(--vrs-orange); font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }

@keyframes vrsAthletesScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 1100px) { .athlete-card { flex-basis: 290px; width: 290px; height: 470px; } }
@media (max-width: 768px) { .athletes { padding: 72px 0 78px; } .athletes-set { gap: 12px; padding: 0 16px; } .athletes-track { animation-duration: 38s; } .athlete-card { flex-basis: 274px; width: 274px; height: 430px; } .athlete-info { padding: 23px 20px 21px; } .athlete-info h3 { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .athletes-track { animation: none; transform: none; } }


/* =========================================================
   CASE VRS — JOÃO PEDRO
   ========================================================= */

.case-vrs {
    position: relative;
    width: 100%;
    padding: 100px 5vw;
    overflow: hidden;
}

.case-vrs-content {
    position: relative;
    max-width: 1400px;
    min-height: 620px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 70px;

    border-left: 2px solid #ff5a00;
    padding-left: 45px;
}

/* TEXTO */

.case-vrs-text {
    position: relative;
    z-index: 2;
}

.case-vrs .section-label {
    display: block;
    margin-bottom: 25px;

    color: #ff5a00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.case-vrs-text h2 {
    margin: 0 0 35px;

    color: #f5f5f5;
    font-size: clamp(58px, 6vw, 105px);
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -4px;
    text-transform: uppercase;
}

.case-vrs-text h3 {
    margin: 0 0 15px;

    color: #fff;
    font-size: 25px;
    font-weight: 800;
    text-transform: uppercase;
}

.case-vrs-text p {
    max-width: 720px;
    margin: 0 0 35px;

    color: #999;
    font-size: 17px;
    line-height: 1.7;
}

/* FLUXO */

.case-vrs-flow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    color: #ff5a00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.case-vrs-flow i {
    color: #555;
    font-style: normal;
    font-size: 16px;
}

/* FOTO */

.case-vrs-photo {
    position: relative;
    height: 540px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.case-photo-frame {
    position: relative;

    width: min(100%, 430px);
    height: 540px;

    overflow: hidden;

    border: 1px solid rgba(255, 90, 0, 0.35);

    background: #111;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.02),
        0 30px 80px rgba(0, 0, 0, 0.5);
}

.case-photo-frame::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 60%,
            rgba(0, 0, 0, 0.45) 100%
        );
}

.case-photo-frame img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}

.case-photo-frame:hover img {
    transform: scale(1.04);
}

/* DETALHE LARANJA */

.case-photo-line {
    position: absolute;

    right: 0;
    bottom: 20px;

    width: 150px;
    height: 3px;

    background: #ff5a00;

    z-index: 3;
}

/* DETALHE SUPERIOR */

.case-photo-frame::after {
    content: "";

    position: absolute;
    top: -1px;
    left: -1px;

    width: 90px;
    height: 3px;

    background: #ff5a00;

    z-index: 4;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 900px) {

    .case-vrs {
        padding: 80px 25px;
    }

    .case-vrs-content {
        grid-template-columns: 1fr;
        gap: 50px;
        padding-left: 25px;
    }

    .case-vrs-text h2 {
        font-size: clamp(48px, 11vw, 80px);
    }

    .case-vrs-photo {
        height: 500px;
    }

    .case-photo-frame {
        height: 500px;
        max-width: 420px;
    }
}

@media (max-width: 600px) {

    .case-vrs {
        padding: 60px 20px;
    }

    .case-vrs-content {
        padding-left: 18px;
        min-height: auto;
    }

    .case-vrs-text h2 {
        font-size: 48px;
        letter-spacing: -2px;
    }

    .case-vrs-text p {
        font-size: 15px;
    }

    .case-vrs-flow {
        gap: 8px;
        line-height: 1.8;
    }

    .case-vrs-photo {
        height: 420px;
    }

    .case-photo-frame {
        height: 420px;
    }
}
/* =========================================================
   CASE JOÃO PEDRO — DESTAQUE
========================================================= */

.case-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: center;
    gap: 60px;

    max-width: 1280px;
    min-height: 500px;

    padding: 54px 42px 56px 42px;

    border-left: 2px solid var(--vrs-orange);

    background:
        linear-gradient(
            90deg,
            rgba(255,90,0,.035),
            transparent 70%
        );
}


/* TEXTO */

.case-text {
    min-width: 0;
}

.case-text h2 {
    max-width: 850px;
}


/* =========================================================
   FOTO DO JOÃO — MESMA LINGUAGEM DOS CARDS
========================================================= */

.case-photo {
    position: relative;

    width: 100%;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.08);

    background: #0b0b0b;

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        border-color .35s ease;
}

.case-photo:hover {
    transform: translateY(-8px);
    border-color: rgba(255,90,0,.45);
}


/* FOTO */

.case-photo-image {
    position: relative;

    width: 100%;
    height: 390px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.85)
        ),
        radial-gradient(
            circle at 50% 30%,
            rgba(255,90,0,.07),
            transparent 45%
        ),
        #111;
}

.case-photo-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .5s ease;
}

.case-photo:hover .case-photo-image img {
    transform: scale(1.05);
}


/* INFORMAÇÕES */

.case-photo-info {
    position: relative;

    padding: 22px 24px;

    border-top: 1px solid rgba(255,255,255,.07);
}

.case-photo-info h3 {
    margin: 0;

    font-size: 25px;

    line-height: 1;

    text-transform: uppercase;
}

.case-photo-info span {
    display: block;

    margin-top: 8px;

    color: var(--vrs-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* =========================================================
   DETALHE LARANJA
========================================================= */

.case-photo::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 90px;
    height: 2px;

    background: var(--vrs-orange);

    z-index: 2;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 1000px) {

    .case-content {
        grid-template-columns: 1fr 300px;
        gap: 35px;
    }

    .case-photo-image {
        height: 350px;
    }

}


@media (max-width: 768px) {

    .case-content {
        grid-template-columns: 1fr;

        gap: 40px;

        padding: 40px 22px 42px 22px;
    }

    .case-photo {
        max-width: 420px;
    }

    .case-photo-image {
        height: 400px;
    }

}


@media (max-width: 480px) {

    .case-photo-image {
        height: 340px;
    }

}

/* =========================================================
   AJUSTE FINAL — CARDS DOS ATLETAS VRS
   Fotos reais + cards mais compactos
========================================================= */

.athlete-card {
    flex: 0 0 280px;
    width: 280px;
    height: 430px;
    min-height: 0;
}

.athlete-image {
    position: absolute;
    inset: 0 0 94px 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #111;
    transform: none;
}

.athlete-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 45%,
            rgba(0,0,0,.10) 65%,
            rgba(0,0,0,.30) 100%
        );
    pointer-events: none;
}

.athlete-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        filter .6s ease;
}

.athlete-card:hover .athlete-image {
    transform: none;
    filter: none;
}

.athlete-card:hover .athlete-image img {
    transform: scale(1.045);
    filter: saturate(1.06);
}

.athlete-info {
    min-height: 94px;
    padding: 22px 22px 19px;
    background: #080808;
}

.athlete-info h3 {
    font-size: clamp(19px, 1.45vw, 24px);
}

.athlete-info span {
    margin-top: 8px;
    font-size: 9px;
}

@media (max-width: 1100px) {
    .athlete-card {
        flex-basis: 270px;
        width: 270px;
        height: 415px;
    }

    .athlete-image {
        inset: 0 0 92px 0;
    }

    .athlete-info {
        min-height: 92px;
    }
}

@media (max-width: 768px) {
    .athlete-card {
        flex-basis: 252px;
        width: 252px;
        height: 395px;
    }

    .athlete-image {
        inset: 0 0 88px 0;
    }

    .athlete-info {
        min-height: 88px;
        padding: 20px 18px 17px;
    }

    .athlete-info h3 {
        font-size: 21px;
    }
}
}
/* =========================================================
   CASE VRS — JOÃO PEDRO
   AJUSTE FINAL DE POSIÇÃO
========================================================= */

.case .case-content {
    display: grid !important;

    grid-template-columns: minmax(0, 760px) 390px !important;

    justify-content: space-between !important;

    align-items: center !important;

    column-gap: 90px !important;

    width: 100% !important;

    max-width: 1280px !important;

    margin: 0 auto !important;

    min-height: 620px !important;

    position: relative !important;
}


/* =========================================================
   TEXTO DO CASE
========================================================= */

.case .case-text {
    width: 100% !important;

    max-width: 760px !important;

    min-width: 0 !important;

    position: relative !important;

    z-index: 2 !important;
}


/* =========================================================
   TÍTULO
========================================================= */

.case .case-text h2 {
    width: 100% !important;

    max-width: 760px !important;

    margin: 20px 0 34px !important;

    font-size: clamp(58px, 6vw, 96px) !important;

    line-height: .88 !important;

    letter-spacing: -.045em !important;

    white-space: normal !important;
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.case .case-text p {
    max-width: 680px !important;

    line-height: 1.65 !important;

    margin-bottom: 28px !important;
}


/* =========================================================
   CAMINHO DO CASE
========================================================= */

.case .case-path {
    display: flex !important;

    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 9px !important;

    margin-top: 25px !important;
}


/* =========================================================
   CARD JOÃO PEDRO
========================================================= */

.case .case-photo {
    width: 390px !important;

    min-width: 390px !important;

    max-width: 390px !important;

    justify-self: end !important;

    align-self: center !important;

    margin: 0 !important;

    position: relative !important;

    overflow: hidden !important;

    background: #080808 !important;

    border: 1px solid rgba(255,255,255,.12) !important;

    z-index: 5 !important;

    transition:
        transform .45s ease,
        border-color .45s ease !important;
}


/* =========================================================
   FOTO
========================================================= */

.case .case-photo-image {
    width: 100% !important;

    height: 460px !important;

    overflow: hidden !important;

    background: #111 !important;
}


.case .case-photo-image img {
    display: block !important;

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    object-position: center top !important;

    transition:
        transform .65s cubic-bezier(.2,.7,.2,1) !important;
}


/* =========================================================
   NÚMERO 01
========================================================= */

.case .case-photo::after {
  content: none !important;
    display: none !important;

    position: absolute !important;

    top: 18px !important;

    right: 18px !important;

    width: 42px !important;

    height: 42px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border: 1px solid rgba(255,255,255,.20) !important;

    background: rgba(15,15,15,.72) !important;

    color: #fff !important;

    font-size: 12px !important;

    font-weight: 800 !important;

    z-index: 10 !important;
}


/* =========================================================
   INFORMAÇÕES DO CARD
========================================================= */

.case .case-photo-info {
    padding: 23px 26px 27px !important;

    border-top: 1px solid rgba(255,255,255,.10) !important;

    background: #080808 !important;
}


.case .case-photo-info h3 {
    margin: 0 0 8px !important;

    color: #fff !important;

    font-size: 25px !important;

    line-height: 1 !important;

    font-weight: 800 !important;

    text-transform: uppercase !important;
}


.case .case-photo-info span {
    display: block !important;

    color: #ff5a00 !important;

    font-size: 12px !important;

    line-height: 1 !important;

    font-weight: 800 !important;

    letter-spacing: .16em !important;

    text-transform: uppercase !important;
}


/* =========================================================
   HOVER DO CARD
========================================================= */

@media (hover: hover) {

    .case .case-photo:hover {
        transform: translateY(-7px) !important;

        border-color: rgba(255,90,0,.55) !important;
    }

    .case .case-photo:hover .case-photo-image img {
        transform: scale(1.035) !important;
    }
}


/* =========================================================
   TELAS MENORES
========================================================= */

@media (max-width: 1200px) {

    .case .case-content {
        grid-template-columns: minmax(0, 1fr) 360px !important;

        column-gap: 55px !important;
    }

    .case .case-photo {
        width: 360px !important;

        min-width: 360px !important;

        max-width: 360px !important;
    }

    .case .case-photo-image {
        height: 430px !important;
    }

    .case .case-text h2 {
        font-size: clamp(54px, 6vw, 82px) !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .case .case-content {
        grid-template-columns: minmax(0, 1fr) 320px !important;

        column-gap: 35px !important;
    }

    .case .case-photo {
        width: 320px !important;

        min-width: 320px !important;

        max-width: 320px !important;
    }

    .case .case-photo-image {
        height: 400px !important;
    }

    .case .case-text h2 {
        font-size: clamp(48px, 6vw, 70px) !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .case .case-content {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 40px !important;

        min-height: auto !important;
    }

    .case .case-text {
        max-width: 100% !important;
    }

    .case .case-text h2 {
        max-width: 100% !important;

        font-size: clamp(50px, 13vw, 78px) !important;

        line-height: .9 !important;
    }

    .case .case-photo {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 420px !important;

        justify-self: start !important;
    }

    .case .case-photo-image {
        height: 500px !important;
    }
}
/* =========================================================
   FOOTER — ASSINATURA FINAL VRS
   DISCRETO / EDITORIAL
========================================================= */

#footer {
    padding: 22px 0 18px !important;

    background: #050505 !important;

    border-top:
        1px solid
        rgba(255,255,255,.045) !important;

    color:
        rgba(255,255,255,.28) !important;
}


/* CONTEÚDO DO FOOTER */

#footer .container {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 20px !important;
}


/* MARCA */

#footer strong,
#footer b {
    color:
        rgba(255,255,255,.55) !important;

    font-size: 11px !important;

    font-weight: 700 !important;

    letter-spacing: .12em !important;
}


/* TEXTOS */

#footer p {
    margin: 0 !important;

    color:
        rgba(255,255,255,.25) !important;

    font-size: 10px !important;

    line-height: 1.5 !important;

    letter-spacing: .04em !important;
}


/* LINKS */

#footer a {
    color:
        rgba(255,255,255,.25) !important;

    font-size: 10px !important;

    text-decoration: none !important;

    transition:
        color .25s ease !important;
}

#footer a:hover {
    color:
        rgba(255,90,0,.8) !important;
}


/* NAVEGAÇÃO DO FOOTER */

#footer nav {
    display: flex !important;

    align-items: center !important;

    gap: 18px !important;
}


/* COPYRIGHT */

#footer .copyright {
    color:
        rgba(255,255,255,.16) !important;

    font-size: 9px !important;

    letter-spacing: .05em !important;
}


/* MOBILE */

@media (max-width: 640px) {

    #footer {
        padding: 24px 0 18px !important;
    }

    #footer .container {
        flex-direction: column !important;

        align-items: flex-start !important;

        gap: 12px !important;
    }

    #footer nav {
        gap: 14px !important;

        flex-wrap: wrap !important;
    }

}