/* Classe base para o banner */
.banner-amazon-animado {
  display: inline-block; /* Importante para animações de transformação */
  max-width: 100%;       /* Mantém responsivo */
  height: auto;
  transition: transform 0.3s ease; /* Transição suave para hover */
}

/* --- Opção 1: Pulso Suave (Animação Infinita) --- */
/* Chame essa classe no seu HTML: "banner-amazon-animado pulse-slow" */
@keyframes pulse-slow {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.pulse-slow {
  animation: pulse-slow 3s infinite ease-in-out;
}

/* --- Opção 2: Brilho Rápido (Animação Infinita) --- */
/* Chame essa classe: "banner-amazon-animado shine-flash" */
@keyframes shine-flash {
  0% { opacity: 1; filter: brightness(1); }
  10% { opacity: 0.9; filter: brightness(1.3); } /* Brilha rapidinho */
  20% { opacity: 1; filter: brightness(1); }
  100% { opacity: 1; filter: brightness(1); }
}

.shine-flash {
  animation: shine-flash 4s infinite ease-in-out;
}

/* --- Opção 3: Balanço Leve (Hover - quando o mouse passa) --- */
/* Chame essa classe: "banner-amazon-animado tilt-hover" */
.tilt-hover:hover {
  transform: rotate(3deg) scale(1.05);
}

/* --- Opção 4: "Chacoalhada" de Atenção (Gatilha a cada X segundos) --- */
/* Chame essa classe: "banner-amazon-animado attention-shake" */
@keyframes attention-shake {
  0%, 90% { transform: translate(0, 0); }
  91%, 95%, 99% { transform: translate(-3px, 0); }
  93%, 97% { transform: translate(3px, 0); }
}

.attention-shake {
  animation: attention-shake 8s infinite ease-in-out; /* Fica parado 90% do tempo */
}

/* --- Estilo do Botão Super Chamativo --- */
.btn-cta-amazon {
    background: linear-gradient(135deg, #ff9900 0%, #ffcc00 100%); /* Gradiente Amarelo Amazon */
    color: #111 !important; /* Texto escuro para alto contraste */
    border: none;
    font-weight: 700; /* Super Negrito */
    text-transform: uppercase; /* Maiúsculas para dar urgência */
    letter-spacing: 1px; /* Espaçamento entre letras para leitura */
    
    /* Sombras para dar profundidade (efeito 3D) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    
    /* Transição suave para todos os efeitos */
    transition: all 0.3s ease-in-out;
    
    /* Aplica a animação pulsante que criamos antes */
    animation: pulse-slow 3s infinite ease-in-out;
}

/* --- Efeito ao passar o mouse (Hover) --- */
.btn-cta-amazon:hover {
    background: linear-gradient(135deg, #ffcc00 0%, #ff9900 100%); /* Inverte o gradiente */
    transform: translateY(-3px) scale(1.02); /* Sobe um pouquinho e cresce */
    
    /* Sombra mais forte no hover */
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
    
    /* Brilho extra */
    filter: brightness(1.1);
}

/* --- Efeito ao clicar (Active) --- */
.btn-cta-amazon:active {
    transform: translateY(-1px) scale(0.98); /* Dá a sensação de clique */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ---