:root {
  /* Paleta da Cartilha do(a) Participante Enem 2026 (Inep) */
  --enem-red: #ef4036;      /* vermelho dos títulos da cartilha */
  --red-ink: #c8302a;       /* vermelho para texto pequeno e botões (contraste AA) */
  --red-deep: #a3241e;      /* hover */
  --coral: #f68f75;
  --salmon: #f9b29c;
  --peach: #fdd7c8;         /* fundo das capas e aberturas de capítulo */
  --peach-soft: #feece5;
  --navy: #004b8d;          /* azul da cartilha */
  --navy-deep: #003768;
  --blue: #32619e;
  --blue-mid: #5f7cb1;
  --lavender: #8b9dc7;
  --lavender-light: #bdc7e0;
  --lavender-soft: #e9edf6;
  --success: #17813f;
  --success-soft: #e3f3e9;

  --ink: #231f20;           /* preto do texto da cartilha */
  --ink-soft: #4a4546;
  --muted: #5f5b5c;
  --paper: #fff8f5;
  --paper-deep: #feece5;
  --card: #ffffff;
  --line: #f3d3c7;
  --line-strong: #f9b29c;

  /* nomes antigos mantidos como apelidos para não quebrar regras existentes */
  --blue-accent: var(--red-ink);
  --blue-dark: var(--navy);
  --denim: var(--blue-mid);
  --gold: var(--coral);

  --shadow: 0 24px 70px rgba(35, 31, 32, 0.08);
  --display: "Source Sans 3", "Source Sans Pro", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --sans: "Source Sans 3", "Source Sans Pro", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif; /* só no texto das redações */
  /* Mosaico geométrico original inspirado na linguagem visual da cartilha
     (quadrados, quartos de círculo e triângulos em vermelho, coral, azul e lilás). */
  --geo-strip:
    radial-gradient(circle at 100% 100%, var(--navy) 0 40%, var(--lavender) 40% 62%, transparent 62%) 0 0 / 33.34% 50% no-repeat,
    linear-gradient(var(--coral), var(--coral)) 50% 0 / 33.34% 50% no-repeat,
    linear-gradient(135deg, var(--peach) 50%, var(--navy) 50%) 100% 0 / 33.34% 50% no-repeat,
    linear-gradient(var(--lavender-light), var(--lavender-light)) 0 100% / 33.34% 50% no-repeat,
    radial-gradient(circle at 50% 50%, var(--enem-red) 0 28%, var(--salmon) 28% 44%, var(--peach) 44%) 50% 100% / 33.34% 50% no-repeat,
    linear-gradient(var(--blue-mid), var(--blue-mid)) 100% 100% / 33.34% 50% no-repeat;
}

* { box-sizing: border-box; }
/* Regras de classe como .auth-form { display: grid } vencem o [hidden] do navegador. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  line-height: 1.55;
}
button, textarea, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.auth-screen {
  min-height: 100vh;
  padding: 32px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, var(--peach) 0%, var(--peach) 48%, var(--paper) 48%, var(--paper) 100%);
}
.auth-panel {
  width: min(100%, 520px);
  padding: clamp(30px, 5vw, 54px);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  gap: 28px;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ink);
}
.auth-brand strong { display: block; font: 900 23px var(--display); }
.auth-brand small { display: block; color: #5f5b5c; font-size: 11px; margin-top: 2px; }
.auth-panel h1 { font-size: clamp(38px, 5vw, 58px); margin-bottom: 14px; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 8px; color: #5f5b5c; font-size: 12px; font-weight: 750; }
.auth-form input {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 14px 15px;
  outline: none;
}
.auth-form input:focus { border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(239, 64, 54, .12); }
.auth-error { min-height: 20px; margin: 0; color: var(--blue-dark); font-size: 12px; }
.auth-link { justify-self: start; background: none; border: none; padding: 0; color: var(--blue-dark); font-size: 12px; font-weight: 750; cursor: pointer; }
.auth-link:hover { text-decoration: underline; }
.auth-link[disabled] { opacity: .5; cursor: default; text-decoration: none; }
.auth-step h1 { margin-top: 0; }
.auth-step > p { color: var(--ink-soft); margin: 0 0 24px; }
.auth-step > p.kicker { color: var(--blue-accent); margin-bottom: 16px; }
.auth-step > p.auth-hint { margin: 16px 0 0; color: #5f5b5c; font-size: 12px; }
.auth-form .code-input {
  font: 800 clamp(21px, 6.5vw, 30px)/1.2 var(--sans);
  letter-spacing: clamp(5px, 2.4vw, 13px);
  text-indent: clamp(5px, 2.4vw, 13px);
  text-align: center;
  padding: 18px 12px;
}
.auth-form .code-input::placeholder { color: #d9c9c3; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 20px; }
.auth-actions .auth-link { justify-self: auto; }
.button[disabled] { opacity: .6; pointer-events: none; }
body.is-authenticated .auth-screen { display: none; }
body:not(.is-authenticated) .app-shell { display: none; }
/* Amostra gratuita: o app aparece sem conta, com o conteudo pago trancado. */
body.is-preview .auth-screen { display: none; }
body.is-preview .app-shell { display: grid; }
body.is-preview #logout-button { display: none; }
body:not(.is-preview) #login-button { display: none; }
.topbar #login-button { padding: 10px 18px; }
.main-nav a.locked { opacity: .5; }
.main-nav a.locked::after { content: "🔒"; margin-left: auto; font-size: 10px; }
.module-card.locked { opacity: .74; }
.lesson-summary a.locked { opacity: .55; }
.lesson-summary a.locked::after { content: " 🔒"; font-size: 10px; }
.paywall-card, .preview-banner {
  background: var(--navy);
  color: #fff8f5;
  padding: clamp(28px, 4vw, 46px);
  box-shadow: var(--shadow);
  margin: 34px 0;
}
.paywall-card h2, .preview-banner h2 { color: #fff; margin-bottom: 12px; }
.paywall-card p, .preview-banner p { color: #e9edf6; max-width: 620px; margin-bottom: 0; }
.paywall-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 26px; }
.paywall-actions .button-primary { background: var(--paper); color: var(--ink); }
.paywall-actions .text-button { color: #fdd7c8; }
.paywall-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 620px; }
.paywall-list li { color: #e9edf6; font-size: 14px; padding-left: 22px; position: relative; }
.paywall-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--blue-accent); }
.paywall-list strong { color: #fff8f5; }
.paywall-fineprint { margin: 20px 0 0; font-size: 12px; }
.paywall-fineprint a { color: #bdc7e0; text-decoration: underline; text-underline-offset: 4px; }
.paywall-fineprint a:hover { color: #fdd7c8; }
/* Captura de e-mail da amostra: pedido secundario, logo abaixo do
   convite de compra. Fica claro de proposito, para nao competir com o
   card escuro que vende. */
.lead-card {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  padding: clamp(24px, 3.4vw, 38px);
  margin: -18px 0 34px;
}
.lead-card .kicker { color: var(--blue-accent); }
.lead-card h2 { margin-bottom: 10px; }
.lead-card > p { color: var(--ink-soft); max-width: 620px; margin: 0; }
.lead-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.lead-fields input {
  flex: 1 1 260px;
  min-width: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 14px 15px;
  outline: none;
}
.lead-fields input:focus { border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(239, 64, 54, .12); }
.lead-feedback { min-height: 20px; margin: 10px 0 0; color: var(--blue-dark); font-size: 12px; }
.lead-skip {
  display: block;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  color: #5f5b5c;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.lead-skip:hover { text-decoration: underline; }
.lead-actions { margin: 22px 0 0; }
.lesson-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.lesson-nav .button { text-align: left; gap: 10px; }
.text-link-ink { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 4px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 260px;
  padding: 30px 22px;
  background: var(--navy);
  color: #fff8f5;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 13px; padding: 0 8px; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--enem-red); color: white; border: 0; font: 900 24px var(--display);
}
.brand strong { display: block; font: 900 21px var(--display); letter-spacing: .2px; }
.brand small, .sidebar-foot small { display: block; color: #bdc7e0; font-size: 11px; margin-top: 2px; }
.main-nav { display: grid; gap: 6px; margin-top: 72px; }
.main-nav a {
  padding: 13px 14px; border-radius: 4px; color: #dfe5f2; font-size: 14px;
  display: flex; align-items: center; gap: 14px; transition: .2s ease;
}
.main-nav a span { color: #8b9dc7; font-size: 10px; letter-spacing: 1px; }
.main-nav a:hover, .main-nav a.active { background: rgba(255,255,255,.08); color: white; }
.main-nav a.active span { color: #f9b29c; }
.sidebar-foot {
  margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding: 22px 8px 0;
  display: flex; align-items: center; gap: 12px;
}
.level-ring { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--blue-accent); display: grid; place-items: center; font-weight: 700; }

main { grid-column: 2; min-width: 0; }
.topbar {
  height: 74px; padding: 0 5vw; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; background: rgba(255,248,245,.92);
  backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 10;
}
.eyebrow, .kicker { text-transform: uppercase; letter-spacing: 1.4px; font-size: 12px; font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.offline-status { font-size: 11px; color: var(--success); padding-left: 14px; position: relative; }
.offline-status::before { content: ""; position: absolute; width: 7px; height: 7px; left: 0; top: 5px; border-radius: 50%; background: var(--success); }
.offline-status.offline { color: var(--blue-accent); }
.offline-status.offline::before { background: var(--blue-accent); }
.icon-button, .menu-button, .text-button {
  border: 0; background: none; color: inherit; cursor: pointer; font-size: 12px; text-decoration: underline;
  text-underline-offset: 4px;
}
.menu-button { display: none; align-items: center; gap: 9px; text-decoration: none; }
.menu-icon { width: 18px; height: 13px; fill: currentColor; flex: none; }

.page { padding: 54px 5vw 80px; max-width: 1500px; margin: 0 auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; }
h1 { font-size: clamp(36px, 4.6vw, 62px); letter-spacing: -1px; font-weight: 900; color: var(--enem-red); }
h2 { font-size: clamp(26px, 2.8vw, 40px); letter-spacing: -.5px; font-weight: 800; }
h3 { font-size: 22px; font-weight: 700; }
p { color: var(--ink-soft); }
.kicker { color: var(--red-ink); margin-bottom: 16px; font-family: var(--sans); }
.quiet { color: #5f5b5c; font-size: 12px; }
.button {
  border: 0; padding: 13px 19px; border-radius: 2px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 750; font-size: 12px; letter-spacing: .3px;
}
.button-primary { background: var(--red-ink); color: white; }
.button-primary:hover { background: var(--red-deep); }
.button-light { background: var(--paper); color: var(--ink); }
.button-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.text-link { color: white; font-size: 12px; text-decoration: underline; text-underline-offset: 5px; }
.hidden { display: none !important; }

.hero-grid { display: grid; grid-template-columns: 1.7fr .8fr; gap: 18px; }
.hero-card {
  min-height: 410px; padding: clamp(32px, 5vw, 68px); background: var(--enem-red); color: white; box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
}
.hero-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 180px; height: 120px; background: var(--geo-strip); opacity: .9; }
.hero-card h1 { color: white; }
.hero-card h1 { max-width: 760px; font-size: clamp(42px, 5vw, 72px); }
.hero-card p:not(.kicker) { color: #fff1ec; max-width: 600px; }
.hero-card .kicker { color: var(--peach); }
.hero-card .button-primary { background: white; color: var(--red-ink); }
.hero-card .button-primary:hover { background: var(--peach); }
.hero-actions { display: flex; gap: 24px; align-items: center; position: relative; z-index: 2; }
.progress-card {
  min-height: 410px; background: var(--card); border: 1px solid var(--line); padding: 38px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.big-progress strong { display: block; font: 900 82px var(--display); letter-spacing: -5px; }
.big-progress span { color: #5f5b5c; font-size: 13px; }
.progress-track { height: 5px; background: var(--paper-deep); overflow: hidden; }
.progress-track i { display: block; height: 100%; width: 0; background: var(--blue-accent); transition: width .6s ease; }
.progress-meta { display: flex; justify-content: space-between; font-size: 12px; color: #5f5b5c; }
.progress-meta b { color: var(--ink); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 68px 0 24px; }
.section-heading h2 { margin-bottom: 0; }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.content-card { padding: 30px; border: 1px solid var(--line); background: rgba(255,255,255,.38); min-height: 310px; display: flex; flex-direction: column; }
.content-card.featured { background: var(--card); box-shadow: var(--shadow); }
.card-index { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: #5f5b5c; }
.card-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: white; display: grid; place-items: center; margin: 28px 0; font: 900 20px var(--display); }
.card-icon.blue-accent { background: var(--blue-accent); font-size: 13px; font-family: var(--sans); font-weight: 800; }
.content-card h3 { margin-bottom: 10px; }
.content-card p { font-size: 13px; }
.card-link { margin-top: auto; border-top: 1px solid var(--line); padding-top: 17px; font-weight: 700; font-size: 12px; display: flex; justify-content: space-between; }
.seal { width: 72px; height: 72px; border: 1px solid var(--gold); color: var(--gold); border-radius: 50%; display: grid; place-items: center; margin: 24px 0; font: 900 24px var(--display); }
.source-note { display: grid; grid-template-columns: 180px 1fr; gap: 30px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 11px; }
.source-note p { margin: 0; }

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.module-card {
  min-height: 420px;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 44px rgba(35, 31, 32, 0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.module-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(239, 64, 54, .55);
}
.module-card.completed {
  background: linear-gradient(180deg, #ffffff 0%, var(--peach-soft) 100%);
}
.module-card-number {
  width: 70px;
  height: 70px;
  margin: 30px 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  font: 900 32px var(--display);
}
.module-card.completed .module-card-number { background: var(--enem-red); }
.module-card h2 { font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; margin-bottom: 14px; }
.module-card p { font-size: 14px; }
.competency-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}
.competency-chips span {
  border: 1px solid var(--lavender-light);
  color: var(--navy);
  background: var(--lavender-soft);
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .8px;
}
.header-chips {
  justify-content: flex-end;
  margin-bottom: 10px;
}
.module-header-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}
.competency-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -22px 0 34px;
}
.competency-legend span {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 9px 11px;
  color: var(--ink-soft);
  font-size: 11px;
}
.competency-legend b {
  color: var(--blue-dark);
  margin-right: 5px;
}
.examples-source { margin: -20px 0 36px; }
.examples-study-guide {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: start;
  background: var(--peach);
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 38px);
  margin: 0 0 32px;
}
.examples-study-guide h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  margin: 0 0 12px;
}
.examples-study-guide > div > p:last-child {
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
}
.guide-competencies {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.guide-competencies article {
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  padding: 16px;
}
.guide-competencies span {
  display: inline-flex;
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.guide-competencies strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 8px;
}
.guide-competencies p {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}
.essay-browser {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(22px, 4vw, 42px);
  align-items: start;
}
.essay-index {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 10px;
}
.essay-index > strong {
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.essay-index a {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.58);
  color: var(--ink);
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 750;
}
.essay-index a.active {
  background: var(--blue-accent);
  border-color: var(--blue-accent);
  color: #fff;
}
.essay-index span {
  color: var(--blue-dark);
  font-weight: 900;
}
.essay-index a.active span { color: #fff; }
.essay-reader { display: grid; gap: 26px; }
.essay-example-card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 42px);
  box-shadow: 0 18px 56px rgba(35, 31, 32, 0.06);
  scroll-margin-top: 110px;
}
.example-card-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  color: var(--blue-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: 850;
}
.essay-example-card h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 24px; }
.essay-study-prompt {
  max-width: 760px;
  color: var(--ink-soft);
  font: 16px/1.7 var(--sans);
  margin: -10px 0 26px;
}
.essay-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
.essay-transcript,
.official-commentary {
  border: 1px solid var(--lavender-light);
  background: var(--lavender-soft);
  padding: clamp(22px, 3vw, 32px);
}
.official-commentary { background: var(--peach-soft); border-color: var(--line); }
.essay-transcript h3,
.official-commentary h3 {
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 18px;
}
.essay-transcript p,
.official-commentary p {
  color: var(--ink-soft);
  font: 16px/1.82 var(--serif);
  margin: 0 0 18px;
}
.essay-transcript p:last-child,
.official-commentary p:last-child {
  margin-bottom: 0;
}
.bonus-status-card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 36px);
  margin: -18px 0 24px;
  box-shadow: 0 18px 54px rgba(35, 31, 32, 0.06);
}
.bonus-status-card strong {
  display: block;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.bonus-status-card p {
  color: var(--ink-soft);
  max-width: 780px;
  margin: 0 0 6px;
}
.bonus-status-card.unlocked {
  border-color: rgba(95, 124, 177, .7);
  background: linear-gradient(135deg, rgba(95, 124, 177, .18), rgba(255,255,255,.72));
}
.bonus-app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.bonus-app-card {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 28px;
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 280px;
  box-shadow: 0 18px 54px rgba(35, 31, 32, 0.05);
}
.bonus-app-card.locked {
  opacity: .72;
  background: rgba(255,255,255,.54);
}
.bonus-app-card span {
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.bonus-app-card h2 {
  font-size: clamp(25px, 3vw, 34px);
  margin: 0;
}
.bonus-app-card p {
  color: var(--ink-soft);
  margin: 0;
}
.bonus-app-card .button {
  align-self: end;
  width: max-content;
  margin-top: 8px;
}
.essay-navigation {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
}
.essay-navigation a {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
  color: var(--blue-dark);
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 850;
}

.page-header { display: flex; justify-content: space-between; align-items: end; border-bottom: 2px dotted var(--enem-red); padding-bottom: 38px; margin-bottom: 46px; }
.page-header h1 { margin-bottom: 8px; }
.page-header > div:first-child > p:last-child { max-width: 620px; margin-bottom: 0; }
.duration, .stat-chip { font-size: 12px; color: #5f5b5c; }
.stat-chip { display: flex; align-items: center; gap: 10px; max-width: 170px; }
.stat-chip strong { font: 900 48px var(--display); color: var(--blue-accent); }
.lesson-layout { display: grid; grid-template-columns: 220px minmax(0, 780px); gap: 7vw; justify-content: center; }
.module-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  color: #5f5b5c;
  font-size: 12px;
}
.lesson-summary { position: sticky; top: 110px; align-self: start; display: grid; gap: 12px; }
.lesson-summary a { border-bottom: 1px solid var(--line); padding: 10px 0; font-size: 12px; color: #5f5b5c; }
.lesson-menu-divider { margin: 22px 0 0; }
.lesson-content section { margin-bottom: 70px; scroll-margin-top: 110px; }
.lesson-content p { font: 19px/1.75 var(--sans); }
.module-break {
  margin-top: 110px;
  padding-top: 70px;
  border-top: 1px solid var(--line);
}
.module-break h1 {
  font-size: clamp(36px, 4vw, 56px);
  margin-bottom: 22px;
}
.chapter-number { color: var(--enem-red); font: 900 18px var(--display); }
blockquote { margin: 32px 0; padding: 26px 32px; border-left: 4px solid var(--enem-red); background: var(--peach-soft); font: italic 22px/1.5 var(--sans); }
.lesson-callout {
  border: 1px solid var(--line);
  border-left: 4px solid var(--enem-red);
  background: var(--peach-soft);
  padding: 24px;
  margin: 30px 0;
}
.lesson-callout strong {
  display: block;
  color: var(--blue-accent);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 10px;
  margin-bottom: 8px;
}
.lesson-callout p { font: 15px/1.7 var(--sans); margin: 0; }
.method-list { list-style: none; padding: 0; counter-reset: method; }
.method-list li { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; padding: 23px 0; border-top: 1px solid var(--line); }
.method-list li span { color: var(--ink-soft); font-size: 14px; }
.planner-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  margin-top: 34px;
}
.planner-steps article { background: var(--paper); padding: 24px; }
.planner-steps small, .comparison-grid small {
  color: var(--blue-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  font-weight: 800;
}
.planner-steps h3, .comparison-grid h3 { font: 900 20px var(--display); margin: 10px 0; }
.planner-steps p, .comparison-grid p, .mistake-list p, .mini-drill p { font: 13px/1.7 var(--sans); margin-bottom: 0; }
.comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0; }
.comparison-grid article { padding: 28px; border: 1px solid var(--line); background: var(--card); }
.comparison-grid .bad-example { border-left: 4px solid var(--enem-red); }
.comparison-grid .good-example { border-left: 4px solid var(--navy); }
.rubric-table { border-top: 1px solid var(--line); margin-top: 32px; }
.rubric-table div { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rubric-table strong { font-size: 13px; }
.rubric-table span { color: var(--ink-soft); font-size: 13px; }
.argument-formula {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 28px 0;
}
.argument-formula span {
  min-height: 92px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  background: var(--navy);
  color: white;
  font: 700 12px var(--sans);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.example-block { background: var(--navy); color: white; padding: 44px; }
.example-block h2 { color: white; }
.example-grid { display: grid; grid-template-columns: 1fr 1fr; }
.example-grid > div { padding: 24px; border: 1px solid rgba(255,255,255,.13); }
.example-grid small { color: #f9b29c; text-transform: uppercase; letter-spacing: 1px; }
.example-grid p { color: #eef1f8; font: 15px/1.6 var(--sans); margin: 8px 0 0; }
.exercise-block { border-top: 1px solid var(--line); padding-top: 50px; }
.mistake-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 28px 0; }
.mistake-list article { background: var(--card); border: 1px solid var(--line); padding: 22px; }
.mistake-list strong { display: block; margin-bottom: 8px; }
.checklist-card {
  background: var(--navy);
  color: white;
  padding: 28px;
  display: grid;
  gap: 12px;
}
.checklist-card h3 { margin-bottom: 8px; color: white; }
.checklist-card label { font-size: 13px; color: #eef1f8; display: flex; gap: 10px; align-items: flex-start; }
.quiz-options { display: grid; gap: 10px; }
.quiz-options button { text-align: left; padding: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.quiz-options button.correct { border-color: var(--success); background: var(--success-soft); }
.quiz-options button.wrong { border-color: var(--enem-red); background: var(--peach-soft); }
.quiz-feedback { margin-top: 16px; min-height: 24px; font-size: 13px !important; font-family: var(--sans) !important; }
.mini-drill { margin-top: 26px; border: 1px solid var(--line); padding: 24px; background: var(--card); }
.mini-drill h3 { margin-bottom: 8px; }

.simulations-grid { display: grid; gap: 18px; }
.simulation-card { display: grid; grid-template-columns: 120px 1fr; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 38px rgba(35, 31, 32, 0.05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.simulation-card:hover, .simulation-card.selected { transform: translateY(-2px); box-shadow: var(--shadow); border-color: rgba(239, 64, 54, .55); }
.simulation-number { display: grid; place-items: center; background: var(--enem-red); color: white; font: 900 70px var(--display); }
.simulation-body { padding: 32px; }
.simulation-body h2 { max-width: 780px; }
.tags { display: flex; gap: 8px; margin-bottom: 24px; }
.tags span { border: 1px solid var(--line); padding: 5px 9px; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }
.simulation-meta { display: flex; gap: 25px; margin: 24px 0; color: #5f5b5c; font-size: 12px; }
.prompt-panel { margin-top: 30px; background: var(--navy); color: white; padding: clamp(30px, 5vw, 60px); }
.prompt-heading { display: flex; justify-content: space-between; }
.motivators { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.15); margin: 30px 0; }
.motivators article { background: var(--navy); padding: 28px; }
.motivators small { color: #f9b29c; }
.motivators p, .prompt-command p { color: #e9edf6; font: 17px/1.65 var(--sans); }
.prompt-command { padding: 28px; border: 1px solid rgba(255,255,255,.17); margin-bottom: 25px; }
.prompt-command strong { text-transform: uppercase; letter-spacing: 1px; font-size: 10px; color: #f9b29c; }
.locked-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 34px; }
.locked-grid article { padding: 24px; border: 1px dashed #f9b29c; opacity: .68; }
.locked-grid span { color: var(--blue-accent); font: 900 24px var(--display); }
.locked-grid h3 { font-size: 18px; margin-top: 14px; }
.locked-grid p { font-size: 12px; }

.editor-header { align-items: center; }
.editor-tools { display: flex; gap: 15px; align-items: center; }
.timer { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); padding: 9px 12px; }
.timer span { font-family: ui-monospace, monospace; }
.timer button { border: 0; background: none; text-decoration: underline; cursor: pointer; font-size: 10px; }
.writing-layout { display: grid; grid-template-columns: 300px minmax(0, 850px); gap: 28px; justify-content: center; align-items: start; }
.planning-panel { background: var(--navy); color: white; padding: 26px; }
.planning-panel label { display: grid; gap: 7px; margin-top: 18px; font-size: 11px; color: #dfe5f2; }
.planning-panel textarea { width: 100%; resize: vertical; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: white; padding: 10px; outline: none; font-size: 12px; }
.planning-panel textarea:focus { border-color: #f9b29c; }
.paper-wrap { background: white; box-shadow: var(--shadow); }
.paper-top { min-height: 54px; border-bottom: 1px solid #f3d3c7; display: flex; justify-content: space-between; align-items: center; padding: 0 28px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #5f5b5c; }
.essay-paper {
  width: 100%; min-height: 900px; resize: vertical; border: 0; outline: 0; padding: 24px 36px 24px 64px;
  color: var(--ink); font: 18px/30px var(--serif);
  background: repeating-linear-gradient(to bottom, white 0, white 29px, var(--lavender-light) 30px);
}
.save-status { margin: 0; padding: 10px 28px; border-top: 1px solid #f3d3c7; font-size: 10px; text-align: right; }
.editor-footer { display: flex; justify-content: flex-end; align-items: center; gap: 22px; margin: 24px auto 0; max-width: 1178px; }
.editor-footer p { font-size: 11px; margin: 0; }
.assessment { margin-top: 80px; border-top: 1px solid var(--line); }
.competencies { display: grid; gap: 12px; }
.competency { display: grid; grid-template-columns: 70px 1fr 220px; align-items: center; gap: 20px; background: var(--card); border: 1px solid var(--line); padding: 20px; }
.competency-number { font: 900 34px var(--display); color: var(--blue-accent); }
.competency h3 { font: 18px var(--sans); font-weight: 750; margin-bottom: 5px; }
.competency p { font-size: 11px; margin: 0; }
.competency select { width: 100%; padding: 11px; border: 1px solid var(--line); background: white; color: var(--ink); }
.zero-check { margin-top: 25px; padding: 25px; border: 1px solid var(--line); display: grid; gap: 12px; }
.zero-check h3 { margin-bottom: 5px; }
.zero-check label { font-size: 12px; }
.assessment-result { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 28px; background: var(--navy); color: white; padding: 35px; margin-top: 24px; }
.assessment-result small { display: block; color: #fdd7c8; }
.assessment-result strong { font: 900 58px var(--display); }
.assessment-result strong i { font: 14px var(--sans); font-style: normal; }
.assessment-result p { color: white; margin: 0; }

.level-card { display: grid; min-width: 140px; text-align: right; }
.level-card strong { font: 900 68px var(--display); color: var(--blue-accent); line-height: 1; }
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.metrics-grid article { background: var(--card); border: 1px solid var(--line); padding: 24px; }
.metrics-grid span, .metrics-grid small { display: block; color: #5f5b5c; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.metrics-grid strong { display: block; font: 900 32px var(--display); margin: 20px 0 6px; }
.achievements-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.achievement { padding: 24px; border: 1px solid var(--line); display: grid; grid-template-columns: 54px 1fr; gap: 15px; align-items: center; }
.achievement.locked { opacity: .45; filter: grayscale(1); }
.achievement-badge { width: 54px; height: 54px; border: 1px solid var(--gold); color: var(--gold); display: grid; place-items: center; border-radius: 50%; font: 900 18px var(--display); }
.achievement h3 { font: 16px var(--sans); font-weight: 750; margin-bottom: 4px; }
.achievement p { font-size: 11px; margin: 0; }
.history-list { border-top: 1px solid var(--line); }
.history-item { display: grid; grid-template-columns: 1fr 130px 130px; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center; }
.history-item h3 { font: 16px var(--sans); font-weight: 750; margin: 0; }
.history-item p { font-size: 11px; margin: 4px 0 0; }
.empty-state { padding: 35px; border: 1px dashed var(--line); color: #5f5b5c; text-align: center; }
.backup-panel {
  margin-top: 44px;
  padding: 34px;
  background: var(--navy);
  color: white;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}
.backup-panel h2 { color: white; margin-bottom: 10px; }
.backup-panel p:not(.kicker) { color: #e9edf6; margin-bottom: 0; max-width: 680px; }
.backup-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.backup-panel .button-outline { color: white; border-color: rgba(255,255,255,.55); }
.backup-panel .button-primary { background: var(--paper); color: var(--ink); }
.toast { position: fixed; right: 25px; bottom: 25px; background: var(--navy); color: white; padding: 13px 18px; font-size: 12px; transform: translateY(100px); opacity: 0; transition: .25s; z-index: 50; }
.toast.show { transform: translateY(0); opacity: 1; }

body.high-contrast {
  --ink: #000000; --ink-soft: #231f20; --muted: #3a3536; --paper: #ffffff; --paper-deep: #fdd7c8;
  --red-ink: #a3241e; --enem-red: #b3261e; --navy: #002d57; --line: #9c8f8a;
}


/* ---------- Identidade visual Cartilha 2026 ---------- */
.official-commentary p { font: 16px/1.75 var(--sans); }
.competency .rubric-hint { grid-column: 2 / -1; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.competency h3 { color: var(--ink); }
.sidebar { background: var(--navy); }
.sidebar::after { content: ""; display: block; height: 56px; margin: 18px -22px -30px; background: var(--geo-strip); }
.main-nav a:hover, .main-nav a.active { background: rgba(255,255,255,.12); color: white; box-shadow: inset 3px 0 0 var(--enem-red); }
.level-ring { border-color: var(--salmon); }
.auth-panel { border-top: 6px solid var(--enem-red); }
.auth-brand .brand-mark { background: var(--enem-red); color: white; font: 900 24px var(--display); }
.auth-brand strong, .brand strong { font-family: var(--display); font-weight: 900; }
.section-heading h2, .page-header h1 { text-wrap: balance; }
.section-heading { border-bottom: 2px dotted var(--enem-red); padding-bottom: 14px; }
.module-card h2, .simulation-body h2, .essay-example-card h2 { color: var(--ink); }
.module-card-number { background: var(--navy); }
.paywall-card .kicker, .preview-banner .kicker, .checklist-card .kicker, .backup-panel .kicker, .planning-panel .kicker, .prompt-panel .kicker { color: var(--salmon); }
.paywall-list li::before { background: var(--enem-red); }
.paywall-actions .button-primary { background: var(--enem-red); color: white; }
.paywall-actions .button-primary:hover { background: var(--red-deep); }
.content-card.featured { border-top: 4px solid var(--enem-red); }
.card-icon { background: var(--navy); }
.card-icon.blue-accent { background: var(--enem-red); }
.progress-track { background: var(--peach); }
.progress-track i { background: var(--enem-red); }
.big-progress strong, .stat-chip strong, .level-card strong, .competency-number { color: var(--enem-red); }
.essay-index a.active { background: var(--enem-red); border-color: var(--enem-red); }
.essay-transcript h3 { color: var(--navy); }
.official-commentary h3 { color: var(--red-ink); }
.assessment-result small { color: var(--lavender-light); }
.toast { background: var(--navy); }
.planning-panel textarea::placeholder { color: rgba(255,255,255,.62); }
.quiz-options button:hover { border-color: var(--line-strong); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
@media (max-width: 700px) {
  .competency .rubric-hint { grid-column: 1 / -1; }
}

/* ---------- Selo-carimbo "Cartilha do Participante 2026" ---------- */
.cartilha-seal { width: 64px; height: 64px; flex: none; display: block; color: var(--red-ink); transform: rotate(-10deg); font-family: var(--display); }
.cartilha-seal text { font-family: inherit; }
.topbar .cartilha-seal { margin: 0 auto 0 18px; }
.auth-brand .cartilha-seal { margin-left: auto; width: 80px; height: 80px; }
@media (max-width: 700px) {
  .topbar .cartilha-seal { width: 50px; height: 50px; margin-left: 12px; }
  .auth-brand .cartilha-seal { width: 64px; height: 64px; }
}

@media (max-width: 1050px) {
  .app-shell { grid-template-columns: 1fr; }
  main { grid-column: 1; }
  .sidebar { transform: translateX(-100%); transition: transform .25s; box-shadow: 25px 0 80px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .sidebar:not(.open) { box-shadow: none; }
  .menu-button { display: flex; }
  .eyebrow { display: none; }
  .hero-grid, .writing-layout { grid-template-columns: 1fr; }
  .cards-grid, .metrics-grid { grid-template-columns: 1fr 1fr; }
  .examples-study-guide { grid-template-columns: 1fr; }
  .guide-competencies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .essay-browser { grid-template-columns: 1fr; }
  .essay-index { position: static; }
  .bonus-app-grid { grid-template-columns: 1fr; }
  .planning-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
  .planning-panel .kicker { grid-column: 1/-1; }
}

@media (max-width: 700px) {
  .page { padding: 35px 18px 60px; }
  .topbar { padding: 0 18px; }
  h1 { font-size: 42px; letter-spacing: -1.5px; }
  .hero-card, .progress-card { min-height: 360px; }
  .hero-actions, .page-header, .editor-tools, .editor-footer { align-items: stretch; flex-direction: column; }
  .cards-grid, .metrics-grid, .achievements-grid, .locked-grid, .motivators, .example-grid, .backup-panel, .planner-steps, .comparison-grid, .argument-formula, .mistake-list, .modules-grid, .essay-columns { grid-template-columns: 1fr; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-summary { position: static; display: flex; overflow-x: auto; }
  .lesson-summary .kicker { display: none; }
  .lesson-summary a { white-space: nowrap; }
  .method-list li { grid-template-columns: 1fr; gap: 8px; }
  .rubric-table div { grid-template-columns: 1fr; gap: 6px; }
  .simulation-card { grid-template-columns: 1fr; }
  .simulation-number { height: 100px; }
  .simulation-body { padding: 26px; }
  .simulation-meta { flex-direction: column; gap: 6px; }
  .planning-panel { grid-template-columns: 1fr; }
  .essay-paper { padding-left: 28px; font-size: 16px; }
  .guide-competencies { grid-template-columns: 1fr; }
  .competency { grid-template-columns: 48px 1fr; }
  .competency select { grid-column: 1/-1; }
  .assessment-result { grid-template-columns: 1fr; }
  .history-item { grid-template-columns: 1fr; gap: 4px; }
  .source-note { grid-template-columns: 1fr; gap: 8px; }
}

@media print {
  .sidebar, .topbar, .editor-header, .planning-panel, .editor-footer, .assessment, .save-status { display: none !important; }
  .app-shell, main, .writing-layout { display: block; }
  body, .page { background: white; padding: 0; }
  .paper-wrap { box-shadow: none; }
  .paper-top { border: 0; padding: 0 0 20px; }
  .essay-paper { min-height: auto; height: auto; overflow: visible; padding: 0; background: white; }
}