.div-title-assinatura{
    width: 600px;
}


:root {
    --color-background: #f7f7fa;
    --color-purple-light: #f1ecff;
    --color-purple-medium: #9146FF; /* Roxo principal, ajustado para legibilidade */
    --color-purple-dark: #6731b8;
    --color-saude: #2a68fb; /* Azul do +Saúde */
    --color-saude-light: #e6effe;
    --color-text: #333;
    --color-discount-text: #666;
    --color-border: #DFD2FF66;
    --color-green: #4caf50; /* Para o badge "Recomendado" */
}


/* Tabela Comparativa */
.comparison-table-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Coluna de labels + 4 colunas de planos */
    grid-template-rows: 
        minmax(140px, auto) 
        repeat(7, 80px);
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.9em;
    margin: 105px 0;
}

.table-row, .table-header-row {
    display: contents; /* Permite que os filhos sejam itens do grid pai */
}

.table-cell {
    padding: 15px 10px;
    border-bottom: 2px solid var(--color-border);
    border-right: 2px solid var(--color-border);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    font-size: .75rem;
    font-weight: bold;
}

.table-cell:last-child {
    border-right: none;
}



.table-row .table-cell:last-child {
    border-right: none;
}
.table-row .table-cell:nth-child(2) {
    border-left: none;
}
.table-row .table-cell:nth-child(1) {
    background-color: transparent;
}
.table-header-row .table-cell {
    border-bottom: none;
    background-color: transparent;
}
.table-row:last-of-type .table-cell {
    border-bottom: none;
}

.table-row:nth-of-type(2) .table-cell:nth-child(2) {
    border-radius: 15px 0 0 0;
}

.table-row:nth-of-type(2) .table-cell:last-child {
    border-radius: 0 15px 0 0;
}

.table-row:last-child .table-cell:nth-child(2) {
    border-radius: 0 0 0 15px;
}

.table-row:last-child .table-cell:last-child {
    border-radius: 0 0 15px 0;
}

.table-label {
    text-align: left;
    font-weight: bold;
    color: #000;
    justify-content: flex-start;
    border: none;
        font-size: .9rem;
}

.table-header-row .table-cell {
    font-weight: bold;
    padding: 10px;
    display: block;
    text-align: center;
    font-size: 1rem;
}

.plan-column {
    background-color: transparent !important;
    border-right: none;
    display: flex !important;
    justify-content: center;
    flex-direction: column;
    justify-content: space-between;
}

.plan-name-small {
    font-weight: bold;
    color: #000;
    font-size: 1.1em;
}

.plan-price-small {
    font-size: 0.7em;
    color: var(--color-discount-text);
    font-weight: normal;
}

.fixed-price {
    font-size: 40px;
    font-weight: 700;
    color: var(--azul);
    text-align: center;
    margin-bottom: 15px;
}

.small-cta-button {
    background-color: var(--color-purple-medium);
    color: white;
    padding: 3px 12px;
    border: none;
    border-radius: 25px;
    font-size: 0.7em;
    cursor: pointer;
    margin: 0 auto;
    text-decoration: none;
}

.basic-small-cta {
    background-color: var(--color-purple-medium);
    transition: all .5s;
}
.basic-small-cta:hover {
    color: #fff;
    background-color: var(--color-purple-dark);
}

.saude-column {
    background-color: var(--color-saude-light);
}

.saude-small-cta {
    background-color: var(--color-saude);
}

.purple-dot, .purple-dot-disabled {
    color: var(--color-purple-medium);
    font-size: 2.6em;
    line-height: 0;
}
.purple-dot-disabled {
    opacity: .1;
}

/* Responsividade (Ajustes para telas menores) */
@media (max-width: 1000px) {
    .plans-container {
        grid-template-columns: 1fr;
    }

    .comparison-table-container {
        grid-template-columns: 150px repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    /* Esconde a tabela em telas muito pequenas para simplicidade, 
       ou a torna scrollable horizontalmente se a complexidade for necessária */
    .comparison-table-container {
        display: block;
        overflow-x: auto;
    }

    .comparison-table-container > div {
        width: 700px; /* Largura para forçar o scroll horizontal */
        display: grid;
        grid-template-columns: 150px repeat(4, 1fr);
    }

    .table-cell {
        padding: 10px 5px;
        font-size: 1rem;
    }

    .header-text {
        font-size: 0.9em;
    }
        .plan-selector {
        width: 90%;
    }

    .plans-container .header {
        width: 90%;
    }
    .comparison-table-container {
        margin: 10px 0 40px 0;
    }
    .table-container {
            max-width: calc(100%) !important;
    }
    .plan-column {
        gap: .5rem;
    }
}