/* RESET E FONTE (Mantido do anterior) */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Montserrat', sans-serif;
    -webkit-font-smoothing: antialiased;
}

html, body {
    overflow-x: hidden;
    width: 100%;
}

/* HERO E FUNDO (Mantido do anterior) */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: white;
    overflow: hidden;
}
.video-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    filter: blur(0px);
    transform: scale(1.1);
}
.overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: -1;
}
.content {
    padding-left: 10%;
    z-index: 1;
}

/* =========================================
   ESTILIZAÇÃO COMUM DA DIGITAÇÃO
   ========================================= */

.typing-text {
    overflow: hidden; /* Esconde o texto não digitado */
    white-space: nowrap; /* Não pula linha */
    width: 0; /* Começa zerado */
    display: flex; /* Alinha o texto e o cursor */
    align-items: center;
}

/* O CURSOR (PONTEIRO) */
.cursor {
    display: inline-block;
    width: 3px;
    height: 1em; /* Mesma altura da fonte do elemento pai */
    background-color: #fff;
    margin-left: 3px;
    opacity: 0; /* Começa invisível */
}

/* ANIMAÇÃO DO CURSOR PISCANDO */
@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/* =========================================
   CONFIGURAÇÃO DO TÍTULO (H1)
   ========================================= */
.h1-typing {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 15px;
    
    /* ANIMAÇÃO DO H1:
       1. Revela o texto (23 passos)
       forwards: mantém a largura no final */
    animation: typeH1 1.5s steps(23) forwards;
}

/* O Cursor do H1 */
.h1-typing .cursor {
    /* ANIMAÇÃO DO CURSOR DO H1:
       blinkH1: Pisca e depois fica transparente (opacity 0) */
    animation: blinkH1 1.5s step-end forwards;
}

/* Keyframe para o cursor do H1 sumir no final */
@keyframes blinkH1 {
    0%, 99% { animation: blink 0.7s step-end infinite; opacity: 1; }
    100% { opacity: 0; } /* Some */
}


/* =========================================
   CONFIGURAÇÃO DO SUBTÍTULO (P)
   ========================================= */
.p-typing {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 30px;
    
    /* ANIMAÇÃO DO SUBTÍTULO:
       Começa após 1.7s (delay para o H1 terminar)
       44 passos (número de caracteres) */
    animation: typeP 2s steps(44) forwards 1.7s;
}

/* O Cursor do Subtítulo */
.p-typing .cursor {
    /* ANIMAÇÃO DO CURSOR DO P:
       blinkP: Pisca e depois fica transparente. Começa junto com a digitação do P */
    animation: blinkP 2s step-end forwards 1.7s;
}

/* Keyframe para o cursor do P sumir no final */
@keyframes blinkP {
    0%, 99% { animation: blink 0.7s step-end infinite; opacity: 1; }
    100% { opacity: 0; } /* Some */
}


/* =========================================
   BOTOES (Aparecem depois de tudo)
   ========================================= */
.cta-buttons {
    opacity: 0;
    animation: fadeIn 1s ease forwards 4s; /* Delay total */
}
/* Estilos dos botões (Mantido do anterior, pulado para brevidade) */
.cta-buttons a { display: inline-block; padding: 12px 30px; text-decoration: none; font-weight: 600; border-radius: 5px; transition: all 0.3s ease; margin-right: 15px; }
.btn-primary { background-color: #fff; color: #333; }
.btn-secondary { border: 2px solid #fff; color: #fff; }
.btn-primary:hover { background-color: #eee; transform: translateY(-2px); }
.btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); }


/* =========================================
   KEYFRAMES DE LARGURA (TYPE)
   ========================================= */

/* Largura final do H1 */
@keyframes typeH1 {
    to { width: 21ch; }
}

/* Largura final do P */
@keyframes typeP {
    to { width: 44ch; }
}

/* Aparecimento suave */
@keyframes fadeIn {
    to { opacity: 1; }
}

.tax-segments {
    padding: 60px 5%;
    background: #fdfdfd;
    text-align: center;
}

.main-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 50px;
    color: #1a1a1a;
}

.cards-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.biz-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 30px 20px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Efeito de destaque no card central ou ao passar o mouse */
.biz-card:hover, .biz-card.highlight {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: #3b82f6;
}

.biz-card.highlight {
    background: #f8faff;
    border: 2px solid #3b82f6;
}

/* Selo de Faturamento */
.badge {
    background: #333;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.biz-card.highlight .badge {
    background: #3b82f6;
}

.biz-card h3 {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 25px;
    font-weight: 500;
}

/* Lista de Benefícios */
.check-list {
    list-style: none;
    text-align: left;
    width: 100%;
}

.check-list li {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}

.check-list li span {
    margin-right: 10px;
    font-weight: bold;
}

/* Cores dos Ícones */
.check-list li span:first-child {
    color: #10b981; /* Verde para Check */
}

/* Se for o "X" (proibido) */
.check-list li:has(span:contains("✖")) span {
    color: #ef4444;
}

.tax-regimes {
    padding: 100px 10%;
    /* Um azul marinho bem profundo e elegante */
    background-color: #0f172a; 
    text-align: center;
    position: relative;
}

/* Ajustando os títulos para aparecerem no fundo escuro */
.section-title {
    font-size: 2.8rem;
    color: #ffffff; /* Branco para destacar */
    margin-bottom: 15px;
    font-weight: 700;
}

.section-subtitle {
    color: #94a3b8; /* Um cinza azulado suave */
    margin-bottom: 60px;
    font-size: 1.2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.regime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* CARDS COM LEVE TRANSPARÊNCIA (Opcional - Estilo Glassmorphism) */
.regime-card {
    background: #ffffff;
    padding: 45px 35px;
    border-radius: 20px;
    /* Sombra mais suave para não ficar "sujo" no fundo escuro */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); 
    transition: all 0.4s ease;
    border-top: 6px solid #ccc;
    text-align: left;
}

.regime-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px -12px rgba(138, 138, 138, 0.5);
}

/* Cores dos ícones e textos internos permanecem as mesmas 
   ou você pode usar cores mais vibrantes para contrastar */
.regime-card.simples { border-top-color: #22c55e; }   /* Verde vibrante */
.regime-card.presumido { border-top-color: #3b82f6; } /* Azul vibrante */
.regime-card.real { border-top-color: #8b5cf6; }      /* Roxo vibrante */

.certificate-section {
    padding: 80px 10%;
    background-color: #ffffff; /* Branco puro para passar limpeza */
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.cert-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 50px;
    flex-wrap: wrap; /* Garante que funcione no celular */
}

.cert-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px; /* Bordas bem arredondadas (mais moderno) */
    padding: 40px;
    max-width: 400px;
    flex: 1;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cert-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: #3b82f6; /* Borda fica azul no hover */
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    background: #eff6ff; /* Fundo azul clarinho */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.1); /* Borda interna sutil */
}

.cert-icon {
    font-size: 2.5rem; /* Tamanho do Emoji */
    line-height: 1;
}

/* Efeito no hover para o ícone dar um "pulinho" */
.cert-card:hover .icon-wrapper {
    background: #3b82f6; /* Fundo fica azul no hover */
    transform: scale(1.1);
    transition: 0.3s;
}

.btn-saiba-mais {
    display: inline-block;
    margin-top: auto; /* Empurra o botão para o fundo se os textos tiverem tamanhos diferentes */
    padding: 12px 35px;
    background-color: transparent; /* Fundo transparente inicial */
    color: #3b82f6; /* Cor do texto azul */
    border: 2px solid #3b82f6; /* Borda azul */
    border-radius: 50px; /* Formato arredondado de pílula */
    text-decoration: none; /* Remove o sublinhado de link */
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease; /* Transição suave para o hover */
    cursor: pointer;
}

/* EFEITO AO PASSAR O MOUSE (HOVER) */
.btn-saiba-mais:hover {
    background-color: #3b82f6; /* O fundo preenche de azul */
    color: #ffffff; /* O texto fica branco */
    transform: translateY(-3px); /* O botão sobe levemente */
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2); /* Sombra suave azulada */
}

/* EFEITO AO CLICAR */
.btn-saiba-mais:active {
    transform: translateY(-1px);
}

.reasons-section {
    padding: 100px 10%;
    background-color: #0f172a; /* Azul acinzentado bem clarinho */
    text-align: center;
}

.top-tag {
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
}

.reasons-section .title {
    font-size: 2.5rem;
    color: #00a3ee;
    margin-top: 10px;
    margin-bottom: 60px;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.reason-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    text-align: left;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.reason-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    border-color: #3b82f6;
}

/* O Número grande no fundo ou topo */
.card-num {
    font-size: 3rem;
    font-weight: 800;
    color: rgba(59, 130, 246, 0.1); /* Azul bem clarinho e transparente */
    position: absolute;
    top: 20px;
    right: 30px;
}

.reason-card h3 {
    font-size: 1.4rem;
    color: #1e293b;
    margin-bottom: 15px;
    font-weight: 700;
    padding-right: 50px; /* Não deixa o texto bater no número */
}

.reason-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
}

/* Linha decorativa no título */
.reason-card::before {
    content: '';
    position: absolute;
    top: 45px;
    left: 20px;
    width: 4px;
    height: 20px;
    background-color: #3b82f6;
    border-radius: 10px;
}

.faq-section {
    padding: 80px 10%;
    background-color: #0f172a;
}

.faq-section .title {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 50px;
    text-align: center;
}

.faq-wrapper {
    display: flex;
    gap: 30px;
    flex-wrap: wrap; /* Para celular ficar uma coluna só */
}

.faq-column {
    flex: 1;
    min-width: 300px;
}

.faq-item {
    margin-bottom: 15px;
    border-radius: 12px;
    background-color: #f8fafc;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.faq-question {
    width: 100%;
    padding: 20px 25px;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: 0.3s;
}

.faq-question:hover {
    background-color: #eff6ff; /* Azul muito claro no hover */
    color: #3b82f6;
}

.plus {
    font-size: 1.5rem;
    color: #3b82f6;
    transition: transform 0.3s ease;
}

/* Estilo para quando estiver aberto (via JS) */
.faq-item.active {
    background-color: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.1);
}

.faq-item.active .plus {
    transform: rotate(45deg); /* O + vira um x */
}

.faq-answer {
    max-height: 0; /* Esconde a resposta */
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    padding: 0 25px;
}

.faq-answer p {
    padding-bottom: 20px;
    color: #64748b;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* HEADER E NAVEGAÇÃO */
#main-header {
    position: fixed; /* Fica fixo no topo */
    top: 0;
    width: 100%;
    padding: 20px 10%;
    z-index: 1000;
    transition: all 0.4s ease; /* Transição suave */
    background: transparent; /* Começa transparente */
}

/* Classe que será adicionada via JavaScript ao rolar */
#main-header.scrolled {
    background: rgba(15, 23, 42, 0.95); /* Azul marinho escuro */
    padding: 15px 10%;
    backdrop-filter: blur(10px); /* Efeito vidro */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ESTILO DOS LINKS DA NAV BAR */
.nav-links {
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    color: #ffffff; /* Branco sempre visível */
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase; /* Dá um ar mais profissional/corporativo */
    letter-spacing: 1px;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
}

/* A BARRA ANIMADA (O "PULP" DA ANIMAÇÃO) */
.nav-links li a::after {
    content: '';
    position: absolute;
    width: 0;          /* Começa com largura zero */
    height: 2px;       /* Espessura da linha */
    bottom: 0;
    left: 0;
    background-color: #3b82f6; /* Azul destaque da sua logo */
    transition: width 0.3s ease; /* A mágica do movimento */
}

/* QUANDO PASSA O MOUSE (HOVER) */
.nav-links li a:hover {
    color: #3b82f6; /* O texto muda para azul sutilmente */
}

.nav-links li a:hover::after {
    width: 100%; /* A linha azul preenche toda a extensão do texto */
}

/* AJUSTE PARA QUANDO O HEADER ESTIVER SCROLLED (ESCURO) */
#main-header.scrolled .nav-links li a {
    font-size: 0.9rem; /* Diminui um tiquinho para ficar mais clean ao rolar */
}

/* FOOTER */
.main-footer {
    background-color: #1e293b; /* Cor grafite/escuro */
    color: #94a3b8;
    padding: 60px 10% 30px;
    font-family: 'Montserrat', sans-serif;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-icon {
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    transition: 0.3s;
}

.social-icon:hover {
    background: #3b82f6;
    border-color: #3b82f6;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.8rem;
}

.legal-links a {
    color: white;
    text-decoration: none;
    margin-right: 20px;
}

.legal-info p {
    margin-bottom: 5px;
    text-align: right;
}

/* Proposta 1: DTP Moderno */
.logo-dtp-1 {
    font-family: 'Montserrat', sans-serif; /* Fonte robusta e moderna */
    font-size: 2.5rem;
    font-weight: 800; /* Extra bold */
    color: #ffffff; /* Azul Marinho Profundo */
    letter-spacing: -1.5px;
    display: flex;
    align-items: center;
}

.logo-dtp-1 .highlight {
    color: #22d3ee; /* Turquesa vibrante (ponto final) */
    margin-left: 1px;
}

/* O detalhe da barra vertical entre D e TP */
.logo-dtp-1::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 1em;
    background-color: #22d3ee;
    margin-right: 10px;
    border-radius: 4px;
}

/* LOGO VERSÃO FOOTER */
.footer-logo-dtp {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem; /* Tamanho reduzido (metade da principal) */
    font-weight: 800;
    color: #ffffff; /* Branco puro para contraste */
    letter-spacing: -1px;
    display: flex;
    align-items: center;
    text-decoration: none;
    user-select: none;
}

/* O detalhe da barra agora é mais fino e elegante */
.footer-logo-dtp::before {
    content: '';
    display: inline-block;
    width: 4px; /* Barra mais fina */
    height: 0.9em;
    background-color: #3b82f6; /* Azul vibrante de destaque */
    margin-right: 8px;
    border-radius: 2px;
}

/* O ponto final opcional em cor de destaque */
.footer-logo-dtp .dot {
    color: #3b82f6;
    margin-left: 1px;
}

/* Efeito de hover sutil */
.footer-logo-dtp:hover {
    opacity: 0.8;
    transition: 0.3s;
}

.footer-nav {
    list-style: none; /* Remove as bolinhas da lista */
    display: flex;
    gap: 25px; /* Espaço entre os links */
    padding: 0;
    margin: 0;
}

.footer-nav li a {
    text-decoration: none; /* Remove o sublinhado feio */
    color: #94a3b8; /* Um cinza azulado que não cansa o olho */
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease; /* Suavidade na mudança de cor */
    position: relative;
    padding-bottom: 5px;
}

/* EFEITO AO PASSAR O MOUSE */
.footer-nav li a:hover {
    color: #ffffff; /* Fica branco puro */
}

/* LINHA ANIMADA EMBAIXO (OPCIONAL - Fica muito profissional) */
.footer-nav li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #3b82f6; /* Azul destaque da sua logo */
    transition: width 0.3s ease;
}

.footer-nav li a:hover::after {
    width: 100%; /* A linha cresce quando você passa o mouse */
}


/* sobre nos */

.accountant-bio {
    /* Remove o fundo branco e as bordas para integrar com a barra */
    background-color: transparent; 
    border-radius: 0;
    
    /* Espaçamento estratégico */
    margin-top: 50px; /* Puxa o currículo para cima da barra escura */
    padding: 0 10%;
    position: relative;
    z-index: 10;
}


.bio-container {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.bio-image {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.bio-image img {
    width: 100%;
    border-radius: 20px;
    filter: contrast(1.1); /* Melhora a definição da foto */
    box-shadow: 20px 20px 60px rgba(0,0,0,0.1);
}

.crc-badge {
    position: absolute;
    bottom: -15px;
    right: -15px;
    background: #3b82f6;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.bio-content {
    flex: 1.5;
    min-width: 350px;
}

.bio-tag {
    color: #3b82f6;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.bio-content h2 {
    font-size: 2.5rem;
    color: #1e293b;
    margin: 10px 0 20px;
}

.bio-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #64748b;
    margin-bottom: 30px;
}

.expertise-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}

.expertise-tags span {
    background: #e2e8f0;
    color: #475569;
    padding: 6px 15px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
}

.about-section {
    padding: 100px 10%;
    background-color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

.main-title {
    text-align: center;
    font-size: 2.5rem;
    color: #1e293b;
    font-weight: 700;
    margin-top: 30px;
}

.main-title span {
    display: block;
    width: 60px;
    height: 4px;
    background: #3b82f6;
    margin: 15px auto 0;
    border-radius: 2px;
}

/* QUEM SOMOS - TEXTO E IMAGEM LADO A LADO */
.about-intro {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
    flex-wrap: wrap; /* Para funcionar no celular */
}

.about-text {
    flex: 1;
    min-width: 300px;
}

.about-text h3 {
    font-size: 1.8rem;
    color: #3b82f6;
    margin-bottom: 20px;
}

.full-bar-about {
    /* Força a ocupação total da largura da tela */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    background-color: #0f172a; /* Azul marinho escuro */
    
    /* Aumentamos o padding para a barra ficar mais "grossa" */
    padding: 100px 0; 

    
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.content-wrapper {
    width: 85%;
    max-width: 1100px;
    /* Cor das letras mais clara para alto contraste */
    color: #f1f5f9; 
    font-family: 'Montserrat', sans-serif;
    line-height: 2; /* Aumenta o espaço entre linhas para um ar mais executivo */
    text-align: center; /* Centraliza o texto para um visual mais simétrico */
}

.content-wrapper p {
    margin-bottom: 30px;
    font-size: 1.2rem;
    font-weight: 400;
}

.content-wrapper strong {
    color: #ffffff;
    font-weight: 700;
}

.about-text p {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 20px;
}


/* CARDS DE MISSÃO E VISÃO */
.mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    /* Aumenta a distância entre a barra escura e os cards */
    margin-top: 80px; 
}

.mv-card {
    background: #f8fafc;
    padding: 40px;
    border-radius: 20px;
    border-bottom: 5px solid #3b82f6;
    transition: 0.3s;
}

.mv-card:hover {
    transform: translateY(-5px);
    background: #ffffff;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}

.mv-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.mv-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #1e293b;
}

.mv-card p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.mv-list {
    list-style: none;
}

.mv-list li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
    color: #475569;
}

.mv-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #3b82f6;
    font-weight: bold;
}

.about-header-bar {
    width: 100%;
    /* Mesma cor e altura da sua Nav Bar scrolled para manter o padrão */
    background-color: #0f172a; 
    padding: 25px 0;
    text-align: center;
    border-bottom: 2px solid #3b82f6; /* Linha de destaque azul fina na base */
}

.about-header-bar h2 {
    color: #0f172a;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.8rem;
    
}

/* Ajuste na seção de Bio para colar na faixa */
.accountant-bio {
     /* Remove margem negativa se a faixa já preenche o espaço */
    padding-top: 50px;
}

/* SERVIÇOS*/

.expertise-section { padding: 80px 10%; background: #ffffff; }

.expertise-container {
    display: flex;
    justify-content: space-between;
    gap: 0; /* Colunas encostadas para criar o efeito de divisor */
    margin-top: 50px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
}

.expertise-column {
    flex: 1;
    padding: 40px;
    border-right: 1px solid #e2e8f0;
    transition: background 0.3s ease;
}

.expertise-column:last-child { border-right: none; }

.expertise-column:hover {
    background: #f8fafc;
}

.expertise-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.exp-icon { font-size: 2rem; }

.expertise-header h3 {
    font-size: 1.5rem;
    color: #0f172a;
    font-weight: 700;
}

.expertise-body p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
}

.expertise-body ul {
    list-style: none;
    padding: 0;
}

.expertise-body li {
    padding: 8px 0;
    color: #1e293b;
    font-size: 0.95rem;
    position: relative;
    padding-left: 20px;
}

.expertise-body li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #3b82f6;
}
/*planos*/

.pricing-home { padding: 80px 10%; background: #f8fafc; text-align: center; }
.pricing-grid { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; margin-top: 50px; }

.pricing-card {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    width: 320px;
    transition: transform 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.pricing-card.featured {
    border: 2px solid #3b82f6;
    transform: scale(1.05); /* Deixa o plano principal maior */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #3b82f6;
    color: #fff;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
}

.plan-header h3 { font-size: 1.8rem; color: #1e293b; margin-bottom: 5px; }
.plan-subtitle { color: #3b82f6; font-weight: 600; font-size: 0.9rem; margin-bottom: 25px; }

.plan-features { list-style: none; padding: 0; margin-bottom: 30px; text-align: left; flex-grow: 1; }
.plan-features li { padding: 10px 0; color: #64748b; font-size: 0.95rem; border-bottom: 1px solid #f1f5f9; }
.plan-features li strong { color: #1e293b; }

.plan-btn {
    text-decoration: none;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #3b82f6;
    color: #3b82f6;
    font-weight: 600;
    transition: 0.3s;
}

.featured .plan-btn { background: #3b82f6; color: #fff; }
.plan-btn:hover { background: #1d4ed8; color: #fff; }

.select{
    margin: 5px;
    color: #0f172a;
}

.price {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1e293b;
    margin: 15px 0;
}

.price span {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 400;
}

.featured .price {
    color: #3b82f6; /* Preço em destaque no card azul */
}