/* =========================
   ESCOLHA STEAM (SteamWeb) - v3
   ========================= */
#choose {
    position: relative;
    z-index: 10; /* abaixo do competences */
}
/* 2. ADICIONADO: Respiro para o Header */
.choose {
    margin-top: 20px; /* abaixo do header fixo */
    height: 100vh;
    background: #000;
    position: relative;
    overflow: hidden;
    z-index: 10;
    transition: transform 0.5s cubic-bezier(.16,1,.3,1); /* Smooth para o overlay */
}

/* Placeholder para manter o espaço no scroll */
.choose__placeholder {
    width: 100%;
    height: 100vh;
    visibility: hidden;
    pointer-events: none;
}

/* choose normal */
#choose {
    position: relative;
    z-index: 10;
    background: #000; /* precisa cobrir o hero */
    will-change: transform;
    transform: translate3d(0, var(--choose-enter-offset, 0px), 0);
    transition: transform 420ms cubic-bezier(.16,1,.3,1);
}

    /* modo overlay: a choose vira "tela" por cima do hero */
    #choose.is-overlay {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: 100;
        will-change: transform;
        transform: translate3d(0, var(--choose-overlay-y, 100vh), 0);
        transition: transform 520ms cubic-bezier(.16,1,.3,1);
    }

/* 1. REMOVIDO: Barra Laranja Inferior */
/* A classe .choose__bottom-accent foi removida do HTML e CSS */

.choose__content {
    height: 100%;
    padding-top: 138px;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5vh;
    display: grid;
    grid-template-rows: auto auto 1fr;
    align-content: start;
}

/* Empurra o título para baixo sem mudar JS: o travamento usa o #choose, não este bloco */
.choose__top-spacer {
    width: 100%;
    height: var(--choose-top-spacer, 48px);
    flex-shrink: 0;
    pointer-events: none;
}

.choose_title {
    padding-top: 15vh;
    padding-bottom: 14px;
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(1.1rem, 2.9vw, 2.25rem);
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255,255,255,.22);
}

.choose_title span {
    color: #F2561D;
}

.choose__grid {
    display: grid;
    grid-template-columns: 32fr 68fr;
    gap: 5%;
    height: 100%;
    align-items: center;
}

/* 3. ATUALIZADO: Animação Premium do Botão (Sheen Effect) */
.choose__button {
    justify-self: start;
    align-self: center;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 26px;
    border-radius: 999px;
    min-height: 58px;
    max-width: 360px;
    color: #EFFFFF;
    text-decoration: none;
    text-transform: uppercase;
    font: 700 12px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    letter-spacing: .06em;
    /* Visual premium no fundo preto */
    background: radial-gradient(120% 120% at 10% 10%, rgba(63,166,166,.55) 0%, rgba(32,106,115,.35) 45%, rgba(0,0,0,.0) 100%), linear-gradient(45deg, rgba(32,106,115,.95), rgba(63,166,166,.95));
    border: 1px solid rgba(160,255,255,.22);
    box-shadow: 0 18px 45px rgba(63,166,166,.12);
    backdrop-filter: blur(6px);
    transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1), filter .55s cubic-bezier(.16,1,.3,1);
    will-change: transform;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
}

    /* halo animado (chamativo, mas elegante) */
    .choose__button::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        background: conic-gradient(from 180deg, rgba(63,166,166,.0), rgba(63,166,166,.6), rgba(255,255,255,.0), rgba(63,166,166,.0));
        opacity: .0;
        filter: blur(10px);
        transition: opacity .55s cubic-bezier(.16,1,.3,1);
        pointer-events: none;
    }

    .choose__button::before {
        content: "";
        position: absolute;
        top: 0;
        left: -160%;
        width: 70%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.32) 45%, rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        transition: left .85s cubic-bezier(.16,1,.3,1);
        pointer-events: none;
    }

    .choose__button:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 22px 70px rgba(63,166,166,.20);
        filter: saturate(1.15);
    }

        .choose__button:hover::before {
            left: 160%;
        }

        .choose__button:hover::after {
            opacity: .75;
        }

    /* textos do botão (sem flicker) */
    .choose__button .button__text__1,
    .choose__button .button__text__2 {
        transition: opacity .35s ease, transform .35s ease;
    }

    .choose__button .button__text__2 {
        opacity: 0;
        transform: translateY(8px);
        position: absolute;
        font-size: 16px;
        letter-spacing: .04em;
    }

    .choose__button:hover .button__text__1 {
        opacity: 0;
        transform: translateY(-8px);
    }

    .choose__button:hover .button__text__2 {
        opacity: 1;
        transform: translateY(0);
    }

/* 5. ATUALIZADO: Quadro de texto com tamanho fixo e animação */
.choose_text {
    position: relative; /* Garante que o pseudo-elemento fique posicionado corretamente */
    padding-left: 10%; /* Mantém o padding para o conteúdo */
    padding-top: 3vh; /* Ajuste de espaçamento */
    padding-bottom: 3vh;
    height: 60vh;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* importante: não centraliza tudo */
}

/* Área dos parágrafos (absolutos) — mantém os <p> ancorados ao quadro no desktop */
.choose_text__scroll {
    position: absolute;
    inset: 0;
}

    /* Linha vertical começando exatamente no topo do painel */
    .choose_text::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0; /* Encosta na linha horizontal */
        bottom: 0;
        width: 1px;
        background: rgba(255, 255, 255, .22);
    }
.choose__kicker {
    display: block;
    margin-bottom: 10px;
    font: 750 22px/1.15 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: rgba(255,255,255,.95);
    letter-spacing: .01em;
}

.choose__copy {
    display: block;
}

.choose_text__scroll .choose__text__1,
.choose_text__scroll .choose__text__2 {
    position: absolute;
    top: 10%; /* mesma altura para ambos */
    left: 10%;
    right: 0;
    font: 500 18px/1.65 system-ui;
    color: rgba(255,255,255,.86);
    margin: 0;
    max-width: 88ch;
    transition: opacity .38s ease, transform .38s ease;
}

/* Estado inicial do texto inativo */
.choose_text__scroll .choose__text__2 {
    opacity: 0;
    transform: translateY(0); /* ✅ AJUSTE: Mesmo nível do texto 1 */
    pointer-events: none;
}

.choose_text small {
    display: inline-block;
    margin-top: 10px;
    font: 650 13px/1 system-ui;
    color: rgba(255,255,255,.55);
}

/* 4. ATUALIZADO: Animação dos Pointers mais rápida */
.pointers {
    position: absolute;
    left: 10%;
    bottom: 36%; /* desce ele no quadro, sem ir pro rodapé da seção */
    display: flex;
    gap: 10px;
    align-items: center;
    width: calc(100% - 10%);
}

.pointer__inactive,
.pointer__active {
    height: 6px;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    transition: width .85s cubic-bezier(.16,1,.3,1), opacity .85s ease;
}

.pointer__inactive {
    background-image: linear-gradient(45deg, #206A73, #3FA6A6);
    width: 2.2rem;
    border: 2px solid #206A73;
    opacity: .55;
    animation: choosePointerPulse 1.6s ease-in-out infinite;
}

.pointer__active {
    background-image: linear-gradient(45deg, #D99036, #F2561D);
    width: 26rem;
    max-width: 62%;
    border: 2px solid #F2561D;
    opacity: 1;
}

@keyframes choosePointerPulse {
    0%, 100% {
        opacity: .55;
        transform: scale(1);
        box-shadow: 0 0 0 rgba(63, 166, 166, 0);
    }
    50% {
        opacity: .95;
        transform: scale(1.08);
        box-shadow: 0 0 12px rgba(63, 166, 166, 0.55);
    }
}

/* Estados de scroll (mais etapas para smooth zoom out) */
.choose.is-normal {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
}

.choose.is-half1 {
    transform: scale(.94);
    filter: blur(6px);
    opacity: .8;
}

.choose.is-half2 {
    transform: scale(.86);
    filter: blur(14px);
    opacity: .5;
}

.choose.is-hide {
    transform: scale(.68);
    filter: blur(28px);
    opacity: 0;
}

/* Transição mais smooth */
.choose {
    transition: transform 1.4s cubic-bezier(.16,1,.3,1), filter 1.4s cubic-bezier(.16,1,.3,1), opacity 1.4s cubic-bezier(.16,1,.3,1);
}

/* Desktop médio / notebook — menos espaço no topo; CTA centralizado na coluna esquerda */
@media (min-width: 1025px) and (max-width: 1600px) {
    .choose__content {
        padding-top: 88px;
        padding-bottom: 4vh;
    }

    .choose__top-spacer {
        height: 28px;
    }

    .choose_title {
        padding-top: clamp(28px, 5vh, 64px);
        padding-bottom: 12px;
    }

    .choose__grid {
        align-items: stretch;
    }

    .choose__button {
        align-self: center;
        justify-self: start;
        margin-top: -28px;
    }

    .choose_text {
        height: min(56vh, 480px);
        min-height: 280px;
    }
}

/* MOBILE — altura fluida (svh/dvh), sem cortar CTA nem barra de troca */
@media (max-width: 1024px) {

    /*
     * pan-y: permite o browser rolar a página quando o JS não captura o gesto.
     * Com touch-action: none, se onWheel retornava false a área ficava “morta”.
     * Quando capturamos, o touchmove ainda pode usar preventDefault (listener não-passive).
     */
    /* Mobile: section trava abaixo do header; título ~150px abaixo do topo da section */
    #choose {
        touch-action: pan-y;
        --choose-title-offset-mobile: 150px;
    }

    .choose {
        margin-top: 0;
        height: auto;
        box-sizing: border-box;
        min-height: calc(100svh + 28svh);
        min-height: calc(100dvh + 28dvh);
        padding-bottom: max(72px, 10vh);
        overflow: visible;
    }

    .choose__content {
        box-sizing: border-box;
        min-height: 100svh;
        min-height: 100dvh;
        padding-top: 0;
        padding-left: 6%;
        padding-right: 6%;
        padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        gap: clamp(24px, 6vw, 40px);
    }

    .choose__top-spacer {
        display: none;
    }

    .choose_title {
        margin-top: 0 !important;
        padding-top: var(--choose-title-offset-mobile) !important;
        padding-bottom: 4px;
        font-size: clamp(22px, 5.5vw, 28px);
        border-bottom: none !important;
        text-align: center;
        flex-shrink: 0;
    }

    /* Coluna flexível: botão + painel ocupam o espaço restante */
    .choose__grid {
        display: flex !important;
        flex-direction: column;
        flex: 1 1 auto;
        width: 100%;
        height: auto !important;
        /* Área mínima para texto + barra; cresce se a tela for maior */
        min-height: min(52vh, 420px);
        gap: clamp(28px, 7vw, 44px);
        align-items: stretch;
    }

    .choose__button {
        justify-self: center;
        align-self: center;
        width: auto;
        max-width: 260px;
        padding: 10px 14px;
        min-height: 42px;
        margin: 0 auto;
        flex-shrink: 0;
    }

    /* Painel: flex-grow para o texto; ponteiros fixos no rodapé do painel */
    .choose_text {
        position: relative;
        border-left: none;
        padding: 0 0 16px;
        margin: 0;
        margin-top:35px;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /* Não estica o bloco de texto o máximo possível: senão os ponteiros vão parar longe do texto */
        justify-content: flex-start;
    }

    .choose_text::before {
        display: none !important;
    }

    /* Ocupa o espaço flex acima dos ponteiros; os <p> absolutos ancoram aqui */
    .choose_text__scroll {
        position: relative;
        z-index: 0;
        overflow: hidden;
        /* Altura útil do texto sem ocupar todo o flex; ponteiros ficam logo abaixo */
        flex: 0 1 auto;
        min-height: min(42vh, 320px);
        max-height: min(48vh, 380px);
        width: 100%;
    }

    .choose_text__scroll .choose__text__1,
    .choose_text__scroll .choose__text__2 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        font-size: 14px;
        line-height: 1.55;
        margin: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        /* Scroll interno do texto */
        touch-action: pan-y;
    }

    /* Rodapé do painel — sem top:-50px (empurrava layout e sobreponha o CTA/título) */
    .pointers {
        /* No mobile, deixe no fluxo para ficar abaixo do texto */
        position: relative;
        z-index: 2;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        gap: 10px;
        align-items: center;
        flex-shrink: 0;
        margin-top: 8px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .pointer__active {
        width: 70%;
        max-width: 260px;
    }
}