/* ================================================================= */
/* ARQUIVO CSS ISOLADO PARA A SEÇÃO DE PREÇOS (PC) - VERSÃO CORRIGIDA */
/* ================================================================= */

/* RESET BÁSICO E VARIÁVEIS DE COR */
:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 98%;
    --secondary: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 270 95% 75%;
    --border: 214.3 31.8% 91.4%;
    --tcc-light-bg: 210 40% 98%;
    --tcc-primary: 217 91% 60%;
    --shadow-soft: 0 4px 20px -2px hsl(var(--tcc-primary) / 0.1);
    --shadow-medium: 0 8px 30px -4px hsl(var(--tcc-primary) / 0.15);
    --shadow-strong: 0 20px 40px -8px hsl(var(--tcc-primary) / 0.2);
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ESTILOS DE UTILIDADE (com prefixo pc-) */
.pc-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (min-width: 1400px) {
    .pc-container { max-width: 1400px; }
}

.pc-py-20 { padding-top: 2rem; padding-bottom: 2rem; }
.pc-mb-16 { margin-bottom: 4rem; }
.pc-text-center { text-align: center; }
.pc-space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.pc-mx-auto { margin-left: auto; margin-right: auto; }
.pc-max-w-2xl { max-width: 42rem; }
.pc-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.pc-text-muted-foreground { color: hsl(var(--muted-foreground)); }
.pc-font-bold { font-weight: 700; }
.pc-text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.pc-grid { display: grid; }
.pc-gap-8 { gap: 2rem; }

@media (min-width: 768px) {
    .pc-md-text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .pc-md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* COMPONENTES DA SEÇÃO DE PREÇOS (com prefixo pc-) */
#pricing-component {
    background-color: hsla(var(--tcc-light-bg) / 0.3);
    font-family: sans-serif;
    color: hsl(var(--foreground));
}

.pc-cardOld {
    position: relative;
    padding: 1.5rem;
    border-radius: 0.75rem;
    transition: var(--transition-smooth);
    background-image: linear-gradient(145deg, hsl(var(--background)) 0%, hsl(var(--tcc-light-bg)) 100%);
    /*box-shadow: var(--shadow-soft);*/
    box-shadow: rgb(107, 107, 107);
    border: 3px solid hsla(var(--border) / 0.8);
}

.pc-card {
    position: relative;
    /* REMOVA o padding daqui */
    /* padding: 1.5rem; */
    padding: 0; /* Adicione isso para garantir que não haja espaçamento interno */
    border-radius: 0.75rem;
    /*overflow: hidden;  Importante para garantir que a imagem não vaze */
    transition: var(--transition-smooth);
    background-image: linear-gradient(145deg, hsl(var(--background)) 0%, hsl(var(--tcc-light-bg)) 100%);
    box-shadow: rgb(107, 107, 107);
    /*border: 3px solid hsla(var(--border) / 0.8);*/
     border: 2px solid hsl(var(--muted-foreground));
}

/* ===== NOVOS ESTILOS ADICIONADOS ABAIXO ===== */

/* Estilo para a imagem do cartão */
.pc-card-image {
    width: 100%;
    display: block; /* Remove espaços extras abaixo da imagem */
    /* O arredondamento dos cantos superiores não é mais necessário aqui por causa do 'overflow: hidden' no .pc-card, mas é uma boa prática. */
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

/* Estilo para o container do conteúdo de texto */
.pc-card-content {
    padding: 1.5rem; /* O padding que antes estava no .pc-card agora está aqui */
}

/* ===== FIM DOS NOVOS ESTILOS ===== */


.pc-card:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-medium);
}
.pc-card.pc-popular {
    border: 2px solid hsl(var(--primary));
    box-shadow: var(--shadow-strong);
}

.pc-popular-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* <--  badge para frente */
}

.pc-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}
.pc-badge-secondary {
    background-color: hsla(var(--primary) / 0.1);
    color: hsl(var(--primary));
}
.pc-badge-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.pc-icon-wrapper {
    padding: 0.75rem;
    border-radius: 0.75rem;
    display: inline-block;
}
.pc-icon-wrapper.pc-popular-icon {
    background-color: hsl(var(--primary));
    color: white;
}
/*.pc-icon-wrapper.pc-normal-icon {
    background-color: hsla(var(--primary) / 0.1);
    color: hsl(var(--primary));
}*/


.pc-icon-wrapper.pc-normal-iconOld {
    background-color: hsla(var(--primary) / 0.15); /* Fundo um pouco mais forte */
    color: hsl(var(--primary));
    border: 1px solid hsla(var(--primary) / 0.3); /* Borda sutil para definir */
}


.pc-icon-wrapper.pc-normal-icon {
    background-color: #777c81; /* Tom de cinza para combinar com o botão */
    color: hsl(var(--primary-foreground)); /* Letra branca */
    border: none; /* Remove a borda azul anterior */
}

.pc-price {
    font-size: 2.25rem;
    font-weight: 800;
}

.pc-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pc-card ul li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
}
.pc-card ul .pc-icon-check {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: #16a34a; /* Cor verde para o check */
}

/* BOTÕES */
.pc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    padding: 1.5rem 2rem;
    font-size: 1.5rem;
    height: 3.5rem;
    width: 100%;
    transition: all 0.3s ease;
}
.pc-btn-gradient {
    background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
    color: hsl(var(--primary-foreground));
    border-color: transparent;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.pc-btn-gradient:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    transform: scale(1.05);
}
/* Em preco.css */

/* SUBSTITUA ESTA REGRA INTEIRA */
.pc-button-outlineOld {
    /* border: 1px solid hsl(var(--border));  <-- REMOVIDO */
    /* background-color: transparent;         <-- REMOVIDO */
    /* color: hsl(var(--foreground));         <-- REMOVIDO */
    
    /* ADICIONE AS LINHAS ABAIXO */
    background-image: linear-gradient(to right, #6c757d, #343a40); /* Gradiente cinza */
    color: hsl(var(--primary-foreground)); /* Texto branco */
    border-color: transparent;
}

/* Em preco.css */

.pc-button-outline {
    /* Altere apenas a linha do background-image */
    background-image: linear-gradient(to right, #777c81, #5b6369); /* De: #6c757d, #343a40 */
    
    color: hsl(var(--primary-foreground));
    border-color: transparent;
}

/* E TAMBÉM SUBSTITUA O EFEITO HOVER */
.pc-button-outline:hover {
    /* background-color: hsl(var(--secondary)); <-- REMOVIDO */

    /* ADICIONE AS LINHAS ABAIXO */
    box-shadow: var(--shadow-soft);
    transform: scale(1.05);
}