/* ==========================================
   PALETA DE CORES - INSTITUTO REVIVER
============================================= */
:root {
    --cor-primaria: #4b3124;    /* Marrom escuro da tipografia (REviver) */
    --cor-secundaria: #688e40;  /* Verde das folhas (Botões e destaques) */
    --cor-destaque: #eeb927;    /* Amarelo da flor (Botões de Doação) */
    --cor-azul-suave: #a9c2d9;  /* Azul da flor (Detalhes secundários) */
    --cor-fundo-claro: #fdfaf6; /* Fundo off-white bem suave */
    --cor-texto: #332218;       /* Marrom quase preto para leitura confortável */
}

/* ==========================================
   CONFIGURAÇÕES GLOBAIS E RESPONSIVIDADE
============================================= */
body {
    background-color: var(--cor-fundo-claro);
    color: var(--cor-texto);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Regra de Ouro: Imagens e Mídias ocupando 100% do container */
img, .img-fluid, video, iframe { 
    width: 100%; 
    height: auto; 
    object-fit: cover; 
}

/* ==========================================
   COMPONENTES PERSONALIZADOS
============================================= */
/* Botões Principais (Verde) */
.btn-primary-custom {
    background-color: var(--cor-secundaria);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}
.btn-primary-custom:hover {
    background-color: #557534;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(104, 142, 64, 0.3);
}

/* Botões de Doação (Amarelo) */
.btn-doacao {
    background-color: var(--cor-destaque);
    color: var(--cor-primaria);
    border: none;
    transition: all 0.3s ease;
}
.btn-doacao:hover {
    background-color: #dcb024;
    color: var(--cor-primaria);
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(238, 185, 39, 0.3);
}

/* Cards Estilizados */
.card-custom { 
    background-color: #fff; 
    border: 1px solid rgba(75, 49, 36, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(75, 49, 36, 0.1) !important;
}

/* Títulos usando a cor da logo */
.text-primario {
    color: var(--cor-primaria) !important;
}
.text-secundario {
    color: var(--cor-secundaria) !important;
}

/* ==========================================
   ANIMAÇÕES DE ENTRADA (Intersection Observer)
============================================= */
/* Movimento de baixo para cima (ideal para cards) */
.animar-surge {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Movimento da esquerda para a direita (ideal para títulos) */
.animar-esq {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Efeito de Zoom Suave (ideal para imagens e logos) */
.animar-zoom {
    opacity: 0;
    transform: scale(0.90);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

/* Classe ativada pelo JavaScript quando o elemento entra na tela */
.mostrar {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* Delays para elementos em cascata (ex: 3 cards lado a lado) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }