/* ETAPA 231: Cards personalizados (cards_lib.php).
   O mesmo markup sai do PHP (pagina publica) e do JS (previa do editor):
   .ccp > .ccp-face > .ccp-in > [imagem] + .ccp-txt

   Quem desenha o que (um pseudo-elemento para cada coisa):
     .ccp-face::before  brilho passando (efeito "brilho")
     .ccp-face::after   contorno de fora (linha simples/dupla, borda girando)
     .ccp-in::before    linhas decorativas do fundo
     .ccp-in::after     detalhe de dentro (linha dupla, tracejado, cantoneiras)
   Canto chanfrado e clip-path: sombra vira filter (box-shadow seria cortado)
   e o contorno vira um anel de clip-path (border sumiria nas diagonais). */

.ccp-secao { width: 100%; margin: 24px 0 6px; text-align: left; box-sizing: border-box; }
.ccp-secao *, .ccp-secao *::before, .ccp-secao *::after { box-sizing: border-box; }
.ccp-secao-tt {
    display: block; margin: 0 0 14px; text-align: center;
    font-size: .62rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--tb-muted, rgba(128, 128, 128, .8));
}
.ccp-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0 0 14px; }
.ccp-grade.ccp-col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ---------- caixa ---------- */
.ccp {
    --ccp-r: 12px; --ccp-ch: 16px;
    position: relative; display: block; isolation: isolate;
    border-radius: var(--ccp-r);
    color: var(--ccp-tx); text-decoration: none; text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ccp:visited, .ccp:hover { color: var(--ccp-tx); text-decoration: none; }
.ccp:focus-visible { outline: 2px solid var(--ccp-ln); outline-offset: 3px; }
.ccp-k-reto { --ccp-r: 0px; }
.ccp-k-suave { --ccp-r: 12px; }
.ccp-k-redondo { --ccp-r: 24px; }
.ccp-k-chanfro, .ccp-k-chanfro2 { --ccp-r: 0px; }

.ccp-t-normal { --ccp-pad: 18px 18px; --ccp-tt: 1.08rem; --ccp-sb: .85rem; --ccp-min: 0px; }
.ccp-t-compacto { --ccp-pad: 12px 14px; --ccp-tt: .95rem; --ccp-sb: .78rem; --ccp-min: 0px; }
.ccp-t-grande { --ccp-pad: 26px 22px; --ccp-tt: 1.4rem; --ccp-sb: .95rem; --ccp-min: 150px; }

.ccp-face {
    position: relative; display: block; height: 100%; min-height: var(--ccp-min);
    border-radius: var(--ccp-r); overflow: hidden;
}
.ccp-k-chanfro .ccp-face {
    clip-path: polygon(var(--ccp-ch) 0, calc(100% - var(--ccp-ch)) 0, 100% var(--ccp-ch), 100% calc(100% - var(--ccp-ch)), calc(100% - var(--ccp-ch)) 100%, var(--ccp-ch) 100%, 0 calc(100% - var(--ccp-ch)), 0 var(--ccp-ch));
}
.ccp-k-chanfro2 .ccp-face {
    clip-path: polygon(var(--ccp-ch) 0, 100% 0, 100% calc(100% - var(--ccp-ch)), calc(100% - var(--ccp-ch)) 100%, 0 100%, 0 var(--ccp-ch));
}

.ccp-in {
    position: relative; display: flex; flex-direction: column;
    height: 100%; min-height: inherit; border-radius: inherit;
}

/* ---------- fundo ---------- */
.ccp-f-cor .ccp-in { background: var(--ccp-c1); }
.ccp-f-gradiente .ccp-in { background: linear-gradient(135deg, var(--ccp-c1), var(--ccp-c2)); }
.ccp-f-transparente .ccp-in { background: transparent; }
.ccp-f-vidro .ccp-in {
    background: rgba(255, 255, 255, .1);
    background: color-mix(in srgb, var(--ccp-c1) 24%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
}

/* ---------- imagem ---------- */
.ccp img { max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.ccp-bgimg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.ccp-veu { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .62)); }
.ccp-i-fundo .ccp-in { min-height: max(var(--ccp-min), 140px); justify-content: flex-end; }
.ccp-img { position: relative; z-index: 1; display: block; width: 100%; flex: 0 0 auto; }
.ccp-i-topo .ccp-img { aspect-ratio: 2 / 1; height: auto; object-fit: cover; }
.ccp-i-inteira .ccp-img { height: auto; }
.ccp-i-lateral .ccp-in { flex-direction: row; align-items: stretch; }
.ccp-i-lateral .ccp-img { width: 34%; max-width: 140px; min-height: 96px; object-fit: cover; }
/* dois por linha no celular nao cabem imagem ao lado: ela sobe para o topo */
.ccp-col-2 .ccp-i-lateral .ccp-in { flex-direction: column; }
.ccp-col-2 .ccp-i-lateral .ccp-img { width: 100%; max-width: none; min-height: 0; aspect-ratio: 16 / 9; }

/* ---------- texto ---------- */
.ccp-txt {
    position: relative; z-index: 2; flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: var(--ccp-pad);
}
.ccp-a-centro .ccp-txt { align-items: center; text-align: center; }
.ccp-tt {
    display: block; color: inherit; font-size: var(--ccp-tt); font-weight: 800;
    line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.ccp-sub { display: block; font-size: var(--ccp-sb); line-height: 1.45; opacity: .88; overflow-wrap: anywhere; }
.ccp-btn {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    margin-top: 8px; padding: 7px 14px; border-radius: 999px; max-width: 100%;
    background: var(--ccp-ln); color: var(--ccp-bt);
    font-size: .78rem; font-weight: 800; line-height: 1.2; white-space: nowrap;
}
.ccp-col-2 .ccp-btn { padding: 6px 10px; font-size: .72rem; }
.ccp-a-centro .ccp-btn { align-self: center; }
.ccp-k-reto .ccp-btn, .ccp-k-chanfro .ccp-btn, .ccp-k-chanfro2 .ccp-btn { border-radius: 2px; }

/* ---------- linhas decorativas (vetor) ---------- */
.ccp-in::before { content: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; }
.ccp-l-diagonais .ccp-in::before {
    content: ""; opacity: .24;
    background: repeating-linear-gradient(135deg, var(--ccp-ln) 0 1px, transparent 1px 12px);
    -webkit-mask: linear-gradient(135deg, transparent 40%, #000); mask: linear-gradient(135deg, transparent 40%, #000);
}
.ccp-l-grade .ccp-in::before {
    content: ""; opacity: .16;
    background-image: linear-gradient(var(--ccp-ln) 1px, transparent 1px), linear-gradient(90deg, var(--ccp-ln) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask: radial-gradient(circle at 100% 0, #000, transparent 75%); mask: radial-gradient(circle at 100% 0, #000, transparent 75%);
}
.ccp-l-pontos .ccp-in::before {
    content: ""; opacity: .3;
    background: radial-gradient(var(--ccp-ln) 1.2px, transparent 1.7px) 0 0 / 14px 14px;
    -webkit-mask: linear-gradient(225deg, #000, transparent 70%); mask: linear-gradient(225deg, #000, transparent 70%);
}
.ccp-l-ondas .ccp-in::before {
    content: ""; opacity: .3; background: var(--ccp-ln);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M0 70 Q50 40 100 70 T200 70 T300 70 T400 70'/%3E%3Cpath d='M0 88 Q50 58 100 88 T200 88 T300 88 T400 88'/%3E%3Cpath d='M0 106 Q50 76 100 106 T200 106 T300 106 T400 106'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% auto no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M0 70 Q50 40 100 70 T200 70 T300 70 T400 70'/%3E%3Cpath d='M0 88 Q50 58 100 88 T200 88 T300 88 T400 88'/%3E%3Cpath d='M0 106 Q50 76 100 106 T200 106 T300 106 T400 106'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% auto no-repeat;
}
.ccp-l-circuito .ccp-in::before {
    content: ""; opacity: .34; background: var(--ccp-ln);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M160 24H112L96 40H60'/%3E%3Cpath d='M160 56H128L112 72V104L96 120H70'/%3E%3Cpath d='M160 88H144V136H118'/%3E%3Cpath d='M136 0V16L120 32'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='60' cy='40' r='4'/%3E%3Ccircle cx='70' cy='120' r='4'/%3E%3Ccircle cx='118' cy='136' r='4'/%3E%3Ccircle cx='120' cy='32' r='3'/%3E%3C/g%3E%3C/svg%3E") right top / min(55%, 170px) auto no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M160 24H112L96 40H60'/%3E%3Cpath d='M160 56H128L112 72V104L96 120H70'/%3E%3Cpath d='M160 88H144V136H118'/%3E%3Cpath d='M136 0V16L120 32'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='60' cy='40' r='4'/%3E%3Ccircle cx='70' cy='120' r='4'/%3E%3Ccircle cx='118' cy='136' r='4'/%3E%3Ccircle cx='120' cy='32' r='3'/%3E%3C/g%3E%3C/svg%3E") right top / min(55%, 170px) auto no-repeat;
}

/* ETAPA 232: estrelas de quatro pontas (recados de boas festas) */
.ccp-l-estrelas .ccp-in::before {
    content: ""; opacity: .4; background: var(--ccp-ln);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cg fill='black'%3E%3Cpath transform='translate(206 22) scale(1.6)' d='M0-8Q0 0 8 0Q0 0 0 8Q0 0-8 0Q0 0 0-8Z'/%3E%3Cpath transform='translate(178 58) scale(.8)' d='M0-8Q0 0 8 0Q0 0 0 8Q0 0-8 0Q0 0 0-8Z'/%3E%3Cpath transform='translate(224 82) scale(1.1)' d='M0-8Q0 0 8 0Q0 0 0 8Q0 0-8 0Q0 0 0-8Z'/%3E%3Cpath transform='translate(150 18) scale(.6)' d='M0-8Q0 0 8 0Q0 0 0 8Q0 0-8 0Q0 0 0-8Z'/%3E%3Cpath transform='translate(196 104) scale(.55)' d='M0-8Q0 0 8 0Q0 0 0 8Q0 0-8 0Q0 0 0-8Z'/%3E%3Ccircle cx='166' cy='92' r='1.6'/%3E%3Ccircle cx='130' cy='40' r='1.3'/%3E%3Ccircle cx='232' cy='46' r='1.4'/%3E%3C/g%3E%3C/svg%3E") right top / min(70%, 260px) auto no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 120'%3E%3Cg fill='black'%3E%3Cpath transform='translate(206 22) scale(1.6)' d='M0-8Q0 0 8 0Q0 0 0 8Q0 0-8 0Q0 0 0-8Z'/%3E%3Cpath transform='translate(178 58) scale(.8)' d='M0-8Q0 0 8 0Q0 0 0 8Q0 0-8 0Q0 0 0-8Z'/%3E%3Cpath transform='translate(224 82) scale(1.1)' d='M0-8Q0 0 8 0Q0 0 0 8Q0 0-8 0Q0 0 0-8Z'/%3E%3Cpath transform='translate(150 18) scale(.6)' d='M0-8Q0 0 8 0Q0 0 0 8Q0 0-8 0Q0 0 0-8Z'/%3E%3Cpath transform='translate(196 104) scale(.55)' d='M0-8Q0 0 8 0Q0 0 0 8Q0 0-8 0Q0 0 0-8Z'/%3E%3Ccircle cx='166' cy='92' r='1.6'/%3E%3Ccircle cx='130' cy='40' r='1.3'/%3E%3Ccircle cx='232' cy='46' r='1.4'/%3E%3C/g%3E%3C/svg%3E") right top / min(70%, 260px) auto no-repeat;
}

/* ---------- contorno de fora (anel) ---------- */
.ccp-face::after {
    content: none; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    --rw: 2px; --rc: var(--ccp-ch); --rd: calc(var(--rc) + var(--rw) * .414);
    border-radius: inherit; padding: var(--rw); background: var(--ccp-ln);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.ccp-o-simples .ccp-face::after, .ccp-o-duplo .ccp-face::after, .ccp-e-borda_viva .ccp-face::after { content: ""; }
.ccp-k-chanfro .ccp-face::after, .ccp-k-chanfro2 .ccp-face::after { padding: 0; border-radius: 0; -webkit-mask: none; mask: none; }
.ccp-k-chanfro .ccp-face::after {
    clip-path: polygon(evenodd,
        var(--rc) 0, calc(100% - var(--rc)) 0, 100% var(--rc), 100% calc(100% - var(--rc)), calc(100% - var(--rc)) 100%, var(--rc) 100%, 0 calc(100% - var(--rc)), 0 var(--rc), var(--rc) 0,
        var(--rd) var(--rw), var(--rw) var(--rd), var(--rw) calc(100% - var(--rd)), var(--rd) calc(100% - var(--rw)), calc(100% - var(--rd)) calc(100% - var(--rw)), calc(100% - var(--rw)) calc(100% - var(--rd)), calc(100% - var(--rw)) var(--rd), calc(100% - var(--rd)) var(--rw), var(--rd) var(--rw));
}
.ccp-k-chanfro2 .ccp-face::after {
    clip-path: polygon(evenodd,
        var(--rc) 0, 100% 0, 100% calc(100% - var(--rc)), calc(100% - var(--rc)) 100%, 0 100%, 0 var(--rc), var(--rc) 0,
        var(--rd) var(--rw), var(--rw) var(--rd), var(--rw) calc(100% - var(--rw)), calc(100% - var(--rd)) calc(100% - var(--rw)), calc(100% - var(--rw)) calc(100% - var(--rd)), calc(100% - var(--rw)) var(--rw), var(--rd) var(--rw));
}

/* ---------- detalhe de dentro ---------- */
.ccp-in::after { content: none; position: absolute; z-index: 3; pointer-events: none; }
.ccp-o-duplo .ccp-in::after {
    content: ""; inset: 6px; border: 1px solid var(--ccp-ln);
    border-radius: max(0px, calc(var(--ccp-r) - 6px)); opacity: .85;
}
.ccp-o-tracejado .ccp-in::after {
    content: ""; inset: 7px; border: 2px dashed var(--ccp-ln);
    border-radius: max(0px, calc(var(--ccp-r) - 7px)); opacity: .9;
}
.ccp-o-cantoneiras .ccp-in::after {
    content: ""; inset: 8px;
    background:
        linear-gradient(var(--ccp-ln), var(--ccp-ln)) left top / 18px 2px no-repeat,
        linear-gradient(var(--ccp-ln), var(--ccp-ln)) left top / 2px 18px no-repeat,
        linear-gradient(var(--ccp-ln), var(--ccp-ln)) right top / 18px 2px no-repeat,
        linear-gradient(var(--ccp-ln), var(--ccp-ln)) right top / 2px 18px no-repeat,
        linear-gradient(var(--ccp-ln), var(--ccp-ln)) left bottom / 18px 2px no-repeat,
        linear-gradient(var(--ccp-ln), var(--ccp-ln)) left bottom / 2px 18px no-repeat,
        linear-gradient(var(--ccp-ln), var(--ccp-ln)) right bottom / 18px 2px no-repeat,
        linear-gradient(var(--ccp-ln), var(--ccp-ln)) right bottom / 2px 18px no-repeat;
}
.ccp-k-chanfro.ccp-o-cantoneiras .ccp-in::after, .ccp-k-chanfro2.ccp-o-cantoneiras .ccp-in::after { inset: 11px; }
/* no chanfro a linha de dentro tambem e anel; o tracejado so recorta (as
   diagonais ficam sem traco, como um cupom destacado) */
.ccp-k-chanfro.ccp-o-duplo .ccp-in::after, .ccp-k-chanfro2.ccp-o-duplo .ccp-in::after {
    border: 0; border-radius: 0; background: var(--ccp-ln);
    --rw: 1px; --rc: calc(var(--ccp-ch) - 3.5px); --rd: calc(var(--rc) + var(--rw) * .414);
}
.ccp-k-chanfro.ccp-o-duplo .ccp-in::after {
    clip-path: polygon(evenodd,
        var(--rc) 0, calc(100% - var(--rc)) 0, 100% var(--rc), 100% calc(100% - var(--rc)), calc(100% - var(--rc)) 100%, var(--rc) 100%, 0 calc(100% - var(--rc)), 0 var(--rc), var(--rc) 0,
        var(--rd) var(--rw), var(--rw) var(--rd), var(--rw) calc(100% - var(--rd)), var(--rd) calc(100% - var(--rw)), calc(100% - var(--rd)) calc(100% - var(--rw)), calc(100% - var(--rw)) calc(100% - var(--rd)), calc(100% - var(--rw)) var(--rd), calc(100% - var(--rd)) var(--rw), var(--rd) var(--rw));
}
.ccp-k-chanfro2.ccp-o-duplo .ccp-in::after {
    clip-path: polygon(evenodd,
        var(--rc) 0, 100% 0, 100% calc(100% - var(--rc)), calc(100% - var(--rc)) 100%, 0 100%, 0 var(--rc), var(--rc) 0,
        var(--rd) var(--rw), var(--rw) var(--rd), var(--rw) calc(100% - var(--rw)), calc(100% - var(--rd)) calc(100% - var(--rw)), calc(100% - var(--rw)) calc(100% - var(--rd)), calc(100% - var(--rw)) var(--rw), var(--rd) var(--rw));
}
.ccp-k-chanfro.ccp-o-tracejado .ccp-in::after {
    --rc: calc(var(--ccp-ch) - 4px);
    clip-path: polygon(var(--rc) 0, calc(100% - var(--rc)) 0, 100% var(--rc), 100% calc(100% - var(--rc)), calc(100% - var(--rc)) 100%, var(--rc) 100%, 0 calc(100% - var(--rc)), 0 var(--rc));
}
.ccp-k-chanfro2.ccp-o-tracejado .ccp-in::after {
    --rc: calc(var(--ccp-ch) - 4px);
    clip-path: polygon(var(--rc) 0, 100% 0, 100% calc(100% - var(--rc)), calc(100% - var(--rc)) 100%, 0 100%, 0 var(--rc));
}

/* ---------- sombra ---------- */
.ccp-s-suave { box-shadow: 0 6px 16px rgba(0, 0, 0, .26); }
.ccp-s-forte { box-shadow: 0 14px 30px rgba(0, 0, 0, .48); }
.ccp-s-brilho { box-shadow: 0 0 18px var(--ccp-ln); }
.ccp-s-solida { box-shadow: 5px 5px 0 var(--ccp-ln); }
.ccp-k-chanfro.ccp-s-suave, .ccp-k-chanfro2.ccp-s-suave { box-shadow: none; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .3)); }
.ccp-k-chanfro.ccp-s-forte, .ccp-k-chanfro2.ccp-s-forte { box-shadow: none; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5)); }
.ccp-k-chanfro.ccp-s-brilho, .ccp-k-chanfro2.ccp-s-brilho { box-shadow: none; filter: drop-shadow(0 0 10px var(--ccp-ln)); }
.ccp-k-chanfro.ccp-s-solida, .ccp-k-chanfro2.ccp-s-solida { box-shadow: none; filter: drop-shadow(5px 5px 0 var(--ccp-ln)); }

/* ---------- efeitos ---------- */
.ccp-face::before { content: none; }
.ccp-e-brilho .ccp-face::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; z-index: 4; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-18deg); animation: ccp-brilho 3.6s ease-in-out infinite;
}
@keyframes ccp-brilho { 0% { left: -70%; } 55%, 100% { left: 135%; } }

.ccp-e-piscar { animation: ccp-piscar 1.6s ease-in-out infinite; }
@keyframes ccp-piscar { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.ccp-e-pulsar { animation: ccp-pulsar 2.2s ease-in-out infinite; }
@keyframes ccp-pulsar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

.ccp-e-flutuar { animation: ccp-flutuar 3.2s ease-in-out infinite; }
@keyframes ccp-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.ccp-e-balancar { animation: ccp-balancar 4s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes ccp-balancar {
    0%, 78%, 100% { transform: rotate(0); }
    82% { transform: rotate(-2deg); } 86% { transform: rotate(2deg); }
    90% { transform: rotate(-1.5deg); } 94% { transform: rotate(1deg); }
}

.ccp-e-elevar:hover, .ccp-e-elevar:focus-visible { transform: translateY(-5px); }
.ccp-e-elevar:not(.ccp-k-chanfro):not(.ccp-k-chanfro2):hover { box-shadow: 0 16px 30px rgba(0, 0, 0, .4); }
.ccp-e-elevar.ccp-k-chanfro:hover, .ccp-e-elevar.ccp-k-chanfro2:hover { filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .45)); }

.ccp-e-neon { animation: ccp-neon 2s ease-in-out infinite; }
@keyframes ccp-neon {
    0%, 100% { box-shadow: 0 0 4px var(--ccp-ln), 0 0 12px var(--ccp-ln); }
    50% { box-shadow: 0 0 8px var(--ccp-ln), 0 0 26px var(--ccp-ln); }
}
.ccp-e-neon.ccp-k-chanfro, .ccp-e-neon.ccp-k-chanfro2 { box-shadow: none; animation-name: ccp-neon-chanfro; }
@keyframes ccp-neon-chanfro {
    0%, 100% { filter: drop-shadow(0 0 3px var(--ccp-ln)) drop-shadow(0 0 7px var(--ccp-ln)); }
    50% { filter: drop-shadow(0 0 6px var(--ccp-ln)) drop-shadow(0 0 16px var(--ccp-ln)); }
}

@property --ccp-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.ccp-e-borda_viva .ccp-face::after {
    --rw: 3px;
    background: conic-gradient(from var(--ccp-ang), var(--ccp-ln), var(--ccp-c2), var(--ccp-c1), var(--ccp-ln));
    animation: ccp-gira 3s linear infinite;
}
@keyframes ccp-gira { to { --ccp-ang: 360deg; } }

@media (prefers-reduced-motion: reduce) {
    .ccp, .ccp *, .ccp *::before, .ccp *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 340px) {
    .ccp-grade.ccp-col-2 { grid-template-columns: minmax(0, 1fr); }
}