/* =========================================================
   CARTÃO MIALICH — animação dos dois cartões
   Só é carregado em cartao.php. Cada cartão flutua e pulsa em ritmos diferentes, sem salto na repetição,
   e o círculo azul atrás respira devagar. Todas as regras ficam dentro de .cartao-imagem, então nada mais
   no site é afetado. Pausa com "Pausar animações" (acessibilidade), com movimento reduzido no sistema
   e quando a aba ou a área não está visível (cartao-animado.js).
   ========================================================= */

/* O círculo e os anéis agora fazem parte da animação (substituem os do style.css) */
.cartao-imagem::before, .cartao-imagem::after { content: none; }

/* As imagens têm margem transparente em volta do cartão, então a composição passa um pouco da coluna (sem capturar cliques) */
.cartao-imagem .cartao-animado { position: relative; z-index: 1; width: min(128%, 640px); aspect-ratio: 1.35; pointer-events: none; }
.cartao-imagem .cartao-animado img { position: static; display: block; width: 100%; max-width: none; height: auto; animation: none; user-select: none; -webkit-user-drag: none; }

.ca-cartao { position: absolute; }
.ca-tras { z-index: 2; width: 68%; left: 1%; top: 8%; }
.ca-frente { z-index: 3; width: 80%; right: 0; top: 12%; }
.ca-tras img { filter: drop-shadow(0 10px 8px rgba(9, 26, 58, .2)); }
.ca-frente img { filter: drop-shadow(0 5px 3px rgba(9, 26, 58, .18)) drop-shadow(0 20px 13px rgba(9, 26, 58, .3)); }

/* Círculo azul (base #4470C3) com dois contornos finos, pulsando de leve */
.ca-circulo {
    position: absolute; z-index: 0; left: 50%; top: 48%; width: 78%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    background:
        radial-gradient(ellipse at 28% 18%, rgba(180, 208, 255, .36), transparent 58%),
        linear-gradient(145deg, #5783d0 0%, #4470c3 42%, #294f98 100%);
    box-shadow: inset 0 1px 1px rgba(235, 245, 255, .55), inset 0 -12px 32px rgba(15, 42, 99, .12);
    animation: ca-pulso-circulo 5s ease-in-out infinite;
}
.ca-circulo::before, .ca-circulo::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.ca-circulo::before { inset: -6%; border: 1px solid rgba(255, 255, 255, .22); }
.ca-circulo::after { inset: -12%; border: 1px solid rgba(255, 255, 255, .12); }

.ca-flut, .ca-pulso { will-change: transform; }
.ca-tras .ca-flut { animation: ca-flutuar-tras 8s ease-in-out infinite; }
.ca-tras .ca-pulso { animation: ca-pulsar-tras 6s ease-in-out infinite; }
.ca-frente .ca-flut { animation: ca-flutuar-frente 6.8s ease-in-out -1.7s infinite; }
.ca-frente .ca-pulso { animation: ca-pulsar-frente 4.6s ease-in-out -1.1s infinite; }

@keyframes ca-pulso-circulo { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.025); } }
@keyframes ca-flutuar-tras { 0%, 100% { transform: translateY(5px) rotate(-.6deg); } 50% { transform: translateY(-9px) rotate(.6deg); } }
@keyframes ca-pulsar-tras { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes ca-flutuar-frente { 0%, 100% { transform: translate(-3px, -7px) rotate(-.8deg); } 50% { transform: translate(4px, 8px) rotate(.8deg); } }
@keyframes ca-pulsar-frente { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

.cartao-animado.is-paused .ca-circulo,
.cartao-animado.is-paused .ca-flut,
.cartao-animado.is-paused .ca-pulso { animation-play-state: paused; }

/* Alto contraste: o modo pinta todo bloco de preto; os contêineres dos cartões precisam continuar transparentes
   (senão o da frente tapa o de trás). O círculo fica preto com os contornos em branco. */
html.a11y-contraste .cartao-animado .ca-cartao,
html.a11y-contraste .cartao-animado .ca-flut,
html.a11y-contraste .cartao-animado .ca-pulso { background-color: transparent !important; }

@media (max-width: 860px) {
    .cartao-imagem .cartao-animado { width: min(112%, 460px); }
}
@media (prefers-reduced-motion: reduce) {
    .ca-flut, .ca-pulso { animation: none; }
    .ca-circulo { animation: none; transform: translate(-50%, -50%); }
}

/* =========================================================
   HOME — bloco "Clube e Cartão": a mesma composição animada, em tamanho de bloco.
   Tudo fica dentro de .vantagem-cartao, então nada mais na Home é afetado.
   ========================================================= */
.vantagem-cartao .cartao-animado { position: relative; z-index: 1; flex: none; width: min(52%, 380px); aspect-ratio: 1.35; pointer-events: none; }
.vantagem-cartao .cartao-animado img { position: static; display: block; width: 100%; max-width: none; max-height: none; height: auto; animation: none; user-select: none; -webkit-user-drag: none; }
.vantagem-cartao .ca-tras img { filter: drop-shadow(0 10px 8px rgba(9, 26, 58, .2)); }
.vantagem-cartao .ca-frente img { filter: drop-shadow(0 5px 3px rgba(9, 26, 58, .18)) drop-shadow(0 20px 13px rgba(9, 26, 58, .3)); }
@media (max-width: 560px) {
    .vantagem-cartao .cartao-animado { width: min(88%, 340px); align-self: center; }
}
/* Títulos dos dois blocos um pouco menores (e iguais entre si): "Parcelamento" cabe ao lado da composição animada */
.vantagem h2 { font-size: clamp(28px, 2.5vw, 40px); }
.vantagem-cartao .cartao-animado { width: min(44%, 360px); }
@media (max-width: 560px) {
    .vantagem-cartao .cartao-animado { width: min(88%, 340px); }
}