/* ============================================================
   UPGRADE VISUAL — cards das MATÉRIAS e do CARROSSEL de frentes
   (carrega depois de cards-materias.css e carrossel.css)
   ============================================================ */

/* ---------- MATÉRIAS ---------- */
.card-materia-foda {
    position: relative; overflow: hidden;
    width: 250px; height: 250px; gap: 4px;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--k56, rgba(0,255,204,.10)) 0%, transparent 60%),
        linear-gradient(165deg, var(--k13), var(--k108, var(--k13)));
    border: 1px solid var(--k12);
    box-shadow: 0 6px 24px var(--k236, rgba(0,0,0,.35));
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.card-materia-foda::before {                      /* fio de luz no topo */
    content: ''; position: absolute; top: 0; left: 18%; right: 18%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--k7), transparent);
    opacity: .55; transition: opacity .3s, left .3s, right .3s;
}
.card-materia-foda::after {                       /* chamada que aparece no hover */
    content: 'ENTRAR →'; position: absolute; bottom: 16px; left: 0; right: 0;
    font: 700 11px 'Courier New', monospace; letter-spacing: 2px; color: var(--k7);
    opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
}
.card-materia-foda:hover, .card-materia-foda:focus-visible {
    transform: translateY(-8px);
    border-color: var(--k4);
    box-shadow: 0 16px 44px var(--k237, rgba(0,255,204,.18)), 0 0 0 1px var(--k4);
    outline: none;
}
.card-materia-foda:hover::before { opacity: 1; left: 6%; right: 6%; }
.card-materia-foda:hover::after { opacity: 1; transform: translateY(0); }
.card-materia-foda .materia-svg-container, .card-materia-foda .materia-icone {
    width: 110px; height: 110px; margin-bottom: 14px;
    filter: drop-shadow(0 0 14px var(--k56, rgba(0,255,204,.35)));
    transition: transform .35s ease, filter .35s ease;
}
.card-materia-foda:hover .materia-svg-container, .card-materia-foda:hover .materia-icone {
    transform: scale(1.08); filter: drop-shadow(0 0 20px var(--k7));
}
.card-materia-foda .materia-nome { font-weight: 700; letter-spacing: 2px; transition: transform .3s; }
.card-materia-foda:hover .materia-nome { transform: translateY(-6px); }
.card-materia-foda .materia-glow { display: none; }

/* ---------- CARROSSEL DE FRENTES ---------- */
.card-frente-carrossel {
    background:
        radial-gradient(130% 100% at 0% 0%, var(--k56, rgba(0,255,204,.08)) 0%, transparent 55%),
        linear-gradient(170deg, var(--k13), var(--k108, var(--k13)));
    min-height: 230px; padding: 30px 20px 18px; gap: 14px;
}
.card-frente-carrossel:not(.central):hover { opacity: .75; }
.card-frente-carrossel.central { box-shadow: 0 14px 50px var(--k237), 0 0 0 1px var(--k4); }
.card-frente-inner { gap: 16px; }
.frente-svg-container {
    flex: 0 0 100px; height: 100px; border-radius: 16px; padding: 6px;
    background: radial-gradient(circle at 50% 35%, var(--k56, rgba(0,255,204,.12)), var(--k108));
    border: 1px solid var(--k4);
    box-shadow: inset 0 0 18px var(--k56, rgba(0,255,204,.10));
}
.frente-svg-container svg, .frente-svg-container img { max-width: 100px; max-height: 100px; object-fit: contain; }
.frente-nome { font-size: 18px; letter-spacing: .5px; }
.frente-descricao { font-size: 12px; line-height: 1.4; max-height: none; -webkit-line-clamp: 3; opacity: .9; }

.progresso-card { height: 8px; border-radius: 4px; margin-top: 0; }
.progresso-bar { border-radius: 4px; box-shadow: 0 0 10px var(--k7); min-width: 3px; }

.frente-stats { gap: 8px; justify-content: flex-start; align-items: center; margin-top: 0; }
.frente-stats > span {
    padding: 4px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
    background: var(--k108); border: 1px solid var(--k12); white-space: nowrap;
}
.frente-stats .frente-progresso-texto {
    margin-left: auto; color: var(--k8); background: var(--k7); border-color: var(--k7);
}

@media (max-width: 768px) {
    .card-materia-foda { width: 160px; height: 170px; }
    .card-materia-foda .materia-svg-container, .card-materia-foda .materia-icone { width: 72px; height: 72px; margin-bottom: 8px; }
    .card-materia-foda::after { display: none; }
    .frente-svg-container { flex-basis: 78px; height: 78px; }
    .frente-svg-container svg, .frente-svg-container img { max-width: 78px; max-height: 78px; }
    .frente-nome { font-size: 16px; }
    .frente-stats > span { padding: 3px 7px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .card-materia-foda, .card-materia-foda * { transition: none !important; }
}