/* DeckLearn Blog Nederland — bloco de aprendizagem A–E */
.learning-check{
  position:relative;
  overflow:hidden;
  margin:30px 0 24px;
  padding:clamp(20px,3.6vw,30px);
  border:1px solid rgba(var(--glow-a),.34);
  border-radius:22px;
  background:
    radial-gradient(520px 220px at 0 0,rgba(var(--glow-a),.18),transparent 68%),
    radial-gradient(420px 220px at 100% 100%,rgba(var(--glow-b),.11),transparent 72%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  box-shadow:0 22px 52px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.025)
}
.learning-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  padding:7px 10px;
  border:1px solid color-mix(in srgb,var(--theme-gold) 52%,transparent);
  border-radius:999px;
  color:var(--theme-gold);
  background:rgba(0,0,0,.26);
  font:900 .74rem/1 Sora,Inter,sans-serif;
  letter-spacing:.055em;
  text-transform:uppercase
}
.learning-check h2{margin:5px 0 8px}
.learning-question{margin:0 0 16px;color:#eef5ff;font-weight:750}
.learning-options{display:grid;gap:9px}
.learning-option{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  align-items:center;
  width:100%;
  min-height:52px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  color:#eef5ff;
  background:rgba(7,11,22,.74);
  font:750 .94rem/1.35 Inter,sans-serif;
  text-align:left;
  cursor:pointer;
  transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease
}
.learning-option:hover:not(:disabled){
  transform:translateY(-1px);
  border-color:rgba(var(--glow-a),.5);
  background:rgba(var(--glow-a),.09);
  box-shadow:0 12px 24px rgba(0,0,0,.24)
}
.learning-option:disabled{cursor:default;opacity:.82}
.learning-letter{
  display:grid;
  place-items:center;
  width:36px;height:36px;
  border-radius:11px;
  color:#071018;
  background:linear-gradient(135deg,var(--c),#fff 52%,var(--theme-gold));
  font:900 .86rem/1 Sora,Inter,sans-serif;
  box-shadow:0 0 18px rgba(var(--glow-a),.18)
}
.learning-option.is-correct{
  opacity:1;
  border-color:rgba(98,240,168,.72);
  background:rgba(98,240,168,.10);
  box-shadow:0 0 24px rgba(98,240,168,.12)
}
.learning-option.is-wrong{
  opacity:1;
  border-color:rgba(255,92,92,.66);
  background:rgba(255,92,92,.09)
}
.learning-feedback{
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:14px;
  line-height:1.55
}
.learning-feedback.is-correct{border:1px solid rgba(98,240,168,.45);background:rgba(98,240,168,.08);color:#dfffee}
.learning-feedback.is-wrong{border:1px solid rgba(255,92,92,.38);background:rgba(255,92,92,.07);color:#ffe8e8}
.blog-header-fallback{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  max-width:1180px;margin:0 auto;padding:13px 16px;
  border-bottom:1px solid rgba(55,214,255,.22);
  background:rgba(5,8,20,.96)
}
.blog-header-fallback a{color:#edf5ff;font-weight:850;text-decoration:none}

/* Banner oficial DeckLearn — mesmo padrão visual da edição Brasil */
.blog-official-banner-wrap{max-width:1180px;margin:0 auto;padding:12px clamp(14px,3vw,24px) 0}
.blog-official-banner{position:relative;overflow:hidden;margin:0;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:#0a0f1d;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.blog-official-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.28));pointer-events:none}
.blog-official-banner img{display:block;width:100%;height:clamp(150px,24vw,300px);object-fit:cover}

/* Japonês: trilha progressiva para iniciante absoluto -> leitura natural */
.jp-learning-path{
  position:relative;
  overflow:hidden;
  margin:22px 0 28px;
  padding:clamp(20px,4vw,34px);
  border:1px solid rgba(230,0,18,.32);
  border-radius:26px;
  background:
    radial-gradient(760px 320px at 0 0,rgba(230,0,18,.16),transparent 66%),
    radial-gradient(620px 300px at 100% 100%,rgba(0,200,255,.12),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.014));
  box-shadow:0 24px 58px rgba(0,0,0,.42)
}
.jp-learning-path h2{margin:4px 0 8px}.jp-learning-path>p{max-width:78ch}
.jp-stage-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:18px 0 26px}
.jp-stage{
  min-height:138px;padding:14px;border:1px solid rgba(255,255,255,.11);border-radius:17px;
  background:rgba(7,11,22,.68);box-shadow:0 12px 28px rgba(0,0,0,.22)
}
.jp-stage b{display:grid;place-items:center;width:34px;height:34px;margin-bottom:9px;border-radius:11px;color:#071018;background:linear-gradient(135deg,#ff5060,#fff 54%,#00c8ff);font:900 .8rem/1 Sora,Inter,sans-serif}
.jp-stage strong{display:block;color:#fff;font-family:Sora,Inter,sans-serif;font-size:.92rem;line-height:1.28}.jp-stage span{display:block;margin-top:6px;color:#a9bed4;font-size:.78rem;line-height:1.4}
.jp-stage.is-now{border-color:rgba(255,216,77,.58);box-shadow:0 0 26px rgba(255,216,77,.09)}
.jp-kana-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0 12px}.jp-kana-title h3{margin:0}.jp-kana-title small{color:#9fb7d0;font-weight:700}
.jp-kana-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.jp-kana-card{display:grid;place-items:center;min-height:72px;padding:8px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(5,9,20,.72);text-align:center}
.jp-kana-card strong{color:#fff;font:800 1.7rem/1.05 Sora,Inter,sans-serif}.jp-kana-card small{margin-top:5px;color:#8fb1cf;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.jp-kana-card.is-empty{opacity:.17}
.jp-derived{margin-top:16px;padding:14px 16px;border:1px solid rgba(0,200,255,.18);border-radius:16px;background:rgba(0,200,255,.045)}
.jp-derived summary{cursor:pointer;color:#eaf6ff;font-weight:900}.jp-derived p{margin:10px 0 0}
.jp-resource-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.jp-resource-row a{display:inline-flex;align-items:center;justify-content:center;padding:10px 13px;border:1px solid rgba(0,200,255,.28);border-radius:999px;color:#eaf6ff;background:rgba(0,200,255,.07);font-weight:850;text-decoration:none}.jp-resource-row a:hover{border-color:#00c8ff;background:rgba(0,200,255,.12)}
.jp-reading-stack{display:grid;gap:9px;margin:14px 0 20px}.jp-reading-row{padding:13px 15px;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(6,10,20,.68)}
.jp-reading-row span{display:block;margin-bottom:7px;color:#9fb7d0;font:900 .68rem/1 Sora,Inter,sans-serif;letter-spacing:.065em;text-transform:uppercase}.jp-reading-row strong{display:block;color:#fff;font-size:clamp(1.04rem,2.4vw,1.28rem);line-height:1.8}.jp-reading-row--kana{border-color:rgba(0,200,255,.28)}.jp-reading-row--furigana{border-color:rgba(255,216,77,.28)}.jp-reading-row--natural{border-color:rgba(230,0,18,.26)}
ruby{ruby-position:over}rt{color:#9fdcff;font-size:.56em;font-weight:750}
.jp-lesson-level{margin:14px 0 22px;padding:14px 16px;border:1px solid rgba(255,216,77,.28);border-radius:16px;background:rgba(255,216,77,.055);color:#dce9f7}.jp-lesson-level strong{color:#ffd84d}.jp-lesson-level a{font-weight:850}

@media(max-width:850px){.jp-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.jp-stage:last-child{grid-column:1/-1}.jp-kana-grid{grid-template-columns:repeat(5,minmax(52px,1fr))}}
@media(max-width:620px){
  .learning-option{grid-template-columns:34px minmax(0,1fr);padding:9px 10px;font-size:.9rem}
  .learning-letter{width:32px;height:32px;border-radius:10px}
  .jp-stage-grid{grid-template-columns:1fr}.jp-stage:last-child{grid-column:auto}.jp-kana-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.jp-kana-card{min-height:62px;padding:6px}.jp-kana-card strong{font-size:1.42rem}.jp-kana-card small{font-size:.6rem}
}

@media(prefers-reduced-motion:reduce){.learning-option{transition:none}}