:root {
  /* CORES PERSONALIZADAS DO TAILWIND */
  --color-primary: #3DD0B1; 
  --color-secondary: #007293; 
  --color-accent: #F4D95F;
  --color-highlight: #FDD835;
  --color-differential-bg: #7f6a93;
}

/* Estilos globais e utilitários */
body {
    font-family: 'Nunito', sans-serif; 
    color: #333;
    overflow-x: hidden;
    /* padding-top: 80px;  REMOVIDO */
}
h1, h2 {
    font-family: 'Poppins', sans-serif;
    
    color: #3d3d3d;
}
  h3, h4, h5, h6 {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    /* Cor padrão removida, será definida por classes Tailwind ou inline style */
}
/* Estilos Base do Botão */
.btn {
    @apply flex items-center justify-center text-lg shadow-lg transition-transform transition-shadow duration-300 ease-in-out border-none;
    font-weight: 200;
    font-family: 'Poppins', sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    overflow: hidden; /* Garante que o ::after não vaze */
    z-index: 1;
    padding: 12px 45px; /* Padding Padrão */
    border-radius: 60px; 
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.1s ease-in-out, box-shadow 0.7s ease-in-out;
}

/* Variações de Cor */
.btn-primary {
    @apply bg-primary text-white;
}
.btn-accent {
    @apply bg-accent text-secondary;
}

/* Botão Call-to-Action Padrão (Azul com Texto Branco) */
.btn-cta {
    background-color: #039d00; 
    color: #fff; 
    font-weight: 600;
    font-size: 20px;
}

/* Efeito HOVER do círculo interno - Estado Inicial (CTA PADRÃO) */
.btn-cta::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0; /* Começa à direita */
    width: 80px; 
    height: 80px;
    background-color: rgba(255, 255, 255, 0.1); /* Branco sutil para fundo azul */
    border-radius: 50%;
    transform: translate(40%, -50%); /* Posiciona 40% para fora à direita */
    z-index: -1;
    transition: transform 0.4s ease; /* Transição na escala e posição */
}

/* Efeito HOVER do círculo interno - Estado Hover (CTA PADRÃO) */
.btn-cta:hover::after {
    transform: translate(-50%, -50%) scale(3.5); /* Move para o centro e expande */
}

/* Cor específica do círculo para o botão amarelo (Hero - que usa style inline) */
.btn-cta[style*="background-color: #6ed5da"]::after { /* Alterado de #F4D95F para #6ed5da */
    background-color: rgba(0, 0, 0, 0.08); /* Preto sutil para fundo claro */
}

/* Cor específica do círculo para o botão amarelo (Prova Social - que usa style inline) */
.btn-cta[style*="background-color: #fefa33"]::after {
    background-color: rgba(0, 0, 0, 0.08); /* Preto sutil para fundo amarelo */
}


/* Estilo específico para o botão do header (SEMPRE AZUL) */
.btn-header {
    background-color: #039d00; 
    color: #fff; 
    font-weight: 700; 
    padding: 8px 45px; /* Padding específico isolado */
}

/* Efeito HOVER do círculo interno - Estado Inicial (HEADER - ISOLADO) */
.btn-header::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0; 
    width: 80px; 
    height: 80px;
    background-color: rgba(255, 255, 255, 0.1); 
    border-radius: 50%;
    transform: translate(40%, -50%); 
    z-index: -1;
    transition: transform 0.4s ease; 
}

/* Efeito HOVER do círculo interno - Estado Hover (HEADER - ISOLADO) */
.btn-header:hover::after {
    transform: translate(-50%, -50%) scale(3.5); 
}


/* Animações */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
    animation: fadeIn 0.8s ease-out forwards;
}
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* EFEITO DE TRANSIÇÃO (LIFT ON HOVER) */
.interactive-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.interactive-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Estilo para ícones de lista */
.list-icon {
    color: #3DD0B1; 
    margin-right: 0.5rem;
    width: 1.2em;
    text-align: center;
}

/* ===== SOBREPOSIÇÃO DIAGONAL HERO - VERSÃO SUAVE ROXA ===== */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 1;
    pointer-events: none;
}

/* Garantir que o conteúdo fique visível */
#hero .relative.z-10 {
    z-index: 2;
}

/* A forma azul deve ficar acima de tudo */
#hero > .relative > div:last-child > div:first-child {
    z-index: 3 !important;
    position: relative;
}

/* Melhorar contraste do texto na hero */
#hero h1, {
    font-size: 40px;
}
#hero p {
    position: relative;
    z-index: 3;
    font-size: 17px;
}

/* Ajuste específico para o botão CTA */
#hero .btn-cta {
    position: relative;
    z-index: 3;
}
/* ====FIM DA SOBREPOSIÇÃO==== */

/* Estilos para o cabeçalho (SEMPRE BRANCO) 
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: white; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    padding-top: 0.75rem; 
    padding-bottom: 0.75rem;
    transition: padding 0.4s ease-in-out; 
} */
.main-header .nav-link {
    color: #007293; 
}
.logo-img {
    
    transition: none; 
}
#mobileMenuButton { 
    color: #007293; 
}

/* Estilos para os números vazados nos cards de diferenciais */
.differential-card-number {
    position: absolute;
    bottom: 0.5rem; 
    right: 1.5rem;
    font-size: 4rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 2px #E5E7EB; 
    z-index: 0;
}

/* Estilos Seção Profissionais */
.professional-card {
    background-color: white;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.professional-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.professional-img-wrapper {
    overflow: hidden;
    position: relative;
    /* Alteração: Aumentada a altura padrão (mobile) para 420px */
    height: 420px; 
}

/* Adicionado: Media Query (min-width: 640px) 
   Este é o breakpoint 'sm' do Tailwind, onde seu grid passa para 2 colunas.
   A partir daqui, a altura volta a ser 320px, como estava.
*/
@media (min-width: 640px) {
    .professional-img-wrapper {
        height: 320px; /* Altura original para telas 'sm' e maiores */
    }
}

.professional-img-wrapper img {
    transition: transform 0.4s ease;
    width: 100%; 
    height: 100%; 
}

.professional-card:hover .professional-img-wrapper img {
    transform: scale(1.1);
}

.professional-share-icon {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background-color: #00A1A7; 
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10;
}
.professional-share-icon:hover {
    transform: rotate(360deg);
}
.text-custom-orange {
    color: #F3E85A /* Cor Laranja */
}

.professional-card-info {
    padding: 2.5rem 1.5rem;
}

/* Estilos do Carrossel de Depoimentos */
.carousel-container {
    /* overflow: visible; Removido para conter melhor */
    position: relative;
    width: 100%;
}

.carousel-track-wrapper {
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    flex-shrink: 0;
    box-sizing: border-box;
    /* Manter um pequeno padding lateral para separação visual entre cards */
    padding: 0 0.5rem;
}
/* Estilo adicionado para o card interno do depoimento */
.testimonial-card-inner {
    background-color: white; 
    border-radius: 25px;
}

/* Ajuste de posição dos botões do carrossel de depoimentos */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 20;
    color: #007293; 
}

.carousel-button:hover {
    background-color: #f0f0f0;
}

.carousel-button-prev {
    left: 4rem;
}

.carousel-button-next {
    right: 4rem;
}

/* Tipografia refinada dos cards */
.professional-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #15243d;
    margin-bottom: 0.25rem;
}

.specialty {
    font-size: 1rem;
    font-weight: 500;
    color: #00A1A7;
    margin-bottom: 0.75rem;
}

/* Ícone de destaque */
.professional-share-icon {
    bottom: 1rem;
    right: 1rem;
    background-color: #00A1A7;
    color: #fff;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
}
.professional-share-icon:hover {
    transform: rotate(360deg) scale(1.1);
    background-color: #007b80;
}


/* Estilos para o modal */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; justify-content: center; align-items: center;
    z-index: 2000; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-content {
    background-color: white; padding: 2rem; border-radius: 0.75rem; 
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    max-width: 90%; width: 400px; text-align: center;
    position: relative; transform: translateY(-20px);
    transition: transform 0.3s ease;
}
.modal-overlay.open .modal-content { transform: translateY(0); }
.modal-close-button {
    position: absolute; top: 1rem; right: 1rem;
    font-size: 1.5rem; cursor: pointer; color: #007293; 
}

/* Estilos para o Banner de Cookies */
#cookieBanner.show-banner {
    transform: translateY(0);
}

/* Estilo da Bolha de Nuvem (Social Proof) */
/* Usando uma forma mais complexa para simular a nuvem */
.cloud-blob {
    position: absolute;
    width: 60%; /* Largura ajustada para cobrir a imagem */
    height: 100%; /* Altura ajustada para cobrir a imagem */
    background-color: #7f6a93;
    opacity: 0.75;
    z-index: 5; /* Atrás da imagem (z-index: 10) */
    
    /* CSS complexo para simular o formato de nuvem */
    border-radius: 50%;
    box-shadow: 
        30px 0 0 -15px #7f6a93,
        -30px 0 0 -15px #7f6a93,
        0 30px 0 -15px #7f6a93,
        0 -30px 0 -15px #7f6a93;
    /* Removido o transform para posicionamento exato */
    /* Posição ajustada para ficar atrás e alinhado com a imagem */
    bottom: 0;
    right: 0; 
    
    /* Usando um border-radius ainda mais complexo para formato de nuvem */
    border-radius: 65% 45% 55% 40% / 60% 40% 60% 45%; 
}


/* --- NOVOS ESTILOS: SWIPER PROFISSIONAIS --- */

/* Ajusta o container para dar espaço para as bolinhas */
#professionals-carousel {
    padding-bottom: 50px; /* Espaço para paginação */
    overflow: hidden; /* Garante que os slides fiquem contidos */
}

/* Garante que os slides tenham altura automática para o Swiper calcular */
#professionals-carousel .swiper-slide {
    height: auto;
}

/* Garante que o card ocupe 100% da altura do slide (importante para o layout) */
#professionals-carousel .professional-card {
    height: 100%;
}


/* Estilização das "Bolinhas" (Pagination) */
.swiper-pagination {
    position: absolute;
    bottom: 10px !important; /* Posição na parte inferior */
    left: 0;
    width: 100%;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #ccc; /* Cor padrão inativa */
    opacity: 0.7;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    margin: 0 5px !important; /* Espaçamento entre as bolinhas */
}

.swiper-pagination-bullet-active {
    background-color: #3DD0B1; /* Cor primária (ativa) */
    opacity: 1;
}
/* --- FIM ESTILOS SWIPER --- */

/* ESTILO DO BOTÃO FLUTUANTE */

 .whatsapp-container {
    position: fixed;
    bottom: 17px;
    right: 0px; 
    margin-right: 20px; /* Compensa o padding do body */
    z-index: 9999;
    pointer-events: none;
    
    display: flex;
    /* CHAVE 1: Mantemos align-items: flex-end para que os filhos (popup e float)
       se alinhem pela direita, conforme a imagem mostra */
    align-items: flex-end; 
    flex-direction: column;
}


.whatsapp-container.is-open {
    pointer-events: auto; /* Quando a caixa é aberta, permite cliques DENTRO dela. */
}

        /* Estilo do botão flutuante de WhatsApp */
        .whatsapp-float {
            width: 60px;
            height: 60px;
            background-color: #128c7e;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 30px;
            cursor: pointer;
            transition: background-color 0.3s;
            position: relative;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            pointer-events: auto;
        }

        .whatsapp-float:hover {
            background-color: #013227;
        }

        /* Bolinha de status online no ícone */
        .icon-status {
    position: absolute;
    /* LINHAS ALTERADAS: */
    top: -5px;     
    right: auto;   /* REMOVIDO: Removemos a instrução 'right' */
    left: -5px;    /* NOVO: Move a bolinha para o canto superior esquerdo */
    
    /* O restante das regras é mantido */
    width: 20px;
    height: 20px;
    background-color: #a6f6af;
    border-radius: 50%;
    border: 2px solid #ffefb5;
    z-index: 10; 
    animation: pulse 1s infinite ;
}

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
            }
        }

        /* Estilo do botão de contato WhatsApp */
        .whatsapp-button {
            background-color: #123444;
            color: white;
            padding: 15px;
            border-radius: 15px 35px 0px 35px;
            width: 300px;
            visibility: hidden;
            opacity: 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0.4s;
            margin-bottom: 15px;
        }

        .show-whatsapp {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        /* Estilo da parte superior do botão de contato */
        .contact-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .contact-header img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid #00bb2d;
            margin-right: 10px;
        }

        .contact-info {
            flex-grow: 1;
        }

        .contact-header .name {
            font-size: 16px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .contact-header .status {
            font-size: 12px;
            color: #bbb;
        }

        .online-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #25D366;
            border-radius: 50%;
            margin-left: 5px;
        }

        .typing-animation {
            font-size: 14px;
            margin-bottom: 10px;
            color: white;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.4s ease;
            display: flex;
            align-items: center;
            pointer-events: none;
        }

        .show-typing {
            visibility: visible;
            opacity: 1;
        }

        /* Nova animação de pontos pulsantes */
        .typing-dots {
            display: inline-flex;
            align-items: center;
            height: 17px;
            margin-right: 8px;
        }

        .typing-dots span {
            width: 6px;
            height: 6px;
            margin: 0 2px;
            background-color: white;
            border-radius: 50%;
            display: inline-block;
        }

        .typing-dots span:nth-child(1) {
            animation: typingAnimation 1.4s infinite;
        }

        .typing-dots span:nth-child(2) {
            animation: typingAnimation 1.4s infinite 0.2s;
        }

        .typing-dots span:nth-child(3) {
            animation: typingAnimation 1.4s infinite 0.4s;
        }

        @keyframes typingAnimation {
            0%, 60%, 100% {
                transform: translateY(0);
            }
            30% {
                transform: translateY(-5px);
            }
        }

        /* Estilo da mensagem */
        .message-box {
            background-color: #f0f0f0;
            padding: 20px;
            border-radius: 8px 8px 0px 8px;
            margin-bottom: 10px;
            color: black;
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.4s ease;
            font-size: 15px;
            line-height: 1.3;
            pointer-events: none;
        }

        .show-message {
            visibility: visible;
            opacity: 1;
        }

        .message-box strong {
            font-size: 14px;
            color: #333;
        }

        .message-box .time {
            font-size: 12px;
            color: #999;
            float: right;
        }

        /* Estilo do botão de ação */
        .action-button {
            background-color: #00bb2d;
            color: white;
            padding: 10px;
            border-radius: 20px;
            text-align: center;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            transition: background-color 0.3s;
        }

        .action-button i {
            font-size: 18px;
        }

        .action-button:hover {
            background-color: #128C7E;
        }

        /* ===== AJUSTES RESPONSIVOS PARA BOTÕES CTA ===== */

/* Tablets */
@media (max-width: 1024px) {
  .btn-cta {
    font-size: 18px;
    padding: 11px 35px;
    font-size: 1.125rem !important;
  }
}

/* Celulares */
@media (max-width: 768px) {
  .btn-cta {
    font-size: 13px;
    padding: 10px 30px;
    min-height: 48px;
    border-radius: 50px;
  }
  
  /* Botões específicos com texto mais longo */
  .btn-cta {
    white-space: normal;
    line-height: 1.3;
    text-align: center;
    font-size: 0.875rem !important;
  }
  
  /* Ajusta o padding para botões com texto extenso */
  section#hero .btn-cta,
  section#solution .btn-cta {
    font-size: 15px;
    padding: 9px 25px;
  }
}

/* Celulares muito pequenos */
@media (max-width: 480px) {
  .btn-cta {
    font-size: 14px;
    padding: 8px 22px;
    min-height: 44px; 
  } 
  
  .btn-header {
    font-size: 12px;
    padding: 6px 16px;
  }
  
  /* Remove ou reduz o efeito hover em mobile */
  .btn-cta::after {
    width: 50px;
    height: 50px;
  }
  
  .btn-cta:hover::after {
    transform: translate(-50%, -50%) scale(2.5);
  }



}
/* ----------------- DIFERENCIAIS - FORÇA GLOBAL ----------------- */

/* Overlay: corrige a camada sobre a imagem de fundo da seção.
   Se você adicionar class="differentials-overlay" na div interna, a regra abaixo também funciona. */
#differentials .absolute.inset-0.bg-cover > .absolute.inset-0,
#differentials .differentials-overlay {
  background-color: rgba(232, 249, 249, 0.95) !important;
}

/* Fundo dos ícones (garante cor Behave) */
#differentials .bg-differential-bg,
#differentials .bg-differential-bg * {
  background-color: #00A1A7 !important;
  color: #ffffff !important;
}

/* Títulos e tipografia */
#differentials h2 {
  color: #3d3d3d !important;
  font-weight: 500;
  letter-spacing: -0.5px;
}

#differentials h3,
#differentials h3.text-secondary {
  color: #15243d !important;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Parágrafos e corpo do texto dentro da seção */
#differentials p,
#differentials .text-gray-600 {
  color: #4A5568 !important;
  font-size: 1rem;
  line-height: 1.6;
}

/* Links "Ler mais" - cor e underline animado */
#differentials a {
  color: #00A1A7 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  position: relative;
}
#differentials a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background-color: #00A1A7;
  transition: width .25s ease;
}
#differentials a:hover::after { width: 100%; }


/* Ajuste visual das cards (bordas / sombra suave) */
#differentials .flex.items-stretch {
  border-radius: 15px;
  overflow: visible;
}
#differentials .flex.items-stretch > .bg-white {
  background: #FFFFFF !important;
}

/* Numeração decorativa */
#differentials .differential-card-number {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  color: rgba(21,36,61,0.08);
  font-weight: 800;
  font-size: 3rem;
  pointer-events: none;
}

/* Responsivo: ajustes menores */
@media (max-width: 767px) {
  #differentials h2 { font-size: 1.6rem; }
  #differentials h3 { font-size: 1.05rem; }
}

/* === DIFERENCIAIS - HARMONIZAÇÃO VISUAL === */
#differentials .flex.items-stretch {
  border-radius: 14px; /* bordas arredondadas suaves */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* efeito de destaque no hover */
#differentials .flex.items-stretch:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* canto esquerdo colorido com leve arredondamento também */
#differentials .bg-differential-bg {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

/* conteúdo interno dos cards */
#differentials .bg-white {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

/* número do card com leve transparência e alinhamento elegante */
#differentials .differential-card-number {
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-size: 2.8rem;
  font-weight: 700;
  color: rgba(21,36,61,0.07);
  z-index: 0;
}

/* título */
#differentials h3 {
  color: #15243d;
  font-weight: 700;
}

#differentials h2 {
  color: #15243d;
  font-weight: 600;
}
/* botão “Ler mais” */
#differentials a {
  color: #00836c;
  transition: color 0.3s ease;
}
#differentials a:hover {
  color: #004d40;
}

/* Fim - diferencials */

#mainHeader {
  transition: all 0.3s ease;
}

#mainHeader.scrolled {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

@media (max-width: 1024px) {
  #mobileMenu nav a {
    transition: all 0.3s ease;
  }
}
/* ==== AJUSTES HEADER (DESKTOP E MOBILE) ==== */

/* Geral */

/* Links do menu desktop */
.main-header .nav-link {
    font-weight: 500;
    letter-spacing: 0.3px;
    color: #007C92; /* Corrigido para sua cor de texto: #007C92 */
    position: relative;
}

.main-header .nav-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    /* Removido o var, usando a cor principal no hover: #4EC6C4 */
    background-color: #4EC6C4; 
    transition: width 0.3s ease;
}

.main-header .nav-link:hover::after {
    width: 100%;
}

/* Botão CTA no header */
.btn-header {
    /* Corrigido para sua cor principal: #4EC6C4 */
    background: #039d00; 
    color: #fff;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 9999px;
    transition: all 0.3s ease;
}

.btn-header:hover {
    /* Mantive o hover original #3B82F6 para contraste, mas se quiser a #4EC6C4, altere aqui */
   
    transform: translateY(-2px);
}

/* Header desktop */
.main-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.main-header .logo-img {
    max-height: 60px;
}

/* Links do menu */
.main-header .nav-link {
    color: #007C92; /* Corrigido para sua cor de texto: #007C92 */
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    position: relative;
}

.main-header .nav-link:hover {
    color: #4EC6C4; /* Corrigido para sua cor principal no hover: #4EC6C4 */
}

.main-header .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    /* Corrigido para sua cor principal: #4EC6C4 */
    background-color: #4EC6C4; 
    transition: width 0.3s ease;
}

.main-header .nav-link:hover::after {
    width: 100%;
    /* Removida a linha de cor incorreta/redundante */
}

//* ==== AJUSTES HEADER (DESKTOP E MOBILE) ==== */

/* ==== SOLUÇÃO FINAL DE VISIBILIDADE NA ROLAGEM ==== */

/* 1. ESTADO INICIAL (TOPO DA PÁGINA): Header (Fundo) Invisível */
.main-header {
    /* Garante que o fundo e sombra NUNCA apareçam se não houver a classe scrolled */
    background-color: transparent !important; 
    box-shadow: none !important;             
    
    /* Remove os paddings no estado inicial para que a barra não ocupe altura visível */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease; /* Transição única para tudo */
}

/* 2. CONTEÚDO (Logo, Menu, Botões) NO ESTADO INICIAL */
/* Força o conteúdo a ser invisível e inativo */
.main-header .container {
    opacity: 0 !important;
    pointer-events: none !important;
    /* Transição para suavizar o aparecimento */
    transition: opacity 0.3s ease 0.1s; 
}


/* 3. ESTADO "ROLADO": Tudo Visível e Clicável */
.main-header.scrolled {
    /* Fundo e sombra aparecem */
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
    
    /* Retorna os paddings para a barra ter altura */
    padding-top: 0.75rem !important; /* Ou o valor que você usava, ex: 10px */
    padding-bottom: 0.75rem !important; /* Ou o valor que você usava, ex: 10px */
    
    opacity: 1;
    pointer-events: auto;
}

/* 4. CONTEÚDO (Logo, Menu, Botões) NO ESTADO ROLADO */
/* Torna o conteúdo visível */
.main-header.scrolled .container {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* CLASSE CSS PARA LOGO NA SEÇÃO HERO */
.hero-logo-filter {
    /* brightness(0) invert(1) é usado para transformar a logo preta em branca (se necessário) */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)) brightness(0) invert(1); 
}

/* Desabilita o círculo de hover para o botão da Prova Social */
.btn-social-proof::after {
    display: none !important;
}

/* TEXTO DECORATIVO */

.sketch-highlight{
  position:relative;
  padding:   2px 25px;
  font-size: 22px;
}

.sketch-highlight:before{
  content:"";
  z-index:-1;
  left:0em;
  top:0em;
  border-width:2px;
  border-style:solid;
  border-color:darkblue;
  position:absolute;
  border-right-color:transparent;
  width:100%;
  height:30px;
  transform:rotate(2deg);
  opacity:0.5;
  border-radius:0.25em;
}

.sketch-highlight:after{
  content:"";
  z-index:-1;
  left:0em;
  top:0em;
  border-width:2px;
  border-style:solid;
  border-color:darkblue;
  border-left-color:transparent;
  border-top-color:transparent;
  position:absolute;
  width:100%;
  height:30px;
  transform:rotate(-1deg);
  opacity:0.5;
  border-radius:0.25em;
}

/*---MARCA TEXTO*/
mark {
  background: linear-gradient(
    to top,
    rgba(243, 232, 90, 0.55) 0%,
    rgba(243, 232, 90, 0.35) 50%,
    rgba(243, 232, 90, 0.0) 100%
  );
  padding: 2px 4px;
  border-radius: 2px;
  font-weight: 600;
  color: inherit;
  transition: background 0.3s ease;
}
mark:hover {
  background: linear-gradient(
    to top,
    rgba(243, 232, 90, 0.75) 0%,
    rgba(243, 232, 90, 0.45) 50%,
    rgba(243, 232, 90, 0.1) 100%
  );
}

/* FORÇA O TAMANHO MAIOR do botão cta hero A APARECER NO DESKTOP */
.lg\:text-lg {
    font-size: 1.125rem !important; /* Valor exato de text-lg */
}


/* CLASSE ISOLADA PARA O BOTÃO CTA DA HERO - V2 (CONTROLE TOTAL) */

/* 1. Celular (Mobile: Padrão) */
.btn-hero-isolated {
    /* Força o tamanho pequeno no mobile para evitar quebras de linha */
    font-size: 12px !important; 
    padding: 10px 30px !important;
}

/* 2. Tablet (769px até 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .btn-hero-isolated {
    /* Tamanho médio para tablets (24px) */
    font-size: 24px !important; 
    padding: 14px 35px !important; 
  }
}

/* 3. Desktop (1025px e acima) */
@media (min-width: 1025px) {
  .btn-hero-isolated {
    /* O SEU TAMANHO EXTRA GRANDE PARA DESKTOP */
    font-size: 17px !important; 
    padding: 14px 35px !important; 
  }
}