body {
    font-family: 'Montserrat', sans-serif;
}

/* Cores principais */
:root {
    --color-light-gray: #e4e6e8;
    --color-dark-blue: #1b1a54;
    --color-teal: #46baaf;
    /* Cores complementares */
    --color-dark-teal: #338b82;
    --color-lighter-blue: #2d2c7a;
    --color-lightest-gray: #f5f6f8;
}

/* Cores personalizadas e gradientes */
.bg-custom-dark-green { 
    background: linear-gradient(135deg, var(--color-dark-blue) 0%, var(--color-lighter-blue) 100%);
}

.bg-custom-coral { 
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-dark-teal) 100%);
}

.bg-custom-light-gray { 
    background: linear-gradient(135deg, var(--color-light-gray) 0%, var(--color-lightest-gray) 100%);
}

.bg-custom-medium-green { 
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-dark-teal) 100%);
}

/* Gradientes para cards */
.card-gradient {
    background: linear-gradient(135deg, white 0%, var(--color-light-gray) 100%);
    transition: all 0.3s ease;
}

.card-gradient:hover {
    background: linear-gradient(135deg, var(--color-light-gray) 0%, white 100%);
    transform: translateY(-5px);
}

/* Gradiente para o card em destaque */
.featured-card-gradient {
    background: linear-gradient(135deg, var(--color-dark-blue) 0%, var(--color-lighter-blue) 100%);
    transition: all 0.3s ease;
}

.featured-card-gradient:hover {
    background: linear-gradient(135deg, var(--color-lighter-blue) 0%, var(--color-dark-blue) 100%);
}

/* Gradiente para botões */
.button-gradient {
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-dark-teal) 100%);
    transition: background 0.3s ease;
}

.button-gradient:hover {
    background: linear-gradient(135deg, var(--color-dark-teal) 0%, var(--color-teal) 100%);
}

/* Efeito de overlay para o hero section */
.hero-gradient {
    background: linear-gradient(135deg, rgba(27, 26, 84, 0.95) 0%, rgba(27, 26, 84, 0.85) 100%);
}

/* Animações personalizadas */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

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

/* Adicionar classes de animação que estão faltando */
.animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
}

.animate-slideUp {
    animation: slideUp 0.5s ease-out;
}

.animate-scaleIn {
    animation: scaleIn 0.3s ease-out;
}

/* Adicionar classe para o efeito shine no botão */
.button-shine {
    position: relative;
    overflow: hidden;
}

.button-shine:after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.3) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    to {
        transform: rotate(45deg) translate(100%, 100%);
    }
}

/* Adicionar ao final do arquivo */
.group:hover .group-hover\:h-auto {
    height: auto;
}

.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.group:hover .group-hover\:mt-4 {
    margin-top: 1rem;
}

.group:hover .group-hover\:rotate-180 {
    transform: rotate(180deg);
}

/* Melhorar a transição */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Aspect ratio para vídeo */
.aspect-w-16 {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}

.aspect-w-16 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Animação suave para o vídeo */
video {
    transition: all 0.3s ease-in-out;
}

video:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Remova estas classes se não estiverem sendo usadas em outro lugar */
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-1 {
    gap: 0.25rem;
}

.w-3 {
    width: 0.75rem;
}

.h-3 {
    height: 0.75rem;
}

/* Atualize estas classes no seu HTML */
/* Para textos que usavam text-custom-dark-green */
.text-dark-blue {
    color: #1b1a54;
}

/* Para textos que usavam text-custom-coral */
.text-teal {
    color: #46baaf;
}

/* Para fundos que usavam bg-custom-dark-green */
.bg-dark-blue {
    background-color: #1b1a54;
}

/* Para bordas que usavam border-custom-dark-green */
.border-dark-blue {
    border-color: #1b1a54;
}