/*
|--------------------------------------------------------------------------
| Catálogo de Certificados - index_edition v2
|--------------------------------------------------------------------------
| CSS isolado pelo prefixo .ce- para não conflitar com o site atual.
*/

.ce-catalogo {
    padding: 30px 0 35px;
    margin-bottom: 0;
    background: transparent;
}

.ce-container {
    width: min(1180px, calc(100% - 30px));
    margin: 0 auto;
}

.ce-titulo-pagina {
    text-align: center;
    margin-bottom: 24px;
}

.ce-titulo-pagina h2 {
    margin: 0 0 6px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    color: #183655;
}

.ce-titulo-pagina p {
    margin: 0;
    font-size: 17px;
    color: #50647a;
}

.ce-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.ce-categoria-btn {
    min-width: 125px;
    padding: 12px 20px;
    border: 1px solid #dce4ea;
    border-radius: 9px;
    background: #fff;
    color: #26364a;
    font-size: 16px;
    cursor: pointer;
    transition: .2s ease;
}

.ce-categoria-btn:hover {
    border-color: #169447;
    color: #0b7c3a;
}

.ce-categoria-btn.is-active {
    border-color: #159447;
    background: #159447;
    color: #fff;
    box-shadow: 0 5px 14px rgba(21, 148, 71, .18);
}

.ce-categoria-painel {
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(420px, 1fr) minmax(220px, 270px);
    gap: 0;
    border: 1px solid #e5eaee;
    border-radius: 16px 16px 0 0;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 30px rgba(43, 66, 91, .08);
    overflow: hidden;
}

.ce-info,
.ce-produtos,
.ce-beneficios {
    padding: 30px;
}

.ce-info,
.ce-produtos {
    border-right: 1px solid #e7ecef;
}

.ce-info h3,
.ce-bloco-titulo h3 {
    margin: 0;
    color: #087b39;
    font-size: 24px;
    font-weight: 700;
}

.ce-info p {
    margin: 20px 0 16px;
    color: #35465a;
    line-height: 1.65;
    font-size: 15px;
}

.ce-traco {
    width: 42px;
    height: 3px;
    margin-top: 10px;
    border-radius: 50px;
    background: #18a34a;
}

.ce-imagem-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    margin: 12px 0 18px;
}

.ce-imagem-wrap img {
    display: block;
    max-width: 100%;
    max-height: 210px;
    object-fit: contain;
}

.ce-selo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dcebe1;
    border-radius: 10px;
    background: #f5fbf7;
    color: #13733a;
    line-height: 1.4;
}

.ce-selo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 2px solid #159447;
    border-radius: 50%;
    font-weight: 700;
}

.ce-modelos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.ce-modelo-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 14px 16px;
    border: 1px solid #dfe5e9;
    border-radius: 10px;
    background: #fff;
    color: #24384d;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.ce-modelo-btn:hover {
    border-color: #56b873;
    background: #fbfffc;
}

.ce-modelo-btn.is-active {
    border-color: #2baa55;
    background: #f1fbf4;
    box-shadow: inset 0 0 0 1px #2baa55;
}

.ce-modelo-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 9px;
    background: #edf8f0;
    color: #128340;
    font-size: 21px;
}

.ce-prazos-titulo {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #edf0f2;
}

.ce-ofertas {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.ce-oferta {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    min-height: 74px;
    padding: 11px 13px;
    border: 1px solid #e2e7ea;
    border-radius: 10px;
    background: #fff;
    transition: .2s ease;
}

.ce-oferta:hover {
    border-color: #b7d9c2;
    box-shadow: 0 5px 15px rgba(33, 112, 65, .08);
}

.ce-oferta-prazo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.ce-calendario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 9px;
    background: #edf8f0;
    color: #118840;
    font-size: 20px;
}

.ce-oferta-prazo strong {
    display: block;
    color: #24364a;
    font-size: 15px;
}

.ce-oferta-prazo small {
    display: block;
    margin-top: 3px;
    max-width: 330px;
    overflow: hidden;
    color: #778594;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ce-oferta-valor {
    white-space: nowrap;
    color: #087b39;
}

.ce-oferta-valor span {
    margin-right: 3px;
    font-size: 13px;
}

.ce-oferta-valor strong {
    font-size: 19px;
}

.ce-comprar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 115px;
    min-height: 42px;
    padding: 9px 14px;
    border: 0;
    border-radius: 8px;
    background: #118b40;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    cursor: pointer;
    transition: .2s ease;
}

.ce-comprar:hover {
    background: #087334;
    transform: translateY(-1px);
}

.ce-comprar.is-disabled {
    background: #b6c2ba;
    cursor: not-allowed;
    transform: none;
}

.ce-importante {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 22px;
    padding: 15px 17px;
    border: 1px solid #dfeae2;
    border-radius: 10px;
    background: #f7fbf8;
    color: #52635a;
}

.ce-importante-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: #159447;
    color: #fff;
    font-weight: 700;
}

.ce-importante strong {
    display: block;
    color: #186f39;
}

.ce-importante p {
    margin: 3px 0 0;
    font-size: 12px;
}

.ce-beneficios .ce-bloco-titulo {
    margin-bottom: 26px;
}

.ce-beneficio {
    display: flex;
    gap: 13px;
    margin-bottom: 24px;
}

.ce-beneficio-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 2px solid #159447;
    border-radius: 50%;
    color: #128340;
    font-size: 18px;
    font-weight: 700;
}

.ce-beneficio strong {
    display: block;
    margin-bottom: 4px;
    color: #223448;
    font-size: 14px;
}

.ce-beneficio p {
    margin: 0;
    color: #718091;
    font-size: 12px;
    line-height: 1.45;
}

.ce-rodape-selos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px 34px;
    padding: 16px 22px;
    border: 1px solid #e5eaee;
    border-top: 1px solid #edf0f2;
    border-radius: 0 0 16px 16px;
    background: rgba(255, 255, 255, .97);
    color: #617083;
    font-size: 12px;
    box-shadow: 0 10px 30px rgba(43, 66, 91, .06);
}

.ce-alerta {
    padding: 20px;
    border: 1px solid #dce4e8;
    border-radius: 10px;
    background: #fff;
    color: #536273;
}

.ce-alerta-erro {
    border-color: #f1c8c8;
    color: #a12929;
}

@media (max-width: 1050px) {
    .ce-categoria-painel {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .ce-beneficios {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        border-top: 1px solid #e7ecef;
    }

    .ce-beneficios .ce-bloco-titulo {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .ce-produtos {
        border-right: 0;
    }
}

@media (max-width: 760px) {
    .ce-container {
        width: min(100% - 18px, 1180px);
    }

    .ce-categorias {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ce-categoria-btn {
        min-width: 0;
    }

    .ce-categoria-painel {
        grid-template-columns: 1fr;
    }

    .ce-info,
    .ce-produtos {
        border-right: 0;
        border-bottom: 1px solid #e7ecef;
    }

    .ce-info,
    .ce-produtos,
    .ce-beneficios {
        padding: 22px;
    }

    .ce-modelos {
        grid-template-columns: 1fr;
    }

    .ce-oferta {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    .ce-comprar {
        grid-column: 1 / -1;
        width: 100%;
    }

    .ce-beneficios {
        display: block;
    }
}

/* ============================================================
   SAIBA MAIS / INFORMAÇÕES DE ATENDIMENTO
   ============================================================ */

.info-venda-section {
    width: 100%;
    min-height: 380px;
    margin: 0;
    padding: 35px 0;
    background: #ffffff;

    display: flex;
    align-items: center;
}

.info-venda-container {
    width: min(1180px, calc(100% - 30px));
    margin: 0 auto;
}

.info-venda-titulo {
    margin: 0 0 8px;
    text-align: center;
    color: #364146;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
}

.info-venda-titulo::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin: 12px auto 28px;
    border-radius: 50px;
    background: #159447;
}

.info-venda-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.info-venda-card {
    min-height: 150px;
    padding: 20px 22px;
    border: 1px solid #e0e8ec;
    border-top: 4px solid #159447;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(43, 66, 91, .07);
}

.info-venda-card h5 {
    margin: 0 0 10px;
    color: #006a95;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.info-venda-card p {
    margin: 0;
    color: #44525e;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .info-venda-grid {
        grid-template-columns: 1fr;
    }

    .info-venda-card {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .ce-catalogo {
    padding: 30px 0 35px;
    margin-bottom: 25px;
    background: transparent;
}

    .info-venda-section {
        padding-bottom: 40px;
    }

    .info-venda-container {
        width: min(100% - 18px, 1180px);
    }

    .info-venda-titulo {
        font-size: 29px;
    }
}

/* ============================================================
   TÍTULO PRINCIPAL DO CATÁLOGO
   ============================================================ */

#certif .ce-titulo-pagina {
    margin-bottom: 28px;
}

#certif .ce-titulo-pagina h2 {
    margin: 0;
    color: #183655;
    font-size: clamp(34px, 3vw, 46px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

#certif .ce-titulo-pagina h2::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    margin: 12px auto 14px;
    background: #159447;
    border-radius: 50px;
}

#certif .ce-titulo-pagina p {
    margin: 0;
    color: #50647a;
    font-size: 18px;
    font-weight: 500;
}

/* ============================================================
   ESPAÇO ENTRE CATÁLOGO E SAIBA MAIS
   ============================================================ */

#certif.ce-catalogo {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 0;
}

/* ============================================================
   EVIDÊNCIA VISUAL DOS BOTÕES
   ============================================================ */

/* Botões das categorias: e-CPF / e-CNPJ / e-PJ / SERPROiD */
.ce-categoria-btn {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .14);
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.ce-categoria-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, .20);
}

.ce-categoria-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .16);
}


/* Botões de modelo */
.ce-modelo-btn {
    box-shadow: 0 3px 9px rgba(0, 0, 0, .10);
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.ce-modelo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, .15);
    border-color: #159447;
}

.ce-modelo-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
}


/* Modelo atualmente selecionado */
.ce-modelo-btn.is-active {
    border: 2px solid #159447;
    background: #f1fbf4;
    box-shadow:
        0 5px 12px rgba(21, 148, 71, .15),
        inset 0 0 0 1px rgba(21, 148, 71, .10);
}


/* Botão COMPRAR */
.ce-comprar {
    box-shadow: 0 4px 10px rgba(17, 139, 64, .25);
}

.ce-comprar:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 15px rgba(17, 139, 64, .32);
}

.ce-comprar:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(17, 139, 64, .25);
}


/* ============================================================
   TOOLTIP DOS MODELOS
   ============================================================ */

.ce-modelo-btn[data-tooltip] {
    position: relative;
}

/* Balão */
.ce-modelo-btn[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);

    width: 260px;
    padding: 10px 12px;

    background: #222;
    color: #fff;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;

    border-radius: 6px;

    box-shadow: 0 5px 14px rgba(0, 0, 0, .25);

    opacity: 0;
    visibility: hidden;

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

    transition:
        opacity .18s ease,
        transform .18s ease;
}

/* Setinha */
.ce-modelo-btn[data-tooltip]::before {
    content: "";

    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);

    border-width: 0 7px 7px 7px;
    border-style: solid;
    border-color: transparent transparent #222 transparent;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
    z-index: 10000;
}

/* Exibe ao passar o mouse */
.ce-modelo-btn[data-tooltip]:hover::after,
.ce-modelo-btn[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

.ce-modelo-btn[data-tooltip]:hover::after {
    transform: translateX(-50%) translateY(0);
}


/* ============================================================
   TOOLTIP SEM FICAR ATRÁS DOS OUTROS BOTÕES
   ============================================================ */

.ce-modelos {
    position: relative;
    overflow: visible;
}

.ce-modelo-btn {
    position: relative;
    z-index: 1;
}

/* O botão que está exibindo o tooltip passa para frente */
.ce-modelo-btn[data-tooltip]:hover {
    z-index: 1000;
}

.ce-modelo-btn[data-tooltip]:hover::before,
.ce-modelo-btn[data-tooltip]:hover::after {
    z-index: 1001;
}