/* ========================================================
   PÁGINA DE PRODUTOS: KITS GNV E GLP
   ======================================================== */

.kits-container {
    width: 100%;
    overflow-x: hidden;
    /* Previne scroll horizontal indesejado */
}

/* --- 1. ESTRUTURA BASE DA FAIXA (100% da tela) --- */
.kit-section {
    width: 100%;
    position: relative;
    padding: 100px 20px;
    /* Respiro superior e inferior */
    display: flex;
    justify-content: center;
    /* Centraliza o conteúdo interno */
}

/* --- 2. O MIOLO (Onde o texto e a imagem ficam limitados) --- */
.kit-content {
    max-width: 1200px;
    /* Mantém o conteúdo alinhado e não estica demais em telas gigantes */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* A mágica de inverter o layout (Imagem na Esquerda, Texto na Direita) */
.kit-section.reverse .kit-content {
    flex-direction: row-reverse;
}

.kit-text {
    flex: 1;
    /* Ocupa 50% do espaço */
}

.kit-img {
    flex: 1;
    /* Ocupa os outros 50% do espaço */
    display: flex;
    justify-content: center;
}

.kit-img img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
    /* Sombra elegante nas caixas */
}

/* --- 3. TIPOGRAFIA --- */
.kit-text h2 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.1;
}

.kit-text p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* --- 4. CORES DE FUNDO E TEXTO EXATAS DO SEU LAYOUT --- */
.section-atlas {
    background-color: #ffd600;
    /* Amarelo IGT */
    color: #1a1a1a;
}

.section-aquiles {
    background-color: #1b903e;
    /* Verde */
    color: #ffffff;
}

.section-hercules {
    background-color: #006eb7;
    /* Azul */
    color: #ffffff;
}

.section-zeus {
    background-color: #e30613;
    /* Vermelho IGT */
    color: #ffffff;
}

.section-titan {
    background-color: #2a2a2a;
    /* Chumbo Escuro */
    color: #ffffff;
}

/* --- 5. BOTÕES (Dark e Light) --- */
.kit-buttons {
    display: flex;
    gap: 15px;
    margin-top: 35px;
}

.btn-kit {
    display: inline-block;
    padding: 12px 35px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    /* Borda levemente arredondada como no layout */
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Botão Preto (Atlas) */
.btn-kit.dark {
    border: 2px solid #1a1a1a;
    color: #1a1a1a;
}

.btn-kit.dark:hover {
    background-color: #1a1a1a;
    color: #ffd600;
}

/* Botões Brancos (Aquiles, Hércules, Zeus, Titan) */
.btn-kit.light {
    border: 2px solid #ffffff;
    color: #ffffff;
}

.btn-kit.light:hover {
    background-color: #ffffff;
    color: #333;
    /* Fica escuro ao passar o mouse */
}

/* --- 6. EFEITO DE BORDA RASGADA (Pincelada) --- */
/* Isso vai posicionar a borda rasgada entre as seções. 
   Você precisará de uma imagem PNG transparente com esse rasgo, 
   ou pode usar um SVG para fazer a máscara */
.edge-divisor {
    position: absolute;
    bottom: -1px;
    /* Posiciona no limite inferior da faixa */
    left: 0;
    width: 100%;
    height: 35px;
    /* Altura do rasgado */
    background-image: url('../img/produtos/rasgo.png');
    /* Crie e aponte para sua imagem aqui! */
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: contain;
    z-index: 10;
}

/* Remove a borda rasgada da última seção (Titan) para não sobrepor o rodapé */
.section-titan .edge-divisor {
    display: none;
}

/* ========================================================
   ESTILOS DA PÁGINA INDIVIDUAL DO KIT (Ex: Mini Atlas)
   ======================================================== */

/* TEMAS DE CORES PARA OS FUNDOS DOS KITS */
.tema-miniatlas {
    background: radial-gradient(circle at 78% 45%, #FFB700 0%, #FF6B00 45%, #E65C00 100%);
}

.tema-atlas-glp {
    background: radial-gradient(circle at 78% 45%, #FFB700 0%, #FF6B00 45%, #E65C00 100%);
}

.tema-atlas-gnv {
    background: radial-gradient(circle at 78% 45%, #FFB700 0%, #FF6B00 45%, #E65C00 100%);
}

.tema-aquiles {
    background: linear-gradient(135deg, #219d2a 0%, #156b1a 100%);
}

.tema-hercules {
    background: linear-gradient(135deg, #006ebc 0%, #00457a 100%);
}

.tema-zeus {
    background: linear-gradient(135deg, #d80000 0%, #990000 100%);
}

.tema-titan {
    background: linear-gradient(135deg, #252525 0%, #000000 100%);
}

.mainProdutoKit {
    padding-top: 80px;
}

/* ========================================================
   SEÇÃO 1 - HERO (CORREÇÕES DE ALINHAMENTO)
   ======================================================== */
.sec1Kit {
    position: relative;
    padding: 80px 20px 140px;
    /* Tira as porcentagens laterais e usa o container para centralizar */
    color: #ffffff;
    overflow: hidden;
}

/* Trava o conteúdo no centro para não esticar em monitores grandes */
.containerHeroKit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 3; /* Ganha prioridade sobre o corte diagonal */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    gap: 40px;
}

/* Coluna da Esquerda (Textos) */
.textosHeroKit {
    flex: 1;
    max-width: 50%;
}

.marcaDaguaHero {
    position: absolute;
    top: 45%;
    right: 5%;      
    left: auto;       
    transform: translateY(-70%);
    height: 55%;     
    
    opacity: 0.8;    
    
    z-index: 1;
    pointer-events: none;
}

.selosKit {
    display: flex;
    gap: 0px;
    margin-bottom: 00px;
    margin-left: -35px;
}

.selosKit img {
    height: 150px;
    width: auto;
}

.tagGeracaoKit {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.tituloPrincipalKit {
    font-size: 72px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1;
}

.descricaoKitHero p {
    font-size: 18px;
    line-height: 1.6;
}

.descricaoKitHero p.mt-15 {
    margin-top: 15px;
}

/* Alinha o bloco da imagem totalmente à direita da tela */
.imagemHeroKit {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Puxa a caixa para a borda direita */
    position: relative;
}

/* ========================================================
   (CORREÇÃO DE RAMPA E CAIXA CORRIGIDA)
   ======================================================== */

/* 1. Aumentamos o respiro inferior para a caixa ter espaço para descer */
.sec1Kit {
    position: relative;
    padding: 100px 20px 180px; 
    color: #ffffff;
    overflow: hidden;
}

/* 2. Caixa com tamanho imponente e mergulho correto na rampa */
.imagemHeroKit img {
    width: 100%;
    max-width: 580px; 
    transform: scale(1.12) translateY(85px); /* O translateY(85px) faz ela afundar e cruzar a linha */
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.35)); 
    z-index: 4;
}

/* 3. A rampa cirúrgica com clip-path (Substitua seu .sec1Kit::after por este) */
.sec1Kit::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px; /* Altura base da nossa área de corte */
    background-color: #f4f4f4; 
    z-index: 2; 
    /* MÁGICA DOS PONTOS:
       0 96%   -> Começa bem rente ao canto inferior esquerdo (liberando o texto)
       100% 15% -> Sobe alto no canto direito (cortando a caixa exatamente na proporção do Wix)
       100% 100% e 0 100% -> Preenchem a base de branco para não vazar o gradiente
    */
    clip-path: polygon(0 96%, 100% 15%, 100% 100%, 0 100%);
}

/* ========================================================
   SEÇÃO 2 - CARROSSEL DE PEÇAS
   ======================================================== */

#imgDestaquePeca {
    width: 100%;
    max-width: 380px;    /* Tamanho ideal para equilibrar com o bloco de texto */
    height: auto;
    max-height: 350px;   /* Impede que o redutor vire um gigante na tela */
    object-fit: contain;
    filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.15));
}

.sec2Kit {
    padding: 0 0 100px 0;
    background: #f4f4f4;
    /* Cinza clarinho igual ao original */
    position: relative;
    z-index: 2;
}

/* A barra cinza que abraça as miniaturas */
.fundoMiniaturas {
    background-color: #e8e8e8;
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 60px;
}

.navPecas {
    display: flex;
    justify-content: center;
}

.thumbPeca {
    cursor: pointer;
    opacity: 0.5;
    transition: 0.3s;
    padding: 20px 40px;
    position: relative;
}

.thumbPeca.ativo {
    opacity: 1;
    background-color: #d8d8d8;
    border-bottom: 3px solid #ff6b00;
}

.thumbPeca img {
    height: 100px;
    object-fit: contain;
}

.exibicaoPecaDetalhe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
}

.conteudoPecaAtual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    width: 85%;
}

.imgPecaDestaque {
    width: 10%;
    display: flex;
    justify-content: flex-end;
}

.imgPecaDestaque img {
    max-width: 10%;
    max-height: 10%;
    object-fit: contain;
}

.descricaoPeca {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.descricaoPeca h2 {
    font-size: 34px;
    color: #1a1a1a;
    margin-bottom: 20px;
    font-weight: 700;
}

.descricaoPeca p {
    font-size: 18px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.setaPeca {
    background: none;
    border: none;
    font-size: 50px;
    font-weight: 300;
    color: #bbbbbb;
    cursor: pointer;
    transition: 0.3s;
}

.setaPeca:hover {
    color: #ff6b00;
}

.btnBaixarCatalogo {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff6b00;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
}

/* ========================================================
   TEMAS DE CORES DINÂMICOS (BOTÕES, SETAS E MINIATURAS)
   ======================================================== */

/* Hércules (Azul) */
[data-kit*="hercules"] .btnBaixarCatalogo { background-color: #006EBC; }
[data-kit*="hercules"] .thumbPeca.ativo { border-bottom-color: #006EBC !important; }
[data-kit*="hercules"] .setaPeca:hover { color: #006EBC; }

/* Zeus (Vermelho) */
[data-kit*="zeus"] .btnBaixarCatalogo { background-color: #D80000; }
[data-kit*="zeus"] .thumbPeca.ativo { border-bottom-color: #D80000 !important; }
[data-kit*="zeus"] .setaPeca:hover { color: #D80000; }

/* Aquiles (Verde) */
[data-kit*="aquiles"] .btnBaixarCatalogo { background-color: #219D2A; }
[data-kit*="aquiles"] .thumbPeca.ativo { border-bottom-color: #219D2A !important; }
[data-kit*="aquiles"] .setaPeca:hover { color: #219D2A; }

/* Titan (Chumbo) */
[data-kit*="titan"] .btnBaixarCatalogo { background-color: #252525; }
[data-kit*="titan"] .thumbPeca.ativo { border-bottom-color: #252525 !important; }
[data-kit*="titan"] .setaPeca:hover { color: #252525; }

/* ========================================================
   SEÇÃO 3 - LISTA DE COMPONENTES
   ======================================================== */
.sec3KitComponentes {
    padding: 100px 10% 120px;
    position: relative;
    color: #ffffff;
}

.sec3KitComponentes.tema-miniatlas {
    /* Substitui o radial por um linear suave de cima para baixo */
    background: linear-gradient(180deg, #FF7A00 0%, #FF6B00 50%, #E65C00 100%);
}

.sec3KitComponentes.tema-atlas-glp {
    background: linear-gradient(180deg, #FF7A00 0%, #FF6B00 50%, #E65C00 100%);
}

.sec3KitComponentes.tema-atlas-gnv {
    background: linear-gradient(180deg, #FF7A00 0%, #FF6B00 50%, #E65C00 100%);
}

.sec3KitComponentes.tema-aquiles {
    background: linear-gradient(135deg, #219d2a 0%, #156b1a 100%);
}

.sec3KitComponentes.tema-hercules {
    background: linear-gradient(180deg, #006EBC 0%, #005A99 50%, #00457A 100%);
}

.sec3KitComponentes.tema-zeus {
    background: linear-gradient(180deg, #D80000 0%, #B30000 50%, #800000 100%);
}

.sec3KitComponentes.tema-titan {
    background: linear-gradient(180deg, #252525 0%, #1a1a1a 50%, #000000 100%);
}

.containerComponentes h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 50px;
    letter-spacing: 1px;
}

.gridComponentes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 100px;
}

.listaItens {
    list-style: none;
    padding: 0;
}

.listaItens li {
    font-size: 18px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.listaItens li::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    border-radius: 50%;
}

/* ========================================================
   SEÇÃO 4 - BANNER COLETIVO (GAIOLÃO)
   ======================================================== */
.sec4Gaiolao {
    background-color: #f4f4f4; /* Cinza claro idêntico ao fundo do carrossel */
    padding: 60px 20px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.gaiolaoContainer {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.imgGaiolao {
    width: 100%;
    max-width: 900px;
    height: auto;
    object-fit: contain;
}

/* ========================================================
   7. RESPONSIVIDADE PROFISSIONAL (TABLETS E MOBILE)
   ======================================================== */

/* --------------------------------------------------------
   MEDIA QUERY - TABLETS (Até 1024px) -> SE ADAPTA EM TABLETS E CELULARES
   -------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Ajustes Gerais de Seção do Portfólio */
    .kit-content {
        flex-direction: column !important;
        text-align: center;
        gap: 40px;
    }
    .kit-section { padding: 70px 20px; }
    .kit-text h2 { font-size: 32px; }
    .kit-buttons { justify-content: center; }

    /* Hero do Kit */
    .containerHeroKit {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .textosHeroKit {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .selosKit {
        margin-left: 0;
        margin-bottom: -15px;
        justify-content: center;
    }

    .imagemHeroKit {
        width: 100%;
        justify-content: center;
    }

    .imagemHeroKit img {
        max-width: 480px;
        transform: scale(1) translateY(45px); /* Suaviza a descida para telas menores */
    }

    /* === SEÇÃO 2: CARROSSEL VERTICAL E-COMMERCE (MÁGICA GLOBAL) === */
    .sec2Kit {
        display: flex;
        flex-direction: row; 
        padding: 40px 15px 60px;
        align-items: stretch; /* Garante alinhamento perfeito de topo e base */
        gap: 15px;
    }

    /* Coluna Esquerda: Sidebar de Miniaturas */
    .fundoMiniaturas {
        width: 25%;
        margin: 0;
        border: none;
        background: transparent;
        padding: 0;
        display: flex; 
    }
    
    .navPecas {
        display: flex;
        flex-direction: column; 
        justify-content: space-between; /* Espalha as caixas simetricamente */
        height: 100%; 
        gap: 0; 
        width: 100%;
    }
    
    .thumbPeca {
        width: 100%;
        height: 75px; 
        padding: 5px;
        background-color: #f2f2f2; 
        border-radius: 8px;
        border: 2px solid transparent; 
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .thumbPeca.ativo {
        background-color: #ffffff;
        border-color: #e8e8e8;
        border-bottom: 2px solid #e8e8e8; 
    }
    
    .thumbPeca img {
        height: 55px; 
        width: auto;
        object-fit: contain;
    }

    /* Coluna Direita: Conteúdo Principal */
    .exibicaoPecaDetalhe {
        width: 75%; 
        padding: 0; 
        position: relative; /* Âncora essencial para as setas absolutas */
        display: flex; 
        flex-direction: column; 
    }
    
    .conteudoPecaAtual {
        width: 100%; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%; 
        gap: 15px; 
        padding: 0; 
    }
    
    #imgDestaquePeca {
        max-width: 100%;
        max-height: 250px; 
        margin: 0 auto; 
    }
    
    .descricaoPeca {
        width: 100%;
        text-align: left;
        padding-bottom: 0; 
        position: static; 
        display: flex;
        flex-direction: column;
        justify-content: flex-end; 
        flex-grow: 1; 
    }
    
    .descricaoPeca h2 {
        font-size: 22px;
        margin-bottom: 10px;
    }
    
    .descricaoPeca p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    /* Alinhamento do Botão e Setas na Mesma Linha Horizontial */
    .btnBaixarCatalogo {
        padding: 10px 20px;
        font-size: 14px;
        align-self: flex-start; 
    }
    
    .setaPeca {
        position: absolute;
        bottom: 5px; 
        transform: none; 
        font-size: 32px;
        color: #cccccc;
        padding: 0;
        background: transparent;
    }
    
    #btnPrevPeca {
        right: 45px;
        left: auto; 
    }
    
    #btnNextPeca {
        right: 5px;
    }
}

/* --------------------------------------------------------
   MEDIA QUERY - SMARTPHONES (Até 768px) -> APENAS AJUSTES FINOS
   -------------------------------------------------------- */
@media (max-width: 768px) {
    
    /* === SEÇÃO 1: HERO MOBILE === */
    .mainProdutoKit {
        padding-top: 0px; 
    }

    .sec1Kit {
        padding: 60px 20px 140px;
    }

    .tituloPrincipalKit {
        font-size: 48px; 
    }

    .tagGeracaoKit {
        font-size: 18px;
    }

    .descricaoKitHero p {
        font-size: 16px;
        max-width: 100%;
    }

    .marcaDaguaHero {
        height: 45%; 
        top: 75%;
        right: -15%;
        opacity: 0.8;
    }

    .imagemHeroKit img {
        max-width: 95%; 
        transform: scale(1) translateY(65px);
    }

    .sec1Kit::after {
        height: 200px; 
        clip-path: polygon(0 94%, 100% 25%, 100% 100%, 0 100%);
    }

    /* === SEÇÃO 2: DETALHES COMPACTOS PARA TELAS SMARTPHONE === */
    #imgDestaquePeca {
        max-height: 200px; /* Reduz levemente para economizar tela no celular */
    }

    .thumbPeca {
        height: 65px; /* Caixas ligeiramente menores para encaixe anatômico do polegar */
    }

    .thumbPeca img {
        height: 45px;
    }

    /* === SEÇÃO 3: GRID DE COMPONENTES === */
    .sec3KitComponentes {
        padding: 60px 24px 80px;
    }

    .containerComponentes h2 {
        font-size: 28px;
        text-align: center;
        margin-bottom: 35px;
    }

    .gridComponentes {
        grid-template-columns: 1fr; /* Transforma as duas colunas em uma linha única contínua */
        gap: 0;
    }

    .listaItens li {
        font-size: 16px;
        padding: 8px 0; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Divisor sutil de leitura */
    }
    
    .listaItens:first-of-type li:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .listaItens li::before {
        flex-shrink: 0;
    }

    /* === SEÇÃO 4: GAIOLÃO (BANNER COLETIVO) === */
    .sec4Gaiolao {
        padding: 40px 16px 60px;
    }

    .gaiolaoContainer {
        gap: 30px;
    }

    .imgGaiolao {
        max-width: 100%; 
    }
}