/* Animação de entrada suave vinda da esquerda */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animação de pulsação mais discreta para o botão */
@keyframes pulseButtonSmall {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

.sobre-figura-chamada {
    display: none; 
    position: absolute; 
    top: 5%; 
    left: 2%; /* Posicionada à esquerda */
    z-index: 20; 
    width: auto; /* Largura automática para ser retangular */
    max-width: 450px; /* Limite para não ocupar a tela toda */
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(8px); 
    border-radius: 12px; 
    padding: 10px 20px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
    border-top: 4px solid #5687B7; /* Detalhe no topo em vez da lateral */
    animation: slideInLeft 0.8s ease-out forwards;
}

.conteudo-horizontal {
    display: flex; 
    align-items: center; 
    gap: 15px; /* Espaçamento entre os elementos internos */
}

.logo-reduzido-img {
    width: 35px; 
    height: auto; 
    border-radius: 4px;
    background: #5687B7;
    padding: 2px;
}

.frase-chamada {
    color: #333; 
    font-size: 0.95rem; 
    font-weight: 500; 
    margin: 0;
    line-height: 1.2;
    flex: 1; /* Faz a frase ocupar o espaço central */
}

.btn-chamativo {
    background-color: #5687B7 !important; 
    color: white !important;
    border-radius: 8px; 
    font-weight: bold; 
    font-size: 0.85rem;
    padding: 8px 15px;
    text-decoration: none;
    transition: all 0.3s;
    animation: pulseButtonSmall 2s infinite;
    white-space: nowrap; /* Impede que o texto do botão quebre linha */
}

.btn-chamativo:hover {
    background-color: #456d94 !important;
    box-shadow: 0 4px 12px rgba(86, 135, 183, 0.4);
}

/* Botão Extra Chamativo com Efeito 3D */
/* Botão Parceiro - Estilo Sofisticado e Padronizado */
.btn-parceiro-chamativo {
    background-color: #5687B7 !important; /* Azul padrão do Instituto */
    color: #ffffff !important;
    font-weight: 700 !important; /* Negrito elegante */
    border-radius: 50px; /* Bordas arredondadas (estilo pílula) são mais modernas e suaves */
    padding: 12px 30px;
    border: 2px solid transparent !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(86, 135, 183, 0.2); /* Sombra azulada bem sutil */
    cursor: pointer;
    text-transform: none; /* Mantém a escrita natural, menos agressiva */
    
    /* Contorno de texto quase imperceptível para dar nitidez */
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-parceiro-chamativo:hover {
    background-color: #456d94 !important;
    transform: translateY(-3px); /* Flutua levemente */
    box-shadow: 0 8px 25px rgba(86, 135, 183, 0.4);
    color: #ffffff !important;
}

.btn-parceiro-chamativo:active {
    transform: translateY(0);
}

/* Animação de pulsação para o botão da Loja Virtual (mais perceptível
   que a do btn-chamativo, pois este precisa se destacar no topo do site) */
@keyframes pulseButtonLoja {
    0% { transform: scale(1); box-shadow: 0 4px 15px rgba(244, 162, 97, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 6px 22px rgba(244, 162, 97, 0.7); }
    100% { transform: scale(1); box-shadow: 0 4px 15px rgba(244, 162, 97, 0.5); }
}

/* Botão "Loja Virtual" — usa tom quente (laranja/âmbar) de propósito,
   destoando do azul institucional, para chamar atenção como CTA de compra */
.btn-loja-virtual {
    background: linear-gradient(135deg, #F4A261 0%, #E76F51 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1rem;
    border-radius: 50px;
    padding: 14px 32px !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: pulseButtonLoja 2.2s infinite;
    transition: transform 0.25s ease;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
}

.btn-loja-virtual:hover {
    transform: translateY(-3px) scale(1.03);
    color: #ffffff !important;
}

/* Botão "Eventos" em destaque (PLANO-ajustes-itea-producao-01, R4.5): azul do Instituto, sem pulsar, para não competir com a doação */
.btn-eventos {
    background: linear-gradient(135deg, #003366 0%, #1F6FB2 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem;
    border-radius: 50px;
    min-height: 44px;
    padding: 10px 24px !important;
    border: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.25s ease;
}

.btn-eventos:hover {
    transform: translateY(-2px);
    color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
    .btn-eventos, .btn-eventos:hover { transition: none; transform: none; }
}

/* Selo "Tecnologia DalkTech" no rodapé do portal (mesmo visual do rodapé da Venda Fiel) */
.selo-dalktech {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: .35rem .9rem;
    color: #ffffff !important;
    font-size: .8rem;
    font-weight: 600;
}

.selo-dalktech img {
    height: 22px;
    width: auto;
    background: #ffffff;
    border-radius: 6px;
    padding: 2px 4px;
}

/*ZOOM para figura*/
/* Container que esconde o que vazar da imagem ao dar zoom */
/* No Desktop: Zoom ao passar o mouse */
.lupa-item:hover img {
    transform: scale(1.6); /* Aumenta a imagem em 60% */
}

/* No Mobile: Zoom ao tocar/segurar */
.lupa-item:active img {
    transform: scale(1.6);
}

/* Garante que o cursor mude para indicar que há zoom */
.lupa-item {
    touch-action: manipulation; /* Melhora a resposta ao toque no celular */
}