@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap');

:root {
  --ink: #172033;
  --muted: #637083;
  --blue: #2166d1;
  --blue-soft: #eaf2ff;
  --violet: #6d3ed1;
  --violet-soft: #f1ebff;
  --orange: #cb6d14;
  --orange-soft: #fff1df;
  --green: #13835c;
  --green-soft: #e6f7ef;
  --line: #dce3ee;
  --paper: #fbfcff;
}

.reveal { color: var(--ink); font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 31px; }
.reveal .slides { text-align: left; }
.reveal .slides section { box-sizing: border-box; padding: 12px 34px; }
.reveal h1, .reveal h2, .reveal h3 { color: var(--ink); font-family: Outfit, system-ui, sans-serif; letter-spacing: -0.03em; }
.reveal h1 { font-size: 2.25em; line-height: 1.03; margin: 0; }
.reveal h2 { border-bottom: 2px solid var(--line); font-size: 1.5em; line-height: 1.1; margin: 0 0 .55em; padding-bottom: .22em; }
.reveal h3 { font-size: 1.02em; margin: .1em 0 .25em; }
.reveal p { font-size: .86em; line-height: 1.32; margin: .3em 0; }
.reveal ul { font-size: .82em; line-height: 1.3; margin: .35em 0 .2em .9em; }
.reveal li { margin: .18em 0; }
.reveal table { font-size: .72em; margin: .3em 0; width: 100%; }
.reveal table th { background: #edf2f8; color: #27364d; padding: .4em .55em; }
.reveal table td { border-bottom: 1px solid var(--line); padding: .38em .55em; }

.reveal .columns { align-items: center; display: flex !important; gap: 1.5rem; }
.reveal .column { box-sizing: border-box; }
.eyebrow { color: var(--blue); font-family: Outfit, sans-serif; font-size: .56em; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.subtitle { color: var(--muted); font-size: 1.05em !important; margin-top: .55em !important; }
.speaker { border-left: 3px solid var(--blue); font-size: .72em !important; margin-top: 1.4em !important; padding-left: .7em; }
.slide-capa { background: radial-gradient(circle at 86% 15%, #e6efff 0, transparent 32%), linear-gradient(135deg, #fff 0%, #f7faff 100%); }
.slide-capa h1 span { color: var(--blue); }
.slide-section { background: linear-gradient(135deg, #15213a, #1f5fc7); color: white; }
.slide-section h2, .slide-section h3 { border: 0; color: white; }
.slide-section p { color: #d9e6ff; }
.section-number { color: #a9c8ff; font-family: Outfit, sans-serif; font-size: .7em; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }

.quote { background: var(--paper); border-left: 5px solid var(--blue); border-radius: 0 10px 10px 0; font-size: .89em; font-style: italic; line-height: 1.3; margin-top: .7em; padding: .55em .8em; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-sizing: border-box; padding: .62em .75em; }
.card p { font-size: .72em; }
.problem-code { color: #ca3d35; font-family: Outfit, sans-serif; font-size: 1.55em; font-weight: 700; letter-spacing: .02em; }
.solution-code { color: var(--green); font-family: Outfit, sans-serif; font-size: 1.55em; font-weight: 700; letter-spacing: .02em; }
.comparison { display: grid; gap: .55em; grid-template-columns: 1fr 1fr; }
.comparison .card:first-child { border-top: 5px solid #e06a5f; }
.comparison .card:last-child { border-top: 5px solid var(--blue); }

.layers { display: grid; gap: .42em; margin-top: .45em; }
.layer { align-items: center; border-radius: 8px; display: flex; font-family: Outfit, sans-serif; font-size: .7em; font-weight: 600; justify-content: space-between; padding: .55em .75em; }
.layer small { font-family: 'Source Sans 3', sans-serif; font-size: .88em; font-weight: 400; }
.layer-description { background: var(--blue-soft); color: #174b9b; }
.layer-pedagogy { background: var(--violet-soft); color: #5b2db2; }
.layer-evaluation { background: var(--orange-soft); color: #98510c; }
.schema { background: #172033; border-radius: 12px; color: #eaf2ff; font-family: ui-monospace, monospace; font-size: .58em; line-height: 1.5; padding: .9em; white-space: pre-wrap; }

.types { display: grid; gap: .4em; grid-template-columns: 1fr 1fr; }
.type { border-left: 5px solid; border-radius: 8px; padding: .42em .6em; }
.type strong { display: block; font-family: Outfit, sans-serif; font-size: .72em; }
.type span { display: block; font-size: .62em; line-height: 1.15; }
.sample { background: var(--blue-soft); border-color: var(--blue); }
.functional { background: var(--green-soft); border-color: var(--green); }
.misconception { background: var(--orange-soft); border-color: var(--orange); }
.performance { background: var(--violet-soft); border-color: var(--violet); }

.flow { align-items: center; display: flex; gap: .25em; justify-content: center; margin: 1.1em 0 .7em; }
.flow-step { border: 2px solid; border-radius: 9px; font-family: Outfit, sans-serif; font-size: .56em; font-weight: 600; padding: .55em .45em; text-align: center; }
.flow-arrow { color: var(--muted); font-size: .78em; }
.flow-sample { background: var(--blue-soft); border-color: var(--blue); }
.flow-functional { background: var(--green-soft); border-color: var(--green); }
.flow-misconception { background: var(--orange-soft); border-color: var(--orange); }
.flow-performance { background: var(--violet-soft); border-color: var(--violet); }
.flow-ac { background: #eef8d9; border-color: #6a9d24; }

.metric-grid { display: grid; gap: .6em; grid-template-columns: repeat(3, 1fr); margin-top: .65em; }
.metric { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: .6em; text-align: center; }
.metric-value { color: var(--blue); font-family: Outfit, sans-serif; font-size: 1.55em; font-weight: 700; line-height: 1; }
.metric-label { color: var(--muted); font-size: .55em; line-height: 1.15; margin-top: .45em; }
.bar { background: #e7edf5; border-radius: 999px; height: 16px; margin: .65em 0 .25em; overflow: hidden; }
.bar > span { display: block; height: 100%; }
.bar-performance { background: var(--violet); width: 27.45%; }
.bar-misconception { background: var(--orange); width: 10.86%; }
.bar-functional { background: var(--blue); width: 61.68%; }
.legend { align-items: center; display: flex; font-size: .56em; gap: 1em; justify-content: center; }
.dot { border-radius: 50%; display: inline-block; height: .65em; margin-right: .25em; width: .65em; }
.footer-links { font-size: .64em; line-height: 1.55; margin-top: 1em; }

@media print {
  .reveal .slides > section { display: flex !important; flex-direction: column; height: 100vh !important; justify-content: center; overflow: hidden; padding: 30px 48px !important; }
  .reveal .controls, .reveal .progress, .reveal .slide-number { display: none !important; }
}