/* ==========================================================================
   css/servicos-portfolio.css - Arquitetura de Escala Infinita (Multi-Nicho)
   ========================================================================== */

/* 🎨 1️⃣ MAPEAMENTO DE CORES (O único lugar que você mexe ao criar novos nichos) */

/* Cores Padrão / Variáveis de Controle Dinâmico */
:root {
    --borda-suave: rgba(0, 0, 0, 0.08);
}

/* Paleta: Advocacia */
.tema-advocacia {
    --cor-nicho-principal: #24292F; /* Grafite Slate */
    --cor-nicho-suave: #F6F8FA;     /* Fundo sutil */
    --cor-nicho-destaque: #D4AF37;  /* Dourado Âmbar */
    --cor-nicho-hover: #AA8B2C;
}

/* Paleta: Medicina */
.tema-medicina {
    --cor-nicho-principal: #2C4A3E; /* Verde Oliva */
    --cor-nicho-suave: #F4F6F5;     /* Fundo Mineral */
    --cor-nicho-destaque: #2C4A3E;  /* No médico o destaque se mantém sóbrio */
    --cor-nicho-hover: #1E332B;
}

/* [Exemplo] Paleta: Futuro Nicho (Imobiliário / Engenharia)
.tema-imobiliario {
    --cor-nicho-principal: #1A2B49; 
    --cor-nicho-suave: #F0F4F8;     
    --cor-nicho-destaque: #E0A96D;  
    --cor-nicho-hover: #C2935C;
}
*/


/* 🧱 2️⃣ ESTRUTURA E REGRAS VISUAIS 100% GENÉRICAS (Nunca mais mexer aqui) */

main section {
    padding: 3.5rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--borda-suave), transparent);
    margin: 0;
}

/* Hero Section */
.nicho-hero {
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.nicho-hero h1 {
    font-size: 2.2rem;
    color: var(--cor-nicho-principal);
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.nicho-hero h2 {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--texto-mutado);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.nicho-hero ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    padding-left: 0;
}

.nicho-hero ul li a {
    display: block;
    padding: 1rem 2rem;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: var(--raio-borda);
    transition: var(--transicao);
}

/* Botão Primário (WhatsApp) */
.nicho-hero ul li:first-child a, .nicho-cta-final a {
    background-color: var(--cor-nicho-principal);
    color: #FFFFFF;
}

.nicho-hero ul li:first-child a:hover, .nicho-cta-final a:hover {
    background-color: var(--cor-nicho-hover);
    transform: translateY(-2px);
}

/* Botão Secundário (Ver Modelo) */
.nicho-hero ul li:last-child a {
    border: 1px solid var(--cor-nicho-principal);
    color: var(--cor-nicho-principal);
}

.nicho-hero ul li:last-child a:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Seção de Dores */
.nicho-dores h2, .nicho-solucao h2, .nicho-blog h2, .nicho-cta-final h2 {
    font-size: 1.6rem;
    color: var(--cor-nicho-principal);
    margin-bottom: 1.5rem;
}

.nicho-dores p, .nicho-cta-final p {
    color: var(--texto-mutado);
    margin-bottom: 2rem;
}

.nicho-dores ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.nicho-dores ul li {
    position: relative;
    padding-left: 1.8rem;
    color: var(--texto-principal);
}

.nicho-dores ul li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--cor-vermelho);
    font-weight: bold;
    font-size: 0.9rem;
}

.nicho-dores ul li strong, .nicho-solucao ul li strong {
    color: var(--cor-nicho-principal);
    display: block;
    margin-bottom: 0.2rem;
}

/* Seção de Soluções */
.nicho-solucao {
    background-color: var(--cor-nicho-suave);
    border-radius: var(--raio-borda);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.nicho-solucao ul {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

.nicho-solucao ul li {
    background: #FFFFFF;
    padding: 1.5rem;
    border-radius: var(--raio-borda);
    border-left: 4px solid var(--cor-nicho-destaque);
    box-shadow: 0 4px 6px rgba(0,0,0,0.01);
}

/* Seção de Prova (Showroom) */
.nicho-prova {
    text-align: center;
    background-color: var(--cor-nicho-principal);
    color: #FFFFFF;
    border-radius: var(--raio-borda);
    padding: 4rem 2rem;
}

.nicho-prova h2 {
    color: #FFFFFF;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

/* Trata especificamente o caso da advocacia onde o título da prova é dourado */
.tema-advocacia .nicho-prova h2 {
    color: var(--cor-nicho-destaque);
}

.nicho-prova p {
    color: #E2E8F0;
    margin-bottom: 1.5rem;
}

.nicho-prova a {
    display: inline-block;
    color: var(--cor-nicho-principal) !important;
    background-color: #FFFFFF;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 700;
    border-radius: var(--raio-borda);
    transition: var(--transicao);
}

/* Se no tema o destaque for diferente (como ouro na advocacia), o botão vira a cor de destaque */
.tema-advocacia .nicho-prova a {
    background-color: var(--cor-nicho-destaque);
}
.tema-advocacia .nicho-prova a:hover {
    background-color: var(--cor-nicho-hover);
}

/* Seção Blog Seletivo */
.nicho-blog article {
    background-color: #FFFFFF;
    border: 1px solid var(--borda-suave);
    padding: 2rem;
    border-radius: var(--raio-borda);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.nicho-blog article h3 {
    font-size: 1.2rem;
    color: var(--cor-nicho-principal);
}

.nicho-blog a {
    color: var(--cor-azul-claro);
    text-decoration: none;
    font-weight: 600;
}

.nicho-blog a:hover {
    text-decoration: underline;
}

/* CTA Final */
.nicho-cta-final {
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.nicho-cta-final h2 { font-size: 2rem; }


/* ==========================================================================
   🔧 AJUSTES DE ESTILIZAÇÃO E CORREÇÕES DE ELEMENTOS ÓRFÃOS
   ========================================================================== */

/* Corrige o botão do CTA Final da Advocacia que estava sem formatação */
#cta-final-advocacia {
    text-align: center;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#cta-final-advocacia h2 {
    font-size: 2rem;
    color: var(--cor-nicho-principal);
    margin-bottom: 1.5rem;
}

#cta-final-advocacia p {
    color: var(--texto-mutado);
    margin-bottom: 2rem;
}

#cta-final-advocacia a {
    display: inline-block;
    padding: 1rem 2rem;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: var(--raio-borda);
    background-color: var(--cor-nicho-principal);
    color: #FFFFFF;
    transition: var(--transicao);
}

#cta-final-advocacia a:hover {
    background-color: var(--cor-nicho-hover);
    transform: translateY(-2px);
}

/* Estilização da Nota de Rodapé do Showroom/Prova */
.nicho-prova small {
    display: block;
    margin-top: 1.5rem;
    color: #CBD5E1; /* Cinza claro suave para não contrastar demais no fundo escuro */
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Ajuste fino para o espaçamento interno dos cards de solução */
.nicho-solucao ul li p {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 0.95rem;
    color: var(--texto-principal);
}


/* ==========================================================================
   ⚙️ RESPONSIVIDADE COMPARTILHADA (MEDIA QUERY)
   ========================================================================== */
@media (min-width: 768px) {
    .nicho-hero h1 { font-size: 3rem; }
    .nicho-hero ul { flex-direction: row; gap: 1.5rem; }
    .nicho-solucao ul { grid-template-columns: repeat(2, 1fr); gap: 2rem; }



    #cta-final-advocacia h2 {
        font-size: 2.5rem;
    }
}