/* -------------------------
   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;
}

/* 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);
}


/* -------------------------
   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;
}


/* -------------------------
   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, 15px);
}

/* -------------------------
   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; }
}