:root {
  --wine-950:#170605;
  --wine-900:#260706;
  --wine-800:#430b0d;
  --wine-700:#681015;
  --gold-500:#c99537;
  --gold-400:#e4b858;
  --gold-200:#f4d99d;
  --cream:#fbf6eb;
  --paper:#fffdf7;
  --ink:#221d19;
  --muted:#71665d;
  --line:#dfd2bf;
  --success:#2e7457;
  --shadow:0 22px 55px rgba(38,7,6,.12);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:linear-gradient(180deg,var(--wine-950) 0 390px,#f1e8d9 390px 100%); color:var(--ink); font-family:Arial,Helvetica,sans-serif; margin:0; min-height:100vh; }
button,a { font:inherit; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
.learning-header { align-items:center; background:rgba(20,4,4,.96); border-bottom:1px solid rgba(228,184,88,.22); color:#fff7e8; display:flex; justify-content:space-between; min-height:76px; padding:12px clamp(16px,5vw,72px); position:sticky; top:0; z-index:40; }
.learning-brand { align-items:center; display:flex; gap:12px; min-width:0; }
.learning-brand img { border:1px solid rgba(228,184,88,.38); height:52px; object-fit:cover; object-position:41% 48%; width:78px; }
.learning-brand strong,.learning-brand small { display:block; }
.learning-brand strong { font-family:Georgia,serif; font-size:18px; }
.learning-brand small { color:rgba(255,247,232,.58); font-size:8px; letter-spacing:.14em; margin-top:3px; text-transform:uppercase; }
.learning-nav { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.learning-nav a { border:1px solid rgba(228,184,88,.32); color:#f4d99d; font-size:10px; font-weight:800; letter-spacing:.07em; padding:10px 13px; text-transform:uppercase; transition:.2s; }
.learning-nav a:hover,.learning-nav a.active { background:var(--gold-400); color:var(--wine-950); }
.learning-hero { color:#fff7e8; margin:0 auto; max-width:1240px; padding:70px 24px 50px; position:relative; }
.learning-hero::after { background:radial-gradient(circle,rgba(228,184,88,.13),transparent 68%); content:""; height:340px; pointer-events:none; position:absolute; right:-30px; top:-70px; width:440px; }
.learning-eyebrow { align-items:center; color:var(--gold-200); display:flex; font-size:10px; font-weight:800; gap:11px; letter-spacing:.18em; margin:0 0 17px; text-transform:uppercase; }
.learning-eyebrow::before { background:var(--gold-500); content:""; height:1px; width:38px; }
.learning-hero h1 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(38px,6vw,72px); font-weight:400; letter-spacing:-.045em; line-height:1; margin:0; max-width:900px; }
.learning-hero h1 em { color:var(--gold-200); font-weight:400; }
.learning-hero > p { color:rgba(255,247,232,.7); font-family:Georgia,serif; font-size:16px; line-height:1.7; margin:22px 0 0; max-width:780px; }
.learning-shell { background:var(--cream); border:1px solid rgba(96,62,34,.16); box-shadow:var(--shadow); margin:0 auto 70px; max-width:1240px; min-height:650px; }
.subject-strip { background:#fffaf0; border-bottom:1px solid var(--line); display:flex; gap:8px; overflow-x:auto; padding:14px 18px; scrollbar-color:var(--wine-700) #eadfce; }
.subject-tab { background:#fff; border:1px solid #dfd3c1; color:#5f554d; flex:0 0 auto; min-width:68px; padding:10px 14px; transition:.2s; }
.subject-tab span,.subject-tab small { display:block; }
.subject-tab span { color:var(--wine-700); font-family:Georgia,serif; font-size:16px; font-weight:700; }
.subject-tab small { font-size:8px; letter-spacing:.07em; margin-top:3px; text-transform:uppercase; }
.subject-tab:hover,.subject-tab.active { background:var(--wine-800); border-color:var(--wine-800); color:#f9e8c2; transform:translateY(-1px); }
.subject-tab.active span { color:var(--gold-200); }
.learning-content { padding:clamp(20px,4vw,54px); }
.content-heading { align-items:end; display:grid; gap:34px; grid-template-columns:minmax(0,1fr) minmax(250px,.55fr); margin-bottom:36px; }
.content-heading small { color:var(--wine-700); font-size:9px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.content-heading h2 { font-family:Georgia,serif; font-size:clamp(30px,4vw,52px); font-weight:400; letter-spacing:-.035em; line-height:1.05; margin:9px 0 0; }
.content-heading p { color:var(--muted); font-size:13px; line-height:1.65; margin:0; }
.source-note { align-items:flex-start; background:#f5ecdc; border-left:3px solid var(--gold-500); color:#66574c; display:flex; font-size:12px; gap:10px; line-height:1.55; margin:0 0 28px; padding:13px 15px; }
.source-note strong { color:var(--wine-700); white-space:nowrap; }
.module-footer { align-items:center; border-top:1px solid var(--line); color:#786a5e; display:flex; font-size:10px; gap:16px; justify-content:space-between; margin-top:38px; padding-top:20px; }
.module-footer a { color:var(--wine-700); font-weight:800; letter-spacing:.06em; text-transform:uppercase; }

/* Quadrinhos */
.comic-stage { background:linear-gradient(145deg,#24100e,#090706); border:1px solid #815e28; color:#fff; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr); min-height:470px; overflow:hidden; position:relative; }
.comic-stage::before { background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:36px 36px; content:""; inset:0; pointer-events:none; position:absolute; }
.comic-visual { align-items:center; display:flex; justify-content:center; min-height:420px; overflow:hidden; padding:45px; position:relative; }
.comic-burst { background:radial-gradient(circle,rgba(228,184,88,.33),rgba(104,16,21,.11) 48%,transparent 70%); height:420px; position:absolute; width:420px; }
.comic-icon { animation:floatIcon 3.4s ease-in-out infinite; filter:drop-shadow(0 18px 24px rgba(0,0,0,.35)); font-size:clamp(100px,14vw,180px); position:relative; transform-origin:center; }
.comic-scene-tag { background:var(--gold-400); color:var(--wine-950); font-size:9px; font-weight:900; left:23px; letter-spacing:.12em; padding:8px 12px; position:absolute; text-transform:uppercase; top:22px; }
.comic-dialogue { align-content:center; background:rgba(255,250,240,.98); color:var(--ink); display:grid; padding:42px; position:relative; }
.comic-dialogue::before { border-bottom:21px solid transparent; border-right:25px solid rgba(255,250,240,.98); border-top:21px solid transparent; content:""; left:-25px; position:absolute; top:44%; }
.speaker { color:var(--wine-700); font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.comic-line { font-family:Georgia,serif; font-size:clamp(22px,2.7vw,34px); line-height:1.25; margin:13px 0 22px; }
.comic-note { border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.6; margin:0; padding-top:17px; }
.comic-panel-enter .comic-icon { animation:panelIconIn .55s cubic-bezier(.2,.85,.24,1.2),floatIcon 3.4s .55s ease-in-out infinite; }
.comic-panel-enter .comic-dialogue > * { animation:panelTextIn .45s ease both; }
.comic-panel-enter .comic-dialogue > :nth-child(2) { animation-delay:.08s; }
.comic-panel-enter .comic-dialogue > :nth-child(3) { animation-delay:.15s; }
.comic-controls { align-items:center; background:#fffaf0; border:1px solid var(--line); border-top:0; display:flex; gap:10px; justify-content:space-between; padding:14px 16px; }
.comic-buttons { display:flex; gap:8px; }
.module-button { background:#fff; border:1px solid #ccb995; color:var(--wine-700); font-size:10px; font-weight:900; letter-spacing:.06em; min-height:40px; padding:0 15px; text-transform:uppercase; }
.module-button:hover,.module-button.primary { background:var(--wine-800); border-color:var(--wine-800); color:#fff4dc; }
.comic-progress { align-items:center; display:flex; flex:1; gap:10px; justify-content:center; }
.comic-progress-track { background:#ded1bd; height:5px; max-width:330px; overflow:hidden; width:54%; }
.comic-progress-track i { background:linear-gradient(90deg,var(--wine-700),var(--gold-500)); display:block; height:100%; transition:width .35s; }
.comic-progress span { color:#77695d; font-size:10px; font-weight:800; }
.comic-thumbnails { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); margin-top:22px; }
.comic-thumb { align-items:center; background:#fff; border:1px solid var(--line); color:#51463e; display:flex; gap:10px; min-height:68px; padding:10px; text-align:left; }
.comic-thumb strong { font-size:25px; }
.comic-thumb span { font-size:10px; line-height:1.3; }
.comic-thumb.active { border-color:var(--wine-700); box-shadow:inset 0 0 0 1px var(--wine-700); color:var(--wine-700); }

/* Flashcards */
.flash-dashboard { align-items:center; background:var(--wine-900); color:#fff5e2; display:grid; gap:18px; grid-template-columns:repeat(4,1fr); margin-bottom:24px; padding:18px 22px; }
.flash-stat { border-right:1px solid rgba(228,184,88,.2); }
.flash-stat:last-child { border:0; }
.flash-stat small { color:rgba(255,245,226,.55); display:block; font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
.flash-stat strong { color:var(--gold-200); display:block; font-family:Georgia,serif; font-size:24px; margin-top:4px; }
.flash-wrap { display:grid; gap:24px; grid-template-columns:minmax(0,1fr) 255px; }
.flash-card-scene { min-height:390px; perspective:1400px; }
.flash-card { height:390px; position:relative; transform-style:preserve-3d; transition:transform .62s cubic-bezier(.2,.75,.3,1); width:100%; }
.flash-card.flipped { transform:rotateY(180deg); }
.flash-face { backface-visibility:hidden; border:1px solid #cbb793; box-shadow:0 18px 36px rgba(61,33,14,.12); display:flex; flex-direction:column; inset:0; justify-content:center; padding:clamp(28px,5vw,60px); position:absolute; }
.flash-front { background:linear-gradient(145deg,#fffdf8,#f3e6d1); }
.flash-back { background:linear-gradient(145deg,#3e0b0d,#180606); color:#fff5e2; transform:rotateY(180deg); }
.flash-face small { color:var(--wine-700); font-size:9px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.flash-back small { color:var(--gold-200); }
.flash-face h3 { font-family:Georgia,serif; font-size:clamp(30px,4vw,52px); font-weight:400; line-height:1.08; margin:18px 0 0; }
.flash-back h3 { font-size:clamp(23px,3vw,36px); line-height:1.35; }
.flip-hint { bottom:22px; color:#8b7b6e; font-size:9px; left:0; letter-spacing:.1em; position:absolute; right:0; text-align:center; text-transform:uppercase; }
.flash-back .flip-hint { color:rgba(255,245,226,.5); }
.flash-actions { display:grid; gap:10px; }
.flash-actions .module-button { min-height:47px; width:100%; }
.flash-actions .known { background:var(--success); border-color:var(--success); color:#fff; }
.flash-actions .review { background:#8a4a1f; border-color:#8a4a1f; color:#fff; }
.flash-actions p { color:var(--muted); font-size:10px; line-height:1.5; margin:8px 0 0; text-align:center; }
.flash-list { display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-top:25px; }
.flash-list button { background:#fff; border:1px solid var(--line); color:#5a4c42; min-height:61px; padding:11px 13px; text-align:left; }
.flash-list button span { color:var(--wine-700); font-size:9px; font-weight:900; margin-right:8px; }
.flash-list button.active { background:#f4e6cd; border-color:var(--wine-700); }
.flash-list button.known { border-left:4px solid var(--success); }
.flash-list button.review { border-left:4px solid #9b5525; }

@keyframes floatIcon { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-10px) rotate(1deg)} }
@keyframes panelIconIn { from{opacity:0;transform:scale(.68) rotate(-8deg)} to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes panelTextIn { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }
@media (max-width:820px) {
  .learning-header { align-items:flex-start; gap:10px; }
  .learning-brand small { display:none; }
  .learning-nav a { padding:8px 9px; }
  .content-heading { grid-template-columns:1fr; }
  .comic-stage { grid-template-columns:1fr; }
  .comic-visual { min-height:300px; }
  .comic-dialogue::before { border-bottom:22px solid rgba(255,250,240,.98); border-left:22px solid transparent; border-right:22px solid transparent; border-top:0; left:calc(50% - 22px); top:-22px; }
  .comic-dialogue { min-height:280px; padding:30px; }
  .flash-wrap { grid-template-columns:1fr; }
  .flash-actions { grid-template-columns:repeat(2,1fr); }
  .flash-actions p { grid-column:1/-1; }
}
@media (max-width:560px) {
  body { background:linear-gradient(180deg,var(--wine-950) 0 430px,#f1e8d9 430px 100%); }
  .learning-header { position:relative; }
  .learning-brand img { height:43px; width:64px; }
  .learning-brand strong { font-size:15px; }
  .learning-nav { gap:5px; }
  .learning-nav a { font-size:8px; }
  .learning-hero { padding-top:48px; }
  .learning-shell { border-left:0; border-right:0; margin-bottom:0; }
  .learning-content { padding:28px 15px; }
  .content-heading { gap:15px; }
  .comic-visual { min-height:245px; padding:30px; }
  .comic-icon { font-size:100px; }
  .comic-dialogue { min-height:300px; padding:30px 23px; }
  .comic-controls { align-items:stretch; flex-direction:column; }
  .comic-buttons { display:grid; grid-template-columns:repeat(3,1fr); }
  .comic-progress { order:-1; }
  .comic-progress-track { width:70%; }
  .comic-thumbnails { grid-template-columns:repeat(2,1fr); }
  .flash-dashboard { grid-template-columns:repeat(2,1fr); }
  .flash-stat:nth-child(2) { border:0; }
  .flash-card-scene,.flash-card { min-height:430px; }
  .flash-actions { grid-template-columns:1fr; }
  .flash-actions p { grid-column:auto; }
  .module-footer { align-items:flex-start; flex-direction:column; }
}