/* Desafíos: today's three, the voice one and the week's three, each card in its tier's colour. */
.ch-hero{padding-bottom:28px}
.ch-clocks{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.ch-clock{display:grid;gap:2px;padding:10px 14px;border:1px solid #ffffff1f;border-radius:12px;background:#0d0c10b3;backdrop-filter:blur(6px);min-width:150px}
.ch-clock small{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.ch-clock b{font:700 22px/1.1 Rajdhani,Arial,sans-serif;color:var(--text);font-variant-numeric:tabular-nums}
.ch-streak.is-on{border-color:#ff782f66;box-shadow:0 0 24px #ff782f22 inset}
.ch-streak.is-on b{color:var(--gold)}

.ch-banner{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:26px;border:1px solid #ff782f40;border-radius:var(--radius);
    background:linear-gradient(90deg,#ff782f1f,#ff782f05 70%)}
.ch-banner.is-done{border-color:#3ad28a55;background:linear-gradient(90deg,#3ad28a1f,#3ad28a05 70%)}
.ch-banner-icon{font-size:26px;line-height:1}
.ch-banner p{margin:0;flex:1 1 220px;font-size:14px;color:#ddd6da}
.ch-banner b{color:var(--gold)}

.ch-section{margin-bottom:30px}
.ch-section>header{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:12px}
.ch-section h2{margin:0;font:700 26px/1 Rajdhani,Arial,sans-serif;letter-spacing:.4px}
.ch-section>header p{margin:0;font-size:13px;color:var(--muted)}
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}

.ch-card{--tc:#ffc478;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;border:1px solid var(--line);
    border-radius:var(--radius);background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 9%,var(--panel)),var(--panel) 55%);transition:transform .18s,border-color .18s}
.ch-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--tc),color-mix(in srgb,var(--tc) 30%,transparent))}
.ch-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tc) 45%,var(--line))}
.tier-easy{--tc:#3ad28a}.tier-medium{--tc:#40c4ff}.tier-hard{--tc:#9d4dff}.tier-voice{--tc:#ffc83d}
.tier-week1{--tc:#ff9a3d}.tier-week2{--tc:#ff6b1a}.tier-week3{--tc:#ff2e4d}
.ch-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ch-tier{padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
    color:var(--tc);background:color-mix(in srgb,var(--tc) 14%,transparent);border:1px solid color-mix(in srgb,var(--tc) 35%,transparent)}
.ch-check{font-size:12px;font-weight:700;color:#3ad28a}
.ch-card h3{margin:2px 0 0;font:700 22px/1.1 Rajdhani,Arial,sans-serif;letter-spacing:.3px}
.ch-card>p{margin:0;font-size:14px;color:#cfc8cd}
.ch-bar{height:10px;margin-top:6px;border-radius:999px;background:#ffffff12;overflow:hidden}
.ch-bar i{display:block;height:100%;min-width:0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 70%,#000),var(--tc));
    box-shadow:0 0 12px color-mix(in srgb,var(--tc) 60%,transparent);transition:width .6s ease}
.ch-count{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.ch-count b{color:var(--text);font-variant-numeric:tabular-nums}
.ch-prize{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0;padding:0;list-style:none}
.ch-prize li{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:8px;font-size:12px;font-weight:600;background:#ffffff0d;border:1px solid #ffffff14}
.ch-prize .is-ignis span{color:#ff9a3d}
.ch-prize .is-chest{border-color:#ffc47855;background:#ffc47814;color:var(--gold)}
.ch-card.is-done{border-color:#3ad28a55}
.ch-card.is-done .ch-bar i{background:linear-gradient(90deg,#1f8f5c,#3ad28a);box-shadow:0 0 12px #3ad28a80}
.ch-card.is-done h3,.ch-card.is-done>p{opacity:.75}

.ch-how{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:8px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.ch-how>div{display:grid;gap:4px;align-content:start}
.ch-how b{font-size:22px}
.ch-how strong{font-size:15px}
.ch-how span{font-size:13px;color:var(--muted)}
.ch-how-cta{display:flex!important;flex-wrap:wrap;gap:10px;align-items:center;align-content:center!important}

@media (max-width:640px){
    .ch-clock{min-width:0;flex:1 1 40%}
    .ch-banner{flex-wrap:wrap}
    .ch-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.ch-card,.ch-bar i{transition:none}}