.error {
  color: #f00;
}

.btn-fix-mobile {
  position: relative !important;
  z-index: 9999 !important;
}

@media (max-width: 768px) {
  .btn-group-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
  }

  .btn-group-mobile a {
    width: 90%;
    /* ou 100% se quiser ocupar toda a largura */
    text-align: center;
  }
}


/*******************************************************************
 *                        PRICING TABLE
 *******************************************************************/
/* Estilo geral para os preços nos cabeçalhos */
    .table thead.table-light th small {
        font-size: 0.9em !important;       /* Tamanho da fonte */
        font-weight: 700 !important;       /* Negrito */
        color: #28a745 !important;         /* Cor verde para indicar preço/valor */
        margin-top: 5px !important;
        display: block !important; /* Para que o margin-top funcione bem */
        line-height: 1.3 !important;
    }

    /* Estilo específico para o preço na coluna destacada (Premium) */
    .table thead.table-light th.highlight-column small {
        color: #0056b3 !important;         /* Um azul mais escuro e forte */
        /* ou mantenha o verde e adicione um detalhe diferente, se preferir */
        /* Exemplo: border-bottom: 2px solid #0056b3; padding-bottom: 2px; */
    }


    /* Estilo de "etiqueta" para os preços (Opção 1 da interação anterior) */
    .table thead.table-light th small {
        display: inline-block !important;
        padding: 0.3em 0.6em !important;
        font-size: 0.85em !important;
        font-weight: 600 !important;
        color: #495057 !important;         /* Cor do texto do preço padrão */
        background-color: #e9ecef !important; /* Cor de fundo do preço padrão */
        border-radius: 0.25rem !important;
        margin-top: 5px !important;
        line-height: 1.4 !important;
    }

    /* Estilo do preço para a coluna Premium destacada */
    .table thead.table-light th.highlight-column small {
        color: #fff !important;                   /* Texto branco para o preço na coluna Premium */
        background-color: #000 !important;     /* Fundo azul para o preço na coluna Premium */
    }

    /* Estilo de fundo e texto para a coluna Premium (da interação anterior) */
    .table .highlight-column {
        background-color: #f0f8ff !important; /* Fundo azul bem claro para as células da coluna Premium */
        /* font-weight: bold; */ /* Opcional: texto em negrito para células da coluna Premium */
    }

    .table thead.table-light .highlight-column { /* Cabeçalho da coluna Premium */
        background-color: #d1e7fd !important; /* Fundo azul um pouco mais escuro para o cabeçalho Premium */
        color: #000 !important;               /* Cor do texto para o cabeçalho Premium */
        font-weight: bold !important;          /* Texto do cabeçalho Premium em negrito */
    }

    /* --- Novos Estilos de Sombra para as Colunas --- */

    /* Configuração base para que as sombras e z-index funcionem corretamente */
    .table th,
    .table td {
        position: relative !important; /* Essencial para o empilhamento com z-index */
    }

    /* Sombra Regular para a coluna "Essencial" (2ª coluna da tabela) */
    .table th:nth-child(2),
    .table td:nth-child(2) {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08) !important; /* Sombra sutil */
        z-index: 1 !important; /* Nível de empilhamento base para colunas com sombra */
        /* Mantém o fundo padrão do Bootstrap, a sombra aparecerá ao redor */
    }

    /* Sombra Regular para a coluna "Profissional" (4ª coluna da tabela) */
    .table th:nth-child(4),
    .table td:nth-child(4) {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08) !important; /* Sombra sutil */
        z-index: 1 !important; /* Mesmo nível da "Essencial" */
    }

    /* Sombra Destacada para a coluna "Premium" (3ª coluna da tabela, que já usa .highlight-column) */
    /* Adicionando/Modificando o box-shadow e z-index para .highlight-column */
    .table .highlight-column {
        /* Os estilos de background-color e font-weight de cima continuam valendo */
        box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.15) !important; /* Sombra mais pronunciada */
        z-index: 2 !important; /* Nível de empilhamento maior para destacar sobre as outras */
    }

    /* Opcional: Se as bordas da tabela estiverem interferindo ou cortando a sombra,
       você pode tentar adicionar 'overflow: visible;' à classe '.table-responsive' ou
       ao container da tabela, mas geralmente 'position: relative' nas células resolve
       a maioria dos problemas de renderização de sombra.
       Para tabelas com 'table-bordered', as sombras são desenhadas em volta das bordas da célula.
    */


#intro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 60px;
  padding-bottom: 60px;
}

img[width][height] {
  aspect-ratio: attr(width number) / attr(height number);
}