/* =========================================
   VARIÁVEIS & RESET
   ========================================= */
:root {
    --amarelo-wolverine: #FFDD00; /* Ajustar com color picker do Figma */
    --azul-kabum: #0060B1;
    --preto-fundo: #0A0A0A;
    --preto-texto: #1B1B1B;
    --branco: #FFFFFF;
    --cinza-texto: #666666;
}

* { box-sizing: border-box; user-select: none; }
body { font-family: 'Inter', sans-serif; background-color: var(--branco); color: var(--preto-texto); margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }

/* Utilitários */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.flex { display: flex; align-items: center; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.wrap { flex-wrap: wrap; }
.gap { gap: 20px; }
.text-center { text-align: center; }
.w-100 { width: 100%; }
.pos-relative { position: relative; }

/* Cores e Backgrounds */
.bg-amarelo { background-color: var(--amarelo-wolverine); }
.bg-preto { background-color: var(--preto-fundo); color: var(--branco); }
.bg-branco { background-color: var(--branco); }
.cor-branca { color: var(--branco); }
.cor-azul { color: var(--azul-kabum); }
.cor-cinza { color: var(--cinza-texto); }
.borda-arredondada { border-radius: 15px; }

/* =========================================
   DOBRA 01 & 02: HERO E CLASSIFICAÇÃO
   ========================================= */
#dobra-01-hero { 
    /* Valores de Desktop restaurados */
    padding: 120px 0 130px 0; 
    overflow: hidden; 
    
    /* Configuração do Background */
    background-color: var(--amarelo-wolverine); 
    background-image: url('../img/bg-top.png');
    background-size: cover; 
    background-position: center top; 
    background-repeat: no-repeat;
    
    /* Transição suave do background e do padding */
    transition: all 0.6s ease-in-out; 
}

.hero-content { 
    max-width: 700px; 
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    /* O Pulo do Gato: Suaviza a mudança de largura do bloco todo */
    transition: all 0.6s ease-in-out; 
}

.hero-logos-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* O gap também encolhe fluidamente de 30px até 15px */
    gap: clamp(15px, 3vw, 30px); 
    margin-bottom: 10px; 
    position: relative;
    left: -15px; 
}

.logo-kabum-hero {
    /* Mínimo de 32px (mobile), proporção de 8vw, máximo de 120px (desktop) */
height: clamp(54px, 8vw, 120px);
    width: auto;
    display: block;
}

.logo-ps5-hero {
    /* Mínimo de 14px, proporção de 3.5vw, máximo de 50px */
height: clamp(24px, 3.5vw, 50px);
    width: auto;
    margin: 0 !important; 
    display: block;
}

.box-wolverine-data {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-game { 
    width: 100%;
    /* Mínimo de 240px, acompanha 50% da tela, máximo de 680px */
    max-width: clamp(240px, 50vw, 680px); 
    /* A margem inferior também respira junto */
    margin-bottom: clamp(10px, 2vw, 20px); 
}

.img-data {
    width: 100%;
max-width: clamp(268px, 40vw, 550px);
}

/* =========================================
   DOBRA 02: VÍDEO (1920x1080)
   ========================================= */
#dobra-02-video {
    width: 100%;
    background-color: var(--preto-fundo); 
    display: flex;
    justify-content: center;
    padding: 0; 
}

.video-wrapper {
    width: 100%;
    max-width: 1920px; 
    margin: 0 auto; 
    display: flex; 
}

.wolverine-video-yt {
    width: 100%;
    /* O Pulo do Gato: Força o Iframe a manter a proporção exata de vídeo em qualquer tela */
    aspect-ratio: 16 / 9;
    border: none;
    display: block;
}

/* =========================================
   DOBRA 03: FORMULÁRIO (LEAD)
   ========================================= */
#dobra-03-lead { 
    padding: 80px 0; 
    
    /* Configuração do Background */
    background-color: var(--amarelo-wolverine); /* Fallback enquanto a imagem carrega */
    background-image: url('../img/bg-dobra-03.png');
    background-size: cover; /* Faz a textura preencher todo o espaço disponível */
    background-position: center center; /* Mantém o foco no meio da imagem */
    background-repeat: no-repeat; /* Evita que a imagem se repita como um mosaico */
}

.card-lead { background: var(--branco); border-radius: 40px; padding: 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); max-width: 900px; margin: 0 auto; }
.lead-header h2 { color: var(--azul-kabum); font-size: 2.2rem; font-weight: 650; margin-bottom: 10px; }
.lead-header p { color: var(--cinza-texto); font-size: 1.1rem; margin-bottom: 40px; }

.form-lead { gap: 20px; }
.input-group { width: calc(50% - 10px); display: flex; flex-direction: column; }
.input-group label { font-size: 0.9rem; color: var(--preto-texto); margin-bottom: 5px; font-weight: 600; }
.input-group input { padding: 15px; border: 1px solid #ccc; border-radius: 20px; font-family: 'Inter'; font-size: 1rem; outline: none; transition: border 0.3s; }
.input-group input:focus { border-color: var(--azul-kabum); }

.form-footer { margin-top: 20px; align-items: center; }
.checkbox-container { gap: 10px; font-size: 0.85rem; color: var(--cinza-texto); }
.checkbox-container a { color: var(--azul-kabum); font-weight: 600; }
.btn-azul { background-color: var(--azul-kabum); color: var(--branco); border: none; padding: 15px 40px; border-radius: 30px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background 0.3s; }
.btn-azul:hover { background-color: #004a8a; }
/* =========================================
   DOBRA 04 & 05: BANNER E FEATURES
   ========================================= */
#dobra-04-banner img { max-height: 600px; object-fit: cover; }

/* =========================================
   DOBRA 05: FEATURES
   ========================================= */
#dobra-05-features { 
    padding: 80px 0 150px; /* O respiro para o FAQ invadir por baixo continua aqui */
    
    /* Configuração do Background */
    background-color: var(--preto-fundo); /* Fallback defensivo */
    background-image: url('../img/bg-dobra-05.png');
    background-size: cover; /* Cobre 100% da largura/altura do container */
    background-position: center center; /* Mantém a textura focada no meio */
    background-repeat: no-repeat;
    
    position: relative; /* Garante que o z-index das outras dobras funcione em relação a esta */
}

.titulo-secao { 
    font-family: 'SST', sans-serif; /* SST Bold */
    font-size: 2.5rem; 
    font-weight: bold; 
    margin-bottom: 30px; 
}
.card-feature { padding: 20px; }

.card-feature img { margin-bottom: 20px; width: 100%; border: 1px solid #333; }

.label-feature { 
    font-family: 'SST', sans-serif; /* SST Bold */
    font-weight: bold; 
    display: block; 
    font-size: 0.8rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: #aaa; 
    margin-bottom: 5px; 
}

.card-feature h3 { 
    font-family: 'SST', sans-serif; /* SST Bold */
    font-weight: bold; 
    color: var(--branco); 
    font-size: 1.3rem; 
    margin-bottom: 10px; 
    min-height: 3rem; 
}
.card-feature p { 
    font-family: 'SST', sans-serif; /* SST Roman */
    font-weight: normal; 
    color: #ccc; 
    font-size: 0.95rem; 
    line-height: 1.6; 
    margin-bottom: 10px;
}

/* Efeito Papel Rasgado - Isolando o contexto de empilhamento */
.efeito-rasgado {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Ajustar dependendo do asset gerado */
    background: url('../img/borda-rasgada.png') center bottom repeat-x;
    background-size: contain;
    z-index: 10;
}

/* =========================================
   DOBRA 06: FAQ
   ========================================= */
#faq { 
    /* Múltiplos Backgrounds: separados por vírgula. 
       A primeira imagem da lista (bg-faq) é a camada da frente.
       A segunda imagem (bg-dobra-05) fica atrás, garantindo a continuidade da textura. */
    background-image: url('../img/bg-faq.png'), url('../img/bg-dobra-05.png');
    
    /* Aplicamos 'cover' para ambas as imagens cobrirem o espaço disponível */
    background-size: cover, cover; 
    
    /* Mantemos o topo rasgado ancorado em cima e a textura base centralizada */
    background-position: top center, center center; 
    background-repeat: no-repeat, no-repeat;
    
    /* O Pulo do Gato: Ajuste de overlap reduzido de -190px para -170px.
       Isso afasta o FAQ 20px para baixo, liberando espaço para o texto da Dobra 05. */
    margin-top: -170px; 
    position: relative; 
    z-index: 20; 
    
    /* O padding superior garante que as perguntas não encostem no rasgado */
    padding: 200px 0 80px 0; 
}

.faq-header h2 { 
    font-family: 'SST', sans-serif; 
    font-weight: bold; 
    font-size: 2.5rem; 
    margin-bottom: 10px; 
}
.faq-header p { 
    font-family: 'SST', sans-serif; 
    font-weight: normal; 
    font-size: 1.2rem; 
    margin-bottom: 50px; 
}
.faq-box { max-width: 800px; margin: 0 auto; }

/* Overrides do UIkit para o Acordeão */
.accordion-wolverine { 
    font-family: 'SST', sans-serif !important; 
    font-weight: normal !important; 
    color: var(--preto-texto) !important; 
    font-size: 1.1rem !important; 
    border-bottom: 1px solid #eaeaea; 
    padding-bottom: 15px; 
}

.uk-accordion-title::before { 
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%230060B1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; 
}

.uk-accordion-content p {
    font-family: 'SST', sans-serif;
    font-weight: normal;
    color: var(--cinza-texto);
}

#ins-responsive-banner,
.ins-responsive-banner-layout-container,
.ins-slider {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important; 
}


#ins-responsive-banner .ins-slider-page {
    width: calc(100% / var(--child-count, 2)) !important; 
    flex: 1 1 0% !important; 
    max-width: 100% !important;
}

/* =========================================
   RESPONSIVO BASE (MOBILE ATÉ 768px)
   ========================================= */
@media (max-width: 768px) {
    /* Ajustes Gerais e Tipografia Fluida */
    .container { padding: 0 15px; }
    .titulo-secao, .faq-header h2 { font-size: 1.8rem !important; margin-bottom: 30px; }

/* Dobra 01: Hero (Apenas alinhamento, tamanhos resolvidos via clamp) */
    #dobra-01-hero { 
        padding: 50px 0 40px 0; 
        background-position: 50% top; /* Posição de fundo mantida */
    }
    
    .hero-content { 
        max-width: 200px; /* Mantém o bloco ancorado à esquerda no mobile */
        margin: 0 auto 0 0; 
        align-items: center; 
    }

    .hero-logos-container { 
        left: 0; /* Reseta o deslocamento horizontal no mobile */
        margin-bottom: 15px;
    }
    
    /* Dobra 02: Classificação */
    #dobra-02-classificacao { padding: 40px 0; }
    .box-classificacao { font-size: 1.2rem; padding: 20px; }

    /* Dobra 03: Lead Capture */
    #dobra-03-lead { padding: 50px 0; }
    .card-lead { padding: 30px 20px; border-radius: 20px; }
    .lead-header h2 { font-size: 1.6rem; }
    .lead-header p { font-size: 0.95rem; margin-bottom: 30px; }
    
    .form-lead { gap: 0; } /* Removemos o gap do grid para usar margin-bottom isolado */
    .input-group { width: 100%; margin-bottom: 15px; }
    
    .form-footer { 
        flex-direction: column; /* Empilha checkbox e botão */
        align-items: flex-start; /* Alinha os textos da esquerda */
        gap: 20px; 
    }
    .checkbox-container { align-items: flex-start; }
    .checkbox-container input { margin-top: 4px; } /* Alinha o check visualmente com a primeira linha de texto */
    .btn-azul { width: 100%; padding: 15px; }

    /* Dobra 05: Features */
    #dobra-05-features { padding: 50px 0 80px 0; } /* Respiro menor na base */
    .card-feature { padding: 0; margin-bottom: 30px; }
    .card-feature h3 { min-height: auto; font-size: 1.3rem; margin-bottom: 10px; }
    /* A grid do UIkit automaticamente empilha 1 por 1 graças ao uk-child-width-1-1 */

    /* Dobra 06: FAQ Overlap Ajustado */
#faq { 
        /* O Pulo do Gato: Aumentamos a zona transparente de 8vw para 15vw. 
           Isso joga a linha reta do bloco branco mais para baixo, 
           escondendo ela totalmente atrás da parte que já é opaca no seu PNG. */
        background-image: 
            url('../img/bg-faq.png'), 
            linear-gradient(to bottom, transparent 0%, transparent 15vw, var(--branco) 15vw, var(--branco) 100%),
            url('../img/bg-dobra-05.png'); 
        
        background-color: transparent;
        
        background-size: 100% auto, 100% 100%, cover; 
        background-position: top center, top center, top center;
        background-repeat: no-repeat, no-repeat, no-repeat;
        
        margin-top: -60px; 
        padding: 100px 0 50px 0; 
    }
}

/* =========================================
   RESPONSIVO - MOBILE PEQUENO (Até 400px)
   ========================================= */