/* Cores baseadas no logo: tom de azul-petróleo (Teal) e branco */
:root {
    --color-primary: #008080;
    /* Teal / Azul Petróleo */
    --color-secondary: #00a8a8;
    --color-dark: #1f2937;
}

.bg-primary {
    background-color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary);
}

.border-primary {
    border-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

/* Estilos do cabeçalho fixo */
.fixed-header {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    z-index: 1000;
}

/* Animação para os itens do diferencial e clientes */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Animação CSS para entrada (Fade In Up) */
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* Estilo MELHORADO para as logos na seção de clientes */
.client-logo {
    max-height: 120px;
    /* Aumentado para 120px */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.client-logo:hover {
    filter: grayscale(0%);
    /* Mostra cor original no hover */
}

/* Estilos do Carrossel */
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
    /* Cada item ocupa 100% do container do carrossel */
    display: flex;
    flex-wrap: wrap;
    /* Permite que os cards quebrem no mobile */
    gap: 24px;
}

.client-card {
    width: calc(33.333% - 16px);
    /* 3 cards por linha no desktop (gap de 16px) */
    flex-grow: 1;
}

@media (max-width: 768px) {
    .client-card {
        width: 100%;
        /* 1 card por linha no mobile */
    }
}

/* Scroll Suave */
html {
    scroll-behavior: smooth;
}

/* Estilo para a logo no header: AJUSTADO PARA UM TAMANHO IDEAL */
.header-logo {
    max-height: 70px;
    /* Altura ideal, equivalente a h-12 */
    width: auto;
    /* Mantém a proporção */
}

/* Estilo para o Footer (Rodapé final e limpo) */
.main-footer {
    background-color: #004d4d;
    /* Cor mais escura para contraste */
}

/* Video Hover Effect */
.video-container {
    position: relative;
    /* overflow: hidden; Removed to allow drop-shadow to be visible */
}

.video-container img {
    transition: opacity 0.3s ease;
    display: block;
    /* Removes bottom space */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    /* Ensures it's on top */
}

.video-container:hover img {
    opacity: 0;
}

.video-container:hover .video-overlay {
    opacity: 1;
}