/* ==========================================================================
   Seção: Produtos Hero (eps_produtos_hero)
   ========================================================================== */

.eps_produtos_hero {
    width: 100%;
    height: 695px;
    background-size: cover;
    background-position: center 63%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Container de alinhamento para limitar e centralizar a largura útil */
.eps_produtos_hero_container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Bloco de Textos (Card) */
.eps_produtos_hero_card {
    width: 660px;
    background-color: rgba(26, 61, 109, 0.87);
    border-radius: 20px;
    padding: 48px; /* Espaçamento interno confortável para manter o aspecto visual */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Título */
.eps_produtos_hero_title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 48px;
    color: #FFFFFF;
    margin: 0 0 10px 0;
    max-width: 27rem;
}

/* Descrição */
.eps_produtos_hero_description {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 32px;
    color: #FFFFFF;
    margin: 0;
        max-width: 40rem;
}

/* Responsivo para telas de tablets/celulares */
@media (max-width: 991px) {
    .eps_produtos_hero {
        height: auto;
        padding: 60px 0;
               background-position: bottom right;
    }
    
    .eps_produtos_hero_card {
        width: 100%;
        height: auto;
        padding: 50px 20px;
    }

    .eps_produtos_hero_title {
        font-size: 23px;
                line-height: 40px;
    }

    .eps_produtos_hero_description {
        font-size: 15px;
                line-height: 1.3;
    }
    .eps_produtos_hero_container {
        padding: 0 20px;
    }
}


/* ==========================================================================
   Seção: Portfólio de Produtos (eps_produtos_portfolio)
   ========================================================================== */

.eps_produtos_portfolio {
    width: 100%;
    padding: 50px 0;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

.eps_produtos_portfolio_container {
   width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Título Principal */
.eps_produtos_portfolio_main_title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 30px;
    color: #1A81BC;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Container de Categorias (Scroll horizontal adaptativo em telas pequenas) */
.eps_produtos_filter_tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 30px;
}

/* Tags de Categorias */
.eps_produtos_tab_btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #5A6A7E;
    text-transform: uppercase;
    background-color: #FFFFFF;
    border: 1px solid #DCE4EF;
    border-radius: 3px;
    padding: 14px 36px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.eps_produtos_tab_btn:hover,
.eps_produtos_tab_btn.eps_produtos_tab_active {
    background-color: #EEEEEE;
    border-color: #DCE4EF;
}




.eps_produtos_tab_btn.eps_produtos_tab_active {
    background-color: #EEEEEE;
    border-color: #DCE4EF;
}

/* Grid de Produtos - 3 Colunas com Gutter Perfeito */
.eps_produtos_grid {
    display: grid;
    /* Adapta automaticamente as colunas conforme o tamanho da tela */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    width: 100%;
    box-sizing: border-box;
}

.eps_produtos_grid > * {
    min-width: 0; /* Previne que elementos flex/grid vazem por causa de textos longos */
    max-width: 100%;
    box-sizing: border-box;
}

/* CARD DE PRODUTO */
.eps_produtos_card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0px;
    border-radius: 10px;
}

@media (min-width: 768px) {
    .eps_produtos_card {
        padding: 2rem;
    }
}


.eps_produtos_card_img_wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Força proporção 1:1 baseada na largura */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: #F9F9F9;
}

.eps_produtos_card_img {
max-width: 100%;
	width: 322px;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eps_produtos_card { transition: background-color 0.4s ease; } .eps_produtos_card_img { transition: transform 0.4s ease; } .eps_produtos_card:hover .eps_produtos_card_img { transform: scale(1.03); } .eps_produtos_card:hover { background: #f1f1f1; }

.eps_produtos_card_content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.eps_produtos_card,
.eps_produtos_card:hover,
.eps_produtos_card:focus,
.eps_produtos_card:visited {
    text-decoration: none !important;
}

.eps_produtos_card * {
    text-decoration: none;
}
.eps_produtos_card_title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.eps_produtos_card_desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px; /* Mantido conforme seu briefing */
    line-height: 1.3;
    color: #828282;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

/* Botões do Card */
.eps_produtos_card_buttons {
    display: flex;
    margin-top: auto;
    justify-content: space-between;
}

.eps_produtos_btn_ficha {

    width: 43%;
}



.eps_produtos_btn_ficha,
.eps_produtos_btn_cotacao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    padding: 9px 19px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.eps_produtos_btn_ficha .arrow,
.eps_produtos_btn_cotacao .arrow {
    margin-left: 5px;
}

/* Botão Ficha Técnica */
.eps_produtos_btn_ficha {
    background-color: transparent;
    border: 1px solid #1A3A6B;
    color: #1A3A6B;
}

.eps_produtos_btn_ficha:hover {
    background-color: rgba(26, 58, 107, 0.05);
}

/* Botão Solicitar Cotação */
.eps_produtos_btn_cotacao {
    background-color: #1A3A6B;
    border: 1px solid #1A3A6B;
    color: #FFFFFF;
}

.eps_produtos_btn_cotacao:hover {
    background-color: #132b50;
    border-color: #132b50;
}

/* Botão Mostrar Mais */
.eps_produtos_loadmore_container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#eps_produtos_btn_loadmore {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #1A3A6B;
    background-color: transparent;
    border: 2px solid #1A3A6B;
    padding: 12px 30px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

#eps_produtos_btn_loadmore:hover {
    background-color: #1A3A6B;
    color: #FFFFFF;
}

.eps_produtos_grid_wrapper {
    width: 100%;
    overflow: hidden; /* Evita que qualquer elemento quebre o layout horizontal */
}

/* Esconde o Select no Desktop e exibe os Botões */
.eps_mobile_only {
    display: none;
}

.eps_desktop_only {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.eps_custom_select {
    position: relative;
    width: 80%;
    user-select: none;
    font-family: inherit;
}

/* Caixa principal que substitui o campo do select */
.eps_select_trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 16px;
    background-color: transparent;
border: 1px solid #DCE4EF;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
        font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #5A6A7E;
    text-transform: uppercase;
}

.eps_select_trigger:hover {
    border-color: #0056b3;
}

.eps_arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Seta animada */
.eps_arrow img {
    width: 15px;
    height: auto;
    transform: rotate(90deg);
    /* Define o tempo e o tipo de animação da transição */
    transition: transform 0.3s ease;
}

.eps_custom_select.open .eps_arrow img {
    transform: rotate(270deg);
}
/* Lista de Opções (que era a caixa inacessível do select) */
.eps_select_options {
    display: none;
    position: absolute;
    top: calc(100% + -1px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
    list-style: none;
    padding: 6px 0;
    margin: 0;
    z-index: 999;
    max-height: 250px;
    overflow-y: auto;
}

.eps_custom_select.open .eps_select_options {
    display: block;
}

/* Estilização individual de cada item (substituto da option) */
.eps_option {
    padding: 10px 16px;
        font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #5A6A7E;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease;
}




/* Esconde os Botões no Mobile e exibe o Select */
@media (max-width: 768px) {
    .eps_desktop_only {
        display: none;
    }

    .eps_mobile_only {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   Responsividade Portfólio (Pixel Perfect Adaptations)
   ========================================================================== */

@media (max-width: 1200px) {
    /* Ajuste para telas menores em que o font-size 24px na descrição pode estourar muito espaço */
    .eps_produtos_card_title {
        font-size: 20px;
    }
    .eps_produtos_card_desc {
        font-size: 14px;
    }
    .eps_produtos_btn_ficha,
    .eps_produtos_btn_cotacao {
        font-size: 13px;
        padding: 9px 12px;
    }
}

@media (max-width: 991px) {
    .eps_produtos_grid {
        grid-template-columns: repeat(2, 1fr); /* Transição suave para 2 colunas */
    }
    .eps_produtos_portfolio_container {
        padding: 0 20px;
    }
}

/* ==========================================================================
   Ajuste do Grid de Produtos: 2 Colunas Perfeitas no Mobile (Sem Overflow)
   ========================================================================== */
@media (max-width: 767px) {
	
	.eps_produtos_portfolio_main_title {
		font-size: 26px;
	}
	
    /* 1. Remove qualquer overflow na seção e força o container a respeitar a tela */
    .eps_produtos_grid_wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* 2. Força o grid a ter exatamente 2 colunas flexíveis de 50% menos o gap */
    .eps_produtos_grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap: 30px 20px;
    }

    /* 3. Força os cards a nunca ultrapassarem o tamanho da sua respectiva coluna */
    .eps_produto_card {
        width: 100% !important;
        min-width: 0 !important; 
        max-width: 100% !important;
        padding: 5px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    

    /* 4. Força a imagem a encolher proporcionalmente ao card */
    .eps_produto_card img,
    .eps_produto_card .wp-post-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* Mantém a imagem quadradinha e proporcional */
        object-fit: cover !important;
    }

    /* 5. Títulos menores para caber no espaço disponível */
    .eps_produto_card h3,
    .eps_produto_card_title { 
        font-size: 13px !important;
        line-height: 1.2 !important;
        margin: 8px 0 4px 0 !important;
        word-break: break-word !important; /* Evita que palavras longas empurrem a largura */
    }

    /* 6. Descrição curta e compacta */
    .eps_produto_card p,
    .eps_produto_card_description {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin: 0 0 10px 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important; /* Reduzido para 2 linhas para sobrar espaço para os botões */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* 7. Alinha os botões na vertical para que caibam em colunas estreitas */
    .eps_produto_card_buttons,
    .eps_produto_card .buttons-wrapper { /* Troque pelo seletor de botões do seu card */
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 6px !important;
    }

    /* 8. Ajuste fino nos botões para que fiquem inteiros dentro do card */
    .eps_produto_card .btn, 
    .eps_produto_card a,
    .eps_produto_card button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 10px !important; /* Diminui a fonte levemente para não quebrar texto longo */
        padding: 8px 4px !important;
        height: auto !important;
        min-height: 32px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .eps_produtos_card_buttons {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .eps_produtos_btn_ficha, .eps_produtos_btn_cotacao {
        width: 100% !important;
        font-size: 11px !important;
        padding: 8px 0 !important;
    }

    .eps_produtos_card_title {
        font-size: 16px;
    }
}

/* ==========================================================================
   SEÇÃO 8: NORMAS E REGULAMENTAÇÕES (PIXEL PERFECT)
   ========================================================================== */

.eps_sobre_rules {
    width: 100%;
    background-color: #efefef; /* Fundo Branco conforme solicitado */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 50px 0;
}

.eps_sobre_rules_container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centralização vertical perfeita sem botão */
    gap: 40px;
    box-sizing: border-box;
}

/* Cabeçalho */
.eps_sobre_rules_header {
    text-align: center;
    max-width: 800px;
}

.eps_sobre_rules_title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 100%;
    color: #1A3D6D;
    margin: 0 0 10px 0;
}

.eps_sobre_rules_desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
    color: #5A7A8A;
    margin: 0;
}

/* Fileira de Logos */
.eps_sobre_rules_logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px; /* Um pouco mais espaçado já que são 4 itens */
    width: 100%;
}

.eps_sobre_rules_logo_item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.eps_sobre_rules_logo_item img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


/* Medidas cirúrgicas para as Imagens das Normas */
.eps_rule_ibama img {
    width: 180px;
       height: 200px;
}

.eps_rule_marinha img {
    width: 160px;
     height: 200px;
}

.eps_rule_conama img {
    width: 145px;
        height: 200px;
}

.eps_rule_imo img {
    width: 170px;
        height: 200px;
   
}

/* ==========================================================================
   RESPONSIVIDADE SEÇÃO 8
   ========================================================================== */

@media (max-width: 1100px) {
    .eps_sobre_rules_logos {
        gap: 32px;
        flex-wrap: wrap; /* Encaixa em 2x2 se faltar espaço na horizontal */
    }
}

@media (max-width: 768px) {
    .eps_sobre_rules {
        height: auto; /* Altura flexível para mobile */
        padding: 60px 0;
    }

    .eps_sobre_rules_container {
        gap: 32px;
        padding: 0 40px;
    }

    .eps_sobre_rules_title {
        font-size: 24px;
        line-height: 30px;
    }

    .eps_sobre_rules_desc {
        font-size: 15px;
        line-height: 22px;
    }

    /* Grid fluido para os selos em mobile */
    .eps_sobre_rules_logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 por linha em telas menores */
        gap: 24px;
        justify-items: center;
    }

    .eps_sobre_rules_logo_item img {
        max-width: 140px; /* Escala segura para não quebrar o layout mobile */
        height: auto !important; /* Sobrescreve as alturas fixadas */
    }

    .eps_rule_conama img {
        max-width: 120px !important
    }
}