:root {
    --cor-bege: #ffedc8;
    --cor-azul: #255EE8;
    --cor-laranja: #FE4A19;
    --tamanho-fonte: 100%;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    font-size: var(--tamanho-fonte);
}

body {
    /* Fundo bege e texto azul são as cores base do site.
       Usamos as variáveis (tokens) definidas no :root para manter tudo no mesmo padrão. */
    background-color: var(--cor-bege);
    color: var(--cor-azul);
}

/* Fonte decorativa (Londrina Solid) aplicada ao texto que é digitado na tela
   e em qualquer elemento marcado com a classe .font-destaque. */
#texto-digitacao,
.font-destaque {
    font-family: 'Londrina Solid', cursive;
    letter-spacing: 0.05em;
}

/* Garante que negrito (b/strong) fique sempre forte de verdade,
   mesmo quando o Tailwind tenta deixar o texto mais leve. */
b, strong {
    font-weight: 700 !important;
}

/* Palavras em negrito ficam azuis nas seções "Quem Somos" e na chamada final,
   como no design original. O texto vem do painel sem cor definida; aqui garantimos
   o azul em qualquer negrito dessas seções. Usa a variável de cor, então acompanha
   a cor escolhida no painel. */
[data-edit-key="missaoTexto"] strong,
[data-edit-key="ctaFinalTexto"] strong {
    color: var(--cor-azul);
}

/* Fonte dos títulos: usa a LosLana Niu (carregada via Typekit/Adobe).
   Se a Typekit não carregar, o navegador usa a próxima da lista como reserva. */
h1, h2, h3, h4, h5, h6 {
    font-family: 'loslana-niu', 'Londrina Solid', 'Inter', sans-serif;
}

/* Sombra escura por cima da imagem de topo (hero) para o texto branco
   ficar legível. Escurece mais à esquerda e vai ficando transparente à direita. */
.gradiente-hero {
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0.5) 50%, 
        rgba(0, 0, 0, 0) 100%
    );
}

/* Cursor que imita a barrinha "|" piscando no efeito de máquina de escrever. */
.cursor-digitacao::after {
    content: '|';
    display: inline-block;
    margin-left: 2px;
    font-weight: 100;
    opacity: 1;
}

.cursor-digitacao.piscando::after {
    animation: piscarCursor 0.8s step-end infinite;
}

@keyframes piscarCursor {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/* Quando o mouse passa por cima do card, a imagem dá um leve zoom.
   A "transition" deixa esse aumento suave em vez de instantâneo. */
.zoom-card .h-56 img {
    transition: transform 0.5s ease;
}

.zoom-card:hover .h-56 img {
    transform: scale(1.1);
}

/* Faz o elemento surgir suavemente (aparece subindo um pouquinho). */
.fade-in {
    animation: aparecerSuave 0.5s ease-in-out forwards;
}

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

/* Ajustes para telas pequenas (celular, até 640px de largura):
   diminui o título e deixa o degradê do topo mais escuro embaixo,
   onde costuma ficar o texto no celular. */
@media (max-width: 640px) {
    h1 {
        font-size: 2.5rem;
    }
    .gradiente-hero {
        background: linear-gradient(to top, 
            rgba(0, 0, 0, 0.95) 0%, 
            rgba(0, 0, 0, 0.7) 50%, 
            rgba(0, 0, 0, 0) 100%
        );
    }
}

/* Modo de alto contraste (acessibilidade): fundo preto, texto branco e
   destaques em amarelo, para quem tem baixa visão enxergar melhor.
   As imagens ficam em tons de cinza para não atrapalhar a leitura. */
.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}
.high-contrast * {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}
.high-contrast .text-asa-laranja, 
.high-contrast .text-asa-azul,
.high-contrast .text-asa-azulEscuro {
    color: #ffff00 !important;
}
.high-contrast .bg-asa-laranja,
.high-contrast .bg-asa-azul {
    background-color: #ffff00 !important;
    color: #000 !important;
}
.high-contrast img {
    filter: grayscale(100%) contrast(120%);
}

/* Faz o conteúdo "Saiba Mais" aparecer descendo de cima para baixo. */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-slide-down {
    animation: slideDown 0.4s ease-out forwards;
}

/* No celular (até 768px), o card de doação ganha borda laranja e sombra
   para chamar mais atenção e incentivar a doação. */
@media (max-width: 768px) {
    .card-destaque-mobile {
        border: 2px solid var(--cor-laranja);
        box-shadow: 0 20px 40px rgba(254, 118, 36, 0.15);
    }
}

/* Transição genérica e suave para qualquer mudança de estilo do elemento. */
.transition-all-custom {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Esconde a barra de rolagem na tela, mas continua sendo possível rolar
   (usado em listas que rolam para o lado). Cada linha cobre um navegador. */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* Internet Explorer e Edge antigo */
    scrollbar-width: none;     /* Firefox */
}
/* Dica visual de arrastar: move um ícone de um lado para o outro, em looping,
   sugerindo ao usuário que deslize o dedo na tela para ver mais conteúdo. */
@keyframes swipeHint { 0%, 100% { transform: translateX(-20%); opacity: 0.3; } 50% { transform: translateX(20%); opacity: 1; } } .animate-swipe-hint { animation: swipeHint 2s ease-in-out infinite; }