/* Estilo base */
body {
    font-family: 'DM Sans', sans-serif;
}

/* Fontes dos Títulos */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lora', serif;
}

/* Cores personalizadas */
.bg-agro-verde {
    background-color: #1B7F6E;
}

.text-agro-verde {
    color: #1B7F6E;
}

.border-agro-verde {
    border-color: #1B7F6E;
}

.bg-agro-cinza {
    background-color: #4A4A4A;
}

.text-agro-cinza {
    color: #4A4A4A;
}

.bg-agro-ambar {
    background-color: #D4A574;
}

.text-agro-ambar {
    color: #D4A574;
}

.border-agro-ambar {
    border-color: #D4A574;
}

.bg-agro-creme {
    background-color: #F5F1E8;
}

.text-agro-creme {
    color: #F5F1E8;
}

/* --- Efeito Hover Botões Gerais --- */
.btn-swipe {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-swipe::after {
    content: '';
    position: absolute;
    background: rgba(0, 0, 0, 0.15);
    height: 100%;
    left: -35%;
    top: 0;
    transform: skew(50deg);
    transition-duration: 0.6s;
    transform-origin: top left;
    width: 0;
    z-index: -1;
}

.btn-swipe:hover::after {
    height: 100%;
    width: 135%;
}

/* --- Overlay do Hero --- */
.hero-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* --- Animação de Fade-in (CSS puro) --- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- ANIMAÇÃO GENÉRICA PARA FILHOS --- */
/* (Parágrafos, botões, imagens, etc.) */
.fade-in-element > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}

/* Quando o container fica visível, os filhos aparecem */
.fade-in-element.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* Efeito "Stagger" (um após o outro) */
.fade-in-element.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.fade-in-element.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.fade-in-element.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.fade-in-element.is-visible > *:nth-child(4) { transition-delay: 0.4s; }

/* EXCEÇÃO: Títulos não devem usar a animação genérica, */
/* pois eles têm a própria animação "letra por letra". */
.fade-in-element > h1,
.fade-in-element > h2,
.fade-in-element > h3,
.fade-in-element > h4,
.fade-in-element > h5,
.fade-in-element > h6 {
    /* Reseta os estilos da animação genérica */
    opacity: 1; /* Deixa o container (o próprio H1) visível */
    transform: none;
    transition: none;
    will-change: auto;
}


/* --- Estilos do Carrossel (Seção Time) --- */
/*
#team-carousel {
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#team-carousel::-webkit-scrollbar {
    display: none;
}

.team-card {
    width: 85vw;
}

@media (min-width: 640px) {
    .team-card {
        width: 20rem;
    }
}
*/

/* --- CSS Menu Hamburguer (nav-icon2) --- */
#nav-icon2 {
    width: 60px;
    height: 45px;
    position: relative;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon2 span {
    display: block;
    position: absolute;
    height: 5px;
    width: 50%;
    background: #4A4A4A;
    opacity: 1;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

#nav-icon2.open span {
    background: #1B7F6E;
}

#nav-icon2 span:nth-child(even) {
    left: 50%;
    border-radius: 0 9px 9px 0;
}

#nav-icon2 span:nth-child(odd) {
    left: 0px;
    border-radius: 9px 0 0 9px;
}

#nav-icon2 span:nth-child(1),
#nav-icon2 span:nth-child(2) {
    top: 0px;
}

#nav-icon2 span:nth-child(3),
#nav-icon2 span:nth-child(4) {
    top: 18px;
}

#nav-icon2 span:nth-child(5),
#nav-icon2 span:nth-child(6) {
    top: 36px;
}

#nav-icon2.open span:nth-child(1),
#nav-icon2.open span:nth-child(6) {
    transform: rotate(45deg);
}

#nav-icon2.open span:nth-child(2),
#nav-icon2.open span:nth-child(5) {
    transform: rotate(-45deg);
}

#nav-icon2.open span:nth-child(1) {
    left: 5px;
    top: 7px;
}

#nav-icon2.open span:nth-child(2) {
    left: calc(50% - 5px);
    top: 7px;
}

#nav-icon2.open span:nth-child(3) {
    left: -50%;
    opacity: 0;
}

#nav-icon2.open span:nth-child(4) {
    left: 100%;
    opacity: 0;
}

#nav-icon2.open span:nth-child(5) {
    left: 5px;
    top: 29px;
}

#nav-icon2.open span:nth-child(6) {
    left: calc(50% - 5px);
    top: 29px;
}

/* --- Animação do Menu Mobile --- */
#mobile-menu {
    transition: all 0.4s ease-out;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px); /* Suavizei o movimento */
    overflow: hidden;
    pointer-events: none;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Sombra mais forte para destacar */
}

#mobile-menu.menu-open {
    max-height: 85vh; /* Aumentei um pouco a área útil */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    overflow-y: auto;
}

/* Custom Scrollbar para o Menu Mobile */
#mobile-menu::-webkit-scrollbar {
    width: 6px;
}
#mobile-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}
#mobile-menu::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
#mobile-menu::-webkit-scrollbar-thumb:hover {
    background: #1B7F6E;
}

/* Classes Utilitárias para o Novo Menu Mobile (Para limpar o HTML) */
.mobile-section-title {
    @apply px-4 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 mt-4;
    font-family: 'DM Sans', sans-serif;
}

.mobile-main-link {
    @apply block px-4 py-3 text-lg font-bold text-agro-cinza hover:bg-agro-creme hover:text-agro-verde rounded-lg transition-colors;
    font-family: 'Lora', serif;
}

.mobile-sub-link {
    @apply block px-4 py-2.5 text-base text-gray-600 hover:text-agro-verde hover:bg-gray-50 rounded-r-lg transition-colors border-l-4 border-transparent hover:border-agro-verde ml-2;
    font-family: 'DM Sans', sans-serif;
}

/* --- Estilos Botão "Learn More" --- */
:root {
    --btn-black: #4A4A4A;
    --btn-white: #ffffff;
}

button.learn-more {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: 1rem;
    font-family: 'Mukta', sans-serif;
    /* AJUSTE: Aumentando a largura total do botão */
    width: 17rem; /* Ajustado de 12rem */
    height: auto;
}

button.learn-more .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: var(--btn-black);
    border-radius: 1.625rem;
}

button.learn-more .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: var(--btn-white);
}

button.learn-more .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
}

button.learn-more .circle .icon.arrow::before {
    position: absolute;
    content: '';
    top: -0.25rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid var(--btn-white);
    border-right: 0.125rem solid var(--btn-white);
    transform: rotate(45deg);
}

button.learn-more .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 0;
    /* AJUSTE: Leve ajuste na margem e alinhamento à esquerda */
    margin: 0 0 0 4rem; /* Ajustado de 3.5rem */
    color: var(--btn-black);
    font-weight: 700;
    line-height: 1.6;
    text-align: left; /* Ajustado de 'center' */
    text-transform: uppercase;
}

button.learn-more:hover .circle {
    width: 100%;
}

button.learn-more:hover .circle .icon.arrow {
    background: var(--btn-white);
    transform: translate(1rem, 0);
}

button.learn-more:hover .button-text {
    color: var(--btn-white);
}

/* --- Animação Elástica Carrossel --- */
.animate-elastic-in {
    animation: elastic-bounce-in 0.5s ease-in-out forwards;
}

.animate-elastic-out {
    animation: elastic-bounce-out 0.4s ease-in-out forwards;
}

@keyframes elastic-bounce-in {
    0% {
        /* transform: translateY(-50%) scale(1); */ /* MODIFICADO */
        scale: 1;
    }

    30% {
        /* transform: translateY(-50%) scale(0.80); */ /* MODIFICADO */
        scale: 0.8;
    }

    60% {
        /* transform: translateY(-50%) scale(1.5); */ /* MODIFICADO */
        scale: 1.5;
    }

    100% {
        /* transform: translateY(-50%) scale(1.3); */ /* MODIFICADO */
        scale: 1.3;
    }
}

@keyframes elastic-bounce-out {
    0% {
        /* transform: translateY(-50%) scale(1.3); */ /* MODIFICADO */
        scale: 1.3;
    }

    30% {
        /* transform: translateY(-50%) scale(1.5); */ /* MODIFICADO */
        scale: 1.5;
    }

    60% {
        /* transform: translateY(-50%) scale(0.80); */ /* MODIFICADO */
        scale: 0.8;
    }

    100% {
        /* transform: translateY(-50%) scale(1); */ /* MODIFICADO */
        scale: 1;
    }
}

/* --- Dropdown e Mega Menu --- */
.nav-item {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 50;
    min-width: 15rem;
    padding: 0.5rem 0;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease-out;
    pointer-events: none;
}

.nav-item:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-item {
    display: block;
    padding: 0.75rem 1.25rem;
    color: #4A4A4A;
    white-space: nowrap;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #F5F1E8;
    color: #1B7F6E;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 50;
    width: 56rem;
    max-width: 90vw;
    padding: 1.5rem;
    opacity: 0;
    transition: all 0.3s ease-out;
    pointer-events: none;
}

.nav-item:hover .mega-menu {
    display: block;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.mega-menu-item {
    display: block;
    padding: 0.75rem 1rem;
    color: #4A4A4A;
    border-radius: 0.375rem;
    cursor: pointer;
}

.mega-menu-item:hover {
    background-color: #F5F1E8;
    color: #1B7F6E;
}

/* --- Animação Título Letra por Letra --- */

.wave-text-container {
    opacity: 1 !important; 
    transform: none !important;
    line-height: 1.3em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}


/* NOVO: Estilo para o container da PALAVRA */
.wave-word {
    display: inline-block; /* Faz a palavra ficar junta */
}

/* NOVO: Estilo para o container do ESPAÇO */
.wave-space {
    display: inline-block; /* Permite que fique na linha */
    white-space: pre-wrap; /* ESSENCIAL: Preserva os espaços múltiplos */
}


/* Seletor modificado para animar a LETRA (dentro da palavra) */
.wave-word > span {
    display: inline-block; /* ESSENCIAL: Permite a animação 'transform' */
    opacity: 0;
    transform: translateY(20px); /* Efeito "forte" */
    animation: fadeInWave 0.3s ease-out forwards;
    will-change: transform, opacity;
    /* white-space: pre-wrap; REMOVIDO DAQUI */
}

@keyframes fadeInWave {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- NOVOS ESTILOS: Seção de Serviços Interativa (Layout Imagem + Card) ---
*/

/* Navegação da Esquerda (Títulos Clicáveis) */
.service-nav-item {
    /* Remove o estilo de 'caixa' anterior */
    padding: 0.1rem 0; /* Reduzido de 0.5rem (8px) para 1.6px */
    margin-bottom: 0.25rem; /* Reduzido de 0.5rem (8px) para 4px */
    cursor: pointer;
    transition: all 0.3s ease-out;
    border-left: 4px solid transparent; /* Mantém para alinhamento, mas transparente */
    position: relative;
}

.service-nav-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 2.25rem; /* 36px (text-4xl) */
    line-height: 1.2; /* Reduzido de 2.5rem (40px) para ser mais compacto */
    font-weight: 500; /* Médio (como "Business Partners" na ref) */
    color: #A0AEC0; /* Cinza claro (tailwind gray-400) */
    transition: all 0.3s ease-out;
    display: inline-block; /* Para o padding-bottom funcionar */
    padding-bottom: 0.25rem; /* Espaço para o sublinhado */
    
    /* MUDANÇA 1: Remover a borda e adicionar posição relativa */
    border-bottom: 2px solid transparent; /* Removido */
    position: relative; /* Necessário para o pseudo-elemento ::after */
}

/* MUDANÇA 2: Adicionar o pseudo-elemento para o sublinhado animado */
.service-nav-title::after {
    content: '';
    position: absolute;
    bottom: 0; /* Alinha no fundo do padding-bottom */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1B7F6E; /* Cor verde */
    
    /* Configuração da animação */
    transform: scaleX(0); /* Começa com largura 0 */
    transform-origin: left; /* Garante que a animação cresça da esquerda */
    
    /* AJUSTE DE VELOCIDADE: Aumentado de 0.4s para 0.7s */
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); /* Transição suave */
}

.service-nav-number {
    font-family: 'Lora', serif;
    font-size: 0.875rem; /* 14px (text-sm) */
    line-height: 1.25rem;
    font-weight: 700;
    color: #A0AEC0; /* Cinza claro */
    margin-left: 0.5rem;
    display: inline-block;
    vertical-align: super; /* Alinha o número no topo */
    transition: all 0.3s ease-out;
}

/* Estado Hover (Não ativo) */
.service-nav-item:not(.active):hover .service-nav-title {
    color: #718096; /* Cinza um pouco mais escuro (gray-500) */
}

.service-nav-item.active .service-nav-title {
    color: #1B7F6E; /* Verde */
    font-weight: 700; /* Bold */
    
    /* MUDANÇA 3: Remover a borda antiga */
    /* border-bottom-color: #1B7F6E; */ /* Não é mais necessário */
}

/* MUDANÇA 4: Ativar a animação do pseudo-elemento */
.service-nav-item.active .service-nav-title::after {
    transform: scaleX(1); /* Anima a largura para 100% */
}

.service-nav-item.active .service-nav-number {
    color: #1B7F6E; /* Verde */
}


/* Imagens de Fundo (Direita) */
.service-bg-image {
    position: absolute;
    /* AJUSTE: Mudei top de 0 para 8rem (aproximadamente 128px) */
    top: 8rem; 
    right: 0;
    /* A imagem não ocupa 100% da largura, permitindo o card "vazar" */
    width: 90%; 
    /* AJUSTE: Mudei height de 100% para 85% */
    height: 85%;
    object-fit: cover;
    border-radius: 0.5rem; /* Arredondado como no exemplo */
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s;
    z-index: 0; /* Fica atrás do card */
}

.service-bg-image.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 1; /* Sobe para ficar visível */
}


/* Cards de Conteúdo Sobrepostos (Direita) */
.service-content-card {
    /* Posição: Absoluto ao container da coluna direita */
    position: absolute; 
    z-index: 10; /* Fica na frente da imagem */
    
    /* Alinhado ao canto inferior esquerdo */
    bottom: 2.5rem; /* 40px - Sobe um pouco do fundo */
    left: 0; /* Começa na borda esquerda da coluna */

    /* Esconde por padrão */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s;
    transition-delay: 0.1s; /* Leve atraso para o texto entrar */

    /* Estilo do Card */
    width: 100%;
    max-width: 460px; /* Limita a largura do card, como no exemplo */
    padding: 2rem; /* 32px */
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
    
    /* Oculta os inativos */
    display: none;
}

.service-content-card.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: block; /* Mostra o ativo */
    z-index: 10;
}

.service-content-card h4 {
    font-family: 'Lora', serif;
}
.service-content-card p {
    font-family: 'DM Sans', sans-serif;
}


/* Temas de Cores para os Cards */
/* NOVAS CORES APLICADAS */

/* Tema 1 (Verde Esmeralda) */
.service-card-theme-1 {
    background-color: #007A5E; /* Verde Esmeralda */
    color: #F5F1E8;
}
.service-card-theme-1 h4 { color: #FFFFFF; }
.service-card-theme-1 p { color: #F5F1E8; }

/* Tema 2 (Marrom Terra) */
.service-card-theme-2 {
    background-color: #8B4513; /* Marrom Terra */
    color: #FFFFFF;
}
.service-card-theme-2 h4 { color: #FFFFFF; }
.service-card-theme-2 p { color: #F5F1E8; }

/* Tema 3 (Azul Ciano) */
.service-card-theme-3 {
    background-color: #00CED1; /* Azul Ciano */
    color: #4A4A4A; /* Cinza escuro para texto */
}
.service-card-theme-3 h4 { color: #4A4A4A; } /* Título escuro para contraste */
.service-card-theme-3 p { color: #4A4A4A; }

/* Tema 4 (Azul Marinho) */
.service-card-theme-4 {
    background-color: #000080; /* Azul Marinho */
    color: #F5F1E8;
}
.service-card-theme-4 h4 { color: #FFFFFF; }
.service-card-theme-4 p { color: #F5F1E8; }

/* Tema 5 (Azul Oceano) */
.service-card-theme-5 {
    background-color: #006994; /* Azul Oceano */
    color: #FFFFFF;
}
.service-card-theme-5 h4 { color: #FFFFFF; }
.service-card-theme-5 p { color: #F5F1E8; }

/* Tema 6 (Cinza Chumbo) */
.service-card-theme-6 {
    background-color: #36454F; /* Cinza Chumbo */
    color: #F5F1E8;
}
.service-card-theme-6 h4 { color: #FFFFFF; }
.service-card-theme-6 p { color: #F5F1E8; }

/* Tema 7 (Azul Elétrico) */
.service-card-theme-7 {
    background-color: #007BFF; /* Azul Elétrico */
    color: #FFFFFF;
}
.service-card-theme-7 h4 { color: #FFFFFF; }
.service-card-theme-7 p { color: #F5F1E8; }

/* Tema 8 (Verde Floresta) */
.service-card-theme-8 {
    background-color: #228B22; /* Verde Floresta */
    color: #FFFFFF;
}
.service-card-theme-8 h4 { color: #FFFFFF; }
.service-card-theme-8 p { color: #F5F1E8; }

/* Tema 9 (Verde Folha) */
.service-card-theme-9 {
    background-color: #4CAF50; /* Verde Folha */
    color: #FFFFFF;
}
.service-card-theme-9 h4 { color: #FFFFFF; }
.service-card-theme-9 p { color: #F5F1E8; }