/* -------------------------
   Listagem de Pacotes
------------------------- */
.pacotes-listagem {
    display: grid;
    width: 100%;
    box-sizing: border-box;
    align-items: stretch;
}

.pacotes-cols-1 { grid-template-columns: 1fr; }
.pacotes-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pacotes-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pacotes-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* A área de conteúdo (título, resumo, benefícios) ocupa o espaço disponível */
.pacote-card > *:not(:last-child) {
    flex-shrink: 0;
}


/* Wrapper principal da imagem */
.pacote-imagem-wrapper {
    position: relative;
    overflow: hidden;
    text-align: inherit;
    padding: var(--imagem-padding);
}

/* Wrapper interno para imagem + overlay */
.pacote-imagem-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: inherit;
}

/* Imagem */
.pacote-imagem-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    transition: transform 0.3s;
}

/* Overlay */
.pacote-image-hover {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    border-radius: inherit;
}

/* Hover apenas se estiver habilitado */
.pacote-imagem-wrapper.hover-enabled:hover .pacote-imagem-inner,
.pacote-imagem-wrapper.hover-enabled:hover .pacote-imagem-inner img,
.pacote-imagem-wrapper.hover-enabled:hover .pacote-image-hover {
    transform: scale(1.05);
    opacity: 1;
}


/* -------------------------
   Título
------------------------- */
.wpc-card-title {
    transition: all 0.3s;
    font-family: var(--titulo-font, inherit);
    font-weight: var(--titulo-bold, normal);
    font-style: var(--titulo-italic, normal);
    color: var(--titulo-color, #000);
    font-size: var(--titulo-size, 18px);
}

.pacote-titulo {
    line-height: 1 !important;
}


/* -------------------------
   Resumo
------------------------- */
.wpc-card-resumo {
    transition: all 0.3s;
    font-family: var(--resumo-font, inherit);
    font-weight: var(--resumo-bold, normal);
    font-style: var(--resumo-italic, normal);
    color: var(--resumo-color, #333);
    font-size: var(--resumo-size, 14px);
    text-align: var(--resumo-align, inherit);
    padding: var(--resumo-padding, 0px); /* sempre pega o valor do settings, se não tiver usa 0 */
    margin: var(--resumo-margin, 0px 0 10px 0); /* se quiser controlar a margem também */
}



/* -------------------------
   Benefícios
------------------------- */
.wpc-card-beneficios {
    list-style: none;
    margin: 0 0 10px 0;
    padding: var(--beneficios-padding);
    text-align: inherit;
}

.wpc-card-beneficios li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.wpc-card-beneficios li span:first-child {
    margin-right: 8px;
    flex-shrink: 0;
}


/* -------------------------
   Aviso
------------------------- */
.wpc-card-aviso {
    font-size: 12px;
    color: #c00;
    margin: 10px 0;
    text-align: inherit;
}


/* -------------------------
   Botão
------------------------- */
.wpc-card-botao-wrapper {
    text-align: inherit;
    padding: var(--botao-padding);
}

.wpc-card-botao {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    transition: all 0.3s;
    cursor: pointer;
    font-size: inherit;
    width: auto;
    box-sizing: border-box;
}

/* O botão é empurrado para o final */
.pacote-botao {
    margin-top: auto;
}

.pacote-card > div:last-child {
    margin-top: auto;
}

/* -------------------------
   Responsivo
------------------------- */
@media (max-width: 980px) {
    .pacotes-listagem { grid-template-columns: 1fr !important; }
}
/* -------------------------
   Listagem de Pacotes
------------------------- */
.pacotes-listagem {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}

.pacotes-cols-1 { grid-template-columns: 1fr; }
.pacotes-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pacotes-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pacotes-cols-4 { grid-template-columns: repeat(4, 1fr); }

.pacote-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--card-padding, 0px) !important;
    height: 100%;
    position: relative;
    z-index: 0;
}



/* -------------------------
   Imagem
------------------------- */
.pacote-imagem-wrapper {
    position: relative;
    overflow: hidden;
    text-align: inherit;
    padding: var(--imagem-padding, 0);
}

.pacote-imagem-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: inherit;
}

.pacote-imagem-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    transition: transform 0.3s;
}

.pacote-image-hover {
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    border-radius: inherit;
}

/* Hover */
.pacote-imagem-wrapper.hover-enabled:hover .pacote-imagem-inner,
.pacote-imagem-wrapper.hover-enabled:hover .pacote-imagem-inner img,
.pacote-imagem-wrapper.hover-enabled:hover .pacote-image-hover {
    transform: scale(1.05);
    opacity: 1;
}

/* -------------------------
   Título
------------------------- */
.wpc-card-title {
    transition: all 0.3s;
    font-family: var(--titulo-font, inherit);
    font-weight: var(--titulo-bold, normal);
    font-style: var(--titulo-italic, normal);
    color: var(--titulo-color, #000);
    font-size: var(--titulo-size, 18px);
    text-align: var(--titulo-align, inherit);
    padding: var(--titulo-padding, 8px 0);
}

/* -------------------------
   Benefícios
------------------------- */
.wpc-card-beneficios {
    list-style: none;
    margin: 0;
    padding: var(--beneficios-padding, 8px 0);
    text-align: var(--beneficios-align, inherit);
    font-family: var(--beneficios-font, inherit);
    font-weight: var(--beneficios-bold, normal);
    font-style: var(--beneficios-italic, normal);
    color: var(--beneficios-color, #333);
    font-size: var(--beneficios-size, 14px);
    transition: all 0.3s;
}

.wpc-card-beneficios li {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.wpc-card-beneficios li span:first-child {
    margin-right: 8px;
    flex-shrink: 0;
}

/* -------------------------
   Aviso
------------------------- */
.wpc-card-aviso {
    transition: all 0.3s;
    font-family: var(--aviso-font, inherit);
    font-weight: var(--aviso-bold, normal);
    font-style: var(--aviso-italic, normal);
    color: var(--aviso-color, #b00);
    font-size: var(--aviso-size, 13px);
    text-align: var(--aviso-align, inherit);
    padding: var(--aviso-padding, 8px 0);
}

/* -------------------------
   Botão
------------------------- */
.wpc-card-botao-wrapper {
    text-align: var(--botao-align, inherit);
    padding: var(--botao-padding, 8px 0);
}

.wpc-card-botao {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    padding: var(--botao-padding-inner, 10px 20px);
    transition: all 0.3s;
    cursor: pointer;
    font-family: var(--botao-font, inherit);
    font-weight: var(--botao-bold, normal);
    font-style: var(--botao-italic, normal);
    font-size: var(--botao-size, 15px);
    color: var(--botao-color, #fff);
    background: var(--botao-bg, #0073e6);
    border-radius: var(--botao-radius, 6px);
    width: auto;
    box-sizing: border-box;
}

.wpc-card-botao:hover {
    background: var(--botao-bg-hover, #005bb5);
    color: var(--botao-color-hover, #fff);
}

/* -------------------------
   Responsivo
------------------------- */
@media (max-width: 980px) {
    .pacotes-listagem { grid-template-columns: 1fr !important; }
}




/* BADGES */
.badge-esgotado,
.badge-ultimas {
    position: absolute;
    top: 30px;
    left: 0px;
    padding: 13px;
    font-size: 26px;
    font-weight: 700; /* bold */
    border-radius: 0px;
    color: #fff;
    z-index: 50; /* aumenta aqui */
    text-transform: uppercase;
}

/* Últimas vagas */
.badge-ultimas {
    background: #31AE57;
}

/* Esgotado */
.badge-esgotado {
    background: #D53B00;
}

.card-esgotado {
    position: relative;
    pointer-events: none;
}

.card-esgotado::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.40); /* camada branca */
    z-index: 2;
    pointer-events: none;
}

/* ---------------------
   RESPONSIVE
--------------------- */
@media (max-width: 1200px) {
    .badge-esgotado,
    .badge-ultimas {
        top: 30px;
        padding: 11px;
        font-size: 22px;
    }
    .pacote-titulo {
    line-height: 1 !important;
}
}

@media (max-width: 768px) {
    .badge-esgotado,
    .badge-ultimas {
        top: 30px;
        padding: 9px;
        font-size: 18px;
    }
    .pacote-titulo {
    line-height: 1 !important;
}

@media (max-width: 480px) {
    .badge-esgotado,
    .badge-ultimas {
        top: 30px;
        padding: 7px;
        font-size: 14px;
    }
    .pacote-titulo {
    line-height: 1 !important;
}

/*Att 2026*/
.pacote-subtitulo {
  padding: 10px 0 !important;
}

@media (max-width: 768px) {
    .pacote-subtitulo .preco-mobile {
        display: block;
        font-size: 1.4em;
        font-weight: 700;
        margin-top: 4px;
    }
}

@media (max-width: 768px) {
    .pacote-imagem-inner {
        height: 240px !important; /* ajuste aqui */
        aspect-ratio: auto; /* garante que não interfira */
    }
}