/* Catshroom Store — cartões de estado com o mascote (cs-cartao): sucesso, erro, falha, 404, arquivo pronto, link expirado, pedido enviado.
   Só loja; o Hub não usa. Marcação pelo helper cartao.js (CsCartao.html). Doc: docs/design-system/components/Cartao/README.md */
.cs-cartao { --c-fundo: #F0ECFD; --c-tinta: #171717; --c-etq: #FFD52A; width: min(360px, 100%); margin: 0 auto; box-sizing: border-box; background: var(--c-fundo); color: var(--c-tinta);
  border: 4px solid var(--c-tinta); border-radius: 36px; box-shadow: 8px 8px 0 var(--c-tinta); padding: 22px 24px 24px; text-align: center; }
.cs-cartao__palco { position: relative; width: 88%; margin: 0 auto; }
.cs-cartao__arte { position: relative; display: block; width: 100%; height: auto; }
.cs-cartao--nuvem .cs-cartao__palco::before { content: ""; position: absolute; left: -12%; top: 6%; width: 124%; height: 96%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 600' preserveAspectRatio='none'%3E%3Cg transform='translate(0 0)'%3E%3Cg fill='%23E6DAFB'%3E%3Ccircle cx='170' cy='300' r='150'/%3E%3Ccircle cx='320' cy='260' r='220'/%3E%3Ccircle cx='470' cy='300' r='150'/%3E%3Ccircle cx='330' cy='380' r='170'/%3E%3C/g%3E%3Cg fill='%23D2BEF6'%3E%3Ccircle cx='170' cy='300' r='120'/%3E%3Ccircle cx='320' cy='260' r='190'/%3E%3Ccircle cx='470' cy='300' r='120'/%3E%3Ccircle cx='330' cy='380' r='140'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.cs-cartao__titulo { position: relative; z-index: 2; margin: -22px 0 0; display: inline-block; max-width: 100%; font-family: "Archivo Black", var(--font-display, sans-serif); font-weight: 400; font-size: 24px; line-height: 1.2;
  background: var(--c-etq); color: var(--c-tinta); border: 4px solid var(--c-tinta); border-radius: 16px; padding: 6px 18px; box-shadow: 4px 4px 0 var(--c-tinta); overflow-wrap: anywhere; }
.cs-cartao__texto { margin: 16px 0 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.cs-cartao__texto b { font-weight: 800; }
.cs-cartao__caixa { margin: 18px 2px 0; background: #fff; color: var(--c-tinta); border: 3px solid var(--c-tinta); border-radius: 18px; box-shadow: 4px 4px 0 var(--c-tinta); padding: 14px 16px; font-size: 14.5px; line-height: 1.5; text-align: center; }
.cs-cartao__caixa p + p { margin-top: 10px; }
.cs-cartao__caixa b { font-weight: 800; overflow-wrap: anywhere; }
.cs-cartao__acoes { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* cor da etiqueta por tipo */
.cs-cartao--sucesso, .cs-cartao--pedido-enviado, .cs-cartao--arquivo-pronto { --c-etq: #73E5B5; }
.cs-cartao--erro, .cs-cartao--falha { --c-etq: #F04A37; }
.cs-cartao--link-expirado { --c-etq: #FF982B; }
.cs-cartao--nao-encontrada { --c-etq: #FFD52A; }
.cs-cartao--nao-encontrada .cs-cartao__titulo { white-space: nowrap; font-size: 20px; padding: 6px 14px; }
@media (max-width: 380px) { .cs-cartao { padding: 16px 16px 18px; border-radius: 28px; } .cs-cartao__titulo { font-size: 20px; } .cs-cartao--nao-encontrada .cs-cartao__titulo { font-size: 17px; white-space: normal; } }

/* falha: glitch a cada 10 s (rajada de ~1 s: arte em fatias com divisão de cor + título tremendo) */
.cs-cartao__gl { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; pointer-events: none; }
.cs-cartao__gl--a { filter: hue-rotate(95deg) saturate(2.4); }
.cs-cartao__gl--b { filter: hue-rotate(-95deg) saturate(2.4); }
@media (prefers-reduced-motion: no-preference) {
  .cs-cartao--falha .cs-cartao__arte { animation: cs-cartao-gl-main 10s steps(1, end) infinite; }
  .cs-cartao--falha .cs-cartao__gl--a { animation: cs-cartao-gl-a 10s steps(1, end) infinite; }
  .cs-cartao--falha .cs-cartao__gl--b { animation: cs-cartao-gl-b 10s steps(1, end) infinite; }
  .cs-cartao--falha .cs-cartao__titulo { animation: cs-cartao-gl-t 10s steps(1, end) infinite; }
}
@keyframes cs-cartao-gl-main { 0%, 3.24%, 12.6%, 100% { transform: none; } 3.6% { transform: translateX(-5px); } 4.68% { transform: translateX(6px) skewX(-3deg); } 5.76% { transform: translateX(-3px); } 6.84% { transform: translateX(4px) skewX(2deg); } 7.92% { transform: translateX(-6px); } 9% { transform: translateX(2px); } 10.08% { transform: translateX(-4px) skewX(-2deg); } 11.16% { transform: translateX(5px); } 11.88% { transform: none; } }
@keyframes cs-cartao-gl-a { 0%, 3.24%, 12.6%, 100% { opacity: 0; } 3.6% { opacity: .9; clip-path: inset(10% 0 74% 0); transform: translateX(-12px); } 4.68% { opacity: .9; clip-path: inset(44% 0 36% 0); transform: translateX(10px); } 5.76% { opacity: .9; clip-path: inset(70% 0 10% 0); transform: translateX(-8px); } 6.84% { opacity: .9; clip-path: inset(22% 0 58% 0); transform: translateX(11px); } 7.92% { opacity: .9; clip-path: inset(56% 0 24% 0); transform: translateX(-10px); } 9% { opacity: .9; clip-path: inset(80% 0 4% 0); transform: translateX(7px); } 10.08% { opacity: .9; clip-path: inset(34% 0 48% 0); transform: translateX(-9px); } 11.16% { opacity: .9; clip-path: inset(6% 0 80% 0); transform: translateX(8px); } 11.88% { opacity: 0; } }
@keyframes cs-cartao-gl-b { 0%, 3.96%, 12.96%, 100% { opacity: 0; } 4.32% { opacity: .9; clip-path: inset(28% 0 54% 0); transform: translateX(12px); } 5.4% { opacity: .9; clip-path: inset(62% 0 18% 0); transform: translateX(-10px); } 6.48% { opacity: .9; clip-path: inset(4% 0 86% 0); transform: translateX(8px); } 7.56% { opacity: .9; clip-path: inset(50% 0 30% 0); transform: translateX(-12px); } 8.64% { opacity: .9; clip-path: inset(16% 0 66% 0); transform: translateX(9px); } 9.72% { opacity: .9; clip-path: inset(74% 0 8% 0); transform: translateX(-7px); } 10.8% { opacity: .9; clip-path: inset(38% 0 44% 0); transform: translateX(10px); } 11.88% { opacity: .9; clip-path: inset(12% 0 72% 0); transform: translateX(-8px); } 12.6% { opacity: 0; } }
@keyframes cs-cartao-gl-t { 0%, 3.24%, 12.6%, 100% { transform: none; text-shadow: 1px 0 rgba(0, 229, 255, .55), -1px 0 rgba(255, 45, 120, .55); } 3.6% { transform: translateX(-5px); text-shadow: 4px 0 #00e5ff, -4px 0 #ff2d78; } 4.68% { transform: translateX(6px) skewX(-6deg); text-shadow: -5px 0 #00e5ff, 5px 0 #ff2d78; } 5.76% { transform: translateX(-3px); text-shadow: 3px 0 #00e5ff, -3px 0 #ff2d78; } 6.84% { transform: translateX(4px) skewX(4deg); text-shadow: -4px 0 #00e5ff, 4px 0 #ff2d78; } 7.92% { transform: translateX(-6px); text-shadow: 5px 0 #00e5ff, -5px 0 #ff2d78; } 9% { transform: translateX(2px); text-shadow: -3px 0 #00e5ff, 3px 0 #ff2d78; } 10.08% { transform: translateX(-4px) skewX(-4deg); text-shadow: 4px 0 #00e5ff, -4px 0 #ff2d78; } 11.16% { transform: translateX(5px); text-shadow: -4px 0 #00e5ff, 4px 0 #ff2d78; } 11.88% { transform: none; text-shadow: 1px 0 rgba(0, 229, 255, .55), -1px 0 rgba(255, 45, 120, .55); } }