:root {
  --ink: #15203a;
  --ink-soft: #5c6477;
  --purple: #6c4cf1;
  --purple-dark: #5638d9;
  --purple-light: #eeeaff;
  --blue: #3994ff;
  --green: #3ebd8d;
  --orange: #f59b45;
  --pink: #ec6697;
  --cream: #fff5e6;
  --surface: #ffffff;
  --background: #f7f8fc;
  --border: #e8eaf2;
  --shadow: 0 18px 50px rgba(39, 31, 86, 0.10);
  --shadow-small: 0 9px 25px rgba(39, 31, 86, 0.08);
  --radius-large: 28px;
  --radius: 20px;
  --container: 1180px;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--background);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Manrope", "DM Sans", sans-serif; line-height: 1.18; }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -0.045em; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(232, 234, 242, 0.85);
  background: rgba(247, 248, 252, 0.88);
  backdrop-filter: blur(18px);
}

.header-inner { min-height: 78px; display: flex; align-items: center; gap: 34px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-family: "Manrope", sans-serif; font-weight: 800; font-size: 1.28rem; letter-spacing: -0.04em; white-space: nowrap; }
.brand > span:nth-child(2) > span { color: var(--purple); }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px 12px 12px 5px; background: linear-gradient(135deg, #8067f7, var(--purple)); color: white; font-size: 1rem; box-shadow: 0 7px 18px rgba(108, 76, 241, 0.28); }

.main-navigation { display: flex; align-items: center; justify-content: center; gap: 26px; margin-left: auto; }
.main-navigation a { position: relative; padding: 26px 0 24px; color: var(--ink-soft); font-size: 0.92rem; font-weight: 600; }
.main-navigation a::after { content: ""; position: absolute; right: 0; bottom: 17px; left: 0; height: 2px; border-radius: 2px; background: var(--purple); transform: scaleX(0); transition: transform 180ms ease; }
.main-navigation a:hover, .main-navigation a.active { color: var(--purple); }
.main-navigation a.active::after { transform: scaleX(1); }

.profile-button { display: flex; align-items: center; gap: 9px; margin-left: 10px; padding: 5px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.profile-avatar { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: linear-gradient(135deg, #f5a561, #f17a65); color: white; font-size: 0.72rem; font-weight: 800; }
.profile-copy { display: grid; }
.profile-copy strong { font-size: 0.78rem; }
.profile-copy small { color: var(--ink-soft); font-size: 0.7rem; }
.menu-button { display: none; margin-left: auto; padding: 8px; border: 0; background: transparent; cursor: pointer; }
.menu-button > span:not(.sr-only) { display: block; width: 24px; height: 2px; margin: 5px 0; border-radius: 2px; background: var(--ink); transition: transform 180ms ease, opacity 180ms ease; }

.hero { min-height: 720px; display: grid; grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: 58px; padding-top: 72px; padding-bottom: 88px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--purple); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.eyebrow > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--purple-light); font-size: 0.7rem; }
.eyebrow.soft { padding: 7px 11px; margin-bottom: 12px; border-radius: 999px; background: var(--purple-light); font-size: 0.67rem; }
.eyebrow.light { color: #d9d1ff; }
.hero h1 { max-width: 680px; margin-bottom: 24px; font-size: clamp(3rem, 5.2vw, 5.05rem); letter-spacing: -0.065em; }
.hero h1 span { color: var(--purple); }
.hero-copy > p { max-width: 560px; margin-bottom: 30px; color: var(--ink-soft); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 12px; padding: 13px 21px; border: 1px solid transparent; border-radius: 13px; font-size: 0.91rem; font-weight: 700; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .filter:focus-visible, .answer-grid button:focus-visible, .text-button:focus-visible, .mini-button:focus-visible, .menu-button:focus-visible { outline: 3px solid rgba(57, 148, 255, 0.45); outline-offset: 3px; }
.button-primary { background: linear-gradient(135deg, #7859f5, var(--purple)); color: white; box-shadow: 0 12px 25px rgba(108, 76, 241, 0.25); }
.button-primary:hover { background: linear-gradient(135deg, #6c4cf1, var(--purple-dark)); box-shadow: 0 16px 30px rgba(108, 76, 241, 0.31); }
.button-secondary { border-color: var(--border); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-small); }
.button-light { background: white; color: var(--purple-dark); box-shadow: 0 13px 28px rgba(21, 32, 58, 0.17); }
.button.compact { min-height: 44px; padding: 10px 16px; }
.button.full { width: 100%; }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 38px; }
.student-faces { display: flex; }
.student-faces span { display: grid; place-items: center; width: 33px; height: 33px; margin-left: -7px; border: 3px solid var(--background); border-radius: 50%; background: #b9e8d6; color: #32584c; font-size: 0.58rem; font-weight: 800; }
.student-faces span:first-child { margin-left: 0; background: #ffd1bf; color: #754638; }
.student-faces span:nth-child(2) { background: #c9d6ff; color: #3e4f8e; }
.student-faces span:nth-child(3) { background: #f4cdfa; color: #72417b; }
.student-faces span:last-child { background: var(--ink); color: white; }
.hero-proof p { margin: 0; color: var(--ink-soft); font-size: 0.74rem; line-height: 1.4; }
.hero-proof strong { color: var(--ink); }

.hero-visual { position: relative; min-height: 565px; display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; inset: 3% 0 0 4%; border-radius: 54% 46% 47% 53% / 49% 46% 54% 51%; background: linear-gradient(145deg, #e4ddff, #f0edff); transform: rotate(-6deg); }
.shape { position: absolute; border-radius: 50%; }
.shape-one { top: 10%; right: 2%; width: 70px; height: 70px; background: #ffe2a9; }
.shape-two { bottom: 8%; left: 5%; width: 46px; height: 46px; border: 9px solid #73d3ad; }
.study-card { position: relative; z-index: 2; width: min(90%, 445px); padding: 29px; border: 1px solid rgba(255,255,255,0.75); border-radius: 30px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 28px 70px rgba(53, 42, 112, 0.18); transform: rotate(1.2deg); }
.study-card-header { display: flex; justify-content: space-between; gap: 20px; }
.study-card-header small, .lesson-preview small { color: var(--purple); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; }
.study-card-header h2 { margin: 4px 0 22px; font-size: 1.4rem; letter-spacing: -0.04em; }
.streak { align-self: flex-start; padding: 7px 10px; border-radius: 9px; background: var(--cream); color: #9d5e1a; font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.lesson-preview { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 14px; margin-bottom: 17px; }
.lesson-icon, .subject-icon { display: grid; place-items: center; border-radius: 17px; font-family: Georgia, serif; font-weight: 700; }
.lesson-icon { width: 58px; height: 58px; }
.math-icon, .mathematics { background: var(--purple-light); color: var(--purple); }
.lesson-preview h3 { margin: 2px 0 3px; font-size: 1rem; }
.lesson-preview p { margin: 0; color: var(--ink-soft); font-size: 0.72rem; }
.lesson-percentage { font-size: 0.78rem; font-weight: 800; }
.progress-track { overflow: hidden; height: 7px; border-radius: 99px; background: #eeedf3; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8c72fb, var(--purple)); }
.progress-track.pink span { background: linear-gradient(90deg, #f19aba, var(--pink)); }
.progress-track.green span { background: linear-gradient(90deg, #74d5af, var(--green)); }
.progress-track.amber span { background: linear-gradient(90deg, #f7be77, var(--orange)); }
.lesson-button { width: 100%; margin: 23px 0 21px; }
.today-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); padding-top: 19px; }
.today-summary > div { display: flex; align-items: center; justify-content: center; gap: 8px; border-right: 1px solid var(--border); }
.today-summary > div:last-child { border: 0; }
.today-summary > div > span { color: var(--purple); font-weight: 800; }
.today-summary p { display: grid; margin: 0; }
.today-summary strong { font-size: 0.76rem; }
.today-summary small { color: var(--ink-soft); font-size: 0.56rem; }
.floating-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 14px; background: white; box-shadow: var(--shadow); font-size: 0.72rem; font-weight: 700; }
.note-top { top: 13%; left: -1%; transform: rotate(-4deg); }
.note-top span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #daf6e9; color: #23986c; }
.note-bottom { right: -1%; bottom: 15%; display: grid; gap: 0; transform: rotate(3deg); }
.note-bottom strong { color: var(--green); font-size: 1rem; }
.note-bottom span { color: var(--ink-soft); font-size: 0.6rem; font-weight: 500; }

.dashboard-section { padding: 66px 0 70px; background: var(--ink); color: white; }
.section-heading { margin-bottom: 30px; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.section-heading h2 { margin-bottom: 9px; }
.section-heading p { margin-bottom: 0; color: var(--ink-soft); }
.dashboard-heading p { color: #a9b1c5; }
.streak-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(255,255,255,0.06); }
.streak-banner > span { font-size: 1.45rem; }
.streak-banner p { display: grid; margin: 0; }
.streak-banner strong { color: white; font-size: 0.79rem; }
.streak-banner small { font-size: 0.63rem; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.metric-card { min-height: 164px; display: flex; align-items: flex-start; gap: 13px; padding: 21px; border: 1px solid rgba(255,255,255,0.08); border-radius: 19px; background: rgba(255,255,255,0.055); }
.metric-icon { display: grid; flex: 0 0 auto; place-items: center; width: 39px; height: 39px; border-radius: 12px; font-weight: 800; }
.metric-icon.purple { background: rgba(154,126,255,0.18); color: #ae98ff; }
.metric-icon.blue { background: rgba(57,148,255,0.16); color: #76b7ff; }
.metric-icon.orange { background: rgba(245,155,69,0.15); color: #f9b26c; }
.metric-card > div:not(.goal-ring) { display: grid; }
.metric-card small { color: #8f99b0; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; }
.metric-card strong { margin: 4px 0 9px; font-family: "Manrope", sans-serif; font-size: 1.35rem; }
.metric-card p { margin: 0; color: #8993aa; font-size: 0.61rem; }
.metric-card p span { color: #72d5ae; font-weight: 700; }
.goal-card { position: relative; align-items: center; }
.goal-ring { --progress: 38%; position: relative; display: grid; flex: 0 0 auto; place-items: center; width: 61px; height: 61px; border-radius: 50%; background: conic-gradient(#9c83ff var(--progress), rgba(255,255,255,0.08) 0); }
.goal-ring::after { content: ""; position: absolute; width: 47px; height: 47px; border-radius: 50%; background: #202b44; }
.goal-ring span { position: relative; z-index: 1; font-size: 0.68rem; font-weight: 800; }
.goal-card > div:nth-child(2) strong { font-size: 0.84rem; }
.mini-button { position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; background: rgba(255,255,255,0.08); color: #cfc5ff; font-size: 0.62rem; font-weight: 700; cursor: pointer; }

.section { padding-top: 100px; padding-bottom: 100px; }
.split-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }
.filter { padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; background: white; color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.filter:hover, .filter.active { border-color: var(--purple); background: var(--purple); color: white; }
.subjects-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.subject-card { padding: 23px; border: 1px solid var(--border); border-radius: var(--radius); background: white; box-shadow: 0 8px 24px rgba(39,31,86,0.04); transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease; }
.subject-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-small); }
.subject-card.hidden { display: none; }
.subject-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 25px; }
.subject-icon { width: 48px; height: 48px; }
.portuguese { background: #ffe7ef; color: var(--pink); }
.science { background: #dcf6eb; color: #299c72; }
.history { background: #fff0dc; color: #c77829; }
.status-pill { padding: 5px 8px; border-radius: 999px; background: #e8f7f1; color: #328d6c; font-size: 0.55rem; font-weight: 800; white-space: nowrap; }
.status-pill.new { background: #fff1df; color: #ac6b26; }
.status-pill.highlight { display: inline-flex; background: var(--purple-light); color: var(--purple); letter-spacing: 0.07em; }
.subject-kicker { margin-bottom: 7px; color: var(--purple); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; }
.subject-card h3 { margin-bottom: 11px; font-size: 1.12rem; letter-spacing: -0.03em; }
.subject-card > p:not(.subject-kicker) { min-height: 63px; margin-bottom: 22px; color: var(--ink-soft); font-size: 0.77rem; line-height: 1.55; }
.subject-progress-copy { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--ink-soft); font-size: 0.63rem; }
.subject-progress-copy strong { color: var(--ink); }
.subject-card .progress-track { height: 6px; }
.text-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 21px; padding: 0; border: 0; background: transparent; color: var(--purple); font-size: 0.74rem; font-weight: 800; cursor: pointer; }

.practice-section { overflow: hidden; padding: 92px 0; background: linear-gradient(135deg, #6546e3 0%, #7457ef 48%, #5b3ed2 100%); color: white; }
.practice-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 90px; }
.practice-copy h2 { margin-bottom: 18px; font-size: clamp(2.5rem, 4vw, 3.8rem); }
.practice-copy > p { max-width: 480px; color: #d8d1fa; }
.practice-copy ul { display: grid; gap: 12px; margin: 26px 0 31px; padding: 0; list-style: none; font-size: 0.86rem; }
.practice-copy li { display: flex; align-items: center; gap: 10px; }
.practice-copy li span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: rgba(255,255,255,0.16); font-size: 0.65rem; }
.question-card { position: relative; padding: 33px; border-radius: var(--radius-large); background: white; color: var(--ink); box-shadow: 0 30px 60px rgba(40, 23, 107, 0.3); }
.question-card::before { content: ""; position: absolute; top: -24px; right: -34px; width: 115px; height: 115px; border: 22px solid rgba(255,255,255,0.1); border-radius: 50%; }
.question-card-top { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.08em; }
.question-card-top strong { padding: 5px 8px; border-radius: 8px; background: #fff0db; color: #a36525; font-size: 0.59rem; }
.question-subject { margin: 25px 0 10px; color: var(--purple); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; }
.question-card h3 { margin-bottom: 25px; font-size: 1.36rem; line-height: 1.45; }
.answer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.answer-grid button { display: flex; align-items: center; gap: 13px; min-height: 51px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 12px; background: #fafafe; color: var(--purple); font-size: 0.72rem; font-weight: 800; cursor: pointer; transition: border 150ms ease, background 150ms ease; }
.answer-grid button span { color: var(--ink); font-size: 0.82rem; }
.answer-grid button:hover { border-color: #bcaefb; background: #f5f2ff; }
.answer-grid button.correct { border-color: var(--green); background: #e9f8f2; color: #21835e; }
.answer-grid button.wrong { border-color: #ee8b8b; background: #fff0f0; color: #be4c4c; }
.answer-feedback { min-height: 22px; margin: 17px 0 0; color: var(--ink-soft); font-size: 0.72rem; }

.simulation-card { display: grid; grid-template-columns: 185px 1fr auto; align-items: center; gap: 34px; padding: 29px 32px; border: 1px solid var(--border); border-radius: var(--radius-large); background: white; box-shadow: var(--shadow-small); }
.simulation-illustration { position: relative; height: 145px; display: grid; place-items: center; overflow: hidden; border-radius: 21px; background: linear-gradient(135deg, #ede9ff, #dcd5ff); color: var(--purple); }
.simulation-illustration::before, .simulation-illustration::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.5); }
.simulation-illustration::before { width: 110px; height: 110px; top: -46px; right: -34px; }
.simulation-illustration::after { width: 70px; height: 70px; bottom: -34px; left: -17px; }
.simulation-illustration span { position: absolute; top: 24px; left: 30px; font-size: 1.8rem; transform: rotate(-13deg); }
.simulation-illustration strong { padding: 14px; border: 6px solid rgba(108,76,241,0.2); border-radius: 15px; background: white; box-shadow: var(--shadow-small); font-size: 1.5rem; transform: rotate(6deg); }
.simulation-copy h3 { margin: 11px 0 8px; font-size: 1.35rem; }
.simulation-copy > p { max-width: 620px; margin-bottom: 17px; color: var(--ink-soft); font-size: 0.8rem; }
.simulation-data { display: flex; flex-wrap: wrap; gap: 20px; color: var(--ink-soft); font-size: 0.67rem; }
.simulation-data strong { color: var(--ink); }

.performance-section { padding: 95px 0; background: #f0f2f8; }
.performance-grid { display: grid; grid-template-columns: 1.45fr 0.55fr; gap: 19px; }
.performance-card { padding: 29px; border: 1px solid var(--border); border-radius: var(--radius-large); background: white; }
.performance-card-head { display: flex; justify-content: space-between; gap: 20px; }
.performance-card-head h2 { margin-bottom: 0; font-size: 1.65rem; }
.week-pill { align-self: flex-start; padding: 7px 11px; border: 1px solid var(--border); border-radius: 9px; color: var(--ink-soft); font-size: 0.62rem; }
.chart { position: relative; height: 250px; margin-top: 22px; padding-top: 8px; }
.chart-line { position: absolute; right: 0; left: 0; height: 1px; background: #eceef4; }
.line-1 { top: 25%; }.line-2 { top: 50%; }.line-3 { top: 75%; }
.chart-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 16px; }
.chart-bars > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 9px; }
.chart-bars span { position: relative; z-index: 2; display: block; width: min(34px, 55%); min-height: 18px; border-radius: 9px 9px 4px 4px; background: #d8d1fb; transition: height 400ms ease; }
.chart-bars span.today { background: linear-gradient(180deg, #8d72fa, var(--purple)); box-shadow: 0 8px 18px rgba(108,76,241,0.2); }
.chart-bars small { color: var(--ink-soft); font-size: 0.53rem; font-weight: 800; }
.week-summary { padding: 29px; border-radius: var(--radius-large); background: linear-gradient(150deg, #17213b, #212d4d); color: white; }
.week-summary h3 { margin-bottom: 12px; font-size: 1.42rem; }
.week-summary > p { margin-bottom: 25px; color: #aeb7cb; font-size: 0.76rem; }
.week-stat { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.09); font-size: 0.7rem; }
.week-stat span { color: #9fa9bf; }
.week-stat strong { font-size: 0.78rem; }
.week-summary .button { margin-top: 20px; font-size: 0.74rem; }

.cta-section { padding-top: 95px; padding-bottom: 95px; }
.cta-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 47px 50px; border: 1px solid #e0dbff; border-radius: 30px; background: linear-gradient(135deg, #f1edff, #fbfaff); }
.cta-card::after { content: ""; position: absolute; right: -85px; bottom: -110px; width: 280px; height: 280px; border: 50px solid rgba(108,76,241,0.08); border-radius: 50%; }
.cta-card > * { position: relative; z-index: 1; }
.cta-card h2 { max-width: 690px; margin-bottom: 10px; }
.cta-card p { margin: 0; color: var(--ink-soft); }

.site-footer { padding: 50px 0; border-top: 1px solid var(--border); background: white; }
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 60px; }
.footer-brand { margin-bottom: 12px; }
.footer-grid > div > p { max-width: 320px; margin: 0; color: var(--ink-soft); font-size: 0.74rem; }
.footer-grid nav { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 28px; color: var(--ink-soft); font-size: 0.72rem; }
.footer-grid nav a:hover { color: var(--purple); }
.copyright { margin: 0; color: var(--ink-soft); font-size: 0.67rem; text-align: right; }

.toast { position: fixed; right: 24px; bottom: 24px; z-index: 200; max-width: min(360px, calc(100% - 40px)); padding: 13px 17px; border-radius: 13px; background: var(--ink); color: white; box-shadow: var(--shadow); font-size: 0.8rem; opacity: 0; pointer-events: none; transform: translateY(14px); transition: opacity 200ms ease, transform 200ms ease; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .main-navigation { gap: 16px; }
  .main-navigation a { font-size: 0.82rem; }
  .profile-copy { display: none; }
  .hero { gap: 20px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .subjects-grid { grid-template-columns: repeat(2, 1fr); }
  .practice-grid { gap: 45px; }
  .simulation-card { grid-template-columns: 160px 1fr; }
  .simulation-card > .button { grid-column: 2; justify-self: start; }
  .performance-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .header-inner { min-height: 70px; }
  .menu-button { display: block; order: 2; }
  .profile-button { order: 1; margin-left: auto; }
  .main-navigation { position: absolute; top: 70px; right: 20px; left: 20px; display: grid; gap: 0; padding: 10px 18px; border: 1px solid var(--border); border-radius: 15px; background: white; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity 180ms ease, transform 180ms ease; }
  .main-navigation.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .main-navigation a { padding: 10px 0; }
  .main-navigation a::after { display: none; }
  .menu-button.open > span:nth-child(2) { transform: translateY(7px) rotate(45deg); }
  .menu-button.open > span:nth-child(3) { opacity: 0; }
  .menu-button.open > span:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }
  .hero { grid-template-columns: 1fr; padding-top: 75px; }
  .hero-copy { text-align: center; }
  .hero-copy > p { margin-inline: auto; }
  .hero-actions, .hero-proof { justify-content: center; }
  .hero-visual { min-height: 520px; }
  .dashboard-heading, .split-heading { align-items: flex-start; flex-direction: column; }
  .practice-grid { grid-template-columns: 1fr; }
  .practice-copy { text-align: center; }
  .practice-copy > p { margin-inline: auto; }
  .practice-copy ul { justify-content: center; text-align: left; }
  .practice-copy li { justify-content: flex-start; }
  .question-card { max-width: 600px; width: 100%; margin-inline: auto; }
  .cta-card { align-items: flex-start; flex-direction: column; padding: 38px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .copyright { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 600px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .site-header .container { width: min(calc(100% - 24px), var(--container)); }
  .profile-button { display: none; }
  .hero { min-height: auto; padding-top: 54px; padding-bottom: 65px; }
  .hero h1 { font-size: clamp(2.75rem, 14vw, 4.2rem); }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-visual { min-height: 480px; margin-inline: -5px; }
  .study-card { width: 96%; padding: 22px; border-radius: 23px; }
  .floating-note { display: none; }
  .today-summary strong { font-size: 0.7rem; }
  .metrics-grid, .subjects-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 132px; }
  .section { padding-top: 70px; padding-bottom: 70px; }
  .practice-section { padding: 70px 0; }
  .question-card { padding: 23px; }
  .question-card h3 br { display: none; }
  .answer-grid { grid-template-columns: 1fr; }
  .simulation-card { grid-template-columns: 1fr; padding: 22px; }
  .simulation-illustration { height: 175px; }
  .simulation-card > .button { grid-column: 1; width: 100%; }
  .performance-section { padding: 70px 0; }
  .performance-card { padding: 20px 15px; }
  .performance-card-head { align-items: flex-start; flex-direction: column; }
  .chart-bars { gap: 4px; }
  .chart-bars span { width: 60%; }
  .cta-section { padding-top: 70px; padding-bottom: 70px; }
  .cta-card { padding: 29px 23px; }
  .cta-card .button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 35px; }
  .footer-grid nav { justify-content: start; }
  .copyright { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Página de matérias */
.subjects-page { background: #f8f9fd; }
.subjects-hero { position: relative; overflow: hidden; padding: 67px 0 78px; background: linear-gradient(145deg, #f2efff 0%, #f9f8ff 50%, #eff5ff 100%); }
.subjects-hero::before { content: ""; position: absolute; top: -190px; left: -130px; width: 420px; height: 420px; border: 75px solid rgba(108,76,241,0.045); border-radius: 50%; }
.subjects-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 70px; }
.breadcrumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 35px; color: var(--ink-soft); font-size: 0.73rem; font-weight: 700; }
.breadcrumb:hover { color: var(--purple); }
.subjects-eyebrow { margin-bottom: 13px; }
.subjects-hero h1 { margin-bottom: 20px; font-size: clamp(3.3rem, 5.4vw, 5.6rem); letter-spacing: -0.07em; }
.subjects-hero h1 span { color: var(--purple); }
.subjects-hero-copy > p { max-width: 580px; margin-bottom: 28px; color: var(--ink-soft); font-size: 1rem; }
.subject-search { display: flex; max-width: 540px; min-height: 58px; align-items: center; gap: 12px; padding: 8px 11px 8px 18px; border: 1px solid #dfdcf1; border-radius: 15px; background: white; box-shadow: 0 13px 32px rgba(57, 44, 119, 0.08); }
.subject-search > span { color: var(--purple); font-size: 1.3rem; font-weight: 800; }
.subject-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 0.84rem; }
.subject-search input::placeholder { color: #9ca3b4; }
.subject-search kbd { padding: 4px 8px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 7px; background: #f8f8fb; color: #9298a8; font-family: inherit; font-size: 0.58rem; }
.subjects-hero-panel { position: relative; min-height: 410px; display: grid; place-items: center; }
.subjects-hero-panel::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: linear-gradient(135deg, #dcd4ff, #e8e3ff); }
.hero-panel-orbit { position: absolute; border: 1px dashed rgba(108,76,241,0.25); border-radius: 50%; }
.orbit-one { width: 450px; height: 310px; transform: rotate(12deg); }
.orbit-two { width: 330px; height: 430px; transform: rotate(48deg); }
.subjects-score-card { position: relative; z-index: 2; width: 230px; padding: 25px; border: 1px solid rgba(255,255,255,0.8); border-radius: 27px; background: rgba(255,255,255,0.94); box-shadow: 0 24px 60px rgba(61,45,135,0.18); text-align: center; }
.subjects-score-card > span { color: var(--purple); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.1em; }
.score-ring { --score: 56%; position: relative; display: grid; width: 120px; height: 120px; place-content: center; margin: 18px auto; border-radius: 50%; background: conic-gradient(var(--purple) var(--score), #ebe8f7 0); }
.score-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: white; }
.score-ring strong, .score-ring small { position: relative; z-index: 1; display: block; }
.score-ring strong { font-family: "Manrope", sans-serif; font-size: 1.55rem; }
.score-ring small { color: var(--ink-soft); font-size: 0.58rem; }
.subjects-score-card > p { margin: 0; color: var(--ink-soft); font-size: 0.68rem; }
.subjects-score-card > p strong { color: var(--ink); }
.floating-subject { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 9px 12px 9px 9px; border-radius: 14px; background: white; box-shadow: var(--shadow-small); font-size: 0.67rem; }
.floating-subject .subject-icon { width: 34px; height: 34px; border-radius: 11px; font-size: 0.72rem; }
.subject-float-one { top: 8%; left: 2%; transform: rotate(-6deg); }
.subject-float-two { top: 17%; right: 0; transform: rotate(5deg); }
.subject-float-three { bottom: 7%; left: 3%; transform: rotate(4deg); }

.subjects-overview { border-bottom: 1px solid var(--border); background: white; }
.subject-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.subject-stats > div { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 106px; border-right: 1px solid var(--border); }
.subject-stats > div:last-child { border: 0; }
.subject-stats .metric-icon.green { background: #dcf6eb; color: var(--green); }
.subject-stats p { display: grid; margin: 0; }
.subject-stats strong { font-family: "Manrope", sans-serif; font-size: 1.25rem; }
.subject-stats small { color: var(--ink-soft); font-size: 0.62rem; }

.subjects-catalog-section { display: grid; grid-template-columns: 260px 1fr; align-items: start; gap: 35px; padding-top: 88px; padding-bottom: 96px; }
.study-plan-column { display: grid; gap: 16px; position: sticky; top: 100px; }
.study-plan-card, .priority-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: white; box-shadow: 0 8px 25px rgba(39,31,86,0.035); }
.study-plan-card h2 { margin-bottom: 8px; font-size: 1.25rem; }
.study-plan-card > p, .priority-card > p { color: var(--ink-soft); font-size: 0.7rem; }
.week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 20px 0; }
.week-days > span { display: grid; place-items: center; gap: 3px; padding: 6px 2px; border-radius: 9px; background: #f4f5f8; color: var(--ink-soft); font-size: 0.57rem; font-weight: 700; }
.week-days small { font-size: 0.55rem; }
.week-days .done { background: var(--purple-light); color: var(--purple); }
.week-days .today { background: var(--purple); color: white; }
.plan-progress-copy { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--ink-soft); font-size: 0.6rem; }
.plan-progress-copy strong { color: var(--ink); }
.study-plan-card .text-button { margin-top: 18px; }
.priority-card-head { display: flex; align-items: center; justify-content: space-between; }
.priority-card h3 { margin: 0; font-size: 0.95rem; }
.priority-card-head button { display: grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 8px; background: var(--purple-light); color: var(--purple); font-weight: 800; cursor: pointer; }
.priority-item { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 9px; padding: 12px 0; border-top: 1px solid var(--border); }
.priority-item .subject-icon { width: 35px; height: 35px; border-radius: 10px; font-size: 0.75rem; }
.priority-item p { display: grid; margin: 0; }
.priority-item strong { font-size: 0.68rem; }
.priority-item small { color: var(--ink-soft); font-size: 0.56rem; }
.priority-item > span:last-child { font-size: 0.63rem; font-weight: 800; }
.tip-card { display: flex; gap: 12px; padding: 17px; border-radius: 17px; background: #fff5e4; color: #694f2e; }
.tip-card > span { font-size: 1.2rem; }
.tip-card strong { font-size: 0.7rem; }
.tip-card p { margin: 3px 0 0; color: #8b704c; font-size: 0.61rem; line-height: 1.45; }
.catalog-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.catalog-heading h2 { margin-bottom: 6px; font-size: 2.2rem; }
.catalog-heading p { margin: 0; color: var(--ink-soft); font-size: 0.7rem; }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.catalog-filters button { padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: white; color: var(--ink-soft); font-size: 0.64rem; font-weight: 700; cursor: pointer; }
.catalog-filters button.active, .catalog-filters button:hover { border-color: var(--purple); background: var(--purple); color: white; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.catalog-subject-card { --card-accent: var(--purple); display: flex; min-width: 0; min-height: 365px; flex-direction: column; padding: 21px; border: 1px solid var(--border); border-top: 3px solid var(--card-accent); border-radius: 19px; background: white; box-shadow: 0 8px 24px rgba(39,31,86,0.035); transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease; }
.catalog-subject-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-small); }
.catalog-subject-card[hidden] { display: none; }
.pink-card { --card-accent: var(--pink); }
.green-card { --card-accent: var(--green); }
.amber-card { --card-accent: var(--orange); }
.blue-card { --card-accent: var(--blue); }
.cyan-card { --card-accent: #29b5b2; }
.catalog-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.catalog-card-top .subject-icon { width: 46px; height: 46px; }
.status-pill.start { background: #edf0f7; color: #657086; }
.catalog-subject-card .subject-kicker { color: var(--card-accent); }
.catalog-subject-card h3 { margin-bottom: 7px; font-size: 1.12rem; }
.catalog-subject-card > p:not(.subject-kicker) { min-height: 58px; margin-bottom: 16px; color: var(--ink-soft); font-size: 0.7rem; line-height: 1.5; }
.catalog-meta { display: flex; gap: 13px; margin-bottom: 19px; color: var(--ink-soft); font-size: 0.58rem; }
.catalog-meta span::before { content: "•"; margin-right: 5px; color: var(--card-accent); }
.catalog-subject-card .subject-progress-copy { margin-top: auto; }
.progress-track.blue span { background: linear-gradient(90deg, #7dbbff, var(--blue)); }
.progress-track.cyan span { background: linear-gradient(90deg, #65d8d3, #29b5b2); }
.catalog-card-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 18px; padding: 11px 13px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--card-accent) 10%, white); color: var(--card-accent); font-size: 0.68rem; font-weight: 800; cursor: pointer; }
.catalog-card-button:hover { background: color-mix(in srgb, var(--card-accent) 16%, white); }
.geography { background: #e2f1ff; color: #287fc9; }
.english { background: #dbf4f2; color: #178b89; font-family: "DM Sans", sans-serif; font-size: 0.67rem; }
.no-subject-results { padding: 70px 20px; border: 1px dashed #d8dbe6; border-radius: var(--radius); text-align: center; }
.no-subject-results > span { display: grid; width: 55px; height: 55px; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: var(--purple-light); color: var(--purple); font-size: 1.5rem; }
.no-subject-results h3 { margin-bottom: 6px; }
.no-subject-results p { color: var(--ink-soft); font-size: 0.74rem; }

.continue-learning-section { padding: 90px 0; background: #f0f2f8; }
.today-date { align-self: center; padding: 8px 12px; border: 1px solid #dfe2eb; border-radius: 9px; background: white; color: var(--ink-soft); font-size: 0.67rem; }
.next-lessons-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; }
.featured-next-lesson { display: grid; grid-template-columns: 0.66fr 1.34fr; overflow: hidden; min-height: 300px; border: 1px solid var(--border); border-radius: var(--radius-large); background: white; box-shadow: var(--shadow-small); }
.lesson-visual { position: relative; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 22px; background: linear-gradient(145deg, #e7e1ff, #d7ceff); text-align: center; }
.lesson-visual::before, .lesson-visual::after { content: ""; position: absolute; border: 25px solid rgba(255,255,255,0.28); border-radius: 50%; }
.lesson-visual::before { top: -60px; right: -50px; width: 150px; height: 150px; }
.lesson-visual::after { bottom: -58px; left: -50px; width: 120px; height: 120px; }
.lesson-visual .subject-icon { position: relative; z-index: 1; width: 82px; height: 82px; border-radius: 25px; background: white; font-size: 1.6rem; box-shadow: var(--shadow); }
.lesson-visual > div { position: relative; z-index: 1; display: grid; }
.lesson-visual small { color: var(--purple); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.1em; }
.lesson-visual strong { font-size: 0.72rem; }
.featured-lesson-copy { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; padding: 33px; }
.featured-lesson-copy h3 { margin: 13px 0 9px; font-size: 1.42rem; }
.featured-lesson-copy > p { color: var(--ink-soft); font-size: 0.73rem; }
.lesson-details { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 21px; color: var(--ink-soft); font-size: 0.61rem; }
.featured-lesson-copy .button { min-height: 44px; padding: 10px 15px; }
.quick-lessons { display: grid; gap: 10px; }
.quick-lessons article { display: grid; grid-template-columns: 45px 1fr 35px; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--border); border-radius: 16px; background: white; }
.quick-lessons .subject-icon { width: 45px; height: 45px; border-radius: 13px; }
.quick-lessons article > div { min-width: 0; }
.quick-lessons small { color: var(--ink-soft); font-size: 0.51rem; font-weight: 700; }
.quick-lessons h3 { overflow: hidden; margin: 3px 0 8px; font-size: 0.79rem; text-overflow: ellipsis; white-space: nowrap; }
.quick-lessons .progress-track { height: 4px; }
.quick-lessons button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 9px; background: var(--purple-light); color: var(--purple); font-weight: 800; cursor: pointer; }

.daily-plan-section { padding-top: 90px; padding-bottom: 95px; }
.daily-plan-card { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; padding: 47px; border-radius: 30px; background: linear-gradient(145deg, #17213b, #263354); color: white; box-shadow: var(--shadow); }
.daily-plan-intro h2 { margin-bottom: 14px; font-size: 2.3rem; }
.daily-plan-intro > p { max-width: 460px; color: #aab4c9; font-size: 0.78rem; }
.daily-plan-progress { margin-top: 27px; }
.daily-plan-progress strong { display: block; margin-bottom: 9px; font-size: 0.7rem; }
.daily-plan-progress .progress-track { background: rgba(255,255,255,0.1); }
.daily-task-list { display: grid; gap: 10px; }
.daily-task-list label { display: grid; grid-template-columns: 25px 42px 1fr auto; align-items: center; gap: 11px; min-height: 75px; padding: 12px 15px; border: 1px solid rgba(255,255,255,0.09); border-radius: 15px; background: rgba(255,255,255,0.055); cursor: pointer; transition: background 180ms ease, opacity 180ms ease; }
.daily-task-list label:hover { background: rgba(255,255,255,0.09); }
.daily-task-list input { position: absolute; opacity: 0; pointer-events: none; }
.custom-check { display: grid; width: 22px; height: 22px; place-items: center; border: 2px solid #65718a; border-radius: 7px; color: transparent; font-size: 0.62rem; }
.daily-task-list input:checked + .custom-check { border-color: var(--green); background: var(--green); color: white; }
.daily-task-list label:has(input:checked) { opacity: 0.66; }
.daily-task-list label:has(input:checked) strong { text-decoration: line-through; }
.daily-task-list .subject-icon { width: 42px; height: 42px; border-radius: 12px; }
.daily-task-list label > span:nth-of-type(3) { display: grid; }
.daily-task-list strong { font-size: 0.72rem; }
.daily-task-list small { color: #99a4bb; font-size: 0.58rem; }
.daily-task-list em { color: #b9aaff; font-size: 0.58rem; font-style: normal; font-weight: 800; }

.track-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.track-modal.open { opacity: 1; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; border: 0; background: rgba(13,18,34,0.68); backdrop-filter: blur(7px); cursor: default; }
.track-modal-dialog { position: relative; z-index: 1; width: min(520px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow-y: auto; padding: 30px; border-radius: 25px; background: white; box-shadow: 0 30px 80px rgba(10,15,30,0.35); transform: translateY(18px) scale(0.98); transition: transform 180ms ease; }
.track-modal.open .track-modal-dialog { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 15px; right: 15px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 10px; background: #f1f2f7; color: var(--ink-soft); font-size: 1.2rem; cursor: pointer; }
.modal-subject-head { display: flex; align-items: center; gap: 13px; padding-right: 40px; }
.modal-subject-head .subject-icon { width: 53px; height: 53px; }
.modal-subject-head small { color: var(--purple); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.1em; }
.modal-subject-head h2 { margin: 2px 0 0; font-size: 1.6rem; }
.track-modal-dialog > p { margin: 18px 0; color: var(--ink-soft); font-size: 0.74rem; }
.modal-progress-copy { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--ink-soft); font-size: 0.62rem; }
.modal-progress-copy strong { color: var(--ink); }
.module-list { display: grid; gap: 7px; margin: 24px 0; }
.module-item { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.module-number { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #f0f1f6; color: var(--ink-soft); font-size: 0.62rem; font-weight: 800; }
.module-item.complete .module-number { background: #ddf5eb; color: #278c67; }
.module-item.current { border-color: #cfc4ff; background: #f7f5ff; }
.module-item.current .module-number { background: var(--purple); color: white; }
.module-item p { display: grid; margin: 0; }
.module-item strong { font-size: 0.69rem; }
.module-item small { color: var(--ink-soft); font-size: 0.56rem; }
.module-state { color: var(--ink-soft); font-size: 0.58rem; }
.module-item.complete .module-state { color: var(--green); }
body.modal-open { overflow: hidden; }

@media (max-width: 1120px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .subjects-catalog-section { grid-template-columns: 235px 1fr; gap: 24px; }
}

@media (max-width: 900px) {
  .subjects-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .subjects-hero-copy > p, .subject-search { margin-inline: auto; }
  .subjects-hero-panel { min-height: 390px; }
  .subject-stats { grid-template-columns: repeat(2, 1fr); }
  .subject-stats > div:nth-child(2) { border-right: 0; }
  .subject-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .subjects-catalog-section { grid-template-columns: 1fr; }
  .study-plan-column { position: static; grid-template-columns: repeat(2, 1fr); }
  .tip-card { grid-column: 1 / -1; }
  .next-lessons-grid { grid-template-columns: 1fr; }
  .daily-plan-card { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 670px) {
  .subjects-hero { padding-top: 48px; padding-bottom: 55px; }
  .subjects-hero-grid { gap: 35px; }
  .breadcrumb { margin-bottom: 25px; }
  .subjects-hero h1 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
  .subject-search kbd { display: none; }
  .subjects-hero-panel { min-height: 335px; transform: scale(0.9); margin-inline: -20px; }
  .floating-subject { display: none; }
  .subject-stats > div { min-height: 90px; justify-content: flex-start; padding-left: 15px; }
  .subject-stats .metric-icon { width: 34px; height: 34px; }
  .subject-stats strong { font-size: 1rem; }
  .subjects-catalog-section { padding-top: 65px; padding-bottom: 70px; }
  .study-plan-column, .catalog-grid { grid-template-columns: 1fr; }
  .tip-card { grid-column: auto; }
  .catalog-heading { align-items: flex-start; flex-direction: column; }
  .catalog-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  .catalog-filters button { white-space: nowrap; }
  .continue-learning-section { padding: 70px 0; }
  .featured-next-lesson { grid-template-columns: 1fr; }
  .lesson-visual { min-height: 205px; }
  .featured-lesson-copy { padding: 24px; }
  .daily-plan-section { padding-top: 70px; padding-bottom: 70px; }
  .daily-plan-card { padding: 28px 20px; }
  .daily-plan-intro h2 { font-size: 1.9rem; }
  .daily-task-list label { grid-template-columns: 24px 39px 1fr; }
  .daily-task-list em { display: none; }
  .track-modal-dialog { padding: 24px 19px; }
}

/* Página de exercícios */
.exercises-page { background: #f8f9fd; }
.exercises-hero { position: relative; overflow: hidden; padding: 64px 0 76px; background: linear-gradient(145deg, #f1eeff 0%, #fbfaff 52%, #eef7f5 100%); }
.exercises-hero::after { content: ""; position: absolute; right: -150px; bottom: -210px; width: 480px; height: 480px; border: 78px solid rgba(62,189,141,0.06); border-radius: 50%; }
.exercises-hero-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; align-items: center; gap: 70px; }
.exercise-eyebrow > span { background: #dcf6eb; color: var(--green); }
.exercises-hero h1 { margin-bottom: 20px; font-size: clamp(3.4rem, 5.5vw, 5.7rem); letter-spacing: -0.07em; }
.exercises-hero h1 span { color: var(--green); }
.exercises-hero-copy > p { max-width: 590px; margin-bottom: 29px; color: var(--ink-soft); font-size: 1rem; }
.exercise-hero-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 37px; }
.exercise-hero-stats > div { display: grid; padding: 0 22px; border-right: 1px solid #dbdde6; }
.exercise-hero-stats > div:first-child { padding-left: 0; }
.exercise-hero-stats > div:last-child { border: 0; }
.exercise-hero-stats strong { font-family: "Manrope", sans-serif; font-size: 1.02rem; }
.exercise-hero-stats small { color: var(--ink-soft); font-size: 0.58rem; }
.exercise-hero-visual { position: relative; min-height: 480px; display: grid; place-items: center; }
.exercise-hero-visual::before { content: ""; position: absolute; width: 405px; height: 405px; border-radius: 45% 55% 52% 48% / 56% 46% 54% 44%; background: linear-gradient(145deg, #dcd6fb, #e7e3fb); transform: rotate(8deg); }
.hero-question-card { position: relative; z-index: 2; width: min(92%, 435px); padding: 27px; border: 1px solid rgba(255,255,255,0.85); border-radius: 28px; background: white; box-shadow: 0 27px 65px rgba(51,39,112,0.18); transform: rotate(-1.5deg); }
.hero-question-top { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.09em; }
.hero-question-top strong { padding: 5px 8px; border-radius: 8px; background: #fff0db; color: #a36624; }
.hero-question-subject { display: flex; align-items: center; gap: 10px; margin: 21px 0 16px; }
.hero-question-subject .subject-icon { width: 40px; height: 40px; border-radius: 12px; }
.hero-question-subject p { display: grid; margin: 0; }
.hero-question-subject small { color: var(--purple); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; }
.hero-question-subject strong { font-size: 0.71rem; }
.hero-question-card h2 { margin-bottom: 20px; font-size: 1.5rem; }
.hero-answer-preview { display: grid; gap: 8px; }
.hero-answer-preview span { display: flex; min-height: 41px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--ink-soft); font-size: 0.7rem; }
.hero-answer-preview .selected { border-color: var(--green); background: #ecf9f4; color: #278a66; font-weight: 700; }
.hero-answer-preview b { margin-left: auto; }
.hero-question-footer { display: grid; gap: 8px; margin-top: 17px; color: var(--green); font-size: 0.63rem; font-weight: 800; }
.hero-question-footer .progress-track { height: 5px; }
.exercise-decoration { position: absolute; z-index: 3; display: grid; place-items: center; border-radius: 15px; background: white; box-shadow: var(--shadow); font-family: "Manrope", sans-serif; font-weight: 800; }
.decoration-one { top: 6%; left: 1%; width: 52px; height: 52px; color: var(--purple); transform: rotate(-12deg); }
.decoration-two { right: 2%; bottom: 15%; width: 45px; height: 45px; color: var(--green); transform: rotate(11deg); }
.xp-float { position: absolute; z-index: 3; top: 14%; right: -3%; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 14px; background: white; box-shadow: var(--shadow); transform: rotate(4deg); }
.xp-float > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: #fff0d8; color: #c07928; }
.xp-float p { display: grid; margin: 0; }
.xp-float strong { font-size: 0.68rem; }
.xp-float small { color: var(--ink-soft); font-size: 0.54rem; }

.exercise-overview { border-bottom: 1px solid var(--border); background: white; }
.exercise-overview-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.exercise-overview article { position: relative; display: flex; min-height: 117px; align-items: center; gap: 12px; padding: 20px; border-right: 1px solid var(--border); }
.exercise-overview article:last-child { border: 0; }
.exercise-overview .metric-icon.green { background: #dcf6eb; color: var(--green); }
.exercise-overview p { display: grid; margin: 0; }
.exercise-overview p small { color: var(--ink-soft); font-size: 0.53rem; font-weight: 800; letter-spacing: 0.07em; }
.exercise-overview p strong { font-family: "Manrope", sans-serif; font-size: 0.91rem; }
.exercise-overview p em { color: var(--ink-soft); font-size: 0.55rem; font-style: normal; }
.exercise-overview p em.positive { color: var(--green); }
.mini-ring { --mini-progress: 60%; position: absolute; right: 17px; display: grid; width: 43px; height: 43px; place-items: center; border-radius: 50%; background: radial-gradient(circle at center, white 58%, transparent 59%), conic-gradient(var(--purple) var(--mini-progress), #eceaf4 0); font-size: 0.52rem; font-weight: 800; }

.practice-builder-section { padding-top: 91px; padding-bottom: 98px; }
.practice-builder-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.practice-builder-heading h2 { margin-bottom: 8px; }
.practice-builder-heading p { margin: 0; color: var(--ink-soft); }
.saved-progress-note { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--border); border-radius: 12px; background: white; }
.saved-progress-note > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #dcf6eb; color: var(--green); font-size: 0.67rem; }
.saved-progress-note p { display: grid; margin: 0; }
.saved-progress-note strong { font-size: 0.65rem; }
.saved-progress-note small { color: var(--ink-soft); font-size: 0.54rem; }
.practice-builder-grid { display: grid; grid-template-columns: 1fr 315px; align-items: start; gap: 20px; }
.builder-panel { padding: 31px; border: 1px solid var(--border); border-radius: var(--radius-large); background: white; box-shadow: 0 9px 28px rgba(39,31,86,0.04); }
.builder-fieldset { margin: 0; padding: 0 0 29px; border: 0; border-bottom: 1px solid var(--border); }
.builder-fieldset + .builder-fieldset { padding-top: 27px; }
.builder-fieldset legend { display: flex; align-items: center; gap: 11px; width: 100%; margin-bottom: 18px; padding: 0; }
.builder-fieldset legend > span { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--purple-light); color: var(--purple); font-size: 0.7rem; font-weight: 800; }
.builder-fieldset legend > div { display: grid; }
.builder-fieldset legend strong { font-size: 0.81rem; }
.builder-fieldset legend small { color: var(--ink-soft); font-size: 0.6rem; }
.subject-choice-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.subject-choice-grid button { display: grid; place-items: center; gap: 4px; min-width: 0; padding: 12px 5px; border: 1px solid var(--border); border-radius: 13px; background: #fbfbfd; cursor: pointer; }
.subject-choice-grid button:hover, .subject-choice-grid button.selected { border-color: #b9aaff; background: #f5f2ff; box-shadow: inset 0 0 0 1px #cfc5ff; }
.subject-choice-grid .subject-icon { width: 39px; height: 39px; border-radius: 12px; font-size: 0.77rem; }
.general-subject { background: #eeeaff; color: var(--purple); }
.subject-choice-grid strong { overflow: hidden; max-width: 100%; font-size: 0.61rem; text-overflow: ellipsis; }
.subject-choice-grid small { color: var(--ink-soft); font-size: 0.51rem; }
.difficulty-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.difficulty-choices button { display: flex; align-items: center; gap: 9px; min-height: 57px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 12px; background: #fbfbfd; text-align: left; cursor: pointer; }
.difficulty-choices button:hover, .difficulty-choices button.selected { border-color: #b9aaff; background: #f5f2ff; box-shadow: inset 0 0 0 1px #cfc5ff; }
.difficulty-dot { display: block; flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.difficulty-dot.easy { background: var(--green); }.difficulty-dot.medium { background: var(--orange); }.difficulty-dot.hard { background: #e95d68; }
.difficulty-dot.mixed { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: var(--purple-light); color: var(--purple); font-size: 0.55rem; }
.difficulty-choices p { display: grid; margin: 0; }
.difficulty-choices strong { font-size: 0.65rem; }
.difficulty-choices small { color: var(--ink-soft); font-size: 0.52rem; }
.compact-fieldset { border-bottom: 0; }
.quantity-choices { display: flex; gap: 8px; }
.quantity-choices button { display: flex; min-width: 105px; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fbfbfd; cursor: pointer; }
.quantity-choices button:hover, .quantity-choices button.selected { border-color: #b9aaff; background: #f5f2ff; color: var(--purple); }
.quantity-choices strong { font-size: 0.77rem; }
.quantity-choices small { color: var(--ink-soft); font-size: 0.53rem; }
.builder-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 8px; padding: 17px; border-radius: 15px; background: #f5f3ff; }
.builder-summary > div { display: grid; }
.builder-summary small { color: var(--purple); font-size: 0.51rem; font-weight: 800; letter-spacing: 0.08em; }
.builder-summary strong { font-size: 0.68rem; }
.builder-summary .button { min-height: 44px; padding: 10px 15px; }
.daily-challenge-panel { position: sticky; top: 100px; overflow: hidden; padding: 27px; border-radius: var(--radius-large); background: linear-gradient(150deg, #6748e4, #5033c4); color: white; box-shadow: 0 19px 45px rgba(86,56,217,0.24); text-align: center; }
.daily-challenge-panel::before { content: ""; position: absolute; top: -85px; right: -65px; width: 180px; height: 180px; border: 34px solid rgba(255,255,255,0.07); border-radius: 50%; }
.challenge-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,0.12); color: #ded7ff; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; }
.challenge-day-icon { display: grid; width: 68px; height: 68px; place-content: center; margin: 20px auto; border-radius: 20px; background: white; color: var(--purple); box-shadow: 0 13px 26px rgba(37,20,101,0.25); transform: rotate(-4deg); }
.challenge-day-icon span { font-family: "Manrope", sans-serif; font-size: 1.35rem; line-height: 1; }
.challenge-day-icon small { font-size: 0.49rem; font-weight: 800; }
.daily-challenge-panel h2 { margin-bottom: 10px; font-size: 1.38rem; }
.daily-challenge-panel > p { color: #d5cff8; font-size: 0.68rem; }
.challenge-details { display: grid; grid-template-columns: repeat(3, 1fr); margin: 21px 0; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.challenge-details span { display: grid; border-right: 1px solid rgba(255,255,255,0.1); }
.challenge-details span:last-child { border: 0; }
.challenge-details strong { font-size: 0.77rem; }
.challenge-details small { color: #c7bff2; font-size: 0.52rem; }
.challenge-reward { display: flex; align-items: center; gap: 10px; margin-bottom: 19px; padding: 11px; border-radius: 12px; background: rgba(255,255,255,0.08); text-align: left; }
.challenge-reward > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #ffe8b7; color: #ad6d1d; }
.challenge-reward p { display: grid; margin: 0; }
.challenge-reward strong { font-size: 0.61rem; }
.challenge-reward small { color: #c9c1f0; font-size: 0.51rem; }
.challenge-completed { display: block; margin-top: 12px; color: #a8f0d3; font-size: 0.58rem; }

.quiz-session-section { padding: 62px 0 80px; background: #eff1f7; }
.quiz-session-section[hidden], .quiz-results-section[hidden] { display: none; }
.quiz-session-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; color: var(--ink-soft); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; }
.quiz-session-header > div:first-child { display: flex; align-items: center; gap: 8px; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(62,189,141,0.13); }
.session-timer { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #dfe2ea; border-radius: 9px; background: white; color: var(--ink); letter-spacing: 0; }
.quiz-session-header > button { border: 0; background: transparent; color: #9a6570; font-size: 0.61rem; font-weight: 700; cursor: pointer; }
.quiz-progress-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; margin-bottom: 20px; color: var(--ink-soft); font-size: 0.65rem; }
.quiz-progress-row p { margin: 0; }
.quiz-progress-row .progress-track { height: 6px; }
.quiz-layout { display: grid; grid-template-columns: 1fr 235px; align-items: start; gap: 18px; }
.live-question-card { padding: 34px; border: 1px solid var(--border); border-radius: var(--radius-large); background: white; box-shadow: var(--shadow-small); }
.live-question-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 24px; }
.live-question-meta > span { padding: 5px 8px; border-radius: 999px; font-size: 0.54rem; font-weight: 800; }
.question-subject-pill { background: var(--purple-light); color: var(--purple); }.question-difficulty-pill { background: #fff0dc; color: #ad6b25; }.question-xp-pill { margin-left: auto; background: #fff4d9; color: #a96c1d; }
.question-context { margin-bottom: 8px; color: var(--ink-soft); font-size: 0.7rem; }
.live-question-card > h2 { max-width: 790px; margin-bottom: 25px; font-size: clamp(1.45rem, 3vw, 2.05rem); line-height: 1.38; }
.live-answer-list { display: grid; gap: 9px; }
.live-answer-option { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; min-height: 59px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 13px; background: #fbfbfd; text-align: left; cursor: pointer; }
.live-answer-option:hover:not(:disabled), .live-answer-option.selected { border-color: #b9aaff; background: #f6f3ff; }
.live-answer-option .option-letter { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #edecf3; color: var(--ink-soft); font-size: 0.67rem; font-weight: 800; }
.live-answer-option .option-copy { color: var(--ink); font-size: 0.76rem; }
.live-answer-option .option-state { font-weight: 800; }
.live-answer-option.correct { border-color: var(--green); background: #eaf8f2; }
.live-answer-option.correct .option-letter { background: var(--green); color: white; }
.live-answer-option.correct .option-state { color: var(--green); }
.live-answer-option.wrong { border-color: #e87982; background: #fff0f1; }
.live-answer-option.wrong .option-letter { background: #e87982; color: white; }
.live-answer-option.wrong .option-state { color: #d05b66; }
.live-answer-option:disabled { cursor: default; }
.live-feedback { display: flex; gap: 12px; margin-top: 17px; padding: 14px; border-radius: 13px; background: #eaf8f2; color: #286e56; }
.live-feedback.wrong { background: #fff1e8; color: #8b562e; }
.live-feedback > span { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: rgba(255,255,255,0.65); font-weight: 800; }
.live-feedback div { display: grid; }
.live-feedback strong { font-size: 0.7rem; }
.live-feedback p { margin: 2px 0 0; font-size: 0.65rem; }
.live-question-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.question-help-button { margin-right: auto; padding: 8px; border: 0; background: transparent; color: var(--ink-soft); font-size: 0.65rem; cursor: pointer; }
.live-question-actions .button { min-height: 44px; }
.quiz-side-panel { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: white; }
.quiz-score-ring { --quiz-score: 0%; position: relative; display: grid; width: 115px; height: 115px; place-content: center; margin: 7px auto 22px; border-radius: 50%; background: conic-gradient(var(--purple) var(--quiz-score), #eceaf4 0); text-align: center; }
.quiz-score-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: white; }
.quiz-score-ring strong, .quiz-score-ring small { position: relative; z-index: 1; display: block; }
.quiz-score-ring strong { font-family: "Manrope", sans-serif; font-size: 1.2rem; }
.quiz-score-ring small { color: var(--ink-soft); font-size: 0.51rem; }
.quiz-side-stat { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--border); font-size: 0.62rem; }
.quiz-side-stat span { color: var(--ink-soft); }
.keyboard-tip { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 10px; border-radius: 11px; background: #f3f4f8; }
.keyboard-tip > span { font-size: 1rem; }
.keyboard-tip p { display: grid; margin: 0; }
.keyboard-tip strong { font-size: 0.59rem; }.keyboard-tip small { color: var(--ink-soft); font-size: 0.51rem; }

.quiz-results-section { position: relative; overflow: hidden; padding: 85px 0; background: linear-gradient(145deg, #eeeaff, #f6f4ff); }
.results-card { position: relative; padding: 48px; border: 1px solid #e1dcfb; border-radius: 30px; background: white; box-shadow: var(--shadow); text-align: center; }
.results-card > h2 { max-width: 750px; margin: 0 auto 10px; }
.results-card > p { color: var(--ink-soft); }
.results-celebration span { position: absolute; color: var(--purple); font-size: 1.3rem; }
.results-celebration span:first-child { top: 36px; left: 9%; transform: rotate(-15deg); }.results-celebration span:nth-child(2) { top: 27px; right: 13%; }.results-celebration span:last-child { bottom: 48px; left: 14%; color: var(--green); transform: rotate(11deg); }
.results-main { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 40px; max-width: 760px; margin: 32px auto; }
.results-score-ring { --result-score: 0%; position: relative; display: grid; width: 165px; height: 165px; place-content: center; border-radius: 50%; background: conic-gradient(var(--green) var(--result-score), #eceef3 0); }
.results-score-ring::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: white; }
.results-score-ring strong, .results-score-ring small { position: relative; z-index: 1; display: block; }
.results-score-ring strong { font-family: "Manrope", sans-serif; font-size: 1.75rem; }.results-score-ring small { color: var(--ink-soft); font-size: 0.56rem; }
.results-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.results-stats > div { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; text-align: left; }
.results-stats .metric-icon.green { background: #dcf6eb; color: var(--green); }
.results-stats p { display: grid; margin: 0; }.results-stats strong { font-size: 0.77rem; }.results-stats small { color: var(--ink-soft); font-size: 0.54rem; }
.results-actions { display: flex; justify-content: center; gap: 10px; }

.exercise-performance-section { padding: 92px 0; background: #f0f2f8; }
.subject-performance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.subject-performance-grid article { display: grid; padding: 20px; border: 1px solid var(--border); border-radius: 17px; background: white; }
.subject-performance-grid article > .subject-icon { width: 45px; height: 45px; margin-bottom: 15px; border-radius: 13px; }
.subject-performance-grid article > div:nth-of-type(1) { display: flex; justify-content: space-between; gap: 10px; }
.subject-performance-grid p { display: grid; margin: 0; }.subject-performance-grid p strong { font-size: 0.74rem; }.subject-performance-grid p small { color: var(--ink-soft); font-size: 0.55rem; }
.subject-performance-grid em { color: var(--purple); font-size: 0.78rem; font-style: normal; font-weight: 800; }
.subject-performance-grid .progress-track { height: 5px; margin: 14px 0 8px; }
.subject-performance-grid article > small { color: var(--green); font-size: 0.54rem; }
.subject-performance-grid .needs-practice > small { color: var(--orange); }

.recent-practice-section { display: grid; grid-template-columns: 1fr 315px; align-items: stretch; gap: 18px; padding-top: 90px; padding-bottom: 95px; }
.recent-practice-card { padding: 27px; border: 1px solid var(--border); border-radius: var(--radius-large); background: white; }
.recent-practice-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.recent-practice-heading h2 { margin: 0; font-size: 1.5rem; }
.recent-practice-heading button { padding: 7px; border: 0; background: transparent; color: var(--ink-soft); font-size: 0.57rem; cursor: pointer; }
.practice-history-list { display: grid; }
.history-item { display: grid; grid-template-columns: 42px 1fr auto auto; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid var(--border); }
.history-item .subject-icon { width: 42px; height: 42px; border-radius: 12px; }
.history-item > div { display: grid; }
.history-item strong { font-size: 0.68rem; }.history-item small { color: var(--ink-soft); font-size: 0.54rem; }.history-item > span { padding: 5px 8px; border-radius: 999px; background: #e6f7f0; color: #2e8e6c; font-size: 0.57rem; font-weight: 800; }.history-item > time { color: var(--ink-soft); font-size: 0.54rem; }
.empty-history { padding: 35px 10px; color: var(--ink-soft); font-size: 0.7rem; text-align: center; }
.review-callout { position: relative; overflow: hidden; padding: 28px; border-radius: var(--radius-large); background: linear-gradient(145deg, #17213b, #263354); color: white; }
.review-callout::after { content: ""; position: absolute; right: -70px; bottom: -90px; width: 180px; height: 180px; border: 35px solid rgba(255,255,255,0.05); border-radius: 50%; }
.review-icon { position: relative; z-index: 1; display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 21px; border-radius: 16px; background: rgba(255,255,255,0.1); color: #c5b9ff; font-size: 1.4rem; }
.review-callout h2, .review-callout p, .review-callout button { position: relative; z-index: 1; }
.review-callout h2 { font-size: 1.45rem; }.review-callout p { color: #abb5c9; font-size: 0.69rem; }.review-callout .button { margin-top: 15px; }

.confirm-modal { position: fixed; inset: 0; z-index: 350; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.confirm-modal.open { opacity: 1; pointer-events: auto; }
.confirm-dialog { position: relative; z-index: 1; width: min(430px, 100%); padding: 30px; border-radius: 23px; background: white; box-shadow: 0 25px 70px rgba(10,15,30,0.35); text-align: center; transform: translateY(12px); transition: transform 180ms ease; }
.confirm-modal.open .confirm-dialog { transform: translateY(0); }
.confirm-icon { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 14px; border-radius: 16px; background: #fff0e7; color: #cc6a3c; font-family: "Manrope", sans-serif; font-size: 1.3rem; }
.confirm-dialog h2 { margin-bottom: 8px; font-size: 1.35rem; }.confirm-dialog p { color: var(--ink-soft); font-size: 0.71rem; }.confirm-dialog > div { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.danger-button { background: #d95f67; color: white; }

@media (max-width: 1080px) {
  .subject-choice-grid { grid-template-columns: repeat(3, 1fr); }
  .difficulty-choices { grid-template-columns: repeat(2, 1fr); }
  .practice-builder-grid, .recent-practice-section { grid-template-columns: 1fr 280px; }
  .subject-performance-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .exercises-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .exercises-hero-copy > p { margin-inline: auto; }
  .exercises-hero .hero-actions, .exercise-hero-stats { justify-content: center; }
  .exercise-hero-visual { min-height: 450px; }
  .exercise-overview-grid { grid-template-columns: repeat(2, 1fr); }
  .exercise-overview article:nth-child(2) { border-right: 0; }.exercise-overview article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .practice-builder-grid, .recent-practice-section { grid-template-columns: 1fr; }
  .daily-challenge-panel { position: static; max-width: 520px; width: 100%; margin-inline: auto; }
  .quiz-layout { grid-template-columns: 1fr; }
  .quiz-side-panel { display: grid; grid-template-columns: 120px repeat(3, 1fr); align-items: center; gap: 10px; }
  .quiz-side-panel .eyebrow, .keyboard-tip { display: none; }
  .quiz-score-ring { grid-row: 1; margin: 0; }
  .quiz-side-stat { border-top: 0; border-left: 1px solid var(--border); padding: 10px; flex-direction: column; }
}

@media (max-width: 650px) {
  .exercises-hero { padding-top: 48px; padding-bottom: 58px; }
  .exercises-hero h1 { font-size: clamp(2.9rem, 14vw, 4.5rem); }
  .exercises-hero .hero-actions { flex-direction: column; }
  .exercises-hero .hero-actions .button { width: 100%; }
  .exercise-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
  .exercise-hero-stats > div { padding: 0 8px; }
  .exercise-hero-visual { min-height: 400px; margin-inline: -8px; }
  .hero-question-card { width: 100%; padding: 22px; }
  .exercise-decoration, .xp-float { display: none; }
  .exercise-overview article { min-height: 100px; padding: 13px; }
  .exercise-overview .mini-ring { display: none; }
  .practice-builder-section { padding-top: 65px; padding-bottom: 70px; }
  .practice-builder-heading { align-items: flex-start; flex-direction: column; }
  .saved-progress-note { width: 100%; }
  .builder-panel { padding: 21px 16px; }
  .subject-choice-grid { grid-template-columns: repeat(2, 1fr); }
  .difficulty-choices { grid-template-columns: 1fr; }
  .quantity-choices { display: grid; grid-template-columns: repeat(3, 1fr); }
  .quantity-choices button { min-width: 0; flex-direction: column; gap: 0; }
  .builder-summary { align-items: stretch; flex-direction: column; }
  .builder-summary .button { width: 100%; }
  .quiz-session-section { padding-top: 45px; }
  .quiz-session-header { flex-wrap: wrap; }
  .quiz-progress-row { grid-template-columns: 1fr auto; }
  .quiz-progress-row .progress-track { grid-column: 1 / -1; grid-row: 2; }
  .live-question-card { padding: 23px 16px; }
  .live-question-meta { margin-bottom: 18px; }
  .question-xp-pill { margin-left: 0; }
  .live-answer-option { grid-template-columns: 31px 1fr auto; padding: 9px; }
  .live-question-actions { align-items: stretch; flex-direction: column; }
  .question-help-button { margin: 0; order: 3; }
  .quiz-side-panel { grid-template-columns: repeat(3, 1fr); padding: 15px; }
  .quiz-score-ring { display: none; }
  .quiz-side-stat { border-left: 0; text-align: center; }
  .results-card { padding: 37px 18px; }
  .results-main { grid-template-columns: 1fr; gap: 23px; }
  .results-score-ring { margin-inline: auto; }
  .results-stats { grid-template-columns: 1fr; }
  .results-actions { flex-direction: column-reverse; }
  .subject-performance-grid { grid-template-columns: 1fr; }
  .recent-practice-section { padding-top: 70px; padding-bottom: 70px; }
  .history-item { grid-template-columns: 38px 1fr auto; }
  .history-item > time { display: none; }
  .confirm-dialog > div { flex-direction: column; }
}

/* Lesson page */
.lesson-page { background: #f6f7fb; }
.lesson-hero { position: relative; overflow: hidden; padding: 55px 0 78px; background: linear-gradient(145deg, #f2efff 0%, #faf9ff 52%, #edf5ff 100%); }
.lesson-hero::before { content: ""; position: absolute; top: -215px; right: -120px; width: 520px; height: 520px; border: 90px solid rgba(108,76,241,0.045); border-radius: 50%; }
.lesson-hero .breadcrumb { margin-bottom: 38px; }
.lesson-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 390px; align-items: center; gap: 75px; }
.lesson-hero-copy { max-width: 720px; }
.lesson-hero-copy .eyebrow > span { width: auto; height: auto; background: transparent; }
.lesson-kicker { margin-bottom: 9px; color: var(--purple); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; }
.lesson-hero h1 { margin-bottom: 22px; font-size: clamp(3.4rem, 6vw, 5.8rem); letter-spacing: -0.075em; }
.lesson-hero h1 span { color: var(--purple); }
.lesson-hero-copy > p:not(.lesson-kicker) { max-width: 670px; margin-bottom: 28px; color: var(--ink-soft); font-size: 1rem; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.lesson-meta > span { display: grid; min-width: 150px; padding: 12px 15px; border: 1px solid rgba(108,76,241,0.1); border-radius: 13px; background: rgba(255,255,255,0.7); }
.lesson-meta strong { font-size: 0.72rem; }
.lesson-meta small { color: var(--ink-soft); font-size: 0.57rem; }
.lesson-hero-card { position: relative; padding: 29px; border: 1px solid rgba(255,255,255,0.9); border-radius: 29px; background: rgba(255,255,255,0.94); box-shadow: 0 25px 60px rgba(57,45,117,0.15); }
.lesson-hero-icon { display: grid; place-content: center; width: 128px; height: 128px; margin: -6px auto 24px; border-radius: 37px 37px 37px 12px; background: linear-gradient(145deg, #ede9ff, #ddd5ff); color: var(--purple); text-align: center; transform: rotate(-3deg); }
.lesson-hero-icon span { font-family: "Manrope", sans-serif; font-size: 1.5rem; font-weight: 800; }
.lesson-hero-icon small { font-size: 0.61rem; font-weight: 700; }
.lesson-hero-card > p:first-of-type { margin-bottom: 8px; color: var(--purple); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.11em; }
.lesson-progress-summary { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.lesson-progress-summary strong { font-family: "Manrope", sans-serif; font-size: 1.8rem; }
.lesson-progress-summary span { color: var(--ink-soft); font-size: 0.66rem; }
.lesson-main-progress { height: 9px; }
.lesson-resume-message { margin: 15px 0 0; color: var(--ink-soft); font-size: 0.67rem; }

.lesson-workspace { display: grid; grid-template-columns: 255px minmax(0, 1fr); align-items: start; gap: 26px; padding-top: 72px; padding-bottom: 100px; }
.lesson-outline { position: sticky; top: 102px; padding: 22px; border: 1px solid var(--border); border-radius: 21px; background: white; box-shadow: var(--shadow-small); }
.lesson-outline .eyebrow { margin-bottom: 15px; }
.lesson-outline nav { display: grid; }
.lesson-outline nav button { display: grid; grid-template-columns: 29px 1fr 15px; align-items: center; gap: 10px; width: 100%; padding: 12px 4px; border: 0; border-top: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; }
.lesson-outline nav button > span:first-child { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: #eff0f5; color: var(--ink-soft); font-size: 0.62rem; font-weight: 800; }
.lesson-outline nav button > span:nth-child(2) { display: grid; }
.lesson-outline nav strong { font-size: 0.64rem; }
.lesson-outline nav small { color: var(--ink-soft); font-size: 0.52rem; }
.lesson-outline nav em { color: transparent; font-size: 0.72rem; font-style: normal; font-weight: 800; }
.lesson-outline nav button:hover strong, .lesson-outline nav button.current strong { color: var(--purple); }
.lesson-outline nav button.current > span:first-child { background: var(--purple); color: white; box-shadow: 0 6px 14px rgba(108,76,241,0.2); }
.lesson-outline nav button.completed > span:first-child { background: #daf5e9; color: #278361; }
.lesson-outline nav button.completed em { color: var(--green); }
.outline-reward { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding: 11px; border-radius: 12px; background: #fff7e7; }
.outline-reward > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #ffe8b3; color: #ad6c1f; }
.outline-reward p { display: grid; margin: 0; }
.outline-reward strong { font-size: 0.58rem; }
.outline-reward small { color: #8b7558; font-size: 0.5rem; }

.lesson-content { display: grid; gap: 22px; }
.lesson-content-section { scroll-margin-top: 105px; padding: 38px; border: 1px solid var(--border); border-radius: 27px; background: white; box-shadow: 0 10px 30px rgba(39,31,86,0.045); }
.lesson-content-section:focus { outline: none; }
.lesson-content-section:focus-visible { outline: 3px solid rgba(57,148,255,0.35); outline-offset: 4px; }
.lesson-section-heading > span { display: inline-block; margin-bottom: 9px; color: var(--purple); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; }
.lesson-section-heading h2 { max-width: 750px; margin-bottom: 12px; font-size: clamp(1.8rem, 3vw, 2.45rem); }
.lesson-section-heading p { max-width: 730px; margin-bottom: 28px; color: var(--ink-soft); font-size: 0.82rem; }
.formula-card { display: grid; place-items: center; padding: 31px; border: 1px solid #ded8ff; border-radius: 20px; background: linear-gradient(145deg, #f4f1ff, #faf9ff); text-align: center; }
.formula-card > span, .worked-example-head > span, .bhaskara-formulas span, .solution-intro > span { color: var(--purple); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.11em; }
.formula-card > strong { margin: 8px 0 5px; color: var(--purple-dark); font-family: "Manrope", sans-serif; font-size: clamp(1.7rem, 4vw, 2.65rem); letter-spacing: -0.04em; }
.formula-card small { color: var(--ink-soft); font-size: 0.68rem; }
.lesson-explanation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.lesson-explanation-grid > div, .coefficient-values > div { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; }
.coefficient-chip { display: grid; flex: 0 0 auto; width: 35px; height: 35px; place-items: center; border-radius: 10px; font-family: "Manrope", sans-serif; font-weight: 800; }
.coefficient-a { background: var(--purple-light); color: var(--purple); }
.coefficient-b { background: #e3f1ff; color: #287fc9; }
.coefficient-c { background: #fff0dd; color: #bd7126; }
.lesson-explanation-grid p, .coefficient-values p { display: grid; margin: 0; }
.lesson-explanation-grid strong { font-size: 0.64rem; }
.lesson-explanation-grid small, .coefficient-values small { color: var(--ink-soft); font-size: 0.53rem; }
.lesson-tip, .lesson-warning { display: flex; align-items: flex-start; gap: 12px; margin-top: 19px; padding: 15px; border-radius: 14px; background: #eaf8f2; color: #286e56; }
.lesson-tip > span, .lesson-warning > span { display: grid; flex: 0 0 auto; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: rgba(255,255,255,0.7); }
.lesson-tip p, .lesson-warning p { margin: 0; font-size: 0.67rem; }
.lesson-tip strong, .lesson-warning strong { display: block; }
.lesson-warning { background: #fff4e9; color: #875932; }
.lesson-warning > span { font-weight: 800; }
.lesson-next-button { margin-top: 25px; margin-left: auto; }
.lesson-next-button.completed { border-color: #b7e4d2; background: #eaf8f2; color: #277e5f; box-shadow: none; }
.lesson-next-button:disabled { cursor: default; transform: none; }

.worked-example { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; }
.worked-example-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px; background: #f5f3ff; }
.worked-example-head strong { font-family: "Manrope", sans-serif; font-size: 1.35rem; }
.coefficient-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 19px; }
.coefficient-values strong { font-size: 1.05rem; }
.bhaskara-formulas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bhaskara-formulas > div { display: grid; padding: 22px; border: 1px solid #ded9ff; border-radius: 17px; background: #f7f5ff; text-align: center; }
.bhaskara-formulas strong { margin-top: 8px; color: var(--purple-dark); font-family: "Manrope", sans-serif; font-size: clamp(1.25rem, 3vw, 1.65rem); }
.solution-steps { overflow: hidden; margin-top: 16px; border: 1px solid var(--border); border-radius: 20px; }
.solution-intro { display: grid; padding: 20px 23px; background: var(--ink); color: white; }
.solution-intro > span { color: #b8a9ff; }
.solution-intro strong { margin: 6px 0 2px; font-size: 1.2rem; }
.solution-intro small { color: #aeb6c8; font-size: 0.61rem; }
.solution-steps ol { display: grid; gap: 0; margin: 0; padding: 10px 22px; list-style: none; }
.solution-steps li { display: flex; align-items: center; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.solution-steps li:last-child { border-bottom: 0; }
.solution-steps li > span { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: var(--purple-light); color: var(--purple); font-size: 0.62rem; font-weight: 800; }
.solution-steps p { display: grid; margin: 0; }
.solution-steps strong { font-size: 0.69rem; }
.solution-steps small { color: var(--ink-soft); font-size: 0.62rem; }

.knowledge-question > p { margin-bottom: 18px; padding: 20px; border-radius: 15px; background: var(--ink); color: white; font-size: 1.05rem; text-align: center; }
.knowledge-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.knowledge-options button { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 11px; min-height: 57px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; background: #fbfbfd; text-align: left; cursor: pointer; }
.knowledge-options button > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: #ecebf2; color: var(--ink-soft); font-size: 0.65rem; font-weight: 800; }
.knowledge-options button:hover:not(:disabled), .knowledge-options button.selected { border-color: #b9aaff; background: #f6f3ff; }
.knowledge-options button.correct { border-color: var(--green); background: #eaf8f2; }
.knowledge-options button.correct > span { background: var(--green); color: white; }
.knowledge-options button.wrong { border-color: #e87982; background: #fff0f1; }
.knowledge-options button.wrong > span { background: #e87982; color: white; }
.knowledge-options em { font-style: normal; font-weight: 800; }
.knowledge-options button.correct em { color: var(--green); }
.knowledge-options button.wrong em { color: #d05b66; }
.knowledge-feedback { margin-top: 13px; padding: 14px; border-radius: 13px; font-size: 0.68rem; }
.knowledge-feedback strong { display: block; }
.knowledge-feedback.correct { background: #eaf8f2; color: #286e56; }
.knowledge-feedback.wrong { background: #fff1e8; color: #8b562e; }

.lesson-completion-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 31px; border-radius: 26px; background: linear-gradient(145deg, #17213b, #283653); color: white; box-shadow: var(--shadow); }
.lesson-completion-card.completed { background: linear-gradient(145deg, #175a48, #23765d); }
.completion-icon { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 20px; background: rgba(255,255,255,0.1); color: #bcb0ff; font-size: 1.8rem; font-weight: 800; }
.lesson-completion-card.completed .completion-icon { color: #a8f0d3; }
.lesson-completion-card .eyebrow { color: #c8bcff; background: rgba(255,255,255,0.08); }
.lesson-completion-card h2 { margin-bottom: 7px; font-size: 1.55rem; }
.lesson-completion-card p { margin-bottom: 13px; color: #abb5c9; font-size: 0.7rem; }
.lesson-completion-card.completed p { color: #c4e6db; }
.completion-rewards { display: flex; flex-wrap: wrap; gap: 7px; }
.completion-rewards span { padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,0.08); color: #d8d2f2; font-size: 0.55rem; font-weight: 700; }
.completion-actions { display: grid; min-width: 210px; gap: 8px; }
.complete-lesson-button:disabled, #complete-lesson-button:disabled { background: #485268; color: #8f99aa; box-shadow: none; cursor: not-allowed; transform: none; }
.lesson-completion-card [hidden] { display: none; }

.lesson-outline button:focus-visible, .knowledge-options button:focus-visible { outline: 3px solid rgba(57,148,255,0.4); outline-offset: 3px; }

@media (max-width: 980px) {
  .lesson-hero-grid { grid-template-columns: 1fr 330px; gap: 38px; }
  .lesson-workspace { grid-template-columns: 1fr; }
  .lesson-outline { position: static; }
  .lesson-outline nav { grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
  .lesson-completion-card { grid-template-columns: auto 1fr; }
  .completion-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 740px) {
  .lesson-hero { padding-top: 45px; padding-bottom: 58px; }
  .lesson-hero-grid { grid-template-columns: 1fr; }
  .lesson-hero-card { max-width: 430px; width: 100%; margin-inline: auto; }
  .lesson-meta > span { flex: 1 1 135px; }
  .lesson-workspace { width: min(calc(100% - 28px), var(--container)); padding-top: 50px; padding-bottom: 70px; }
  .lesson-content-section { padding: 27px 19px; }
  .lesson-explanation-grid, .coefficient-values { grid-template-columns: 1fr; }
  .worked-example-head { align-items: flex-start; flex-direction: column; }
  .bhaskara-formulas { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .lesson-hero h1 { font-size: clamp(3.1rem, 15vw, 4.3rem); }
  .lesson-outline nav { grid-template-columns: 1fr; }
  .knowledge-options { grid-template-columns: 1fr; }
  .lesson-completion-card { grid-template-columns: 1fr; text-align: center; }
  .completion-icon { margin-inline: auto; }
  .completion-rewards { justify-content: center; }
  .completion-actions { grid-column: auto; grid-template-columns: 1fr; min-width: 0; }
  .solution-steps small { line-height: 1.55; }
}

/* Identidade Beta e páginas institucionais */
.brand-beta {
  align-self: flex-start;
  margin: 4px 0 0 -4px;
  padding: 3px 6px;
  border: 1px solid #cec4ff;
  border-radius: 999px;
  background: #f0edff;
  color: var(--purple);
  font-family: "DM Sans", sans-serif;
  font-size: 0.43rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
}
.footer-brand .brand-beta { margin-top: 2px; }
.beta-notice { border-bottom: 1px solid #ded8ff; background: #eeeaff; color: #4d3aa9; }
.beta-notice > div { min-height: 39px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.beta-notice p { margin: 0; font-size: 0.68rem; font-weight: 600; }
.beta-notice a { border-bottom: 1px solid currentColor; font-size: 0.65rem; font-weight: 800; }
.beta-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; border-radius: 999px; background: var(--purple); color: white; font-size: 0.51rem; font-weight: 800; letter-spacing: 0.11em; line-height: 1; }
.header-cta { margin-left: 6px; padding: 9px 13px; border-radius: 10px; background: var(--ink); color: white; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.header-cta:hover { background: var(--purple-dark); }
button[data-coming-soon] { cursor: help; }
.button[data-coming-soon] { border-color: #d9d4e8; background: #eceaf2; color: #6f7180; box-shadow: none; filter: none; }
.button[data-coming-soon]:hover { background: #e5e2ed; color: #5c5e6c; box-shadow: none; transform: none; }
.profile-button[data-coming-soon] .profile-copy small::after { content: " · Em breve"; color: var(--purple); font-weight: 700; }
.quick-lessons button[data-coming-soon] { border-color: #d9d5e7; background: #eeecf3; color: #77798a; box-shadow: none; }
.text-button[data-coming-soon] { color: #77798a; }
.catalog-card-button[data-coming-soon] { color: #77798a; }
.priority-card-head button[data-coming-soon] { background: #efedf4; color: #77798a; box-shadow: none; }

.info-page { background: #f8f9fd; }
.info-hero { position: relative; overflow: hidden; padding: 84px 0 92px; background: linear-gradient(145deg, #f1edff 0%, #faf9ff 52%, #edf5ff 100%); }
.info-hero::before { content: ""; position: absolute; top: -210px; right: -140px; width: 520px; height: 520px; border: 85px solid rgba(108,76,241,0.045); border-radius: 50%; }
.info-hero-grid { position: relative; display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: 75px; }
.info-hero h1, .legal-hero h1 { max-width: 820px; margin-bottom: 22px; font-size: clamp(3rem, 5.8vw, 5.6rem); letter-spacing: -0.07em; }
.info-hero h1 span, .legal-hero h1 span { color: var(--purple); }
.info-hero-grid > div > p { max-width: 690px; margin-bottom: 0; color: var(--ink-soft); font-size: 1.03rem; }
.info-hero-card { padding: 30px; border: 1px solid rgba(255,255,255,0.9); border-radius: 27px; background: rgba(255,255,255,0.94); box-shadow: 0 25px 60px rgba(57,45,117,0.14); }
.info-hero-card h2 { margin: 17px 0 12px; font-size: 1.65rem; }
.info-hero-card p { margin-bottom: 23px; color: var(--ink-soft); font-size: 0.78rem; }
.info-section { padding-top: 88px; padding-bottom: 88px; }
.info-section-heading { max-width: 760px; margin-bottom: 32px; }
.info-section-heading p { margin-bottom: 0; color: var(--ink-soft); }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.value-grid article { padding: 28px; border: 1px solid var(--border); border-radius: 21px; background: white; box-shadow: 0 8px 24px rgba(39,31,86,0.04); }
.value-grid article > span { display: grid; width: 39px; height: 39px; place-items: center; margin-bottom: 20px; border-radius: 12px; background: var(--purple-light); color: var(--purple); font-weight: 800; }
.value-grid h3 { margin-bottom: 8px; font-size: 1.12rem; }
.value-grid p { margin: 0; color: var(--ink-soft); font-size: 0.76rem; }
.info-band { padding: 84px 0; background: var(--ink); color: white; }
.info-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: start; gap: 22px; }
.info-card, .info-checklist { padding: 32px; border: 1px solid rgba(255,255,255,0.09); border-radius: 25px; background: rgba(255,255,255,0.055); }
.info-card h2 { max-width: 660px; margin-bottom: 17px; }
.info-card p { max-width: 700px; color: #b6bfd1; font-size: 0.82rem; }
.info-card p:last-child { margin-bottom: 0; }
.info-checklist h3 { margin-bottom: 18px; font-size: 1.1rem; }
.info-checklist ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.info-checklist li { display: flex; align-items: center; gap: 10px; color: #dbe1ed; font-size: 0.74rem; }
.info-checklist li span { display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: rgba(62,189,141,0.18); color: #79ddb6; font-weight: 800; }
.info-checklist li.pending { color: #9fa9bd; }
.info-checklist li.pending span { background: rgba(255,255,255,0.08); color: #b8c0cf; }
.contact-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: 39px; border: 1px solid #ded8ff; border-radius: 28px; background: linear-gradient(135deg, #f0ecff, #fbfaff); }
.contact-card h2 { margin-bottom: 10px; }
.contact-card > div:first-child > p { max-width: 740px; margin: 0; color: var(--ink-soft); }
.contact-status { display: flex; align-items: center; gap: 12px; max-width: 330px; padding: 16px; border-radius: 16px; background: white; box-shadow: var(--shadow-small); }
.contact-status > span { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #fff0dc; color: #b26b24; font-weight: 800; }
.contact-status p { display: grid; margin: 0; }
.contact-status strong { font-size: 0.67rem; }
.contact-status small { color: var(--ink-soft); font-size: 0.57rem; }
.data-control { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 0; }
.data-control h2 { margin-bottom: 8px; font-size: 1.6rem; }
.data-control p { margin: 0; color: var(--ink-soft); }

.narrow-container { width: min(calc(100% - 40px), 940px); margin-inline: auto; }
.legal-hero { padding: 76px 0 68px; border-bottom: 1px solid #e3dff8; background: linear-gradient(145deg, #f2efff, #fbfaff); text-align: center; }
.legal-hero h1 { max-width: 900px; margin-inline: auto; font-size: clamp(3rem, 5.6vw, 5.2rem); }
.legal-hero p { max-width: 760px; margin: 0 auto; color: var(--ink-soft); font-size: 0.94rem; }
.document-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.document-meta span { padding: 6px 10px; border: 1px solid #ddd8f4; border-radius: 999px; background: rgba(255,255,255,0.72); color: #69617e; font-size: 0.61rem; font-weight: 700; }
.legal-layout { display: grid; grid-template-columns: 210px minmax(0, 760px); justify-content: center; align-items: start; gap: 62px; padding-top: 75px; padding-bottom: 100px; }
.legal-index { position: sticky; top: 112px; display: grid; gap: 8px; padding: 20px; border: 1px solid var(--border); border-radius: 17px; background: white; box-shadow: var(--shadow-small); }
.legal-index strong { margin-bottom: 5px; font-size: 0.7rem; }
.legal-index a { color: var(--ink-soft); font-size: 0.67rem; }
.legal-index a:hover { color: var(--purple); }
.legal-content { min-width: 0; }
.legal-content section { scroll-margin-top: 115px; padding: 0 0 46px; margin-bottom: 46px; border-bottom: 1px solid var(--border); }
.legal-content section:last-child { margin-bottom: 0; border-bottom: 0; }
.section-number { display: block; margin-bottom: 8px; color: var(--purple); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; }
.legal-content h2 { margin-bottom: 17px; font-size: clamp(1.75rem, 3vw, 2.35rem); }
.legal-content p, .legal-content li { color: var(--ink-soft); font-size: 0.83rem; }
.legal-content a { color: var(--purple-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.legal-content ul { display: grid; gap: 8px; padding-left: 21px; }
.plain-language-box, .legal-warning { margin: 23px 0 0; padding: 18px 20px; border-radius: 15px; background: #efecff; color: #4e3e9b; }
.plain-language-box strong, .legal-warning strong { display: block; margin-bottom: 4px; font-size: 0.7rem; }
.plain-language-box p, .legal-warning p { margin: 0; color: inherit; font-size: 0.73rem; }
.legal-warning { background: #fff3e5; color: #805425; }
.legal-content .button { margin-top: 8px; color: var(--ink); text-decoration: none; }

.credits-hero { padding-bottom: 76px; }
.credits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.credit-card { display: flex; min-height: 280px; flex-direction: column; align-items: flex-start; padding: 27px; border: 1px solid var(--border); border-radius: 21px; background: white; box-shadow: 0 8px 24px rgba(39,31,86,0.04); }
.credit-card-wide { min-height: 0; grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 34px; background: var(--ink); color: white; }
.credit-number { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: rgba(255,255,255,0.09); color: #c9bdff; font-weight: 800; }
.credit-card-wide h2 { margin-bottom: 9px; font-size: 1.6rem; }
.credit-card-wide p { max-width: 850px; margin: 0; color: #b5bed0; font-size: 0.8rem; }
.credit-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 20px; border-radius: 14px; background: var(--purple-light); color: var(--purple); font-family: "Manrope", sans-serif; font-size: 0.7rem; font-weight: 800; }
.credit-card h3 { margin-bottom: 9px; font-size: 1.05rem; }
.credit-card > p { margin-bottom: 20px; color: var(--ink-soft); font-size: 0.75rem; }
.credit-card > a { margin-top: auto; color: var(--purple); font-size: 0.68rem; font-weight: 800; }
.credit-label { margin-top: auto; padding: 5px 8px; border-radius: 999px; background: #f0eef6; color: #6c6d7d; font-size: 0.53rem; font-weight: 800; letter-spacing: 0.08em; }

.not-found-page { min-height: 100vh; display: flex; flex-direction: column; }
.not-found-page .site-header { position: static; }
.not-found-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 620px; padding: 70px 20px; text-align: center; }
.not-found-visual { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 25px; font-family: "Manrope", sans-serif; font-size: clamp(4.5rem, 12vw, 8rem); font-weight: 800; letter-spacing: -0.08em; }
.not-found-visual span { color: var(--ink); }
.not-found-visual strong { display: grid; width: 0.9em; height: 0.9em; place-items: center; border-radius: 25%; background: var(--purple); color: white; font-size: 0.6em; transform: rotate(-7deg); }
.not-found-main h1 { margin-bottom: 12px; font-size: clamp(2rem, 5vw, 3.4rem); }
.not-found-main > p { max-width: 570px; margin-bottom: 28px; color: var(--ink-soft); }

@media (max-width: 1050px) {
  .header-cta { display: none; }
  .info-hero-grid { grid-template-columns: 1fr 360px; gap: 38px; }
  .credits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .info-page .menu-button { margin-left: auto; }
  .info-page .main-navigation { right: 20px; left: 20px; }
  .beta-notice > div { justify-content: flex-start; }
  .info-hero { padding: 65px 0 74px; }
  .info-hero-grid { grid-template-columns: 1fr; }
  .info-hero-card { max-width: 540px; }
  .value-grid { grid-template-columns: 1fr; }
  .info-layout { grid-template-columns: 1fr; }
  .contact-card { grid-template-columns: 1fr; }
  .data-control { align-items: flex-start; flex-direction: column; }
  .legal-layout { grid-template-columns: 1fr; gap: 30px; }
  .legal-index { position: static; grid-template-columns: repeat(3, 1fr); }
  .legal-index strong { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .brand-beta { margin-left: -6px; }
  .beta-notice > div { min-height: 49px; gap: 7px; }
  .beta-notice p { flex: 1; font-size: 0.58rem; line-height: 1.3; }
  .beta-notice a { font-size: 0.58rem; white-space: nowrap; }
  .info-hero h1, .legal-hero h1 { font-size: clamp(2.7rem, 14vw, 4.3rem); }
  .info-hero-card { padding: 24px; }
  .info-section { padding-top: 65px; padding-bottom: 65px; }
  .info-card, .info-checklist { padding: 24px 20px; }
  .contact-card { padding: 28px 22px; }
  .data-control .button { width: 100%; }
  .narrow-container { width: min(calc(100% - 28px), 940px); }
  .legal-hero { padding: 60px 0 54px; }
  .legal-layout { padding-top: 48px; padding-bottom: 75px; }
  .legal-index { grid-template-columns: repeat(2, 1fr); }
  .legal-content section { padding-bottom: 35px; margin-bottom: 35px; }
  .credits-grid { grid-template-columns: 1fr; }
  .credit-card-wide { grid-template-columns: 1fr; }
  .credit-card { min-height: 0; }
  .not-found-main { min-height: 520px; }
}

/* Autenticação e área individual do aluno */
html.auth-pending body[data-auth-required="true"] > * { opacity: 0; pointer-events: none; }
html.auth-pending body[data-auth-required="true"]::before {
  content: "Verificando seu acesso…";
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--background);
  color: var(--ink-soft);
  font-weight: 700;
}

.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 18%, rgba(108, 76, 241, 0.13), transparent 29%),
    radial-gradient(circle at 87% 82%, rgba(57, 148, 255, 0.11), transparent 27%),
    #f8f9fd;
}
.auth-header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.auth-back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; }
.auth-back-link:hover { color: var(--purple); }
.auth-main { min-height: calc(100vh - 86px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(370px, 0.72fr); align-items: center; gap: clamp(50px, 8vw, 120px); padding-top: 45px; padding-bottom: 85px; }
.auth-promise h1 { margin-bottom: 23px; font-size: clamp(3.1rem, 5.8vw, 5.8rem); letter-spacing: -0.07em; }
.auth-promise h1 span { color: var(--purple); }
.auth-promise > p { max-width: 650px; margin-bottom: 34px; color: var(--ink-soft); font-size: 1.04rem; }
.auth-benefits { display: grid; max-width: 650px; gap: 16px; padding: 0; margin: 0; list-style: none; }
.auth-benefits li { display: flex; align-items: center; gap: 14px; }
.auth-benefits li > span { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: white; color: var(--purple); box-shadow: var(--shadow-small); font-weight: 800; }
.auth-benefits div { display: grid; gap: 2px; }
.auth-benefits strong { font-size: 0.84rem; }
.auth-benefits small { color: var(--ink-soft); font-size: 0.72rem; line-height: 1.5; }
.auth-benefits code { padding: 1px 5px; border-radius: 5px; background: #f0edff; color: var(--purple-dark); font: inherit; font-weight: 800; }
.auth-card { position: relative; overflow: hidden; padding: clamp(32px, 4vw, 50px); border: 1px solid rgba(221, 217, 239, 0.92); border-radius: 30px; background: rgba(255, 255, 255, 0.93); box-shadow: 0 28px 70px rgba(32, 31, 59, 0.13); }
.auth-card::before { content: ""; position: absolute; top: -85px; right: -75px; width: 190px; height: 190px; border: 35px solid rgba(108, 76, 241, 0.055); border-radius: 50%; }
.auth-card-icon { position: relative; display: grid; width: 52px; height: 52px; margin-bottom: 24px; place-items: center; border-radius: 17px; background: linear-gradient(135deg, #7659f4, #4d35c7); color: white; box-shadow: 0 13px 25px rgba(108, 76, 241, 0.28); font-family: "Manrope", sans-serif; font-size: 1.2rem; font-weight: 800; }
.auth-card h2 { margin-bottom: 12px; font-size: clamp(2rem, 3vw, 2.7rem); }
.auth-card > p:not(.auth-status, .auth-assurance, .auth-switch, .auth-legal) { margin-bottom: 27px; color: var(--ink-soft); font-size: 0.83rem; line-height: 1.68; }
.google-auth-button { display: flex; width: 100%; min-height: 57px; align-items: center; justify-content: center; gap: 13px; padding: 13px 20px; border: 1px solid #dcdde5; border-radius: 14px; background: white; color: #252735; box-shadow: 0 8px 18px rgba(25, 27, 44, 0.08); font-family: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.google-auth-button:hover:not(:disabled) { border-color: #bcb4e7; box-shadow: 0 12px 24px rgba(64, 48, 131, 0.12); transform: translateY(-2px); }
.google-auth-button:focus-visible, .student-signout:focus-visible { outline: 3px solid rgba(57, 148, 255, 0.42); outline-offset: 3px; }
.google-auth-button:disabled { cursor: wait; opacity: 0.66; }
.google-mark { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #e3e3e3; border-radius: 50%; background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0); color: transparent; font-family: Arial, sans-serif; font-size: 1.02rem; font-weight: 800; background-clip: text; -webkit-background-clip: text; }
.auth-status { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; background: #eef5ff; color: #285b9d; font-size: 0.72rem; font-weight: 700; line-height: 1.45; }
.auth-status[data-status="error"] { background: #fff0ef; color: #a33c34; }
.auth-assurance { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 15px 0 26px; color: #747687; font-size: 0.66rem; text-align: center; }
.auth-switch { padding-top: 22px; margin-bottom: 13px; border-top: 1px solid var(--border); color: var(--ink-soft); font-size: 0.75rem; text-align: center; }
.auth-switch a, .auth-legal a { color: var(--purple); font-weight: 800; }
.auth-legal { margin: 0; color: #858695; font-size: 0.61rem; line-height: 1.55; text-align: center; }
.callback-page { display: grid; place-items: center; padding: 24px; }
.callback-card { display: grid; width: min(100%, 500px); justify-items: center; padding: 48px 38px; border: 1px solid var(--border); border-radius: 28px; background: white; box-shadow: var(--shadow); text-align: center; }
.callback-card .brand { margin-bottom: 36px; }
.callback-spinner { width: 48px; height: 48px; margin-bottom: 24px; border: 5px solid #e8e3ff; border-top-color: var(--purple); border-radius: 50%; animation: auth-spin 800ms linear infinite; }
.callback-card h1 { margin-bottom: 10px; font-size: 1.7rem; }
.callback-card > p { margin: 0; color: var(--ink-soft); font-size: 0.8rem; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.student-page { background: #f8f9fd; }
.student-hero { position: relative; overflow: hidden; padding: 78px 0 84px; background: linear-gradient(135deg, #171d32 0%, #25204b 58%, #34245f 100%); color: white; }
.student-hero::before { content: ""; position: absolute; top: -300px; right: -180px; width: 610px; height: 610px; border: 95px solid rgba(255, 255, 255, 0.035); border-radius: 50%; }
.student-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 390px; align-items: center; gap: 70px; }
.student-hero h1 { margin-bottom: 17px; font-size: clamp(3rem, 5.6vw, 5rem); letter-spacing: -0.065em; }
.student-hero h1 span { color: #bcaeff; }
.student-hero-grid > div > p { max-width: 690px; margin-bottom: 28px; color: #b9bfd0; }
.student-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.student-signout { border-color: rgba(255, 255, 255, 0.2); background: transparent; color: white; box-shadow: none; }
.student-signout:hover { background: rgba(255, 255, 255, 0.08); }
.student-auth-status { max-width: 520px; }
.student-account-card { display: grid; justify-items: center; padding: 33px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 25px; background: rgba(255, 255, 255, 0.08); box-shadow: 0 24px 50px rgba(9, 11, 24, 0.19); text-align: center; backdrop-filter: blur(10px); }
.student-account-avatar { display: grid; width: 74px; height: 74px; margin-bottom: 17px; place-items: center; border: 4px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: linear-gradient(135deg, #f5a561, #f17a65); color: white; font-family: "Manrope", sans-serif; font-size: 1.3rem; font-weight: 800; }
.student-account-card > div { display: grid; gap: 4px; }
.student-account-card small { color: #bcaeff; font-size: 0.57rem; font-weight: 800; letter-spacing: 0.1em; }
.student-account-card strong { font-family: "Manrope", sans-serif; font-size: 1.25rem; }
.student-account-card div span { color: #c5cada; font-size: 0.7rem; }
.account-secure-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 21px; padding: 7px 11px; border-radius: 999px; background: rgba(71, 204, 150, 0.13); color: #8fe0bb; font-size: 0.6rem; font-weight: 800; }
.student-dashboard { padding-top: 72px; padding-bottom: 88px; }
.student-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.student-section-heading h2 { margin-bottom: 0; }
.local-data-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; background: white; color: var(--ink-soft); font-size: 0.62rem; font-weight: 700; }
.local-data-badge > span { color: #49be88; }
.student-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 20px; }
.student-metrics article { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: white; box-shadow: var(--shadow-small); }
.student-metric-icon { display: grid; flex: 0 0 auto; width: 43px; height: 43px; place-items: center; border-radius: 13px; font-weight: 800; }
.student-metric-icon.purple { background: #eee9ff; color: var(--purple); }
.student-metric-icon.blue { background: #e5f1ff; color: #3579c5; }
.student-metric-icon.green { background: #e5f7ee; color: #279766; }
.student-metric-icon.orange { background: #fff0df; color: #b96a1f; }
.student-metrics article > div { display: grid; min-width: 0; }
.student-metrics strong { font-family: "Manrope", sans-serif; font-size: 1.25rem; }
.student-metrics small { overflow: hidden; color: var(--ink-soft); font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }
.student-content-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 20px; }
.student-panel { padding: 29px; border: 1px solid var(--border); border-radius: 22px; background: white; box-shadow: var(--shadow-small); }
.student-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.student-panel-heading h3 { margin: 0; font-size: 1.27rem; }
.student-panel > p { margin-bottom: 24px; color: var(--ink-soft); font-size: 0.78rem; }
.feature-state { padding: 6px 9px; border-radius: 999px; background: #f0eef6; color: #737486; font-size: 0.55rem; font-weight: 800; white-space: nowrap; }
.feature-state.ready { background: #e7f7ef; color: #237e57; }
.student-progress-copy { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--ink-soft); font-size: 0.68rem; font-weight: 700; }
.student-progress-copy strong { color: var(--ink); }
.learning-panel .progress-track { margin-bottom: 22px; }
.student-feature-list { display: grid; gap: 16px; padding: 0; margin: 0; list-style: none; }
.student-feature-list li { display: flex; gap: 13px; }
.student-feature-list li > span { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: #f0edff; color: var(--purple); font-weight: 800; }
.student-feature-list div { display: grid; gap: 2px; }
.student-feature-list strong { font-size: 0.76rem; }
.student-feature-list small { color: var(--ink-soft); font-size: 0.65rem; line-height: 1.45; }

@media (max-width: 980px) {
  .auth-main { grid-template-columns: 1fr 390px; gap: 45px; }
  .auth-promise h1 { font-size: clamp(3rem, 7vw, 4.7rem); }
  .student-hero-grid { grid-template-columns: 1fr 330px; gap: 40px; }
  .student-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .auth-header { min-height: 74px; }
  .auth-main { grid-template-columns: 1fr; gap: 42px; padding-top: 45px; }
  .auth-promise { text-align: center; }
  .auth-promise > p, .auth-benefits { margin-right: auto; margin-left: auto; }
  .auth-benefits { text-align: left; }
  .auth-card { width: min(100%, 520px); margin-inline: auto; }
  .student-hero-grid, .student-content-grid { grid-template-columns: 1fr; }
  .student-account-card { max-width: 470px; }
  .student-section-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .auth-back-link { font-size: 0; }
  .auth-back-link span { font-size: 1rem; }
  .auth-main { padding-top: 28px; padding-bottom: 55px; }
  .auth-promise h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
  .auth-card { padding: 29px 22px; border-radius: 23px; }
  .student-hero { padding: 59px 0 64px; }
  .student-hero-actions { flex-direction: column; align-items: stretch; }
  .student-hero-actions .button { width: 100%; }
  .student-account-card { padding: 27px 20px; }
  .student-metrics { grid-template-columns: 1fr; }
  .student-panel { padding: 24px 20px; }
  .student-panel-heading { flex-direction: column; }
}